@burdenoff/microfe-movethewheels 2026.930.3 → 2026.930.5

package/src/movethewheels/hooks/useInventory.ts

@@ -348,6 +348,45 @@ const UPDATE_WAREHOUSE_MUTATION = `
   }
 `;
 
+const INVENTORY_LINE_FIELDS = `
+  id
+  cargoItemId
+  warehouseId
+  onHand
+  available
+  allocated
+  damaged
+  reorderPoint
+  createdAt
+  updatedAt
+  cargoItem {
+    id
+    name
+    sku
+  }
+  warehouse {
+    id
+    name
+    code
+  }
+`;
+
+const FIND_STOCK_LINE_QUERY = `
+  query FindStockLine($filter: InventoryFilterInput, $pagination: PaginationInput) {
+    inventoryItems(filter: $filter, pagination: $pagination) {
+      ${INVENTORY_LINE_FIELDS}
+    }
+  }
+`;
+
+const CREATE_INVENTORY_ITEM_MUTATION = `
+  mutation CreateInventoryItem($input: CreateInventoryItemInput!) {
+    createInventoryItem(input: $input) {
+      ${INVENTORY_LINE_FIELDS}
+    }
+  }
+`;
+
 const ADJUST_INVENTORY_MUTATION = `
   mutation AdjustInventoryStock($input: AdjustInventoryStockInput!) {
     adjustInventoryStock(input: $input) {
@@ -368,28 +407,10 @@ const TRANSFER_INVENTORY_STOCK_MUTATION = `
   mutation TransferInventoryStock($input: TransferInventoryStockInput!) {
     transferInventoryStock(input: $input) {
       source {
-        id
-        cargoItemId
-        warehouseId
-        onHand
-        available
-        allocated
-        damaged
-        reorderPoint
-        createdAt
-        updatedAt
+        ${INVENTORY_LINE_FIELDS}
       }
       destination {
-        id
-        cargoItemId
-        warehouseId
-        onHand
-        available
-        allocated
-        damaged
-        reorderPoint
-        createdAt
-        updatedAt
+        ${INVENTORY_LINE_FIELDS}
       }
     }
   }
@@ -1012,6 +1033,7 @@ export function useWarehouses(options: UseWarehousesOptions = {}) {
   const [totalWarehouses, setTotalWarehouses] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
   const load = useCallback(async () => {
@@ -1035,6 +1057,46 @@ export function useWarehouses(options: UseWarehousesOptions = {}) {
     }
   }, [graphQLOptions, limit, offset, search, status]);
 
+  /** Appends the next server page (pickers); list pages keep using `offset`. */
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoading || isLoadingMore) return;
+    const nextOffset = offset + warehouses.length;
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        warehouses: ApiWarehouse[];
+        warehousesCount: number;
+      }>(graphQLOptions, LIST_WAREHOUSES_QUERY, {
+        filter: { search: search || undefined, status: status || undefined },
+        pagination: { limit, offset: nextOffset },
+      });
+      const mapped = data.warehouses.map(mapWarehouse);
+      setTotalWarehouses(data.warehousesCount);
+      setHasMore(nextOffset + mapped.length < data.warehousesCount);
+      setWarehouses((previous) => {
+        const existingIds = new Set(previous.map((warehouse) => warehouse.id));
+        return [...previous, ...mapped.filter((warehouse) => !existingIds.has(warehouse.id))];
+      });
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load more warehouses')
+      );
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [
+    graphQLOptions,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    limit,
+    offset,
+    search,
+    status,
+    warehouses.length,
+  ]);
+
   useEffect(() => {
     void load();
   }, [load]);
@@ -1044,8 +1106,10 @@ export function useWarehouses(options: UseWarehousesOptions = {}) {
     totalWarehouses,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch: () => void load(),
+    loadMore,
   };
 }
 
@@ -1161,45 +1225,49 @@ export function useInventoryStats() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        inventoryStats: {
+          totalOnHand: number;
+          totalAvailable: number;
+          totalAllocated: number;
+          totalDamaged: number;
+          lowStockCount: number;
+        };
+        cargoItemsCount: number;
+        warehousesCount: number;
+      }>(graphQLOptions, INVENTORY_STATS_QUERY);
+
+      setStats({
+        totalOnHand: data.inventoryStats.totalOnHand,
+        totalAvailable: data.inventoryStats.totalAvailable,
+        totalAllocated: data.inventoryStats.totalAllocated,
+        totalDamaged: data.inventoryStats.totalDamaged,
+        lowStockCount: data.inventoryStats.lowStockCount,
+        totalProducts: data.cargoItemsCount,
+        totalWarehouses: data.warehousesCount,
+      });
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load inventory stats')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [graphQLOptions]);
+
   useEffect(() => {
-    const load = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const data = await executeGraphQL<{
-          inventoryStats: {
-            totalOnHand: number;
-            totalAvailable: number;
-            totalAllocated: number;
-            totalDamaged: number;
-            lowStockCount: number;
-          };
-          cargoItemsCount: number;
-          warehousesCount: number;
-        }>(graphQLOptions, INVENTORY_STATS_QUERY);
-
-        setStats({
-          totalOnHand: data.inventoryStats.totalOnHand,
-          totalAvailable: data.inventoryStats.totalAvailable,
-          totalAllocated: data.inventoryStats.totalAllocated,
-          totalDamaged: data.inventoryStats.totalDamaged,
-          lowStockCount: data.inventoryStats.lowStockCount,
-          totalProducts: data.cargoItemsCount,
-          totalWarehouses: data.warehousesCount,
-        });
-      } catch (fetchError) {
-        setError(
-          fetchError instanceof Error ? fetchError : new Error('Failed to load inventory stats')
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    };
+    void load();
+  }, [load]);
 
+  const refetch = useCallback(() => {
     void load();
-  }, [graphQLOptions]);
+  }, [load]);
 
-  return { stats, isLoading, error };
+  return { stats, isLoading, error, refetch };
 }
 
 /**
@@ -1445,3 +1513,176 @@ export function useInventoryTransactions(options: UseInventoryTransactionsOption
 
   return { transactions, isLoading, error, refetch };
 }
+
+export interface ReceiveStockInput {
+  productId: string;
+  warehouseId: string;
+  /** Whole units received; must be > 0. */
+  quantity: number;
+  /** Only applied when the receipt creates a new stock line. */
+  reorderPoint?: number | null;
+}
+
+export interface TransferStockInput {
+  sourceInventoryId: string;
+  destinationWarehouseId: string;
+  /** Whole units to move out of the source line's available stock; must be > 0. */
+  quantity: number;
+}
+
+function assertWholeUnits(quantity: number, label: string): void {
+  if (!Number.isInteger(quantity) || quantity <= 0) {
+    throw new Error(`${label} must be a positive whole number.`);
+  }
+}
+
+/**
+ * Stock movements that do not depend on the list currently on screen: every
+ * write re-reads the line first, so a stale table row can never overwrite
+ * someone else's change (the service also rejects a mid-flight change).
+ */
+export function useStockActions() {
+  const graphQLOptions = useGraphqlOptions();
+
+  const findLine = useCallback(
+    async (filter: {
+      inventoryItemId?: string;
+      cargoItemId?: string;
+      warehouseId?: string;
+    }): Promise<Inventory | null> => {
+      const data = await executeGraphQL<{ inventoryItems: ApiInventoryItem[] }>(
+        graphQLOptions,
+        FIND_STOCK_LINE_QUERY,
+        { filter, pagination: { limit: 1 } }
+      );
+      const line = data.inventoryItems[0];
+      return line ? mapInventory(line) : null;
+    },
+    [graphQLOptions]
+  );
+
+  /** Applies a signed change to on-hand and available; allocated/damaged are untouched. */
+  const applyChange = useCallback(
+    async (line: Inventory, change: number): Promise<Inventory> => {
+      const onHand = line.quantity + change;
+      const available = line.availableQuantity + change;
+      if (available < 0) {
+        throw new Error(
+          `Only ${line.availableQuantity.toLocaleString()} unit(s) are available to remove.`
+        );
+      }
+      if (onHand < 0) {
+        throw new Error('On-hand stock cannot go below zero.');
+      }
+      const data = await executeGraphQL<{ adjustInventoryStock: ApiInventoryItem }>(
+        graphQLOptions,
+        ADJUST_INVENTORY_MUTATION,
+        {
+          input: {
+            id: line.id,
+            onHand,
+            available,
+            allocated: line.reservedQuantity,
+            damaged: line.damagedQuantity,
+          },
+        }
+      );
+      return mapInventory(data.adjustInventoryStock);
+    },
+    [graphQLOptions]
+  );
+
+  const adjustStock = useCallback(
+    async (inventoryId: string, change: number): Promise<Inventory> => {
+      if (!Number.isInteger(change) || change === 0) {
+        throw new Error('Enter a whole-number change other than zero.');
+      }
+      const line = await findLine({ inventoryItemId: inventoryId });
+      if (!line) throw new Error('This stock line no longer exists.');
+      return applyChange(line, change);
+    },
+    [applyChange, findLine]
+  );
+
+  const receiveStock = useCallback(
+    async (input: ReceiveStockInput): Promise<Inventory> => {
+      assertWholeUnits(input.quantity, 'Quantity received');
+      const existing = await findLine({
+        cargoItemId: input.productId,
+        warehouseId: input.warehouseId,
+      });
+      if (existing) return applyChange(existing, input.quantity);
+
+      // New line: the service records the opening stock as a RECEIPT ledger entry.
+      const data = await executeGraphQL<{ createInventoryItem: ApiInventoryItem }>(
+        graphQLOptions,
+        CREATE_INVENTORY_ITEM_MUTATION,
+        {
+          input: {
+            cargoItemId: input.productId,
+            warehouseId: input.warehouseId,
+            onHand: input.quantity,
+            available: input.quantity,
+            ...(input.reorderPoint !== null && input.reorderPoint !== undefined
+              ? { reorderPoint: input.reorderPoint }
+              : {}),
+          },
+        }
+      );
+      return mapInventory(data.createInventoryItem);
+    },
+    [applyChange, findLine, graphQLOptions]
+  );
+
+  const transferStock = useCallback(
+    async (input: TransferStockInput): Promise<{ source: Inventory; destination: Inventory }> => {
+      assertWholeUnits(input.quantity, 'Transfer quantity');
+      const source = await findLine({ inventoryItemId: input.sourceInventoryId });
+      if (!source) throw new Error('The source stock line no longer exists.');
+      if (source.warehouseId === input.destinationWarehouseId) {
+        throw new Error('Source and destination warehouses must be different.');
+      }
+      if (input.quantity > source.availableQuantity) {
+        throw new Error(
+          `Only ${source.availableQuantity.toLocaleString()} unit(s) are available to transfer.`
+        );
+      }
+
+      let destination = await findLine({
+        cargoItemId: source.productId,
+        warehouseId: input.destinationWarehouseId,
+      });
+      if (!destination) {
+        // An empty line records no movement; the transfer below writes both ledger entries.
+        const created = await executeGraphQL<{ createInventoryItem: ApiInventoryItem }>(
+          graphQLOptions,
+          CREATE_INVENTORY_ITEM_MUTATION,
+          {
+            input: {
+              cargoItemId: source.productId,
+              warehouseId: input.destinationWarehouseId,
+            },
+          }
+        );
+        destination = mapInventory(created.createInventoryItem);
+      }
+
+      const data = await executeGraphQL<{
+        transferInventoryStock: { source: ApiInventoryItem; destination: ApiInventoryItem };
+      }>(graphQLOptions, TRANSFER_INVENTORY_STOCK_MUTATION, {
+        input: {
+          sourceInventoryItemId: source.id,
+          destinationInventoryItemId: destination.id,
+          quantity: input.quantity,
+        },
+      });
+      return {
+        source: mapInventory(data.transferInventoryStock.source),
+        destination: mapInventory(data.transferInventoryStock.destination),
+      };
+    },
+    [findLine, graphQLOptions]
+  );
+
+  return { receiveStock, adjustStock, transferStock };
+}

package/src/movethewheels/pages/InventoryPage.tsx

@@ -16,11 +16,20 @@ import {
   ArrowDownRight,
   ArrowUpRight,
   ArrowLeftRight,
+  PackagePlus,
+  SlidersHorizontal,
 } from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
 import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
+import { Notice, useNotice } from '../components/Notice';
+import {
+  AdjustStockDialog,
+  ReceiveStockDialog,
+  TransferStockDialog,
+  type StockLineTarget,
+} from '../components/StockActionDialogs';
 import {
   Card,
   CardContent,
@@ -49,6 +58,7 @@ interface StockRow {
   productId: string;
   productName: string;
   sku: string;
+  warehouseId: string;
   warehouseName: string;
   onHand: number;
   allocated: number;
@@ -84,6 +94,21 @@ const TRANSACTION_LABELS: Record<InventoryTransactionType, string> = {
   ADJUSTMENT: 'Adjustment',
 };
 
+/**
+ * Ledger quantity with its sign. RECEIPT/RETURN/ISSUE have a fixed direction, so
+ * the magnitude is shown with that sign. TRANSFER and ADJUSTMENT are neutral —
+ * the sign stored on the row is the only thing that says whether stock came in
+ * or went out (a transfer writes one row of each), so it must never be dropped.
+ */
+function formatLedgerQuantity(direction: 'in' | 'out' | 'neutral', quantity: number): string {
+  const magnitude = Math.abs(quantity).toLocaleString();
+  if (direction === 'in') return `+${magnitude}`;
+  if (direction === 'out') return `−${magnitude}`;
+  if (quantity > 0) return `+${magnitude}`;
+  if (quantity < 0) return `−${magnitude}`;
+  return magnitude;
+}
+
 export default function InventoryPage() {
   const { t: translate } = useI18n();
   const t = (key: string, fallback: string): string => {
@@ -110,12 +135,35 @@ export default function InventoryPage() {
     limit: pageSize,
     offset: pageIndex * pageSize,
   });
-  const { stats } = useInventoryStats();
+  const { stats, refetch: refetchStats } = useInventoryStats();
   const {
     transactions,
     isLoading: transactionsLoading,
     error: transactionsError,
+    refetch: refetchTransactions,
   } = useInventoryTransactions({ limit: 8 });
+  const { message: notice, notify } = useNotice(6000);
+  const [receiveOpen, setReceiveOpen] = useState(false);
+  const [adjustTarget, setAdjustTarget] = useState<StockLineTarget | null>(null);
+  const [transferTarget, setTransferTarget] = useState<StockLineTarget | null>(null);
+
+  const toTarget = (row: StockRow): StockLineTarget => ({
+    id: row.id,
+    productName: row.productName,
+    sku: row.sku,
+    warehouseId: row.warehouseId,
+    warehouseName: row.warehouseName,
+    onHand: row.onHand,
+    available: row.available,
+  });
+
+  /** Reload everything a stock movement changes: the table, the cards and the ledger. */
+  const handleStockChanged = (message: string) => {
+    notify(message);
+    refetch();
+    refetchStats();
+    refetchTransactions();
+  };
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
   const onRowKeyDown = (e: React.KeyboardEvent, action: () => void) => {
@@ -135,6 +183,7 @@ export default function InventoryPage() {
       productId: item.productId,
       productName: item.productName ?? unknownProductLabel,
       sku: item.productSku ?? '—',
+      warehouseId: item.warehouseId,
       warehouseName: item.warehouseName ?? '—',
       onHand: item.quantity,
       allocated: item.reservedQuantity,
@@ -220,6 +269,36 @@ export default function InventoryPage() {
         />
       ),
     },
+    {
+      id: 'actions',
+      header: t('movethewheels.inventory.stock.actions', 'Actions'),
+      cell: (row) => (
+        // Row click navigates to the product, so keep these from bubbling to it.
+        <div
+          className="flex flex-wrap gap-2"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setAdjustTarget(toTarget(row))}
+          >
+            <SlidersHorizontal size={14} /> {t('movethewheels.inventory.stock.adjust', 'Adjust')}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setTransferTarget(toTarget(row))}
+            disabled={row.available <= 0}
+          >
+            <ArrowLeftRight size={14} /> {t('movethewheels.inventory.stock.transfer', 'Transfer')}
+          </Button>
+        </div>
+      ),
+    },
   ];
 
   return (
@@ -235,6 +314,11 @@ export default function InventoryPage() {
             onSelect: () => goTo('inventory/products/new'),
           }}
           actions={[
+            {
+              label: t('movethewheels.inventory.actions.receiveStock', 'Receive stock'),
+              icon: <PackagePlus size={16} />,
+              onSelect: () => setReceiveOpen(true),
+            },
             {
               label: t('movethewheels.inventory.actions.products', 'Products'),
               onSelect: () => goTo('inventory/products'),
@@ -254,6 +338,12 @@ export default function InventoryPage() {
         )}
       </PagePurpose>
 
+      {notice && (
+        <div className="mb-2">
+          <Notice message={notice} />
+        </div>
+      )}
+
       {error && !isLoading ? (
         <Card className="border-status-error-border">
           <CardContent className="p-6 text-center space-y-3">
@@ -462,8 +552,7 @@ export default function InventoryPage() {
                               : 'font-medium text-text-primary'
                         }
                       >
-                        {direction === 'in' ? '+' : direction === 'out' ? '−' : ''}
-                        {Math.abs(transaction.quantity).toLocaleString()}
+                        {formatLedgerQuantity(direction, transaction.quantity)}
                       </span>
                     </li>
                   );
@@ -582,6 +671,28 @@ export default function InventoryPage() {
           </Card>
         </PageSection>
       </div>
+
+      <ReceiveStockDialog
+        open={receiveOpen}
+        onOpenChange={setReceiveOpen}
+        onDone={handleStockChanged}
+      />
+      <AdjustStockDialog
+        line={adjustTarget}
+        open={adjustTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setAdjustTarget(null);
+        }}
+        onDone={handleStockChanged}
+      />
+      <TransferStockDialog
+        line={transferTarget}
+        open={transferTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setTransferTarget(null);
+        }}
+        onDone={handleStockChanged}
+      />
     </PageLayout>
   );
 }

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -252,7 +252,7 @@ function NewRouteForm({ editId }: { editId?: string }) {
       <PagePurpose icon={<Navigation size={18} />}>
         Plan a new delivery route — name it, list the stops to visit, and optionally assign a
         vehicle and driver. Once created you can optimize it to sequence the stops into the shortest
-        run.
+        run. Optimizing also marks the route In Progress.
       </PagePurpose>
 
       <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
@@ -535,7 +535,7 @@ export default function RouteDetailsPage() {
           </Button>
           {!route.optimized && (
             <Button variant="outline" onClick={handleOptimize} disabled={optimizing}>
-              <Zap size={16} /> {optimizing ? 'Optimizing…' : 'Optimize'}
+              <Zap size={16} /> {optimizing ? 'Optimizing…' : 'Optimize & start'}
             </Button>
           )}
           <Button onClick={() => navigate?.(joinPath(basePath, `routes/${routeId}/edit`))}>
@@ -569,8 +569,9 @@ export default function RouteDetailsPage() {
             ? [
                 {
                   id: 'optimize',
-                  label: 'Optimize this route',
-                  description: 'Reorder stops to cut distance and driving time.',
+                  label: 'Optimize & start this route',
+                  description:
+                    'Reorder stops to cut distance and driving time, then mark the route In Progress.',
                   icon: <Zap size={16} />,
                   onClick: handleOptimize,
                 },