@burdenoff/microfe-movethewheels 2026.728.1 → 2026.731.2

package/dist/pages/MultiModalShipmentPage.js

@@ -0,0 +1,420 @@
+import { Calculator as e } from "../node_modules/lucide-react/dist/esm/icons/calculator.js";
+import { Plane as t } from "../node_modules/lucide-react/dist/esm/icons/plane.js";
+import { Plus as n } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { Ship as r } from "../node_modules/lucide-react/dist/esm/icons/ship.js";
+import { TrainFront as i } from "../node_modules/lucide-react/dist/esm/icons/train-front.js";
+import { Trash2 as ee } from "../node_modules/lucide-react/dist/esm/icons/trash-2.js";
+import { Truck as a } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { Badge as o, Button as s, Card as c, CardContent as l, CardHeader as u, CardTitle as d, Input as f, Label as p, Select as m, SelectContent as h, SelectItem as g, SelectTrigger as _, SelectValue as v, Separator as te } from "../components/ui.js";
+import { EmptyState as ne, LoadingState as y, PageLayout as b, PageSection as x } from "../components/PageLayout.js";
+import { FormError as S } from "../components/FormError.js";
+import { useMultiModalShipments as re } from "../hooks/useMultiModalShipments.js";
+import { useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { EmphasisPanel as D, PagePurpose as O } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/MultiModalShipmentPage.tsx
+var k = {
+	ROAD: a,
+	AIR: t,
+	OCEAN: r,
+	RAIL: i
+}, A = {
+	ROAD: "Road",
+	AIR: "Air",
+	OCEAN: "Ocean",
+	RAIL: "Rail"
+};
+function j(e = "ROAD") {
+	return {
+		mode: e,
+		origin: {},
+		destination: {}
+	};
+}
+function M(e, t) {
+	if (e == null) return "—";
+	try {
+		return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: t ?? "USD"
+		}).format(e);
+	} catch {
+		return `${e.toFixed(2)} ${t ?? "USD"}`;
+	}
+}
+function N() {
+	let { shipments: t, isLoading: i, error: a, calculateFreightRate: N, planMultiModalShipment: P } = re(), [F, I] = C(""), [L, R] = C(""), [z, B] = C(""), [V, H] = C([j()]), [U, W] = C({}), [G, K] = C({}), [q, J] = C(!1), [Y, X] = C(null), [Z, Q] = C(null), $ = (e, t) => {
+		H((n) => n.map((n, r) => r === e ? {
+			...n,
+			...t
+		} : n)), W((t) => ({
+			...t,
+			[e]: null
+		}));
+	}, ie = () => H((e) => [...e, j()]), ae = (e) => {
+		H((t) => t.filter((t, n) => n !== e)), W((t) => {
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, oe = async (e) => {
+		let t = V[e];
+		if (t) {
+			K((t) => ({
+				...t,
+				[e]: null
+			}));
+			try {
+				let n = await N(t);
+				W((t) => ({
+					...t,
+					[e]: n
+				}));
+			} catch (t) {
+				K((n) => ({
+					...n,
+					[e]: t instanceof Error ? t.message : "Failed to calculate rate"
+				}));
+			}
+		}
+	}, se = Object.values(U).reduce((e, t) => e + (t?.calculatedCost ?? 0), 0), ce = new Set(V.map((e) => e.mode));
+	return /* @__PURE__ */ E(b, {
+		hero: !0,
+		titleAccent: "Multi-Modal Freight",
+		title: "Multi-Modal Freight",
+		subtitle: "Plan a shipment across road, air, ocean and rail legs with real per-mode rate calculation",
+		icon: /* @__PURE__ */ T(r, { size: 24 }),
+		children: [
+			/* @__PURE__ */ T(O, {
+				icon: /* @__PURE__ */ T(r, { size: 18 }),
+				children: "Compose a single shipment from multiple real transport legs — each leg picks its own mode (road/air/ocean/rail) and gets priced with that mode's real pricing driver (air: chargeable weight; ocean: revenue-ton or per-container; rail: tonne-km; road: distance + weight). Calculate a leg's rate before booking, then plan the full multi-leg shipment in one step."
+			}),
+			/* @__PURE__ */ T(D, { children: "Live carrier booking/API integration is out of scope for this core (it needs named-carrier partnership agreements) — this plans the shipment and its legs with real calculated costs that your ops team can then execute against your chosen carriers." }),
+			/* @__PURE__ */ T(x, {
+				title: "Plan a New Multi-Modal Shipment",
+				children: /* @__PURE__ */ T(c, { children: /* @__PURE__ */ T(l, { children: /* @__PURE__ */ E("form", {
+					onSubmit: async (e) => {
+						if (e.preventDefault(), X(null), Q(null), !F.trim()) {
+							X("Shipment number is required.");
+							return;
+						}
+						if (V.length === 0) {
+							X("Add at least one transport leg.");
+							return;
+						}
+						J(!0);
+						try {
+							let e = await P({
+								shipmentNumber: F.trim(),
+								origin: { address: L },
+								destination: { address: z },
+								legs: V
+							});
+							Q(`Shipment ${e.shipmentNumber} planned with ${e.legs.length} leg(s).`), I(""), R(""), B(""), H([j()]), W({});
+						} catch (e) {
+							X(e instanceof Error ? e.message : "Failed to plan shipment");
+						} finally {
+							J(!1);
+						}
+					},
+					className: "space-y-6 pt-4",
+					children: [
+						/* @__PURE__ */ T(S, { message: Y }),
+						Z && /* @__PURE__ */ T("div", {
+							className: "rounded-lg border border-status-success-border bg-status-success-bg-subtle px-4 py-3 text-sm text-status-success-text",
+							children: Z
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+							children: [
+								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+									htmlFor: "shipmentNumber",
+									children: "Shipment Number"
+								}), /* @__PURE__ */ T(f, {
+									id: "shipmentNumber",
+									value: F,
+									onChange: (e) => I(e.target.value),
+									placeholder: "SHP-MM-0001",
+									required: !0
+								})] }),
+								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+									htmlFor: "originAddress",
+									children: "Origin"
+								}), /* @__PURE__ */ T(f, {
+									id: "originAddress",
+									value: L,
+									onChange: (e) => R(e.target.value),
+									placeholder: "Shanghai, CN"
+								})] }),
+								/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, {
+									htmlFor: "destinationAddress",
+									children: "Destination"
+								}), /* @__PURE__ */ T(f, {
+									id: "destinationAddress",
+									value: z,
+									onChange: (e) => B(e.target.value),
+									placeholder: "Los Angeles, US"
+								})] })
+							]
+						}),
+						/* @__PURE__ */ T(te, {}),
+						/* @__PURE__ */ T("div", {
+							className: "space-y-4",
+							children: V.map((t, n) => {
+								let r = k[t.mode], i = U[n], a = G[n];
+								return /* @__PURE__ */ E(c, {
+									className: "border-border-subtle",
+									children: [/* @__PURE__ */ E(u, {
+										className: "flex flex-row items-center justify-between",
+										children: [/* @__PURE__ */ E(d, {
+											className: "flex items-center gap-2 text-base",
+											children: [
+												/* @__PURE__ */ T(r, { size: 16 }),
+												" Leg ",
+												n + 1
+											]
+										}), V.length > 1 && /* @__PURE__ */ T(s, {
+											type: "button",
+											variant: "ghost",
+											size: "sm",
+											onClick: () => ae(n),
+											"aria-label": `Remove leg ${n + 1}`,
+											children: /* @__PURE__ */ T(ee, { size: 14 })
+										})]
+									}), /* @__PURE__ */ E(l, {
+										className: "space-y-4",
+										children: [
+											/* @__PURE__ */ E("div", {
+												className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+												children: [
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Mode" }), /* @__PURE__ */ E(m, {
+														value: t.mode,
+														onValueChange: (e) => $(n, { mode: e }),
+														children: [/* @__PURE__ */ T(_, { children: /* @__PURE__ */ T(v, {}) }), /* @__PURE__ */ T(h, { children: [
+															"ROAD",
+															"AIR",
+															"OCEAN",
+															"RAIL"
+														].map((e) => /* @__PURE__ */ T(g, {
+															value: e,
+															children: A[e]
+														}, e)) })]
+													})] }),
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Leg Origin" }), /* @__PURE__ */ T(f, {
+														value: t.origin.address ?? "",
+														onChange: (e) => $(n, { origin: { address: e.target.value } }),
+														placeholder: "Origin port/airport/terminal"
+													})] }),
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Leg Destination" }), /* @__PURE__ */ T(f, {
+														value: t.destination.address ?? "",
+														onChange: (e) => $(n, { destination: { address: e.target.value } }),
+														placeholder: "Destination port/airport/terminal"
+													})] })
+												]
+											}),
+											(t.mode === "ROAD" || t.mode === "RAIL") && /* @__PURE__ */ E("div", {
+												className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+												children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Distance (km)" }), /* @__PURE__ */ T(f, {
+													type: "number",
+													min: 0,
+													value: t.distanceKm ?? "",
+													onChange: (e) => $(n, { distanceKm: Number(e.target.value) || void 0 })
+												})] }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Weight (kg)" }), /* @__PURE__ */ T(f, {
+													type: "number",
+													min: 0,
+													value: t.weightKg ?? "",
+													onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
+												})] })]
+											}),
+											t.mode === "AIR" && /* @__PURE__ */ E("div", {
+												className: "grid grid-cols-1 gap-4 sm:grid-cols-4",
+												children: [
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Weight (kg)" }), /* @__PURE__ */ T(f, {
+														type: "number",
+														min: 0,
+														value: t.weightKg ?? "",
+														onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
+													})] }),
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Length (cm)" }), /* @__PURE__ */ T(f, {
+														type: "number",
+														min: 0,
+														value: t.lengthCm ?? "",
+														onChange: (e) => $(n, { lengthCm: Number(e.target.value) || void 0 })
+													})] }),
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Width (cm)" }), /* @__PURE__ */ T(f, {
+														type: "number",
+														min: 0,
+														value: t.widthCm ?? "",
+														onChange: (e) => $(n, { widthCm: Number(e.target.value) || void 0 })
+													})] }),
+													/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Height (cm)" }), /* @__PURE__ */ T(f, {
+														type: "number",
+														min: 0,
+														value: t.heightCm ?? "",
+														onChange: (e) => $(n, { heightCm: Number(e.target.value) || void 0 })
+													})] })
+												]
+											}),
+											t.mode === "OCEAN" && /* @__PURE__ */ E("div", {
+												className: "grid grid-cols-1 gap-4 sm:grid-cols-4",
+												children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Container Type" }), /* @__PURE__ */ E(m, {
+													value: t.containerType ?? "LCL",
+													onValueChange: (e) => $(n, { containerType: e }),
+													children: [/* @__PURE__ */ T(_, { children: /* @__PURE__ */ T(v, {}) }), /* @__PURE__ */ E(h, { children: [
+														/* @__PURE__ */ T(g, {
+															value: "LCL",
+															children: "LCL (shared container)"
+														}),
+														/* @__PURE__ */ T(g, {
+															value: "FCL_20FT",
+															children: "FCL 20ft"
+														}),
+														/* @__PURE__ */ T(g, {
+															value: "FCL_40FT",
+															children: "FCL 40ft"
+														}),
+														/* @__PURE__ */ T(g, {
+															value: "FCL_40FT_HC",
+															children: "FCL 40ft High-Cube"
+														})
+													] })]
+												})] }), (t.containerType ?? "LCL") === "LCL" ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Weight (kg)" }), /* @__PURE__ */ T(f, {
+													type: "number",
+													min: 0,
+													value: t.weightKg ?? "",
+													onChange: (e) => $(n, { weightKg: Number(e.target.value) || void 0 })
+												})] }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Volume (CBM)" }), /* @__PURE__ */ T(f, {
+													type: "number",
+													min: 0,
+													value: t.volumeCbm ?? "",
+													onChange: (e) => $(n, { volumeCbm: Number(e.target.value) || void 0 })
+												})] })] }) : /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T(p, { children: "Container Count" }), /* @__PURE__ */ T(f, {
+													type: "number",
+													min: 1,
+													value: t.containerCount ?? 1,
+													onChange: (e) => $(n, { containerCount: Number(e.target.value) || 1 })
+												})] })]
+											}),
+											/* @__PURE__ */ E("div", {
+												className: "flex items-center gap-3",
+												children: [
+													/* @__PURE__ */ E(s, {
+														type: "button",
+														variant: "secondary",
+														size: "sm",
+														onClick: () => void oe(n),
+														children: [/* @__PURE__ */ T(e, {
+															size: 14,
+															className: "mr-1.5"
+														}), " Calculate Rate"]
+													}),
+													i && /* @__PURE__ */ E("span", {
+														className: "text-sm font-medium text-text-primary",
+														children: [M(i.calculatedCost, i.currency), i.chargeableWeightKg != null && /* @__PURE__ */ E("span", {
+															className: "ml-2 text-xs text-text-secondary",
+															children: [
+																"(",
+																i.chargeableWeightKg.toFixed(1),
+																"kg chargeable)"
+															]
+														})]
+													}),
+													a && /* @__PURE__ */ T("span", {
+														className: "text-sm text-status-error-text",
+														children: a
+													})
+												]
+											}),
+											i && i.breakdown.length > 0 && /* @__PURE__ */ T("ul", {
+												className: "space-y-1 rounded-md bg-surface-subtle px-3 py-2 text-xs text-text-secondary",
+												children: i.breakdown.map((e) => /* @__PURE__ */ E("li", {
+													className: "flex justify-between",
+													children: [/* @__PURE__ */ T("span", { children: e.label }), /* @__PURE__ */ T("span", { children: M(e.amount, i.currency) })]
+												}, e.label))
+											})
+										]
+									})]
+								}, n);
+							})
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ E(s, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								onClick: ie,
+								children: [/* @__PURE__ */ T(n, {
+									size: 14,
+									className: "mr-1.5"
+								}), " Add Leg"]
+							}), /* @__PURE__ */ E("div", {
+								className: "flex items-center gap-3",
+								children: [ce.size > 1 && /* @__PURE__ */ T(o, {
+									variant: "secondary",
+									children: "Multi-modal"
+								}), /* @__PURE__ */ E("span", {
+									className: "text-sm text-text-secondary",
+									children: [
+										"Estimated total:",
+										" ",
+										/* @__PURE__ */ T("strong", { children: M(se, U[0]?.currency ?? "USD") })
+									]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ T(s, {
+							type: "submit",
+							disabled: q,
+							children: q ? "Planning shipment..." : "Plan Shipment"
+						})
+					]
+				}) }) })
+			}),
+			/* @__PURE__ */ T(x, {
+				title: "Planned Multi-Modal Shipments",
+				children: i ? /* @__PURE__ */ T(y, { message: "Loading multi-modal shipments..." }) : a ? /* @__PURE__ */ T(S, { message: a.message }) : t.length === 0 ? /* @__PURE__ */ T(ne, {
+					icon: /* @__PURE__ */ T(r, { size: 32 }),
+					title: "No multi-modal shipments yet",
+					description: "Plan a shipment above to see it here once it spans more than one transport mode."
+				}) : /* @__PURE__ */ T("div", {
+					className: "space-y-4",
+					children: t.map((e) => /* @__PURE__ */ E(c, { children: [/* @__PURE__ */ E(u, {
+						className: "flex flex-row items-center justify-between",
+						children: [/* @__PURE__ */ T(d, {
+							className: "text-base",
+							children: e.shipmentNumber
+						}), /* @__PURE__ */ E("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ T(o, {
+								variant: "outline",
+								children: e.status
+							}), /* @__PURE__ */ T("span", {
+								className: "text-sm font-medium",
+								children: M(e.totalFreightCost, e.freightCurrency)
+							})]
+						})]
+					}), /* @__PURE__ */ T(l, { children: /* @__PURE__ */ T("div", {
+						className: "flex flex-wrap gap-2",
+						children: e.legs.map((e) => {
+							let t = k[e.mode];
+							return /* @__PURE__ */ E(o, {
+								variant: "secondary",
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ T(t, { size: 12 }),
+									" ",
+									A[e.mode],
+									":",
+									" ",
+									M(e.calculatedCost, e.currency)
+								]
+							}, e.id);
+						})
+					}) })] }, e.id))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { N as default };

package/package.json

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

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -73,6 +73,7 @@ const ReportsPage = lazy(() => import('./pages/ReportsPage'));
 const SettingsPage = lazy(() => import('./pages/SettingsPage'));
 const AIAssistantPage = lazy(() => import('./pages/AIAssistantPage'));
 const DeliveryCapturePage = lazy(() => import('./pages/DeliveryCapturePage'));
+const MultiModalShipmentPage = lazy(() => import('./pages/MultiModalShipmentPage'));
 
 export function MoveTheWheelsRoutes() {
   return (
@@ -94,6 +95,9 @@ export function MoveTheWheelsRoutes() {
         {/* Driver ePOD capture (BOFF-4399) */}
         <Route path="deliveries/mine" element={<DeliveryCapturePage />} />
 
+        {/* Multi-modal freight execution (BOFF-4398) */}
+        <Route path="shipments/multi-modal" element={<MultiModalShipmentPage />} />
+
         {/* Fleet */}
         <Route path="fleet" element={<FleetPage />} />
         <Route path="fleet/vehicles" element={<VehiclesPage />} />