@burdenoff/microfe-movethewheels 2026.1031.3 → 2026.1031.4

package/dist/pages/LiveTrackingPage.js

@@ -6,39 +6,39 @@ import { RefreshCw as ee } from "../node_modules/lucide-react/dist/esm/icons/ref
 import { Truck as i } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
 import { joinPath as a } from "../utils/navigation.js";
 import { useMoveTheWheels as o } from "../providers/MoveTheWheelsProvider.js";
-import { useLiveTracking as s, useTrackingAlerts as c } from "../hooks/useTracking.js";
-import { Badge as l, Button as u, Card as d, CardContent as f, CardHeader as p, CardTitle as m, ScrollArea as h, Tabs as g, TabsList as _, TabsTrigger as v } from "../components/ui.js";
-import { EmptyState as y, PageLayout as b } from "../components/PageLayout.js";
-import { MetricCard as x, MetricGrid as te } from "../components/MetricCard.js";
+import { formatDate as s } from "../utils/formatters.js";
+import { useLiveTracking as c, useTrackingAlerts as l } from "../hooks/useTracking.js";
+import { Badge as u, Button as d, Card as f, CardContent as p, CardHeader as m, CardTitle as h, ScrollArea as te, Tabs as g, TabsList as _, TabsTrigger as v } from "../components/ui.js";
+import { EmptyState as y, PageLayout as ne } from "../components/PageLayout.js";
+import { MetricCard as b, MetricGrid as x } from "../components/MetricCard.js";
 import { LogisticsMap as S } from "../components/maps/LogisticsMap.js";
 import "../components/maps/index.js";
 import { StatusBadge as C } from "../components/StatusBadge.js";
-import { formatDate as w } from "../utils/formatters.js";
-import { TrackingAlertList as T } from "../components/TrackingAlertList.js";
-import { deliveryMarkerStatus as E, firstRealLatLng as D } from "../utils/mapMarkers.js";
-import { useMemo as O, useState as k } from "react";
-import { jsx as A, jsxs as j } from "react/jsx-runtime";
-import { useI18n as M } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { EmphasisPanel as N, NextSteps as ne, PagePurpose as re } from "@burdenoff/fe-libs/ui";
+import { TrackingAlertList as w } from "../components/TrackingAlertList.js";
+import { deliveryMarkerStatus as T, firstRealLatLng as E } from "../utils/mapMarkers.js";
+import { useMemo as D, useState as O } from "react";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { useI18n as j } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { EmphasisPanel as M, NextSteps as re, PagePurpose as N } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/LiveTrackingPage.tsx
 function P() {
-	let { basePath: P, navigate: F } = o(), { activeDeliveries: I, isLoading: L, refetch: R } = s(), { t: z } = M(), B = (e, t) => {
+	let { basePath: P, navigate: F } = o(), { activeDeliveries: I, isLoading: L, refetch: R } = c(), { t: z } = j(), B = (e, t) => {
 		let n = z(e);
 		return n === e ? t : n;
-	}, { unacknowledgedAlerts: V, acknowledgeAlert: H, refetch: U } = c(), [W, G] = k("map"), [K, q] = k(null), [J, Y] = k("all"), X = (e) => {
+	}, { unacknowledgedAlerts: V, acknowledgeAlert: H, refetch: U } = l(), [W, G] = O("map"), [K, q] = O(null), [J, Y] = O("all"), X = (e) => {
 		F && F(a(P, e));
-	}, Z = K ? I.find((e) => e.order?.id === K) : null, Q = O(() => I.filter((e) => {
+	}, Z = K ? I.find((e) => e.order?.id === K) : null, Q = D(() => I.filter((e) => {
 		let t = e.order?.status;
 		return J === "all" ? !0 : J === "in_transit" ? t === "in_transit" : J === "out_for_delivery" ? t === "out_for_delivery" : t !== "in_transit" && t !== "out_for_delivery";
-	}), [I, J]), $ = O(() => Q.flatMap((e) => {
+	}), [I, J]), $ = D(() => Q.flatMap((e) => {
 		if (!e.order) return [];
-		let t = D(e.vehicle?.currentLocation, e.driver?.currentLocation, e.tracking?.currentLocation);
+		let t = E(e.vehicle?.currentLocation, e.driver?.currentLocation, e.tracking?.currentLocation);
 		return t ? [{
 			id: e.order.id,
 			lat: t.lat,
 			lng: t.lng,
 			label: e.order.orderNumber,
-			status: E(e.order.status),
+			status: T(e.order.status),
 			sublabel: e.driver?.fullName || e.vehicle?.vehicleNumber || e.tracking?.currentLocation?.address || void 0
 		}] : [];
 	}), [Q]), ie = $.length, ae = [
@@ -63,52 +63,52 @@ function P() {
 			count: I.filter((e) => e.order?.status !== "in_transit" && e.order?.status !== "out_for_delivery").length
 		}
 	];
-	return /* @__PURE__ */ j(b, {
+	return /* @__PURE__ */ A(ne, {
 		title: "Live Tracking",
 		subtitle: `${I.length} active deliveries`,
-		icon: /* @__PURE__ */ A(t, { size: 24 }),
-		headerActions: /* @__PURE__ */ j("div", {
+		icon: /* @__PURE__ */ k(t, { size: 24 }),
+		headerActions: /* @__PURE__ */ A("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ j(u, {
+			children: [/* @__PURE__ */ A(d, {
 				variant: "outline",
 				onClick: R,
 				disabled: L,
-				children: [/* @__PURE__ */ A(ee, {
+				children: [/* @__PURE__ */ k(ee, {
 					size: 16,
 					className: L ? "animate-spin" : ""
 				}), "Refresh"]
-			}), /* @__PURE__ */ A(g, {
+			}), /* @__PURE__ */ k(g, {
 				value: W,
 				onValueChange: (e) => G(e),
-				children: /* @__PURE__ */ j(_, { children: [/* @__PURE__ */ A(v, {
+				children: /* @__PURE__ */ A(_, { children: [/* @__PURE__ */ k(v, {
 					value: "map",
-					children: /* @__PURE__ */ A(n, { size: 16 })
-				}), /* @__PURE__ */ A(v, {
+					children: /* @__PURE__ */ k(n, { size: 16 })
+				}), /* @__PURE__ */ k(v, {
 					value: "list",
-					children: /* @__PURE__ */ A(e, { size: 16 })
+					children: /* @__PURE__ */ k(e, { size: 16 })
 				})] })
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ A(re, {
-				icon: /* @__PURE__ */ A(t, { size: 18 }),
+			/* @__PURE__ */ k(N, {
+				icon: /* @__PURE__ */ k(t, { size: 18 }),
 				children: "A real-time operations board for every delivery currently on the road. Watch where drivers are, which orders are out for delivery, and react to alerts — switch to the map for a bird's-eye view or the list to drill into a single shipment."
 			}),
-			/* @__PURE__ */ A(ne, {
+			/* @__PURE__ */ k(re, {
 				storageKey: "movethewheels-live-tracking",
 				steps: [
 					{
 						id: "select",
 						label: "Open a delivery",
 						description: "Switch to the list and pick a shipment to see full details.",
-						icon: /* @__PURE__ */ A(e, { size: 16 }),
+						icon: /* @__PURE__ */ k(e, { size: 16 }),
 						onClick: () => G("list")
 					},
 					{
 						id: "alerts",
 						label: "Clear outstanding alerts",
 						description: "Review delays and exceptions that need attention.",
-						icon: /* @__PURE__ */ A(i, { size: 16 }),
+						icon: /* @__PURE__ */ k(i, { size: 16 }),
 						done: V.length === 0,
 						onClick: () => G("list")
 					},
@@ -116,33 +116,33 @@ function P() {
 						id: "new-order",
 						label: "Create another order",
 						description: "Add a new delivery to the pipeline.",
-						icon: /* @__PURE__ */ A(r, { size: 16 }),
+						icon: /* @__PURE__ */ k(r, { size: 16 }),
 						onClick: () => X("orders/new")
 					}
 				]
 			}),
-			/* @__PURE__ */ j(te, {
+			/* @__PURE__ */ A(x, {
 				columns: 4,
 				children: [
-					/* @__PURE__ */ A(x, {
+					/* @__PURE__ */ k(b, {
 						size: "sm",
 						label: "Active Deliveries",
 						value: I.length,
-						icon: /* @__PURE__ */ A(i, { size: 18 })
+						icon: /* @__PURE__ */ k(i, { size: 18 })
 					}),
-					/* @__PURE__ */ A(x, {
+					/* @__PURE__ */ k(b, {
 						size: "sm",
 						label: "In Transit",
 						value: I.filter((e) => e.order?.status === "in_transit").length,
-						icon: /* @__PURE__ */ A(r, { size: 18 })
+						icon: /* @__PURE__ */ k(r, { size: 18 })
 					}),
-					/* @__PURE__ */ A(x, {
+					/* @__PURE__ */ k(b, {
 						size: "sm",
 						label: "Out for Delivery",
 						value: I.filter((e) => e.order?.status === "out_for_delivery").length,
-						icon: /* @__PURE__ */ A(t, { size: 18 })
+						icon: /* @__PURE__ */ k(t, { size: 18 })
 					}),
-					/* @__PURE__ */ A(x, {
+					/* @__PURE__ */ k(b, {
 						size: "sm",
 						label: "Alerts",
 						value: V.length,
@@ -150,25 +150,25 @@ function P() {
 					})
 				]
 			}),
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ A("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ A("div", {
+				children: [/* @__PURE__ */ k("div", {
 					className: "lg:col-span-2",
-					children: W === "map" ? /* @__PURE__ */ A(d, {
+					children: W === "map" ? /* @__PURE__ */ k(f, {
 						className: "overflow-hidden",
-						children: /* @__PURE__ */ j(f, {
+						children: /* @__PURE__ */ A(p, {
 							className: "p-0",
-							children: [/* @__PURE__ */ j("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "flex flex-wrap items-center gap-2 border-b border-border-seam p-3",
-								children: [ae.map((e) => /* @__PURE__ */ j("button", {
+								children: [ae.map((e) => /* @__PURE__ */ A("button", {
 									type: "button",
 									onClick: () => Y(e.value),
 									className: `inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg ${J === e.value ? "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-seam text-text-secondary hover:bg-bg-sunken/60"}`,
-									children: [e.label, /* @__PURE__ */ A("span", {
+									children: [e.label, /* @__PURE__ */ k("span", {
 										className: "tabular-nums opacity-80",
 										children: e.count
 									})]
-								}, e.value)), /* @__PURE__ */ j("span", {
+								}, e.value)), /* @__PURE__ */ A("span", {
 									className: "ml-auto text-xs text-text-secondary",
 									children: [
 										ie,
@@ -177,19 +177,19 @@ function P() {
 										" located"
 									]
 								})]
-							}), /* @__PURE__ */ A(S, {
+							}), /* @__PURE__ */ k(S, {
 								markers: $,
 								height: 560,
 								emptyMessage: Q.length === 0 ? "No active deliveries to plot" : "Awaiting live GPS positions for these deliveries"
 							})]
 						})
-					}) : /* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(p, { children: /* @__PURE__ */ A(m, { children: "Active Deliveries" }) }), /* @__PURE__ */ A(f, {
+					}) : /* @__PURE__ */ A(f, { children: [/* @__PURE__ */ k(m, { children: /* @__PURE__ */ k(h, { children: "Active Deliveries" }) }), /* @__PURE__ */ k(p, {
 						className: "p-0",
-						children: /* @__PURE__ */ A(h, {
+						children: /* @__PURE__ */ k(te, {
 							className: "h-[550px]",
-							children: /* @__PURE__ */ j("div", {
+							children: /* @__PURE__ */ A("div", {
 								className: "divide-y",
-								children: [Q.map((e) => e.order ? /* @__PURE__ */ A("div", {
+								children: [Q.map((e) => e.order ? /* @__PURE__ */ k("div", {
 									role: "button",
 									tabIndex: 0,
 									"aria-label": `Select delivery ${e.order.orderNumber}`,
@@ -198,44 +198,44 @@ function P() {
 									onKeyDown: (t) => {
 										(t.key === "Enter" || t.key === " ") && e.order && (t.preventDefault(), q(e.order.id));
 									},
-									children: /* @__PURE__ */ j("div", {
+									children: /* @__PURE__ */ A("div", {
 										className: "flex items-start justify-between",
-										children: [/* @__PURE__ */ j("div", { children: [
-											/* @__PURE__ */ j("div", {
+										children: [/* @__PURE__ */ A("div", { children: [
+											/* @__PURE__ */ A("div", {
 												className: "flex items-center gap-2 mb-1",
-												children: [/* @__PURE__ */ A("span", {
+												children: [/* @__PURE__ */ k("span", {
 													className: "font-medium",
 													children: e.order.orderNumber
-												}), /* @__PURE__ */ A(C, {
+												}), /* @__PURE__ */ k(C, {
 													status: e.order.status,
 													type: "order",
 													size: "sm"
 												})]
 											}),
-											/* @__PURE__ */ A("p", {
+											/* @__PURE__ */ k("p", {
 												className: "text-sm text-text-secondary",
 												children: e.order.customerInfo.name
 											}),
-											/* @__PURE__ */ j("p", {
+											/* @__PURE__ */ A("p", {
 												className: "text-sm text-text-secondary",
 												children: [e.driver?.fullName || "Unassigned", e.vehicle && ` - ${e.vehicle.vehicleNumber}`]
 											})
-										] }), /* @__PURE__ */ j("div", {
+										] }), /* @__PURE__ */ A("div", {
 											className: "text-right",
-											children: [/* @__PURE__ */ j("p", {
+											children: [/* @__PURE__ */ A("p", {
 												className: "text-sm font-medium",
 												children: [
 													"ETA:",
 													" ",
-													e.estimatedArrival ? w(e.estimatedArrival, "time") : "N/A"
+													e.estimatedArrival ? s(e.estimatedArrival, "time") : "N/A"
 												]
-											}), /* @__PURE__ */ A("p", {
+											}), /* @__PURE__ */ k("p", {
 												className: "text-xs text-text-secondary",
 												children: e.tracking?.currentLocation?.address || "Location updating..."
 											})]
 										})]
 									})
-								}, e.order.id) : null), Q.length === 0 && /* @__PURE__ */ A(y, {
+								}, e.order.id) : null), Q.length === 0 && /* @__PURE__ */ k(y, {
 									illustration: "empty-sessions",
 									title: "No active deliveries",
 									description: "When orders are dispatched they'll appear here in real time."
@@ -243,72 +243,72 @@ function P() {
 							})
 						})
 					})] })
-				}), /* @__PURE__ */ j("div", {
+				}), /* @__PURE__ */ A("div", {
 					className: "space-y-6",
 					children: [
-						Z ? /* @__PURE__ */ j(N, {
+						Z ? /* @__PURE__ */ A(M, {
 							className: "space-y-4",
-							children: [/* @__PURE__ */ j("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ A("h2", {
+								children: [/* @__PURE__ */ k("h2", {
 									className: "text-base font-semibold text-text-primary",
 									children: "Delivery Details"
-								}), /* @__PURE__ */ A(u, {
+								}), /* @__PURE__ */ k(d, {
 									variant: "ghost",
 									size: "sm",
 									onClick: () => q(null),
 									children: "Clear"
 								})]
-							}), /* @__PURE__ */ j("div", {
+							}), /* @__PURE__ */ A("div", {
 								className: "space-y-4",
 								children: [
-									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 										className: "text-sm text-text-secondary",
 										children: "Order"
-									}), /* @__PURE__ */ A("p", {
+									}), /* @__PURE__ */ k("p", {
 										className: "font-medium",
 										children: Z.order?.orderNumber ?? "-"
 									})] }),
-									/* @__PURE__ */ j("div", { children: [
-										/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ A("div", { children: [
+										/* @__PURE__ */ k("p", {
 											className: "text-sm text-text-secondary",
 											children: "Customer"
 										}),
-										/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ k("p", {
 											className: "font-medium",
 											children: Z.order?.customerInfo.name ?? "-"
 										}),
-										/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ k("p", {
 											className: "text-sm text-text-secondary",
 											children: Z.order?.customerInfo.phone ?? "-"
 										})
 									] }),
-									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 										className: "text-sm text-text-secondary",
 										children: "Driver"
-									}), /* @__PURE__ */ A("p", {
+									}), /* @__PURE__ */ k("p", {
 										className: "font-medium",
 										children: Z.driver?.fullName || "Unassigned"
 									})] }),
-									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 										className: "text-sm text-text-secondary",
 										children: "Vehicle"
-									}), /* @__PURE__ */ A("p", {
+									}), /* @__PURE__ */ k("p", {
 										className: "font-medium",
 										children: Z.vehicle ? `${Z.vehicle.vehicleNumber} - ${Z.vehicle.make} ${Z.vehicle.model}` : "Not assigned"
 									})] }),
-									/* @__PURE__ */ j("div", { children: [
-										/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ A("div", { children: [
+										/* @__PURE__ */ k("p", {
 											className: "text-sm text-text-secondary",
 											children: "Current Location"
 										}),
-										/* @__PURE__ */ A("p", {
+										/* @__PURE__ */ k("p", {
 											className: "text-sm",
 											children: Z.tracking?.currentLocation?.address || "Updating..."
 										}),
 										(() => {
-											let e = D(Z.vehicle?.currentLocation, Z.driver?.currentLocation, Z.tracking?.currentLocation);
-											return e ? /* @__PURE__ */ A(S, {
+											let e = E(Z.vehicle?.currentLocation, Z.driver?.currentLocation, Z.tracking?.currentLocation);
+											return e ? /* @__PURE__ */ k(S, {
 												className: "mt-3 overflow-hidden rounded-lg border border-border-seam",
 												height: 160,
 												markers: [{
@@ -316,26 +316,26 @@ function P() {
 													lat: e.lat,
 													lng: e.lng,
 													label: Z.order?.orderNumber ?? "Delivery",
-													status: E(Z.order?.status)
+													status: T(Z.order?.status)
 												}]
 											}) : null;
 										})()
 									] }),
-									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 										className: "text-sm text-text-secondary",
 										children: "Estimated Arrival"
-									}), /* @__PURE__ */ A("p", {
+									}), /* @__PURE__ */ k("p", {
 										className: "font-medium",
-										children: Z.estimatedArrival ? w(Z.estimatedArrival, "full") : "Calculating..."
+										children: Z.estimatedArrival ? s(Z.estimatedArrival, "full") : "Calculating..."
 									})] }),
-									/* @__PURE__ */ j("div", {
+									/* @__PURE__ */ A("div", {
 										className: "pt-2 space-y-2",
-										children: [/* @__PURE__ */ A(u, {
+										children: [/* @__PURE__ */ k(d, {
 											className: "w-full",
 											onClick: () => Z.order && X(`orders/${Z.order.id}`),
 											disabled: !Z.order,
 											children: "View Order"
-										}), /* @__PURE__ */ A(u, {
+										}), /* @__PURE__ */ k(d, {
 											variant: "outline",
 											className: "w-full",
 											onClick: () => Z.order && X(`tracking?order=${Z.order.id}`),
@@ -345,54 +345,54 @@ function P() {
 									})
 								]
 							})]
-						}) : /* @__PURE__ */ A(d, { children: /* @__PURE__ */ A(f, {
+						}) : /* @__PURE__ */ k(f, { children: /* @__PURE__ */ k(p, {
 							className: "p-6",
-							children: /* @__PURE__ */ A(y, {
+							children: /* @__PURE__ */ k(y, {
 								illustration: "empty-generic",
 								title: "No delivery selected",
 								description: "Pick a delivery from the list to see its driver, vehicle, ETA and live location."
 							})
 						}) }),
-						/* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(p, { children: /* @__PURE__ */ j(m, {
+						/* @__PURE__ */ A(f, { children: [/* @__PURE__ */ k(m, { children: /* @__PURE__ */ A(h, {
 							className: "flex items-center gap-2",
-							children: [B("movethewheels.tracking.live.alerts", "Alerts"), V.length > 0 && /* @__PURE__ */ A(l, {
+							children: [B("movethewheels.tracking.live.alerts", "Alerts"), V.length > 0 && /* @__PURE__ */ k(u, {
 								variant: "destructive",
 								children: V.length
 							})]
-						}) }), /* @__PURE__ */ A(f, { children: V.length > 0 ? /* @__PURE__ */ A(T, {
+						}) }), /* @__PURE__ */ k(p, { children: V.length > 0 ? /* @__PURE__ */ k(w, {
 							alerts: V,
 							limit: 5,
 							t: B,
 							onAcknowledge: H,
 							onOpenOrder: (e) => X(`orders/${e}`),
 							onChanged: U
-						}) : /* @__PURE__ */ A("div", {
+						}) : /* @__PURE__ */ k("div", {
 							className: "text-center text-text-secondary py-4",
-							children: /* @__PURE__ */ A("p", {
+							children: /* @__PURE__ */ k("p", {
 								className: "text-sm",
 								children: B("movethewheels.tracking.live.noAlerts", "No active alerts")
 							})
 						}) })] }),
-						/* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(p, { children: /* @__PURE__ */ A(m, { children: "Quick Actions" }) }), /* @__PURE__ */ j(f, {
+						/* @__PURE__ */ A(f, { children: [/* @__PURE__ */ k(m, { children: /* @__PURE__ */ k(h, { children: "Quick Actions" }) }), /* @__PURE__ */ A(p, {
 							className: "space-y-2",
 							children: [
-								/* @__PURE__ */ j(u, {
+								/* @__PURE__ */ A(d, {
 									variant: "outline",
 									className: "w-full",
 									onClick: () => X("orders/new"),
-									children: [/* @__PURE__ */ A(r, { size: 16 }), "Create Order"]
+									children: [/* @__PURE__ */ k(r, { size: 16 }), "Create Order"]
 								}),
-								/* @__PURE__ */ j(u, {
+								/* @__PURE__ */ A(d, {
 									variant: "outline",
 									className: "w-full",
 									onClick: () => X("routes"),
-									children: [/* @__PURE__ */ A(t, { size: 16 }), "Manage Routes"]
+									children: [/* @__PURE__ */ k(t, { size: 16 }), "Manage Routes"]
 								}),
-								/* @__PURE__ */ j(u, {
+								/* @__PURE__ */ A(d, {
 									variant: "outline",
 									className: "w-full",
 									onClick: () => X("fleet"),
-									children: [/* @__PURE__ */ A(i, { size: 16 }), "Fleet Status"]
+									children: [/* @__PURE__ */ k(i, { size: 16 }), "Fleet Status"]
 								})
 							]
 						})] })