egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Document feature enhancements (#31) #32

Merged
egullickson merged 7 commits from issue-31-document-enhancements into main 2026-01-15 02:35:56 +00:00
Conversation 0 Commits 7 Files Changed 20 +281 -50
3 changed files with 281 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b71e2cff3c - Show all commits

237
frontend/src/features/documents/components/DocumentForm.tsx
View File

@@ -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>

75
frontend/src/features/documents/components/EditDocumentDialog.tsx Normal file
View File

@@ -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;

19
frontend/src/features/documents/pages/DocumentDetailPage.tsx
View File

@@ -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>
);
};