{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "leaflet-last-mile-courier-dispatch", "title": "Leaflet Last Mile Courier Dispatch", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/leaflet-last-mile-courier-dispatch/LeafletLastMileCourierDispatch.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { BatteryCharging, Navigation, Phone, Radio, Truck } from 'lucide-react'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { LeafletMap, LeafletMarker, LeafletPolyline, type LeafletMapRef } from '@/components/ui/leaflet-map'\nimport { cn } from '@/lib/utils'\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 interface LeafletLastMileCourierDispatchProps extends React.HTMLAttributes {\n routeId?: string\n driverName?: string\n vehicleCode?: string\n}\n\nconst 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\nexport function LeafletLastMileCourierDispatch({\n routeId = 'RTE-METRO-409',\n driverName = 'Elena Rostova',\n vehicleCode = 'VAN-EV-09 (Ford E-Transit)',\n className,\n ...props\n}: LeafletLastMileCourierDispatchProps) {\n const [stops, setStops] = React.useState(DEFAULT_STOPS)\n const mapRef = React.useRef(null)\n\n const completedCount = stops.filter((s) => s.status === 'delivered').length\n const totalStops = stops.length\n const onTimeRate = '98.4%'\n\n const routePath = React.useMemo(() => stops.map((s) => s.coords).filter(Boolean) as [number, number][], [stops])\n\n const focusStop = (stop: DeliveryStop) => {\n if (!stop.coords) return\n mapRef.current?.flyTo({ center: stop.coords, zoom: 15, duration: 800 })\n }\n\n const fitRoute = () => {\n if (routePath.length < 2) return\n const lngs = routePath.map((c) => c[0])\n const lats = routePath.map((c) => c[1])\n mapRef.current?.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 function markDelivered(id: string) {\n setStops((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 return (\n
\n {/* Header / Dispatch Telemetry Overview */}\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 {/* Progress Metric */}\n
\n
ROUTE COMPLETION
\n
\n
\n {completedCount} / {totalStops}\n
\n \n {Math.round((completedCount / totalStops) * 100)}%\n \n
\n
\n\n {/* On-time SLA */}\n
\n
ON-TIME WINDOW SLA
\n
{onTimeRate}
\n
\n\n {/* Vehicle Telemetry */}\n
\n
\n \n EV BATTERY / RANGE\n
\n
74% · 142 km
\n
\n\n {/* Next Stop ETA */}\n
\n
CURRENT TARGET ETA
\n
10:25 AM (Stop #3)
\n
\n \n \n\n {/* Live GPS Route Map */}\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 {/* Route Polyline */}\n \n\n {/* Delivery Stop Markers */}\n {stops.map((stop) => (\n \n
focusStop(stop)}>\n \n {stop.stopNumber}\n
\n \n {stop.recipient.split(' ')[0]}\n \n
\n \n ))}\n\n {/* Live Courier Van Marker */}\n \n
\n \n
\n \n
\n
\n \n \n
\n \n\n {/* Dispatch Sequence Table */}\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 {stops.map((stop) => (\n \n {/* Stop Number */}\n #0{stop.stopNumber}\n\n {/* Tracking Code */}\n \n
{stop.trackingCode}
\n \n\n {/* Recipient & Address */}\n \n
{stop.recipient}
\n
{stop.address}
\n \n\n {/* Time Window & ETA */}\n \n
{stop.timeWindow}
\n
ETA: {stop.eta}
\n \n\n {/* Parcels Count */}\n {stop.parcels} pkg\n\n {/* Status & Proof of Delivery */}\n \n
\n
\n \n {stop.status.replace('_', ' ')}\n \n
\n {stop.podTimestamp && (\n {stop.podTimestamp}\n )}\n
\n \n\n {/* Action */}\n \n {stop.status === 'en_route' && (\n markDelivered(stop.id)}\n >\n Confirm POD\n \n )}\n {stop.status === 'delivered' && Logged}\n {stop.status === 'scheduled' && Queued}\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 )\n}\n\nexport default LeafletLastMileCourierDispatch\n", "type": "registry:block", "target": "~/components/blocks/LeafletLastMileCourierDispatch.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/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" ] }