fix: Wire vehicleId into maintenance page to display schedules (refs #148)

Maintenance page called useMaintenanceRecords() without a vehicleId,
causing the schedules query (enabled: !!vehicleId) to never execute.
Added vehicle selector to both desktop and mobile pages, auto-selects
first vehicle, and passes selectedVehicleId to the hook. Also fixed
stale query invalidation keys in delete handlers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/features/maintenance/pages/MaintenancePage.tsx

@@ -3,8 +3,8 @@
  * @ai-context Two-column responsive layout following fuel-logs pattern
  */
 
-import React, { useState } from 'react';
-import { Grid, Typography, Box, Tabs, Tab } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { Grid, Typography, Box, Tabs, Tab, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import { MaintenanceRecordForm } from '../components/MaintenanceRecordForm';
 import { MaintenanceRecordsList } from '../components/MaintenanceRecordsList';
@@ -13,13 +13,24 @@ import { MaintenanceScheduleForm } from '../components/MaintenanceScheduleForm';
 import { MaintenanceSchedulesList } from '../components/MaintenanceSchedulesList';
 import { MaintenanceScheduleEditDialog } from '../components/MaintenanceScheduleEditDialog';
 import { useMaintenanceRecords } from '../hooks/useMaintenanceRecords';
+import { useVehicles } from '../../vehicles/hooks/useVehicles';
 import { FormSuspense } from '../../../components/SuspenseWrappers';
 import type { MaintenanceRecordResponse, UpdateMaintenanceRecordRequest, MaintenanceScheduleResponse, UpdateScheduleRequest } from '../types/maintenance.types';
 
 export const MaintenancePage: React.FC = () => {
-  const { records, schedules, isRecordsLoading, isSchedulesLoading, recordsError, schedulesError, updateRecord, deleteRecord, updateSchedule, deleteSchedule } = useMaintenanceRecords();
+  const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles();
+  const [selectedVehicleId, setSelectedVehicleId] = useState<string>('');
   const queryClient = useQueryClient();
   const [activeTab, setActiveTab] = useState<'records' | 'schedules'>('records');
+
+  // Auto-select first vehicle when vehicles load
+  useEffect(() => {
+    if (vehicles && vehicles.length > 0 && !selectedVehicleId) {
+      setSelectedVehicleId(vehicles[0].id);
+    }
+  }, [vehicles, selectedVehicleId]);
+
+  const { records, schedules, isRecordsLoading, isSchedulesLoading, recordsError, schedulesError, updateRecord, deleteRecord, updateSchedule, deleteSchedule } = useMaintenanceRecords(selectedVehicleId || undefined);
   const [editingRecord, setEditingRecord] = useState<MaintenanceRecordResponse | null>(null);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [editingSchedule, setEditingSchedule] = useState<MaintenanceScheduleResponse | null>(null);
@@ -52,7 +63,7 @@ export const MaintenancePage: React.FC = () => {
     try {
       await deleteRecord(recordId);
       // Refetch queries after delete
-      queryClient.refetchQueries({ queryKey: ['maintenanceRecords', 'all'] });
+      queryClient.refetchQueries({ queryKey: ['maintenanceRecords'] });
     } catch (error) {
       console.error('Failed to delete maintenance record:', error);
     }
@@ -130,6 +141,31 @@ export const MaintenancePage: React.FC = () => {
 
   return (
     <FormSuspense>
+      {/* Vehicle Selector */}
+      <Box sx={{ mb: 3 }}>
+        <FormControl fullWidth>
+          <InputLabel id="maintenance-vehicle-select-label">Vehicle</InputLabel>
+          <Select
+            labelId="maintenance-vehicle-select-label"
+            value={selectedVehicleId}
+            onChange={(e) => setSelectedVehicleId(e.target.value as string)}
+            label="Vehicle"
+            disabled={isLoadingVehicles}
+            sx={{ minHeight: 56 }}
+          >
+            {vehicles && vehicles.length > 0 ? (
+              vehicles.map((vehicle) => (
+                <MenuItem key={vehicle.id} value={vehicle.id}>
+                  {vehicle.year} {vehicle.make} {vehicle.model}
+                </MenuItem>
+              ))
+            ) : (
+              <MenuItem disabled>No vehicles available</MenuItem>
+            )}
+          </Select>
+        </FormControl>
+      </Box>
+
       <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
         <Tabs
           value={activeTab}