{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "driver-inspection-checklist", "title": "Driver Inspection Checklist", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/driver-inspection-checklist/DriverInspectionChecklist.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertCircle,\n AlertTriangle,\n Calendar,\n Camera,\n Check,\n CheckCircle2,\n Clock,\n Disc,\n Download,\n Droplets,\n FileCheck,\n FileSpreadsheet,\n FileText,\n Flame,\n Gauge,\n Layers,\n Lightbulb,\n MapPin,\n Minus,\n MinusCircle,\n Printer,\n RotateCcw,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n Truck,\n UploadCloud,\n User,\n Wrench,\n X,\n XCircle,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport type CheckStatus = 'pass' | 'fail' | 'na'\nexport type DefectSeverity = 'minor' | 'critical'\nexport type InspectionType = 'pre-trip' | 'post-trip' | 'intermodal'\n\nexport interface InspectionItem {\n id: string\n label: string\n spec: string\n status: CheckStatus\n notes?: string\n}\n\nexport interface InspectionCategory {\n id: string\n title: string\n description: string\n icon: string\n items: InspectionItem[]\n}\n\nexport interface DefectPhoto {\n id: string\n name: string\n size: string\n url?: string\n}\n\nexport interface DVIRReportData {\n reportId: string\n vehicleId: string\n trailerId: string\n odometer: string\n inspectionType: InspectionType\n driverName: string\n driverCdl: string\n carrierName: string\n dotNumber: string\n inspectionDate: string\n inspectionTime: string\n location: string\n categories: InspectionCategory[]\n defectSeverity: DefectSeverity\n defectNotes: string\n defectPhotos: DefectPhoto[]\n certified: boolean\n signatureTimestamp: string\n}\n\nexport interface DriverInspectionChecklistProps {\n initialInspectionType?: InspectionType\n initialDefectState?: boolean\n initialSubmitted?: boolean\n vehicleId?: string\n trailerId?: string\n odometer?: string\n driverName?: string\n driverCdl?: string\n className?: string\n onSubmit?: (data: DVIRReportData) => void\n onDefectChange?: (defects: InspectionItem[]) => void\n}\n\nconst DEFAULT_CATEGORIES: InspectionCategory[] = [\n {\n id: 'brakes',\n title: '1. Brakes & Air Pressure',\n description: 'FMCSA § 393.40 / 393.51 Air Brake System & Lines',\n icon: 'disc',\n items: [\n {\n id: 'brakes-service',\n label: 'Service Brakes & Stopping Response',\n spec: 'Smooth pedal feel, no pulling, stopping within 35 ft at 20 mph',\n status: 'pass',\n },\n {\n id: 'brakes-parking',\n label: 'Parking Brake Mechanism',\n spec: 'Holds fully loaded vehicle against low gear engine torque',\n status: 'pass',\n },\n {\n id: 'brakes-airlines',\n label: 'Air Lines & System Pressure (120 PSI)',\n spec: 'Maintains 120 PSI operating pressure; gladhand seals leak-free',\n status: 'pass',\n },\n {\n id: 'brakes-drums',\n label: 'Brake Drums, Linings & Slack Adjusters',\n spec: 'Lining thickness > 1/4\", no oil/grease contamination on drums',\n status: 'pass',\n },\n ],\n },\n {\n id: 'tires',\n title: '2. Tires, Wheels & Rims',\n description: 'FMCSA § 393.75 Wheel Assemblies & Tread Integrity',\n icon: 'layers',\n items: [\n {\n id: 'tires-tread',\n label: 'Steer & Drive Tire Tread Depth',\n spec: 'Steer tires > 4/32\" tread; drive/trailer tires > 2/32\" tread',\n status: 'pass',\n },\n {\n id: 'tires-pressure',\n label: 'Tire Pressure & Cold Inflation (100 PSI)',\n spec: 'All 10 dual/steer tires at 100 PSI cold; valve caps sealed',\n status: 'pass',\n },\n {\n id: 'tires-lugnuts',\n label: 'Lug Nuts & Wheel Rim Fasteners',\n spec: 'All wheel studs present & torqued; no rust trails or rim cracks',\n status: 'pass',\n },\n {\n id: 'tires-hubseals',\n label: 'Wheel Hub Oil Seals & Bearings',\n spec: 'Oil level visible in sight glass; hub seals dry with no leaks',\n status: 'pass',\n },\n ],\n },\n {\n id: 'lights',\n title: '3. Lights & Electrical Systems',\n description: 'FMCSA § 393.9 Lamps, Reflective Devices & Electrical Wiring',\n icon: 'lightbulb',\n items: [\n {\n id: 'lights-headlights',\n label: 'Headlights (Low & High Beams)',\n spec: 'Both sealed beams operable; lenses clean and properly aimed',\n status: 'pass',\n },\n {\n id: 'lights-turnsignals',\n label: 'Turn Signals & 4-Way Hazard Flashers',\n spec: 'Front, cab-side, and rear flashers functional on tractor & trailer',\n status: 'pass',\n },\n {\n id: 'lights-brakelights',\n label: 'Brake Lights & Tail Lights',\n spec: 'Instant illumination upon pedal depression; lenses intact',\n status: 'pass',\n },\n {\n id: 'lights-clearance',\n label: 'Clearance Lights & DOT Reflectors',\n spec: 'Amber front/sides, red rear; DOT-C2 reflective sheeting clean',\n status: 'pass',\n },\n ],\n },\n {\n id: 'engine',\n title: '4. Engine Compartment & Fluids',\n description: 'Powertrain fluids, radiator integrity, belts & steering gear',\n icon: 'wrench',\n items: [\n {\n id: 'engine-oil',\n label: 'Engine Oil Level & Quality',\n spec: 'Dipstick level in safe crosshatch; oil clean without burnt odor',\n status: 'pass',\n },\n {\n id: 'engine-coolant',\n label: 'Engine Coolant & Radiator Core',\n spec: 'Surge tank level at MAX line; radiator cap tight, no hose weeping',\n status: 'pass',\n },\n {\n id: 'engine-powersteering',\n label: 'Power Steering Fluid & Reservoir',\n spec: 'Fluid level within cold fill mark; pump operates without whine',\n status: 'pass',\n },\n {\n id: 'engine-belts',\n label: 'Serpentine Belts & Cooling Hoses',\n spec: 'Belt deflection < 1/2\"; no rib fraying, cracks, or soft hoses',\n status: 'pass',\n },\n ],\n },\n {\n id: 'safety',\n title: '5. Emergency & Safety Equipment',\n description: 'FMCSA § 393.95 Emergency Equipment in Commercial Motor Vehicles',\n icon: 'flame',\n items: [\n {\n id: 'safety-extinguisher',\n label: 'Fire Extinguisher (Charged & Tagged)',\n spec: 'Minimum 5 B:C rating; pressure needle in green, annual tag valid',\n status: 'pass',\n },\n {\n id: 'safety-triangles',\n label: 'Reflective Warning Triangles (3 Pack)',\n spec: 'Three bidirectional red reflective triangles present & secured',\n status: 'pass',\n },\n {\n id: 'safety-firstaid',\n label: 'First Aid & Spill Response Kit',\n spec: 'Sealed commercial first aid pack, eye wash, HazMat pads',\n status: 'pass',\n },\n {\n id: 'safety-wipers',\n label: 'Windshield Wipers, Washers & Horn',\n spec: 'Clean sweep without streaks; air horn and electric city horn loud',\n status: 'pass',\n },\n ],\n },\n]\n\nexport function DriverInspectionChecklist({\n initialInspectionType = 'pre-trip',\n initialDefectState = false,\n initialSubmitted = false,\n vehicleId = 'Truck #104 · Freightliner Cascadia',\n trailerId = \"Trailer #TR-8821 (53' Dry Van)\",\n odometer = '142,850 miles',\n driverName = 'Marcus Vance',\n driverCdl = 'CA-948201',\n className,\n onSubmit,\n onDefectChange,\n}: DriverInspectionChecklistProps) {\n const reportId = 'DVIR-2026-90412'\n const [inspectionType, setInspectionType] = React.useState(initialInspectionType)\n const carrierName = 'Apex Freight Logistics Inc.'\n const dotNumber = 'USDOT #2940182'\n const inspectionDate = '2026-08-21'\n const inspectionTime = '06:45 AM EDT'\n const location = 'Terminal #12 · Ontario Logistics Hub, CA'\n\n const [categories, setCategories] = React.useState(() => {\n return DEFAULT_CATEGORIES.map((cat) => ({\n ...cat,\n items: cat.items.map((item) => {\n if (initialDefectState && (item.id === 'brakes-airlines' || item.id === 'tires-pressure')) {\n return { ...item, status: 'fail' as CheckStatus }\n }\n return { ...item }\n }),\n }))\n })\n\n const [defectSeverity, setDefectSeverity] = React.useState(initialDefectState ? 'critical' : 'minor')\n const [defectNotes, setDefectNotes] = React.useState(\n initialDefectState\n ? 'Air supply line to secondary reservoir exhibits slight pressure drop (down to 105 PSI under load). Audible hiss near tractor-trailer gladhand seal.'\n : '',\n )\n const [defectReportedToDesk, setDefectReportedToDesk] = React.useState(true)\n const [defectPhotos, setDefectPhotos] = React.useState(\n initialDefectState\n ? [\n { id: 'p1', name: 'gladhand_seal_wear.jpg', size: '2.4 MB' },\n { id: 'p2', name: 'air_pressure_gauge_105psi.png', size: '1.8 MB' },\n ]\n : [],\n )\n\n const [certified, setCertified] = React.useState(true)\n const [typedSignature, setTypedSignature] = React.useState(driverName)\n const [submitted, setSubmitted] = React.useState(initialSubmitted)\n\n // Calculations\n const allItems = React.useMemo(() => categories.flatMap((c) => c.items), [categories])\n const totalCount = allItems.length\n const passCount = allItems.filter((i) => i.status === 'pass').length\n const failCount = allItems.filter((i) => i.status === 'fail').length\n const naCount = allItems.filter((i) => i.status === 'na').length\n const failedItems = React.useMemo(() => allItems.filter((i) => i.status === 'fail'), [allItems])\n const hasDefects = failedItems.length > 0\n\n const completionPercentage = Math.round(\n (totalCount > 0 ? allItems.filter((i) => i.status !== undefined).length / totalCount : 0) * 100,\n )\n\n React.useEffect(() => {\n onDefectChange?.(failedItems)\n }, [failedItems, onDefectChange])\n\n const setItemStatus = React.useCallback((categoryId: string, itemId: string, status: CheckStatus) => {\n setCategories((prev) =>\n prev.map((cat) => {\n if (cat.id !== categoryId) return cat\n return {\n ...cat,\n items: cat.items.map((item) => {\n if (item.id !== itemId) return item\n return { ...item, status }\n }),\n }\n }),\n )\n }, [])\n\n const setCategoryAll = React.useCallback((categoryId: string, status: CheckStatus) => {\n setCategories((prev) =>\n prev.map((cat) => {\n if (cat.id !== categoryId) return cat\n return {\n ...cat,\n items: cat.items.map((item) => ({ ...item, status })),\n }\n }),\n )\n }, [])\n\n const markAllPass = React.useCallback(() => {\n setCategories((prev) =>\n prev.map((cat) => ({\n ...cat,\n items: cat.items.map((item) => ({ ...item, status: 'pass' })),\n })),\n )\n }, [])\n\n const addMockPhoto = React.useCallback(() => {\n setDefectPhotos((prev) => [\n ...prev,\n {\n id: `photo-${Date.now()}`,\n name: `defect_evidence_0${prev.length + 1}.jpg`,\n size: `${(Math.random() * 2 + 1).toFixed(1)} MB`,\n },\n ])\n }, [])\n\n const removePhoto = React.useCallback((id: string) => {\n setDefectPhotos((prev) => prev.filter((p) => p.id !== id))\n }, [])\n\n const handleSubmit = React.useCallback(() => {\n if (!certified || typedSignature.trim() === '') return\n setSubmitted(true)\n onSubmit?.({\n reportId,\n vehicleId,\n trailerId,\n odometer,\n inspectionType,\n driverName,\n driverCdl,\n carrierName,\n dotNumber,\n inspectionDate,\n inspectionTime,\n location,\n categories,\n defectSeverity,\n defectNotes,\n defectPhotos,\n certified,\n signatureTimestamp: new Date().toISOString(),\n })\n }, [\n certified,\n typedSignature,\n reportId,\n vehicleId,\n trailerId,\n odometer,\n inspectionType,\n driverName,\n driverCdl,\n carrierName,\n dotNumber,\n inspectionDate,\n inspectionTime,\n location,\n categories,\n defectSeverity,\n defectNotes,\n defectPhotos,\n onSubmit,\n ])\n\n const handleReset = React.useCallback(() => {\n setSubmitted(false)\n markAllPass()\n setDefectNotes('')\n setDefectPhotos([])\n }, [markAllPass])\n\n return (\n \n {/* ================================================================= */}\n {/* POST-SUBMISSION CONFIRMATION RECEIPT */}\n {/* ================================================================= */}\n {submitted ? (\n
\n \n \n
\n \n \n {hasDefects ? (\n \n ) : (\n \n )}\n \n
\n\n \n FMCSA § 396.11 Certified Electronic DVIR\n \n\n

\n {hasDefects ? 'DVIR Transmitted · Defect Action Required' : 'DVIR Certified · Ready for Dispatch'}\n

\n

\n {hasDefects\n ? 'Inspection report logged with safety defects. Maintenance dispatch notification has been dispatched to the terminal garage desk.'\n : 'Commercial motor vehicle safety inspection verified with zero safety defects. Safe to operate under FMCSA regulations.'}\n

\n\n
\n Compliance Document Ref:\n {reportId}\n
\n
\n\n \n {/* Key Inspection Meta Grid */}\n
\n
\n Vehicle / Tractor\n {vehicleId}\n {odometer}\n
\n
\n Associated Trailer\n {trailerId}\n Type: 53-ft Dry Van\n
\n
\n Certified Driver\n {driverName}\n CDL #{driverCdl}\n
\n
\n Timestamp & Hub\n \n {inspectionDate} · {inspectionTime}\n \n {location}\n
\n
\n\n {/* Audit Result Stats Strip */}\n
\n
\n
\n Items Inspected\n \n {totalCount} / {totalCount}\n \n
\n \n
\n Passed\n {passCount}\n
\n \n
\n Failed / Defects\n 0 ? 'text-destructive' : 'text-muted-foreground',\n )}\n >\n {failCount}\n \n
\n \n
\n N/A\n {naCount}\n
\n
\n\n \n {!hasDefects ? : }\n {hasDefects ? `Defects Found (${failCount})` : 'All Systems Verified'}\n \n
\n\n {/* Digital Signature Receipt Box */}\n
\n
\n \n \n Electronic Cryptographic Driver Signature\n \n DOT § 396.11 Certified\n
\n
\n

\n {typedSignature || driverName}\n

\n
\n
\n \n Signer: {driverName} · CDL #{driverCdl}\n \n SHA-256: 8f9b7c2d-9482-41e9-b631-{reportId}\n
\n
\n\n {/* Actions */}\n
\n \n\n
\n \n \n
\n
\n \n \n \n ) : (\n /* =============================================================== */\n /* ACTIVE INSPECTION WORKFLOW */\n /* =============================================================== */\n
\n {/* Top Inspection Header Card */}\n \n \n
\n
\n
\n \n \n FMCSA § 396.11 Audit\n \n\n {/* Status Badge */}\n {hasDefects ? (\n \n \n Defects Found · {failCount} {failCount === 1 ? 'Item' : 'Items'} Failed\n \n ) : (\n \n \n Inspection In Progress\n \n )}\n
\n\n \n Driver Vehicle Inspection Report (DVIR)\n \n \n Mandatory pre-trip and post-trip commercial motor vehicle safety certification and defect tracking\n portal.\n \n
\n\n {/* Header Quick Action CTA */}\n
\n \n \n Quick Pass All\n \n \n \n Submit Completed DVIR\n \n
\n
\n \n\n {/* Vehicle Telemetry & Inspection Metadata Bar */}\n \n
\n {/* Vehicle ID */}\n
\n
\n \n Vehicle / Unit Number\n
\n
{vehicleId}
\n
Trailer: {trailerId}
\n
\n\n {/* Odometer */}\n
\n
\n \n Odometer Mileage\n
\n
{odometer}
\n
ECM Telemetry Synced
\n
\n\n {/* Inspection Type Selector */}\n
\n
\n \n Inspection Type\n
\n \n
\n\n {/* Driver & Terminal Info */}\n
\n
\n \n Driver & Terminal\n
\n
\n {driverName} · CDL #{driverCdl}\n
\n
{location}
\n
\n
\n\n {/* Progress bar */}\n
\n
\n Audit Completion Progress\n \n {passCount} Pass · {failCount} Fail · {naCount} N/A ({totalCount} Total)\n \n
\n
\n \n
\n
\n \n \n\n {/* =============================================================== */}\n {/* 5 FMCSA INSPECTION CATEGORIES */}\n {/* =============================================================== */}\n
\n {categories.map((category) => (\n \n \n
\n
\n
\n {category.icon === 'disc' && }\n {category.icon === 'layers' && }\n {category.icon === 'lightbulb' && }\n {category.icon === 'wrench' && }\n {category.icon === 'flame' && }\n
\n
\n \n {category.title}\n \n {category.description}\n
\n
\n\n {/* Quick category batch controls */}\n
\n setCategoryAll(category.id, 'pass')}\n >\n Pass All\n \n setCategoryAll(category.id, 'na')}\n >\n N/A All\n \n
\n
\n \n\n \n {category.items.map((item) => (\n \n {/* Item Details */}\n
\n
\n {item.label}\n {item.status === 'fail' && (\n \n Defect\n \n )}\n
\n

{item.spec}

\n
\n\n {/* Segmented Pass / Fail / N/A Toggle Buttons */}\n
\n {/* Pass Button */}\n setItemStatus(category.id, item.id, 'pass')}\n >\n \n Pass\n \n\n {/* Fail Button */}\n setItemStatus(category.id, item.id, 'fail')}\n >\n \n Fail\n \n\n {/* N/A Button */}\n setItemStatus(category.id, item.id, 'na')}\n >\n \n N/A\n \n
\n
\n ))}\n \n \n ))}\n
\n\n {/* =============================================================== */}\n {/* DYNAMIC DEFECT REPORT CARD (Appears when any item is marked Fail) */}\n {/* =============================================================== */}\n {hasDefects && (\n \n \n
\n
\n
\n \n
\n
\n \n Critical Defect Log & Repair Dispatch Form\n \n \n {failCount} item(s) flagged with safety defects requiring mechanic sign-off under FMCSA §\n 396.13.\n \n
\n
\n\n \n Action Required\n \n
\n \n\n \n {/* Flagged Failed Items Chips */}\n
\n \n
\n {failedItems.map((item) => (\n \n \n {item.label}\n \n ))}\n
\n
\n\n {/* Defect Severity Selector */}\n
\n
\n \n \n
\n\n
\n \n
\n setDefectReportedToDesk(Boolean(c))}\n />\n \n
\n
\n
\n\n {/* Defect Notes Textarea */}\n
\n \n setDefectNotes(v)}\n rows={3}\n placeholder=\"Describe exact defect location, leak sounds, tire damage, PSI measurements, or electrical malfunction...\"\n className=\"text-xs\"\n />\n
\n\n {/* Photo Attachment Dropzone Placeholder */}\n
\n
\n \n JPG, PNG up to 15MB\n
\n\n {/* Upload dropzone box */}\n {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n addMockPhoto()\n }\n }}\n >\n
\n
\n \n
\n

\n Click to attach photo or drag and drop image here\n

\n

\n Capture close-ups of damaged tires, fluid puddles, broken lights, or air fittings\n

\n
\n
\n\n {/* List of Attached Photos */}\n {defectPhotos.length > 0 && (\n
\n {defectPhotos.map((photo) => (\n \n
\n \n {photo.name}\n ({photo.size})\n
\n removePhoto(photo.id)}\n >\n \n \n
\n ))}\n \n )}\n \n \n \n )}\n\n {/* =============================================================== */}\n {/* DRIVER CERTIFICATION & SIGNATURE */}\n {/* =============================================================== */}\n \n \n
\n
\n \n \n Driver Safety Certification & Electronic Signature\n \n
\n \n FMCSA § 396.11(a)\n \n
\n \n Commercial motor vehicle driver must certify that all required items have been inspected and all known\n defects disclosed.\n \n \n\n \n {/* Legal Acknowledgement Checkbox */}\n
\n
\n setCertified(Boolean(c))}\n className=\"mt-0.5\"\n />\n
\n \n I certify that I have conducted a thorough safety inspection of this vehicle and trailer in\n compliance with Federal Motor Carrier Safety Regulations.\n \n

\n All components listed above have been checked. Any conditions likely to affect the safe operation\n of this vehicle or result in mechanical breakdown have been truthfully recorded.\n

\n
\n
\n
\n\n {/* Driver Signature Fields */}\n
\n
\n \n setTypedSignature(e.target.value)}\n placeholder=\"Marcus Vance\"\n size=\"small\"\n />\n
\n
\n \n
\n {inspectionDate} · {inspectionTime}\n
\n
\n
\n\n {/* Live Digital Stamp Preview */}\n
\n
\n \n \n Live Digital Signature Stamp\n \n Verified CDL Class-A Holder\n
\n\n
\n

\n {typedSignature || 'Marcus Vance'}\n

\n
\n\n
\n \n Driver: {driverName} · CDL #{driverCdl}\n \n \n Carrier: {carrierName} ({dotNumber})\n \n
\n
\n \n\n \n
\n Audit Status:{' '}\n \n {passCount} Pass, {failCount} Fail, {naCount} N/A\n \n
\n\n
\n \n \n \n Submit Completed DVIR\n \n
\n \n \n \n )}\n \n )\n}\n\nexport default DriverInspectionChecklist\n", "type": "registry:block", "target": "~/components/blocks/DriverInspectionChecklist.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/checkbox.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/label.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Commercial vehicle Driver Vehicle Inspection Report (DVIR) pre-trip and post-trip safety audit. Features vehicle odometer & ELD telemetry header, 5 grouped FMCSA safety inspection categories (Brakes & Air Pressure, Tires & Wheels, Lights & Electrical, Engine & Fluids, Emergency Safety Gear) with Pass/Fail/N/A segmented controls, dynamic defect report card with Out-of-Service severity classification, defect notes, photo dropzone, driver CDL certification signature pad, and post-submission compliance receipt.", "categories": [ "logistics", "app", "forms" ] }