@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/dist/LiveTrackingPage-DhEaNKZ4.js

@@ -0,0 +1,429 @@
+import { J as e, N as t, X as n, Z as r, d as i, f as a, g as o, h as s, i as c, l, lt as u, st as d, t as f, u as p, ut as m } from "./PageLayout-BniRJaQ6.js";
+import { t as h } from "./map-pin-CqN1bbT1.js";
+import { t as g } from "./map-DNQn9fyY.js";
+import { t as _ } from "./package-DmRF7iQD.js";
+import { t as v } from "./refresh-cw-rW59D4b7.js";
+import { t as y } from "./truck-9rLDncav.js";
+import { o as b, r as x } from "./useTracking-BKG0I2ln.js";
+import { r as S, t as C } from "./MetricCard-y3bWHKUQ.js";
+import { r as w } from "./maps-yzLqiK_C.js";
+import { r as T } from "./StatusBadge-BNHXYvZx.js";
+import { r as E } from "./formatters-FWJDwTFv.js";
+import { n as D, t as O } from "./mapMarkers-NCV9MRKR.js";
+import { useMemo as k, useState as A } from "react";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { EmphasisPanel as N, NextSteps as P, PagePurpose as F } from "@burdenoff/fe-libs/ui";
+//#region node_modules/lucide-react/dist/esm/icons/list.js
+var I = m("List", [
+	["path", {
+		d: "M3 12h.01",
+		key: "nlz23k"
+	}],
+	["path", {
+		d: "M3 18h.01",
+		key: "1tta3j"
+	}],
+	["path", {
+		d: "M3 6h.01",
+		key: "1rqtza"
+	}],
+	["path", {
+		d: "M8 12h13",
+		key: "1za7za"
+	}],
+	["path", {
+		d: "M8 18h13",
+		key: "1lx6n3"
+	}],
+	["path", {
+		d: "M8 6h13",
+		key: "ik3vkj"
+	}]
+]);
+//#endregion
+//#region src/movethewheels/pages/LiveTrackingPage.tsx
+function L() {
+	let { basePath: m, navigate: L } = d(), { activeDeliveries: R, isLoading: z, refetch: B } = x(), { unacknowledgedAlerts: V } = b(), [H, U] = A("map"), [W, G] = A(null), [K, q] = A("all"), J = (e) => {
+		L && L(u(m, e));
+	}, Y = W ? R.find((e) => e.order?.id === W) : null, X = k(() => R.filter((e) => {
+		let t = e.order?.status;
+		return K === "all" ? !0 : K === "in_transit" ? t === "in_transit" : K === "out_for_delivery" ? t === "out_for_delivery" : t !== "in_transit" && t !== "out_for_delivery";
+	}), [R, K]), Z = k(() => X.flatMap((e) => {
+		if (!e.order) return [];
+		let t = D(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: O(e.order.status),
+			sublabel: e.driver?.fullName || e.vehicle?.vehicleNumber || e.tracking?.currentLocation.address || void 0
+		}] : [];
+	}), [X]), Q = Z.length, $ = [
+		{
+			value: "all",
+			label: "All",
+			count: R.length
+		},
+		{
+			value: "in_transit",
+			label: "In transit",
+			count: R.filter((e) => e.order?.status === "in_transit").length
+		},
+		{
+			value: "out_for_delivery",
+			label: "Out for delivery",
+			count: R.filter((e) => e.order?.status === "out_for_delivery").length
+		},
+		{
+			value: "other",
+			label: "Other",
+			count: R.filter((e) => e.order?.status !== "in_transit" && e.order?.status !== "out_for_delivery").length
+		}
+	];
+	return /* @__PURE__ */ M(c, {
+		title: "Live Tracking",
+		subtitle: `${R.length} active deliveries`,
+		icon: /* @__PURE__ */ j(h, { size: 24 }),
+		headerActions: /* @__PURE__ */ M("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ M(p, {
+				variant: "outline",
+				onClick: B,
+				disabled: z,
+				children: [/* @__PURE__ */ j(v, {
+					size: 16,
+					className: z ? "animate-spin" : ""
+				}), "Refresh"]
+			}), /* @__PURE__ */ j(e, {
+				value: H,
+				onValueChange: (e) => U(e),
+				children: /* @__PURE__ */ M(n, { children: [/* @__PURE__ */ j(r, {
+					value: "map",
+					children: /* @__PURE__ */ j(g, { size: 16 })
+				}), /* @__PURE__ */ j(r, {
+					value: "list",
+					children: /* @__PURE__ */ j(I, { size: 16 })
+				})] })
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ j(F, {
+				icon: /* @__PURE__ */ j(h, { 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__ */ j(P, {
+				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__ */ j(I, { size: 16 }),
+						onClick: () => U("list")
+					},
+					{
+						id: "alerts",
+						label: "Clear outstanding alerts",
+						description: "Review delays and exceptions that need attention.",
+						icon: /* @__PURE__ */ j(y, { size: 16 }),
+						done: V.length === 0,
+						onClick: () => U("list")
+					},
+					{
+						id: "new-order",
+						label: "Create another order",
+						description: "Add a new delivery to the pipeline.",
+						icon: /* @__PURE__ */ j(_, { size: 16 }),
+						onClick: () => J("orders/new")
+					}
+				]
+			}),
+			/* @__PURE__ */ M(S, {
+				columns: 4,
+				children: [
+					/* @__PURE__ */ j(C, {
+						size: "sm",
+						label: "Active Deliveries",
+						value: R.length,
+						icon: /* @__PURE__ */ j(y, { size: 18 })
+					}),
+					/* @__PURE__ */ j(C, {
+						size: "sm",
+						label: "In Transit",
+						value: R.filter((e) => e.order?.status === "in_transit").length,
+						icon: /* @__PURE__ */ j(_, { size: 18 })
+					}),
+					/* @__PURE__ */ j(C, {
+						size: "sm",
+						label: "Out for Delivery",
+						value: R.filter((e) => e.order?.status === "out_for_delivery").length,
+						icon: /* @__PURE__ */ j(h, { size: 18 })
+					}),
+					/* @__PURE__ */ j(C, {
+						size: "sm",
+						label: "Alerts",
+						value: V.length,
+						changeType: V.length > 0 ? "negative" : "neutral"
+					})
+				]
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ j("div", {
+					className: "lg:col-span-2",
+					children: H === "map" ? /* @__PURE__ */ j(i, {
+						className: "overflow-hidden",
+						children: /* @__PURE__ */ M(a, {
+							className: "p-0",
+							children: [/* @__PURE__ */ M("div", {
+								className: "flex flex-wrap items-center gap-2 border-b border-border-seam p-3",
+								children: [$.map((e) => /* @__PURE__ */ M("button", {
+									type: "button",
+									onClick: () => q(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 ${K === 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__ */ j("span", {
+										className: "tabular-nums opacity-80",
+										children: e.count
+									})]
+								}, e.value)), /* @__PURE__ */ M("span", {
+									className: "ml-auto text-xs text-text-secondary",
+									children: [
+										Q,
+										" of ",
+										X.length,
+										" located"
+									]
+								})]
+							}), /* @__PURE__ */ j(w, {
+								markers: Z,
+								height: 560,
+								emptyMessage: X.length === 0 ? "No active deliveries to plot" : "Awaiting live GPS positions for these deliveries"
+							})]
+						})
+					}) : /* @__PURE__ */ M(i, { children: [/* @__PURE__ */ j(s, { children: /* @__PURE__ */ j(o, { children: "Active Deliveries" }) }), /* @__PURE__ */ j(a, {
+						className: "p-0",
+						children: /* @__PURE__ */ j(t, {
+							className: "h-[550px]",
+							children: /* @__PURE__ */ M("div", {
+								className: "divide-y",
+								children: [X.map((e) => e.order ? /* @__PURE__ */ j("div", {
+									role: "button",
+									tabIndex: 0,
+									"aria-label": `Select delivery ${e.order.orderNumber}`,
+									className: `p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg ${W === e.order.id ? "bg-bg-sunken/50" : ""}`,
+									onClick: () => G(e.order.id),
+									onKeyDown: (t) => {
+										(t.key === "Enter" || t.key === " ") && e.order && (t.preventDefault(), G(e.order.id));
+									},
+									children: /* @__PURE__ */ M("div", {
+										className: "flex items-start justify-between",
+										children: [/* @__PURE__ */ M("div", { children: [
+											/* @__PURE__ */ M("div", {
+												className: "flex items-center gap-2 mb-1",
+												children: [/* @__PURE__ */ j("span", {
+													className: "font-medium",
+													children: e.order.orderNumber
+												}), /* @__PURE__ */ j(T, {
+													status: e.order.status,
+													type: "order",
+													size: "sm"
+												})]
+											}),
+											/* @__PURE__ */ j("p", {
+												className: "text-sm text-text-secondary",
+												children: e.order.customerInfo.name
+											}),
+											/* @__PURE__ */ M("p", {
+												className: "text-sm text-text-secondary",
+												children: [e.driver?.fullName || "Unassigned", e.vehicle && ` - ${e.vehicle.vehicleNumber}`]
+											})
+										] }), /* @__PURE__ */ M("div", {
+											className: "text-right",
+											children: [/* @__PURE__ */ M("p", {
+												className: "text-sm font-medium",
+												children: [
+													"ETA:",
+													" ",
+													e.estimatedArrival ? E(e.estimatedArrival, "time") : "N/A"
+												]
+											}), /* @__PURE__ */ j("p", {
+												className: "text-xs text-text-secondary",
+												children: e.tracking?.currentLocation.address || "Location updating..."
+											})]
+										})]
+									})
+								}, e.order.id) : null), X.length === 0 && /* @__PURE__ */ j(f, {
+									illustration: "empty-sessions",
+									title: "No active deliveries",
+									description: "When orders are dispatched they'll appear here in real time."
+								})]
+							})
+						})
+					})] })
+				}), /* @__PURE__ */ M("div", {
+					className: "space-y-6",
+					children: [
+						Y ? /* @__PURE__ */ M(N, {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ M("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ j("h2", {
+									className: "text-base font-semibold text-text-primary",
+									children: "Delivery Details"
+								}), /* @__PURE__ */ j(p, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => G(null),
+									children: "Clear"
+								})]
+							}), /* @__PURE__ */ M("div", {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: "Order"
+									}), /* @__PURE__ */ j("p", {
+										className: "font-medium",
+										children: Y.order?.orderNumber ?? "-"
+									})] }),
+									/* @__PURE__ */ M("div", { children: [
+										/* @__PURE__ */ j("p", {
+											className: "text-sm text-text-secondary",
+											children: "Customer"
+										}),
+										/* @__PURE__ */ j("p", {
+											className: "font-medium",
+											children: Y.order?.customerInfo.name ?? "-"
+										}),
+										/* @__PURE__ */ j("p", {
+											className: "text-sm text-text-secondary",
+											children: Y.order?.customerInfo.phone ?? "-"
+										})
+									] }),
+									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: "Driver"
+									}), /* @__PURE__ */ j("p", {
+										className: "font-medium",
+										children: Y.driver?.fullName || "Unassigned"
+									})] }),
+									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: "Vehicle"
+									}), /* @__PURE__ */ j("p", {
+										className: "font-medium",
+										children: Y.vehicle ? `${Y.vehicle.vehicleNumber} - ${Y.vehicle.make} ${Y.vehicle.model}` : "Not assigned"
+									})] }),
+									/* @__PURE__ */ M("div", { children: [
+										/* @__PURE__ */ j("p", {
+											className: "text-sm text-text-secondary",
+											children: "Current Location"
+										}),
+										/* @__PURE__ */ j("p", {
+											className: "text-sm",
+											children: Y.tracking?.currentLocation.address || "Updating..."
+										}),
+										(() => {
+											let e = D(Y.vehicle?.currentLocation, Y.driver?.currentLocation, Y.tracking?.currentLocation);
+											return e ? /* @__PURE__ */ j(w, {
+												className: "mt-3 overflow-hidden rounded-lg border border-border-seam",
+												height: 160,
+												markers: [{
+													id: Y.order?.id ?? "selected",
+													lat: e.lat,
+													lng: e.lng,
+													label: Y.order?.orderNumber ?? "Delivery",
+													status: O(Y.order?.status)
+												}]
+											}) : null;
+										})()
+									] }),
+									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: "Estimated Arrival"
+									}), /* @__PURE__ */ j("p", {
+										className: "font-medium",
+										children: Y.estimatedArrival ? E(Y.estimatedArrival, "full") : "Calculating..."
+									})] }),
+									/* @__PURE__ */ M("div", {
+										className: "pt-2 space-y-2",
+										children: [/* @__PURE__ */ j(p, {
+											className: "w-full",
+											onClick: () => Y.order && J(`orders/${Y.order.id}`),
+											disabled: !Y.order,
+											children: "View Order"
+										}), /* @__PURE__ */ j(p, {
+											variant: "outline",
+											className: "w-full",
+											onClick: () => Y.order && J(`tracking?order=${Y.order.id}`),
+											disabled: !Y.order,
+											children: "Track Details"
+										})]
+									})
+								]
+							})]
+						}) : /* @__PURE__ */ j(i, { children: /* @__PURE__ */ j(a, {
+							className: "p-6",
+							children: /* @__PURE__ */ j(f, {
+								illustration: "empty-generic",
+								title: "No delivery selected",
+								description: "Pick a delivery from the list to see its driver, vehicle, ETA and live location."
+							})
+						}) }),
+						/* @__PURE__ */ M(i, { children: [/* @__PURE__ */ j(s, { children: /* @__PURE__ */ M(o, {
+							className: "flex items-center gap-2",
+							children: ["Alerts", V.length > 0 && /* @__PURE__ */ j(l, {
+								variant: "destructive",
+								children: V.length
+							})]
+						}) }), /* @__PURE__ */ j(a, { children: V.length > 0 ? /* @__PURE__ */ j("div", {
+							className: "space-y-3",
+							children: V.slice(0, 5).map((e) => /* @__PURE__ */ M("div", {
+								className: `p-3 rounded-lg text-sm ${e.severity === "critical" || e.severity === "high" ? "bg-status-error-bg-subtle" : "bg-status-warning-bg-subtle"}`,
+								children: [/* @__PURE__ */ j("p", {
+									className: "font-medium",
+									children: e.message
+								}), /* @__PURE__ */ j("p", {
+									className: "text-xs text-text-secondary mt-1",
+									children: E(e.timestamp, "relative")
+								})]
+							}, e.id))
+						}) : /* @__PURE__ */ j("div", {
+							className: "text-center text-text-secondary py-4",
+							children: /* @__PURE__ */ j("p", {
+								className: "text-sm",
+								children: "No active alerts"
+							})
+						}) })] }),
+						/* @__PURE__ */ M(i, { children: [/* @__PURE__ */ j(s, { children: /* @__PURE__ */ j(o, { children: "Quick Actions" }) }), /* @__PURE__ */ M(a, {
+							className: "space-y-2",
+							children: [
+								/* @__PURE__ */ M(p, {
+									variant: "outline",
+									className: "w-full",
+									onClick: () => J("orders/new"),
+									children: [/* @__PURE__ */ j(_, { size: 16 }), "Create Order"]
+								}),
+								/* @__PURE__ */ M(p, {
+									variant: "outline",
+									className: "w-full",
+									onClick: () => J("routes"),
+									children: [/* @__PURE__ */ j(h, { size: 16 }), "Manage Routes"]
+								}),
+								/* @__PURE__ */ M(p, {
+									variant: "outline",
+									className: "w-full",
+									onClick: () => J("fleet"),
+									children: [/* @__PURE__ */ j(y, { size: 16 }), "Fleet Status"]
+								})
+							]
+						})] })
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { L as default };