feat: add document edit functionality with multi-vehicle support (refs #31)

Implemented comprehensive document editing capabilities:

1. Created EditDocumentDialog component:
   - Responsive MUI Dialog with fullScreen on mobile
   - Wraps DocumentForm in edit mode
   - Proper close handlers with refetch

2. Enhanced DocumentForm to support edit mode:
   - Added mode prop ('create' | 'edit')
   - Pre-populate all fields from initialValues
   - Use useUpdateDocument hook when in edit mode
   - Multi-select for shared vehicles (insurance only)
   - Vehicle and document type disabled in edit mode
   - Optional file upload in edit mode
   - Dynamic button text (Create/Save Changes)

3. Updated DocumentDetailPage:
   - Added Edit button with proper touch targets
   - Integrated EditDocumentDialog
   - Refetch document on successful edit

Mobile-first implementation:
- All touch targets >= 44px
- Dialog goes fullScreen on mobile
- Form fields stack on mobile
- Shared vehicle checkboxes have min-h-[44px]
- Buttons use flex-wrap for mobile overflow

Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/src/features/documents/components/DocumentForm.tsx

@@ -6,41 +6,81 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import dayjs from 'dayjs';
-import { useCreateDocument } from '../hooks/useDocuments';
+import { useCreateDocument, useUpdateDocument, useAddSharedVehicle, useRemoveVehicleFromDocument } from '../hooks/useDocuments';
 import { documentsApi } from '../api/documents.api';
-import type { DocumentType } from '../types/documents.types';
+import type { DocumentType, DocumentRecord } from '../types/documents.types';
 import { useVehicles } from '../../vehicles/hooks/useVehicles';
 import type { Vehicle } from '../../vehicles/types/vehicles.types';
 import { useTierAccess } from '../../../core/hooks/useTierAccess';
 
 interface DocumentFormProps {
+  mode?: 'create' | 'edit';
+  initialValues?: Partial<DocumentRecord>;
+  documentId?: string;
   onSuccess?: () => void;
   onCancel?: () => void;
 }
 
-export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel }) => {
-  const [documentType, setDocumentType] = React.useState<DocumentType>('insurance');
-  const [vehicleID, setVehicleID] = React.useState<string>('');
-  const [title, setTitle] = React.useState<string>('');
-  const [notes, setNotes] = React.useState<string>('');
+export const DocumentForm: React.FC<DocumentFormProps> = ({
+  mode = 'create',
+  initialValues,
+  documentId,
+  onSuccess,
+  onCancel
+}) => {
+  const [documentType, setDocumentType] = React.useState<DocumentType>(
+    initialValues?.documentType || 'insurance'
+  );
+  const [vehicleID, setVehicleID] = React.useState<string>(initialValues?.vehicleId || '');
+  const [title, setTitle] = React.useState<string>(initialValues?.title || '');
+  const [notes, setNotes] = React.useState<string>(initialValues?.notes || '');
 
   // Insurance fields
-  const [insuranceCompany, setInsuranceCompany] = React.useState<string>('');
-  const [policyNumber, setPolicyNumber] = React.useState<string>('');
-  const [effectiveDate, setEffectiveDate] = React.useState<string>('');
-  const [expirationDate, setExpirationDate] = React.useState<string>('');
-  const [bodilyInjuryPerson, setBodilyInjuryPerson] = React.useState<string>('');
-  const [bodilyInjuryIncident, setBodilyInjuryIncident] = React.useState<string>('');
-  const [propertyDamage, setPropertyDamage] = React.useState<string>('');
-  const [premium, setPremium] = React.useState<string>('');
+  const [insuranceCompany, setInsuranceCompany] = React.useState<string>(
+    initialValues?.details?.insuranceCompany || ''
+  );
+  const [policyNumber, setPolicyNumber] = React.useState<string>(
+    initialValues?.details?.policyNumber || ''
+  );
+  const [effectiveDate, setEffectiveDate] = React.useState<string>(
+    initialValues?.issuedDate || ''
+  );
+  const [expirationDate, setExpirationDate] = React.useState<string>(
+    initialValues?.expirationDate || ''
+  );
+  const [bodilyInjuryPerson, setBodilyInjuryPerson] = React.useState<string>(
+    initialValues?.details?.bodilyInjuryPerson || ''
+  );
+  const [bodilyInjuryIncident, setBodilyInjuryIncident] = React.useState<string>(
+    initialValues?.details?.bodilyInjuryIncident || ''
+  );
+  const [propertyDamage, setPropertyDamage] = React.useState<string>(
+    initialValues?.details?.propertyDamage || ''
+  );
+  const [premium, setPremium] = React.useState<string>(
+    initialValues?.details?.premium ? String(initialValues.details.premium) : ''
+  );
 
   // Registration fields
-  const [licensePlate, setLicensePlate] = React.useState<string>('');
-  const [registrationExpirationDate, setRegistrationExpirationDate] = React.useState<string>('');
-  const [registrationCost, setRegistrationCost] = React.useState<string>('');
+  const [licensePlate, setLicensePlate] = React.useState<string>(
+    initialValues?.details?.licensePlate || ''
+  );
+  const [registrationExpirationDate, setRegistrationExpirationDate] = React.useState<string>(
+    initialValues?.expirationDate || ''
+  );
+  const [registrationCost, setRegistrationCost] = React.useState<string>(
+    initialValues?.details?.cost ? String(initialValues.details.cost) : ''
+  );
 
   // Manual fields
-  const [scanForMaintenance, setScanForMaintenance] = React.useState<boolean>(false);
+  const [scanForMaintenance, setScanForMaintenance] = React.useState<boolean>(
+    initialValues?.scanForMaintenance || false
+  );
+
+  // Shared vehicles for edit mode
+  const [selectedSharedVehicles, setSelectedSharedVehicles] = React.useState<string[]>(
+    initialValues?.sharedVehicleIds || []
+  );
 
   const [file, setFile] = React.useState<File | null>(null);
   const [uploadProgress, setUploadProgress] = React.useState<number>(0);
@@ -49,6 +89,9 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
 
   const { data: vehicles } = useVehicles();
   const create = useCreateDocument();
+  const update = useUpdateDocument(documentId || '');
+  const addSharedVehicle = useAddSharedVehicle();
+  const removeSharedVehicle = useRemoveVehicleFromDocument();
   const { hasAccess } = useTierAccess();
   const canScanMaintenance = hasAccess('document.scanMaintenanceSchedule');
 
@@ -67,6 +110,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
     setRegistrationExpirationDate('');
     setRegistrationCost('');
     setScanForMaintenance(false);
+    setSelectedSharedVehicles([]);
     setFile(null);
     setUploadProgress(0);
     setError(null);
@@ -106,44 +150,100 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
       }
       // Manual type: no details or dates, just scanForMaintenance flag
 
-      const created = await create.mutateAsync({
-        vehicleId: vehicleID,
-        documentType: documentType,
-        title: title.trim(),
-        notes: notes.trim() || undefined,
-        details: Object.keys(details).length > 0 ? details : undefined,
-        issuedDate: issued_date,
-        expirationDate: expiration_date,
-        scanForMaintenance: documentType === 'manual' ? scanForMaintenance : undefined,
-      });
+      if (mode === 'edit' && documentId) {
+        // Update existing document
+        await update.mutateAsync({
+          title: title.trim(),
+          notes: notes.trim() || null,
+          details: Object.keys(details).length > 0 ? details : undefined,
+          issuedDate: issued_date || null,
+          expirationDate: expiration_date || null,
+          scanForMaintenance: documentType === 'manual' ? scanForMaintenance : undefined,
+        });
 
-      if (file) {
-        const allowed = new Set(['application/pdf', 'image/jpeg', 'image/png']);
-        if (!file.type || !allowed.has(file.type)) {
-          setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
-          return;
+        // Handle shared vehicles only for insurance documents
+        if (documentType === 'insurance') {
+          const currentSharedVehicleIds = initialValues?.sharedVehicleIds || [];
+
+          // Add new shared vehicles
+          const vehiclesToAdd = selectedSharedVehicles.filter(
+            id => !currentSharedVehicleIds.includes(id)
+          );
+          for (const vehicleId of vehiclesToAdd) {
+            await addSharedVehicle.mutateAsync({ docId: documentId, vehicleId });
+          }
+
+          // Remove unselected shared vehicles
+          const vehiclesToRemove = currentSharedVehicleIds.filter(
+            id => !selectedSharedVehicles.includes(id)
+          );
+          for (const vehicleId of vehiclesToRemove) {
+            await removeSharedVehicle.mutateAsync({ docId: documentId, vehicleId });
+          }
         }
-        try {
-          await documentsApi.uploadWithProgress(created.id, file, (pct) => setUploadProgress(pct));
-        } catch (uploadErr: any) {
-          const status = uploadErr?.response?.status;
-          if (status === 415) {
+
+        // Handle file upload if a new file was selected
+        if (file) {
+          const allowed = new Set(['application/pdf', 'image/jpeg', 'image/png']);
+          if (!file.type || !allowed.has(file.type)) {
             setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
             return;
           }
-          setError(uploadErr?.message || 'Failed to upload file');
-          return;
+          try {
+            await documentsApi.uploadWithProgress(documentId, file, (pct) => setUploadProgress(pct));
+          } catch (uploadErr: any) {
+            const status = uploadErr?.response?.status;
+            if (status === 415) {
+              setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
+              return;
+            }
+            setError(uploadErr?.message || 'Failed to upload file');
+            return;
+          }
         }
-      }
 
-      resetForm();
-      onSuccess?.();
+        onSuccess?.();
+      } else {
+        // Create new document
+        const created = await create.mutateAsync({
+          vehicleId: vehicleID,
+          documentType: documentType,
+          title: title.trim(),
+          notes: notes.trim() || undefined,
+          details: Object.keys(details).length > 0 ? details : undefined,
+          issuedDate: issued_date,
+          expirationDate: expiration_date,
+          scanForMaintenance: documentType === 'manual' ? scanForMaintenance : undefined,
+        });
+
+        if (file) {
+          const allowed = new Set(['application/pdf', 'image/jpeg', 'image/png']);
+          if (!file.type || !allowed.has(file.type)) {
+            setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
+            return;
+          }
+          try {
+            await documentsApi.uploadWithProgress(created.id, file, (pct) => setUploadProgress(pct));
+          } catch (uploadErr: any) {
+            const status = uploadErr?.response?.status;
+            if (status === 415) {
+              setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
+              return;
+            }
+            setError(uploadErr?.message || 'Failed to upload file');
+            return;
+          }
+        }
+
+        resetForm();
+        onSuccess?.();
+      }
     } catch (err: any) {
       const status = err?.response?.status;
       if (status === 415) {
         setError('Unsupported file type. Allowed: PDF, JPG/JPEG, PNG.');
       } else {
-        setError(err?.message || 'Failed to create document');
+        setError(err?.message || `Failed to ${mode === 'edit' ? 'update' : 'create'} document`);
       }
     } finally {
       setUploadProgress(0);
@@ -159,6 +259,17 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
     return v.id.slice(0, 8) + '...';
   };
 
+  // Filter out the primary vehicle from shared vehicle options
+  const sharedVehicleOptions = (vehicles || []).filter(v => v.id !== vehicleID);
+
+  const handleSharedVehicleToggle = (vehicleId: string) => {
+    setSelectedSharedVehicles(prev =>
+      prev.includes(vehicleId)
+        ? prev.filter(id => id !== vehicleId)
+        : [...prev, vehicleId]
+    );
+  };
+
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
     <form onSubmit={handleSubmit} className="w-full">
@@ -170,6 +281,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             value={vehicleID}
             onChange={(e) => setVehicleID(e.target.value)}
             required
+            disabled={mode === 'edit'}
           >
             <option value="">Select vehicle...</option>
             {(vehicles || []).map((v: Vehicle) => (
@@ -184,6 +296,7 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
             className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
             value={documentType}
             onChange={(e) => setDocumentType(e.target.value as DocumentType)}
+            disabled={mode === 'edit'}
           >
             <option value="insurance">Insurance</option>
             <option value="registration">Registration</option>
@@ -307,6 +420,32 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
                 onChange={(e) => setPremium(e.target.value)}
               />
             </div>
+
+            {mode === 'edit' && sharedVehicleOptions.length > 0 && (
+              <div className="flex flex-col md:col-span-2">
+                <label className="text-sm font-medium text-slate-700 dark:text-avus mb-2">
+                  Share with other vehicles
+                </label>
+                <div className="space-y-2 p-3 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-50 dark:bg-scuro/50 max-h-40 overflow-y-auto">
+                  {sharedVehicleOptions.map((v) => (
+                    <label
+                      key={v.id}
+                      className="flex items-center cursor-pointer min-h-[44px] py-2 px-2 hover:bg-slate-100 dark:hover:bg-scuro rounded"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedSharedVehicles.includes(v.id)}
+                        onChange={() => handleSharedVehicleToggle(v.id)}
+                        className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi"
+                      />
+                      <span className="ml-3 text-sm text-slate-700 dark:text-avus">
+                        {vehicleLabel(v)}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            )}
           </>
         )}
 
@@ -393,7 +532,9 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
         </div>
 
         <div className="flex flex-col md:col-span-2">
-          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Upload image/PDF</label>
+          <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">
+            {mode === 'edit' ? 'Upload new image/PDF (optional)' : 'Upload image/PDF'}
+          </label>
           <div className="flex items-center h-11 min-h-[44px] rounded-lg border px-3 bg-white border-slate-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-500 dark:bg-scuro dark:border-silverstone dark:focus-within:ring-abudhabi dark:focus-within:border-abudhabi">
             <input
               className="flex-1 text-gray-900 dark:text-avus file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-500/10 file:text-primary-600 dark:file:bg-abudhabi/20 dark:file:text-abudhabi file:cursor-pointer cursor-pointer"
@@ -413,7 +554,9 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({ onSuccess, onCancel
       )}
 
       <div className="flex flex-col sm:flex-row gap-2 mt-4">
-        <Button type="submit" className="min-h-[44px]">Create Document</Button>
+        <Button type="submit" className="min-h-[44px]">
+          {mode === 'edit' ? 'Save Changes' : 'Create Document'}
+        </Button>
         <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
       </div>
 

frontend/src/features/documents/components/EditDocumentDialog.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  IconButton,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { DocumentForm } from './DocumentForm';
+import type { DocumentRecord } from '../types/documents.types';
+
+interface EditDocumentDialogProps {
+  open: boolean;
+  onClose: () => void;
+  document: DocumentRecord;
+}
+
+export const EditDocumentDialog: React.FC<EditDocumentDialogProps> = ({
+  open,
+  onClose,
+  document,
+}) => {
+  const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullScreen={isSmall}
+      maxWidth="md"
+      fullWidth
+      PaperProps={{
+        sx: {
+          maxHeight: isSmall ? '100%' : '90vh',
+          m: isSmall ? 0 : 2,
+        },
+      }}
+    >
+      {isSmall && (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+            zIndex: 1,
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
+
+      <DialogTitle sx={{ pb: 1 }}>Edit Document</DialogTitle>
+
+      <DialogContent sx={{ pt: 2 }}>
+        <DocumentForm
+          mode="edit"
+          documentId={document.id}
+          initialValues={document}
+          onSuccess={() => {
+            onClose();
+          }}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDocumentDialog;

frontend/src/features/documents/pages/DocumentDetailPage.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
 import { isAxiosError } from 'axios';
@@ -8,6 +8,7 @@ import { useDocument } from '../hooks/useDocuments';
 import { useUploadWithProgress } from '../hooks/useUploadWithProgress';
 import { documentsApi } from '../api/documents.api';
 import { DocumentPreview } from '../components/DocumentPreview';
+import { EditDocumentDialog } from '../components/EditDocumentDialog';
 import { useVehicle, useVehicles } from '../../vehicles/hooks/useVehicles';
 import { getVehicleLabel } from '../utils/vehicleLabel';
 
@@ -15,11 +16,12 @@ export const DocumentDetailPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { isAuthenticated, isLoading: authLoading, loginWithRedirect } = useAuth0();
-  const { data: doc, isLoading, error } = useDocument(id);
+  const { data: doc, isLoading, error, refetch } = useDocument(id);
   const { data: vehicle } = useVehicle(doc?.vehicleId || '');
   const { data: vehicles } = useVehicles();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const upload = useUploadWithProgress(id!);
+  const [isEditOpen, setIsEditOpen] = useState(false);
 
   const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
 
@@ -179,9 +181,10 @@ export const DocumentDetailPage: React.FC = () => {
           <div className="pt-2">
             <DocumentPreview doc={doc} />
           </div>
-          <div className="flex gap-2 pt-2">
+          <div className="flex flex-wrap gap-2 pt-2">
             <Button onClick={handleDownload}>Download</Button>
             <Button onClick={handleUpload}>Upload/Replace</Button>
+            <Button onClick={() => setIsEditOpen(true)} variant="secondary">Edit</Button>
           </div>
           {upload.isPending && (
             <div className="text-sm text-slate-600">Uploading... {upload.progress}%</div>
@@ -195,6 +198,16 @@ export const DocumentDetailPage: React.FC = () => {
           )}
         </div>
       </Card>
+      {doc && (
+        <EditDocumentDialog
+          open={isEditOpen}
+          onClose={() => {
+            setIsEditOpen(false);
+            refetch();
+          }}
+          document={doc}
+        />
+      )}
     </div>
   );
 };