fix: wire up Add Maintenance button on vehicle detail page (refs #194)

Rename "Schedule Maintenance" to "Add Maintenance", match contained
button style to "Add Fuel Log", and open inline MaintenanceRecordForm
dialog on click. Applied to both desktop and mobile views.

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

frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

@@ -3,13 +3,14 @@
  */
 
 import React, { useMemo, useState } from 'react';
-import { Box, Typography, Button, Card, CardContent, Divider, FormControl, InputLabel, Select, MenuItem, List, ListItem, ListItemButton } from '@mui/material';
+import { Box, Typography, Button, Card, CardContent, Divider, FormControl, InputLabel, Select, MenuItem, List, ListItem, ListItemButton, Dialog, DialogTitle, DialogContent } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import { Vehicle } from '../types/vehicles.types';
 import { useFuelLogs } from '../../fuel-logs/hooks/useFuelLogs';
 import { FuelLogResponse, UpdateFuelLogRequest } from '../../fuel-logs/types/fuel-logs.types';
 import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog';
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
+import { MaintenanceRecordForm } from '../../maintenance/components/MaintenanceRecordForm';
 import { VehicleImage } from '../components/VehicleImage';
 import { OwnershipCostsList } from '../../ownership-costs';
 import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
@@ -46,6 +47,7 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
   const { fuelLogs, isLoading: isFuelLoading } = useFuelLogs(vehicle.id);
   const queryClient = useQueryClient();
   const [editingLog, setEditingLog] = useState<FuelLogResponse | null>(null);
+  const [showMaintenanceDialog, setShowMaintenanceDialog] = useState(false);
   // Unit conversions are now handled by the backend
 
   type VehicleRecord = {
@@ -184,8 +186,11 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
         >
           Add Fuel
         </Button>
-        <Button variant="outlined">
-          Maintenance
+        <Button
+          variant="outlined"
+          onClick={() => setShowMaintenanceDialog(true)}
+        >
+          Add Maintenance
         </Button>
       </Box>
       
@@ -300,6 +305,32 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
         onClose={handleCloseEdit}
         onSave={handleSaveEdit}
       />
+
+      {/* Add Maintenance Dialog */}
+      <Dialog
+        open={showMaintenanceDialog}
+        onClose={() => setShowMaintenanceDialog(false)}
+        maxWidth="md"
+        fullWidth
+        fullScreen
+        PaperProps={{
+          sx: { maxHeight: '90vh' }
+        }}
+      >
+        <DialogTitle>Add Maintenance</DialogTitle>
+        <DialogContent>
+          <Box sx={{ mt: 1 }}>
+            <MaintenanceRecordForm
+              vehicleId={vehicle.id}
+              onSuccess={() => {
+                setShowMaintenanceDialog(false);
+                queryClient.invalidateQueries({ queryKey: ['maintenanceRecords', vehicle.id] });
+                queryClient.invalidateQueries({ queryKey: ['maintenanceRecords'] });
+              }}
+            />
+          </Box>
+        </DialogContent>
+      </Dialog>
     </Box>
   );
 };