@burdenoff/microfe-movethewheels 2026.924.2 → 2026.925.2

package/dist/utils/mapMarkers.js

@@ -6,7 +6,8 @@ function e(e) {
 		case "delivered": return "delivered";
 		case "failed":
 		case "delayed":
-		case "cancelled": return "delayed";
+		case "cancelled":
+		case "returned": return "delayed";
 		case "assigned":
 		case "picked_up":
 		case "confirmed": return "active";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.924.2",
+  "version": "2026.925.2",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/generated/wspace-operations.ts

@@ -292,7 +292,7 @@ export type DeleteMovethewheelsOrderMutation = { __typename?: 'Mutation', delete
 export type GetMovethewheelsDashboardQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type GetMovethewheelsDashboardQuery = { __typename?: 'Query', dashboardMetrics: { __typename?: 'MtwDashboardMetrics', totalDeliveryJobs: number, activeDeliveries: number, availableDrivers: number, activeVehicles: number, lowStockItems: number, totalRevenue: number, recentDeliveryJobs: Array<{ __typename?: 'MtwDeliveryJob', id: string, deliveryJobNumber: string, status: Types.DeliveryJobStatus, priority: Types.DeliveryPriority, customerId: string, trackingNumber?: string | null, pickupAddress: Record<string, unknown>, deliveryAddress: Record<string, unknown>, cargoItems: Record<string, unknown>, pricing?: Record<string, unknown> | null, scheduledDelivery?: string | null, vehicleId?: string | null, driverId?: string | null, createdAt: string, updatedAt: string }> }, deliveryJobStats: { __typename?: 'MtwDeliveryJobStats', total: number, pending: number, inTransit: number, delivered: number, cancelled: number, failed: number }, fleetStats: { __typename?: 'MtwFleetStats', totalVehicles: number, activeVehicles: number, inTransitVehicles: number, maintenanceVehicles: number, totalDrivers: number, availableDrivers: number, onDeliveryDrivers: number }, financeMetrics: { __typename?: 'MtwFinanceMetrics', fuelCost: number, openInvoices: number, revenue: { __typename?: 'MtwRevenueMetrics', totalRevenue: number, averageOrderValue: number, deliveredRevenue: number } }, analytics: { __typename?: 'MtwAnalyticsSeries', deliveryTrend: Array<{ __typename?: 'MtwAnalyticsPoint', label: string, value: number }>, orderTrend: Array<{ __typename?: 'MtwAnalyticsPoint', label: string, value: number }>, revenueTrend: Array<{ __typename?: 'MtwAnalyticsPoint', label: string, value: number }> } };
+export type GetMovethewheelsDashboardQuery = { __typename?: 'Query', dashboardMetrics: { __typename?: 'MtwDashboardMetrics', totalDeliveryJobs: number, activeDeliveries: number, availableDrivers: number, activeVehicles: number, lowStockItems: number, totalRevenue: number, recentDeliveryJobs: Array<{ __typename?: 'MtwDeliveryJob', id: string, deliveryJobNumber: string, status: Types.DeliveryJobStatus, priority: Types.DeliveryPriority, customerId: string, trackingNumber?: string | null, pickupAddress: Record<string, unknown>, deliveryAddress: Record<string, unknown>, cargoItems: Record<string, unknown>, pricing?: Record<string, unknown> | null, scheduledDelivery?: string | null, vehicleId?: string | null, driverId?: string | null, createdAt: string, updatedAt: string }> }, deliveryJobStats: { __typename?: 'MtwDeliveryJobStats', total: number, pending: number, confirmed: number, assigned: number, pickedUp: number, inTransit: number, outForDelivery: number, delivered: number, cancelled: number, failed: number, returned: number }, fleetStats: { __typename?: 'MtwFleetStats', totalVehicles: number, activeVehicles: number, inTransitVehicles: number, maintenanceVehicles: number, totalDrivers: number, availableDrivers: number, onDeliveryDrivers: number }, financeMetrics: { __typename?: 'MtwFinanceMetrics', fuelCost: number, openInvoices: number, revenue: { __typename?: 'MtwRevenueMetrics', totalRevenue: number, averageOrderValue: number, deliveredRevenue: number } }, analytics: { __typename?: 'MtwAnalyticsSeries', deliveryTrend: Array<{ __typename?: 'MtwAnalyticsPoint', label: string, value: number }>, orderTrend: Array<{ __typename?: 'MtwAnalyticsPoint', label: string, value: number }>, revenueTrend: Array<{ __typename?: 'MtwAnalyticsPoint', label: string, value: number }> } };
 
 export type ListCustomersQueryVariables = Types.Exact<{
   filter?: Types.InputMaybe<Types.CustomerFilterInput>;
@@ -436,6 +436,7 @@ export type GetShipmentQuery = { __typename?: 'Query', shipment?: { __typename?:
 
 export type GetDeliveryJobTrackingQueryVariables = Types.Exact<{
   deliveryJobId: Types.Scalars['ID']['input'];
+  pagination?: Types.InputMaybe<Types.PaginationInput>;
 }>;
 
 
@@ -1837,10 +1838,15 @@ export const GetMovethewheelsDashboardDocument = gql`
   deliveryJobStats {
     total
     pending
+    confirmed
+    assigned
+    pickedUp
     inTransit
+    outForDelivery
     delivered
     cancelled
     failed
+    returned
   }
   fleetStats {
     totalVehicles
@@ -2809,8 +2815,8 @@ export type GetShipmentLazyQueryHookResult = ReturnType<typeof useGetShipmentLaz
 export type GetShipmentSuspenseQueryHookResult = ReturnType<typeof useGetShipmentSuspenseQuery>;
 export type GetShipmentQueryResult = Apollo.QueryResult<Types.GetShipmentQuery, Types.GetShipmentQueryVariables>;
 export const GetDeliveryJobTrackingDocument = gql`
-    query GetDeliveryJobTracking($deliveryJobId: ID!) {
-  deliveryJobTracking(deliveryJobId: $deliveryJobId) {
+    query GetDeliveryJobTracking($deliveryJobId: ID!, $pagination: PaginationInput) {
+  deliveryJobTracking(deliveryJobId: $deliveryJobId, pagination: $pagination) {
     id
     shipmentId
     eventType
@@ -2834,6 +2840,7 @@ export const GetDeliveryJobTrackingDocument = gql`
  * const { data, loading, error } = useGetDeliveryJobTrackingQuery({
  *   variables: {
  *      deliveryJobId: // value for 'deliveryJobId'
+ *      pagination: // value for 'pagination'
  *   },
  * });
  */

package/src/movethewheels/components/OrderItemRow.tsx

@@ -1,23 +1,21 @@
 /**
- * OrderItemRow — one order-item line in CreateOrderPage's "Order Items" card.
+ * OrderItemRow — one order-item line in CreateOrderPage's "Shipment contents" section.
  *
  * Its own component (not inlined in a `.map()`) because it needs one
- * `useProduct`/`useProductStockLevels` hook call per row to resolve the
- * selected catalog item's label and stock hint independently of the shared,
- * search-filtered `products` list passed down from the page — the Rules of
- * Hooks don't allow that from inside a loop in the parent.
+ * `useProduct`/`useProductStockLevels` hook call per row to resolve the selected
+ * catalog item's label and stock hint independently of the shared, search-filtered
+ * products list passed down from the page.
  */
 import type { ChangeEvent } from 'react';
 import { Trash2 } from 'lucide-react';
-import { Button, Input, Label, Separator } from './ui';
+import { Button, Input, Label } from './ui';
 import { EntityCombobox } from './EntityCombobox';
 import { useProduct, useProductStockLevels } from '../hooks/useInventory';
-import type { OrderItem, Product } from '../types';
+import type { Dimensions, OrderItem, Product } from '../types';
 
 interface OrderItemRowProps {
   item: OrderItem;
   index: number;
-  isFirst: boolean;
   products: Product[];
   productsLoading: boolean;
   onUpdate: (index: number, field: string, value: unknown) => void;
@@ -37,7 +35,6 @@ function stockHintText(totalAvailable: number, levels: { warehouseName: string }
 export function OrderItemRow({
   item,
   index,
-  isFirst,
   products,
   productsLoading,
   onUpdate,
@@ -55,6 +52,9 @@ export function OrderItemRow({
     isLoading: stockLoading,
   } = useProductStockLevels(item.productId || undefined);
 
+  const dimensions =
+    item.dimensions ?? ({ length: 0, width: 0, height: 0, unit: 'cm' } satisfies Dimensions);
+
   const selectProduct = (productId: string) => {
     if (!productId) {
       onUpdate(index, 'productId', '');
@@ -69,103 +69,166 @@ export function OrderItemRow({
     onUpdate(index, 'weight', product.weight);
     onUpdate(index, 'value', product.value);
     onUpdate(index, 'dimensions', product.dimensions);
-    // Quantity is never set from the catalog — there's no per-unit default
-    // quantity on a cargo item, it's always this specific order's own call.
+    // Quantity is never set from the catalog — there is no per-unit default
+    // quantity on a cargo item; it belongs to this specific order line.
+  };
+
+  const updateDimension = (field: keyof Omit<Dimensions, 'unit'>, value: string) => {
+    onUpdate(index, 'dimensions', {
+      ...dimensions,
+      [field]: Number.parseFloat(value) || 0,
+    });
   };
 
   return (
-    <div>
-      {!isFirst && <Separator className="my-4" />}
-      <div className="mb-3 space-y-2">
-        <Label htmlFor={`item-product-${item.id}`}>Catalog item (optional)</Label>
-        <EntityCombobox
-          id={`item-product-${item.id}`}
-          value={item.productId}
-          onChange={selectProduct}
-          options={products}
-          loading={productsLoading}
-          getId={(product) => product.id}
-          getLabel={(product) => `${product.name} (${product.sku})`}
-          renderOption={(product) => (
-            <>
-              {product.name} <span className="text-text-tertiary">({product.sku})</span>
-            </>
-          )}
-          selectedOption={selectedProduct}
-          selectedLoading={selectedProductLoading}
-          placeholder="Pick from your product catalog"
-          emptyText="No products found."
-          noneLabel="Enter details manually"
-          // Search is driven by the shared "Search product catalog" box above
-          // this list — no second input inside the popover.
-        />
-        {item.productId && !stockLoading && (
-          <p className="text-xs text-text-secondary">{stockHintText(totalAvailable, levels)}</p>
-        )}
-      </div>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-7">
-        <div className="space-y-2 md:col-span-2">
-          <Label>Item Name</Label>
-          <Input
-            value={item.name}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => onUpdate(index, 'name', e.target.value)}
-            placeholder="Product name"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label>SKU</Label>
-          <Input
-            value={item.sku}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => onUpdate(index, 'sku', e.target.value)}
-            placeholder="SKU-001"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label>Quantity</Label>
-          <Input
-            type="number"
-            min="1"
-            value={item.quantity}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              onUpdate(index, 'quantity', parseInt(e.target.value) || 1)
-            }
-          />
-        </div>
-        <div className="space-y-2">
-          <Label>Weight (kg)</Label>
-          <Input
-            type="number"
-            min="0"
-            step="0.1"
-            value={item.weight}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              onUpdate(index, 'weight', parseFloat(e.target.value) || 0)
-            }
-          />
+    <div
+      className="rounded-card border border-border-subtle bg-bg-surface p-4 shadow-elevation-1 sm:p-5"
+      aria-labelledby={`order-item-${item.id}-title`}
+    >
+      <div className="mb-4 flex items-start justify-between gap-4">
+        <div>
+          <h3
+            id={`order-item-${item.id}-title`}
+            className="text-sm font-semibold text-text-primary"
+          >
+            Item {index + 1}
+          </h3>
+          <p className="mt-1 text-xs text-text-secondary">
+            Select a catalog item to prefill details, or enter a one-off shipment manually.
+          </p>
         </div>
-        <div className="space-y-2">
-          <Label>Value ($)</Label>
-          <Input
-            type="number"
-            min="0"
-            step="0.01"
-            value={item.value}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              onUpdate(index, 'value', parseFloat(e.target.value) || 0)
-            }
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="shrink-0 text-status-error-text"
+          onClick={() => onRemove(index)}
+          aria-label={`Remove item ${index + 1}`}
+          title={`Remove item ${index + 1}`}
+        >
+          <Trash2 size={16} aria-hidden="true" />
+        </Button>
+      </div>
+
+      <div className="space-y-4">
+        <div className="rounded-card border border-border-subtle bg-bg-sunken/40 p-3 sm:p-4">
+          <Label htmlFor={`item-product-${item.id}`}>Catalog item (optional)</Label>
+          <EntityCombobox
+            id={`item-product-${item.id}`}
+            value={item.productId}
+            onChange={selectProduct}
+            options={products}
+            loading={productsLoading}
+            getId={(product) => product.id}
+            getLabel={(product) => `${product.name} (${product.sku})`}
+            renderOption={(product) => (
+              <>
+                {product.name} <span className="text-text-tertiary">({product.sku})</span>
+              </>
+            )}
+            selectedOption={selectedProduct}
+            selectedLoading={selectedProductLoading}
+            placeholder="Pick from your product catalog"
+            emptyText="No products found."
+            noneLabel="Enter details manually"
           />
+          {item.productId && !stockLoading && (
+            <p className="mt-2 text-xs text-text-secondary" role="status">
+              {stockHintText(totalAvailable, levels)}
+            </p>
+          )}
         </div>
-        <div className="flex items-end">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="text-status-error-text"
-            onClick={() => onRemove(index)}
-          >
-            <Trash2 size={16} />
-          </Button>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-12">
+          <div className="space-y-2 lg:col-span-4">
+            <Label htmlFor={`item-name-${item.id}`}>Item name</Label>
+            <Input
+              id={`item-name-${item.id}`}
+              value={item.name}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                onUpdate(index, 'name', e.target.value)
+              }
+              placeholder="Product name"
+            />
+          </div>
+          <div className="space-y-2 lg:col-span-3">
+            <Label htmlFor={`item-sku-${item.id}`}>SKU</Label>
+            <Input
+              id={`item-sku-${item.id}`}
+              value={item.sku}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                onUpdate(index, 'sku', e.target.value)
+              }
+              placeholder="SKU-001"
+            />
+          </div>
+          <div className="space-y-2 lg:col-span-2">
+            <Label htmlFor={`item-quantity-${item.id}`}>Quantity</Label>
+            <Input
+              id={`item-quantity-${item.id}`}
+              type="number"
+              min="1"
+              value={item.quantity}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                onUpdate(index, 'quantity', parseInt(e.target.value, 10) || 1)
+              }
+            />
+          </div>
+          <div className="space-y-2 lg:col-span-2">
+            <Label htmlFor={`item-weight-${item.id}`}>Weight (kg)</Label>
+            <Input
+              id={`item-weight-${item.id}`}
+              type="number"
+              min="0"
+              step="0.1"
+              value={item.weight}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                onUpdate(index, 'weight', parseFloat(e.target.value) || 0)
+              }
+            />
+          </div>
+          <div className="space-y-2 lg:col-span-1">
+            <Label htmlFor={`item-value-${item.id}`}>Value ($)</Label>
+            <Input
+              id={`item-value-${item.id}`}
+              type="number"
+              min="0"
+              step="0.01"
+              value={item.value}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                onUpdate(index, 'value', parseFloat(e.target.value) || 0)
+              }
+            />
+          </div>
         </div>
+
+        <fieldset className="rounded-card border border-border-subtle bg-bg-sunken/40 p-3 sm:p-4">
+          <legend className="px-1 text-xs font-medium text-text-secondary">
+            Dimensions ({dimensions.unit})
+          </legend>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            {(['length', 'width', 'height'] as const).map((field) => (
+              <div key={field} className="space-y-2">
+                <Label htmlFor={`item-${field}-${item.id}`}>
+                  {field.charAt(0).toUpperCase() + field.slice(1)}
+                </Label>
+                <Input
+                  id={`item-${field}-${item.id}`}
+                  type="number"
+                  min="0"
+                  step="0.1"
+                  value={dimensions[field]}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    updateDimension(field, e.target.value)
+                  }
+                />
+              </div>
+            ))}
+          </div>
+          <p className="mt-2 text-xs text-text-secondary">
+            Catalog selections prefill these measurements, and you can adjust them for this order.
+          </p>
+        </fieldset>
       </div>
     </div>
   );

package/src/movethewheels/components/StatusBadge.tsx

@@ -5,6 +5,7 @@ import {
   ORDER_STATUS_COLORS,
   VEHICLE_STATUS_COLORS,
   DRIVER_STATUS_COLORS,
+  DRIVER_STATUS_LABELS,
   PRIORITY_COLORS,
 } from '../constants';
 
@@ -17,6 +18,8 @@ interface StatusBadgeProps {
     bg: string;
     text: string;
   };
+  /** Override the auto-derived display text (title-cased raw status). */
+  label?: string;
   size?: 'sm' | 'md' | 'lg';
   showDot?: boolean;
   className?: string;
@@ -35,6 +38,7 @@ export function StatusBadge({
   status,
   type = 'custom',
   customColors,
+  label,
   size = 'md',
   showDot = true,
   className,
@@ -59,8 +63,13 @@ export function StatusBadge({
     }
   }
 
-  // Format status for display
-  const displayStatus = status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+  // Format status for display — an explicit label always wins; driver status
+  // otherwise renders from the same shared label map the filters use, so the
+  // table and the filter dropdown can never drift apart again (BOFF-7909).
+  const displayStatus =
+    label ??
+    (type === 'driver' ? DRIVER_STATUS_LABELS[status] : undefined) ??
+    status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 
   return (
     <Badge

package/src/movethewheels/constants/index.ts

@@ -46,6 +46,7 @@ export const ORDER_STATUS_COLORS: Record<string, StatusColor> = {
   in_transit: INFO,
   out_for_delivery: WARNING,
   delivered: SUCCESS,
+  returned: WARNING,
   cancelled: ERROR,
   failed: ERROR,
 };
@@ -64,6 +65,18 @@ export const DRIVER_STATUS_COLORS: Record<string, StatusColor> = {
   busy: INFO,
   offline: NEUTRAL,
   on_break: WARNING,
+  inactive: ERROR,
+};
+
+// Single source of truth for driver status display text — used by both the
+// DriversPage status filter and the roster table's StatusBadge, so the two
+// can never drift apart again (BOFF-7909).
+export const DRIVER_STATUS_LABELS: Record<string, string> = {
+  available: 'Available',
+  busy: 'On Delivery',
+  offline: 'Off Duty',
+  on_break: 'On Break',
+  inactive: 'Inactive',
 };
 
 // Priority colors