@burdenoff/microfe-movethewheels 2026.1030.1 → 2026.1031.2

package/dist/pages/LiveTrackingPage.js

@@ -2,142 +2,147 @@ import { List as e } from "../node_modules/lucide-react/dist/esm/icons/list.js";
 import { MapPin as t } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
 import { Map as n } from "../node_modules/lucide-react/dist/esm/icons/map.js";
 import { Package as r } from "../node_modules/lucide-react/dist/esm/icons/package.js";
-import { RefreshCw as i } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
-import { Truck as a } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
-import { joinPath as o } from "../utils/navigation.js";
-import { useMoveTheWheels as s } from "../providers/MoveTheWheelsProvider.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 g, Tabs as _, TabsList as v, TabsTrigger as y } from "../components/ui.js";
-import { EmptyState as b, PageLayout as x } from "../components/PageLayout.js";
-import { MetricCard as S, MetricGrid as C } from "../components/MetricCard.js";
-import { LogisticsMap as w } from "../components/maps/LogisticsMap.js";
+import { RefreshCw as ee } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+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 { LogisticsMap as S } from "../components/maps/LogisticsMap.js";
 import "../components/maps/index.js";
-import { StatusBadge as T } from "../components/StatusBadge.js";
-import { formatDate as E } from "../utils/formatters.js";
-import { deliveryMarkerStatus as D, firstRealLatLng as O } from "../utils/mapMarkers.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";
+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";
 //#region src/movethewheels/pages/LiveTrackingPage.tsx
-function I() {
-	let { basePath: I, navigate: L } = s(), { activeDeliveries: R, isLoading: z, refetch: B } = c(), { unacknowledgedAlerts: V } = l(), [H, U] = A("map"), [W, G] = A(null), [K, q] = A("all"), J = (e) => {
-		L && L(o(I, e));
-	}, Y = W ? R.find((e) => e.order?.id === W) : null, X = k(() => R.filter((e) => {
+function P() {
+	let { basePath: P, navigate: F } = o(), { activeDeliveries: I, isLoading: L, refetch: R } = s(), { t: z } = M(), 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) => {
+		F && F(a(P, e));
+	}, Z = K ? I.find((e) => e.order?.id === K) : null, Q = O(() => I.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) => {
+		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) => {
 		if (!e.order) return [];
-		let t = O(e.vehicle?.currentLocation, e.driver?.currentLocation, e.tracking?.currentLocation);
+		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: D(e.order.status),
+			status: E(e.order.status),
 			sublabel: e.driver?.fullName || e.vehicle?.vehicleNumber || e.tracking?.currentLocation?.address || void 0
 		}] : [];
-	}), [X]), Q = Z.length, $ = [
+	}), [Q]), ie = $.length, ae = [
 		{
 			value: "all",
 			label: "All",
-			count: R.length
+			count: I.length
 		},
 		{
 			value: "in_transit",
 			label: "In transit",
-			count: R.filter((e) => e.order?.status === "in_transit").length
+			count: I.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
+			count: I.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
+			count: I.filter((e) => e.order?.status !== "in_transit" && e.order?.status !== "out_for_delivery").length
 		}
 	];
-	return /* @__PURE__ */ M(x, {
+	return /* @__PURE__ */ j(b, {
 		title: "Live Tracking",
-		subtitle: `${R.length} active deliveries`,
-		icon: /* @__PURE__ */ j(t, { size: 24 }),
-		headerActions: /* @__PURE__ */ M("div", {
+		subtitle: `${I.length} active deliveries`,
+		icon: /* @__PURE__ */ A(t, { size: 24 }),
+		headerActions: /* @__PURE__ */ j("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ M(d, {
+			children: [/* @__PURE__ */ j(u, {
 				variant: "outline",
-				onClick: B,
-				disabled: z,
-				children: [/* @__PURE__ */ j(i, {
+				onClick: R,
+				disabled: L,
+				children: [/* @__PURE__ */ A(ee, {
 					size: 16,
-					className: z ? "animate-spin" : ""
+					className: L ? "animate-spin" : ""
 				}), "Refresh"]
-			}), /* @__PURE__ */ j(_, {
-				value: H,
-				onValueChange: (e) => U(e),
-				children: /* @__PURE__ */ M(v, { children: [/* @__PURE__ */ j(y, {
+			}), /* @__PURE__ */ A(g, {
+				value: W,
+				onValueChange: (e) => G(e),
+				children: /* @__PURE__ */ j(_, { children: [/* @__PURE__ */ A(v, {
 					value: "map",
-					children: /* @__PURE__ */ j(n, { size: 16 })
-				}), /* @__PURE__ */ j(y, {
+					children: /* @__PURE__ */ A(n, { size: 16 })
+				}), /* @__PURE__ */ A(v, {
 					value: "list",
-					children: /* @__PURE__ */ j(e, { size: 16 })
+					children: /* @__PURE__ */ A(e, { size: 16 })
 				})] })
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ j(F, {
-				icon: /* @__PURE__ */ j(t, { size: 18 }),
+			/* @__PURE__ */ A(re, {
+				icon: /* @__PURE__ */ A(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__ */ j(P, {
+			/* @__PURE__ */ A(ne, {
 				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(e, { size: 16 }),
-						onClick: () => U("list")
+						icon: /* @__PURE__ */ A(e, { size: 16 }),
+						onClick: () => G("list")
 					},
 					{
 						id: "alerts",
 						label: "Clear outstanding alerts",
 						description: "Review delays and exceptions that need attention.",
-						icon: /* @__PURE__ */ j(a, { size: 16 }),
+						icon: /* @__PURE__ */ A(i, { size: 16 }),
 						done: V.length === 0,
-						onClick: () => U("list")
+						onClick: () => G("list")
 					},
 					{
 						id: "new-order",
 						label: "Create another order",
 						description: "Add a new delivery to the pipeline.",
-						icon: /* @__PURE__ */ j(r, { size: 16 }),
-						onClick: () => J("orders/new")
+						icon: /* @__PURE__ */ A(r, { size: 16 }),
+						onClick: () => X("orders/new")
 					}
 				]
 			}),
-			/* @__PURE__ */ M(C, {
+			/* @__PURE__ */ j(te, {
 				columns: 4,
 				children: [
-					/* @__PURE__ */ j(S, {
+					/* @__PURE__ */ A(x, {
 						size: "sm",
 						label: "Active Deliveries",
-						value: R.length,
-						icon: /* @__PURE__ */ j(a, { size: 18 })
+						value: I.length,
+						icon: /* @__PURE__ */ A(i, { size: 18 })
 					}),
-					/* @__PURE__ */ j(S, {
+					/* @__PURE__ */ A(x, {
 						size: "sm",
 						label: "In Transit",
-						value: R.filter((e) => e.order?.status === "in_transit").length,
-						icon: /* @__PURE__ */ j(r, { size: 18 })
+						value: I.filter((e) => e.order?.status === "in_transit").length,
+						icon: /* @__PURE__ */ A(r, { size: 18 })
 					}),
-					/* @__PURE__ */ j(S, {
+					/* @__PURE__ */ A(x, {
 						size: "sm",
 						label: "Out for Delivery",
-						value: R.filter((e) => e.order?.status === "out_for_delivery").length,
-						icon: /* @__PURE__ */ j(t, { size: 18 })
+						value: I.filter((e) => e.order?.status === "out_for_delivery").length,
+						icon: /* @__PURE__ */ A(t, { size: 18 })
 					}),
-					/* @__PURE__ */ j(S, {
+					/* @__PURE__ */ A(x, {
 						size: "sm",
 						label: "Alerts",
 						value: V.length,
@@ -145,92 +150,92 @@ function I() {
 					})
 				]
 			}),
-			/* @__PURE__ */ M("div", {
+			/* @__PURE__ */ j("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ j("div", {
+				children: [/* @__PURE__ */ A("div", {
 					className: "lg:col-span-2",
-					children: H === "map" ? /* @__PURE__ */ j(f, {
+					children: W === "map" ? /* @__PURE__ */ A(d, {
 						className: "overflow-hidden",
-						children: /* @__PURE__ */ M(p, {
+						children: /* @__PURE__ */ j(f, {
 							className: "p-0",
-							children: [/* @__PURE__ */ M("div", {
+							children: [/* @__PURE__ */ j("div", {
 								className: "flex flex-wrap items-center gap-2 border-b border-border-seam p-3",
-								children: [$.map((e) => /* @__PURE__ */ M("button", {
+								children: [ae.map((e) => /* @__PURE__ */ j("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", {
+									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", {
 										className: "tabular-nums opacity-80",
 										children: e.count
 									})]
-								}, e.value)), /* @__PURE__ */ M("span", {
+								}, e.value)), /* @__PURE__ */ j("span", {
 									className: "ml-auto text-xs text-text-secondary",
 									children: [
-										Q,
+										ie,
 										" of ",
-										X.length,
+										Q.length,
 										" located"
 									]
 								})]
-							}), /* @__PURE__ */ j(w, {
-								markers: Z,
+							}), /* @__PURE__ */ A(S, {
+								markers: $,
 								height: 560,
-								emptyMessage: X.length === 0 ? "No active deliveries to plot" : "Awaiting live GPS positions for these deliveries"
+								emptyMessage: Q.length === 0 ? "No active deliveries to plot" : "Awaiting live GPS positions for these deliveries"
 							})]
 						})
-					}) : /* @__PURE__ */ M(f, { children: [/* @__PURE__ */ j(m, { children: /* @__PURE__ */ j(h, { children: "Active Deliveries" }) }), /* @__PURE__ */ j(p, {
+					}) : /* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(p, { children: /* @__PURE__ */ A(m, { children: "Active Deliveries" }) }), /* @__PURE__ */ A(f, {
 						className: "p-0",
-						children: /* @__PURE__ */ j(g, {
+						children: /* @__PURE__ */ A(h, {
 							className: "h-[550px]",
-							children: /* @__PURE__ */ M("div", {
+							children: /* @__PURE__ */ j("div", {
 								className: "divide-y",
-								children: [X.map((e) => e.order ? /* @__PURE__ */ j("div", {
+								children: [Q.map((e) => e.order ? /* @__PURE__ */ A("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),
+									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 ${K === e.order.id ? "bg-bg-sunken/50" : ""}`,
+									onClick: () => q(e.order.id),
 									onKeyDown: (t) => {
-										(t.key === "Enter" || t.key === " ") && e.order && (t.preventDefault(), G(e.order.id));
+										(t.key === "Enter" || t.key === " ") && e.order && (t.preventDefault(), q(e.order.id));
 									},
-									children: /* @__PURE__ */ M("div", {
+									children: /* @__PURE__ */ j("div", {
 										className: "flex items-start justify-between",
-										children: [/* @__PURE__ */ M("div", { children: [
-											/* @__PURE__ */ M("div", {
+										children: [/* @__PURE__ */ j("div", { children: [
+											/* @__PURE__ */ j("div", {
 												className: "flex items-center gap-2 mb-1",
-												children: [/* @__PURE__ */ j("span", {
+												children: [/* @__PURE__ */ A("span", {
 													className: "font-medium",
 													children: e.order.orderNumber
-												}), /* @__PURE__ */ j(T, {
+												}), /* @__PURE__ */ A(C, {
 													status: e.order.status,
 													type: "order",
 													size: "sm"
 												})]
 											}),
-											/* @__PURE__ */ j("p", {
+											/* @__PURE__ */ A("p", {
 												className: "text-sm text-text-secondary",
 												children: e.order.customerInfo.name
 											}),
-											/* @__PURE__ */ M("p", {
+											/* @__PURE__ */ j("p", {
 												className: "text-sm text-text-secondary",
 												children: [e.driver?.fullName || "Unassigned", e.vehicle && ` - ${e.vehicle.vehicleNumber}`]
 											})
-										] }), /* @__PURE__ */ M("div", {
+										] }), /* @__PURE__ */ j("div", {
 											className: "text-right",
-											children: [/* @__PURE__ */ M("p", {
+											children: [/* @__PURE__ */ j("p", {
 												className: "text-sm font-medium",
 												children: [
 													"ETA:",
 													" ",
-													e.estimatedArrival ? E(e.estimatedArrival, "time") : "N/A"
+													e.estimatedArrival ? w(e.estimatedArrival, "time") : "N/A"
 												]
-											}), /* @__PURE__ */ j("p", {
+											}), /* @__PURE__ */ A("p", {
 												className: "text-xs text-text-secondary",
 												children: e.tracking?.currentLocation?.address || "Location updating..."
 											})]
 										})]
 									})
-								}, e.order.id) : null), X.length === 0 && /* @__PURE__ */ j(b, {
+								}, e.order.id) : null), Q.length === 0 && /* @__PURE__ */ A(y, {
 									illustration: "empty-sessions",
 									title: "No active deliveries",
 									description: "When orders are dispatched they'll appear here in real time."
@@ -238,161 +243,156 @@ function I() {
 							})
 						})
 					})] })
-				}), /* @__PURE__ */ M("div", {
+				}), /* @__PURE__ */ j("div", {
 					className: "space-y-6",
 					children: [
-						Y ? /* @__PURE__ */ M(N, {
+						Z ? /* @__PURE__ */ j(N, {
 							className: "space-y-4",
-							children: [/* @__PURE__ */ M("div", {
+							children: [/* @__PURE__ */ j("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ j("h2", {
+								children: [/* @__PURE__ */ A("h2", {
 									className: "text-base font-semibold text-text-primary",
 									children: "Delivery Details"
-								}), /* @__PURE__ */ j(d, {
+								}), /* @__PURE__ */ A(u, {
 									variant: "ghost",
 									size: "sm",
-									onClick: () => G(null),
+									onClick: () => q(null),
 									children: "Clear"
 								})]
-							}), /* @__PURE__ */ M("div", {
+							}), /* @__PURE__ */ j("div", {
 								className: "space-y-4",
 								children: [
-									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 										className: "text-sm text-text-secondary",
 										children: "Order"
-									}), /* @__PURE__ */ j("p", {
+									}), /* @__PURE__ */ A("p", {
 										className: "font-medium",
-										children: Y.order?.orderNumber ?? "-"
+										children: Z.order?.orderNumber ?? "-"
 									})] }),
-									/* @__PURE__ */ M("div", { children: [
-										/* @__PURE__ */ j("p", {
+									/* @__PURE__ */ j("div", { children: [
+										/* @__PURE__ */ A("p", {
 											className: "text-sm text-text-secondary",
 											children: "Customer"
 										}),
-										/* @__PURE__ */ j("p", {
+										/* @__PURE__ */ A("p", {
 											className: "font-medium",
-											children: Y.order?.customerInfo.name ?? "-"
+											children: Z.order?.customerInfo.name ?? "-"
 										}),
-										/* @__PURE__ */ j("p", {
+										/* @__PURE__ */ A("p", {
 											className: "text-sm text-text-secondary",
-											children: Y.order?.customerInfo.phone ?? "-"
+											children: Z.order?.customerInfo.phone ?? "-"
 										})
 									] }),
-									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 										className: "text-sm text-text-secondary",
 										children: "Driver"
-									}), /* @__PURE__ */ j("p", {
+									}), /* @__PURE__ */ A("p", {
 										className: "font-medium",
-										children: Y.driver?.fullName || "Unassigned"
+										children: Z.driver?.fullName || "Unassigned"
 									})] }),
-									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 										className: "text-sm text-text-secondary",
 										children: "Vehicle"
-									}), /* @__PURE__ */ j("p", {
+									}), /* @__PURE__ */ A("p", {
 										className: "font-medium",
-										children: Y.vehicle ? `${Y.vehicle.vehicleNumber} - ${Y.vehicle.make} ${Y.vehicle.model}` : "Not assigned"
+										children: Z.vehicle ? `${Z.vehicle.vehicleNumber} - ${Z.vehicle.make} ${Z.vehicle.model}` : "Not assigned"
 									})] }),
-									/* @__PURE__ */ M("div", { children: [
-										/* @__PURE__ */ j("p", {
+									/* @__PURE__ */ j("div", { children: [
+										/* @__PURE__ */ A("p", {
 											className: "text-sm text-text-secondary",
 											children: "Current Location"
 										}),
-										/* @__PURE__ */ j("p", {
+										/* @__PURE__ */ A("p", {
 											className: "text-sm",
-											children: Y.tracking?.currentLocation?.address || "Updating..."
+											children: Z.tracking?.currentLocation?.address || "Updating..."
 										}),
 										(() => {
-											let e = O(Y.vehicle?.currentLocation, Y.driver?.currentLocation, Y.tracking?.currentLocation);
-											return e ? /* @__PURE__ */ j(w, {
+											let e = D(Z.vehicle?.currentLocation, Z.driver?.currentLocation, Z.tracking?.currentLocation);
+											return e ? /* @__PURE__ */ A(S, {
 												className: "mt-3 overflow-hidden rounded-lg border border-border-seam",
 												height: 160,
 												markers: [{
-													id: Y.order?.id ?? "selected",
+													id: Z.order?.id ?? "selected",
 													lat: e.lat,
 													lng: e.lng,
-													label: Y.order?.orderNumber ?? "Delivery",
-													status: D(Y.order?.status)
+													label: Z.order?.orderNumber ?? "Delivery",
+													status: E(Z.order?.status)
 												}]
 											}) : null;
 										})()
 									] }),
-									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+									/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
 										className: "text-sm text-text-secondary",
 										children: "Estimated Arrival"
-									}), /* @__PURE__ */ j("p", {
+									}), /* @__PURE__ */ A("p", {
 										className: "font-medium",
-										children: Y.estimatedArrival ? E(Y.estimatedArrival, "full") : "Calculating..."
+										children: Z.estimatedArrival ? w(Z.estimatedArrival, "full") : "Calculating..."
 									})] }),
-									/* @__PURE__ */ M("div", {
+									/* @__PURE__ */ j("div", {
 										className: "pt-2 space-y-2",
-										children: [/* @__PURE__ */ j(d, {
+										children: [/* @__PURE__ */ A(u, {
 											className: "w-full",
-											onClick: () => Y.order && J(`orders/${Y.order.id}`),
-											disabled: !Y.order,
+											onClick: () => Z.order && X(`orders/${Z.order.id}`),
+											disabled: !Z.order,
 											children: "View Order"
-										}), /* @__PURE__ */ j(d, {
+										}), /* @__PURE__ */ A(u, {
 											variant: "outline",
 											className: "w-full",
-											onClick: () => Y.order && J(`tracking?order=${Y.order.id}`),
-											disabled: !Y.order,
+											onClick: () => Z.order && X(`tracking?order=${Z.order.id}`),
+											disabled: !Z.order,
 											children: "Track Details"
 										})]
 									})
 								]
 							})]
-						}) : /* @__PURE__ */ j(f, { children: /* @__PURE__ */ j(p, {
+						}) : /* @__PURE__ */ A(d, { children: /* @__PURE__ */ A(f, {
 							className: "p-6",
-							children: /* @__PURE__ */ j(b, {
+							children: /* @__PURE__ */ A(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__ */ M(f, { children: [/* @__PURE__ */ j(m, { children: /* @__PURE__ */ M(h, {
+						/* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(p, { children: /* @__PURE__ */ j(m, {
 							className: "flex items-center gap-2",
-							children: ["Alerts", V.length > 0 && /* @__PURE__ */ j(u, {
+							children: [B("movethewheels.tracking.live.alerts", "Alerts"), V.length > 0 && /* @__PURE__ */ A(l, {
 								variant: "destructive",
 								children: V.length
 							})]
-						}) }), /* @__PURE__ */ j(p, { 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.timestamp ? E(e.timestamp, "relative") : "Time not recorded"
-								})]
-							}, e.id))
-						}) : /* @__PURE__ */ j("div", {
+						}) }), /* @__PURE__ */ A(f, { children: V.length > 0 ? /* @__PURE__ */ A(T, {
+							alerts: V,
+							limit: 5,
+							t: B,
+							onAcknowledge: H,
+							onOpenOrder: (e) => X(`orders/${e}`),
+							onChanged: U
+						}) : /* @__PURE__ */ A("div", {
 							className: "text-center text-text-secondary py-4",
-							children: /* @__PURE__ */ j("p", {
+							children: /* @__PURE__ */ A("p", {
 								className: "text-sm",
-								children: "No active alerts"
+								children: B("movethewheels.tracking.live.noAlerts", "No active alerts")
 							})
 						}) })] }),
-						/* @__PURE__ */ M(f, { children: [/* @__PURE__ */ j(m, { children: /* @__PURE__ */ j(h, { children: "Quick Actions" }) }), /* @__PURE__ */ M(p, {
+						/* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(p, { children: /* @__PURE__ */ A(m, { children: "Quick Actions" }) }), /* @__PURE__ */ j(f, {
 							className: "space-y-2",
 							children: [
-								/* @__PURE__ */ M(d, {
+								/* @__PURE__ */ j(u, {
 									variant: "outline",
 									className: "w-full",
-									onClick: () => J("orders/new"),
-									children: [/* @__PURE__ */ j(r, { size: 16 }), "Create Order"]
+									onClick: () => X("orders/new"),
+									children: [/* @__PURE__ */ A(r, { size: 16 }), "Create Order"]
 								}),
-								/* @__PURE__ */ M(d, {
+								/* @__PURE__ */ j(u, {
 									variant: "outline",
 									className: "w-full",
-									onClick: () => J("routes"),
-									children: [/* @__PURE__ */ j(t, { size: 16 }), "Manage Routes"]
+									onClick: () => X("routes"),
+									children: [/* @__PURE__ */ A(t, { size: 16 }), "Manage Routes"]
 								}),
-								/* @__PURE__ */ M(d, {
+								/* @__PURE__ */ j(u, {
 									variant: "outline",
 									className: "w-full",
-									onClick: () => J("fleet"),
-									children: [/* @__PURE__ */ j(a, { size: 16 }), "Fleet Status"]
+									onClick: () => X("fleet"),
+									children: [/* @__PURE__ */ A(i, { size: 16 }), "Fleet Status"]
 								})
 							]
 						})] })
@@ -403,4 +403,4 @@ function I() {
 	});
 }
 //#endregion
-export { I as default };
+export { P as default };