{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "leaflet-last-mile-courier-dispatch", "title": "Leaflet Last Mile Courier Dispatch", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/leaflet-last-mile-courier-dispatch/leaflet-last-mile-courier-dispatch.component.ts", "content": "// Last-mile courier dispatch on free OpenStreetMap tiles — no API key. Route telemetry KPIs,\n// a live GPS map with sequenced drop pins, the courier van and the dashed route polyline, and a\n// delivery manifest whose \"Confirm POD\" logs proof of delivery and moves the next scheduled\n// stop en route.\nimport { Component, Input, ViewChild, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { BatteryCharging, LucideAngularModule, Navigation, Phone, Radio, Truck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiLeafletMapComponent,\n UiLeafletMarkerComponent,\n UiLeafletPolylineComponent,\n} from '@/ui/leaflet-map/leaflet-map.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface DeliveryStop {\n id: string\n stopNumber: number\n trackingCode: string\n recipient: string\n address: string\n parcels: number\n timeWindow: string\n eta: string\n status: 'delivered' | 'en_route' | 'scheduled' | 'failed'\n podType?: 'signature' | 'photo_scanned' | 'front_door'\n podTimestamp?: string\n coords?: [number, number]\n}\n\nexport const DEFAULT_STOPS: DeliveryStop[] = [\n {\n id: 'stp-1',\n stopNumber: 1,\n trackingCode: 'TRK-9941-8812',\n recipient: 'Apex Logistics HQ',\n address: '742 Evergreen Terrace, Sector 4',\n parcels: 3,\n timeWindow: '08:30 - 09:30',\n eta: '08:52 AM',\n status: 'delivered',\n podType: 'signature',\n podTimestamp: '08:54 AM (Signed by J. Doe)',\n coords: [-73.991, 40.743],\n },\n {\n id: 'stp-2',\n stopNumber: 2,\n trackingCode: 'TRK-9941-8813',\n recipient: 'David K. Miller',\n address: '1204 Pinehurst Ave, Apt 3B',\n parcels: 1,\n timeWindow: '09:30 - 10:30',\n eta: '09:45 AM',\n status: 'delivered',\n podType: 'photo_scanned',\n podTimestamp: '09:48 AM (Doorstep Verified)',\n coords: [-73.987, 40.747],\n },\n {\n id: 'stp-3',\n stopNumber: 3,\n trackingCode: 'TRK-9941-8814',\n recipient: 'Global Tech Labs',\n address: '450 Innovation Parkway, Suite 100',\n parcels: 4,\n timeWindow: '10:00 - 11:30',\n eta: '10:25 AM',\n status: 'en_route',\n coords: [-73.982, 40.751],\n },\n {\n id: 'stp-4',\n stopNumber: 4,\n trackingCode: 'TRK-9941-8815',\n recipient: 'Sarah Jenkins',\n address: '88 Riverfront Blvd',\n parcels: 2,\n timeWindow: '11:30 - 12:30',\n eta: '11:45 AM',\n status: 'scheduled',\n coords: [-73.978, 40.755],\n },\n {\n id: 'stp-5',\n stopNumber: 5,\n trackingCode: 'TRK-9941-8816',\n recipient: 'Metro Health Clinic',\n address: '310 Health Sciences Way',\n parcels: 1,\n timeWindow: '12:30 - 14:00',\n eta: '01:10 PM',\n status: 'scheduled',\n coords: [-73.971, 40.758],\n },\n]\n\n// [lng, lat] constants — stable references so the map/marker inputs never re-fire.\nconst MAP_CENTER: [number, number] = [-73.982, 40.75]\n/** The live courier van position (the React block's static van LeafletMarker). */\nexport const COURIER_VAN_LNG_LAT: [number, number] = [-73.984, 40.749]\nconst ROUTE_DASH_ARRAY = [2, 2]\n\n/**\n * Angular port of the React LeafletLastMileCourierDispatch block: route KPIs, a live GPS\n * corridor map on free raster tiles and a delivery manifest with Proof of Delivery logging.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-leaflet-last-mile-courier-dispatch, [ui-leaflet-last-mile-courier-dispatch]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"leaflet-last-mile-courier-dispatch\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiLeafletMapComponent,\n UiLeafletMarkerComponent,\n UiLeafletPolylineComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \n
\n
\n
\n
\n {{ routeId }}\n \n {{ vehicleCode }}\n \n \n \n Live Telemetry Active\n \n
\n

Last-Mile Courier Dispatch & POD Telemetry

\n

\n Courier: {{ driverName }} · Urban Route Dispatch Matrix\n

\n
\n\n
\n \n \n
\n
\n\n
\n \n
\n
ROUTE COMPLETION
\n {{ ' ' }}\n
\n \n
{{ completedCount() }} / {{ totalStops() }}{{ ' ' }}
\n {{ completionPercent() }}%\n
\n
\n\n \n
\n
ON-TIME WINDOW SLA
\n {{ ' ' }}\n
{{ onTimeRate }}
\n
\n\n \n
\n
\n \n EV BATTERY / RANGE\n
\n {{ ' ' }}\n
74% · 142 km
\n
\n\n \n
\n
CURRENT TARGET ETA
\n {{ ' ' }}\n
10:25 AM (Stop #3)
\n
\n
\n
\n\n \n
\n
\n
\n
\n

\n \n Live GPS Telemetry & Corridor Map\n

\n

\n Real-time courier positioning with sequenced drop waypoints and completion status.\n

\n
\n
\n \n GPS Synced · 3s ago\n
\n
\n
\n
\n \n \n \n\n \n @for (stop of stops(); track stop.id) {\n \n
\n
\n {{ stop.stopNumber }}\n
\n \n {{ firstWord(stop.recipient) }}\n \n
\n \n }\n\n \n \n
\n \n \n \n
\n
\n \n \n
\n \n\n \n
\n
\n

Delivery Manifest & Proof of Delivery (POD)

\n

\n Ordered drop sequence with recipient signature capture and delivery window timestamps.\n

\n
\n\n
\n
\n \n \n Stop\n Tracking ID\n Recipient & Address\n Window / ETA\n Parcels\n Status & Proof of Delivery\n Action\n \n \n \n @for (stop of stops(); track stop.id) {\n \n \n #0{{ stop.stopNumber }}\n\n \n \n
{{ stop.trackingCode }}
\n \n\n \n \n
{{ stop.recipient }}
\n {{ ' ' }}\n
{{ stop.address }}
\n \n\n \n \n
{{ stop.timeWindow }}
\n {{ ' ' }}\n
ETA: {{ stop.eta }}
\n \n\n \n {{ stop.parcels }} pkg\n\n \n \n
\n
\n \n {{ statusLabel(stop.status) }}\n \n
\n @if (stop.podTimestamp) {\n \n {{ ' ' }}{{ stop.podTimestamp }}\n }\n
\n \n\n \n \n @if (stop.status === 'en_route') {\n \n }\n @if (stop.status === 'delivered') {\n Logged\n }\n @if (stop.status === 'scheduled') {\n Queued\n }\n \n \n }\n \n
\n
\n\n \n \n
Geotagged proof of delivery records are synced automatically to customer tracking portals.{{ ' ' }}
\n
\n Route summary: {{ totalStops() }} total consignments\n
\n
\n \n `,\n})\nexport class UiLeafletLastMileCourierDispatchComponent {\n @Input() routeId = 'RTE-METRO-409'\n @Input() driverName = 'Elena Rostova'\n @Input() vehicleCode = 'VAN-EV-09 (Ford E-Transit)'\n @Input('class') className?: string\n\n @ViewChild(UiLeafletMapComponent) map?: UiLeafletMapComponent\n\n protected readonly BatteryCharging = BatteryCharging\n protected readonly Navigation = Navigation\n protected readonly Phone = Phone\n protected readonly Radio = Radio\n protected readonly Truck = Truck\n\n protected readonly mapCenter = MAP_CENTER\n protected readonly courierVanLngLat = COURIER_VAN_LNG_LAT\n protected readonly routeDashArray = ROUTE_DASH_ARRAY\n\n readonly stops = signal(DEFAULT_STOPS)\n\n readonly completedCount = computed(() => this.stops().filter((s) => s.status === 'delivered').length)\n readonly totalStops = computed(() => this.stops().length)\n readonly completionPercent = computed(() => Math.round((this.completedCount() / this.totalStops()) * 100))\n readonly onTimeRate = '98.4%'\n\n /** The route polyline through every stop, in drop order. */\n readonly routePath = computed(() =>\n this.stops()\n .map((s) => s.coords)\n .filter((c): c is [number, number] => Boolean(c)),\n )\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n stopMarkerClass(stop: DeliveryStop): string {\n return cn(\n 'border-background flex size-6 items-center justify-center rounded-full border-2 font-mono text-xs font-bold shadow-md',\n stop.status === 'delivered'\n ? 'bg-success text-white'\n : stop.status === 'en_route'\n ? 'bg-warning text-white ring-2 ring-amber-400/50'\n : 'bg-muted text-muted-foreground',\n )\n }\n\n statusVariant(status: DeliveryStop['status']): BadgeVariant {\n return status === 'delivered' ? 'default' : status === 'en_route' ? 'secondary' : 'outline'\n }\n\n statusLabel(status: DeliveryStop['status']): string {\n return status.replace('_', ' ')\n }\n\n firstWord(text: string): string {\n return text.split(' ')[0] ?? ''\n }\n\n /** Fly the camera to a stop (clicking its map pin). */\n focusStop(stop: DeliveryStop): void {\n if (!stop.coords) return\n this.map?.flyTo({ center: stop.coords, zoom: 15, duration: 800 })\n }\n\n /** Fit the camera to the whole route (\"Live GPS Map\"). */\n fitRoute(): void {\n const path = this.routePath()\n if (path.length < 2) return\n const lngs = path.map((c) => c[0])\n const lats = path.map((c) => c[1])\n this.map?.fitBounds(\n [\n [Math.min(...lngs), Math.min(...lats)],\n [Math.max(...lngs), Math.max(...lats)],\n ],\n { padding: [48, 48] },\n )\n }\n\n /** Log POD for the stop and move the next scheduled stop after it en route. */\n markDelivered(id: string): void {\n this.stops.update((prev) => {\n let foundTarget = false\n return prev.map((stop) => {\n if (stop.id === id) {\n foundTarget = true\n return {\n ...stop,\n status: 'delivered' as const,\n podType: 'signature' as const,\n podTimestamp: 'Just now (Signed)',\n }\n }\n if (foundTarget && stop.status === 'scheduled') {\n foundTarget = false\n return { ...stop, status: 'en_route' as const }\n }\n return stop\n })\n })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/leaflet-last-mile-courier-dispatch/leaflet-last-mile-courier-dispatch.component.ts" }, { "path": "packages/registry-angular/blocks/leaflet-last-mile-courier-dispatch/index.ts", "content": "export {\n UiLeafletLastMileCourierDispatchComponent,\n DEFAULT_STOPS,\n COURIER_VAN_LNG_LAT,\n type DeliveryStop,\n} from './leaflet-last-mile-courier-dispatch.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/leaflet-last-mile-courier-dispatch/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/leaflet-map.json" ], "description": "Last-mile courier dispatch matrix on free OpenStreetMap tiles — no API key. Route progress, ETA telemetry, and Proof of Delivery (POD) logging.", "categories": [ "dashboard", "data-display" ] }