@burdenoff/microfe-movethewheels 2026.1028.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/MarketplacePage.tsx

@@ -0,0 +1,571 @@
+/**
+ * Marketplace Page (BOFF-3988, MOV-UC-13)
+ *
+ * The workspace's directory of vetted service providers — carriers, 3PLs,
+ * warehouses and specialists — with the offerings each one exposes. Fill a
+ * capacity gap by finding a provider here and making it a shipment's carrier,
+ * instead of buying a truck or leasing more space.
+ */
+import { useState } from 'react';
+import {
+  BadgeCheck,
+  ChevronDown,
+  ChevronUp,
+  Mail,
+  MapPin,
+  Package,
+  Pencil,
+  Phone,
+  Plus,
+  RefreshCw,
+  Star,
+  Store,
+  Trash2,
+  Truck,
+} from 'lucide-react';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { Notice, useNotice } from '../components/Notice';
+import { FormError } from '../components/FormError';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from '../components/ui';
+import {
+  AssignShipmentDialog,
+  OfferingDialog,
+  ProviderDialog,
+} from '../components/marketplace/MarketplaceDialogs';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
+import {
+  PROVIDER_TYPES,
+  humanizeEnum,
+  useMarketplaceActions,
+  useMarketplaceStats,
+  useProviderOfferings,
+  useServiceProviders,
+  useShipmentOptions,
+  type ProviderType,
+  type ServiceOffering,
+  type ServiceProvider,
+} from '../hooks/useMarketplace';
+import { formatCurrency } from '../utils/formatters';
+
+const PAGE_SIZE = 12;
+const ALL = 'ALL';
+
+function availabilityTone(availability: string): 'default' | 'secondary' | 'outline' {
+  if (availability === 'AVAILABLE') return 'default';
+  if (availability === 'LIMITED') return 'secondary';
+  return 'outline';
+}
+
+function OfferingsPanel({
+  provider,
+  refreshKey,
+  onAdd,
+  onEdit,
+  onDelete,
+}: {
+  provider: ServiceProvider;
+  refreshKey: number;
+  onAdd: () => void;
+  onEdit: (offering: ServiceOffering) => void;
+  onDelete: (offering: ServiceOffering) => void;
+}) {
+  const { offerings, isLoading, error } = useProviderOfferings(provider.id, refreshKey);
+  const { total: carried } = useShipmentOptions({ carrierId: provider.id, limit: 1 });
+
+  return (
+    <div className="mt-4 space-y-3 border-t border-border-subtle pt-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="text-sm font-medium">Offerings</p>
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-text-secondary">
+            Carrier on {carried} shipment{carried === 1 ? '' : 's'}
+          </span>
+          <Button size="sm" variant="outline" onClick={onAdd}>
+            <Plus size={14} className="mr-1" />
+            Add offering
+          </Button>
+        </div>
+      </div>
+      <FormError message={error?.message} />
+      {isLoading ? (
+        <Skeleton className="h-12 w-full" />
+      ) : offerings.length === 0 ? (
+        <p className="text-sm text-text-secondary">
+          No offerings yet. Add the lanes, services and indicative prices this provider offers.
+        </p>
+      ) : (
+        <ul className="space-y-2">
+          {offerings.map((offering) => (
+            <li
+              key={offering.id}
+              className="flex flex-wrap items-start justify-between gap-3 rounded-lg bg-bg-sunken px-3 py-2"
+            >
+              <div className="min-w-0">
+                <p className="text-sm font-medium">
+                  {offering.name}
+                  {!offering.isActive ? (
+                    <span className="ml-2 text-xs text-text-tertiary">(inactive)</span>
+                  ) : null}
+                </p>
+                <p className="text-xs text-text-secondary">
+                  {humanizeEnum(offering.category)}
+                  {offering.transitDays != null ? ` · ${offering.transitDays} day transit` : ''}
+                </p>
+                {offering.description ? (
+                  <p className="mt-1 text-xs text-text-secondary">{offering.description}</p>
+                ) : null}
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">
+                  {offering.price != null
+                    ? `${formatCurrency(offering.price, offering.currency)}${
+                        offering.pricingUnit ? ` / ${offering.pricingUnit}` : ''
+                      }`
+                    : 'Price on request'}
+                </span>
+                <Badge variant={availabilityTone(offering.availability)}>
+                  {humanizeEnum(offering.availability)}
+                </Badge>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  aria-label={`Edit ${offering.name}`}
+                  onClick={() => onEdit(offering)}
+                >
+                  <Pencil size={14} />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  aria-label={`Remove ${offering.name}`}
+                  onClick={() => onDelete(offering)}
+                >
+                  <Trash2 size={14} />
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function ProviderCard({
+  provider,
+  expanded,
+  refreshKey,
+  onToggle,
+  onEdit,
+  onDelete,
+  onAssign,
+  onAddOffering,
+  onEditOffering,
+  onDeleteOffering,
+}: {
+  provider: ServiceProvider;
+  expanded: boolean;
+  refreshKey: number;
+  onToggle: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onAssign: () => void;
+  onAddOffering: () => void;
+  onEditOffering: (offering: ServiceOffering) => void;
+  onDeleteOffering: (offering: ServiceOffering) => void;
+}) {
+  return (
+    <Card data-testid="mtw-provider-card">
+      <CardContent className="p-5">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <h3 className="text-base font-semibold">{provider.name}</h3>
+              {provider.isVerified ? (
+                <Badge variant="default" className="gap-1">
+                  <BadgeCheck size={12} />
+                  Verified
+                </Badge>
+              ) : (
+                <Badge variant="outline">Unverified</Badge>
+              )}
+              {!provider.isActive ? <Badge variant="secondary">Inactive</Badge> : null}
+            </div>
+            <p className="text-sm text-text-secondary">
+              {humanizeEnum(provider.type)}
+              {provider.rating != null ? (
+                <span className="ml-2 inline-flex items-center gap-1">
+                  <Star size={13} className="fill-current text-status-warning-text" />
+                  {provider.rating.toFixed(1)}
+                </span>
+              ) : null}
+            </p>
+            {provider.description ? (
+              <p className="text-sm text-text-secondary">{provider.description}</p>
+            ) : null}
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Button size="sm" onClick={onAssign}>
+              <Truck size={14} className="mr-1" />
+              Assign to shipment
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              aria-label={`Edit ${provider.name}`}
+              onClick={onEdit}
+            >
+              <Pencil size={16} />
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              aria-label={`Remove ${provider.name}`}
+              onClick={onDelete}
+            >
+              <Trash2 size={16} />
+            </Button>
+          </div>
+        </div>
+
+        <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-text-secondary">
+          {provider.serviceAreas.length > 0 ? (
+            <span className="inline-flex items-center gap-1">
+              <MapPin size={12} />
+              {provider.serviceAreas.join(', ')}
+            </span>
+          ) : null}
+          {provider.contact.email ? (
+            <span className="inline-flex items-center gap-1">
+              <Mail size={12} />
+              {provider.contact.email}
+            </span>
+          ) : null}
+          {provider.contact.phone ? (
+            <span className="inline-flex items-center gap-1">
+              <Phone size={12} />
+              {provider.contact.phone}
+            </span>
+          ) : null}
+        </div>
+        {provider.services.length > 0 ? (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {provider.services.map((service) => (
+              <Badge key={service} variant="secondary">
+                {service}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+
+        <button
+          type="button"
+          className="mt-3 inline-flex items-center gap-1 text-sm font-medium text-action-primary-text"
+          onClick={onToggle}
+          aria-expanded={expanded}
+        >
+          {expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+          {provider.offeringsCount} offering{provider.offeringsCount === 1 ? '' : 's'}
+        </button>
+        {expanded ? (
+          <OfferingsPanel
+            provider={provider}
+            refreshKey={refreshKey}
+            onAdd={onAddOffering}
+            onEdit={onEditOffering}
+            onDelete={onDeleteOffering}
+          />
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function MarketplacePage() {
+  const actions = useMarketplaceActions();
+  const { message: notice, notify } = useNotice();
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebouncedValue(search);
+  const [type, setType] = useState<ProviderType | typeof ALL>(ALL);
+  const [verifiedOnly, setVerifiedOnly] = useState(false);
+  const [page, setPage] = useState(0);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [providerDialog, setProviderDialog] = useState<{
+    open: boolean;
+    provider: ServiceProvider | null;
+  }>({ open: false, provider: null });
+  const [offeringDialog, setOfferingDialog] = useState<{
+    open: boolean;
+    provider: ServiceProvider | null;
+    offering: ServiceOffering | null;
+  }>({ open: false, provider: null, offering: null });
+  const [assignDialog, setAssignDialog] = useState<{
+    open: boolean;
+    provider: ServiceProvider | null;
+  }>({
+    open: false,
+    provider: null,
+  });
+
+  const { providers, total, isLoading, error, refetch } = useServiceProviders({
+    filters: {
+      search: debouncedSearch,
+      type: type === ALL ? undefined : type,
+      isVerified: verifiedOnly ? true : undefined,
+    },
+    limit: PAGE_SIZE,
+    offset: page * PAGE_SIZE,
+  });
+  const stats = useMarketplaceStats(refreshKey);
+  const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  const refresh = () => {
+    setRefreshKey((key) => key + 1);
+    void refetch();
+  };
+  const done = (message: string) => {
+    setActionError(null);
+    notify(message);
+    refresh();
+  };
+
+  const removeProvider = async (provider: ServiceProvider) => {
+    if (
+      !window.confirm(
+        `Remove ${provider.name} and its offerings from the marketplace? Shipments it already carries keep it as their carrier.`
+      )
+    )
+      return;
+    try {
+      await actions.deleteProvider(provider.id);
+      done(`Removed ${provider.name}.`);
+    } catch (removeError) {
+      setActionError(
+        removeError instanceof Error ? removeError.message : 'Could not remove the provider.'
+      );
+    }
+  };
+
+  const removeOffering = async (offering: ServiceOffering) => {
+    if (!window.confirm(`Remove the offering "${offering.name}"?`)) return;
+    try {
+      await actions.deleteOffering(offering.id);
+      done(`Removed ${offering.name}.`);
+    } catch (removeError) {
+      setActionError(
+        removeError instanceof Error ? removeError.message : 'Could not remove the offering.'
+      );
+    }
+  };
+
+  const hasFilters = Boolean(debouncedSearch.trim()) || type !== ALL || verifiedOnly;
+
+  return (
+    <PageLayout
+      title="Marketplace"
+      subtitle={stats ? `${stats.providers} service providers` : 'Service providers'}
+      icon={<Store size={24} />}
+      headerActions={
+        <CTAOverflowMenu
+          primary={{
+            label: 'Add provider',
+            icon: <Plus size={16} />,
+            onSelect: () => setProviderDialog({ open: true, provider: null }),
+          }}
+          actions={[{ label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: refresh }]}
+        />
+      }
+    >
+      <PagePurpose icon={<Store size={18} />}>
+        Your directory of vetted carriers, 3PLs, warehouses and specialists. When you are short of
+        capacity, find a provider here and make it a shipment&apos;s carrier instead of buying
+        assets.
+      </PagePurpose>
+
+      <Notice message={notice} />
+      <FormError message={actionError} />
+
+      <MetricGrid columns={4}>
+        <MetricCard
+          label="Providers"
+          value={stats?.providers ?? '—'}
+          icon={<Store size={20} />}
+          accent="brand"
+        />
+        <MetricCard
+          label="Verified"
+          value={stats?.verifiedProviders ?? '—'}
+          icon={<BadgeCheck size={20} />}
+          accent="success"
+        />
+        <MetricCard
+          label="Offerings"
+          value={stats?.offerings ?? '—'}
+          icon={<Package size={20} />}
+          accent="blue"
+        />
+        <MetricCard
+          label="Avg. rating"
+          value={stats?.avgRating != null ? stats.avgRating.toFixed(1) : '—'}
+          icon={<Star size={20} />}
+          accent="warning"
+        />
+      </MetricGrid>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <Input
+          aria-label="Search providers"
+          placeholder="Search by name, service or area…"
+          value={search}
+          onChange={(event) => {
+            setSearch(event.target.value);
+            setPage(0);
+          }}
+          className="sm:max-w-sm"
+        />
+        <Select
+          value={type}
+          onValueChange={(value) => {
+            setType(value as ProviderType | typeof ALL);
+            setPage(0);
+          }}
+        >
+          <SelectTrigger aria-label="Provider type" className="sm:w-56">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL}>All provider types</SelectItem>
+            {PROVIDER_TYPES.map((option) => (
+              <SelectItem key={option} value={option}>
+                {humanizeEnum(option)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant={verifiedOnly ? 'default' : 'outline'}
+          onClick={() => {
+            setVerifiedOnly((value) => !value);
+            setPage(0);
+          }}
+          aria-pressed={verifiedOnly}
+        >
+          <BadgeCheck size={16} className="mr-1.5" />
+          Verified only
+        </Button>
+      </div>
+
+      <FormError message={error?.message} />
+
+      {isLoading && providers.length === 0 ? (
+        <div className="grid gap-4">
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+      ) : providers.length === 0 && !error ? (
+        <Card>
+          <CardContent className="flex flex-col items-center gap-3 p-10 text-center">
+            <Store size={32} className="text-text-tertiary" />
+            <p className="font-medium">
+              {hasFilters ? 'No providers match these filters' : 'No providers yet'}
+            </p>
+            <p className="max-w-md text-sm text-text-secondary">
+              {hasFilters
+                ? 'Try a different search or clear the filters.'
+                : 'Add the carriers, 3PLs and warehouses you work with so your team can find capacity in one place.'}
+            </p>
+            {!hasFilters ? (
+              <Button onClick={() => setProviderDialog({ open: true, provider: null })}>
+                <Plus size={16} className="mr-1.5" />
+                Add provider
+              </Button>
+            ) : null}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4">
+          {providers.map((provider) => (
+            <ProviderCard
+              key={provider.id}
+              provider={provider}
+              expanded={expandedId === provider.id}
+              refreshKey={refreshKey}
+              onToggle={() => setExpandedId((id) => (id === provider.id ? null : provider.id))}
+              onEdit={() => setProviderDialog({ open: true, provider })}
+              onDelete={() => void removeProvider(provider)}
+              onAssign={() => setAssignDialog({ open: true, provider })}
+              onAddOffering={() => setOfferingDialog({ open: true, provider, offering: null })}
+              onEditOffering={(offering) => setOfferingDialog({ open: true, provider, offering })}
+              onDeleteOffering={(offering) => void removeOffering(offering)}
+            />
+          ))}
+        </div>
+      )}
+
+      {total > PAGE_SIZE ? (
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-text-secondary">
+            Page {page + 1} of {pageCount} · {total} providers
+          </span>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={page + 1 >= pageCount}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      ) : null}
+
+      <ProviderDialog
+        open={providerDialog.open}
+        provider={providerDialog.provider}
+        onOpenChange={(open) => setProviderDialog((state) => ({ ...state, open }))}
+        onDone={done}
+      />
+      <OfferingDialog
+        open={offeringDialog.open}
+        provider={offeringDialog.provider}
+        offering={offeringDialog.offering}
+        onOpenChange={(open) => setOfferingDialog((state) => ({ ...state, open }))}
+        onDone={(message) => {
+          if (offeringDialog.provider) setExpandedId(offeringDialog.provider.id);
+          done(message);
+        }}
+      />
+      <AssignShipmentDialog
+        open={assignDialog.open}
+        provider={assignDialog.provider}
+        onOpenChange={(open) => setAssignDialog((state) => ({ ...state, open }))}
+        onDone={done}
+      />
+    </PageLayout>
+  );
+}

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>