@burdenoff/microfe-movethewheels 2026.918.1 → 2026.920.1

package/dist/MoveTheWheelsRoutes.js

@@ -28,8 +28,8 @@ function d() {
 		})
 	});
 }
-var f = r(() => import("./pages/DashboardPage.js")), p = r(() => import("./pages/OrdersListPage.js")), m = r(() => import("./pages/OrderDetailsPage.js")), h = r(() => import("./pages/CreateOrderPage.js")), g = r(() => import("./pages/TrackingPage.js")), _ = r(() => import("./pages/LiveTrackingPage.js")), v = r(() => import("./pages/FleetPage.js")), y = r(() => import("./pages/VehiclesPage.js")), b = r(() => import("./pages/VehicleDetailsPage.js")), x = r(() => import("./pages/DriversPage.js")), S = r(() => import("./pages/DriverDetailsPage.js")), C = r(() => import("./pages/InventoryPage.js")), w = r(() => import("./pages/ProductsPage.js")), T = r(() => import("./pages/ProductDetailsPage.js")), E = r(() => import("./pages/WarehousesPage.js")), D = r(() => import("./pages/WarehouseDetailsPage.js")), O = r(() => import("./pages/CustomersPage.js")), k = r(() => import("./pages/CustomerDetailsPage.js")), A = r(() => import("./pages/RoutesPage.js")), j = r(() => import("./pages/RouteDetailsPage.js")), M = r(() => import("./pages/AnalyticsPage.js")), N = r(() => import("./pages/FinancePage.js")), P = r(() => import("./pages/MarketplacePage.js")), F = r(() => import("./pages/ImportExportPage.js")), I = r(() => import("./pages/ReportsPage.js")), L = r(() => import("./pages/SettingsPage.js")), R = r(() => import("./pages/AIAssistantPage.js")), z = r(() => import("./pages/DeliveryCapturePage.js")), B = r(() => import("./pages/MultiModalShipmentPage.js"));
-function V() {
+var f = r(() => import("./pages/DashboardPage.js")), p = r(() => import("./pages/OrdersListPage.js")), m = r(() => import("./pages/OrderDetailsPage.js")), h = r(() => import("./pages/CreateOrderPage.js")), g = r(() => import("./pages/TrackingPage.js")), _ = r(() => import("./pages/LiveTrackingPage.js")), v = r(() => import("./pages/FleetPage.js")), y = r(() => import("./pages/VehiclesPage.js")), b = r(() => import("./pages/VehicleDetailsPage.js")), x = r(() => import("./pages/DriversPage.js")), S = r(() => import("./pages/DriverDetailsPage.js")), C = r(() => import("./pages/InventoryPage.js")), w = r(() => import("./pages/ProductsPage.js")), T = r(() => import("./pages/ProductDetailsPage.js")), E = r(() => import("./pages/WarehousesPage.js")), D = r(() => import("./pages/WarehouseDetailsPage.js")), O = r(() => import("./pages/CustomersPage.js")), k = r(() => import("./pages/CustomerDetailsPage.js")), A = r(() => import("./pages/RoutesPage.js")), j = r(() => import("./pages/RouteDetailsPage.js")), M = r(() => import("./pages/AnalyticsPage.js")), N = r(() => import("./pages/FinancePage.js")), P = r(() => import("./pages/MarketplacePage.js")), F = r(() => import("./pages/ImportExportPage.js")), I = r(() => import("./pages/ReportsPage.js")), L = r(() => import("./pages/SettingsPage.js")), R = r(() => import("./pages/AIAssistantPage.js")), z = r(() => import("./pages/DeliveryCapturePage.js")), B = r(() => import("./pages/MultiModalShipmentPage.js")), V = r(() => import("./pages/ShippingRatesPage.js"));
+function H() {
 	return /* @__PURE__ */ s(n, {
 		fallback: /* @__PURE__ */ s(d, {}),
 		children: /* @__PURE__ */ c(a, { children: [
@@ -69,6 +69,10 @@ function V() {
 				path: "shipments/multi-modal",
 				element: /* @__PURE__ */ s(B, {})
 			}),
+			/* @__PURE__ */ s(i, {
+				path: "shipments/rates",
+				element: /* @__PURE__ */ s(V, {})
+			}),
 			/* @__PURE__ */ s(i, {
 				path: "fleet",
 				element: /* @__PURE__ */ s(v, {})
@@ -205,4 +209,4 @@ function V() {
 	});
 }
 //#endregion
-export { V as MoveTheWheelsRoutes };
+export { H as MoveTheWheelsRoutes };

package/dist/components/ShippingQuoteResults.js

@@ -0,0 +1,142 @@
+import { TriangleAlert as e } from "../node_modules/lucide-react/dist/esm/icons/triangle-alert.js";
+import { Card as t, CardContent as n, CardHeader as r, CardTitle as i, Table as a, TableBody as o, TableCell as s, TableHead as c, TableHeader as l, TableRow as u } from "./ui.js";
+import { StatusBadge as d } from "./StatusBadge.js";
+import { formatCurrency as f } from "../utils/formatters.js";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/movethewheels/components/ShippingQuoteResults.tsx
+var g = {
+	bg: "bg-status-success-bg-subtle",
+	text: "text-status-success-text"
+}, _ = {
+	bg: "bg-status-info-bg-subtle",
+	text: "text-status-info-text"
+};
+function v(e, t) {
+	if (e.estimatedDeliveryDays === null) return e.estimatedDeliveryDate ?? "—";
+	let n = e.estimatedDeliveryDays === 1 ? t("movethewheels.shipping.results.day", "day") : t("movethewheels.shipping.results.days", "days"), r = `${e.estimatedDeliveryDays} ${n}`;
+	return e.estimatedDeliveryDate ? `${r} · ${e.estimatedDeliveryDate}` : r;
+}
+function y(e, t) {
+	return e.mode === "AIR" ? t("movethewheels.shipping.results.air", "Air") : e.mode === "SURFACE" ? t("movethewheels.shipping.results.surface", "Surface") : "—";
+}
+function b({ quote: e, t }) {
+	return /* @__PURE__ */ h(p, { children: [
+		e.isCheapest && /* @__PURE__ */ m(d, {
+			status: t("movethewheels.shipping.results.cheapest", "Cheapest"),
+			customColors: g,
+			size: "sm",
+			showDot: !1
+		}),
+		e.isFastest && /* @__PURE__ */ m(d, {
+			status: t("movethewheels.shipping.results.fastest", "Fastest"),
+			customColors: _,
+			size: "sm",
+			showDot: !1
+		}),
+		e.isRecommended && /* @__PURE__ */ m(d, {
+			status: t("movethewheels.shipping.results.recommended", "Recommended"),
+			customColors: _,
+			size: "sm",
+			showDot: !1
+		})
+	] });
+}
+function x({ result: d, t: g }) {
+	let _ = d.providers.filter((e) => !e.ok);
+	return /* @__PURE__ */ h("div", {
+		className: "space-y-4",
+		children: [_.map((t) => /* @__PURE__ */ h("div", {
+			role: "alert",
+			className: "flex items-start gap-2 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle px-4 py-3 text-sm text-status-warning-text",
+			children: [/* @__PURE__ */ m(e, {
+				size: 18,
+				className: "mt-0.5 shrink-0",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ m("span", { children: t.errorMessage })]
+		}, t.provider)), /* @__PURE__ */ h(t, { children: [/* @__PURE__ */ h(r, { children: [/* @__PURE__ */ h(i, { children: [
+			g("movethewheels.shipping.results.title", "Courier options"),
+			" (",
+			d.quotes.length,
+			")"
+		] }), /* @__PURE__ */ h("p", {
+			className: "text-sm text-text-secondary",
+			children: [
+				g("movethewheels.shipping.results.chargeableWeight", "Charged on"),
+				" ",
+				d.chargeableWeightKg,
+				" kg"
+			]
+		})] }), /* @__PURE__ */ m(n, {
+			className: "p-0",
+			children: d.quotes.length === 0 ? /* @__PURE__ */ m("p", {
+				className: "px-6 pb-6 text-sm text-text-secondary",
+				children: _.length > 0 ? g("movethewheels.shipping.results.allFailed", "No rates could be fetched — see the message above.") : g("movethewheels.shipping.results.noServiceable", "No courier serves this pincode pair.")
+			}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("ul", {
+				className: "divide-y md:hidden",
+				"aria-label": g("movethewheels.shipping.results.title", "Courier options"),
+				children: d.quotes.map((e) => /* @__PURE__ */ h("li", {
+					className: "space-y-2 px-4 py-4",
+					children: [
+						/* @__PURE__ */ h("div", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ m("span", {
+								className: "min-w-0 font-medium",
+								children: e.courierName
+							}), /* @__PURE__ */ m("span", {
+								className: "shrink-0 text-lg font-semibold",
+								children: f(e.price, e.currency)
+							})]
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: /* @__PURE__ */ m(b, {
+								quote: e,
+								t: g
+							})
+						}),
+						/* @__PURE__ */ m("p", {
+							className: "text-sm text-text-secondary",
+							children: [
+								y(e, g),
+								v(e, g),
+								e.rating === null ? null : `${e.rating.toFixed(1)} ★`
+							].filter((e) => e !== "—" && e !== null).join(" · ")
+						})
+					]
+				}, `${e.provider}:${e.courierId}`))
+			}), /* @__PURE__ */ m("div", {
+				className: "hidden md:block",
+				children: /* @__PURE__ */ h(a, { children: [/* @__PURE__ */ m(l, { children: /* @__PURE__ */ h(u, { children: [
+					/* @__PURE__ */ m(c, { children: g("movethewheels.shipping.results.courier", "Courier") }),
+					/* @__PURE__ */ m(c, { children: g("movethewheels.shipping.results.mode", "Mode") }),
+					/* @__PURE__ */ m(c, { children: g("movethewheels.shipping.results.transit", "Estimated delivery") }),
+					/* @__PURE__ */ m(c, { children: g("movethewheels.shipping.results.rating", "Rating") }),
+					/* @__PURE__ */ m(c, {
+						className: "text-right",
+						children: g("movethewheels.shipping.results.price", "Price")
+					})
+				] }) }), /* @__PURE__ */ m(o, { children: d.quotes.map((e) => /* @__PURE__ */ h(u, { children: [
+					/* @__PURE__ */ m(s, { children: /* @__PURE__ */ h("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ m("span", {
+							className: "font-medium",
+							children: e.courierName
+						}), /* @__PURE__ */ m(b, {
+							quote: e,
+							t: g
+						})]
+					}) }),
+					/* @__PURE__ */ m(s, { children: y(e, g) }),
+					/* @__PURE__ */ m(s, { children: v(e, g) }),
+					/* @__PURE__ */ m(s, { children: e.rating === null ? "—" : e.rating.toFixed(1) }),
+					/* @__PURE__ */ m(s, {
+						className: "text-right font-medium",
+						children: f(e.price, e.currency)
+					})
+				] }, `${e.provider}:${e.courierId}`)) })] })
+			})] })
+		})] })]
+	});
+}
+//#endregion
+export { x as ShippingQuoteResults };

package/dist/hooks/useShippingCarriers.js

@@ -0,0 +1,29 @@
+import { useMoveTheWheels as e } from "../providers/MoveTheWheelsProvider.js";
+import { executeGraphQL as t } from "../utils/graphqlClient.js";
+import { useCallback as n, useMemo as r } from "react";
+//#region src/movethewheels/hooks/useShippingCarriers.ts
+var i = "\n  query ShippingQuotes($input: ShippingQuoteInput!) {\n    shippingQuotes(input: $input) {\n      chargeableWeightKg\n      quotes {\n        provider\n        courierId\n        courierName\n        price\n        currency\n        estimatedDeliveryDays\n        estimatedDeliveryDate\n        rating\n        mode\n        isRecommended\n        isCheapest\n        isFastest\n      }\n      providers {\n        provider\n        ok\n        quoteCount\n        errorMessage\n      }\n    }\n  }\n";
+function a() {
+	let { apiGatewayUrl: t, authToken: n, workspaceToken: i, workspaceId: a, tenantId: o, currentUser: s } = e();
+	return r(() => ({
+		apiGatewayUrl: t,
+		authToken: n,
+		workspaceToken: i,
+		workspaceId: a,
+		tenantId: o,
+		actorId: s?.id
+	}), [
+		t,
+		n,
+		i,
+		a,
+		o,
+		s?.id
+	]);
+}
+function o() {
+	let e = a();
+	return n(async (n) => (await t(e, i, { input: n })).shippingQuotes, [e]);
+}
+//#endregion
+export { o as useShippingQuotes };

package/dist/movethewheels/components/ShippingQuoteResults.d.ts

@@ -0,0 +1,8 @@
+import { ShippingQuoteResult } from '../hooks/useShippingCarriers';
+
+interface ShippingQuoteResultsProps {
+    result: ShippingQuoteResult;
+    t: (key: string, fallback: string) => string;
+}
+export declare function ShippingQuoteResults({ result, t }: ShippingQuoteResultsProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/hooks/useShippingCarriers.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Shipping rate comparison — every carrier's price for one pincode pair, on top
+ * of wspace-movethewheels-svc's carrier module. The carrier accounts belong to
+ * the platform, so there is nothing for a workspace to configure.
+ */
+export type CarrierProvider = 'SHIPROCKET';
+export type CarrierServiceMode = 'SURFACE' | 'AIR';
+export interface ShippingQuoteInput {
+    pickupPostcode: string;
+    deliveryPostcode: string;
+    weightKg: number;
+    lengthCm?: number;
+    widthCm?: number;
+    heightCm?: number;
+    cod?: boolean;
+}
+export interface ShippingQuote {
+    provider: CarrierProvider;
+    courierId: string;
+    courierName: string;
+    price: number;
+    currency: string;
+    estimatedDeliveryDays: number | null;
+    estimatedDeliveryDate: string | null;
+    rating: number | null;
+    mode: CarrierServiceMode | null;
+    isRecommended: boolean;
+    isCheapest: boolean;
+    isFastest: boolean;
+}
+export interface CarrierOutcome {
+    provider: CarrierProvider;
+    ok: boolean;
+    quoteCount: number;
+    errorMessage: string | null;
+}
+export interface ShippingQuoteResult {
+    chargeableWeightKg: number;
+    quotes: ShippingQuote[];
+    providers: CarrierOutcome[];
+}
+/** Imperative: a comparison is something the operator asks for, not page-load data. */
+export declare function useShippingQuotes(): (input: ShippingQuoteInput) => Promise<ShippingQuoteResult>;

package/dist/movethewheels/pages/ShippingRatesPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shipping Rates Page
+ *
+ * Compare live courier rates between two pincodes across the platform's
+ * carriers (Shiprocket first). Nothing to set up: the carrier accounts belong
+ * to the platform. Read-only — comparing never books a shipment or spends
+ * carrier credit.
+ */
+export default function ShippingRatesPage(): import("react").JSX.Element;

package/dist/node_modules/lucide-react/dist/esm/icons/scale.js

@@ -0,0 +1,26 @@
+import { createLucideIcon as e } from "../createLucideIcon.js";
+//#region node_modules/lucide-react/dist/esm/icons/scale.js
+var t = e("Scale", [
+	["path", {
+		d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z",
+		key: "7g6ntu"
+	}],
+	["path", {
+		d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z",
+		key: "ijws7r"
+	}],
+	["path", {
+		d: "M7 21h10",
+		key: "1b0cd5"
+	}],
+	["path", {
+		d: "M12 3v18",
+		key: "108xh3"
+	}],
+	["path", {
+		d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2",
+		key: "3gwbw2"
+	}]
+]);
+//#endregion
+export { t as Scale };

package/dist/pages/ShippingRatesPage.js

@@ -0,0 +1,177 @@
+import { Scale as e } from "../node_modules/lucide-react/dist/esm/icons/scale.js";
+import { useTr as t } from "../shared/hooks/useTr.js";
+import "../hooks/index.js";
+import { Button as n, Card as r, CardContent as i, CardHeader as a, CardTitle as o, Input as s, Label as c, Switch as l } from "../components/ui.js";
+import { PageLayout as u } from "../components/PageLayout.js";
+import { FormError as d } from "../components/FormError.js";
+import { ShippingQuoteResults as f } from "../components/ShippingQuoteResults.js";
+import { useShippingQuotes as p } from "../hooks/useShippingCarriers.js";
+import { useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/movethewheels/pages/ShippingRatesPage.tsx
+var _ = /^[1-9]\d{5}$/, v = (e) => {
+	let t = Number(e);
+	return e.trim() !== "" && Number.isFinite(t) ? t : void 0;
+};
+function y() {
+	let y = t(), b = p(), [x, S] = m(""), [C, w] = m(""), [T, E] = m(""), [D, O] = m(""), [k, A] = m(""), [j, M] = m(""), [N, P] = m(!1), [F, I] = m(!1), [L, R] = m(null), [z, B] = m(null), V = async (e) => {
+		e.preventDefault(), R(null);
+		let t = v(T);
+		if (!_.test(x) || !_.test(C)) {
+			R(y("movethewheels.shipping.form.postcodeError", "Enter valid 6-digit pickup and delivery postcodes"));
+			return;
+		}
+		if (t === void 0 || t <= 0) {
+			R(y("movethewheels.shipping.form.weightError", "Enter the package weight in kg"));
+			return;
+		}
+		let n = [
+			v(D),
+			v(k),
+			v(j)
+		], r = n.filter((e) => e !== void 0).length;
+		if (r !== 0 && r !== 3) {
+			R(y("movethewheels.shipping.form.dimensionsError", "Enter length, width and height together, or leave all three empty"));
+			return;
+		}
+		let i = {
+			pickupPostcode: x,
+			deliveryPostcode: C,
+			weightKg: t,
+			cod: N,
+			...r === 3 ? {
+				lengthCm: n[0],
+				widthCm: n[1],
+				heightCm: n[2]
+			} : {}
+		};
+		I(!0);
+		try {
+			B(await b(i));
+		} catch (e) {
+			B(null), R(e instanceof Error ? e.message : y("movethewheels.shipping.form.failed", "Could not fetch rates"));
+		} finally {
+			I(!1);
+		}
+	};
+	return /* @__PURE__ */ h(u, {
+		title: y("movethewheels.shipping.title", "Compare Rates"),
+		subtitle: y("movethewheels.shipping.subtitle", "Enter a pickup and a delivery pincode to see every courier available for that route, with price and delivery time."),
+		icon: /* @__PURE__ */ h(e, { size: 24 }),
+		children: /* @__PURE__ */ g("div", {
+			className: "space-y-6",
+			children: [/* @__PURE__ */ g(r, { children: [/* @__PURE__ */ h(a, { children: /* @__PURE__ */ h(o, { children: y("movethewheels.shipping.form.title", "Shipment details") }) }), /* @__PURE__ */ h(i, { children: /* @__PURE__ */ g("form", {
+				onSubmit: (e) => void V(e),
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "grid gap-3 sm:grid-cols-3",
+						children: [
+							/* @__PURE__ */ g("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "rate-pickup",
+									children: y("movethewheels.shipping.form.pickup", "Pickup postcode")
+								}), /* @__PURE__ */ h(s, {
+									id: "rate-pickup",
+									inputMode: "numeric",
+									maxLength: 6,
+									value: x,
+									onChange: (e) => S(e.target.value.trim())
+								})]
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "rate-delivery",
+									children: y("movethewheels.shipping.form.delivery", "Delivery postcode")
+								}), /* @__PURE__ */ h(s, {
+									id: "rate-delivery",
+									inputMode: "numeric",
+									maxLength: 6,
+									value: C,
+									onChange: (e) => w(e.target.value.trim())
+								})]
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "rate-weight",
+									children: y("movethewheels.shipping.form.weight", "Weight (kg)")
+								}), /* @__PURE__ */ h(s, {
+									id: "rate-weight",
+									inputMode: "decimal",
+									value: T,
+									onChange: (e) => E(e.target.value)
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "grid gap-3 sm:grid-cols-3",
+						children: [
+							/* @__PURE__ */ g("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "rate-length",
+									children: y("movethewheels.shipping.form.length", "Length (cm, optional)")
+								}), /* @__PURE__ */ h(s, {
+									id: "rate-length",
+									inputMode: "decimal",
+									value: D,
+									onChange: (e) => O(e.target.value)
+								})]
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "rate-width",
+									children: y("movethewheels.shipping.form.width", "Width (cm, optional)")
+								}), /* @__PURE__ */ h(s, {
+									id: "rate-width",
+									inputMode: "decimal",
+									value: k,
+									onChange: (e) => A(e.target.value)
+								})]
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ h(c, {
+									htmlFor: "rate-height",
+									children: y("movethewheels.shipping.form.height", "Height (cm, optional)")
+								}), /* @__PURE__ */ h(s, {
+									id: "rate-height",
+									inputMode: "decimal",
+									value: j,
+									onChange: (e) => M(e.target.value)
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ h(l, {
+							id: "rate-cod",
+							checked: N,
+							onCheckedChange: P
+						}), /* @__PURE__ */ h(c, {
+							htmlFor: "rate-cod",
+							children: y("movethewheels.shipping.form.cod", "Cash on delivery")
+						})]
+					}),
+					/* @__PURE__ */ h(d, { message: L }),
+					/* @__PURE__ */ h(n, {
+						type: "submit",
+						disabled: F,
+						children: F ? y("movethewheels.shipping.form.comparing", "Comparing…") : y("movethewheels.shipping.form.compare", "Compare rates")
+					})
+				]
+			}) })] }), z && /* @__PURE__ */ h(f, {
+				result: z,
+				t: y
+			})]
+		})
+	});
+}
+//#endregion
+export { y as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.918.1",
+  "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 />} />

package/src/movethewheels/components/ShippingQuoteResults.tsx

@@ -0,0 +1,199 @@
+/**
+ * ShippingQuoteResults
+ *
+ * Every courier option from every carrier for one pincode pair, cheapest first,
+ * with the cheapest and fastest called out. A carrier that failed is listed
+ * with its reason instead of silently missing from the comparison.
+ *
+ * Wide screens get a table. On a phone a table pushes the price — the one
+ * number people compare on — off-screen, so each courier is a card instead.
+ */
+
+import { AlertTriangle } from 'lucide-react';
+
+import { StatusBadge } from './StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './ui';
+
+import type { ShippingQuote, ShippingQuoteResult } from '../hooks/useShippingCarriers';
+import { formatCurrency } from '../utils/formatters';
+
+interface ShippingQuoteResultsProps {
+  result: ShippingQuoteResult;
+  t: (key: string, fallback: string) => string;
+}
+
+const HIGHLIGHT = { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' };
+const INFO = { bg: 'bg-status-info-bg-subtle', text: 'text-status-info-text' };
+
+function transit(quote: ShippingQuote, t: ShippingQuoteResultsProps['t']): string {
+  if (quote.estimatedDeliveryDays === null) return quote.estimatedDeliveryDate ?? '—';
+  const unit =
+    quote.estimatedDeliveryDays === 1
+      ? t('movethewheels.shipping.results.day', 'day')
+      : t('movethewheels.shipping.results.days', 'days');
+  const days = `${quote.estimatedDeliveryDays} ${unit}`;
+  return quote.estimatedDeliveryDate ? `${days} · ${quote.estimatedDeliveryDate}` : days;
+}
+
+function modeLabel(quote: ShippingQuote, t: ShippingQuoteResultsProps['t']): string {
+  if (quote.mode === 'AIR') return t('movethewheels.shipping.results.air', 'Air');
+  if (quote.mode === 'SURFACE') return t('movethewheels.shipping.results.surface', 'Surface');
+  return '—';
+}
+
+function QuoteBadges({ quote, t }: { quote: ShippingQuote; t: ShippingQuoteResultsProps['t'] }) {
+  return (
+    <>
+      {quote.isCheapest && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.cheapest', 'Cheapest')}
+          customColors={HIGHLIGHT}
+          size="sm"
+          showDot={false}
+        />
+      )}
+      {quote.isFastest && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.fastest', 'Fastest')}
+          customColors={INFO}
+          size="sm"
+          showDot={false}
+        />
+      )}
+      {quote.isRecommended && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.recommended', 'Recommended')}
+          customColors={INFO}
+          size="sm"
+          showDot={false}
+        />
+      )}
+    </>
+  );
+}
+
+export function ShippingQuoteResults({ result, t }: ShippingQuoteResultsProps) {
+  const failed = result.providers.filter((provider) => !provider.ok);
+
+  return (
+    <div className="space-y-4">
+      {failed.map((provider) => (
+        <div
+          key={provider.provider}
+          role="alert"
+          className="flex items-start gap-2 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle px-4 py-3 text-sm text-status-warning-text"
+        >
+          <AlertTriangle size={18} className="mt-0.5 shrink-0" aria-hidden="true" />
+          <span>{provider.errorMessage}</span>
+        </div>
+      ))}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('movethewheels.shipping.results.title', 'Courier options')} ({result.quotes.length})
+          </CardTitle>
+          <p className="text-sm text-text-secondary">
+            {t('movethewheels.shipping.results.chargeableWeight', 'Charged on')}{' '}
+            {result.chargeableWeightKg} kg
+          </p>
+        </CardHeader>
+        <CardContent className="p-0">
+          {result.quotes.length === 0 ? (
+            <p className="px-6 pb-6 text-sm text-text-secondary">
+              {failed.length > 0
+                ? t(
+                    'movethewheels.shipping.results.allFailed',
+                    'No rates could be fetched — see the message above.'
+                  )
+                : t(
+                    'movethewheels.shipping.results.noServiceable',
+                    'No courier serves this pincode pair.'
+                  )}
+            </p>
+          ) : (
+            <>
+              <ul
+                className="divide-y md:hidden"
+                aria-label={t('movethewheels.shipping.results.title', 'Courier options')}
+              >
+                {result.quotes.map((quote) => (
+                  <li key={`${quote.provider}:${quote.courierId}`} className="space-y-2 px-4 py-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <span className="min-w-0 font-medium">{quote.courierName}</span>
+                      <span className="shrink-0 text-lg font-semibold">
+                        {formatCurrency(quote.price, quote.currency)}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <QuoteBadges quote={quote} t={t} />
+                    </div>
+                    <p className="text-sm text-text-secondary">
+                      {[
+                        modeLabel(quote, t),
+                        transit(quote, t),
+                        quote.rating === null ? null : `${quote.rating.toFixed(1)} ★`,
+                      ]
+                        .filter((part) => part !== '—' && part !== null)
+                        .join(' · ')}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+              <div className="hidden md:block">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        {t('movethewheels.shipping.results.courier', 'Courier')}
+                      </TableHead>
+                      <TableHead>{t('movethewheels.shipping.results.mode', 'Mode')}</TableHead>
+                      <TableHead>
+                        {t('movethewheels.shipping.results.transit', 'Estimated delivery')}
+                      </TableHead>
+                      <TableHead>{t('movethewheels.shipping.results.rating', 'Rating')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('movethewheels.shipping.results.price', 'Price')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {result.quotes.map((quote) => (
+                      <TableRow key={`${quote.provider}:${quote.courierId}`}>
+                        <TableCell>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span className="font-medium">{quote.courierName}</span>
+                            <QuoteBadges quote={quote} t={t} />
+                          </div>
+                        </TableCell>
+                        <TableCell>{modeLabel(quote, t)}</TableCell>
+                        <TableCell>{transit(quote, t)}</TableCell>
+                        <TableCell>
+                          {quote.rating === null ? '—' : quote.rating.toFixed(1)}
+                        </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {formatCurrency(quote.price, quote.currency)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/movethewheels/hooks/useShippingCarriers.ts

@@ -0,0 +1,110 @@
+/**
+ * Shipping rate comparison — every carrier's price for one pincode pair, on top
+ * of wspace-movethewheels-svc's carrier module. The carrier accounts belong to
+ * the platform, so there is nothing for a workspace to configure.
+ */
+
+import { useCallback, useMemo } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export type CarrierProvider = 'SHIPROCKET';
+export type CarrierServiceMode = 'SURFACE' | 'AIR';
+
+export interface ShippingQuoteInput {
+  pickupPostcode: string;
+  deliveryPostcode: string;
+  weightKg: number;
+  lengthCm?: number;
+  widthCm?: number;
+  heightCm?: number;
+  cod?: boolean;
+}
+
+export interface ShippingQuote {
+  provider: CarrierProvider;
+  courierId: string;
+  courierName: string;
+  price: number;
+  currency: string;
+  estimatedDeliveryDays: number | null;
+  estimatedDeliveryDate: string | null;
+  rating: number | null;
+  mode: CarrierServiceMode | null;
+  isRecommended: boolean;
+  isCheapest: boolean;
+  isFastest: boolean;
+}
+
+export interface CarrierOutcome {
+  provider: CarrierProvider;
+  ok: boolean;
+  quoteCount: number;
+  errorMessage: string | null;
+}
+
+export interface ShippingQuoteResult {
+  chargeableWeightKg: number;
+  quotes: ShippingQuote[];
+  providers: CarrierOutcome[];
+}
+
+const SHIPPING_QUOTES_QUERY = `
+  query ShippingQuotes($input: ShippingQuoteInput!) {
+    shippingQuotes(input: $input) {
+      chargeableWeightKg
+      quotes {
+        provider
+        courierId
+        courierName
+        price
+        currency
+        estimatedDeliveryDays
+        estimatedDeliveryDate
+        rating
+        mode
+        isRecommended
+        isCheapest
+        isFastest
+      }
+      providers {
+        provider
+        ok
+        quoteCount
+        errorMessage
+      }
+    }
+  }
+`;
+
+function useGraphqlOptions() {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  return useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+}
+
+/** Imperative: a comparison is something the operator asks for, not page-load data. */
+export function useShippingQuotes() {
+  const graphQLOptions = useGraphqlOptions();
+  return useCallback(
+    async (input: ShippingQuoteInput): Promise<ShippingQuoteResult> => {
+      const result = await executeGraphQL<{ shippingQuotes: ShippingQuoteResult }>(
+        graphQLOptions,
+        SHIPPING_QUOTES_QUERY,
+        { input }
+      );
+      return result.shippingQuotes;
+    },
+    [graphQLOptions]
+  );
+}

package/src/movethewheels/pages/ShippingRatesPage.tsx

@@ -0,0 +1,216 @@
+/**
+ * Shipping Rates Page
+ *
+ * Compare live courier rates between two pincodes across the platform's
+ * carriers (Shiprocket first). Nothing to set up: the carrier accounts belong
+ * to the platform. Read-only — comparing never books a shipment or spends
+ * carrier credit.
+ */
+
+import { useState, type FormEvent } from 'react';
+import { Scale } from 'lucide-react';
+
+import { FormError } from '../components/FormError';
+import { PageLayout } from '../components/PageLayout';
+import { ShippingQuoteResults } from '../components/ShippingQuoteResults';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Switch,
+} from '../components/ui';
+import { useTr } from '../hooks';
+import {
+  useShippingQuotes,
+  type ShippingQuoteInput,
+  type ShippingQuoteResult,
+} from '../hooks/useShippingCarriers';
+
+const POSTCODE = /^[1-9]\d{5}$/;
+
+const optionalNumber = (value: string): number | undefined => {
+  const parsed = Number(value);
+  return value.trim() !== '' && Number.isFinite(parsed) ? parsed : undefined;
+};
+
+export default function ShippingRatesPage() {
+  const tr = useTr();
+  const fetchQuotes = useShippingQuotes();
+
+  const [pickup, setPickup] = useState('');
+  const [delivery, setDelivery] = useState('');
+  const [weight, setWeight] = useState('');
+  const [length, setLength] = useState('');
+  const [width, setWidth] = useState('');
+  const [height, setHeight] = useState('');
+  const [cod, setCod] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<ShippingQuoteResult | null>(null);
+
+  const handleCompare = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const weightKg = optionalNumber(weight);
+    if (!POSTCODE.test(pickup) || !POSTCODE.test(delivery)) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.postcodeError',
+          'Enter valid 6-digit pickup and delivery postcodes'
+        )
+      );
+      return;
+    }
+    if (weightKg === undefined || weightKg <= 0) {
+      setError(tr('movethewheels.shipping.form.weightError', 'Enter the package weight in kg'));
+      return;
+    }
+    const dims = [optionalNumber(length), optionalNumber(width), optionalNumber(height)];
+    const given = dims.filter((d) => d !== undefined).length;
+    if (given !== 0 && given !== 3) {
+      setError(
+        tr(
+          'movethewheels.shipping.form.dimensionsError',
+          'Enter length, width and height together, or leave all three empty'
+        )
+      );
+      return;
+    }
+
+    const input: ShippingQuoteInput = {
+      pickupPostcode: pickup,
+      deliveryPostcode: delivery,
+      weightKg,
+      cod,
+      ...(given === 3 ? { lengthCm: dims[0], widthCm: dims[1], heightCm: dims[2] } : {}),
+    };
+
+    setIsLoading(true);
+    try {
+      setResult(await fetchQuotes(input));
+    } catch (e: unknown) {
+      setResult(null);
+      setError(
+        e instanceof Error
+          ? e.message
+          : tr('movethewheels.shipping.form.failed', 'Could not fetch rates')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title={tr('movethewheels.shipping.title', 'Compare Rates')}
+      subtitle={tr(
+        'movethewheels.shipping.subtitle',
+        'Enter a pickup and a delivery pincode to see every courier available for that route, with price and delivery time.'
+      )}
+      icon={<Scale size={24} />}
+    >
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>{tr('movethewheels.shipping.form.title', 'Shipment details')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={(event) => void handleCompare(event)} className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-1">
+                  <Label htmlFor="rate-pickup">
+                    {tr('movethewheels.shipping.form.pickup', 'Pickup postcode')}
+                  </Label>
+                  <Input
+                    id="rate-pickup"
+                    inputMode="numeric"
+                    maxLength={6}
+                    value={pickup}
+                    onChange={(e) => setPickup(e.target.value.trim())}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-delivery">
+                    {tr('movethewheels.shipping.form.delivery', 'Delivery postcode')}
+                  </Label>
+                  <Input
+                    id="rate-delivery"
+                    inputMode="numeric"
+                    maxLength={6}
+                    value={delivery}
+                    onChange={(e) => setDelivery(e.target.value.trim())}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-weight">
+                    {tr('movethewheels.shipping.form.weight', 'Weight (kg)')}
+                  </Label>
+                  <Input
+                    id="rate-weight"
+                    inputMode="decimal"
+                    value={weight}
+                    onChange={(e) => setWeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="space-y-1">
+                  <Label htmlFor="rate-length">
+                    {tr('movethewheels.shipping.form.length', 'Length (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-length"
+                    inputMode="decimal"
+                    value={length}
+                    onChange={(e) => setLength(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-width">
+                    {tr('movethewheels.shipping.form.width', 'Width (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-width"
+                    inputMode="decimal"
+                    value={width}
+                    onChange={(e) => setWidth(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="rate-height">
+                    {tr('movethewheels.shipping.form.height', 'Height (cm, optional)')}
+                  </Label>
+                  <Input
+                    id="rate-height"
+                    inputMode="decimal"
+                    value={height}
+                    onChange={(e) => setHeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch id="rate-cod" checked={cod} onCheckedChange={setCod} />
+                <Label htmlFor="rate-cod">
+                  {tr('movethewheels.shipping.form.cod', 'Cash on delivery')}
+                </Label>
+              </div>
+              <FormError message={error} />
+              <Button type="submit" disabled={isLoading}>
+                {isLoading
+                  ? tr('movethewheels.shipping.form.comparing', 'Comparing…')
+                  : tr('movethewheels.shipping.form.compare', 'Compare rates')}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+
+        {result && <ShippingQuoteResults result={result} t={tr} />}
+      </div>
+    </PageLayout>
+  );
+}