{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dispatch-assignment-board",
  "title": "Dispatch Assignment Board",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/dispatch-assignment-board/DispatchAssignmentBoard.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  ArrowRightLeft,\n  BatteryCharging,\n  Clock,\n  Download,\n  Fuel,\n  Gauge,\n  MapPin,\n  Navigation,\n  PackageCheck,\n  Phone,\n  Search,\n  ShieldCheck,\n  CheckCircle2,\n  Truck,\n  X,\n  Check,\n} from 'lucide-react'\nimport { DispatchActionModal } from './DispatchActionModal'\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\nexport interface DispatchAssignmentBoardProps {\n  initialZone?: string\n  initialFilter?: 'all' | 'in_transit' | 'high_load' | 'near_complete'\n  className?: string\n}\n\nexport function DispatchAssignmentBoard({\n  initialZone = 'Metro Los Angeles - North Zone',\n  initialFilter = 'all',\n  className,\n}: DispatchAssignmentBoardProps) {\n  const [selectedZone, setSelectedZone] = React.useState(initialZone)\n  const [filterType, setFilterType] = React.useState<'all' | 'in_transit' | 'high_load' | 'near_complete'>(\n    initialFilter,\n  )\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [isOptimizing, setIsOptimizing] = React.useState(false)\n  const [notificationBanner, setNotificationBanner] = React.useState<{\n    title: string\n    message: string\n    type: 'success' | 'info'\n  } | null>(null)\n  const [activeModal, setActiveModal] = React.useState<{\n    type: 'gps' | 'call' | 'reassign'\n    route: DriverRoute\n    targetRouteId?: string\n  } | null>(null)\n\n  const filteredRoutes = React.useMemo(() => {\n    return DRIVER_ROUTES_DATA.filter((route) => {\n      // Zone filter\n      if (selectedZone !== 'all' && route.zone !== selectedZone) {\n        return false\n      }\n\n      // Category / Quick filter\n      if (filterType === 'in_transit' && route.driver.status !== 'on_route') {\n        return false\n      }\n      if (filterType === 'high_load' && route.currentPayloadLbs / route.maxPayloadLbs < 0.8) {\n        return false\n      }\n      if (filterType === 'near_complete' && route.completedStops / route.totalStops < 0.75) {\n        return false\n      }\n\n      // Search query\n      if (searchQuery.trim()) {\n        const q = searchQuery.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  }, [selectedZone, filterType, searchQuery])\n\n  const handleAutoOptimize = () => {\n    setIsOptimizing(true)\n    setNotificationBanner(null)\n\n    setTimeout(() => {\n      setIsOptimizing(false)\n      setNotificationBanner({\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\n  const handleExportManifests = () => {\n    setNotificationBanner({\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\n  const openModal = (type: 'gps' | 'call' | 'reassign', route: DriverRoute) => {\n    setActiveModal({\n      type,\n      route,\n      targetRouteId: DRIVER_ROUTES_DATA.find((r) => r.id !== route.id)?.id,\n    })\n  }\n\n  const closeModal = () => {\n    setActiveModal(null)\n  }\n\n  const handleConfirmReassign = () => {\n    if (activeModal) {\n      const route = activeModal.route\n      setNotificationBanner({\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\n  return (\n    <div className={cn('text-foreground w-full space-y-6', className)} data-slot=\"dispatch-assignment-board\">\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <div className=\"bg-success/10 text-success flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold\">\n              <span className=\"relative flex h-2 w-2\">\n                <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                <span className=\"bg-success relative inline-flex h-2 w-2 rounded-full\" />\n              </span>\n              <span>Live Dispatch Operations</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n              <Clock className=\"h-3.5 w-3.5\" />\n              <span className=\"font-mono tabular-nums\">Today · Aug 21, 2026</span>\n            </div>\n          </div>\n          <h1 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n            Delivery Dispatch & Route Optimization\n          </h1>\n          <p className=\"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 className=\"flex flex-wrap items-center gap-2.5\">\n          <div className=\"w-full sm:w-64\">\n            <Select value={selectedZone} onValueChange={setSelectedZone}>\n              <SelectTrigger className=\"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 className=\"text-xs\">Dispatch Zones</SelectLabel>\n                  <SelectItem value=\"all\" className=\"text-xs\">\n                    All Dispatch Zones\n                  </SelectItem>\n                  <SelectItem value=\"Metro Los Angeles - North Zone\" className=\"text-xs\">\n                    Metro Los Angeles - North Zone\n                  </SelectItem>\n                  <SelectItem value=\"Metro Los Angeles - South Zone\" className=\"text-xs\">\n                    Metro Los Angeles - South Zone\n                  </SelectItem>\n                  <SelectItem value=\"San Fernando Valley Hub\" className=\"text-xs\">\n                    San Fernando Valley Hub\n                  </SelectItem>\n                  <SelectItem value=\"Orange County Central\" className=\"text-xs\">\n                    Orange County Central\n                  </SelectItem>\n                </SelectGroup>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <Button\n            aria-label=\"Download attachment\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"h-9 gap-1.5 text-xs font-medium\"\n            onClick={handleExportManifests}\n          >\n            <Download className=\"h-3.5 w-3.5\" />\n            <span>Export Manifests</span>\n          </Button>\n\n          <Button\n            size=\"sm\"\n            className=\"h-9 gap-1.5 text-xs font-medium shadow-xs\"\n            disabled={isOptimizing}\n            onClick={handleAutoOptimize}\n          >\n            <Navigation className={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      {notificationBanner && (\n        <div\n          className={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          <div className=\"flex items-start gap-2.5\">\n            {notificationBanner.type === 'success' ? (\n              <CheckCircle2 className=\"text-success mt-0.5 h-4 w-4 shrink-0\" />\n            ) : (\n              <PackageCheck className=\"text-primary mt-0.5 h-4 w-4 shrink-0\" />\n            )}\n            <div>\n              <span className=\"font-semibold\">{notificationBanner.title}:</span>\n              <span className=\"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            className=\"text-muted-foreground hover:text-foreground transition-colors\"\n            onClick={() => setNotificationBanner(null)}\n          >\n            <X className=\"h-4 w-4\" />\n          </button>\n        </div>\n      )}\n\n      {/* Dispatch Overview KPI Cards (4 Cards) */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* KPI 1: Active Routes */}\n        <Card className=\"border-border shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Total Routes Active</CardTitle>\n            <div className=\"bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-md\">\n              <Truck className=\"h-4 w-4\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-1.5\">\n            <div className=\"flex items-baseline gap-2\">\n              <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">8</span>\n              <span className=\"text-muted-foreground text-xs font-medium\">routes dispatched</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n              <Badge\n                variant=\"outline\"\n                className=\"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 className=\"border-border shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Total Stops Remaining</CardTitle>\n            <div className=\"bg-info/10 text-info flex h-8 w-8 items-center justify-center rounded-md\">\n              <PackageCheck className=\"h-4 w-4\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">142</span>\n                <span className=\"text-muted-foreground font-mono text-xs tabular-nums\">/ 180 stops</span>\n              </div>\n              <span className=\"text-info text-info font-mono text-xs font-semibold tabular-nums\">78.8%</span>\n            </div>\n            <Progress value={78.8} className=\"h-1.5\" />\n            <p className=\"text-muted-foreground text-xs\">\n              <span className=\"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 className=\"border-border shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">On-Time Delivery Rate</CardTitle>\n            <div className=\"bg-success/10 text-success flex h-8 w-8 items-center justify-center rounded-md\">\n              <ShieldCheck className=\"h-4 w-4\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-1.5\">\n            <div className=\"flex items-baseline gap-2\">\n              <span className=\"text-success text-success font-mono text-2xl font-bold tracking-tight tabular-nums\">\n                97.4%\n              </span>\n              <Badge\n                variant=\"outline\"\n                className=\"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 className=\"text-muted-foreground text-xs\">\n              Target: <span className=\"text-foreground font-mono font-medium tabular-nums\">≥95.0%</span> · 0 SLA\n              breaches\n            </p>\n          </CardContent>\n        </Card>\n\n        {/* KPI 4: Cargo Weight Dispatched */}\n        <Card className=\"border-border shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-medium\">Total Cargo Weight Dispatched</CardTitle>\n            <div className=\"bg-warning/10 text-warning flex h-8 w-8 items-center justify-center rounded-md\">\n              <Gauge className=\"h-4 w-4\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">14,280</span>\n                <span className=\"text-muted-foreground text-xs\">lbs</span>\n              </div>\n              <Badge\n                variant=\"outline\"\n                className=\"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 className=\"bg-muted relative h-1.5 w-full overflow-hidden rounded-full\">\n              <div\n                className=\"bg-warning h-full rounded-full transition-[width] duration-500\"\n                style={{ width: '82%' }}\n              />\n            </div>\n            <p className=\"text-muted-foreground text-xs\">\n              Payload limit: <span className=\"text-foreground font-mono font-medium tabular-nums\">17,400 lbs</span> ·\n              Well balanced\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Filter & Search Controls Bar */}\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          <Button\n            size=\"sm\"\n            variant={filterType === 'all' ? 'default' : 'outline'}\n            className=\"h-8 text-xs font-medium\"\n            onClick={() => setFilterType('all')}\n          >\n            All Routes ({DRIVER_ROUTES_DATA.length})\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={filterType === 'in_transit' ? 'default' : 'outline'}\n            className=\"h-8 text-xs font-medium\"\n            onClick={() => setFilterType('in_transit')}\n          >\n            In Transit (4)\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={filterType === 'high_load' ? 'default' : 'outline'}\n            className=\"h-8 text-xs font-medium\"\n            onClick={() => setFilterType('high_load')}\n          >\n            High Load (&gt;80%)\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={filterType === 'near_complete' ? 'default' : 'outline'}\n            className=\"h-8 text-xs font-medium\"\n            onClick={() => setFilterType('near_complete')}\n          >\n            Near Completion (&gt;70%)\n          </Button>\n        </div>\n\n        <div className=\"relative w-full sm:w-72\">\n          <Search className=\"text-muted-foreground absolute top-2.5 left-2.5 h-3.5 w-3.5\" />\n          <input\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            type=\"text\"\n            placeholder=\"Filter driver, route, or stop...\"\n            className=\"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          {searchQuery && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground absolute top-2 right-2\"\n              aria-label=\"Clear search\"\n              onClick={() => setSearchQuery('')}\n            >\n              <X className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Empty State when filtered out */}\n      {filteredRoutes.length === 0 ? (\n        <div className=\"border-border flex flex-col items-center justify-center rounded-xl border border-dashed py-12 text-center\">\n          <Truck className=\"text-muted-foreground/50 mb-3 h-10 w-10\" />\n          <h3 className=\"text-foreground text-sm font-semibold\">No matching dispatch routes found</h3>\n          <p className=\"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\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"mt-4 h-8 text-xs\"\n            onClick={() => {\n              setSelectedZone('all')\n              setSearchQuery('')\n              setFilterType('all')\n            }}\n          >\n            Reset Filters\n          </Button>\n        </div>\n      ) : (\n        /* Driver Routes Grid / Multi-Card Board (4 Driver Route Cards) */\n        <div className=\"grid grid-cols-1 gap-6 xl:grid-cols-2\">\n          {filteredRoutes.map((route) => (\n            <Card\n              key={route.id}\n              className=\"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 className=\"space-y-3 pb-3\">\n                <div className=\"flex flex-wrap items-start justify-between gap-2\">\n                  <div className=\"space-y-0.5\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-primary font-mono text-xs font-semibold\">{route.routeCode}</span>\n                      <CardTitle className=\"text-foreground text-sm font-bold sm:text-base\">\n                        {route.routeName}\n                      </CardTitle>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">{route.zone}</p>\n                  </div>\n\n                  <div className=\"flex items-center gap-1.5\">\n                    <Badge\n                      variant=\"outline\"\n                      className=\"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 className=\"bg-muted/40 flex flex-col gap-3 rounded-lg p-3 sm:flex-row sm:items-center sm:justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <Avatar className=\"border-border h-9 w-9 border\">\n                      <AvatarFallback className=\"bg-primary/10 text-primary text-xs font-bold\">\n                        {route.driver.initials}\n                      </AvatarFallback>\n                    </Avatar>\n                    <div className=\"space-y-0.5\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <span className=\"text-foreground text-xs font-semibold\">{route.driver.name}</span>\n                        <span className=\"bg-success inline-flex h-1.5 w-1.5 rounded-full\" title=\"Active\" />\n                      </div>\n                      <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                        <span className=\"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 className=\"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                    <div className=\"space-y-0.5\">\n                      <div className=\"flex items-center gap-1.5 sm:justify-end\">\n                        <Truck className=\"text-muted-foreground h-3.5 w-3.5\" />\n                        <span className=\"text-foreground text-xs font-medium\">{route.vehicle.name}</span>\n                      </div>\n                      <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs sm:justify-end\">\n                        <span className=\"font-mono text-xs\">{route.vehicle.plateNumber}</span>\n                        <span>·</span>\n                        <span className=\"flex items-center gap-1 font-mono text-xs tabular-nums\">\n                          {route.vehicle.powerType === 'electric' ? (\n                            <BatteryCharging className=\"text-success h-3 w-3\" />\n                          ) : (\n                            <Fuel className=\"text-info h-3 w-3\" />\n                          )}\n                          {route.vehicle.powerLevel}\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </CardHeader>\n\n              <CardContent className=\"flex-1 space-y-4\">\n                {/* Route Progress & Payload Load Balance Overview */}\n                <div className=\"border-border bg-card grid grid-cols-1 gap-3 rounded-lg border p-3 sm:grid-cols-2\">\n                  {/* Stops Progress */}\n                  <div className=\"space-y-1.5\">\n                    <div className=\"flex items-center justify-between gap-x-2 text-xs\">\n                      <span className=\"text-muted-foreground\">Stops Completion</span>\n                      <span className=\"text-foreground font-mono font-semibold tabular-nums\">\n                        {route.completedStops} / {route.totalStops}{' '}\n                        <span className=\"text-muted-foreground font-normal\">\n                          ({Math.round((route.completedStops / route.totalStops) * 100)}%)\n                        </span>\n                      </span>\n                    </div>\n                    <Progress value={(route.completedStops / route.totalStops) * 100} className=\"h-1.5\" />\n                    <div className=\"text-muted-foreground flex items-center justify-between gap-x-2 font-mono text-xs tabular-nums\">\n                      <span>Shift: {route.shiftWindow}</span>\n                      <span>ETA: {route.estimatedCompletion}</span>\n                    </div>\n                  </div>\n\n                  {/* Payload Weight Utilization */}\n                  <div className=\"space-y-1.5\">\n                    <div className=\"flex items-center justify-between gap-x-2 text-xs\">\n                      <span className=\"text-muted-foreground\">Payload Load Balance</span>\n                      <span className=\"text-foreground font-mono font-semibold tabular-nums\">\n                        {route.currentPayloadLbs.toLocaleString()} / {route.maxPayloadLbs.toLocaleString()} lbs\n                      </span>\n                    </div>\n                    <div className=\"bg-muted relative h-1.5 w-full overflow-hidden rounded-full\">\n                      <div\n                        className={cn(\n                          'h-full rounded-full transition-[width,background-color] duration-500',\n                          route.currentPayloadLbs / route.maxPayloadLbs > 0.85 ? 'bg-warning' : 'bg-primary',\n                        )}\n                        style={{\n                          width: `${(route.currentPayloadLbs / route.maxPayloadLbs) * 100}%`,\n                        }}\n                      />\n                    </div>\n                    <div className=\"text-muted-foreground flex items-center justify-between gap-x-2 font-mono text-xs tabular-nums\">\n                      <span>{Math.round((route.currentPayloadLbs / route.maxPayloadLbs) * 100)}% capacity</span>\n                      <span\n                        className={\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 className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between gap-x-2\">\n                    <h4 className=\"text-muted-foreground text-xs font-semibold tracking-wide uppercase\">\n                      Stop Sequence & Delivery Execution\n                    </h4>\n                    <span className=\"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 className=\"before:bg-border relative space-y-3 pl-2 before:absolute before:top-3 before:bottom-3 before:left-5 before:w-px\">\n                    {route.stops.map((stop) => (\n                      <div\n                        key={stop.id}\n                        className={cn(\n                          'hover:border-border hover:bg-muted/30 relative flex items-start gap-3 rounded-lg border border-transparent p-2 transition-colors',\n                          stop.status === 'in_progress' && 'border-primary/30 bg-primary/5 dark:bg-primary/10',\n                        )}\n                      >\n                        {/* Status Icon Node */}\n                        <div className=\"relative z-10 flex shrink-0 items-center justify-center\">\n                          {/* Delivered Check Icon */}\n                          {stop.status === 'delivered' && (\n                            <div className=\"ring-background bg-success/15 text-success text-success flex h-6 w-6 items-center justify-center rounded-full ring-2\">\n                              <Check className=\"h-3.5 w-3.5 stroke-[3]\" />\n                            </div>\n                          )}\n\n                          {/* In Progress Pulsing Map Pin */}\n                          {stop.status === 'in_progress' && (\n                            <div className=\"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                              <MapPin className=\"h-3.5 w-3.5 animate-bounce\" />\n                            </div>\n                          )}\n\n                          {/* Pending Clock / Circle Node */}\n                          {stop.status === 'pending' && (\n                            <div className=\"border-border bg-muted text-muted-foreground ring-background flex h-6 w-6 items-center justify-center rounded-full border ring-2\">\n                              <Clock className=\"h-3 w-3\" />\n                            </div>\n                          )}\n                        </div>\n\n                        {/* Stop Details */}\n                        <div className=\"min-w-0 flex-1 space-y-0.5\">\n                          <div className=\"flex flex-wrap items-center justify-between gap-1\">\n                            <div className=\"flex items-center gap-1.5 truncate\">\n                              <span className=\"text-muted-foreground font-mono text-xs font-semibold\">\n                                #{stop.sequence}\n                              </span>\n                              <span className=\"text-foreground truncate text-xs font-semibold\">\n                                {stop.locationName}\n                              </span>\n                            </div>\n\n                            {/* Stop Status Timestamp / ETA */}\n                            <div className=\"flex items-center gap-1\">\n                              {stop.status === 'delivered' && (\n                                <Badge\n                                  variant=\"outline\"\n                                  className=\"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                              )}\n                              {stop.status === 'in_progress' && (\n                                <Badge className=\"bg-primary text-primary-foreground h-4.5 px-1.5 font-mono text-xs font-medium tabular-nums\">\n                                  In Progress · ETA {stop.estimatedTime}\n                                </Badge>\n                              )}\n                              {stop.status === 'pending' && (\n                                <Badge\n                                  variant=\"secondary\"\n                                  className=\"text-muted-foreground h-4.5 px-1.5 font-mono text-xs font-medium tabular-nums\"\n                                >\n                                  Pending\n                                </Badge>\n                              )}\n                            </div>\n                          </div>\n\n                          <p className=\"text-muted-foreground truncate text-xs\">{stop.address}</p>\n\n                          <div className=\"text-muted-foreground flex flex-wrap items-center gap-2 pt-0.5 text-xs\">\n                            <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                              {stop.packagesCount} {stop.packageType}\n                            </span>\n                            {stop.recipient && <span className=\"text-muted-foreground\">· {stop.recipient}</span>}\n                            {stop.notes && <span className=\"text-warning font-medium\">· {stop.notes}</span>}\n                          </div>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </CardContent>\n\n              {/* Card Footer: Quick Action Buttons */}\n              <CardFooter className=\"border-border border-t pt-3\">\n                <div className=\"flex w-full flex-wrap items-center justify-between gap-2\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"h-8 gap-1.5 text-xs font-medium\"\n                      onClick={() => openModal('reassign', route)}\n                    >\n                      <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n                      <span>Reassign Stops</span>\n                    </Button>\n\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"h-8 gap-1.5 text-xs font-medium\"\n                      onClick={() => openModal('call', route)}\n                    >\n                      <Phone className=\"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                    className=\"h-8 gap-1.5 text-xs font-medium shadow-xs\"\n                    onClick={() => openModal('gps', route)}\n                  >\n                    <Navigation className=\"h-3.5 w-3.5\" />\n                    <span>View Live GPS</span>\n                  </Button>\n                </div>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n      )}\n\n      {/* Action Modals (GPS telemetry, direct call, reassign stops) */}\n      <DispatchActionModal\n        activeModal={activeModal}\n        allRoutes={DRIVER_ROUTES_DATA}\n        onClose={closeModal}\n        onConfirmReassign={handleConfirmReassign}\n        onSelectTargetRoute={(targetId) => {\n          if (activeModal) {\n            setActiveModal({ ...activeModal, targetRouteId: targetId })\n          }\n        }}\n        onOpenModal={openModal}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DispatchAssignmentBoard.tsx"
    },
    {
      "path": "packages/registry-react/blocks/dispatch-assignment-board/DispatchActionModal.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRightLeft, Check, MapPin, Navigation, Phone, PhoneCall, X } from 'lucide-react'\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 { Separator } from '@/components/ui/separator'\nimport type { ActiveModalState, DriverRoute } from './dispatch-assignment-board-types'\n\ninterface DispatchActionModalProps {\n  activeModal: ActiveModalState | null\n  allRoutes: DriverRoute[]\n  onClose: () => void\n  onConfirmReassign: () => void\n  onSelectTargetRoute: (targetId: string) => void\n  onOpenModal: (type: 'gps' | 'call' | 'reassign', route: DriverRoute) => void\n}\n\nexport function DispatchActionModal({\n  activeModal,\n  allRoutes,\n  onClose,\n  onConfirmReassign,\n  onSelectTargetRoute,\n  onOpenModal,\n}: DispatchActionModalProps) {\n  if (!activeModal) return null\n\n  return (\n    <div\n      className=\"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      onClick={(e) => {\n        if (e.target === e.currentTarget) onClose()\n      }}\n    >\n      {/* GPS Telemetry Modal */}\n      {activeModal.type === 'gps' && (\n        <div className=\"border-border bg-card w-full max-w-lg space-y-4 rounded-xl border p-6 shadow-xl\">\n          <div className=\"flex items-center justify-between gap-x-2\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-md\">\n                <Navigation className=\"h-4 w-4\" />\n              </div>\n              <div>\n                <h3 className=\"text-foreground text-sm font-bold\">Live Telemetry & GPS Tracking</h3>\n                <p className=\"text-muted-foreground text-xs\">\n                  {activeModal.route.routeCode} · {activeModal.route.driver.name}\n                </p>\n              </div>\n            </div>\n            <button\n              aria-label=\"Close modal\"\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n              onClick={onClose}\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n\n          <Separator />\n\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n            <div className=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span className=\"text-muted-foreground text-xs\">Current Speed</span>\n              <p className=\"text-foreground font-mono text-sm font-bold\">{activeModal.route.telemetry.speed}</p>\n            </div>\n            <div className=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span className=\"text-muted-foreground text-xs\">Heading</span>\n              <p className=\"text-foreground font-mono text-sm font-bold\">{activeModal.route.telemetry.heading}</p>\n            </div>\n            <div className=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span className=\"text-muted-foreground text-xs\">Power / Fuel</span>\n              <p className=\"text-success font-mono text-sm font-bold\">{activeModal.route.vehicle.powerLevel}</p>\n            </div>\n            <div className=\"border-border bg-muted/30 rounded-lg border p-2.5 text-center\">\n              <span className=\"text-muted-foreground text-xs\">GPS Ping</span>\n              <p className=\"text-foreground font-mono text-sm font-bold\">{activeModal.route.telemetry.lastPing}</p>\n            </div>\n          </div>\n\n          <div className=\"border-border bg-muted/20 space-y-1.5 rounded-lg border p-3\">\n            <div className=\"flex items-center justify-between gap-x-2 text-xs\">\n              <span className=\"text-muted-foreground\">Current Coordinates & Street</span>\n              <span className=\"text-success font-mono font-medium\">Signal: {activeModal.route.telemetry.signal}</span>\n            </div>\n            <div className=\"flex items-start gap-2\">\n              <MapPin className=\"text-primary mt-0.5 h-4 w-4 shrink-0\" />\n              <p className=\"text-foreground text-xs font-semibold\">{activeModal.route.telemetry.currentLocation}</p>\n            </div>\n          </div>\n\n          {/* Next Stop Snapshot */}\n          <div className=\"border-primary/20 bg-primary/5 space-y-1 rounded-lg border p-3\">\n            <span className=\"text-primary text-xs font-semibold tracking-wide uppercase\">Next Stop In Sequence</span>\n            <p className=\"text-foreground text-xs font-bold\">\n              {activeModal.route.stops.find((s) => s.status === 'in_progress')?.locationName || 'Hub Return'}\n            </p>\n            <p className=\"text-muted-foreground text-xs\">\n              {activeModal.route.stops.find((s) => s.status === 'in_progress')?.address}\n            </p>\n          </div>\n\n          <div className=\"flex justify-end gap-2 pt-2\">\n            <Button aria-label=\"Close modal\" variant=\"outline\" size=\"sm\" className=\"h-8 text-xs\" onClick={onClose}>\n              Close\n            </Button>\n            <Button\n              size=\"sm\"\n              className=\"h-8 text-xs font-medium\"\n              onClick={() => onOpenModal('call', activeModal.route)}\n            >\n              <Phone className=\"mr-1.5 h-3.5 w-3.5\" /> Call Driver\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {/* Call Driver Modal */}\n      {activeModal.type === 'call' && (\n        <div className=\"border-border bg-card w-full max-w-md space-y-4 rounded-xl border p-6 shadow-xl\">\n          <div className=\"flex items-center justify-between gap-x-2\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"bg-success/10 text-success flex h-8 w-8 items-center justify-center rounded-md\">\n                <PhoneCall className=\"h-4 w-4\" />\n              </div>\n              <div>\n                <h3 className=\"text-foreground text-sm font-bold\">Dispatch Driver Communications</h3>\n                <p className=\"text-muted-foreground text-xs\">{activeModal.route.routeCode} Direct Link</p>\n              </div>\n            </div>\n            <button\n              aria-label=\"Close modal\"\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n              onClick={onClose}\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n\n          <Separator />\n\n          <div className=\"border-border bg-muted/40 flex items-center gap-3 rounded-lg border p-3\">\n            <Avatar className=\"border-border h-11 w-11 border\">\n              <AvatarFallback className=\"bg-primary/10 text-primary text-sm font-bold\">\n                {activeModal.route.driver.initials}\n              </AvatarFallback>\n            </Avatar>\n            <div className=\"space-y-0.5\">\n              <h4 className=\"text-foreground text-sm font-semibold\">{activeModal.route.driver.name}</h4>\n              <p className=\"text-muted-foreground font-mono text-xs tabular-nums\">{activeModal.route.driver.phone}</p>\n              <p className=\"text-muted-foreground text-xs\">\n                {activeModal.route.driver.radioChannel} · Hands-Free Active\n              </p>\n            </div>\n          </div>\n\n          <div className=\"space-y-2 text-xs\">\n            <span className=\"text-muted-foreground font-medium\">Quick Broadcast Dispatch Presets:</span>\n            <div className=\"grid grid-cols-2 gap-2\">\n              <button\n                type=\"button\"\n                className=\"border-border bg-background hover:border-primary/40 hover:bg-accent rounded-md border p-2 text-left transition-colors\"\n                onClick={onConfirmReassign}\n              >\n                <span className=\"text-foreground block font-semibold\">Traffic Alert</span>\n                <span className=\"text-muted-foreground text-xs\">Reroute around I-10 slowdown</span>\n              </button>\n              <button\n                type=\"button\"\n                className=\"border-border bg-background hover:border-primary/40 hover:bg-accent rounded-md border p-2 text-left transition-colors\"\n                onClick={onConfirmReassign}\n              >\n                <span className=\"text-foreground block font-semibold\">Priority Stop</span>\n                <span className=\"text-muted-foreground text-xs\">Bump hospital drop to next</span>\n              </button>\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 pt-2\">\n            <Button aria-label=\"Close modal\" variant=\"outline\" size=\"sm\" className=\"h-8 text-xs\" onClick={onClose}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              className=\"bg-success hover:bg-success/90 h-8 text-xs font-medium text-white\"\n              onClick={onConfirmReassign}\n            >\n              <Phone className=\"mr-1.5 h-3.5 w-3.5\" /> Start Direct Call\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {/* Reassign Stops Modal */}\n      {activeModal.type === 'reassign' && (\n        <div className=\"border-border bg-card w-full max-w-lg space-y-4 rounded-xl border p-6 shadow-xl\">\n          <div className=\"flex items-center justify-between gap-x-2\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"bg-warning/10 text-warning flex h-8 w-8 items-center justify-center rounded-md\">\n                <ArrowRightLeft className=\"h-4 w-4\" />\n              </div>\n              <div>\n                <h3 className=\"text-foreground text-sm font-bold\">Reassign Pending Stops</h3>\n                <p className=\"text-muted-foreground text-xs\">\n                  Transfer workload from {activeModal.route.routeCode} ({activeModal.route.driver.name})\n                </p>\n              </div>\n            </div>\n            <button\n              aria-label=\"Close modal\"\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n              onClick={onClose}\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n\n          <Separator />\n\n          <div className=\"space-y-3 text-xs\">\n            <div>\n              <label className=\"text-foreground mb-1 block font-semibold\">Pending Stop to Transfer:</label>\n              <div className=\"border-border bg-muted/40 rounded-lg border p-3\">\n                <div className=\"flex items-center justify-between gap-x-2\">\n                  <span className=\"text-foreground font-semibold\">\n                    {activeModal.route.stops.find((s) => s.status === 'pending')?.locationName ||\n                      'Stop #4 - Delivery Destination'}\n                  </span>\n                  <Badge variant=\"outline\" className=\"text-xs\">\n                    {activeModal.route.stops.find((s) => s.status === 'pending')?.packagesCount || 2} packages\n                  </Badge>\n                </div>\n                <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                  {activeModal.route.stops.find((s) => s.status === 'pending')?.address}\n                </p>\n              </div>\n            </div>\n\n            <div>\n              <label className=\"text-foreground mb-1 block font-semibold\">Target Available Route / Driver:</label>\n              <div className=\"space-y-2\">\n                {allRoutes\n                  .filter((r) => r.id !== activeModal?.route.id)\n                  .map((target) => (\n                    <div\n                      key={target.id}\n                      className={cn(\n                        'flex cursor-pointer items-center justify-between rounded-lg border p-2.5 transition-colors',\n                        activeModal.targetRouteId === target.id\n                          ? 'border-primary bg-primary/5'\n                          : 'border-border hover:bg-muted/30',\n                      )}\n                      onClick={() => onSelectTargetRoute(target.id)}\n                    >\n                      <div className=\"space-y-0.5\">\n                        <div className=\"flex items-center gap-1.5\">\n                          <span className=\"text-foreground font-semibold\">\n                            {target.routeCode} · {target.routeName}\n                          </span>\n                          <span className=\"text-muted-foreground text-xs\">({target.driver.name})</span>\n                        </div>\n                        <p className=\"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                        className={cn(\n                          'border-border flex h-5 w-5 items-center justify-center rounded-full border',\n                          activeModal.targetRouteId === target.id &&\n                            'border-primary bg-primary text-primary-foreground',\n                        )}\n                      >\n                        {activeModal.targetRouteId === target.id && <Check className=\"h-3 w-3 stroke-3\" />}\n                      </div>\n                    </div>\n                  ))}\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 pt-2\">\n            <Button aria-label=\"Close modal\" variant=\"outline\" size=\"sm\" className=\"h-8 text-xs\" onClick={onClose}>\n              Cancel\n            </Button>\n            <Button size=\"sm\" className=\"h-8 text-xs font-medium\" onClick={onConfirmReassign}>\n              <Check className=\"mr-1.5 h-3.5 w-3.5\" /> Confirm Stop Reassignment\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DispatchActionModal.tsx"
    },
    {
      "path": "packages/registry-react/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": "~/components/blocks/dispatch-assignment-board-types.ts"
    },
    {
      "path": "packages/registry-react/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": "~/components/blocks/dispatch-data.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/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"
  ]
}