510420e4fd
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m39s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 37s
Deploy to Staging / Verify Staging (pull_request) Successful in 5s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 5s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
The "Choose File" button and "No file chosen" text were not vertically centered within the file input. This was caused by: 1. Browser default `align-items: baseline` for file inputs 2. Conflicting `py-2` padding on the input container Fixed by: - Removing `py-2` (conflicting vertical padding) - Adding `flex items-center` (explicit vertical centering) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
404 lines
19 KiB
TypeScript
404 lines
19 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '../../../shared-minimal/components/Button';
|
|
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 dayjs from 'dayjs';
|
|
import { useCreateDocument } from '../hooks/useDocuments';
|
|
import { documentsApi } from '../api/documents.api';
|
|
import type { DocumentType } from '../types/documents.types';
|
|
import { useVehicles } from '../../vehicles/hooks/useVehicles';
|
|
import type { Vehicle } from '../../vehicles/types/vehicles.types';
|
|
|
|
interface DocumentFormProps {
|
|
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>('');
|
|
|
|
// 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>('');
|
|
|
|
// Registration fields
|
|
const [licensePlate, setLicensePlate] = React.useState<string>('');
|
|
const [registrationExpirationDate, setRegistrationExpirationDate] = React.useState<string>('');
|
|
const [registrationCost, setRegistrationCost] = React.useState<string>('');
|
|
|
|
// Manual fields
|
|
const [scanForMaintenance, setScanForMaintenance] = React.useState<boolean>(false);
|
|
|
|
const [file, setFile] = React.useState<File | null>(null);
|
|
const [uploadProgress, setUploadProgress] = React.useState<number>(0);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
|
|
const { data: vehicles } = useVehicles();
|
|
const create = useCreateDocument();
|
|
|
|
const resetForm = () => {
|
|
setTitle('');
|
|
setNotes('');
|
|
setInsuranceCompany('');
|
|
setPolicyNumber('');
|
|
setEffectiveDate('');
|
|
setExpirationDate('');
|
|
setBodilyInjuryPerson('');
|
|
setBodilyInjuryIncident('');
|
|
setPropertyDamage('');
|
|
setPremium('');
|
|
setLicensePlate('');
|
|
setRegistrationExpirationDate('');
|
|
setRegistrationCost('');
|
|
setScanForMaintenance(false);
|
|
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 (!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
|
|
|
|
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');
|
|
}
|
|
} 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) + '...';
|
|
};
|
|
|
|
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
|
|
>
|
|
<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)}
|
|
>
|
|
<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>
|
|
</>
|
|
)}
|
|
|
|
{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">
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={scanForMaintenance}
|
|
onChange={(e) => setScanForMaintenance(e.target.checked)}
|
|
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-2 text-sm font-medium text-slate-700 dark:text-avus">
|
|
Scan for Maintenance Schedule
|
|
</span>
|
|
</label>
|
|
<span className="ml-2 text-xs text-slate-500 dark:text-titanio">(Coming soon)</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">Upload image/PDF</label>
|
|
<input
|
|
className="h-11 min-h-[44px] rounded-lg border px-3 flex items-center 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 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"
|
|
type="file"
|
|
accept="image/jpeg,image/png,application/pdf"
|
|
onChange={(e) => setFile(e.target.files?.[0] || null)}
|
|
/>
|
|
{uploadProgress > 0 && uploadProgress < 100 && (
|
|
<div className="text-sm text-slate-600 dark:text-titanio mt-1">Uploading... {uploadProgress}%</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]">Create Document</Button>
|
|
<Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
|
|
</div>
|
|
</form>
|
|
</LocalizationProvider>
|
|
);
|
|
};
|
|
|
|
export default DocumentForm;
|