@burdenoff/microfe-movethewheels 2026.1030.1 → 2026.1031.1

package/dist/pages/VehiclesPage.js

@@ -2,145 +2,151 @@ import { CircleCheck as e } from "../node_modules/lucide-react/dist/esm/icons/ci
 import { Download as t } from "../node_modules/lucide-react/dist/esm/icons/download.js";
 import { Filter as n } from "../node_modules/lucide-react/dist/esm/icons/filter.js";
 import { Plus as r } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
-import { RefreshCw as ee } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
-import { Route as i } from "../node_modules/lucide-react/dist/esm/icons/route.js";
-import { Truck as a } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
-import { Wrench as o } from "../node_modules/lucide-react/dist/esm/icons/wrench.js";
-import { joinPath as s } from "../utils/navigation.js";
-import { useMoveTheWheels as c } from "../providers/MoveTheWheelsProvider.js";
-import { useFleetStats as l, useVehicles as u } from "../hooks/useFleet.js";
-import { Button as d, Card as f, CardContent as p, Progress as m, Select as h, SelectContent as g, SelectItem as _, SelectTrigger as v, SelectValue as y } from "../components/ui.js";
-import { PageLayout as b } from "../components/PageLayout.js";
-import { MetricCard as x, MetricGrid as S } from "../components/MetricCard.js";
-import { VEHICLE_STATUS_LABELS as C } from "../constants/index.js";
-import { StatusBadge as w, VehicleTypeBadge as T } from "../components/StatusBadge.js";
-import { DataTable as E } from "../components/DataTable.js";
-import { useDebouncedValue as D } from "../hooks/useDebouncedValue.js";
-import { useState as O } from "react";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
-import { CTAOverflowMenu as j, PagePurpose as M } from "@burdenoff/fe-libs/ui";
+import { RefreshCw as i } from "../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { Route as a } from "../node_modules/lucide-react/dist/esm/icons/route.js";
+import { Truck as o } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { Wrench as s } from "../node_modules/lucide-react/dist/esm/icons/wrench.js";
+import { joinPath as c } from "../utils/navigation.js";
+import { useMoveTheWheels as l } from "../providers/MoveTheWheelsProvider.js";
+import { useFleetStats as u, useVehicles as d } from "../hooks/useFleet.js";
+import { Button as f, Card as ee, CardContent as p, Progress as m, Select as h, SelectContent as g, SelectItem as te, SelectTrigger as ne, SelectValue as re } from "../components/ui.js";
+import { PageLayout as ie } from "../components/PageLayout.js";
+import { MetricCard as _, MetricGrid as v } from "../components/MetricCard.js";
+import { VEHICLE_STATUS_LABELS as y } from "../constants/index.js";
+import { StatusBadge as b, VehicleTypeBadge as x } from "../components/StatusBadge.js";
+import { DataTable as S } from "../components/DataTable.js";
+import { useDebouncedValue as C } from "../hooks/useDebouncedValue.js";
+import { useEntityExport as w } from "../hooks/useEntityExport.js";
+import { ExportStatusBanner as T } from "../components/ExportStatusBanner.js";
+import { useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { CTAOverflowMenu as k, PagePurpose as A } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/VehiclesPage.tsx
-var N = [{
+var j = [{
 	value: "all",
 	label: "All statuses"
-}, ...Object.entries(C).map(([e, t]) => ({
+}, ...Object.entries(y).map(([e, t]) => ({
 	value: e,
 	label: t
 }))];
-function P() {
-	let { basePath: C, navigate: P } = c(), [F, I] = O(0), [L, R] = O(25), [z, B] = O(""), [V, H] = O("all"), U = D(z), { vehicles: W, totalVehicles: G, hasMore: K, isLoading: q, error: J, refetch: Y } = u({
-		limit: L,
-		offset: F * L,
-		search: U || void 0,
-		status: V === "all" ? void 0 : V
-	}), X = V !== "all" || z.length > 0, { stats: Z } = l(), Q = Z.totalVehicles, $ = (e) => {
-		P && P(s(C, e));
+function M() {
+	let { basePath: y, navigate: M } = l(), { state: N, isExporting: P, startExport: F, dismiss: ae } = w("vehicles", "vehicle"), [I, L] = E(0), [R, z] = E(25), [B, V] = E(""), [H, U] = E("all"), W = C(B), { vehicles: G, totalVehicles: K, hasMore: q, isLoading: J, error: Y, refetch: X } = d({
+		limit: R,
+		offset: I * R,
+		search: W || void 0,
+		status: H === "all" ? void 0 : H
+	}), oe = H !== "all" || B.length > 0, { stats: Z } = u(), Q = Z.totalVehicles, $ = (e) => {
+		M && M(c(y, e));
 	};
-	return /* @__PURE__ */ A(b, {
+	return /* @__PURE__ */ O(ie, {
 		title: "Vehicles",
 		subtitle: `${Q} vehicles in fleet`,
-		icon: /* @__PURE__ */ k(a, { size: 24 }),
-		headerActions: /* @__PURE__ */ k(j, {
+		icon: /* @__PURE__ */ D(o, { size: 24 }),
+		headerActions: /* @__PURE__ */ D(k, {
 			primary: {
 				label: "Add Vehicle",
-				icon: /* @__PURE__ */ k(r, { size: 16 }),
+				icon: /* @__PURE__ */ D(r, { size: 16 }),
 				onSelect: () => $("fleet/vehicles/new")
 			},
 			actions: [{
 				label: "Refresh",
-				icon: /* @__PURE__ */ k(ee, { size: 16 }),
-				onSelect: () => Y()
+				icon: /* @__PURE__ */ D(i, { size: 16 }),
+				onSelect: () => X()
 			}, {
-				label: "Export",
-				icon: /* @__PURE__ */ k(t, { size: 16 }),
-				onSelect: () => $("import-export")
+				label: P ? "Exporting…" : "Export",
+				icon: /* @__PURE__ */ D(t, { size: 16 }),
+				onSelect: F
 			}]
 		}),
 		children: [
-			/* @__PURE__ */ k(M, {
-				icon: /* @__PURE__ */ k(a, { size: 18 }),
+			/* @__PURE__ */ D(A, {
+				icon: /* @__PURE__ */ D(o, { size: 18 }),
 				children: "Every truck, van and bike in your fleet. Monitor capacity, fuel level, mileage and maintenance status here so you always know which vehicles are road-ready before dispatching an order."
 			}),
-			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+			/* @__PURE__ */ D(T, {
+				state: N,
+				onDismiss: ae
+			}),
+			/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Fleet at a glance"
-			}), /* @__PURE__ */ A(S, {
+			}), /* @__PURE__ */ O(v, {
 				columns: 4,
 				children: [
-					/* @__PURE__ */ k(x, {
+					/* @__PURE__ */ D(_, {
 						label: "Total vehicles",
 						value: Q,
-						icon: /* @__PURE__ */ k(a, { size: 20 }),
+						icon: /* @__PURE__ */ D(o, { size: 20 }),
 						accent: "brand"
 					}),
-					/* @__PURE__ */ k(x, {
+					/* @__PURE__ */ D(_, {
 						label: "Available now",
 						value: Z.vehiclesByStatus.available,
-						icon: /* @__PURE__ */ k(e, { size: 20 }),
+						icon: /* @__PURE__ */ D(e, { size: 20 }),
 						accent: "success",
 						subtitle: "Ready to dispatch"
 					}),
-					/* @__PURE__ */ k(x, {
+					/* @__PURE__ */ D(_, {
 						label: "On assignment",
 						value: Z.vehiclesByStatus.assigned,
-						icon: /* @__PURE__ */ k(i, { size: 20 }),
+						icon: /* @__PURE__ */ D(a, { size: 20 }),
 						accent: "blue"
 					}),
-					/* @__PURE__ */ k(x, {
+					/* @__PURE__ */ D(_, {
 						label: "In maintenance",
 						value: Z.vehiclesByStatus.maintenance,
-						icon: /* @__PURE__ */ k(o, { size: 20 }),
+						icon: /* @__PURE__ */ D(s, { size: 20 }),
 						accent: "warning"
 					})
 				]
 			})] }),
-			/* @__PURE__ */ k(f, { children: /* @__PURE__ */ k(p, {
+			/* @__PURE__ */ D(ee, { children: /* @__PURE__ */ D(p, {
 				className: "p-4",
-				children: /* @__PURE__ */ A("div", {
+				children: /* @__PURE__ */ O("div", {
 					className: "flex flex-wrap items-center gap-4",
 					children: [
-						/* @__PURE__ */ A("div", {
+						/* @__PURE__ */ O("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ k(n, {
+							children: [/* @__PURE__ */ D(n, {
 								size: 16,
 								className: "text-text-secondary"
-							}), /* @__PURE__ */ k("span", {
+							}), /* @__PURE__ */ D("span", {
 								className: "text-sm font-medium",
 								children: "Filters:"
 							})]
 						}),
-						/* @__PURE__ */ A(h, {
-							value: V,
+						/* @__PURE__ */ O(h, {
+							value: H,
 							onValueChange: (e) => {
-								H(e), I(0);
+								U(e), L(0);
 							},
-							children: [/* @__PURE__ */ k(v, {
+							children: [/* @__PURE__ */ D(ne, {
 								className: "w-[180px]",
-								children: /* @__PURE__ */ k(y, { placeholder: "Status" })
-							}), /* @__PURE__ */ k(g, { children: N.map((e) => /* @__PURE__ */ k(_, {
+								children: /* @__PURE__ */ D(re, { placeholder: "Status" })
+							}), /* @__PURE__ */ D(g, { children: j.map((e) => /* @__PURE__ */ D(te, {
 								value: e.value,
 								children: e.label
 							}, e.value)) })]
 						}),
-						X && /* @__PURE__ */ k(d, {
+						oe && /* @__PURE__ */ D(f, {
 							variant: "ghost",
 							size: "sm",
 							onClick: () => {
-								H("all"), B(""), I(0);
+								U("all"), V(""), L(0);
 							},
 							children: "Clear filters"
 						})
 					]
 				})
 			}) }),
-			/* @__PURE__ */ k(E, {
+			/* @__PURE__ */ D(S, {
 				columns: [
 					{
 						id: "vehicleNumber",
 						header: "Vehicle #",
 						accessorKey: "vehicleNumber",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ k("span", {
+						cell: (e) => /* @__PURE__ */ D("span", {
 							className: "font-medium",
 							children: e.vehicleNumber
 						})
@@ -149,19 +155,19 @@ function P() {
 						id: "type",
 						header: "Type",
 						accessorKey: "type",
-						cell: (e) => /* @__PURE__ */ k(T, { type: e.type })
+						cell: (e) => /* @__PURE__ */ D(x, { type: e.type })
 					},
 					{
 						id: "details",
 						header: "Vehicle",
-						cell: (e) => /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("p", {
+						cell: (e) => /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ O("p", {
 							className: "font-medium",
 							children: [
 								e.make,
 								" ",
 								e.model
 							]
-						}), /* @__PURE__ */ k("p", {
+						}), /* @__PURE__ */ D("p", {
 							className: "text-sm text-text-secondary",
 							children: e.year ?? "—"
 						})] })
@@ -171,7 +177,7 @@ function P() {
 						header: "Status",
 						accessorKey: "status",
 						sortable: !0,
-						cell: (e) => /* @__PURE__ */ k(w, {
+						cell: (e) => /* @__PURE__ */ D(b, {
 							status: e.status,
 							type: "vehicle"
 						})
@@ -179,9 +185,9 @@ function P() {
 					{
 						id: "capacity",
 						header: "Capacity",
-						cell: (e) => /* @__PURE__ */ A("div", {
+						cell: (e) => /* @__PURE__ */ O("div", {
 							className: "text-sm",
-							children: [/* @__PURE__ */ k("p", { children: e.capacity.weight === void 0 ? "—" : `${e.capacity.weight} kg` }), /* @__PURE__ */ k("p", {
+							children: [/* @__PURE__ */ D("p", { children: e.capacity.weight === void 0 ? "—" : `${e.capacity.weight} kg` }), /* @__PURE__ */ D("p", {
 								className: "text-text-secondary",
 								children: e.capacity.volume === void 0 ? "—" : `${e.capacity.volume} m³`
 							})]
@@ -190,12 +196,12 @@ function P() {
 					{
 						id: "fuel",
 						header: "Fuel Level",
-						cell: (e) => e.fuelLevel === void 0 ? "-" : /* @__PURE__ */ A("div", {
+						cell: (e) => e.fuelLevel === void 0 ? "-" : /* @__PURE__ */ O("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ k(m, {
+							children: [/* @__PURE__ */ D(m, {
 								value: e.fuelLevel,
 								className: "w-16 h-2"
-							}), /* @__PURE__ */ A("span", {
+							}), /* @__PURE__ */ O("span", {
 								className: "text-sm",
 								children: [e.fuelLevel, "%"]
 							})]
@@ -209,10 +215,10 @@ function P() {
 						cell: (e) => e.mileage ? `${e.mileage.toLocaleString()} mi` : "-"
 					}
 				],
-				data: W,
-				isLoading: q,
-				error: J,
-				onRetry: Y,
+				data: G,
+				isLoading: J,
+				error: Y,
+				onRetry: X,
 				searchable: !0,
 				searchPlaceholder: "Search vehicles...",
 				searchFields: [
@@ -220,20 +226,20 @@ function P() {
 					"make",
 					"model"
 				],
-				searchQuery: z,
+				searchQuery: B,
 				onSearchQueryChange: (e) => {
-					B(e), I(0);
+					V(e), L(0);
 				},
 				onRowClick: (e) => $(`fleet/vehicles/${e.id}`),
 				getRowId: (e) => e.id,
-				pageIndex: F,
-				pageSize: L,
-				onPageChange: I,
+				pageIndex: I,
+				pageSize: R,
+				onPageChange: L,
 				onPageSizeChange: (e) => {
-					R(e), I(0);
+					z(e), L(0);
 				},
-				totalItems: G,
-				hasNextPage: K,
+				totalItems: K,
+				hasNextPage: q,
 				emptyIllustration: "empty-data",
 				emptyTitle: "No vehicles yet",
 				emptyDescription: "Add vehicles to your fleet to start assigning them to deliveries."
@@ -242,4 +248,4 @@ function P() {
 	});
 }
 //#endregion
-export { P as default };
+export { M as default };

package/dist/utils/entityExport.js

@@ -0,0 +1,54 @@
+//#region src/movethewheels/utils/entityExport.ts
+var e = {
+	customers: "movethewheels_customers",
+	drivers: "movethewheels_drivers",
+	orders: "movethewheels_delivery_jobs",
+	products: "movethewheels_cargo_items",
+	vehicles: "movethewheels_vehicles"
+}, t = "\n  mutation StartMovethewheelsEntityExport($input: ExportMtwEntitiesInput!) {\n    exportMtwEntities(input: $input) {\n      id\n      status\n      downloadUrl\n    }\n  }\n", n = "\n  query GetMovethewheelsExportJob($id: ID!) {\n    getExportJob(id: $id) {\n      id\n      status\n      progress\n      downloadUrl\n      errorMessage\n    }\n  }\n", r = new Set([
+	"FAILED",
+	"CANCELLED",
+	"EXPIRED"
+]);
+function i(e) {
+	return e.status === "COMPLETED" ? e.downloadUrl ? {
+		kind: "ready",
+		jobId: e.id,
+		downloadUrl: e.downloadUrl
+	} : {
+		kind: "failed",
+		jobId: e.id,
+		message: "The export finished without a download link."
+	} : r.has(e.status) ? {
+		kind: "failed",
+		jobId: e.id,
+		message: e.errorMessage?.trim() || `The export was ${e.status.toLowerCase()}.`
+	} : null;
+}
+var a = (e) => new Promise((t) => setTimeout(t, e));
+async function o(e, t, { intervalMs: n = 2e3, timeoutMs: r = 9e4, sleep: o = a, now: s = Date.now, signal: c } = {}) {
+	let l = i(e);
+	if (l) return l;
+	let u = s() + r;
+	for (; s() < u && !(c?.aborted || (await o(n), c?.aborted));) {
+		let n = await t(e.id);
+		if (!n) return {
+			kind: "failed",
+			jobId: e.id,
+			message: "The export job could not be found."
+		};
+		let r = i(n);
+		if (r) return r;
+	}
+	return {
+		kind: "pending",
+		jobId: e.id
+	};
+}
+function s(e) {
+	if (typeof document > "u") return;
+	let t = document.createElement("a");
+	t.href = e, t.rel = "noopener", document.body.appendChild(t), t.click(), t.remove();
+}
+//#endregion
+export { n as GET_MTW_EXPORT_JOB_QUERY, e as MTW_EXPORT_ENTITY_TYPES, t as START_MTW_EXPORT_MUTATION, s as triggerUrlDownload, o as waitForExportJob };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.1030.1",
+  "version": "2026.1031.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [
@@ -37,7 +37,7 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "type:check": "bash scripts/build-limits.sh tsc --noEmit",
     "validate:schema-drift": "graphql-schema-drift",
-    "sanity": "bash scripts/build-limits.sh --gate bash -c 'bun run codegen && bun run validate:schema-drift && bun run lint:sanity && bun run format && bun run type:check && bun run verify:live-logistics-contract && bun run verify:empty-reuse-retry && bun run verify:empty-reuse-recovery && bun run verify:trip-utilization-input && bun run verify:trip-draft-context && bun run verify:stock-binding-input && bun run verify:stock-observation-input && bun run verify:pending-pick-input && bun run verify:pick-review-ack && bun run verify:driver-license-expiry && bun run verify:freight-input && bun run verify:freight-recovery && bun run verify:freight-commercial && bun run verify:freight-invoice && bun run verify:procedure-input && bun run verify:consolidation && bun run verify:multimodal-single-attempt && bun run verify:workspace-predispatch && bun run verify:tracking-quality-outcomes && bun run verify:shipment-status-authority && bun run verify:free-time-permissions && bun run verify:core-codegen && bun run verify:order-vehicle-hold && bun run verify:pallet-preview && bun run verify:consumed-fuel-preview && bun run build && bun run build-storybook'",
+    "sanity": "bash scripts/build-limits.sh --gate bash -c 'bun run codegen && bun run validate:schema-drift && bun run lint:sanity && bun run format && bun run type:check && bun run verify:live-logistics-contract && bun run verify:empty-reuse-retry && bun run verify:empty-reuse-recovery && bun run verify:trip-utilization-input && bun run verify:trip-draft-context && bun run verify:stock-binding-input && bun run verify:stock-observation-input && bun run verify:pending-pick-input && bun run verify:pick-review-ack && bun run verify:driver-license-expiry && bun run verify:freight-input && bun run verify:freight-recovery && bun run verify:freight-commercial && bun run verify:freight-invoice && bun run verify:procedure-input && bun run verify:consolidation && bun run verify:multimodal-single-attempt && bun run verify:workspace-predispatch && bun run verify:tracking-quality-outcomes && bun run verify:shipment-status-authority && bun run verify:free-time-permissions && bun run verify:core-codegen && bun run verify:order-vehicle-hold && bun run verify:pallet-preview && bun run verify:entity-export && bun run verify:consumed-fuel-preview && bun run build && bun run build-storybook'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test:storybook": "vitest run --project=storybook",
@@ -71,6 +71,7 @@
     "verify:freight-invoice": "bun test scripts/verify-invoice-comparison.test.ts && bun scripts/verify-invoice-recovery-hook.mjs",
     "verify:driver-license-expiry": "bun test scripts/check-driver-license-expiry.test.ts",
     "verify:core-codegen": "bun test scripts/codegen.test.ts && node --test scripts/check-package-types.test.mjs",
+    "verify:entity-export": "bun test scripts/check-entity-export.test.ts",
     "verify:pallet-preview": "bun test scripts/check-pallet-preview.test.ts && bun scripts/verify-pallet-preview-hook.mjs",
     "verify:consumed-fuel-preview": "bun test scripts/check-consumed-fuel-preview.test.ts && bun scripts/verify-consumed-fuel-preview-hook.mjs && bun scripts/verify-consumed-fuel-preview-component.mjs"
   },

package/src/movethewheels/components/ExportStatusBanner.tsx

@@ -0,0 +1,78 @@
+/**
+ * ExportStatusBanner — inline feedback for a list page's "Export" action.
+ *
+ * The MFE does not mount its own toaster, so export progress, success and
+ * failure are shown inline. A job that outlives the wait budget links to the
+ * host shell's shared Exports page, where it can be downloaded once ready.
+ */
+
+import { AlertCircle, CheckCircle, Info, Loader2, X } from 'lucide-react';
+import type { EntityExportState } from '../hooks/useEntityExport';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+
+interface ExportStatusBannerProps {
+  state: EntityExportState;
+  onDismiss: () => void;
+}
+
+/** Host-shell route of the shared export module (microfe-export). */
+const EXPORTS_PATH = '/export';
+
+export function ExportStatusBanner({ state, onDismiss }: ExportStatusBannerProps) {
+  const { navigate } = useMoveTheWheels();
+  if (state.phase === 'idle') return null;
+
+  const tone =
+    state.phase === 'error'
+      ? 'border-status-error-border bg-status-error-bg-subtle text-status-error-text'
+      : state.phase === 'ready'
+        ? 'border-status-success-border bg-status-success-bg-subtle text-status-success-text'
+        : 'border-status-info-border bg-status-info-bg-subtle text-status-info-text';
+
+  const icon =
+    state.phase === 'error' ? (
+      <AlertCircle size={18} className="mt-0.5 shrink-0" />
+    ) : state.phase === 'ready' ? (
+      <CheckCircle size={18} className="mt-0.5 shrink-0" />
+    ) : state.phase === 'running' ? (
+      <Loader2 size={18} className="mt-0.5 shrink-0 animate-spin" />
+    ) : (
+      <Info size={18} className="mt-0.5 shrink-0" />
+    );
+
+  return (
+    <div
+      role={state.phase === 'error' ? 'alert' : 'status'}
+      data-testid="mtw-export-status"
+      data-phase={state.phase}
+      className={`flex items-start gap-2 rounded-lg border px-4 py-3 text-sm ${tone}`}
+    >
+      {icon}
+      <span className="flex-1">
+        {state.message}
+        {state.phase === 'pending' ? (
+          <>
+            {' '}
+            <button
+              type="button"
+              className="font-medium underline underline-offset-2"
+              onClick={() => navigate(`${EXPORTS_PATH}/${state.jobId}`)}
+            >
+              Open Exports
+            </button>
+          </>
+        ) : null}
+      </span>
+      {state.phase !== 'running' ? (
+        <button
+          type="button"
+          aria-label="Dismiss export status"
+          className="shrink-0 opacity-70 hover:opacity-100"
+          onClick={onDismiss}
+        >
+          <X size={16} />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/movethewheels/hooks/useEntityExport.ts

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+import {
+  GET_MTW_EXPORT_JOB_QUERY,
+  MTW_EXPORT_ENTITY_TYPES,
+  START_MTW_EXPORT_MUTATION,
+  triggerUrlDownload,
+  waitForExportJob,
+  type ExportJobSnapshot,
+  type MtwExportEntity,
+} from '../utils/entityExport';
+
+export type EntityExportState =
+  | { phase: 'idle' }
+  | { phase: 'running'; message: string }
+  | { phase: 'ready'; message: string }
+  | { phase: 'pending'; message: string; jobId: string }
+  | { phase: 'error'; message: string };
+
+export interface UseEntityExportResult {
+  state: EntityExportState;
+  isExporting: boolean;
+  /** Start a CSV export of every record of this entity in the workspace. */
+  startExport: () => void;
+  dismiss: () => void;
+}
+
+/**
+ * Drives the list-page "Export" action: starts an `exportMtwEntities` job for
+ * the page's entity type, waits for wspace-export-svc to build the archive and
+ * starts the download. A job that takes longer than the wait budget keeps
+ * running and is reported as pending, with its id, so the user can collect it
+ * from the shared Exports page.
+ */
+export function useEntityExport(entity: MtwExportEntity, label: string): UseEntityExportResult {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const [state, setState] = useState<EntityExportState>({ phase: 'idle' });
+  const abortRef = useRef<AbortController | null>(null);
+  const runningRef = useRef(false);
+
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const startExport = useCallback(() => {
+    // Starting a second job while one is being prepared would only duplicate work.
+    if (runningRef.current) return;
+    if (!workspaceId) {
+      setState({ phase: 'error', message: 'Select a workspace before exporting.' });
+      return;
+    }
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setState({ phase: 'running', message: `Preparing your ${label} export…` });
+
+    const run = async () => {
+      runningRef.current = true;
+      try {
+        const started = await executeGraphQL<{ exportMtwEntities: ExportJobSnapshot }>(
+          graphQLOptions,
+          START_MTW_EXPORT_MUTATION,
+          {
+            input: {
+              workspaceId,
+              entityTypes: [MTW_EXPORT_ENTITY_TYPES[entity]],
+              format: 'CSV',
+              includeMetadata: true,
+            },
+          },
+          // Starting a job is not idempotent: never replay it on a transient error.
+          'SINGLE_ATTEMPT'
+        );
+        const outcome = await waitForExportJob(
+          started.exportMtwEntities,
+          async (id) => {
+            const data = await executeGraphQL<{ getExportJob: ExportJobSnapshot | null }>(
+              { ...graphQLOptions, signal: controller.signal },
+              GET_MTW_EXPORT_JOB_QUERY,
+              { id }
+            );
+            return data.getExportJob;
+          },
+          { signal: controller.signal }
+        );
+        if (controller.signal.aborted) return;
+        if (outcome.kind === 'ready') {
+          triggerUrlDownload(outcome.downloadUrl);
+          setState({ phase: 'ready', message: `Your ${label} export is downloading.` });
+        } else if (outcome.kind === 'pending') {
+          setState({
+            phase: 'pending',
+            jobId: outcome.jobId,
+            message: `Your ${label} export is still being prepared. It will be available on the Exports page when it finishes.`,
+          });
+        } else {
+          setState({ phase: 'error', message: `Export failed: ${outcome.message}` });
+        }
+      } catch (error) {
+        if (controller.signal.aborted) return;
+        setState({
+          phase: 'error',
+          message:
+            error instanceof Error && error.message
+              ? `Export failed: ${error.message}`
+              : 'Export failed. Please try again.',
+        });
+      } finally {
+        runningRef.current = false;
+      }
+    };
+    void run();
+  }, [entity, graphQLOptions, label, workspaceId]);
+
+  const dismiss = useCallback(() => setState({ phase: 'idle' }), []);
+
+  return { state, isExporting: state.phase === 'running', startExport, dismiss };
+}

package/src/movethewheels/pages/CustomersPage.tsx

@@ -15,10 +15,18 @@ import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { useEntityExport } from '../hooks/useEntityExport';
+import { ExportStatusBanner } from '../components/ExportStatusBanner';
 import type { Customer } from '../types';
 
 export default function CustomersPage() {
   const { basePath, navigate } = useMoveTheWheels();
+  const {
+    state: exportState,
+    isExporting,
+    startExport,
+    dismiss: dismissExport,
+  } = useEntityExport('customers', 'customer');
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
@@ -104,9 +112,9 @@ export default function CustomersPage() {
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
             {
-              label: 'Export',
+              label: isExporting ? 'Exporting…' : 'Export',
               icon: <Download size={16} />,
-              onSelect: () => goTo('import-export'),
+              onSelect: startExport,
             },
           ]}
         />
@@ -117,6 +125,7 @@ export default function CustomersPage() {
         satisfaction ratings here, and open a customer to see their order history before booking the
         next shipment.
       </PagePurpose>
+      <ExportStatusBanner state={exportState} onDismiss={dismissExport} />
 
       {/* Customer base at a glance — premium stat cards */}
       <div>