{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "driver-inspection-checklist",
  "title": "Driver Inspection Checklist",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/driver-inspection-checklist/DriverInspectionChecklist.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  AlertTriangle,\n  Camera,\n  Check,\n  CheckCircle2,\n  Clock,\n  Disc,\n  Download,\n  FileCheck,\n  FileText,\n  Flame,\n  Gauge,\n  Layers,\n  Lightbulb,\n  Minus,\n  Printer,\n  RotateCcw,\n  ShieldAlert,\n  ShieldCheck,\n  Trash2,\n  Truck,\n  UploadCloud,\n  User,\n  Wrench,\n  X,\n} from 'lucide-vue-next'\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\ninterface Props {\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  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\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})\n\nconst emits = defineEmits<{\n  (e: 'submit', data: DVIRReportData): void\n  (e: 'defect-change', defects: InspectionItem[]): void\n}>()\n\n// Core state\nconst reportId = ref('DVIR-2026-90412')\nconst inspectionType = ref<InspectionType>(props.initialInspectionType)\nconst vehicleId = ref(props.vehicleId)\nconst trailerId = ref(props.trailerId)\nconst odometer = ref(props.odometer)\nconst driverName = ref(props.driverName)\nconst driverCdl = ref(props.driverCdl)\nconst carrierName = ref('Apex Freight Logistics Inc.')\nconst dotNumber = ref('USDOT #2940182')\nconst inspectionDate = ref('2026-08-21')\nconst inspectionTime = ref('06:45 AM EDT')\nconst location = ref('Terminal #12 · Ontario Logistics Hub, CA')\n\n// Defect report details\nconst defectSeverity = ref<DefectSeverity>(props.initialDefectState ? 'critical' : 'minor')\nconst defectNotes = ref(\n  props.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)\nconst defectReportedToDesk = ref(true)\n\nconst defectPhotos = ref<DefectPhoto[]>(\n  props.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// Driver Certification\nconst certified = ref(true)\nconst typedSignature = ref(props.driverName)\nconst submitted = ref(props.initialSubmitted)\n\n// Default Inspection Categories\nconst categories = reactive<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: props.initialDefectState ? 'fail' : '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: props.initialDefectState ? 'fail' : '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\n// Computed tallies\nconst allItems = computed(() => categories.flatMap((c) => c.items))\nconst totalCount = computed(() => allItems.value.length)\nconst passCount = computed(() => allItems.value.filter((i) => i.status === 'pass').length)\nconst failCount = computed(() => allItems.value.filter((i) => i.status === 'fail').length)\nconst naCount = computed(() => allItems.value.filter((i) => i.status === 'na').length)\nconst failedItems = computed(() => allItems.value.filter((i) => i.status === 'fail'))\nconst hasDefects = computed(() => failedItems.value.length > 0)\n\nconst completionPercentage = computed(() => {\n  if (totalCount.value === 0) return 0\n  const checked = allItems.value.filter((i) => i.status !== undefined).length\n  return Math.round((checked / totalCount.value) * 100)\n})\n\nwatch(\n  failedItems,\n  (newFailed) => {\n    emits('defect-change', newFailed)\n    if (newFailed.length > 0 && defectNotes.value.trim() === '') {\n      defectNotes.value = `Inspection defect recorded for: ${newFailed.map((f) => f.label).join(', ')}. Requires shop evaluation.`\n    }\n  },\n  { deep: true },\n)\n\nfunction setItemStatus(categoryIndex: number, itemIndex: number, status: CheckStatus) {\n  categories[categoryIndex].items[itemIndex].status = status\n}\n\nfunction setCategoryAll(categoryIndex: number, status: CheckStatus) {\n  categories[categoryIndex].items.forEach((item) => {\n    item.status = status\n  })\n}\n\nfunction markAllPass() {\n  categories.forEach((cat) => {\n    cat.items.forEach((item) => {\n      item.status = 'pass'\n    })\n  })\n}\n\nfunction addMockPhoto() {\n  const photoIndex = defectPhotos.value.length + 1\n  defectPhotos.value.push({\n    id: `photo-${Date.now()}`,\n    name: `defect_evidence_0${photoIndex}.jpg`,\n    size: `${(Math.random() * 2 + 1).toFixed(1)} MB`,\n  })\n}\n\nfunction removePhoto(id: string) {\n  defectPhotos.value = defectPhotos.value.filter((p) => p.id !== id)\n}\n\nfunction handleSubmit() {\n  if (!certified.value || typedSignature.value.trim() === '') return\n  submitted.value = true\n  emits('submit', {\n    reportId: reportId.value,\n    vehicleId: vehicleId.value,\n    trailerId: trailerId.value,\n    odometer: odometer.value,\n    inspectionType: inspectionType.value,\n    driverName: driverName.value,\n    driverCdl: driverCdl.value,\n    carrierName: carrierName.value,\n    dotNumber: dotNumber.value,\n    inspectionDate: inspectionDate.value,\n    inspectionTime: inspectionTime.value,\n    location: location.value,\n    categories: JSON.parse(JSON.stringify(categories)),\n    defectSeverity: defectSeverity.value,\n    defectNotes: defectNotes.value,\n    defectPhotos: [...defectPhotos.value],\n    certified: certified.value,\n    signatureTimestamp: new Date().toISOString(),\n  })\n}\n\nfunction handleReset() {\n  submitted.value = false\n  markAllPass()\n  defectNotes.value = ''\n  defectPhotos.value = []\n}\n</script>\n\n<template>\n  <div\n    data-slot=\"driver-inspection-checklist\"\n    :class=\"cn('text-foreground mx-auto w-full max-w-5xl space-y-6', props.class)\"\n  >\n    <!-- ================================================================= -->\n    <!-- POST-SUBMISSION CONFIRMATION RECEIPT                              -->\n    <!-- ================================================================= -->\n    <div v-if=\"submitted\" class=\"space-y-6\">\n      <Card class=\"border-border overflow-hidden shadow-xs\">\n        <div\n          :class=\"[\n            'border-b p-6 text-center sm:p-8',\n            hasDefects ? 'border-warning/30 bg-warning/10' : 'border-success/30 bg-success/10',\n          ]\"\n        >\n          <div class=\"relative mx-auto mb-4 size-16\">\n            <span\n              :class=\"['absolute inset-0 rounded-full blur-xl', hasDefects ? 'bg-warning/30' : 'bg-success/30']\"\n              aria-hidden=\"true\"\n            />\n            <span\n              :class=\"[\n                'relative flex size-16 items-center justify-center rounded-full border shadow-xs',\n                hasDefects\n                  ? 'border-warning/40 bg-warning/20 text-warning'\n                  : 'border-success/40 bg-success/20 text-success',\n              ]\"\n            >\n              <ShieldAlert v-if=\"hasDefects\" class=\"size-8\" aria-hidden=\"true\" />\n              <CheckCircle2 v-else class=\"size-8\" aria-hidden=\"true\" />\n            </span>\n          </div>\n\n          <Badge\n            :variant=\"hasDefects ? 'destructive' : 'outline'\"\n            :class=\"[\n              'mb-2 font-mono text-xs tracking-wider uppercase',\n              !hasDefects && 'border-success/30 bg-success/10 text-success',\n            ]\"\n          >\n            FMCSA § 396.11 Certified Electronic DVIR\n          </Badge>\n\n          <h2 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n            {{ hasDefects ? 'DVIR Transmitted · Defect Action Required' : 'DVIR Certified · Ready for Dispatch' }}\n          </h2>\n          <p class=\"text-muted-foreground mx-auto mt-1.5 max-w-xl text-xs sm:text-sm\">\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          </p>\n\n          <div\n            class=\"border-border bg-background/80 mt-4 inline-flex flex-wrap items-center gap-2 rounded-full border px-3.5 py-1 text-xs backdrop-blur-xs\"\n          >\n            <span class=\"text-muted-foreground font-medium\">Compliance Document Ref:</span>\n            <span class=\"text-foreground font-mono font-bold\">{{ reportId }}</span>\n          </div>\n        </div>\n\n        <CardContent class=\"space-y-6 p-6\">\n          <!-- Key Inspection Meta Grid -->\n          <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            <div class=\"border-border bg-muted/20 rounded-lg border p-3\">\n              <span class=\"text-muted-foreground block text-xs font-medium\">Vehicle / Tractor</span>\n              <span class=\"text-foreground mt-0.5 block text-sm font-semibold\">{{ vehicleId }}</span>\n              <span class=\"text-muted-foreground text-xs\">{{ odometer }}</span>\n            </div>\n            <div class=\"border-border bg-muted/20 rounded-lg border p-3\">\n              <span class=\"text-muted-foreground block text-xs font-medium\">Associated Trailer</span>\n              <span class=\"text-foreground mt-0.5 block text-sm font-semibold\">{{ trailerId }}</span>\n              <span class=\"text-muted-foreground text-xs\">Type: 53-ft Dry Van</span>\n            </div>\n            <div class=\"border-border bg-muted/20 rounded-lg border p-3\">\n              <span class=\"text-muted-foreground block text-xs font-medium\">Certified Driver</span>\n              <span class=\"text-foreground mt-0.5 block text-sm font-semibold\">{{ driverName }}</span>\n              <span class=\"text-muted-foreground font-mono text-xs\">CDL #{{ driverCdl }}</span>\n            </div>\n            <div class=\"border-border bg-muted/20 rounded-lg border p-3\">\n              <span class=\"text-muted-foreground block text-xs font-medium\">Timestamp & Hub</span>\n              <span class=\"text-foreground mt-0.5 block text-sm font-semibold\"\n                >{{ inspectionDate }} · {{ inspectionTime }}</span\n              >\n              <span class=\"text-muted-foreground block truncate text-xs\">{{ location }}</span>\n            </div>\n          </div>\n\n          <!-- Audit Result Stats Strip -->\n          <div class=\"border-border bg-card flex flex-wrap items-center justify-between gap-3 rounded-lg border p-4\">\n            <div class=\"flex flex-wrap items-center gap-x-6 gap-y-3\">\n              <div>\n                <span class=\"text-muted-foreground block text-xs\">Items Inspected</span>\n                <span class=\"text-foreground text-lg font-bold tabular-nums\">{{ totalCount }} / {{ totalCount }}</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-8\" />\n              <div>\n                <span class=\"text-muted-foreground block text-xs\">Passed</span>\n                <span class=\"text-success text-success text-lg font-bold tabular-nums\">{{ passCount }}</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-8\" />\n              <div>\n                <span class=\"text-muted-foreground block text-xs\">Failed / Defects</span>\n                <span\n                  :class=\"[\n                    'text-lg font-bold tabular-nums',\n                    failCount > 0 ? 'text-destructive' : 'text-muted-foreground',\n                  ]\"\n                >\n                  {{ failCount }}\n                </span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-8\" />\n              <div>\n                <span class=\"text-muted-foreground block text-xs\">N/A</span>\n                <span class=\"text-muted-foreground text-lg font-bold tabular-nums\">{{ naCount }}</span>\n              </div>\n            </div>\n\n            <Badge :variant=\"hasDefects ? 'destructive' : 'outline'\" class=\"gap-1.5 px-3 py-1 text-xs\">\n              <CheckCircle2 v-if=\"!hasDefects\" class=\"size-3.5\" />\n              <AlertTriangle v-else class=\"size-3.5\" />\n              {{ hasDefects ? `Defects Found (${failCount})` : 'All Systems Verified' }}\n            </Badge>\n          </div>\n\n          <!-- Digital Signature Receipt Box -->\n          <div class=\"border-border bg-muted/15 space-y-2 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <ShieldCheck class=\"text-primary size-3.5\" />\n                Electronic Cryptographic Driver Signature\n              </span>\n              <span class=\"text-muted-foreground font-mono text-xs\">DOT § 396.11 Certified</span>\n            </div>\n            <div class=\"border-border/60 border-b pt-1 pb-3\">\n              <p class=\"text-primary text-2xl font-medium tracking-wide italic\">\n                {{ typedSignature || driverName }}\n              </p>\n            </div>\n            <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-2 font-mono text-xs\">\n              <span>Signer: {{ driverName }} · CDL #{{ driverCdl }}</span>\n              <span>SHA-256: 8f9b7c2d-9482-41e9-b631-{{ reportId }}</span>\n            </div>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"flex flex-wrap items-center justify-between gap-3 pt-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"handleReset\">\n              <RotateCcw class=\"size-3.5\" />\n              Start New Inspection\n            </Button>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\">\n                <Printer class=\"size-3.5\" />\n                Print Driver Copy\n              </Button>\n              <Button aria-label=\"Download attachment\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\">\n                <Download class=\"size-3.5\" />\n                Download Certified DVIR PDF\n              </Button>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- ACTIVE INSPECTION WORKFLOW                                        -->\n    <!-- ================================================================= -->\n    <div v-else class=\"space-y-6\">\n      <!-- Top Inspection Header Card -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"pb-4\">\n          <div class=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n            <div class=\"min-w-0 space-y-1.5\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-primary/30 bg-primary/10 text-primary gap-1.5 py-0.5 text-xs font-medium\"\n                >\n                  <Truck class=\"size-3.5\" aria-hidden=\"true\" />\n                  FMCSA § 396.11 Audit\n                </Badge>\n\n                <!-- Status Badge -->\n                <Badge v-if=\"hasDefects\" variant=\"destructive\" class=\"animate-pulse gap-1.5 py-0.5 text-xs font-medium\">\n                  <AlertTriangle class=\"size-3.5\" aria-hidden=\"true\" />\n                  Defects Found · {{ failCount }} {{ failCount === 1 ? 'Item' : 'Items' }} Failed\n                </Badge>\n                <Badge\n                  v-else\n                  variant=\"outline\"\n                  class=\"border-warning/40 bg-warning/10 text-warning gap-1.5 py-0.5 text-xs font-medium\"\n                >\n                  <Clock class=\"size-3.5\" aria-hidden=\"true\" />\n                  Inspection In Progress\n                </Badge>\n              </div>\n\n              <CardTitle class=\"text-xl font-bold tracking-tight sm:text-2xl\">\n                Driver Vehicle Inspection Report (DVIR)\n              </CardTitle>\n              <CardDescription class=\"text-xs sm:text-sm\">\n                Mandatory pre-trip and post-trip commercial motor vehicle safety certification and defect tracking\n                portal.\n              </CardDescription>\n            </div>\n\n            <!-- Header Quick Action CTA -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"gap-1.5 text-xs font-medium\"\n                @click=\"markAllPass\"\n              >\n                <CheckCircle2 class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                Quick Pass All\n              </Button>\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                class=\"gap-1.5 text-xs font-medium\"\n                :disabled=\"!certified || typedSignature.trim() === ''\"\n                @click=\"handleSubmit\"\n              >\n                <FileCheck class=\"size-3.5\" aria-hidden=\"true\" />\n                Submit Completed DVIR\n              </Button>\n            </div>\n          </div>\n        </CardHeader>\n\n        <!-- Vehicle Telemetry & Inspection Metadata Bar -->\n        <CardContent class=\"pt-0 pb-5\">\n          <div class=\"border-border bg-muted/20 grid gap-3 rounded-lg border p-4 sm:grid-cols-2 lg:grid-cols-4\">\n            <!-- Vehicle ID -->\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <Truck class=\"text-primary size-3.5\" />\n                <span>Vehicle / Unit Number</span>\n              </div>\n              <div class=\"text-foreground text-xs font-semibold\">{{ vehicleId }}</div>\n              <div class=\"text-muted-foreground text-xs\">Trailer: {{ trailerId }}</div>\n            </div>\n\n            <!-- Odometer -->\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <Gauge class=\"text-primary size-3.5\" />\n                <span>Odometer Mileage</span>\n              </div>\n              <div class=\"text-foreground text-xs font-semibold tabular-nums\">{{ odometer }}</div>\n              <div class=\"text-muted-foreground text-xs\">ECM Telemetry Synced</div>\n            </div>\n\n            <!-- Inspection Type Selector -->\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <FileText class=\"text-primary size-3.5\" />\n                <span>Inspection Type</span>\n              </div>\n              <Select v-model=\"inspectionType\">\n                <SelectTrigger class=\"h-7 text-xs font-medium\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"pre-trip\">Pre-Trip Safety Inspection</SelectItem>\n                  <SelectItem value=\"post-trip\">Post-Trip Safety Audit</SelectItem>\n                  <SelectItem value=\"intermodal\">Intermodal Chassis Inspection</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <!-- Driver & Terminal Info -->\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <User class=\"text-primary size-3.5\" />\n                <span>Driver & Terminal</span>\n              </div>\n              <div class=\"text-foreground text-xs font-semibold\">{{ driverName }} · CDL #{{ driverCdl }}</div>\n              <div class=\"text-muted-foreground truncate text-xs\">{{ location }}</div>\n            </div>\n          </div>\n\n          <!-- Progress bar -->\n          <div class=\"mt-4 space-y-1.5\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Audit Completion Progress</span>\n              <span class=\"text-foreground font-mono font-medium tabular-nums\">\n                {{ passCount }} Pass · {{ failCount }} Fail · {{ naCount }} N/A ({{ totalCount }} Total)\n              </span>\n            </div>\n            <div class=\"bg-muted h-1.5 w-full overflow-hidden rounded-full\">\n              <div\n                class=\"h-full transition-[width] duration-300\"\n                :class=\"hasDefects ? 'bg-warning' : 'bg-primary'\"\n                :style=\"{ width: `${completionPercentage}%` }\"\n              />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- =============================================================== -->\n      <!-- 5 FMCSA INSPECTION CATEGORIES                                   -->\n      <!-- =============================================================== -->\n      <div class=\"space-y-4\">\n        <Card\n          v-for=\"(category, catIndex) in categories\"\n          :key=\"category.id\"\n          class=\"border-border overflow-hidden shadow-xs\"\n        >\n          <CardHeader class=\"bg-muted/15 border-border border-b px-5 py-3.5\">\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2.5\">\n                <div\n                  class=\"border-primary/20 bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md border\"\n                >\n                  <Disc v-if=\"category.icon === 'disc'\" class=\"size-4\" />\n                  <Layers v-else-if=\"category.icon === 'layers'\" class=\"size-4\" />\n                  <Lightbulb v-else-if=\"category.icon === 'lightbulb'\" class=\"size-4\" />\n                  <Wrench v-else-if=\"category.icon === 'wrench'\" class=\"size-4\" />\n                  <Flame v-else class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-sm font-bold tracking-tight sm:text-base\">\n                    {{ category.title }}\n                  </CardTitle>\n                  <CardDescription class=\"text-xs\">\n                    {{ category.description }}\n                  </CardDescription>\n                </div>\n              </div>\n\n              <!-- Quick category batch controls -->\n              <div class=\"flex flex-wrap items-center gap-2 self-end sm:self-auto\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-muted-foreground hover:text-foreground h-7 text-xs\"\n                  @click=\"setCategoryAll(catIndex, 'pass')\"\n                >\n                  Pass All\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"text-muted-foreground hover:text-foreground h-7 text-xs\"\n                  @click=\"setCategoryAll(catIndex, 'na')\"\n                >\n                  N/A All\n                </Button>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"divide-border divide-y p-0\">\n            <div\n              v-for=\"(item, itemIndex) in category.items\"\n              :key=\"item.id\"\n              :class=\"[\n                'flex flex-col gap-3 p-4 transition-colors sm:flex-row sm:items-center sm:justify-between',\n                item.status === 'fail' ? 'bg-destructive/5' : 'hover:bg-muted/30',\n              ]\"\n            >\n              <!-- Item Details -->\n              <div class=\"min-w-0 space-y-1 pr-2\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <span class=\"text-foreground text-xs font-semibold sm:text-sm\">\n                    {{ item.label }}\n                  </span>\n                  <Badge\n                    v-if=\"item.status === 'fail'\"\n                    variant=\"destructive\"\n                    class=\"h-4 py-0 font-mono text-xs uppercase\"\n                  >\n                    Defect\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  {{ item.spec }}\n                </p>\n              </div>\n\n              <!-- Segmented Pass / Fail / N/A Toggle Buttons -->\n              <div class=\"flex shrink-0 items-center gap-1 self-start sm:self-center\">\n                <!-- Pass Button -->\n                <button\n                  type=\"button\"\n                  :aria-label=\"`Mark ${item.label} as Pass`\"\n                  :class=\"[\n                    'focus-visible:ring-ring inline-flex cursor-pointer items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium shadow-xs transition-colors outline-none focus-visible:ring-2',\n                    item.status === 'pass'\n                      ? 'border-success/40 bg-success/15 text-success font-semibold'\n                      : 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground',\n                  ]\"\n                  @click=\"setItemStatus(catIndex, itemIndex, 'pass')\"\n                >\n                  <Check class=\"size-3.5\" aria-hidden=\"true\" />\n                  Pass\n                </button>\n\n                <!-- Fail Button -->\n                <button\n                  type=\"button\"\n                  :aria-label=\"`Mark ${item.label} as Fail`\"\n                  :class=\"[\n                    'focus-visible:ring-ring inline-flex cursor-pointer items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium shadow-xs transition-colors outline-none focus-visible:ring-2',\n                    item.status === 'fail'\n                      ? 'border-destructive/40 bg-destructive/15 text-destructive font-semibold'\n                      : 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground',\n                  ]\"\n                  @click=\"setItemStatus(catIndex, itemIndex, 'fail')\"\n                >\n                  <X class=\"size-3.5\" aria-hidden=\"true\" />\n                  Fail\n                </button>\n\n                <!-- N/A Button -->\n                <button\n                  type=\"button\"\n                  :aria-label=\"`Mark ${item.label} as Not Applicable`\"\n                  :class=\"[\n                    'focus-visible:ring-ring inline-flex cursor-pointer items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium shadow-xs transition-colors outline-none focus-visible:ring-2',\n                    item.status === 'na'\n                      ? 'border-border bg-muted text-foreground font-semibold'\n                      : 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground',\n                  ]\"\n                  @click=\"setItemStatus(catIndex, itemIndex, 'na')\"\n                >\n                  <Minus class=\"size-3.5\" aria-hidden=\"true\" />\n                  N/A\n                </button>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- =============================================================== -->\n      <!-- DYNAMIC DEFECT REPORT CARD (Appears when any item is marked Fail) -->\n      <!-- =============================================================== -->\n      <Card\n        v-if=\"hasDefects\"\n        class=\"border-destructive/40 bg-destructive/5 dark:bg-destructive/10 overflow-hidden shadow-xs transition-colors duration-200\"\n      >\n        <CardHeader class=\"border-destructive/20 bg-destructive/10 border-b pb-4\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex flex-wrap items-center gap-2.5\">\n              <div\n                class=\"bg-destructive/20 text-destructive flex size-8 shrink-0 items-center justify-center rounded-md\"\n              >\n                <AlertTriangle class=\"size-4.5\" aria-hidden=\"true\" />\n              </div>\n              <div>\n                <CardTitle class=\"text-destructive text-base font-bold\">\n                  Critical Defect Log & Repair Dispatch Form\n                </CardTitle>\n                <CardDescription class=\"text-destructive/80 text-xs\">\n                  {{ failCount }} item(s) flagged with safety defects requiring mechanic sign-off under FMCSA § 396.13.\n                </CardDescription>\n              </div>\n            </div>\n\n            <Badge variant=\"destructive\" class=\"font-mono text-xs uppercase\"> Action Required </Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-4 p-5\">\n          <!-- Flagged Failed Items Chips -->\n          <div class=\"space-y-1.5\">\n            <Label class=\"text-foreground text-xs font-semibold\">Defective Components Identified</Label>\n            <div class=\"flex flex-wrap gap-2\">\n              <span\n                v-for=\"item in failedItems\"\n                :key=\"item.id\"\n                class=\"border-destructive/30 bg-destructive/10 text-destructive inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium\"\n              >\n                <AlertCircle class=\"size-3.5 shrink-0\" />\n                {{ item.label }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Defect Severity Selector -->\n          <div class=\"grid gap-4 sm:grid-cols-2\">\n            <div class=\"min-w-0 space-y-1.5\">\n              <Label for=\"defect-severity\" class=\"text-xs font-semibold\">Defect Severity Classification *</Label>\n              <Select v-model=\"defectSeverity\">\n                <SelectTrigger id=\"defect-severity\" class=\"h-9 w-full min-w-0 text-xs [&>span]:truncate\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"minor\"> Minor Defect — Safe to operate; scheduled for terminal shop </SelectItem>\n                  <SelectItem value=\"critical\">\n                    Out-of-Service (OOS) Critical — Dispatch prohibited until repaired\n                  </SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <Label class=\"text-xs font-semibold\">Fleet Maintenance Desk Dispatch</Label>\n              <div class=\"border-border bg-card flex flex-wrap items-center gap-2 rounded-md border p-2 text-xs\">\n                <Checkbox id=\"desk-notify\" v-model=\"defectReportedToDesk\" />\n                <Label for=\"desk-notify\" class=\"cursor-pointer text-xs font-normal\">\n                  Auto-create Priority Work Order in Garage Portal (Ticket #WO-8910)\n                </Label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Defect Notes Textarea -->\n          <div class=\"space-y-1.5\">\n            <Label for=\"defect-notes\" class=\"text-xs font-semibold\">Detailed Defect Description & Driver Notes *</Label>\n            <Textarea\n              id=\"defect-notes\"\n              v-model=\"defectNotes\"\n              :rows=\"3\"\n              placeholder=\"Describe exact defect location, leak sounds, tire damage, PSI measurements, or electrical malfunction...\"\n              class=\"text-xs\"\n            />\n          </div>\n\n          <!-- Photo Attachment Dropzone Placeholder -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between\">\n              <Label class=\"flex items-center gap-1.5 text-xs font-semibold\">\n                <Camera class=\"text-primary size-3.5\" />\n                Defect Photographic Evidence\n              </Label>\n              <span class=\"text-muted-foreground text-xs\">JPG, PNG up to 15MB</span>\n            </div>\n\n            <!-- Upload dropzone box -->\n            <div\n              class=\"border-border/80 hover:border-primary/50 bg-card cursor-pointer rounded-xl border-2 border-dashed p-4 text-center transition-colors\"\n              @click=\"addMockPhoto\"\n            >\n              <div class=\"flex flex-col items-center justify-center gap-1.5 py-2\">\n                <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-full\">\n                  <UploadCloud class=\"size-4.5\" />\n                </div>\n                <p class=\"text-foreground text-xs font-medium\">Click to attach photo or drag and drop image here</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  Capture close-ups of damaged tires, fluid puddles, broken lights, or air fittings\n                </p>\n              </div>\n            </div>\n\n            <!-- List of Attached Photos -->\n            <div v-if=\"defectPhotos.length > 0\" class=\"grid gap-2 sm:grid-cols-2\">\n              <div\n                v-for=\"photo in defectPhotos\"\n                :key=\"photo.id\"\n                class=\"border-border bg-card flex items-center justify-between rounded-lg border px-3 py-2 text-xs\"\n              >\n                <div class=\"flex flex-wrap items-center gap-2 truncate\">\n                  <Camera class=\"text-primary size-3.5 shrink-0\" />\n                  <span class=\"text-foreground truncate font-medium\">{{ photo.name }}</span>\n                  <span class=\"text-muted-foreground text-xs\">({{ photo.size }})</span>\n                </div>\n                <button\n                  type=\"button\"\n                  aria-label=\"Remove photo\"\n                  class=\"text-muted-foreground hover:text-destructive cursor-pointer rounded-sm p-1 transition-colors\"\n                  @click=\"removePhoto(photo.id)\"\n                >\n                  <Trash2 class=\"size-3.5\" />\n                </button>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- =============================================================== -->\n      <!-- DRIVER CERTIFICATION & SIGNATURE                                -->\n      <!-- =============================================================== -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <ShieldCheck class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-bold\"> Driver Safety Certification & Electronic Signature </CardTitle>\n            </div>\n            <Badge variant=\"outline\" class=\"text-primary border-primary/30 font-mono text-xs\">\n              FMCSA § 396.11(a)\n            </Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            Commercial motor vehicle driver must certify that all required items have been inspected and all known\n            defects disclosed.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent class=\"space-y-4\">\n          <!-- Legal Acknowledgement Checkbox -->\n          <div class=\"border-border bg-muted/20 rounded-lg border p-3.5\">\n            <div class=\"flex items-start gap-3\">\n              <Checkbox id=\"cert-check\" v-model=\"certified\" class=\"mt-0.5\" />\n              <div class=\"space-y-1\">\n                <Label for=\"cert-check\" class=\"text-foreground cursor-pointer text-xs leading-relaxed font-semibold\">\n                  I certify that I have conducted a thorough safety inspection of this vehicle and trailer in compliance\n                  with Federal Motor Carrier Safety Regulations.\n                </Label>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  All components listed above have been checked. Any conditions likely to affect the safe operation of\n                  this vehicle or result in mechanical breakdown have been truthfully recorded.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Driver Signature Fields -->\n          <div class=\"grid gap-3 sm:grid-cols-3\">\n            <div class=\"space-y-1.5 sm:col-span-2\">\n              <Label for=\"driver-sig\" class=\"text-xs font-semibold\"\n                >Type Full Legal Name as Electronic Signature *</Label\n              >\n              <Input id=\"driver-sig\" v-model=\"typedSignature\" placeholder=\"Marcus Vance\" size=\"small\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <Label class=\"text-xs font-semibold\">Inspection Timestamp</Label>\n              <div\n                class=\"border-border bg-muted/30 text-muted-foreground flex h-8 items-center rounded-md border px-3 font-mono text-xs\"\n              >\n                {{ inspectionDate }} · {{ inspectionTime }}\n              </div>\n            </div>\n          </div>\n\n          <!-- Live Digital Stamp Preview -->\n          <div class=\"border-primary/30 bg-primary/5 space-y-2 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n                <ShieldCheck class=\"text-primary size-3.5\" />\n                Live Digital Signature Stamp\n              </span>\n              <span class=\"text-primary font-mono text-xs font-medium\">Verified CDL Class-A Holder</span>\n            </div>\n\n            <div class=\"border-primary/20 border-b pt-1 pb-2\">\n              <p class=\"text-primary text-2xl font-medium tracking-wide italic\">\n                {{ typedSignature || 'Marcus Vance' }}\n              </p>\n            </div>\n\n            <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-2 font-mono text-xs\">\n              <span>Driver: {{ driverName }} · CDL #{{ driverCdl }}</span>\n              <span>Carrier: {{ carrierName }} ({{ dotNumber }})</span>\n            </div>\n          </div>\n        </CardContent>\n\n        <CardFooter\n          class=\"border-border bg-muted/15 flex flex-wrap items-center justify-between gap-3 border-t px-6 py-4\"\n        >\n          <div class=\"text-muted-foreground text-xs\">\n            Audit Status:\n            <strong class=\"text-foreground\"> {{ passCount }} Pass, {{ failCount }} Fail, {{ naCount }} N/A </strong>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" class=\"text-xs font-medium\" @click=\"handleReset\">\n              Reset Audit\n            </Button>\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs font-medium\"\n              :disabled=\"!certified || typedSignature.trim() === ''\"\n              @click=\"handleSubmit\"\n            >\n              <FileCheck class=\"size-4\" aria-hidden=\"true\" />\n              Submit Completed DVIR\n            </Button>\n          </div>\n        </CardFooter>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DriverInspectionChecklist.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}