Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/juanmatz/inspection-form-euroautos/llms.txt

Use this file to discover all available pages before exploring further.

InspectionForm is the root component of the inspection form application. It renders the full multi-section form, manages local state, and exposes callbacks for save and submit events. The component orchestrates all checklist sections, photo attachments, and the inspector signature flow, providing a self-contained inspection experience that can be embedded anywhere in the Euroautos dashboard.

​
Import

import { InspectionForm } from '@/components/InspectionForm';

​
Basic Usage

<InspectionForm
  vehicleId="veh-001"
  inspectorId="insp-42"
  onSave={(inspection) => console.log('Saved:', inspection.id)}
  onSubmit={(inspection) => router.push(`/inspections/${inspection.id}`)}
/>
To resume a previously started inspection, pass the existing inspection’s ID via inspectionId. The form will rehydrate its state from IndexedDB and present the inspector at the last visited section. 
<InspectionForm
  vehicleId="veh-001"
  inspectorId="insp-42"
  inspectionId="insp-2024-0085"
  onSave={(inspection) => console.log('Auto-saved:', inspection.id)}
  onSubmit={(inspection) => router.push(`/inspections/${inspection.id}`)}
  onError={(error) => toast.error(error.message)}
/>

​
Props

​
vehicleId
string
required
The unique identifier of the vehicle being inspected. This is used to pre-populate vehicle details in the Vehicle Info section and to associate the inspection record with the correct vehicle in the data store.
​
inspectorId
string
required
The unique identifier of the inspector completing the form. Used to attribute the inspection record and pre-fill the inspector name on the signature page.
​
inspectionId
string
An existing inspection ID to resume. When provided, the component loads the in-progress inspection from IndexedDB on mount and restores all previously entered values. If omitted, a new inspection record is created automatically with a generated ID.
​
sections
SectionConfig[]
Override the default section list with a custom set of sections. Each SectionConfig object describes a checklist group, its items, and any custom validation rules. When omitted, the standard Euroautos inspection template is used (Exterior, Interior, Engine Bay, Brakes & Suspension, Tyres, Lights, Fluids, and Signature).
interface SectionConfig {
  id: string;
  title: string;
  icon?: string;
  items: ChecklistItemConfig[];
}

interface ChecklistItemConfig {
  id: string;
  label: string;
  required?: boolean;
  allowPhotos?: boolean;
  allowNotes?: boolean;
}
​
readOnly
boolean
default:"false"
Render the form in read-only mode. All inputs, status selectors, and the signature pad become non-interactive. Use this when displaying a completed inspection to a customer or manager without allowing edits.
​
onSave
(inspection: Inspection) => void
Callback fired each time the form auto-saves. Receives the current Inspection object reflecting all data entered so far. This fires every 30 seconds during active use and immediately on every section navigation. Use this to sync the latest draft state to a remote server.
​
onSubmit
(inspection: Inspection) => void
Callback fired when the inspector taps Submit for Review on the final page. By this point all required checklist items have been validated and the inspector’s signature has been captured. The received Inspection object has status: 'submitted'. Use this to redirect to the report view or trigger a server-side workflow.
​
onError
(error: Error) => void
Callback fired when an unrecoverable error occurs — for example, if the IndexedDB write fails or a required network call to fetch vehicle data times out. Use this to display a fallback error UI or report the error to your monitoring service.
​
locale
string
default:"'es'"
The locale code used to render form labels, validation messages, and date/time formatting. Currently 'es' (Spanish) is fully supported. Additional locales ('en', 'fr') are planned for a future release.

​
Auto-Save Behaviour

InspectionForm persists draft state automatically so that no work is lost if the browser is closed or the device loses connectivity.
  • Interval save — The form writes the current inspection snapshot to IndexedDB every 30 seconds while the inspector is actively filling it out. The onSave callback is invoked on each interval save.
  • Navigation save — Whenever the inspector moves from one section to another, the current section’s data is flushed to IndexedDB before rendering the next section. This ensures partial progress within a section is never lost on navigation.
  • Resume on mount — If an inspectionId is provided, the component reads from IndexedDB on mount and restores all previously saved values, including photos stored as base64 data URLs.
onSave is called on every auto-save, including the 30-second interval saves and section-navigation saves. If you are syncing drafts to a backend, consider debouncing or rate-limiting those network calls inside your onSave handler.
To implement a “last saved” timestamp in your UI, record new Date() inside your onSave handler and display it in a status bar outside the InspectionForm component.

​
Accessibility

InspectionForm is built with accessibility as a first-class concern:
  • Every form input, textarea, and toggle is associated with a visible <label> element via htmlFor / id pairing — no aria-label-only patterns.
  • Full keyboard navigation is supported throughout. The inspector can tab through all checklist items, activate status selectors with Space or Enter, and navigate between sections with the keyboard-accessible section sidebar.
  • ARIA live regions (aria-live="polite") are used on the validation error container so that screen readers announce field-level errors as they appear without disrupting the reading flow.
  • The signature pad canvas exposes an aria-label describing its purpose and an accessible Clear button for users who cannot draw with a pointer.
When embedding InspectionForm inside a modal or drawer, ensure the modal traps focus correctly. The component itself does not manage focus trapping — that responsibility belongs to the modal container.

Build docs developers (and LLMs) love

Get started for freeTalk to us