@burdenoff/microfe-movethewheels 2026.830.5 → 2026.920.1

package/dist/pages/VehicleDetailsPage.js

@@ -14,14 +14,18 @@ import { Avatar as m, AvatarFallback as h, Button as g, Card as _, CardContent a
 import { ErrorState as k, LoadingState as A, PageLayout as j } from "../components/PageLayout.js";
 import { StatusBadge as M, VehicleTypeBadge as N } from "../components/StatusBadge.js";
 import { FormError as P } from "../components/FormError.js";
-import { formatDate as F, getInitials as I } from "../utils/formatters.js";
-import { DocumentsCard as L } from "../components/DocumentsCard.js";
-import { useEffect as R, useState as z } from "react";
-import { useLocation as B, useParams as V } from "react-router";
-import { jsx as H, jsxs as U } from "react/jsx-runtime";
-import { EmphasisPanel as W, NextSteps as G, PagePurpose as K } from "@burdenoff/fe-libs/ui";
+import { Notice as F, useNotice as I } from "../components/Notice.js";
+import { formatDate as L, getInitials as R } from "../utils/formatters.js";
+import { DocumentsCard as z } from "../components/DocumentsCard.js";
+import { useRecordVehicleService as B } from "../hooks/useFleetIntelligence.js";
+import { VehicleServiceCard as V } from "../components/VehicleServiceCard.js";
+import { useEffect as H, useState as U } from "react";
+import { useLocation as W, useParams as ee } from "react-router";
+import { jsx as G, jsxs as K } from "react/jsx-runtime";
+import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { EmphasisPanel as q, NextSteps as ne, PagePurpose as J } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/VehicleDetailsPage.tsx
-var q = [
+var Y = [
 	{
 		value: "TRUCK",
 		label: "Truck"
@@ -55,15 +59,15 @@ var q = [
 		label: "Drone"
 	}
 ];
-function J({ editId: t }) {
-	let { basePath: n, navigate: r } = u(), { createVehicle: i, updateVehicle: o } = d(), { vehicle: c } = f(t), p = !!t, [m, h] = z({
+function X({ editId: t }) {
+	let { basePath: n, navigate: r } = u(), { createVehicle: i, updateVehicle: o } = d(), { vehicle: c } = f(t), p = !!t, [m, h] = U({
 		vehicleNumber: "",
 		type: "VAN",
 		make: "",
 		model: "",
 		licensePlate: ""
-	}), [_, v] = z(!1), [y, b] = z(null);
-	R(() => {
+	}), [_, v] = U(!1), [y, b] = U(null);
+	H(() => {
 		t && c && h({
 			vehicleNumber: c.vehicleNumber ?? "",
 			type: c.type ? c.type.toUpperCase() : "VAN",
@@ -102,49 +106,49 @@ function J({ editId: t }) {
 			console.error("Failed to create vehicle:", e), b(e instanceof Error ? e.message : "Failed to create vehicle. Please try again."), v(!1);
 		}
 	};
-	return /* @__PURE__ */ U(j, {
+	return /* @__PURE__ */ K(j, {
 		title: p ? "Edit Vehicle" : "Add Vehicle",
 		subtitle: "Register a new vehicle in your fleet",
-		icon: /* @__PURE__ */ H(s, { size: 24 }),
-		headerActions: /* @__PURE__ */ U("div", {
+		icon: /* @__PURE__ */ G(s, { size: 24 }),
+		headerActions: /* @__PURE__ */ K("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ U(g, {
+			children: [/* @__PURE__ */ K(g, {
 				variant: "outline",
 				onClick: C,
 				disabled: _,
-				children: [/* @__PURE__ */ H(e, { size: 16 }), " Cancel"]
-			}), /* @__PURE__ */ U(g, {
+				children: [/* @__PURE__ */ G(e, { size: 16 }), " Cancel"]
+			}), /* @__PURE__ */ K(g, {
 				onClick: k,
 				disabled: _,
 				children: [
-					/* @__PURE__ */ H(a, { size: 16 }),
+					/* @__PURE__ */ G(a, { size: 16 }),
 					" ",
 					p ? _ ? "Saving..." : "Save Changes" : _ ? "Saving..." : "Add Vehicle"
 				]
 			})]
 		}),
-		children: [/* @__PURE__ */ H(K, {
-			icon: /* @__PURE__ */ H(s, { size: 18 }),
+		children: [/* @__PURE__ */ G(J, {
+			icon: /* @__PURE__ */ G(s, { size: 18 }),
 			children: "Add a vehicle so it can be assigned to deliveries and routes. Give it a fleet number and type to start — make, model and plate help identify it on the road."
-		}), /* @__PURE__ */ U("form", {
+		}), /* @__PURE__ */ K("form", {
 			onSubmit: k,
 			className: "max-w-2xl space-y-6",
-			children: [/* @__PURE__ */ H(P, { message: y }), /* @__PURE__ */ U(W, { children: [/* @__PURE__ */ H("h2", {
+			children: [/* @__PURE__ */ G(P, { message: y }), /* @__PURE__ */ K(q, { children: [/* @__PURE__ */ G("h2", {
 				className: "text-base font-semibold text-text-primary mb-4",
 				children: "Vehicle Details"
-			}), /* @__PURE__ */ U("div", {
+			}), /* @__PURE__ */ K("div", {
 				className: "space-y-4",
-				children: [/* @__PURE__ */ U("div", {
+				children: [/* @__PURE__ */ K("div", {
 					className: "grid grid-cols-1 md:grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ U("div", {
+					children: [/* @__PURE__ */ K("div", {
 						className: "space-y-2",
-						children: [/* @__PURE__ */ U(S, {
+						children: [/* @__PURE__ */ K(S, {
 							htmlFor: "vehicleNumber",
-							children: ["Vehicle Number ", /* @__PURE__ */ H("span", {
+							children: ["Vehicle Number ", /* @__PURE__ */ G("span", {
 								className: "text-status-error-text",
 								children: "*"
 							})]
-						}), /* @__PURE__ */ H(x, {
+						}), /* @__PURE__ */ G(x, {
 							id: "vehicleNumber",
 							value: m.vehicleNumber,
 							onChange: (e) => h((t) => ({
@@ -154,38 +158,38 @@ function J({ editId: t }) {
 							placeholder: "MTW-001",
 							required: !0
 						})]
-					}), /* @__PURE__ */ U("div", {
+					}), /* @__PURE__ */ K("div", {
 						className: "space-y-2",
-						children: [/* @__PURE__ */ U(S, {
+						children: [/* @__PURE__ */ K(S, {
 							htmlFor: "type",
-							children: ["Type ", /* @__PURE__ */ H("span", {
+							children: ["Type ", /* @__PURE__ */ G("span", {
 								className: "text-status-error-text",
 								children: "*"
 							})]
-						}), /* @__PURE__ */ U(w, {
+						}), /* @__PURE__ */ K(w, {
 							value: m.type,
 							onValueChange: (e) => h((t) => ({
 								...t,
 								type: e
 							})),
-							children: [/* @__PURE__ */ H(D, {
+							children: [/* @__PURE__ */ G(D, {
 								id: "type",
-								children: /* @__PURE__ */ H(O, {})
-							}), /* @__PURE__ */ H(T, { children: q.map((e) => /* @__PURE__ */ H(E, {
+								children: /* @__PURE__ */ G(O, {})
+							}), /* @__PURE__ */ G(T, { children: Y.map((e) => /* @__PURE__ */ G(E, {
 								value: e.value,
 								children: e.label
 							}, e.value)) })]
 						})]
 					})]
-				}), /* @__PURE__ */ U("div", {
+				}), /* @__PURE__ */ K("div", {
 					className: "grid grid-cols-1 md:grid-cols-3 gap-4",
 					children: [
-						/* @__PURE__ */ U("div", {
+						/* @__PURE__ */ K("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ H(S, {
+							children: [/* @__PURE__ */ G(S, {
 								htmlFor: "make",
 								children: "Make"
-							}), /* @__PURE__ */ H(x, {
+							}), /* @__PURE__ */ G(x, {
 								id: "make",
 								value: m.make,
 								onChange: (e) => h((t) => ({
@@ -195,12 +199,12 @@ function J({ editId: t }) {
 								placeholder: "Ford"
 							})]
 						}),
-						/* @__PURE__ */ U("div", {
+						/* @__PURE__ */ K("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ H(S, {
+							children: [/* @__PURE__ */ G(S, {
 								htmlFor: "model",
 								children: "Model"
-							}), /* @__PURE__ */ H(x, {
+							}), /* @__PURE__ */ G(x, {
 								id: "model",
 								value: m.model,
 								onChange: (e) => h((t) => ({
@@ -210,12 +214,12 @@ function J({ editId: t }) {
 								placeholder: "Transit"
 							})]
 						}),
-						/* @__PURE__ */ U("div", {
+						/* @__PURE__ */ K("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ H(S, {
+							children: [/* @__PURE__ */ G(S, {
 								htmlFor: "licensePlate",
 								children: "License Plate"
-							}), /* @__PURE__ */ H(x, {
+							}), /* @__PURE__ */ G(x, {
 								id: "licensePlate",
 								value: m.licensePlate,
 								onChange: (e) => h((t) => ({
@@ -231,231 +235,238 @@ function J({ editId: t }) {
 		})]
 	});
 }
-function Y() {
-	let { vehicleId: a } = V(), { basePath: d, navigate: x } = u(), { vehicle: S, isLoading: w, error: T, refetch: E } = f(a), D = B().pathname.endsWith("/edit"), { drivers: O, isLoading: P, error: R } = p(D ? void 0 : a), z = () => x?.(l(d, "fleet/vehicles")), q = (e) => x?.(l(d, e));
-	return a ? D ? /* @__PURE__ */ H(J, { editId: a }) : w ? /* @__PURE__ */ H(A, { message: "Loading vehicle details..." }) : T || !S ? /* @__PURE__ */ H(k, {
+function Z() {
+	let { vehicleId: a } = ee(), { basePath: d, navigate: x } = u(), { vehicle: S, isLoading: w, error: T, refetch: E } = f(a), D = B(), { message: O, notify: P } = I(), { t: H } = te(), U = (e, t) => {
+		let n = H(e);
+		return n === e ? t : n;
+	}, Y = W().pathname.endsWith("/edit"), { drivers: Z, isLoading: re, error: Q } = p(Y ? void 0 : a), ie = () => x?.(l(d, "fleet/vehicles")), $ = (e) => x?.(l(d, e));
+	return a ? Y ? /* @__PURE__ */ G(X, { editId: a }) : w ? /* @__PURE__ */ G(A, { message: "Loading vehicle details..." }) : T || !S ? /* @__PURE__ */ G(k, {
 		title: "Vehicle not found",
 		onRetry: E
-	}) : /* @__PURE__ */ U(j, {
+	}) : /* @__PURE__ */ K(j, {
 		title: S.vehicleNumber,
 		subtitle: `${S.make} ${S.model} (${S.year})`,
-		icon: /* @__PURE__ */ H(s, { size: 24 }),
-		headerActions: /* @__PURE__ */ U("div", {
+		icon: /* @__PURE__ */ G(s, { size: 24 }),
+		headerActions: /* @__PURE__ */ K("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ U(g, {
+			children: [/* @__PURE__ */ K(g, {
 				variant: "outline",
-				onClick: z,
-				children: [/* @__PURE__ */ H(e, { size: 16 }), " Back"]
-			}), /* @__PURE__ */ U(g, {
+				onClick: ie,
+				children: [/* @__PURE__ */ G(e, { size: 16 }), " Back"]
+			}), /* @__PURE__ */ K(g, {
 				onClick: () => x?.(l(d, "fleet/vehicles/" + a + "/edit")),
-				children: [/* @__PURE__ */ H(o, { size: 16 }), " Edit"]
+				children: [/* @__PURE__ */ G(o, { size: 16 }), " Edit"]
 			})]
 		}),
-		headerContent: /* @__PURE__ */ U("div", {
+		headerContent: /* @__PURE__ */ K("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ H(M, {
+			children: [/* @__PURE__ */ G(M, {
 				status: S.status,
 				type: "vehicle"
-			}), /* @__PURE__ */ H(N, { type: S.type })]
+			}), /* @__PURE__ */ G(N, { type: S.type })]
 		}),
 		children: [
-			/* @__PURE__ */ H(K, {
-				icon: /* @__PURE__ */ H(s, { size: 18 }),
+			/* @__PURE__ */ G(J, {
+				icon: /* @__PURE__ */ G(s, { size: 18 }),
 				children: "The full record for this vehicle — specs, capacity, fuel and mileage, who is driving it and where it is right now. Use it to confirm a vehicle is fuelled, crewed and the right size before dispatching it on a delivery."
 			}),
-			/* @__PURE__ */ H(G, {
+			/* @__PURE__ */ G(ne, {
 				storageKey: "movethewheels-vehicle-details",
 				steps: [{
 					id: "assign",
 					label: "Assign to a delivery",
 					description: "Put this vehicle on an order that fits its capacity.",
-					icon: /* @__PURE__ */ H(r, { size: 16 }),
-					onClick: () => q("orders")
+					icon: /* @__PURE__ */ G(r, { size: 16 }),
+					onClick: () => $("orders")
 				}, {
 					id: "driver",
-					label: O.length > 0 ? "Review the assigned driver" : "Assign a driver",
+					label: Z.length > 0 ? "Review the assigned driver" : "Assign a driver",
 					description: "A vehicle needs a driver before it can be dispatched.",
-					icon: /* @__PURE__ */ H(c, { size: 16 }),
-					done: O.length > 0,
-					onClick: () => O[0] ? q(`fleet/drivers/${O[0].id}`) : q("fleet/drivers")
+					icon: /* @__PURE__ */ G(c, { size: 16 }),
+					done: Z.length > 0,
+					onClick: () => Z[0] ? $(`fleet/drivers/${Z[0].id}`) : $("fleet/drivers")
 				}]
 			}),
-			/* @__PURE__ */ U("div", {
+			O && /* @__PURE__ */ G("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ G(F, { message: O })
+			}),
+			/* @__PURE__ */ K("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ U("div", {
+				children: [/* @__PURE__ */ K("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						/* @__PURE__ */ U(W, { children: [/* @__PURE__ */ H("h2", {
+						/* @__PURE__ */ K(q, { children: [/* @__PURE__ */ G("h2", {
 							className: "text-base font-semibold text-text-primary mb-4",
 							children: "Vehicle Information"
-						}), /* @__PURE__ */ U("div", {
+						}), /* @__PURE__ */ K("div", {
 							className: "grid grid-cols-2 md:grid-cols-3 gap-6",
 							children: [
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Type"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "font-medium capitalize",
 									children: S.type
 								})] }),
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Make"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "font-medium",
 									children: S.make || "—"
 								})] }),
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Model"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "font-medium",
 									children: S.model || "—"
 								})] }),
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Year"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "font-medium",
 									children: S.year
 								})] }),
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "License Plate"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "font-medium",
 									children: S.licensePlate || "—"
 								})] }),
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Ownership"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "font-medium capitalize",
 									children: S.ownershipType || "—"
 								})] })
 							]
 						})] }),
-						/* @__PURE__ */ U(_, { children: [/* @__PURE__ */ H(y, { children: /* @__PURE__ */ H(b, { children: "Capacity" }) }), /* @__PURE__ */ H(v, { children: /* @__PURE__ */ U("div", {
+						/* @__PURE__ */ K(_, { children: [/* @__PURE__ */ G(y, { children: /* @__PURE__ */ G(b, { children: "Capacity" }) }), /* @__PURE__ */ G(v, { children: /* @__PURE__ */ K("div", {
 							className: "grid grid-cols-1 sm:grid-cols-3 gap-6",
 							children: [
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Weight"
-								}), /* @__PURE__ */ U("p", {
+								}), /* @__PURE__ */ K("p", {
 									className: "text-2xl font-bold",
-									children: [S.capacity.weight, /* @__PURE__ */ H("span", {
+									children: [S.capacity.weight, /* @__PURE__ */ G("span", {
 										className: "text-sm font-normal",
 										children: " kg"
 									})]
 								})] }),
-								/* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								/* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Volume"
-								}), /* @__PURE__ */ U("p", {
+								}), /* @__PURE__ */ K("p", {
 									className: "text-2xl font-bold",
-									children: [S.capacity.volume, /* @__PURE__ */ H("span", {
+									children: [S.capacity.volume, /* @__PURE__ */ G("span", {
 										className: "text-sm font-normal",
 										children: " m³"
 									})]
 								})] }),
-								S.capacity.pallets && /* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								S.capacity.pallets && /* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "Pallets"
-								}), /* @__PURE__ */ H("p", {
+								}), /* @__PURE__ */ G("p", {
 									className: "text-2xl font-bold",
 									children: S.capacity.pallets
 								})] })
 							]
 						}) })] }),
-						/* @__PURE__ */ H(L, {
+						/* @__PURE__ */ G(z, {
 							entityType: "vehicle",
 							entityId: S.id
 						})
 					]
-				}), /* @__PURE__ */ U("div", {
+				}), /* @__PURE__ */ K("div", {
 					className: "space-y-6",
 					children: [
-						/* @__PURE__ */ U(_, { children: [/* @__PURE__ */ H(y, { children: /* @__PURE__ */ U(b, {
+						/* @__PURE__ */ K(_, { children: [/* @__PURE__ */ G(y, { children: /* @__PURE__ */ K(b, {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ H(t, { size: 18 }), " Fuel & Mileage"]
-						}) }), /* @__PURE__ */ U(v, {
+							children: [/* @__PURE__ */ G(t, { size: 18 }), " Fuel & Mileage"]
+						}) }), /* @__PURE__ */ K(v, {
 							className: "space-y-4",
-							children: [S.fuelLevel !== void 0 && /* @__PURE__ */ U("div", { children: [/* @__PURE__ */ U("div", {
+							children: [S.fuelLevel !== void 0 && /* @__PURE__ */ K("div", { children: [/* @__PURE__ */ K("div", {
 								className: "flex justify-between text-sm mb-2",
-								children: [/* @__PURE__ */ H("span", { children: "Fuel Level" }), /* @__PURE__ */ U("span", { children: [S.fuelLevel, "%"] })]
-							}), /* @__PURE__ */ H(C, { value: S.fuelLevel })] }), S.mileage !== void 0 && /* @__PURE__ */ U("div", { children: [/* @__PURE__ */ H("p", {
+								children: [/* @__PURE__ */ G("span", { children: "Fuel Level" }), /* @__PURE__ */ K("span", { children: [S.fuelLevel, "%"] })]
+							}), /* @__PURE__ */ G(C, { value: S.fuelLevel })] }), S.mileage !== void 0 && /* @__PURE__ */ K("div", { children: [/* @__PURE__ */ G("p", {
 								className: "text-sm text-text-secondary",
 								children: "Total Mileage"
-							}), /* @__PURE__ */ U("p", {
+							}), /* @__PURE__ */ K("p", {
 								className: "text-2xl font-bold",
 								children: [
 									S.mileage.toLocaleString(),
 									" ",
-									/* @__PURE__ */ H("span", {
+									/* @__PURE__ */ G("span", {
 										className: "text-sm font-normal",
 										children: "miles"
 									})
 								]
 							})] })]
 						})] }),
-						/* @__PURE__ */ U(_, { children: [/* @__PURE__ */ H(y, { children: /* @__PURE__ */ U(b, {
+						/* @__PURE__ */ K(_, { children: [/* @__PURE__ */ G(y, { children: /* @__PURE__ */ K(b, {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ H(c, { size: 18 }), " Assigned Driver"]
-						}) }), /* @__PURE__ */ H(v, {
+							children: [/* @__PURE__ */ G(c, { size: 18 }), " Assigned Driver"]
+						}) }), /* @__PURE__ */ G(v, {
 							className: "space-y-4",
-							children: P ? /* @__PURE__ */ H("p", {
+							children: re ? /* @__PURE__ */ G("p", {
 								className: "text-sm text-text-secondary",
 								children: "Loading assignment…"
-							}) : R ? /* @__PURE__ */ H("p", {
+							}) : Q ? /* @__PURE__ */ G("p", {
 								className: "text-sm text-status-error-text",
-								children: R.message
-							}) : O.length === 0 ? /* @__PURE__ */ U("div", {
+								children: Q.message
+							}) : Z.length === 0 ? /* @__PURE__ */ K("div", {
 								className: "space-y-3",
-								children: [/* @__PURE__ */ H("p", {
+								children: [/* @__PURE__ */ G("p", {
 									className: "text-sm text-text-secondary",
 									children: "No driver is assigned to this vehicle yet."
-								}), /* @__PURE__ */ H(g, {
+								}), /* @__PURE__ */ G(g, {
 									variant: "outline",
 									size: "sm",
-									onClick: () => q("fleet/drivers"),
+									onClick: () => $("fleet/drivers"),
 									children: "Assign from the roster"
 								})]
-							}) : O.map((e) => /* @__PURE__ */ U("div", {
+							}) : Z.map((e) => /* @__PURE__ */ K("div", {
 								role: "button",
 								tabIndex: 0,
 								className: "flex w-full items-start gap-3 rounded-lg p-2 text-left hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg",
-								onClick: () => q(`fleet/drivers/${e.id}`),
+								onClick: () => $(`fleet/drivers/${e.id}`),
 								onKeyDown: (t) => {
-									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), q(`fleet/drivers/${e.id}`));
+									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), $(`fleet/drivers/${e.id}`));
 								},
-								children: [/* @__PURE__ */ H(m, { children: /* @__PURE__ */ H(h, { children: I(e.fullName) }) }), /* @__PURE__ */ U("div", {
+								children: [/* @__PURE__ */ G(m, { children: /* @__PURE__ */ G(h, { children: R(e.fullName) }) }), /* @__PURE__ */ K("div", {
 									className: "min-w-0 space-y-1",
 									children: [
-										/* @__PURE__ */ H("p", {
+										/* @__PURE__ */ G("p", {
 											className: "font-medium",
 											children: e.fullName
 										}),
-										/* @__PURE__ */ H("p", {
+										/* @__PURE__ */ G("p", {
 											className: "text-xs text-text-secondary",
 											children: e.employeeId
 										}),
-										/* @__PURE__ */ H(M, {
+										/* @__PURE__ */ G(M, {
 											status: e.status,
 											type: "driver",
 											size: "sm"
 										}),
-										e.email && /* @__PURE__ */ U("p", {
+										e.email && /* @__PURE__ */ K("p", {
 											className: "flex items-center gap-1.5 truncate text-sm text-text-secondary",
 											children: [
-												/* @__PURE__ */ H(n, { size: 13 }),
+												/* @__PURE__ */ G(n, { size: 13 }),
 												" ",
 												e.email
 											]
 										}),
-										e.phone && /* @__PURE__ */ U("p", {
+										e.phone && /* @__PURE__ */ K("p", {
 											className: "flex items-center gap-1.5 text-sm text-text-secondary",
 											children: [
-												/* @__PURE__ */ H(i, { size: 13 }),
+												/* @__PURE__ */ G(i, { size: 13 }),
 												" ",
 												e.phone
 											]
@@ -464,21 +475,28 @@ function Y() {
 								})]
 							}, e.id))
 						})] }),
-						S.currentLocation && /* @__PURE__ */ U(_, { children: [/* @__PURE__ */ H(y, { children: /* @__PURE__ */ U(b, {
+						/* @__PURE__ */ G(V, {
+							vehicle: S,
+							t: U,
+							onRecord: async (e) => {
+								await D(S.id, e), P(U("movethewheels.vehicles.service.saved", "Service recorded.")), E();
+							}
+						}),
+						S.currentLocation && /* @__PURE__ */ K(_, { children: [/* @__PURE__ */ G(y, { children: /* @__PURE__ */ K(b, {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ H(r, { size: 18 }), " Current Location"]
-						}) }), /* @__PURE__ */ U(v, { children: [/* @__PURE__ */ H("p", {
+							children: [/* @__PURE__ */ G(r, { size: 18 }), " Current Location"]
+						}) }), /* @__PURE__ */ K(v, { children: [/* @__PURE__ */ G("p", {
 							className: "text-sm",
 							children: S.currentLocation.address || "Location updating..."
-						}), /* @__PURE__ */ U("p", {
+						}), /* @__PURE__ */ K("p", {
 							className: "text-xs text-text-secondary mt-1",
-							children: ["Updated ", F(S.currentLocation.timestamp || /* @__PURE__ */ new Date(), "relative")]
+							children: ["Updated ", L(S.currentLocation.timestamp || /* @__PURE__ */ new Date(), "relative")]
 						})] })] })
 					]
 				})]
 			})
 		]
-	}) : /* @__PURE__ */ H(J, {});
+	}) : /* @__PURE__ */ G(X, {});
 }
 //#endregion
-export { Y as default };
+export { Z as default };

package/dist/utils/graphqlClient.js

@@ -37,17 +37,25 @@ async function f(t, n, r) {
 	});
 	await u();
 	try {
-		return await p(i, a, o);
+		return await m(i, a, o);
 	} finally {
 		d();
 	}
 }
-async function p(e, s, c) {
+async function p(e) {
+	try {
+		let t = ((await e.json()).errors ?? []).map((e) => e.message).filter((e) => typeof e == "string" && e.length > 0);
+		return t.length > 0 ? t.join("; ") : null;
+	} catch {
+		return null;
+	}
+}
+async function m(e, s, c) {
 	let l = /* @__PURE__ */ Error("GraphQL request failed");
 	for (let u = 0; u <= t; u += 1) {
 		let d = u < t;
 		u > 0 && await o(Math.min(250 * 2 ** (u - 1), 2e3) + Math.floor(Math.random() * 150));
-		let f = new AbortController(), p = setTimeout(() => f.abort(), n);
+		let f = new AbortController(), m = setTimeout(() => f.abort(), n);
 		try {
 			let t = await fetch(e, {
 				method: "POST",
@@ -56,7 +64,8 @@ async function p(e, s, c) {
 				signal: f.signal
 			});
 			if (!t.ok) {
-				if (l = /* @__PURE__ */ Error(`GraphQL request failed with status ${t.status}`), d && i(t.status)) continue;
+				let e = i(t.status) ? null : await p(t);
+				if (l = Error(e ?? `GraphQL request failed with status ${t.status}`), d && i(t.status)) continue;
 				throw l;
 			}
 			let n = await t.json();
@@ -75,7 +84,7 @@ async function p(e, s, c) {
 			if (l = !t && e instanceof Error ? e : Error(i), d && (t || r(i) || e instanceof TypeError)) continue;
 			throw l;
 		} finally {
-			clearTimeout(p);
+			clearTimeout(m);
 		}
 	}
 	throw l;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.830.5",
+  "version": "2026.920.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -79,6 +79,7 @@ const SettingsPage = lazy(() => import('./pages/SettingsPage'));
 const AIAssistantPage = lazy(() => import('./pages/AIAssistantPage'));
 const DeliveryCapturePage = lazy(() => import('./pages/DeliveryCapturePage'));
 const MultiModalShipmentPage = lazy(() => import('./pages/MultiModalShipmentPage'));
+const ShippingRatesPage = lazy(() => import('./pages/ShippingRatesPage'));
 
 export function MoveTheWheelsRoutes() {
   return (
@@ -102,6 +103,7 @@ export function MoveTheWheelsRoutes() {
 
         {/* Multi-modal freight execution (BOFF-4398) */}
         <Route path="shipments/multi-modal" element={<MultiModalShipmentPage />} />
+        <Route path="shipments/rates" element={<ShippingRatesPage />} />
 
         {/* Fleet */}
         <Route path="fleet" element={<FleetPage />} />