684 lines
30 KiB
TypeScript
684 lines
30 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '../../../shared-minimal/components/Button';
|
|
import { UpgradeRequiredDialog } from '../../../shared-minimal/components/UpgradeRequiredDialog';
|
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
|
|
import { Checkbox, FormControlLabel, LinearProgress } from '@mui/material';
|
|
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
|
import dayjs from 'dayjs';
|
|
import { useCreateDocument, useUpdateDocument, useAddSharedVehicle, useRemoveVehicleFromDocument } from '../hooks/useDocuments';
|
|
import { documentsApi } from '../api/documents.api';
|
|
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';
|
|
import { useManualExtraction } from '../hooks/useManualExtraction';
|
|
import { MaintenanceScheduleReviewScreen } from '../../maintenance/components/MaintenanceScheduleReviewScreen';
|
|
|
|
interface DocumentFormProps {
|
|
mode?: 'create' | 'edit';
|
|
initialValues?: Partial<DocumentRecord>;
|
|
documentId?: string;
|
|
onSuccess?: () => void;
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
export const DocumentForm: React.FC<DocumentFormProps> = ({
|
|
mode = 'create',
|
|
initialValues,
|
|
documentId,
|
|
onSuccess,
|
|
onCancel
|
|
}) => {
|
|
const [documentType, setDocumentType] = React.useState<DocumentType | ''>(
|
|
initialValues?.documentType || ''
|
|
);
|
|
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>(
|
|
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>(
|
|
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>(
|
|
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);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [upgradeDialogOpen, setUpgradeDialogOpen] = React.useState<boolean>(false);
|
|
|
|
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');
|
|
const extraction = useManualExtraction();
|
|
const [reviewDialogOpen, setReviewDialogOpen] = React.useState(false);
|
|
|
|
// Open review dialog when extraction completes
|
|
React.useEffect(() => {
|
|
if (extraction.status === 'completed' && extraction.result) {
|
|
setReviewDialogOpen(true);
|
|
}
|
|
}, [extraction.status, extraction.result]);
|
|
|
|
const isExtracting = extraction.status === 'pending' || extraction.status === 'processing';
|
|
|
|
const handleReviewClose = () => {
|
|
setReviewDialogOpen(false);
|
|
extraction.reset();
|
|
resetForm();
|
|
onSuccess?.();
|
|
};
|
|
|
|
const handleSchedulesCreated = (_count: number) => {
|
|
setReviewDialogOpen(false);
|
|
extraction.reset();
|
|
resetForm();
|
|
onSuccess?.();
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setTitle('');
|
|
setNotes('');
|
|
setInsuranceCompany('');
|
|
setPolicyNumber('');
|
|
setEffectiveDate('');
|
|
setExpirationDate('');
|
|
setBodilyInjuryPerson('');
|
|
setBodilyInjuryIncident('');
|
|
setPropertyDamage('');
|
|
setPremium('');
|
|
setLicensePlate('');
|
|
setRegistrationExpirationDate('');
|
|
setRegistrationCost('');
|
|
setScanForMaintenance(false);
|
|
setSelectedSharedVehicles([]);
|
|
setFile(null);
|
|
setUploadProgress(0);
|
|
setError(null);
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
if (!vehicleID) {
|
|
setError('Please select a vehicle.');
|
|
return;
|
|
}
|
|
if (!documentType) {
|
|
setError('Please select a document type.');
|
|
return;
|
|
}
|
|
if (!title.trim()) {
|
|
setError('Please enter a title.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const details: Record<string, any> = {};
|
|
let issued_date: string | undefined;
|
|
let expiration_date: string | undefined;
|
|
|
|
if (documentType === 'insurance') {
|
|
details.insuranceCompany = insuranceCompany || undefined;
|
|
details.policyNumber = policyNumber || undefined;
|
|
details.bodilyInjuryPerson = bodilyInjuryPerson || undefined;
|
|
details.bodilyInjuryIncident = bodilyInjuryIncident || undefined;
|
|
details.propertyDamage = propertyDamage || undefined;
|
|
details.premium = premium ? parseFloat(premium) : undefined;
|
|
issued_date = effectiveDate || undefined;
|
|
expiration_date = expirationDate || undefined;
|
|
} else if (documentType === 'registration') {
|
|
details.licensePlate = licensePlate || undefined;
|
|
details.cost = registrationCost ? parseFloat(registrationCost) : undefined;
|
|
expiration_date = registrationExpirationDate || undefined;
|
|
}
|
|
// Manual type: no details or dates, just scanForMaintenance flag
|
|
|
|
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,
|
|
});
|
|
|
|
// 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 });
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
// Trigger manual extraction if scan checkbox was checked
|
|
if (scanForMaintenance && documentType === 'manual' && file.type === 'application/pdf') {
|
|
try {
|
|
await extraction.submit(file, vehicleID);
|
|
// Don't call onSuccess yet - wait for extraction and review
|
|
return;
|
|
} catch (extractionErr: any) {
|
|
setError(extractionErr?.message || 'Failed to start maintenance extraction');
|
|
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 ${mode === 'edit' ? 'update' : 'create'} document`);
|
|
}
|
|
} finally {
|
|
setUploadProgress(0);
|
|
}
|
|
};
|
|
|
|
const vehicleLabel = (v: Vehicle) => {
|
|
if (v.nickname && v.nickname.trim().length > 0) return v.nickname.trim();
|
|
const parts = [v.year, v.make, v.model, v.trimLevel].filter(Boolean);
|
|
const primary = parts.join(' ').trim();
|
|
if (primary.length > 0) return primary;
|
|
if (v.vin && v.vin.length > 0) return v.vin;
|
|
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">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Vehicle</label>
|
|
<select
|
|
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={vehicleID}
|
|
onChange={(e) => setVehicleID(e.target.value)}
|
|
required
|
|
disabled={mode === 'edit'}
|
|
>
|
|
<option value="">Select vehicle...</option>
|
|
{(vehicles || []).map((v: Vehicle) => (
|
|
<option key={v.id} value={v.id}>{vehicleLabel(v)}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Document Type</label>
|
|
<select
|
|
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'}
|
|
required
|
|
>
|
|
<option value="" disabled>Select a document type...</option>
|
|
<option value="insurance">Insurance</option>
|
|
<option value="registration">Registration</option>
|
|
<option value="manual">Manual</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:col-span-2">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Title</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
|
type="text"
|
|
value={title}
|
|
placeholder={
|
|
documentType === 'insurance' ? 'e.g., Progressive Policy 2025' :
|
|
documentType === 'registration' ? 'e.g., Registration 2025' :
|
|
'e.g., Honda CBR600RR Service Manual'
|
|
}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{documentType === 'insurance' && (
|
|
<>
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Insurance company</label>
|
|
<input
|
|
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"
|
|
type="text"
|
|
value={insuranceCompany}
|
|
onChange={(e) => setInsuranceCompany(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Policy number</label>
|
|
<input
|
|
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"
|
|
type="text"
|
|
value={policyNumber}
|
|
onChange={(e) => setPolicyNumber(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<DatePicker
|
|
label="Effective Date"
|
|
value={effectiveDate ? dayjs(effectiveDate) : null}
|
|
onChange={(newValue) => setEffectiveDate(newValue?.format('YYYY-MM-DD') || '')}
|
|
format="MM/DD/YYYY"
|
|
slotProps={{
|
|
textField: {
|
|
fullWidth: true,
|
|
sx: {
|
|
'& .MuiOutlinedInput-root': {
|
|
minHeight: 44,
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<DatePicker
|
|
label="Expiration Date"
|
|
value={expirationDate ? dayjs(expirationDate) : null}
|
|
onChange={(newValue) => setExpirationDate(newValue?.format('YYYY-MM-DD') || '')}
|
|
format="MM/DD/YYYY"
|
|
slotProps={{
|
|
textField: {
|
|
fullWidth: true,
|
|
sx: {
|
|
'& .MuiOutlinedInput-root': {
|
|
minHeight: 44,
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Bodily Injury (Person)</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
|
type="text"
|
|
placeholder="$25,000"
|
|
value={bodilyInjuryPerson}
|
|
onChange={(e) => setBodilyInjuryPerson(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Bodily Injury (Incident)</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
|
type="text"
|
|
placeholder="$50,000"
|
|
value={bodilyInjuryIncident}
|
|
onChange={(e) => setBodilyInjuryIncident(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Property Damage</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
|
type="text"
|
|
placeholder="$25,000"
|
|
value={propertyDamage}
|
|
onChange={(e) => setPropertyDamage(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Premium</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
value={premium}
|
|
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-1 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) => (
|
|
<FormControlLabel
|
|
key={v.id}
|
|
control={
|
|
<Checkbox
|
|
checked={selectedSharedVehicles.includes(v.id)}
|
|
onChange={() => handleSharedVehicleToggle(v.id)}
|
|
color="primary"
|
|
sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
|
|
/>
|
|
}
|
|
label={vehicleLabel(v)}
|
|
sx={{
|
|
width: '100%',
|
|
minHeight: 44,
|
|
mx: 0,
|
|
px: 1,
|
|
borderRadius: 1,
|
|
'&:hover': {
|
|
bgcolor: 'action.hover',
|
|
},
|
|
'& .MuiFormControlLabel-label': {
|
|
fontSize: '0.875rem',
|
|
color: 'text.primary',
|
|
},
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{documentType === 'registration' && (
|
|
<>
|
|
<div className="flex flex-col">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">License Plate</label>
|
|
<input
|
|
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"
|
|
type="text"
|
|
value={licensePlate}
|
|
onChange={(e) => setLicensePlate(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<DatePicker
|
|
label="Expiration Date"
|
|
value={registrationExpirationDate ? dayjs(registrationExpirationDate) : null}
|
|
onChange={(newValue) => setRegistrationExpirationDate(newValue?.format('YYYY-MM-DD') || '')}
|
|
format="MM/DD/YYYY"
|
|
slotProps={{
|
|
textField: {
|
|
fullWidth: true,
|
|
sx: {
|
|
'& .MuiOutlinedInput-root': {
|
|
minHeight: 44,
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col md:col-span-2">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Cost</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
value={registrationCost}
|
|
onChange={(e) => setRegistrationCost(e.target.value)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{documentType === 'manual' && (
|
|
<div className="flex items-center md:col-span-2">
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={canScanMaintenance ? scanForMaintenance : false}
|
|
onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
|
|
disabled={!canScanMaintenance}
|
|
color="primary"
|
|
sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
|
|
/>
|
|
}
|
|
label="Scan for Maintenance Schedule"
|
|
sx={{
|
|
opacity: canScanMaintenance ? 1 : 0.6,
|
|
cursor: canScanMaintenance ? 'pointer' : 'not-allowed',
|
|
'& .MuiFormControlLabel-label': {
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: 'text.primary',
|
|
},
|
|
}}
|
|
/>
|
|
{!canScanMaintenance && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setUpgradeDialogOpen(true)}
|
|
className="ml-1 p-1 text-slate-500 hover:text-primary-600 dark:text-titanio dark:hover:text-abudhabi transition-colors"
|
|
title="Upgrade to Pro to unlock this feature"
|
|
>
|
|
<LockOutlinedIcon fontSize="small" />
|
|
</button>
|
|
)}
|
|
{canScanMaintenance && scanForMaintenance && (
|
|
<span className="ml-1 text-xs text-slate-500 dark:text-titanio">PDF will be scanned after upload</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col md:col-span-2">
|
|
<label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Notes</label>
|
|
<textarea
|
|
className="min-h-[88px] rounded-lg border px-3 py-2 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={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:col-span-2">
|
|
<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"
|
|
type="file"
|
|
accept="image/jpeg,image/png,application/pdf"
|
|
onChange={(e) => setFile(e.target.files?.[0] || null)}
|
|
/>
|
|
</div>
|
|
{uploadProgress > 0 && uploadProgress < 100 && (
|
|
<div className="text-sm text-slate-600 dark:text-titanio mt-1">Uploading... {uploadProgress}%</div>
|
|
)}
|
|
</div>
|
|
|
|
{isExtracting && (
|
|
<div className="md:col-span-2 mt-2">
|
|
<div className="flex items-center gap-3 p-3 rounded-lg border border-primary-200 bg-primary-50 dark:border-abudhabi/30 dark:bg-scuro">
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium text-slate-700 dark:text-avus mb-1">
|
|
Scanning manual for maintenance schedules...
|
|
</div>
|
|
<LinearProgress
|
|
variant={extraction.progress > 0 ? 'determinate' : 'indeterminate'}
|
|
value={extraction.progress}
|
|
sx={{ borderRadius: 1 }}
|
|
/>
|
|
<div className="text-xs text-slate-500 dark:text-titanio mt-1">
|
|
{extraction.progress >= 100 ? '100% - Complete' :
|
|
extraction.progress >= 95 ? `${extraction.progress}% - Mapping maintenance schedules...` :
|
|
extraction.progress >= 50 ? `${extraction.progress}% - Processing maintenance data...` :
|
|
extraction.progress >= 10 ? `${extraction.progress}% - Preparing document...` :
|
|
extraction.progress > 0 ? `${extraction.progress}% complete` :
|
|
'Starting extraction...'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{extraction.status === 'failed' && extraction.error && (
|
|
<div className="md:col-span-2 mt-2">
|
|
<div className="text-red-600 dark:text-red-400 text-sm p-3 rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20">
|
|
Extraction failed: {extraction.error}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-red-600 dark:text-red-400 text-sm mt-3">{error}</div>
|
|
)}
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
|
<Button type="submit" className="min-h-[44px]" disabled={isExtracting}>
|
|
{isExtracting ? 'Scanning...' : mode === 'edit' ? 'Save Changes' : 'Create Document'}
|
|
</Button>
|
|
<Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]" disabled={isExtracting}>Cancel</Button>
|
|
</div>
|
|
|
|
<UpgradeRequiredDialog
|
|
featureKey="document.scanMaintenanceSchedule"
|
|
open={upgradeDialogOpen}
|
|
onClose={() => setUpgradeDialogOpen(false)}
|
|
/>
|
|
|
|
{extraction.result && (
|
|
<MaintenanceScheduleReviewScreen
|
|
open={reviewDialogOpen}
|
|
items={extraction.result.maintenanceSchedules}
|
|
vehicleId={vehicleID}
|
|
onClose={handleReviewClose}
|
|
onCreated={handleSchedulesCreated}
|
|
/>
|
|
)}
|
|
</form>
|
|
</LocalizationProvider>
|
|
);
|
|
};
|
|
|
|
export default DocumentForm;
|