@burdenoff/microfe-movethewheels 2026.1030.1 → 2026.1031.1

package/src/movethewheels/pages/DriversPage.tsx

@@ -37,6 +37,8 @@ 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 { DRIVER_STATUS_LABELS } from '../constants';
 import type { Driver, DriverStatus } from '../types';
 
@@ -52,6 +54,12 @@ const STATUS_OPTIONS: Array<{ value: DriverStatus | 'all'; label: string }> = [
 
 export default function DriversPage() {
   const { basePath, navigate } = useMoveTheWheels();
+  const {
+    state: exportState,
+    isExporting,
+    startExport,
+    dismiss: dismissExport,
+  } = useEntityExport('drivers', 'driver');
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
@@ -224,9 +232,9 @@ export default function DriversPage() {
           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,
             },
           ]}
         />
@@ -237,6 +245,7 @@ export default function DriversPage() {
         contact number and the vehicle they are on — open a driver to review their record before
         assigning them to an order or route.
       </PagePurpose>
+      <ExportStatusBanner state={exportState} onDismiss={dismissExport} />
 
       {/* Workforce at a glance — premium stat cards */}
       <div>

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -39,6 +39,8 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { useEntityExport } from '../hooks/useEntityExport';
+import { ExportStatusBanner } from '../components/ExportStatusBanner';
 import type { Order, OrderStatus } from '../types';
 
 export default function OrdersListPage() {
@@ -48,6 +50,12 @@ export default function OrdersListPage() {
     return value === key ? fallback : value;
   };
   const { basePath, navigate } = useMoveTheWheels();
+  const {
+    state: exportState,
+    isExporting,
+    startExport,
+    dismiss: dismissExport,
+  } = useEntityExport('orders', 'order');
   const [statusFilter, setStatusFilter] = useState<OrderStatus | 'all'>('all');
   const [unassignedOnly, setUnassignedOnly] = useState(false);
   const [page, setPage] = useState(0);
@@ -219,9 +227,11 @@ export default function OrdersListPage() {
               onSelect: () => refetch(),
             },
             {
-              label: t('movethewheels.orders.actions.export', 'Export'),
+              label: isExporting
+                ? t('movethewheels.orders.actions.exporting', 'Exporting…')
+                : t('movethewheels.orders.actions.export', 'Export'),
               icon: <Download size={16} />,
-              onSelect: () => goTo('import-export'),
+              onSelect: startExport,
             },
           ]}
         />
@@ -233,6 +243,7 @@ export default function OrdersListPage() {
           'Every delivery job lives here — their status, priority and value. Use this list to find an order, filter by status, and open one to assign a driver, track it, or update fulfilment.'
         )}
       </PagePurpose>
+      <ExportStatusBanner state={exportState} onDismiss={dismissExport} />
 
       {/* Pipeline at a glance — premium stat cards */}
       <div>

package/src/movethewheels/pages/ProductsPage.tsx

@@ -14,10 +14,18 @@ import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { useEntityExport } from '../hooks/useEntityExport';
+import { ExportStatusBanner } from '../components/ExportStatusBanner';
 import type { Product } from '../types';
 
 export default function ProductsPage() {
   const { basePath, navigate } = useMoveTheWheels();
+  const {
+    state: exportState,
+    isExporting,
+    startExport,
+    dismiss: dismissExport,
+  } = useEntityExport('products', 'product');
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
@@ -127,9 +135,9 @@ export default function ProductsPage() {
           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,
             },
           ]}
         />
@@ -140,6 +148,7 @@ export default function ProductsPage() {
         flags (fragile, hazardous, temperature-controlled) drive how it&apos;s packed, priced and
         routed — keep them accurate so shipments are quoted and handled correctly.
       </PagePurpose>
+      <ExportStatusBanner state={exportState} onDismiss={dismissExport} />
 
       {/* Catalog at a glance — premium stat cards */}
       <div>

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -33,6 +33,8 @@ import { useVehicles, useFleetStats } from '../hooks/useFleet';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
+import { useEntityExport } from '../hooks/useEntityExport';
+import { ExportStatusBanner } from '../components/ExportStatusBanner';
 import { VEHICLE_STATUS_LABELS } from '../constants';
 import type { Vehicle, VehicleStatus } from '../types';
 
@@ -45,6 +47,12 @@ const STATUS_OPTIONS: Array<{ value: VehicleStatus | 'all'; label: string }> = [
 
 export default function VehiclesPage() {
   const { basePath, navigate } = useMoveTheWheels();
+  const {
+    state: exportState,
+    isExporting,
+    startExport,
+    dismiss: dismissExport,
+  } = useEntityExport('vehicles', 'vehicle');
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
@@ -156,9 +164,9 @@ export default function VehiclesPage() {
           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,
             },
           ]}
         />
@@ -169,6 +177,7 @@ export default function VehiclesPage() {
         maintenance status here so you always know which vehicles are road-ready before dispatching
         an order.
       </PagePurpose>
+      <ExportStatusBanner state={exportState} onDismiss={dismissExport} />
 
       {/* Fleet at a glance — premium stat cards */}
       <div>

package/src/movethewheels/utils/entityExport.ts

@@ -0,0 +1,140 @@
+/**
+ * Entity export — starts a MoveTheWheels export job and waits for its archive.
+ *
+ * `exportMtwEntities` hands the request to wspace-export-svc, which builds a
+ * ZIP of the workspace's records in the background. The job is read back with
+ * `getExportJob` until it reports COMPLETED (with a presigned `downloadUrl`),
+ * FAILED/CANCELLED/EXPIRED, or the wait budget runs out. A job that is still
+ * running when the budget is spent keeps going server side and stays
+ * downloadable from the shared Exports page.
+ *
+ * Kept free of React so the polling contract can be unit-tested.
+ */
+
+/** List pages that offer an export, mapped to wspace-export-svc entity types. */
+export const MTW_EXPORT_ENTITY_TYPES = {
+  customers: 'movethewheels_customers',
+  drivers: 'movethewheels_drivers',
+  orders: 'movethewheels_delivery_jobs',
+  products: 'movethewheels_cargo_items',
+  vehicles: 'movethewheels_vehicles',
+} as const;
+
+export type MtwExportEntity = keyof typeof MTW_EXPORT_ENTITY_TYPES;
+
+export const START_MTW_EXPORT_MUTATION = `
+  mutation StartMovethewheelsEntityExport($input: ExportMtwEntitiesInput!) {
+    exportMtwEntities(input: $input) {
+      id
+      status
+      downloadUrl
+    }
+  }
+`;
+
+export const GET_MTW_EXPORT_JOB_QUERY = `
+  query GetMovethewheelsExportJob($id: ID!) {
+    getExportJob(id: $id) {
+      id
+      status
+      progress
+      downloadUrl
+      errorMessage
+    }
+  }
+`;
+
+export interface ExportJobSnapshot {
+  id: string;
+  status: string;
+  progress?: number | null;
+  downloadUrl?: string | null;
+  errorMessage?: string | null;
+}
+
+export type ExportJobOutcome =
+  | { kind: 'ready'; jobId: string; downloadUrl: string }
+  | { kind: 'failed'; jobId: string; message: string }
+  | { kind: 'pending'; jobId: string };
+
+const TERMINAL_FAILURES = new Set(['FAILED', 'CANCELLED', 'EXPIRED']);
+
+/** Classify one job snapshot; `null` means keep waiting. */
+export function classifyExportJob(job: ExportJobSnapshot): ExportJobOutcome | null {
+  if (job.status === 'COMPLETED') {
+    if (job.downloadUrl) return { kind: 'ready', jobId: job.id, downloadUrl: job.downloadUrl };
+    return {
+      kind: 'failed',
+      jobId: job.id,
+      message: 'The export finished without a download link.',
+    };
+  }
+  if (TERMINAL_FAILURES.has(job.status)) {
+    return {
+      kind: 'failed',
+      jobId: job.id,
+      message: job.errorMessage?.trim() || `The export was ${job.status.toLowerCase()}.`,
+    };
+  }
+  return null;
+}
+
+export interface WaitForExportOptions {
+  /** Delay between reads of the job. */
+  intervalMs?: number;
+  /** Total time to wait before reporting the job as still pending. */
+  timeoutMs?: number;
+  /** Injectable for tests. */
+  sleep?: (ms: number) => Promise<void>;
+  /** Injectable for tests. */
+  now?: () => number;
+  /** Stops waiting (e.g. the page unmounted); resolves as pending. */
+  signal?: AbortSignal;
+}
+
+const defaultSleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Read the job until it settles or the wait budget is spent. `initial` is the
+ * snapshot returned by the start mutation, so an already-finished job resolves
+ * without another round trip.
+ */
+export async function waitForExportJob(
+  initial: ExportJobSnapshot,
+  fetchJob: (id: string) => Promise<ExportJobSnapshot | null>,
+  {
+    intervalMs = 2000,
+    timeoutMs = 90000,
+    sleep = defaultSleep,
+    now = Date.now,
+    signal,
+  }: WaitForExportOptions = {}
+): Promise<ExportJobOutcome> {
+  const settled = classifyExportJob(initial);
+  if (settled) return settled;
+
+  const deadline = now() + timeoutMs;
+  while (now() < deadline) {
+    if (signal?.aborted) break;
+    await sleep(intervalMs);
+    if (signal?.aborted) break;
+    const job = await fetchJob(initial.id);
+    if (!job) {
+      return { kind: 'failed', jobId: initial.id, message: 'The export job could not be found.' };
+    }
+    const outcome = classifyExportJob(job);
+    if (outcome) return outcome;
+  }
+  return { kind: 'pending', jobId: initial.id };
+}
+
+/** Start the archive download in the current tab without navigating away. */
+export function triggerUrlDownload(url: string): void {
+  if (typeof document === 'undefined') return;
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.rel = 'noopener';
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+}