@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -4,6 +4,7 @@
  * Displays detailed information about a specific order.
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Package,
@@ -19,6 +20,9 @@ import {
   CheckCircle,
   Edit,
   Printer,
+  ArrowRight,
+  XCircle,
+  UserCheck,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import {
@@ -35,6 +39,12 @@ import {
   Button,
   Badge,
   Separator,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Table,
   TableBody,
   TableCell,
@@ -43,15 +53,106 @@ import {
   TableRow,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useOrder } from '../hooks/useOrders';
+import { useOrder, useOrders } from '../hooks/useOrders';
+import { useFleet } from '../hooks/useFleet';
+import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
+import { DocumentsCard } from '../components/DocumentsCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate, formatAddress } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import type { OrderStatus } from '../types';
+
+/**
+ * Forward order-status pipeline. `updateOrderStatus` walks this sequence one
+ * step at a time; CANCELLED is offered separately as a terminal action.
+ */
+const STATUS_FLOW: OrderStatus[] = [
+  'pending',
+  'confirmed',
+  'assigned',
+  'picked_up',
+  'in_transit',
+  'out_for_delivery',
+  'delivered',
+];
+
+const STATUS_LABELS: Record<OrderStatus, string> = {
+  pending: 'Pending',
+  confirmed: 'Confirmed',
+  assigned: 'Assigned',
+  picked_up: 'Picked Up',
+  in_transit: 'In Transit',
+  out_for_delivery: 'Out for Delivery',
+  delivered: 'Delivered',
+  cancelled: 'Cancelled',
+  failed: 'Failed',
+};
+
+function nextStatus(current: OrderStatus): OrderStatus | null {
+  const index = STATUS_FLOW.indexOf(current);
+  if (index === -1 || index >= STATUS_FLOW.length - 1) return null;
+  return STATUS_FLOW[index + 1];
+}
 
 export default function OrderDetailsPage() {
   const { orderId } = useParams<{ orderId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { order, isLoading, error, refetch } = useOrder(orderId);
+  const { updateOrder, updateOrderStatus } = useOrders();
+  const { vehicles, drivers } = useFleet();
+  const { message: notice, notify } = useNotice();
+
+  const [selectedVehicle, setSelectedVehicle] = useState('');
+  const [selectedDriver, setSelectedDriver] = useState('');
+  const [assigning, setAssigning] = useState(false);
+  const [advancing, setAdvancing] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const availableVehicles = vehicles.filter(
+    (vehicle) => vehicle.status === 'available' || vehicle.id === order?.vehicleId
+  );
+  const availableDrivers = drivers.filter(
+    (driver) => driver.status === 'available' || driver.id === order?.driverId
+  );
+
+  const handleAssign = async () => {
+    if (!orderId || (!selectedVehicle && !selectedDriver)) {
+      setActionError('Pick a vehicle and/or a driver to assign.');
+      return;
+    }
+    setAssigning(true);
+    setActionError(null);
+    try {
+      await updateOrder(orderId, {
+        vehicleId: selectedVehicle || undefined,
+        driverId: selectedDriver || undefined,
+      });
+      notify('Assignment updated.');
+      setSelectedVehicle('');
+      setSelectedDriver('');
+      refetch();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : 'Failed to update assignment.');
+    } finally {
+      setAssigning(false);
+    }
+  };
+
+  const handleStatusChange = async (status: OrderStatus, successMessage: string) => {
+    if (!orderId) return;
+    setAdvancing(true);
+    setActionError(null);
+    try {
+      await updateOrderStatus(orderId, status);
+      notify(successMessage);
+      refetch();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : 'Failed to update status.');
+    } finally {
+      setAdvancing(false);
+    }
+  };
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -360,7 +461,7 @@ export default function OrderDetailsPage() {
             </div>
           </EmphasisPanel>
 
-          {/* Assignment Info */}
+          {/* Assignment — assign a vehicle & driver and advance the status */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
@@ -370,18 +471,118 @@ export default function OrderDetailsPage() {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
+                {actionError && <FormError message={actionError} />}
+                {notice && <Notice message={notice} />}
+
                 <div>
-                  <p className="text-sm text-text-secondary">Driver</p>
-                  <p className="text-sm">{order.driverId || 'Not assigned'}</p>
+                  <p className="text-sm text-text-secondary">Tracking Number</p>
+                  <p className="text-sm font-mono">{order.trackingNumber || '—'}</p>
                 </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Vehicle</p>
-                  <p className="text-sm">{order.vehicleId || 'Not assigned'}</p>
+
+                <Separator />
+
+                <div className="space-y-3">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="assign-vehicle">Vehicle</Label>
+                    <Select value={selectedVehicle} onValueChange={setSelectedVehicle}>
+                      <SelectTrigger id="assign-vehicle">
+                        <SelectValue
+                          placeholder={
+                            order.vehicleId ? `Current: ${order.vehicleId}` : 'Select a vehicle'
+                          }
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableVehicles.length === 0 ? (
+                          <SelectItem value="none" disabled>
+                            No available vehicles
+                          </SelectItem>
+                        ) : (
+                          availableVehicles.map((vehicle) => (
+                            <SelectItem key={vehicle.id} value={vehicle.id}>
+                              {vehicle.vehicleNumber} ({vehicle.type})
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="assign-driver">Driver</Label>
+                    <Select value={selectedDriver} onValueChange={setSelectedDriver}>
+                      <SelectTrigger id="assign-driver">
+                        <SelectValue
+                          placeholder={
+                            order.driverId ? `Current: ${order.driverId}` : 'Select a driver'
+                          }
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableDrivers.length === 0 ? (
+                          <SelectItem value="none" disabled>
+                            No available drivers
+                          </SelectItem>
+                        ) : (
+                          availableDrivers.map((driver) => (
+                            <SelectItem key={driver.id} value={driver.id}>
+                              {driver.fullName} ({driver.employeeId})
+                            </SelectItem>
+                          ))
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <Button
+                    className="w-full"
+                    onClick={handleAssign}
+                    disabled={assigning || (!selectedVehicle && !selectedDriver)}
+                  >
+                    <UserCheck size={16} />
+                    {assigning ? 'Assigning…' : 'Assign driver & vehicle'}
+                  </Button>
                 </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Tracking Number</p>
-                  <p className="text-sm font-mono">{order.trackingNumber}</p>
+
+                <Separator />
+
+                <div className="space-y-2">
+                  <p className="text-sm text-text-secondary">
+                    Current status: <span className="font-medium">{STATUS_LABELS[order.status]}</span>
+                  </p>
+                  {(() => {
+                    const upcoming = nextStatus(order.status);
+                    if (!upcoming) return null;
+                    return (
+                      <Button
+                        variant="outline"
+                        className="w-full"
+                        onClick={() =>
+                          handleStatusChange(
+                            upcoming,
+                            `Order advanced to ${STATUS_LABELS[upcoming]}.`
+                          )
+                        }
+                        disabled={advancing}
+                      >
+                        <ArrowRight size={16} />
+                        {advancing ? 'Updating…' : `Advance to ${STATUS_LABELS[upcoming]}`}
+                      </Button>
+                    );
+                  })()}
+                  {order.status !== 'cancelled' && order.status !== 'delivered' && (
+                    <Button
+                      variant="outline"
+                      className="w-full text-status-error-text"
+                      onClick={() => handleStatusChange('cancelled', 'Order cancelled.')}
+                      disabled={advancing}
+                    >
+                      <XCircle size={16} />
+                      Cancel order
+                    </Button>
+                  )}
                 </div>
+
                 <Button
                   variant="outline"
                   className="w-full"
@@ -394,6 +595,9 @@ export default function OrderDetailsPage() {
             </CardContent>
           </Card>
 
+          {/* Documents — real files via wspace-files-svc */}
+          <DocumentsCard entityType="order" entityId={order.id} />
+
           {/* Special Instructions */}
           {order.specialInstructions && (
             <Card>

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -5,11 +5,23 @@
  */
 
 import { useState } from 'react';
-import { Package, Plus, Filter, Download, RefreshCw } from 'lucide-react';
+import {
+  Package,
+  Plus,
+  Filter,
+  Download,
+  RefreshCw,
+  UserPlus,
+  UserCheck,
+  Clock,
+  Truck,
+  CheckCircle2,
+} from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, PriorityBadge, TypeBadge } from '../components/StatusBadge';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import {
   Button,
   Card,
@@ -21,7 +33,7 @@ import {
   SelectValue,
   Badge,
 } from '../components/ui';
-import { useOrders } from '../hooks/useOrders';
+import { useOrders, useOrderStats } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
@@ -37,21 +49,36 @@ export default function OrdersListPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [statusFilter, setStatusFilter] = useState<OrderStatus | 'all'>('all');
   const [typeFilter, setTypeFilter] = useState<'b2b' | 'b2c' | 'all'>('all');
+  const [unassignedOnly, setUnassignedOnly] = useState(false);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+
+  const filtersActive = statusFilter !== 'all' || typeFilter !== 'all' || unassignedOnly;
 
-  const { orders, totalOrders, isLoading, refetch } = useOrders({
+  const { orders, hasMore, isLoading, refetch } = useOrders({
     filters: {
       status: statusFilter === 'all' ? undefined : statusFilter,
       orderType: typeFilter === 'all' ? undefined : typeFilter,
+      unassigned: unassignedOnly || undefined,
     },
-    limit: 50,
+    limit: pageSize,
+    offset: page * pageSize,
   });
 
+  // Pipeline totals + "at a glance" tiles come from the live aggregate, never
+  // from the truncated current page.
+  const { stats } = useOrderStats();
+  const totalOrders = stats.total;
+
   const goTo = (path: string) => {
     if (navigate) {
       navigate(joinPath(basePath, path));
     }
   };
 
+  // Reset to the first page whenever the active filter set changes.
+  const resetPage = () => setPage(0);
+
   const columns: Column<Order>[] = [
     {
       id: 'orderNumber',
@@ -129,6 +156,29 @@ export default function OrdersListPage() {
       className: 'min-w-[100px] whitespace-nowrap',
       cell: (row) => formatDate(row.createdAt, 'relative'),
     },
+    {
+      id: 'driver',
+      header: t('movethewheels.orders.table.driver', 'Driver'),
+      className: 'min-w-[120px] whitespace-nowrap',
+      cell: (row) =>
+        row.driverId ? (
+          <span className="inline-flex items-center gap-1 text-sm text-status-success-text">
+            <UserCheck size={14} /> {t('movethewheels.orders.table.assigned', 'Assigned')}
+          </span>
+        ) : (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              goTo(`orders/${row.id}`);
+            }}
+          >
+            <UserPlus size={14} className="mr-1" />
+            {t('movethewheels.orders.table.assign', 'Assign')}
+          </Button>
+        ),
+    },
   ];
 
   const statusOptions: { value: OrderStatus | 'all'; label: string }[] = [
@@ -181,47 +231,40 @@ export default function OrdersListPage() {
         )}
       </PagePurpose>
 
-      {/* Pipeline at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">
+      {/* Pipeline at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">
           {t('movethewheels.orders.glance.title', 'Pipeline at a glance')}
         </p>
-        <div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalOrders}</p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.total', 'Total orders')}
-            </p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {orders.filter((o) => o.status === 'pending').length}
-            </p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.pending', 'Pending')}
-            </p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {
-                orders.filter((o) => o.status === 'in_transit' || o.status === 'out_for_delivery')
-                  .length
-              }
-            </p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.inTransit', 'In transit')}
-            </p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {orders.filter((o) => o.status === 'delivered').length}
-            </p>
-            <p className="text-xs text-text-secondary">
-              {t('movethewheels.orders.glance.delivered', 'Delivered')}
-            </p>
-          </div>
-        </div>
-      </EmphasisPanel>
+        <MetricGrid columns={4}>
+          <MetricCard
+            label={t('movethewheels.orders.glance.total', 'Total orders')}
+            value={totalOrders}
+            icon={<Package size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label={t('movethewheels.orders.glance.pending', 'Pending')}
+            value={stats.byStatus.pending}
+            icon={<Clock size={20} />}
+            accent="warning"
+            subtitle={t('movethewheels.orders.glance.pendingSub', 'Awaiting fulfilment')}
+          />
+          <MetricCard
+            label={t('movethewheels.orders.glance.inTransit', 'In transit')}
+            value={stats.byStatus.in_transit + stats.byStatus.out_for_delivery}
+            icon={<Truck size={20} />}
+            accent="blue"
+            subtitle={t('movethewheels.orders.glance.inTransitSub', 'On the road now')}
+          />
+          <MetricCard
+            label={t('movethewheels.orders.glance.delivered', 'Delivered')}
+            value={stats.byStatus.delivered}
+            icon={<CheckCircle2 size={20} />}
+            accent="success"
+          />
+        </MetricGrid>
+      </div>
 
       {/* Filters */}
       <Card>
@@ -235,7 +278,10 @@ export default function OrdersListPage() {
             </div>
             <Select
               value={statusFilter}
-              onValueChange={(value) => setStatusFilter(value as OrderStatus | 'all')}
+              onValueChange={(value) => {
+                setStatusFilter(value as OrderStatus | 'all');
+                resetPage();
+              }}
             >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder={t('movethewheels.orders.filters.status', 'Status')} />
@@ -250,7 +296,10 @@ export default function OrdersListPage() {
             </Select>
             <Select
               value={typeFilter}
-              onValueChange={(value) => setTypeFilter(value as 'b2b' | 'b2c' | 'all')}
+              onValueChange={(value) => {
+                setTypeFilter(value as 'b2b' | 'b2c' | 'all');
+                resetPage();
+              }}
             >
               <SelectTrigger className="w-[150px]">
                 <SelectValue placeholder={t('movethewheels.orders.filters.type', 'Type')} />
@@ -263,13 +312,26 @@ export default function OrdersListPage() {
                 <SelectItem value="b2c">B2C</SelectItem>
               </SelectContent>
             </Select>
-            {(statusFilter !== 'all' || typeFilter !== 'all') && (
+            <Button
+              variant={unassignedOnly ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => {
+                setUnassignedOnly((prev) => !prev);
+                resetPage();
+              }}
+            >
+              <UserPlus size={14} className="mr-1" />
+              {t('movethewheels.orders.filters.unassigned', 'Needs driver')}
+            </Button>
+            {filtersActive && (
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={() => {
                   setStatusFilter('all');
                   setTypeFilter('all');
+                  setUnassignedOnly(false);
+                  resetPage();
                 }}
               >
                 {t('movethewheels.orders.filters.clear', 'Clear filters')}
@@ -289,6 +351,15 @@ export default function OrdersListPage() {
         searchFields={['orderNumber', 'customerInfo'] as (keyof Order)[]}
         onRowClick={(row) => goTo(`orders/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        totalItems={filtersActive ? undefined : totalOrders}
+        hasNextPage={hasMore}
         emptyMessage={t('movethewheels.orders.empty', 'No orders found')}
         emptyIllustration="empty-data"
         emptyTitle={t('movethewheels.orders.emptyTitle', 'No orders yet')}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -2,12 +2,14 @@
  * Products Page - List of all products
  */
 
-import { Package, Plus, RefreshCw, Download } from 'lucide-react';
+import { useState } from 'react';
+import { Package, Plus, RefreshCw, Download, AlertTriangle, Thermometer } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
+import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { Badge } from '../components/ui';
-import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useProducts } from '../hooks/useInventory';
+import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { useProducts, useProductStats } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -15,7 +17,14 @@ import type { Product } from '../types';
 
 export default function ProductsPage() {
   const { basePath, navigate } = useMoveTheWheels();
-  const { products, totalProducts, isLoading, refetch } = useProducts();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const { products, hasMore, isLoading, refetch } = useProducts({
+    limit: pageSize,
+    offset: page * pageSize,
+  });
+  // Bounded aggregate for the tiles + subtitle — not the truncated page.
+  const { stats } = useProductStats();
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -94,7 +103,7 @@ export default function ProductsPage() {
   return (
     <PageLayout
       title="Products"
-      subtitle={`${totalProducts} products`}
+      subtitle={`${stats.total} products`}
       icon={<Package size={24} />}
       headerActions={
         <CTAOverflowMenu
@@ -105,7 +114,11 @@ export default function ProductsPage() {
           }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
-            { label: 'Export', icon: <Download size={16} />, onSelect: () => goTo('import-export') },
+            {
+              label: 'Export',
+              icon: <Download size={16} />,
+              onSelect: () => goTo('import-export'),
+            },
           ]}
         />
       }
@@ -116,28 +129,31 @@ export default function ProductsPage() {
         routed — keep them accurate so shipments are quoted and handled correctly.
       </PagePurpose>
 
-      {/* Catalog at a glance — the page's single emphasis zone */}
-      <EmphasisPanel>
-        <p className="text-sm font-medium text-text-secondary">Catalog at a glance</p>
-        <div className="mt-3 grid grid-cols-3 gap-4">
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">{totalProducts}</p>
-            <p className="text-xs text-text-secondary">Total products</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {products.filter((p) => p.fragile || p.hazardous).length}
-            </p>
-            <p className="text-xs text-text-secondary">Special handling</p>
-          </div>
-          <div>
-            <p className="text-2xl font-bold text-text-primary tabular-nums">
-              {products.filter((p) => p.temperatureControlled).length}
-            </p>
-            <p className="text-xs text-text-secondary">Temp-controlled</p>
-          </div>
-        </div>
-      </EmphasisPanel>
+      {/* Catalog at a glance — premium stat cards */}
+      <div>
+        <p className="mb-3 text-sm font-medium text-text-secondary">Catalog at a glance</p>
+        <MetricGrid columns={3}>
+          <MetricCard
+            label="Total products"
+            value={stats.total}
+            icon={<Package size={20} />}
+            accent="brand"
+          />
+          <MetricCard
+            label="Special handling"
+            value={stats.specialHandling}
+            icon={<AlertTriangle size={20} />}
+            accent="warning"
+            subtitle="Fragile or hazardous"
+          />
+          <MetricCard
+            label="Temp-controlled"
+            value={stats.temperatureControlled}
+            icon={<Thermometer size={20} />}
+            accent="blue"
+          />
+        </MetricGrid>
+      </div>
 
       <DataTable
         columns={columns}
@@ -148,6 +164,14 @@ export default function ProductsPage() {
         searchFields={['name', 'sku', 'category'] as (keyof Product)[]}
         onRowClick={(row) => goTo(`inventory/products/${row.id}`)}
         getRowId={(row) => row.id}
+        pageIndex={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(0);
+        }}
+        hasNextPage={hasMore}
         emptyIllustration="empty-files"
         emptyTitle="No products yet"
         emptyDescription="Add products to your catalog so they can be added to orders and stocked in warehouses."