@burdenoff/microfe-movethewheels 2026.924.1 → 2026.925.1

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

@@ -0,0 +1,235 @@
+/**
+ * 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.
+ */
+import type { ChangeEvent } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button, Input, Label } from './ui';
+import { EntityCombobox } from './EntityCombobox';
+import { useProduct, useProductStockLevels } from '../hooks/useInventory';
+import type { Dimensions, OrderItem, Product } from '../types';
+
+interface OrderItemRowProps {
+  item: OrderItem;
+  index: number;
+  products: Product[];
+  productsLoading: boolean;
+  onUpdate: (index: number, field: string, value: unknown) => void;
+  onRemove: (index: number) => void;
+}
+
+function stockHintText(totalAvailable: number, levels: { warehouseName: string }[]): string {
+  if (totalAvailable <= 0) {
+    return 'No stock recorded for this item.';
+  }
+  if (levels.length === 1) {
+    return `${totalAvailable.toLocaleString()} available at ${levels[0].warehouseName}`;
+  }
+  return `${totalAvailable.toLocaleString()} available across ${levels.length} warehouses`;
+}
+
+export function OrderItemRow({
+  item,
+  index,
+  products,
+  productsLoading,
+  onUpdate,
+  onRemove,
+}: OrderItemRowProps) {
+  // Resolved independently of the (search-filtered) `products` list so the
+  // trigger still shows the right label once a pick scrolls out of the
+  // current search results.
+  const { product: selectedProduct, isLoading: selectedProductLoading } = useProduct(
+    item.productId || undefined
+  );
+  const {
+    levels,
+    totalAvailable,
+    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', '');
+      return;
+    }
+    const product = products.find((candidate) => candidate.id === productId);
+    if (!product) return;
+
+    onUpdate(index, 'productId', product.id);
+    onUpdate(index, 'name', product.name);
+    onUpdate(index, 'sku', product.sku);
+    onUpdate(index, 'weight', product.weight);
+    onUpdate(index, 'value', product.value);
+    onUpdate(index, 'dimensions', product.dimensions);
+    // 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
+      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>
+        <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="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/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,
 };

package/src/movethewheels/hooks/useOrders.ts

@@ -155,10 +155,14 @@ const ORDER_STATS_QUERY = `
     deliveryJobStats {
       total
       pending
+      confirmed
+      assigned
       inTransit
+      outForDelivery
       delivered
       cancelled
       failed
+      returned
     }
     financeMetrics {
       revenue {
@@ -221,6 +225,8 @@ export function mapOrderStatus(status: string): OrderStatus {
       return 'out_for_delivery';
     case 'DELIVERED':
       return 'delivered';
+    case 'RETURNED':
+      return 'returned';
     case 'CANCELLED':
       return 'cancelled';
     default:
@@ -263,6 +269,8 @@ function toApiStatus(status: OrderStatus): string {
       return 'OUT_FOR_DELIVERY';
     case 'delivered':
       return 'DELIVERED';
+    case 'returned':
+      return 'RETURNED';
     case 'cancelled':
       return 'CANCELLED';
     default:
@@ -593,6 +601,7 @@ export function useOrderStats() {
       in_transit: 0,
       out_for_delivery: 0,
       delivered: 0,
+      returned: 0,
       cancelled: 0,
       failed: 0,
     },
@@ -621,10 +630,14 @@ export function useOrderStats() {
         deliveryJobStats: {
           total: number;
           pending: number;
+          confirmed: number;
+          assigned: number;
           inTransit: number;
+          outForDelivery: number;
           delivered: number;
           cancelled: number;
           failed: number;
+          returned: number;
         };
         financeMetrics: {
           revenue: {
@@ -638,12 +651,13 @@ export function useOrderStats() {
         total: data.deliveryJobStats.total,
         byStatus: {
           pending: data.deliveryJobStats.pending,
-          confirmed: 0,
-          assigned: 0,
+          confirmed: data.deliveryJobStats.confirmed,
+          assigned: data.deliveryJobStats.assigned,
           picked_up: 0,
           in_transit: data.deliveryJobStats.inTransit,
-          out_for_delivery: 0,
+          out_for_delivery: data.deliveryJobStats.outForDelivery,
           delivered: data.deliveryJobStats.delivered,
+          returned: data.deliveryJobStats.returned,
           cancelled: data.deliveryJobStats.cancelled,
           failed: data.deliveryJobStats.failed,
         },