{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "dispatch-assignment-board",
  "title": "Dispatch Assignment Board",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/dispatch-assignment-board/DispatchAssignmentBoard.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowRightLeft,\n  BatteryCharging,\n  Check,\n  Clock,\n  Download,\n  Fuel,\n  Gauge,\n  MapPin,\n  Navigation,\n  PackageCheck,\n  Phone,\n  Search,\n  CheckCircle2,\n  ShieldCheck,\n  Truck,\n  X,\n} from 'lucide-vue-next'\nimport DispatchActionModal from './DispatchActionModal.vue'\nimport { DRIVER_ROUTES_DATA } from './dispatch-data'\nimport type { ActiveModalState, DriverRoute, RouteStop, StopStatus } from './dispatch-assignment-board-types'\nexport type { ActiveModalState, DriverRoute, RouteStop, StopStatus } from './dispatch-assignment-board-types'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\nconst props = withDefaults(\n  defineProps<{\n    initialZone?: string\n    initialFilter?: 'all' | 'in_transit' | 'high_load' | 'near_complete'\n    class?: HTMLAttributes['class']\n  }>(),\n  {\n    initialZone: 'Metro Los Angeles - North Zone',\n    initialFilter: 'all',\n  },\n)\n\nconst selectedZone = ref(props.initialZone)\nconst filterType = ref<'all' | 'in_transit' | 'high_load' | 'near_complete'>(props.initialFilter)\nconst searchQuery = ref('')\nconst isOptimizing = ref(false)\nconst notificationBanner = ref<{ title: string; message: string; type: 'success' | 'info' } | null>(null)\nconst activeModal = ref<{\n  type: 'gps' | 'call' | 'reassign'\n  route: DriverRoute\n  targetRouteId?: string\n} | null>(null)\n\nconst filteredRoutes = computed(() => {\n  return DRIVER_ROUTES_DATA.filter((route) => {\n    // Zone filter\n    if (selectedZone.value !== 'all' && route.zone !== selectedZone.value) {\n      return false\n    }\n\n    // Category / Quick filter\n    if (filterType.value === 'in_transit' && route.driver.status !== 'on_route') {\n      return false\n    }\n    if (filterType.value === 'high_load' && route.currentPayloadLbs / route.maxPayloadLbs < 0.8) {\n      return false\n    }\n    if (filterType.value === 'near_complete' && route.completedStops / route.totalStops < 0.75) {\n      return false\n    }\n\n    // Search query\n    if (searchQuery.value.trim()) {\n      const q = searchQuery.value.toLowerCase()\n      const matchRoute = route.routeCode.toLowerCase().includes(q) || route.routeName.toLowerCase().includes(q)\n      const matchDriver = route.driver.name.toLowerCase().includes(q)\n      const matchVehicle =\n        route.vehicle.name.toLowerCase().includes(q) || route.vehicle.plateNumber.toLowerCase().includes(q)\n      const matchStop = route.stops.some(\n        (s) => s.locationName.toLowerCase().includes(q) || s.address.toLowerCase().includes(q),\n      )\n      if (!matchRoute && !matchDriver && !matchVehicle && !matchStop) {\n        return false\n      }\n    }\n\n    return true\n  })\n})\n\nfunction handleAutoOptimize() {\n  isOptimizing.value = true\n  notificationBanner.value = null\n\n  setTimeout(() => {\n    isOptimizing.value = false\n    notificationBanner.value = {\n      title: 'AI Route Optimization Complete',\n      message: 'Re-sequenced 4 active routes · Saved 18.4 road miles · Estimated 22 min overall transit reduction.',\n      type: 'success',\n    }\n  }, 750)\n}\n\nfunction handleExportManifests() {\n  notificationBanner.value = {\n    title: 'Dispatch Manifests Exported',\n    message: 'Generated PDF loading manifests and CSV stop sequences for 4 routes (180 total stops).',\n    type: 'info',\n  }\n}\n\nfunction openModal(type: 'gps' | 'call' | 'reassign', route: DriverRoute) {\n  activeModal.value = {\n    type,\n    route,\n    targetRouteId: DRIVER_ROUTES_DATA.find((r) => r.id !== route.id)?.id,\n  }\n}\n\nfunction closeModal() {\n  activeModal.value = null\n}\n\nfunction resetFilters() {\n  selectedZone.value = 'all'\n  searchQuery.value = ''\n  filterType.value = 'all'\n}\n\nfunction handleConfirmReassign() {\n  if (activeModal.value) {\n    const route = activeModal.value.route\n    notificationBanner.value = {\n      title: 'Stops Successfully Reassigned',\n      message: `Pending stop from ${route.routeCode} transferred. Driver GPS routes and manifest synced.`,\n      type: 'success',\n    }\n    closeModal()\n  }\n}\n</script>\n\n<template>\n  <div :class=\"cn('text-foreground w-full space-y-6', props.class)\" data-slot=\"dispatch-assignment-board\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <div\n            class=\"bg-success/10 text-success flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold\"\n          >\n            <span class=\"relative flex h-2 w-2\">\n              <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n              <span class=\"bg-success relative inline-flex h-2 w-2 rounded-full\" />\n            </span>\n            <span>Live Dispatch Operations</span>\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n            <Clock class=\"h-3.5 w-3.5\" />\n            <span class=\"font-mono tabular-nums\">Today · Aug 21, 2026</span>\n          </div>\n        </div>\n        <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n          Delivery Dispatch & Route Optimization\n        </h1>\n        <p class=\"text-muted-foreground text-xs sm:text-sm\">\n          Last-mile route sequencing, real-time stop execution, and vehicle payload load balancing.\n        </p>\n      </div>\n\n      <!-- Header Controls -->\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <div class=\"w-full sm:w-64\">\n          <Select v-model=\"selectedZone\">\n            <SelectTrigger class=\"h-9 w-full text-xs font-medium\" aria-label=\"Select Dispatch Zone\">\n              <SelectValue placeholder=\"Select Zone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectLabel class=\"text-xs\">Dispatch Zones</SelectLabel>\n                <SelectItem value=\"all\" class=\"text-xs\">All Dispatch Zones</SelectItem>\n                <SelectItem value=\"Metro Los Angeles - North Zone\" class=\"text-xs\">\n                  Metro Los Angeles - North Zone\n                </SelectItem>\n                <SelectItem value=\"Metro Los Angeles - South Zone\" class=\"text-xs\">\n                  Metro Los Angeles - South Zone\n                </SelectItem>\n                <SelectItem value=\"San Fernando Valley Hub\" class=\"text-xs\"> San Fernando Valley Hub </SelectItem>\n                <SelectItem value=\"Orange County Central\" class=\"text-xs\"> Orange County Central </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </div>\n\n        <Button\n          aria-label=\"Download attachment\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"h-9 gap-1.5 text-xs font-medium\"\n          @click=\"handleExportManifests\"\n        >\n          <Download class=\"h-3.5 w-3.5\" />\n          <span>Export Manifests</span>\n        </Button>\n\n        <Button\n          size=\"sm\"\n          class=\"h-9 gap-1.5 text-xs font-medium shadow-xs\"\n          :disabled=\"isOptimizing\"\n          @click=\"handleAutoOptimize\"\n        >\n          <Navigation :class=\"cn('h-3.5 w-3.5', isOptimizing && 'text-primary-foreground animate-spin')\" />\n          <span>{{ isOptimizing ? 'Optimizing Routes...' : 'Auto-Optimize Routes' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Notification Banner -->\n    <div\n      v-if=\"notificationBanner\"\n      :class=\"\n        cn(\n          'animate-in fade-in-50 flex items-start justify-between rounded-lg border p-3.5 text-xs transition-colors duration-200',\n          notificationBanner.type === 'success'\n            ? 'border-success/30 bg-success/10 text-success'\n            : 'border-primary/30 bg-primary/10 text-foreground',\n        )\n      \"\n    >\n      <div class=\"flex items-start gap-2.5\">\n        <CheckCircle2 v-if=\"notificationBanner.type === 'success'\" class=\"text-success mt-0.5 h-4 w-4 shrink-0\" />\n        <PackageCheck v-else class=\"text-primary mt-0.5 h-4 w-4 shrink-0\" />\n        <div>\n          <span class=\"font-semibold\">{{ notificationBanner.title }}:</span>\n          <span class=\"text-muted-foreground dark:text-foreground/80 ml-1\">{{ notificationBanner.message }}</span>\n        </div>\n      </div>\n      <button\n        aria-label=\"Dismiss notification\"\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground transition-colors\"\n        @click=\"notificationBanner = null\"\n      >\n        <X class=\"h-4 w-4\" />\n      </button>\n    </div>\n\n    <!-- Dispatch Overview KPI Cards (4 Cards) -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- KPI 1: Active Routes -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Total Routes Active</CardTitle>\n          <div class=\"bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-md\">\n            <Truck class=\"h-4 w-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">8</span>\n            <span class=\"text-muted-foreground text-xs font-medium\">routes dispatched</span>\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n            <Badge\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success h-5 px-1.5 text-xs font-medium\"\n            >\n              6 In Transit\n            </Badge>\n            <span>2 loading at hub</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- KPI 2: Stops Remaining & Progress -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Total Stops Remaining</CardTitle>\n          <div class=\"bg-info/10 text-info flex h-8 w-8 items-center justify-center rounded-md\">\n            <PackageCheck class=\"h-4 w-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"flex items-baseline gap-1\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">142</span>\n              <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">/ 180 stops</span>\n            </div>\n            <span class=\"text-info text-info font-mono text-xs font-semibold tabular-nums\">78.8%</span>\n          </div>\n          <Progress :model-value=\"78.8\" class=\"h-1.5\" />\n          <p class=\"text-muted-foreground text-xs\">\n            <span class=\"text-foreground font-mono font-semibold tabular-nums\">38</span> stops pending completion\n          </p>\n        </CardContent>\n      </Card>\n\n      <!-- KPI 3: On-Time Rate -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">On-Time Delivery Rate</CardTitle>\n          <div class=\"bg-success/10 text-success flex h-8 w-8 items-center justify-center rounded-md\">\n            <ShieldCheck class=\"h-4 w-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1.5\">\n          <div class=\"flex items-baseline gap-2\">\n            <span class=\"text-success text-success font-mono text-2xl font-bold tracking-tight tabular-nums\"\n              >97.4%</span\n            >\n            <Badge\n              variant=\"outline\"\n              class=\"border-success/20 bg-success/10 text-success h-5 px-1.5 text-xs font-medium\"\n            >\n              +1.8% vs SLA\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            Target: <span class=\"text-foreground font-mono font-medium tabular-nums\">≥95.0%</span> · 0 SLA breaches\n          </p>\n        </CardContent>\n      </Card>\n\n      <!-- KPI 4: Cargo Weight Dispatched -->\n      <Card class=\"border-border shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium\">Total Cargo Weight Dispatched</CardTitle>\n          <div class=\"bg-warning/10 text-warning flex h-8 w-8 items-center justify-center rounded-md\">\n            <Gauge class=\"h-4 w-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"flex items-baseline gap-1\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">14,280</span>\n              <span class=\"text-muted-foreground text-xs\">lbs</span>\n            </div>\n            <Badge\n              variant=\"outline\"\n              class=\"border-warning/20 bg-warning/10 text-warning h-5 px-1.5 text-xs font-medium\"\n            >\n              82% capacity\n            </Badge>\n          </div>\n          <div class=\"bg-muted relative h-1.5 w-full overflow-hidden rounded-full\">\n            <div class=\"bg-warning h-full rounded-full transition-[width] duration-500\" style=\"width: 82%\" />\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            Payload limit: <span class=\"text-foreground font-mono font-medium tabular-nums\">17,400 lbs</span> · Well\n            balanced\n          </p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Filter & Search Controls Bar -->\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"flex flex-wrap items-center gap-1.5\">\n        <Button\n          size=\"sm\"\n          :variant=\"filterType === 'all' ? 'default' : 'outline'\"\n          class=\"h-8 text-xs font-medium\"\n          @click=\"filterType = 'all'\"\n        >\n          All Routes ({{ DRIVER_ROUTES_DATA.length }})\n        </Button>\n        <Button\n          size=\"sm\"\n          :variant=\"filterType === 'in_transit' ? 'default' : 'outline'\"\n          class=\"h-8 text-xs font-medium\"\n          @click=\"filterType = 'in_transit'\"\n        >\n          In Transit (4)\n        </Button>\n        <Button\n          size=\"sm\"\n          :variant=\"filterType === 'high_load' ? 'default' : 'outline'\"\n          class=\"h-8 text-xs font-medium\"\n          @click=\"filterType = 'high_load'\"\n        >\n          High Load (>80%)\n        </Button>\n        <Button\n          size=\"sm\"\n          :variant=\"filterType === 'near_complete' ? 'default' : 'outline'\"\n          class=\"h-8 text-xs font-medium\"\n          @click=\"filterType = 'near_complete'\"\n        >\n          Near Completion (>70%)\n        </Button>\n      </div>\n\n      <div class=\"relative w-full sm:w-72\">\n        <Search class=\"text-muted-foreground absolute top-2.5 left-2.5 h-3.5 w-3.5\" />\n        <input\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Filter driver, route, or stop...\"\n          class=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border pr-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-hidden\"\n        />\n        <button\n          aria-label=\"Clear search\"\n          v-if=\"searchQuery\"\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground absolute top-2 right-2\"\n          @click=\"searchQuery = ''\"\n        >\n          <X class=\"h-3.5 w-3.5\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Empty State when filtered out -->\n    <div\n      v-if=\"filteredRoutes.length === 0\"\n      class=\"border-border flex flex-col items-center justify-center rounded-xl border border-dashed py-12 text-center\"\n    >\n      <Truck class=\"text-muted-foreground/50 mb-3 h-10 w-10\" />\n      <h3 class=\"text-foreground text-sm font-semibold\">No matching dispatch routes found</h3>\n      <p class=\"text-muted-foreground mt-1 max-w-sm text-xs\">\n        Try resetting your zone selector or search query to see active drivers and vehicle assignments.\n      </p>\n      <Button variant=\"outline\" size=\"sm\" class=\"mt-4 h-8 text-xs\" @click=\"resetFilters\"> Reset Filters </Button>\n    </div>\n\n    <!-- Driver Routes Grid / Multi-Card Board (4 Driver Route Cards) -->\n    <div v-else class=\"grid grid-cols-1 gap-6 xl:grid-cols-2\">\n      <Card\n        v-for=\"route in filteredRoutes\"\n        :key=\"route.id\"\n        class=\"border-border flex flex-col shadow-xs transition-[color,background-color,border-color,box-shadow] hover:shadow-sm\"\n      >\n        <!-- Card Header: Route ID, Status, Driver and Vehicle snapshot -->\n        <CardHeader class=\"space-y-3 pb-3\">\n          <div class=\"flex flex-wrap items-start justify-between gap-2\">\n            <div class=\"space-y-0.5\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-primary font-mono text-xs font-semibold\">{{ route.routeCode }}</span>\n                <CardTitle class=\"text-foreground text-sm font-bold sm:text-base\">\n                  {{ route.routeName }}\n                </CardTitle>\n              </div>\n              <p class=\"text-muted-foreground text-xs\">{{ route.zone }}</p>\n            </div>\n\n            <div class=\"flex items-center gap-1.5\">\n              <Badge\n                variant=\"outline\"\n                class=\"border-success/20 bg-success/10 text-success h-5 px-2 text-xs font-medium\"\n              >\n                In Transit · On Schedule\n              </Badge>\n            </div>\n          </div>\n\n          <Separator />\n\n          <!-- Driver Profile & Vehicle Metadata -->\n          <div class=\"bg-muted/40 flex flex-col gap-3 rounded-lg p-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar class=\"border-border h-9 w-9 border\">\n                <AvatarFallback class=\"bg-primary/10 text-primary text-xs font-bold\">\n                  {{ route.driver.initials }}\n                </AvatarFallback>\n              </Avatar>\n              <div class=\"space-y-0.5\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-foreground text-xs font-semibold\">{{ route.driver.name }}</span>\n                  <span class=\"bg-success inline-flex h-1.5 w-1.5 rounded-full\" title=\"Active\" />\n                </div>\n                <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                  <span class=\"font-mono tabular-nums\">{{ route.driver.phone }}</span>\n                  <span>·</span>\n                  <span>{{ route.driver.radioChannel }}</span>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border flex items-center justify-between gap-x-2 border-t pt-2 sm:border-t-0 sm:pt-0 sm:text-right\"\n            >\n              <div class=\"space-y-0.5\">\n                <div class=\"flex items-center gap-1.5 sm:justify-end\">\n                  <Truck class=\"text-muted-foreground h-3.5 w-3.5\" />\n                  <span class=\"text-foreground text-xs font-medium\">{{ route.vehicle.name }}</span>\n                </div>\n                <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs sm:justify-end\">\n                  <span class=\"font-mono text-xs\">{{ route.vehicle.plateNumber }}</span>\n                  <span>·</span>\n                  <span class=\"flex items-center gap-1 font-mono text-xs tabular-nums\">\n                    <BatteryCharging v-if=\"route.vehicle.powerType === 'electric'\" class=\"text-success h-3 w-3\" />\n                    <Fuel v-else class=\"text-info h-3 w-3\" />\n                    {{ route.vehicle.powerLevel }}\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"flex-1 space-y-4\">\n          <!-- Route Progress & Payload Load Balance Overview -->\n          <div class=\"border-border bg-card grid grid-cols-1 gap-3 rounded-lg border p-3 sm:grid-cols-2\">\n            <!-- Stops Progress -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                <span class=\"text-muted-foreground\">Stops Completion</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">\n                  {{ route.completedStops }} / {{ route.totalStops }}\n                  <span class=\"text-muted-foreground font-normal\"\n                    >({{ Math.round((route.completedStops / route.totalStops) * 100) }}%)</span\n                  >\n                </span>\n              </div>\n              <Progress :model-value=\"(route.completedStops / route.totalStops) * 100\" class=\"h-1.5\" />\n              <div\n                class=\"text-muted-foreground flex items-center justify-between gap-x-2 font-mono text-xs tabular-nums\"\n              >\n                <span>Shift: {{ route.shiftWindow }}</span>\n                <span>ETA: {{ route.estimatedCompletion }}</span>\n              </div>\n            </div>\n\n            <!-- Payload Weight Utilization -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                <span class=\"text-muted-foreground\">Payload Load Balance</span>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">\n                  {{ route.currentPayloadLbs.toLocaleString() }} / {{ route.maxPayloadLbs.toLocaleString() }} lbs\n                </span>\n              </div>\n              <div class=\"bg-muted relative h-1.5 w-full overflow-hidden rounded-full\">\n                <div\n                  class=\"h-full rounded-full transition-[width,background-color] duration-500\"\n                  :class=\"route.currentPayloadLbs / route.maxPayloadLbs > 0.85 ? 'bg-warning' : 'bg-primary'\"\n                  :style=\"`width: ${(route.currentPayloadLbs / route.maxPayloadLbs) * 100}%`\"\n                />\n              </div>\n              <div\n                class=\"text-muted-foreground flex items-center justify-between gap-x-2 font-mono text-xs tabular-nums\"\n              >\n                <span>{{ Math.round((route.currentPayloadLbs / route.maxPayloadLbs) * 100) }}% capacity</span>\n                <span\n                  :class=\"\n                    route.currentPayloadLbs / route.maxPayloadLbs > 0.85\n                      ? 'text-warning font-medium'\n                      : 'text-muted-foreground'\n                  \"\n                >\n                  {{ route.maxPayloadLbs - route.currentPayloadLbs }} lbs available\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Stops Timeline Section -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <h4 class=\"text-muted-foreground text-xs font-semibold tracking-wide uppercase\">\n                Stop Sequence & Delivery Execution\n              </h4>\n              <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                {{ route.stops.filter((s) => s.status === 'delivered').length }} done ·\n                {{ route.stops.filter((s) => s.status === 'in_progress').length }} active ·\n                {{ route.stops.filter((s) => s.status === 'pending').length }} pending\n              </span>\n            </div>\n\n            <!-- Timeline List -->\n            <div\n              class=\"before:bg-border relative space-y-3 pl-2 before:absolute before:top-3 before:bottom-3 before:left-5 before:w-px\"\n            >\n              <div\n                v-for=\"stop in route.stops\"\n                :key=\"stop.id\"\n                class=\"hover:border-border hover:bg-muted/30 relative flex items-start gap-3 rounded-lg border border-transparent p-2 transition-colors\"\n                :class=\"stop.status === 'in_progress' && 'border-primary/30 bg-primary/5 dark:bg-primary/10'\"\n              >\n                <!-- Status Icon Node -->\n                <div class=\"relative z-10 flex shrink-0 items-center justify-center\">\n                  <!-- Delivered Check Icon -->\n                  <div\n                    v-if=\"stop.status === 'delivered'\"\n                    class=\"ring-background bg-success/15 text-success text-success flex h-6 w-6 items-center justify-center rounded-full ring-2\"\n                  >\n                    <Check class=\"h-3.5 w-3.5 stroke-3\" />\n                  </div>\n\n                  <!-- In Progress Pulsing Map Pin -->\n                  <div\n                    v-else-if=\"stop.status === 'in_progress'\"\n                    class=\"bg-primary text-primary-foreground ring-primary/20 relative flex h-6 w-6 items-center justify-center rounded-full shadow-xs ring-4\"\n                  >\n                    <MapPin class=\"h-3.5 w-3.5 animate-bounce\" />\n                  </div>\n\n                  <!-- Pending Clock / Circle Node -->\n                  <div\n                    v-else\n                    class=\"border-border bg-muted text-muted-foreground ring-background flex h-6 w-6 items-center justify-center rounded-full border ring-2\"\n                  >\n                    <Clock class=\"h-3 w-3\" />\n                  </div>\n                </div>\n\n                <!-- Stop Details -->\n                <div class=\"min-w-0 flex-1 space-y-0.5\">\n                  <div class=\"flex flex-wrap items-center justify-between gap-1\">\n                    <div class=\"flex items-center gap-1.5 truncate\">\n                      <span class=\"text-muted-foreground font-mono text-xs font-semibold\">#{{ stop.sequence }}</span>\n                      <span class=\"text-foreground truncate text-xs font-semibold\">{{ stop.locationName }}</span>\n                    </div>\n\n                    <!-- Stop Status Timestamp / ETA -->\n                    <div class=\"flex items-center gap-1\">\n                      <Badge\n                        v-if=\"stop.status === 'delivered'\"\n                        variant=\"outline\"\n                        class=\"border-success/20 bg-success/10 text-success text-success h-4.5 px-1.5 font-mono text-xs font-medium tabular-nums\"\n                      >\n                        Delivered {{ stop.deliveredTime }}\n                      </Badge>\n                      <Badge\n                        v-else-if=\"stop.status === 'in_progress'\"\n                        class=\"bg-primary text-primary-foreground h-4.5 px-1.5 font-mono text-xs font-medium tabular-nums\"\n                      >\n                        In Progress · ETA {{ stop.estimatedTime }}\n                      </Badge>\n                      <Badge\n                        v-else\n                        variant=\"secondary\"\n                        class=\"text-muted-foreground h-4.5 px-1.5 font-mono text-xs font-medium tabular-nums\"\n                      >\n                        Pending\n                      </Badge>\n                    </div>\n                  </div>\n\n                  <p class=\"text-muted-foreground truncate text-xs\">{{ stop.address }}</p>\n\n                  <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 pt-0.5 text-xs\">\n                    <span class=\"text-foreground font-mono font-medium tabular-nums\">\n                      {{ stop.packagesCount }} {{ stop.packageType }}\n                    </span>\n                    <span v-if=\"stop.recipient\" class=\"text-muted-foreground\">· {{ stop.recipient }}</span>\n                    <span v-if=\"stop.notes\" class=\"text-warning font-medium\">· {{ stop.notes }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n\n        <!-- Card Footer: Quick Action Buttons -->\n        <CardFooter class=\"border-border border-t pt-3\">\n          <div class=\"flex w-full flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex items-center gap-1.5\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"h-8 gap-1.5 text-xs font-medium\"\n                @click=\"openModal('reassign', route)\"\n              >\n                <ArrowRightLeft class=\"h-3.5 w-3.5\" />\n                <span>Reassign Stops</span>\n              </Button>\n\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"h-8 gap-1.5 text-xs font-medium\"\n                @click=\"openModal('call', route)\"\n              >\n                <Phone class=\"h-3.5 w-3.5\" />\n                <span>Call Driver</span>\n              </Button>\n            </div>\n\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              class=\"h-8 gap-1.5 text-xs font-medium shadow-xs\"\n              @click=\"openModal('gps', route)\"\n            >\n              <Navigation class=\"h-3.5 w-3.5\" />\n              <span>View Live GPS</span>\n            </Button>\n          </div>\n        </CardFooter>\n      </Card>\n    </div>\n\n    <!-- Action Modals (GPS telemetry, direct call, reassign stops) -->\n    <DispatchActionModal\n      v-model=\"activeModal\"\n      :all-routes=\"DRIVER_ROUTES_DATA\"\n      @confirm-reassign=\"handleConfirmReassign\"\n      @open-modal=\"openModal\"\n    />\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DispatchAssignmentBoard.vue"
    },
    {
      "path": "packages/registry-vue/blocks/dispatch-assignment-board/DispatchActionModal.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRightLeft, Check, MapPin, Navigation, Phone, PhoneCall, X } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport type { ActiveModalState, DriverRoute } from './dispatch-assignment-board-types'\n\nconst props = defineProps<{\n  modelValue: ActiveModalState | null\n  allRoutes: DriverRoute[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: ActiveModalState | null): void\n  (e: 'confirmReassign'): void\n  (e: 'openModal', type: 'gps' | 'call' | 'reassign', route: DriverRoute): void\n}>()\n\nfunction closeModal() {\n  emit('update:modelValue', null)\n}\n\nfunction handleConfirmReassign() {\n  emit('confirmReassign')\n}\n\nfunction setTargetRoute(targetId: string) {\n  if (props.modelValue) {\n    emit('update:modelValue', {\n      ...props.modelValue,\n      targetRouteId: targetId,\n    })\n  }\n}\n</script>\n\n<template>\n  <div\n    v-if=\"modelValue\"\n    class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs duration-150\"\n    @click.self=\"closeModal\"\n  >\n    <!-- GPS Telemetry Modal -->\n    <div\n      v-if=\"modelValue.type === 'gps'\"\n      class=\"border-border bg-card w-full max-w-lg space-y-4 rounded-xl border p-6 shadow-xl\"\n    >\n      <div class=\"flex items-center justify-between gap-x-2\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-md\">\n            <Navigation class=\"h-4 w-4\" />\n          </div>\n          <div>\n            <h3 class=\"text-foreground text-sm font-bold\">Live Telemetry & GPS Tracking</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              {{ modelValue.route.routeCode }} · {{ modelValue.route.driver.name }}\n            </p>\n          </div>\n        </div>\n        <button\n          aria-label=\"Close modal\"\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n          @click=\"closeModal\"\n        >\n          <X class=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <Separator />\n\n      <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n          <span class=\"text-muted-foreground text-xs\">Current Speed</span>\n          <p class=\"text-foreground font-mono text-sm font-bold\">{{ modelValue.route.telemetry.speed }}</p>\n        </div>\n        <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n          <span class=\"text-muted-foreground text-xs\">Heading</span>\n          <p class=\"text-foreground font-mono text-sm font-bold\">{{ modelValue.route.telemetry.heading }}</p>\n        </div>\n        <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n          <span class=\"text-muted-foreground text-xs\">Power / Fuel</span>\n          <p class=\"text-success font-mono text-sm font-bold\">\n            {{ modelValue.route.vehicle.powerLevel }}\n          </p>\n        </div>\n        <div class=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n          <span class=\"text-muted-foreground text-xs\">GPS Ping</span>\n          <p class=\"text-foreground font-mono text-sm font-bold\">{{ modelValue.route.telemetry.lastPing }}</p>\n        </div>\n      </div>\n\n      <div class=\"border-border bg-muted/20 space-y-1.5 rounded-lg border p-3\">\n        <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n          <span class=\"text-muted-foreground\">Current Coordinates & Street</span>\n          <span class=\"text-success font-mono font-medium\">Signal: {{ modelValue.route.telemetry.signal }}</span>\n        </div>\n        <div class=\"flex items-start gap-2\">\n          <MapPin class=\"text-primary mt-0.5 h-4 w-4 shrink-0\" />\n          <p class=\"text-foreground text-xs font-semibold\">{{ modelValue.route.telemetry.currentLocation }}</p>\n        </div>\n      </div>\n\n      <!-- Next Stop Snapshot -->\n      <div class=\"border-primary/20 bg-primary/5 space-y-1 rounded-lg border p-3\">\n        <span class=\"text-primary text-xs font-semibold tracking-wide uppercase\">Next Stop In Sequence</span>\n        <p class=\"text-foreground text-xs font-bold\">\n          {{ modelValue.route.stops.find((s) => s.status === 'in_progress')?.locationName || 'Hub Return' }}\n        </p>\n        <p class=\"text-muted-foreground text-xs\">\n          {{ modelValue.route.stops.find((s) => s.status === 'in_progress')?.address }}\n        </p>\n      </div>\n\n      <div class=\"flex justify-end gap-2 pt-2\">\n        <Button aria-label=\"Close modal\" variant=\"outline\" size=\"sm\" class=\"h-8 text-xs\" @click=\"closeModal\"\n          >Close</Button\n        >\n        <Button size=\"sm\" class=\"h-8 text-xs font-medium\" @click=\"$emit('openModal', 'call', modelValue.route)\">\n          <Phone class=\"mr-1.5 h-3.5 w-3.5\" /> Call Driver\n        </Button>\n      </div>\n    </div>\n\n    <!-- Call Driver Modal -->\n    <div\n      v-else-if=\"modelValue.type === 'call'\"\n      class=\"border-border bg-card w-full max-w-md space-y-4 rounded-xl border p-6 shadow-xl\"\n    >\n      <div class=\"flex items-center justify-between gap-x-2\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"bg-success/10 text-success flex h-8 w-8 items-center justify-center rounded-md\">\n            <PhoneCall class=\"h-4 w-4\" />\n          </div>\n          <div>\n            <h3 class=\"text-foreground text-sm font-bold\">Dispatch Driver Communications</h3>\n            <p class=\"text-muted-foreground text-xs\">{{ modelValue.route.routeCode }} Direct Link</p>\n          </div>\n        </div>\n        <button\n          aria-label=\"Close modal\"\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n          @click=\"closeModal\"\n        >\n          <X class=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <Separator />\n\n      <div class=\"border-border bg-muted/40 flex items-center gap-3 rounded-lg border p-3\">\n        <Avatar class=\"border-border h-11 w-11 border\">\n          <AvatarFallback class=\"bg-primary/10 text-primary text-sm font-bold\">\n            {{ modelValue.route.driver.initials }}\n          </AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-0.5\">\n          <h4 class=\"text-foreground text-sm font-semibold\">{{ modelValue.route.driver.name }}</h4>\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ modelValue.route.driver.phone }}</p>\n          <p class=\"text-muted-foreground text-xs\">{{ modelValue.route.driver.radioChannel }} · Hands-Free Active</p>\n        </div>\n      </div>\n\n      <div class=\"space-y-2 text-xs\">\n        <span class=\"text-muted-foreground font-medium\">Quick Broadcast Dispatch Presets:</span>\n        <div class=\"grid grid-cols-2 gap-2\">\n          <button\n            type=\"button\"\n            class=\"border-border bg-background hover:border-primary/40 hover:bg-accent rounded-md border p-2 text-left transition-colors\"\n            @click=\"handleConfirmReassign\"\n          >\n            <span class=\"text-foreground block font-semibold\">Traffic Alert</span>\n            <span class=\"text-muted-foreground text-xs\">Reroute around I-10 slowdown</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"border-border bg-background hover:border-primary/40 hover:bg-accent rounded-md border p-2 text-left transition-colors\"\n            @click=\"handleConfirmReassign\"\n          >\n            <span class=\"text-foreground block font-semibold\">Priority Stop</span>\n            <span class=\"text-muted-foreground text-xs\">Bump hospital drop to next</span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"flex justify-end gap-2 pt-2\">\n        <Button aria-label=\"Close modal\" variant=\"outline\" size=\"sm\" class=\"h-8 text-xs\" @click=\"closeModal\"\n          >Cancel</Button\n        >\n        <Button\n          size=\"sm\"\n          class=\"bg-success hover:bg-success/90 h-8 text-xs font-medium text-white\"\n          @click=\"handleConfirmReassign\"\n        >\n          <Phone class=\"mr-1.5 h-3.5 w-3.5\" /> Start Direct Call\n        </Button>\n      </div>\n    </div>\n\n    <!-- Reassign Stops Modal -->\n    <div\n      v-else-if=\"modelValue.type === 'reassign'\"\n      class=\"border-border bg-card w-full max-w-lg space-y-4 rounded-xl border p-6 shadow-xl\"\n    >\n      <div class=\"flex items-center justify-between gap-x-2\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"bg-warning/10 text-warning flex h-8 w-8 items-center justify-center rounded-md\">\n            <ArrowRightLeft class=\"h-4 w-4\" />\n          </div>\n          <div>\n            <h3 class=\"text-foreground text-sm font-bold\">Reassign Pending Stops</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Transfer workload from {{ modelValue.route.routeCode }} ({{ modelValue.route.driver.name }})\n            </p>\n          </div>\n        </div>\n        <button\n          aria-label=\"Close modal\"\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n          @click=\"closeModal\"\n        >\n          <X class=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <Separator />\n\n      <div class=\"space-y-3 text-xs\">\n        <div>\n          <label class=\"text-foreground mb-1 block font-semibold\">Pending Stop to Transfer:</label>\n          <div class=\"border-border bg-muted/40 rounded-lg border p-3\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-foreground font-semibold\">\n                {{\n                  modelValue.route.stops.find((s) => s.status === 'pending')?.locationName ||\n                  'Stop #4 - Delivery Destination'\n                }}\n              </span>\n              <Badge variant=\"outline\" class=\"text-xs\">\n                {{ modelValue.route.stops.find((s) => s.status === 'pending')?.packagesCount || 2 }} packages\n              </Badge>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">\n              {{ modelValue.route.stops.find((s) => s.status === 'pending')?.address }}\n            </p>\n          </div>\n        </div>\n\n        <div>\n          <label class=\"text-foreground mb-1 block font-semibold\">Target Available Route / Driver:</label>\n          <div class=\"space-y-2\">\n            <div\n              v-for=\"target in allRoutes.filter((r) => r.id !== modelValue?.route.id)\"\n              :key=\"target.id\"\n              class=\"flex cursor-pointer items-center justify-between rounded-lg border p-2.5 transition-colors\"\n              :class=\"\n                modelValue.targetRouteId === target.id\n                  ? 'border-primary bg-primary/5'\n                  : 'border-border hover:bg-muted/30'\n              \"\n              @click=\"setTargetRoute(target.id)\"\n            >\n              <div class=\"space-y-0.5\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-foreground font-semibold\">{{ target.routeCode }} · {{ target.routeName }}</span>\n                  <span class=\"text-muted-foreground text-xs\">({{ target.driver.name }})</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">\n                  Current Load: {{ target.currentPayloadLbs }} lbs ({{\n                    Math.round((target.currentPayloadLbs / target.maxPayloadLbs) * 100)\n                  }}%) · {{ target.totalStops - target.completedStops }} stops left\n                </p>\n              </div>\n              <div\n                class=\"border-border flex h-5 w-5 items-center justify-center rounded-full border\"\n                :class=\"modelValue.targetRouteId === target.id && 'border-primary bg-primary text-primary-foreground'\"\n              >\n                <Check v-if=\"modelValue.targetRouteId === target.id\" class=\"h-3 w-3 stroke-3\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex justify-end gap-2 pt-2\">\n        <Button aria-label=\"Close modal\" variant=\"outline\" size=\"sm\" class=\"h-8 text-xs\" @click=\"closeModal\"\n          >Cancel</Button\n        >\n        <Button size=\"sm\" class=\"h-8 text-xs font-medium\" @click=\"handleConfirmReassign\">\n          <Check class=\"mr-1.5 h-3.5 w-3.5\" /> Confirm Stop Reassignment\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DispatchActionModal.vue"
    },
    {
      "path": "packages/registry-vue/blocks/dispatch-assignment-board/dispatch-assignment-board-types.ts",
      "content": "export type StopStatus = 'delivered' | 'in_progress' | 'pending'\n\nexport interface RouteStop {\n  id: string\n  sequence: number\n  locationName: string\n  address: string\n  status: StopStatus\n  deliveredTime?: string\n  estimatedTime?: string\n  packagesCount: number\n  packageType: string\n  notes?: string\n  recipient?: string\n}\n\nexport interface DriverRoute {\n  id: string\n  routeCode: string\n  routeName: string\n  zone: string\n  driver: {\n    name: string\n    avatar?: string\n    initials: string\n    phone: string\n    status: 'on_route' | 'break' | 'loading'\n    radioChannel: string\n  }\n  vehicle: {\n    name: string\n    type: string\n    plateNumber: string\n    powerLevel: string\n    powerType: 'electric' | 'diesel'\n  }\n  completedStops: number\n  totalStops: number\n  currentPayloadLbs: number\n  maxPayloadLbs: number\n  shiftWindow: string\n  estimatedCompletion: string\n  telemetry: {\n    speed: string\n    heading: string\n    currentLocation: string\n    lastPing: string\n    signal: string\n  }\n  stops: RouteStop[]\n}\n\nexport interface ActiveModalState {\n  type: 'gps' | 'call' | 'reassign'\n  route: DriverRoute\n  targetRouteId?: string\n}\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/dispatch-assignment-board-types.ts"
    },
    {
      "path": "packages/registry-vue/blocks/dispatch-assignment-board/dispatch-data.ts",
      "content": "import type { DriverRoute } from './dispatch-assignment-board-types'\n\nexport const DRIVER_ROUTES_DATA: DriverRoute[] = [\n  {\n    id: 'route-01',\n    routeCode: 'Route #01',\n    routeName: 'Downtown Metro',\n    zone: 'Metro Los Angeles - North Zone',\n    driver: {\n      name: 'Elena Rostova',\n      initials: 'ER',\n      phone: '+1 (213) 555-0182',\n      status: 'on_route',\n      radioChannel: 'Ch 4 · North Dispatch',\n    },\n    vehicle: {\n      name: 'Ford Transit #204',\n      type: 'EV Cargo Van',\n      plateNumber: 'CA-8KDX92',\n      powerLevel: '74% Battery',\n      powerType: 'electric',\n    },\n    completedStops: 18,\n    totalStops: 24,\n    currentPayloadLbs: 1850,\n    maxPayloadLbs: 2200,\n    shiftWindow: '07:30 AM – 16:30 PM',\n    estimatedCompletion: '15:45 PM',\n    telemetry: {\n      speed: '32 mph',\n      heading: 'NW 315°',\n      currentLocation: 'Grand Ave & 5th St, Los Angeles, CA 90071',\n      lastPing: '12s ago',\n      signal: '5G Active',\n    },\n    stops: [\n      {\n        id: 'r1-s1',\n        sequence: 1,\n        locationName: 'Acme Industrial Hub',\n        address: '1240 S Santa Fe Ave',\n        status: 'delivered',\n        deliveredTime: '09:15 AM',\n        packagesCount: 12,\n        packageType: 'Cartons',\n        recipient: 'Signed by J. Miller',\n      },\n      {\n        id: 'r1-s2',\n        sequence: 2,\n        locationName: 'Apex Tech Campus',\n        address: '800 Wilshire Blvd, Ste 400',\n        status: 'delivered',\n        deliveredTime: '10:45 AM',\n        packagesCount: 8,\n        packageType: 'Parcels',\n        recipient: 'Dock 4B Security',\n      },\n      {\n        id: 'r1-s3',\n        sequence: 3,\n        locationName: 'Metro Distribution Center',\n        address: '1950 E 7th St',\n        status: 'in_progress',\n        estimatedTime: '14:15 PM',\n        packagesCount: 15,\n        packageType: 'Heavy Boxes',\n        notes: 'Priority Rush · Forklift offload requested',\n      },\n      {\n        id: 'r1-s4',\n        sequence: 4,\n        locationName: 'Pasadena Hospital Supply',\n        address: '650 S Raymond Ave',\n        status: 'pending',\n        packagesCount: 2,\n        packageType: 'Medical Coolers',\n        notes: 'Cold-Chain · Temperature Log Required',\n      },\n    ],\n  },\n  {\n    id: 'route-02',\n    routeCode: 'Route #02',\n    routeName: 'Westside & Santa Monica',\n    zone: 'Metro Los Angeles - North Zone',\n    driver: {\n      name: 'Marcus Vance',\n      initials: 'MV',\n      phone: '+1 (310) 555-0194',\n      status: 'on_route',\n      radioChannel: 'Ch 2 · West Dispatch',\n    },\n    vehicle: {\n      name: 'Mercedes Sprinter #118',\n      type: 'High-Roof Van',\n      plateNumber: 'CA-9TMR44',\n      powerLevel: '68% Fuel',\n      powerType: 'diesel',\n    },\n    completedStops: 22,\n    totalStops: 26,\n    currentPayloadLbs: 2450,\n    maxPayloadLbs: 3000,\n    shiftWindow: '08:00 AM – 17:00 PM',\n    estimatedCompletion: '16:15 PM',\n    telemetry: {\n      speed: '28 mph',\n      heading: 'W 270°',\n      currentLocation: 'Ocean Ave & Colorado Ave, Santa Monica, CA',\n      lastPing: '8s ago',\n      signal: '5G Active',\n    },\n    stops: [\n      {\n        id: 'r2-s1',\n        sequence: 1,\n        locationName: 'Pacific Design Center',\n        address: '8687 Melrose Ave',\n        status: 'delivered',\n        deliveredTime: '09:40 AM',\n        packagesCount: 6,\n        packageType: 'Crates',\n        recipient: 'Direct Receipt · Bay 2',\n      },\n      {\n        id: 'r2-s2',\n        sequence: 2,\n        locationName: 'Oceanview Medical Plaza',\n        address: '1301 20th St, Floor 3',\n        status: 'delivered',\n        deliveredTime: '11:20 AM',\n        packagesCount: 14,\n        packageType: 'Packages',\n        recipient: 'Receptionist Amy K.',\n      },\n      {\n        id: 'r2-s3',\n        sequence: 3,\n        locationName: 'Santa Monica Pier Logistics',\n        address: '200 Santa Monica Pier',\n        status: 'in_progress',\n        estimatedTime: '14:40 PM',\n        packagesCount: 4,\n        packageType: 'Cartons',\n        notes: 'Dock Bay 2 · Access Gate Code #4491',\n      },\n      {\n        id: 'r2-s4',\n        sequence: 4,\n        locationName: 'Silicon Beach Incubator',\n        address: '12020 Ocean Park Blvd',\n        status: 'pending',\n        packagesCount: 5,\n        packageType: 'Parcels',\n        notes: 'Signature Required · 5th Floor Suite 500',\n      },\n    ],\n  },\n  {\n    id: 'route-03',\n    routeCode: 'Route #03',\n    routeName: 'Pasadena & Glendale',\n    zone: 'San Fernando Valley Hub',\n    driver: {\n      name: 'Sofia Chen',\n      initials: 'SC',\n      phone: '+1 (626) 555-0147',\n      status: 'on_route',\n      radioChannel: 'Ch 5 · Valley Dispatch',\n    },\n    vehicle: {\n      name: 'Ram ProMaster #309',\n      type: 'Electric Courier',\n      plateNumber: 'CA-7KPL55',\n      powerLevel: '82% Battery',\n      powerType: 'electric',\n    },\n    completedStops: 14,\n    totalStops: 20,\n    currentPayloadLbs: 1620,\n    maxPayloadLbs: 2100,\n    shiftWindow: '08:15 AM – 16:45 PM',\n    estimatedCompletion: '16:30 PM',\n    telemetry: {\n      speed: '38 mph',\n      heading: 'E 090°',\n      currentLocation: 'Colorado Blvd & Lake Ave, Pasadena, CA',\n      lastPing: '18s ago',\n      signal: '5G Active',\n    },\n    stops: [\n      {\n        id: 'r3-s1',\n        sequence: 1,\n        locationName: 'Glendale Aerospace Labs',\n        address: '4300 San Fernando Rd',\n        status: 'delivered',\n        deliveredTime: '10:05 AM',\n        packagesCount: 3,\n        packageType: 'Heavy Units',\n        recipient: 'Forklift Bay Delivery',\n      },\n      {\n        id: 'r3-s2',\n        sequence: 2,\n        locationName: 'Foothill Commercial Park',\n        address: '2210 Foothill Blvd',\n        status: 'delivered',\n        deliveredTime: '11:50 AM',\n        packagesCount: 9,\n        packageType: 'Boxes',\n        recipient: 'Suite 200 Mailroom',\n      },\n      {\n        id: 'r3-s3',\n        sequence: 3,\n        locationName: 'Huntington Research Institute',\n        address: '1151 Oxford Rd',\n        status: 'in_progress',\n        estimatedTime: '14:25 PM',\n        packagesCount: 6,\n        packageType: 'Lab Samples',\n        notes: 'Fragile · Bio-Sample Insulated Crate',\n      },\n      {\n        id: 'r3-s4',\n        sequence: 4,\n        locationName: 'Old Town Commerce Plaza',\n        address: '300 E Colorado Blvd',\n        status: 'pending',\n        packagesCount: 4,\n        packageType: 'Packages',\n        notes: 'Front Desk Drop · Notify Concierge',\n      },\n    ],\n  },\n  {\n    id: 'route-04',\n    routeCode: 'Route #04',\n    routeName: 'South Bay Logistics',\n    zone: 'Metro Los Angeles - South Zone',\n    driver: {\n      name: 'Tariq Mansour',\n      initials: 'TM',\n      phone: '+1 (424) 555-0133',\n      status: 'on_route',\n      radioChannel: 'Ch 3 · South Dispatch',\n    },\n    vehicle: {\n      name: 'Freightliner Custom #412',\n      type: 'Box Truck',\n      plateNumber: 'CA-5WXZ91',\n      powerLevel: '88% Fuel',\n      powerType: 'diesel',\n    },\n    completedStops: 19,\n    totalStops: 22,\n    currentPayloadLbs: 3100,\n    maxPayloadLbs: 3800,\n    shiftWindow: '07:00 AM – 16:00 PM',\n    estimatedCompletion: '15:20 PM',\n    telemetry: {\n      speed: '45 mph',\n      heading: 'S 180°',\n      currentLocation: 'I-405 Southbound at Carson St, CA',\n      lastPing: '5s ago',\n      signal: '5G Active',\n    },\n    stops: [\n      {\n        id: 'r4-s1',\n        sequence: 1,\n        locationName: 'Port of LA Cargo Terminal',\n        address: '425 S Palos Verdes St',\n        status: 'delivered',\n        deliveredTime: '08:30 AM',\n        packagesCount: 18,\n        packageType: 'Pallets',\n        recipient: 'Customs Manifest #882',\n      },\n      {\n        id: 'r4-s2',\n        sequence: 2,\n        locationName: 'Torrance Industrial Park',\n        address: '190th St & Western Ave',\n        status: 'delivered',\n        deliveredTime: '10:15 AM',\n        packagesCount: 11,\n        packageType: 'Crates',\n        recipient: 'Security Gate 5',\n      },\n      {\n        id: 'r4-s3',\n        sequence: 3,\n        locationName: 'Long Beach Tech Hub',\n        address: '100 W Ocean Blvd',\n        status: 'in_progress',\n        estimatedTime: '14:50 PM',\n        packagesCount: 8,\n        packageType: 'Hardware Cases',\n        notes: 'Server Equipment · Handle with Care',\n      },\n      {\n        id: 'r4-s4',\n        sequence: 4,\n        locationName: 'Manhattan Beach Retail Depot',\n        address: '3200 Sepulveda Blvd',\n        status: 'pending',\n        packagesCount: 6,\n        packageType: 'Store Parcels',\n        notes: 'Store Receiving · Rear Loading Dock',\n      },\n    ],\n  },\n]\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/dispatch-data.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "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/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Last-mile route dispatching, delivery driver stop sequencing, and vehicle payload load balancing: live dispatch overview KPIs, zone filtering, AI route auto-sequencing, and driver route cards with vehicle payload load balancing, live progress tracking, interactive stops timeline, driver communications, and telemetry actions.",
  "categories": [
    "logistics",
    "app"
  ]
}