Added Documents Feature
This commit is contained in:
Eric Gullickson
342
frontend/src/features/documents/components/DocumentForm.tsx
Normal file
342
frontend/src/features/documents/components/DocumentForm.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
import React from 'react';
|
||||
import { Button } from '../../../shared-minimal/components/Button';
|
||||
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>('');
|
||||
|
||||
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('');
|
||||
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;
|
||||
}
|
||||
|
||||
const created = await create.mutateAsync({
|
||||
vehicle_id: vehicleID,
|
||||
document_type: documentType,
|
||||
title: title.trim(),
|
||||
notes: notes.trim() || undefined,
|
||||
details,
|
||||
issued_date,
|
||||
expiration_date,
|
||||
});
|
||||
|
||||
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 (
|
||||
<form onSubmit={handleSubmit} className="w-full">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Vehicle</label>
|
||||
<select
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">Document Type</label>
|
||||
<select
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
value={documentType}
|
||||
onChange={(e) => setDocumentType(e.target.value as DocumentType)}
|
||||
>
|
||||
<option value="insurance">Insurance</option>
|
||||
<option value="registration">Registration</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:col-span-2">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Title</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="text"
|
||||
value={title}
|
||||
placeholder={documentType === 'insurance' ? 'e.g., Progressive Policy 2025' : 'e.g., Registration 2025'}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{documentType === 'insurance' && (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Insurance company</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">Policy number</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="text"
|
||||
value={policyNumber}
|
||||
onChange={(e) => setPolicyNumber(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Effective Date</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="date"
|
||||
value={effectiveDate}
|
||||
onChange={(e) => setEffectiveDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Expiration Date</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="date"
|
||||
value={expirationDate}
|
||||
onChange={(e) => setExpirationDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Bodily Injury (Person)</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">Bodily Injury (Incident)</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">Property Damage</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">Premium</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">License Plate</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="text"
|
||||
value={licensePlate}
|
||||
onChange={(e) => setLicensePlate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Expiration Date</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="date"
|
||||
value={registrationExpirationDate}
|
||||
onChange={(e) => setRegistrationExpirationDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col md:col-span-2">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Cost</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
value={registrationCost}
|
||||
onChange={(e) => setRegistrationCost(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col md:col-span-2">
|
||||
<label className="text-sm font-medium text-slate-700 mb-1">Notes</label>
|
||||
<textarea
|
||||
className="min-h-[88px] rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mb-1">Upload image/PDF</label>
|
||||
<input
|
||||
className="h-11 min-h-[44px] rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||||
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 mt-1">Uploading... {uploadProgress}%</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-red-600 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentForm;
|
||||
Reference in New Issue
Block a user