{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "dispatch-assignment-board", "title": "Dispatch Assignment Board", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/dispatch-assignment-board/dispatch-assignment-board.component.ts", "content": "// Last-mile route dispatching, delivery driver stop sequencing, and vehicle payload load\n// balancing: live dispatch overview KPIs, zone filtering, AI route auto-sequencing, and driver\n// route cards with vehicle payload load balancing, live progress tracking, interactive stops\n// timeline, driver communications, and telemetry actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n ArrowRightLeft,\n BatteryCharging,\n Check,\n CheckCircle2,\n Clock,\n Download,\n Fuel,\n Gauge,\n LucideAngularModule,\n MapPin,\n Navigation,\n PackageCheck,\n Phone,\n PhoneCall,\n Search,\n ShieldCheck,\n Truck,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectGroupComponent,\n UiSelectItemComponent,\n UiSelectLabelComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport 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\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\nconst ZONE_OPTIONS = [\n 'Metro Los Angeles - North Zone',\n 'Metro Los Angeles - South Zone',\n 'San Fernando Valley Hub',\n 'Orange County Central',\n]\n\nexport type DispatchFilter = 'all' | 'in_transit' | 'high_load' | 'near_complete'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-dispatch-assignment-board, [ui-dispatch-assignment-board]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectGroupComponent,\n UiSelectItemComponent,\n UiSelectLabelComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n \n \n \n \n Live Dispatch Operations\n
\n
\n \n Today · Aug 21, 2026\n
\n
\n

\n Delivery Dispatch & Route Optimization\n

\n

\n Last-mile route sequencing, real-time stop execution, and vehicle payload load balancing.\n

\n
\n\n
\n
\n \n \n \n \n Dispatch Zones\n All Dispatch Zones\n @for (zone of zoneOptions; track zone) {\n {{ zone }}\n }\n \n \n \n
\n\n \n \n Export Manifests\n \n\n \n \n {{ isOptimizing() ? 'Optimizing Routes...' : 'Auto-Optimize Routes' }}\n \n
\n
\n\n \n @if (notificationBanner(); as banner) {\n
\n
\n @if (banner.type === 'success') {\n \n } @else {\n \n }\n
\n {{ banner.title }}:\n {{ banner.message }}\n
\n
\n \n \n \n
\n }\n\n \n
\n
\n
\n

Total Routes Active

\n
\n \n
\n
\n
\n
\n 8\n routes dispatched\n
\n
\n \n 6 In Transit\n \n 2 loading at hub\n
\n
\n
\n\n
\n
\n

Total Stops Remaining

\n
\n \n
\n
\n
\n
\n
\n 142\n / 180 stops\n
\n 78.8%\n
\n
\n

\n 38 stops pending completion\n

\n
\n
\n\n
\n
\n

On-Time Delivery Rate

\n
\n \n
\n
\n
\n
\n 97.4%\n \n +1.8% vs SLA\n \n
\n

\n Target: ≥95.0% · 0 SLA breaches\n

\n
\n
\n\n
\n
\n

Total Cargo Weight Dispatched

\n
\n \n
\n
\n
\n
\n
\n 14,280\n lbs\n
\n \n 82% capacity\n \n
\n
\n
\n
\n

\n Payload limit: 17,400 lbs · Well\n balanced\n

\n
\n
\n
\n\n \n
\n
\n \n All Routes ({{ routes().length }})\n \n \n In Transit (4)\n \n \n High Load (>80%)\n \n \n Near Completion (>70%)\n \n
\n\n
\n \n \n @if (searchQuery()) {\n \n \n \n }\n
\n
\n\n \n @if (filteredRoutes().length === 0) {\n \n \n

No matching dispatch routes found

\n

\n Try resetting your zone selector or search query to see active drivers and vehicle assignments.\n

\n \n
\n } @else {\n
\n @for (route of filteredRoutes(); track route.id) {\n \n
\n
\n
\n
\n {{ route.routeCode }}\n

\n {{ route.routeName }}\n

\n
\n

{{ route.zone }}

\n
\n
\n \n In Transit · On Schedule\n \n
\n
\n\n
\n\n \n
\n \n \n {{ route.driver.initials }}\n \n \n
\n
\n {{ route.driver.name }}\n \n
\n
\n {{ route.driver.phone }}\n ·\n {{ route.driver.radioChannel }}\n
\n
\n
\n\n \n
\n
\n \n {{ route.vehicle.name }}\n
\n
\n {{ route.vehicle.plateNumber }}\n ·\n \n @if (route.vehicle.powerType === 'electric') {\n \n } @else {\n \n }\n {{ route.vehicle.powerLevel }}\n \n
\n
\n
\n
\n \n\n
\n
\n
\n
\n Stops Completion\n \n {{ route.completedStops }} / {{ route.totalStops }}\n ({{ stopPct(route) }}%) \n \n
\n
\n \n Shift: {{ route.shiftWindow }}\n ETA: {{ route.estimatedCompletion }}\n
\n
\n\n
\n
\n Payload Load Balance\n \n {{ route.currentPayloadLbs.toLocaleString() }} / {{ route.maxPayloadLbs.toLocaleString() }} lbs\n \n
\n
\n
\n
\n \n {{ payloadPct(route) }}% capacity\n \n {{ route.maxPayloadLbs - route.currentPayloadLbs }} lbs available\n \n
\n
\n \n\n
\n
\n

\n Stop Sequence & Delivery Execution\n

\n \n {{ countBy(route, 'delivered') }} done · {{ countBy(route, 'in_progress') }} active ·\n {{ countBy(route, 'pending') }} pending\n \n
\n\n \n @for (stop of route.stops; track stop.id) {\n
\n
\n @if (stop.status === 'delivered') {\n \n \n
\n } @else if (stop.status === 'in_progress') {\n \n \n
\n } @else {\n \n \n
\n }\n \n\n
\n
\n
\n \n #{{ stop.sequence }}\n \n \n {{ stop.locationName }}\n \n
\n
\n @if (stop.status === 'delivered') {\n \n Delivered {{ stop.deliveredTime }}\n \n } @else if (stop.status === 'in_progress') {\n \n In Progress · ETA {{ stop.estimatedTime }}\n \n } @else {\n \n Pending\n \n }\n
\n
\n\n

{{ stop.address }}

\n\n
\n \n {{ stop.packagesCount }} {{ stop.packageType }}\n \n @if (stop.recipient) {\n · {{ stop.recipient }}\n }\n @if (stop.notes) {\n · {{ stop.notes }}\n }\n
\n
\n \n }\n \n \n \n\n
\n
\n
\n \n \n Reassign Stops\n \n \n \n Call Driver\n \n
\n \n \n View Live GPS\n \n
\n
\n \n }\n \n }\n\n \n @if (activeModal(); as modal) {\n \n @if (modal.type === 'gps') {\n
\n
\n
\n
\n \n
\n
\n

Live Telemetry & GPS Tracking

\n

\n {{ modal.route.routeCode }} · {{ modal.route.driver.name }}\n

\n
\n
\n \n \n \n
\n\n
\n\n
\n
\n Current Speed\n

{{ modal.route.telemetry.speed }}

\n
\n
\n Heading\n

{{ modal.route.telemetry.heading }}

\n
\n
\n Power / Fuel\n

{{ modal.route.vehicle.powerLevel }}

\n
\n
\n GPS Ping\n

{{ modal.route.telemetry.lastPing }}

\n
\n
\n\n
\n
\n Current Coordinates & Street\n Signal: {{ modal.route.telemetry.signal }}\n
\n
\n \n

{{ modal.route.telemetry.currentLocation }}

\n
\n
\n\n
\n Next Stop In Sequence\n

{{ nextStopName(modal.route) }}

\n

{{ nextStopAddress(modal.route) }}

\n
\n\n
\n \n Close\n \n \n
\n
\n }\n\n @if (modal.type === 'call') {\n
\n
\n
\n
\n \n
\n
\n

Dispatch Driver Communications

\n

{{ modal.route.routeCode }} Direct Link

\n
\n
\n \n \n \n
\n\n
\n\n
\n \n \n {{ modal.route.driver.initials }}\n \n \n
\n

{{ modal.route.driver.name }}

\n

{{ modal.route.driver.phone }}

\n

{{ modal.route.driver.radioChannel }} · Hands-Free Active

\n
\n
\n\n
\n Quick Broadcast Dispatch Presets:\n
\n \n Traffic Alert\n Reroute around I-10 slowdown\n \n \n Priority Stop\n Bump hospital drop to next\n \n
\n
\n\n
\n \n Cancel\n \n \n Start Direct Call\n \n
\n
\n }\n\n @if (modal.type === 'reassign') {\n
\n
\n
\n
\n \n
\n
\n

Reassign Pending Stops

\n

\n Transfer workload from {{ modal.route.routeCode }} ({{ modal.route.driver.name }})\n

\n
\n
\n \n \n \n
\n\n
\n\n
\n
\n \n
\n
\n {{ pendingStopName(modal.route) }}\n {{ pendingStopPackages(modal.route) }} packages\n
\n

{{ pendingStopAddress(modal.route) }}

\n
\n
\n\n
\n \n
\n @for (target of reassignTargets(modal.route.id); track target.id) {\n \n
\n
\n {{ target.routeCode }} · {{ target.routeName }}\n ({{ target.driver.name }})\n
\n

\n Current Load: {{ target.currentPayloadLbs }} lbs ({{ payloadPct(target) }}%) ·\n {{ target.totalStops - target.completedStops }} stops left\n

\n
\n
\n @if (modal.targetRouteId === target.id) {\n \n }\n
\n
\n }\n
\n
\n
\n\n
\n \n Cancel\n \n \n
\n \n }\n \n }\n \n `,\n})\nexport class UiDispatchAssignmentBoardComponent {\n protected readonly ArrowRightLeft = ArrowRightLeft\n protected readonly BatteryCharging = BatteryCharging\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly Fuel = Fuel\n protected readonly Gauge = Gauge\n protected readonly MapPin = MapPin\n protected readonly Navigation = Navigation\n protected readonly PackageCheck = PackageCheck\n protected readonly Phone = Phone\n protected readonly PhoneCall = PhoneCall\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Truck = Truck\n protected readonly X = X\n\n protected readonly zoneOptions = ZONE_OPTIONS\n\n @Input() set initialZone(v: string | undefined) {\n if (v !== undefined) this.selectedZone.set(v)\n }\n @Input() set initialFilter(v: DispatchFilter | undefined) {\n if (v !== undefined) this.filterType.set(v)\n }\n @Input('class') className?: string\n\n readonly routes = signal(DRIVER_ROUTES_DATA)\n readonly selectedZone = signal('Metro Los Angeles - North Zone')\n readonly filterType = signal('all')\n readonly searchQuery = signal('')\n readonly isOptimizing = signal(false)\n readonly notificationBanner = signal<{ title: string; message: string; type: 'success' | 'info' } | null>(null)\n readonly activeModal = signal(null)\n\n private optimizeTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.optimizeTimer))\n }\n\n readonly filteredRoutes = computed(() => {\n const zone = this.selectedZone()\n const filter = this.filterType()\n const q = this.searchQuery().trim().toLowerCase()\n return this.routes().filter((route) => {\n if (zone !== 'all' && route.zone !== zone) return false\n if (filter === 'in_transit' && route.driver.status !== 'on_route') return false\n if (filter === 'high_load' && route.currentPayloadLbs / route.maxPayloadLbs < 0.8) return false\n if (filter === 'near_complete' && route.completedStops / route.totalStops < 0.75) return false\n if (q) {\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) return false\n }\n return true\n })\n })\n\n get rootClass(): string {\n return cn('text-foreground w-full space-y-6', this.className)\n }\n\n get optimizeIconClass(): string {\n return cn('size-3.5', this.isOptimizing() && 'text-primary-foreground animate-spin')\n }\n\n bannerClass(type: 'success' | 'info'): string {\n return 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 type === 'success'\n ? 'border-success/30 bg-success/10 text-success'\n : 'border-primary/30 bg-primary/10 text-foreground',\n )\n }\n\n stopPct(route: DriverRoute): number {\n return Math.round((route.completedStops / route.totalStops) * 100)\n }\n\n payloadPct(route: DriverRoute): number {\n return Math.round((route.currentPayloadLbs / route.maxPayloadLbs) * 100)\n }\n\n payloadBarClass(route: DriverRoute): string {\n return 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 }\n\n payloadAvailClass(route: DriverRoute): string {\n return route.currentPayloadLbs / route.maxPayloadLbs > 0.85 ? 'text-warning font-medium' : 'text-muted-foreground'\n }\n\n countBy(route: DriverRoute, status: StopStatus): number {\n return route.stops.filter((s) => s.status === status).length\n }\n\n stopRowClass(status: StopStatus): string {\n return 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 status === 'in_progress' && 'border-primary/30 bg-primary/5 dark:bg-primary/10',\n )\n }\n\n nextStopName(route: DriverRoute): string {\n return route.stops.find((s) => s.status === 'in_progress')?.locationName || 'Hub Return'\n }\n\n nextStopAddress(route: DriverRoute): string {\n return route.stops.find((s) => s.status === 'in_progress')?.address || ''\n }\n\n pendingStopName(route: DriverRoute): string {\n return route.stops.find((s) => s.status === 'pending')?.locationName || 'Stop #4 - Delivery Destination'\n }\n\n pendingStopPackages(route: DriverRoute): number {\n return route.stops.find((s) => s.status === 'pending')?.packagesCount || 2\n }\n\n pendingStopAddress(route: DriverRoute): string {\n return route.stops.find((s) => s.status === 'pending')?.address || ''\n }\n\n reassignTargets(excludeId: string): DriverRoute[] {\n return this.routes().filter((r) => r.id !== excludeId)\n }\n\n targetRowClass(selected: boolean): string {\n return cn(\n 'flex cursor-pointer items-center justify-between rounded-lg border p-2.5 transition-colors',\n selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/30',\n )\n }\n\n targetRadioClass(selected: boolean): string {\n return cn(\n 'border-border flex h-5 w-5 items-center justify-center rounded-full border',\n selected && 'border-primary bg-primary text-primary-foreground',\n )\n }\n\n handleAutoOptimize(): void {\n this.isOptimizing.set(true)\n this.notificationBanner.set(null)\n clearTimeout(this.optimizeTimer)\n this.optimizeTimer = setTimeout(() => {\n this.isOptimizing.set(false)\n this.notificationBanner.set({\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 handleExportManifests(): void {\n this.notificationBanner.set({\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 openModal(type: 'gps' | 'call' | 'reassign', route: DriverRoute): void {\n this.activeModal.set({\n type,\n route,\n targetRouteId: this.routes().find((r) => r.id !== route.id)?.id,\n })\n }\n\n closeModal(): void {\n this.activeModal.set(null)\n }\n\n onOverlayClick(event: MouseEvent): void {\n if (event.target === event.currentTarget) this.closeModal()\n }\n\n selectTargetRoute(targetId: string): void {\n const modal = this.activeModal()\n if (modal) this.activeModal.set({ ...modal, targetRouteId: targetId })\n }\n\n handleConfirmReassign(): void {\n const modal = this.activeModal()\n if (modal) {\n this.notificationBanner.set({\n title: 'Stops Successfully Reassigned',\n message: `Pending stop from ${modal.route.routeCode} transferred. Driver GPS routes and manifest synced.`,\n type: 'success',\n })\n this.closeModal()\n }\n }\n\n resetFilters(): void {\n this.selectedZone.set('all')\n this.searchQuery.set('')\n this.filterType.set('all')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/dispatch-assignment-board/dispatch-assignment-board.component.ts" }, { "path": "packages/registry-angular/blocks/dispatch-assignment-board/index.ts", "content": "export {\n UiDispatchAssignmentBoardComponent,\n DRIVER_ROUTES_DATA,\n type ActiveModalState,\n type DispatchFilter,\n type DriverRoute,\n type RouteStop,\n type StopStatus,\n} from './dispatch-assignment-board.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/dispatch-assignment-board/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/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" ] }