@burdenoff/microfe-movethewheels 2026.1028.1 → 2026.1031.1

package/src/movethewheels/MoveTheWheelsRoot.tsx

@@ -22,6 +22,7 @@ import {
   ClipboardList,
   DollarSign,
   Bot,
+  Store,
 } from 'lucide-react';
 import { MoveTheWheelsProvider } from './providers/MoveTheWheelsProvider';
 import { FeatureFlagProvider } from '@burdenoff/fe-libs/shared/feature-flags';
@@ -233,6 +234,13 @@ const NavRegistrar: FC<Pick<MoveTheWheelsRootProps, 'registerNavItems' | 'basePa
           icon: <Users size={16} />,
           order: 6,
         },
+        {
+          id: 'mtw-marketplace',
+          label: tr('movethewheels.root.nav.marketplace', 'Marketplace'),
+          path: joinPath(basePath, 'marketplace'),
+          icon: <Store size={16} />,
+          order: 6,
+        },
         {
           id: 'mtw-routes',
           label: tr('movethewheels.root.nav.routes', 'Routes'),

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -71,6 +71,7 @@ const WarehousesPage = lazy(() => import('./pages/WarehousesPage'));
 const WarehouseDetailsPage = lazy(() => import('./pages/WarehouseDetailsPage'));
 const CustomersPage = lazy(() => import('./pages/CustomersPage'));
 const CustomerDetailsPage = lazy(() => import('./pages/CustomerDetailsPage'));
+const MarketplacePage = lazy(() => import('./pages/MarketplacePage'));
 const RoutesPage = lazy(() => import('./pages/RoutesPage'));
 const RouteDetailsPage = lazy(() => import('./pages/RouteDetailsPage'));
 const AnalyticsPage = lazy(() => import('./pages/AnalyticsPage'));
@@ -156,6 +157,9 @@ export function MoveTheWheelsRoutes() {
         <Route path="customers/new" element={<CustomerDetailsPage />} />
         <Route path="customers/:customerId" element={<CustomerDetailsPage />} />
 
+        {/* Marketplace — service providers and offerings (BOFF-3988) */}
+        <Route path="marketplace" element={<MarketplacePage />} />
+
         {/* Routes */}
         <Route path="routes" element={<RoutesPage />} />
         <Route path="routes/trip-utilization" element={<TripUtilizationPage />} />

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>
+  );
+}