@burdenoff/microfe-movethewheels 2026.920.2 → 2026.921.1

package/src/movethewheels/hooks/useInventory.ts

@@ -5,6 +5,9 @@ import { executeGraphQL } from '../utils/graphqlClient';
 
 interface UseInventoryOptions {
   filters?: InventoryFilter;
+  search?: string;
+  limit?: number;
+  offset?: number;
 }
 
 export interface CreateProductInput {
@@ -32,9 +35,11 @@ export interface CreateWarehouseInput {
 
 interface UseInventoryResult {
   inventory: Inventory[];
+  lowStockItems: Inventory[];
   products: Product[];
   warehouses: Warehouse[];
   totalItems: number;
+  hasMore: boolean;
   isLoading: boolean;
   error: Error | null;
   refetch: () => void;
@@ -68,6 +73,8 @@ interface ApiInventoryItem {
   reorderPoint?: number | null;
   createdAt: string;
   updatedAt: string;
+  cargoItem?: { id: string; name: string; sku: string } | null;
+  warehouse?: { id: string; name: string; code: string } | null;
 }
 
 interface ApiProduct {
@@ -111,7 +118,18 @@ const LIST_INVENTORY_QUERY = `
       reorderPoint
       createdAt
       updatedAt
+      cargoItem {
+        id
+        name
+        sku
+      }
+      warehouse {
+        id
+        name
+        code
+      }
     }
+    inventoryItemsCount(filter: $filter)
   }
 `;
 
@@ -133,6 +151,7 @@ const LIST_PRODUCTS_QUERY = `
       createdAt
       updatedAt
     }
+    cargoItemsCount(filter: $filter)
   }
 `;
 
@@ -148,6 +167,7 @@ const LIST_WAREHOUSES_QUERY = `
       usedCapacity
       createdAt
     }
+    warehousesCount(filter: $filter)
   }
 `;
 
@@ -386,7 +406,10 @@ function mapInventory(item: ApiInventoryItem): Inventory {
   return {
     id: item.id,
     productId: item.cargoItemId,
+    productName: item.cargoItem?.name,
+    productSku: item.cargoItem?.sku,
     warehouseId: item.warehouseId,
+    warehouseName: item.warehouse?.name,
     zoneId: '',
     quantity: item.onHand,
     reservedQuantity: item.allocated,
@@ -423,18 +446,20 @@ function useGraphqlOptions() {
 }
 
 export function useInventory(options: UseInventoryOptions = {}): UseInventoryResult {
-  const { filters: rawFilters } = options;
+  const { filters: rawFilters, search, limit = 10, offset = 0 } = options;
   // Stabilize the filters reference by its primitive fields so React Compiler's
-  // inferred `filters` dependency stays stable and `load` is not recreated (and
-  // refetched) every render when the caller passes an inline filters object.
+  // inferred `filters` dependency stays stable (callers commonly pass inline objects).
   const filters = useMemo(
     () => rawFilters,
-    [rawFilters?.lowStock, rawFilters?.productId, rawFilters?.warehouseId]
+    [rawFilters?.lowStock, rawFilters?.productId, rawFilters?.search, rawFilters?.warehouseId]
   );
   const graphQLOptions = useGraphqlOptions();
   const [inventory, setInventory] = useState<Inventory[]>([]);
+  const [lowStockItems, setLowStockItems] = useState<Inventory[]>([]);
   const [products, setProducts] = useState<Product[]>([]);
   const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+  const [totalItems, setTotalItems] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -442,7 +467,21 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
     setIsLoading(true);
     setError(null);
     try {
-      const [inventoryData, productData, warehouseData] = await Promise.all([
+      const inventoryFilter = {
+        warehouseId: filters?.warehouseId,
+        cargoItemId: filters?.productId,
+        search: search || filters?.search || undefined,
+        lowStock: filters?.lowStock || undefined,
+      };
+      const [inventoryData, lowStockData, productData, warehouseData] = await Promise.all([
+        executeGraphQL<{ inventoryItems: ApiInventoryItem[]; inventoryItemsCount: number }>(
+          graphQLOptions,
+          LIST_INVENTORY_QUERY,
+          {
+            filter: inventoryFilter,
+            pagination: { limit, offset },
+          }
+        ),
         executeGraphQL<{ inventoryItems: ApiInventoryItem[] }>(
           graphQLOptions,
           LIST_INVENTORY_QUERY,
@@ -450,24 +489,23 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
             filter: {
               warehouseId: filters?.warehouseId,
               cargoItemId: filters?.productId,
+              lowStock: true,
             },
-            pagination: { limit: 500, offset: 0 },
+            pagination: { limit: 5, offset: 0 },
           }
         ),
         executeGraphQL<{ cargoItems: ApiProduct[] }>(graphQLOptions, LIST_PRODUCTS_QUERY, {
-          pagination: { limit: 500, offset: 0 },
+          pagination: { limit: 5, offset: 0 },
         }),
         executeGraphQL<{ warehouses: ApiWarehouse[] }>(graphQLOptions, LIST_WAREHOUSES_QUERY, {
-          pagination: { limit: 500, offset: 0 },
+          pagination: { limit: 5, offset: 0 },
         }),
       ]);
 
-      let nextInventory = inventoryData.inventoryItems.map(mapInventory);
-      if (filters?.lowStock) {
-        nextInventory = nextInventory.filter((item) => item.availableQuantity <= item.reorderLevel);
-      }
-
-      setInventory(nextInventory);
+      setInventory(inventoryData.inventoryItems.map(mapInventory));
+      setLowStockItems(lowStockData.inventoryItems.map(mapInventory));
+      setTotalItems(inventoryData.inventoryItemsCount);
+      setHasMore(offset + inventoryData.inventoryItems.length < inventoryData.inventoryItemsCount);
       setProducts(productData.cargoItems.map(mapProduct));
       setWarehouses(warehouseData.warehouses.map(mapWarehouse));
     } catch (fetchError) {
@@ -477,7 +515,7 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
     } finally {
       setIsLoading(false);
     }
-  }, [filters, graphQLOptions]);
+  }, [filters, graphQLOptions, limit, offset, search]);
 
   useEffect(() => {
     void load();
@@ -635,9 +673,11 @@ export function useInventory(options: UseInventoryOptions = {}): UseInventoryRes
 
   return {
     inventory,
+    lowStockItems,
     products,
     warehouses,
-    totalItems: inventory.length,
+    totalItems,
+    hasMore,
     isLoading,
     error,
     refetch,
@@ -655,10 +695,20 @@ interface UseListOptions {
   offset?: number;
 }
 
-export function useProducts(options: UseListOptions = {}) {
-  const { limit = 500, offset = 0 } = options;
+interface UseProductsOptions extends UseListOptions {
+  search?: string;
+  category?: string;
+}
+
+interface UseWarehousesOptions extends UseListOptions {
+  search?: string;
+}
+
+export function useProducts(options: UseProductsOptions = {}) {
+  const { limit = 20, offset = 0, search, category } = options;
   const graphQLOptions = useGraphqlOptions();
   const [products, setProducts] = useState<Product[]>([]);
+  const [totalProducts, setTotalProducts] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
@@ -667,21 +717,22 @@ export function useProducts(options: UseListOptions = {}) {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ cargoItems: ApiProduct[] }>(
-        graphQLOptions,
-        LIST_PRODUCTS_QUERY,
-        {
-          pagination: { limit, offset },
-        }
-      );
-      setHasMore(data.cargoItems.length === limit);
+      const data = await executeGraphQL<{
+        cargoItems: ApiProduct[];
+        cargoItemsCount: number;
+      }>(graphQLOptions, LIST_PRODUCTS_QUERY, {
+        filter: { search: search || undefined, category: category || undefined },
+        pagination: { limit, offset },
+      });
+      setHasMore(offset + data.cargoItems.length < data.cargoItemsCount);
+      setTotalProducts(data.cargoItemsCount);
       setProducts(data.cargoItems.map(mapProduct));
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load products'));
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset]);
+  }, [graphQLOptions, limit, offset, search, category]);
 
   useEffect(() => {
     void load();
@@ -689,7 +740,7 @@ export function useProducts(options: UseListOptions = {}) {
 
   return {
     products,
-    totalProducts: products.length,
+    totalProducts,
     hasMore,
     isLoading,
     error,
@@ -697,22 +748,43 @@ export function useProducts(options: UseListOptions = {}) {
   };
 }
 
-/**
- * Bounded aggregate for the Products page "at a glance" tiles. Fetches up to
- * `sampleSize` products (independent of the paginated list) and computes the
- * special-handling / temperature-controlled counts so the tiles never reflect
- * a single truncated page. There is no product *Count field on the frozen
- * supergraph, so this bounded sample is the aggregate source.
- */
-export function useProductStats(sampleSize = 500) {
-  const { products, isLoading, error } = useProducts({ limit: sampleSize, offset: 0 });
+const PRODUCT_STATS_QUERY = `
+  query CargoItemStats {
+    cargoItemStats {
+      total
+      specialHandling
+      temperatureControlled
+    }
+  }
+`;
+
+export function useProductStats() {
+  const graphQLOptions = useGraphqlOptions();
+  const [stats, setStats] = useState({ total: 0, specialHandling: 0, temperatureControlled: 0 });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ cargoItemStats: typeof stats }>(
+          graphQLOptions,
+          PRODUCT_STATS_QUERY
+        );
+        setStats(data.cargoItemStats);
+      } catch (fetchError) {
+        setError(
+          fetchError instanceof Error ? fetchError : new Error('Failed to load product stats')
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-  const stats = useMemo(() => {
-    const total = products.length;
-    const specialHandling = products.filter((item) => item.fragile || item.hazardous).length;
-    const temperatureControlled = products.filter((item) => item.temperatureControlled).length;
-    return { total, specialHandling, temperatureControlled };
-  }, [products]);
+    void load();
+  }, [graphQLOptions]);
 
   return { stats, isLoading, error };
 }
@@ -753,10 +825,11 @@ export function useProduct(productId: string | undefined) {
   return { product, isLoading, error, refetch: () => void load() };
 }
 
-export function useWarehouses(options: UseListOptions = {}) {
-  const { limit = 500, offset = 0 } = options;
+export function useWarehouses(options: UseWarehousesOptions = {}) {
+  const { limit = 20, offset = 0, search } = options;
   const graphQLOptions = useGraphqlOptions();
   const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+  const [totalWarehouses, setTotalWarehouses] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
@@ -765,21 +838,22 @@ export function useWarehouses(options: UseListOptions = {}) {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ warehouses: ApiWarehouse[] }>(
-        graphQLOptions,
-        LIST_WAREHOUSES_QUERY,
-        {
-          pagination: { limit, offset },
-        }
-      );
-      setHasMore(data.warehouses.length === limit);
+      const data = await executeGraphQL<{
+        warehouses: ApiWarehouse[];
+        warehousesCount: number;
+      }>(graphQLOptions, LIST_WAREHOUSES_QUERY, {
+        filter: { search: search || undefined },
+        pagination: { limit, offset },
+      });
+      setTotalWarehouses(data.warehousesCount);
+      setHasMore(offset + data.warehouses.length < data.warehousesCount);
       setWarehouses(data.warehouses.map(mapWarehouse));
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load warehouses'));
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset]);
+  }, [graphQLOptions, limit, offset, search]);
 
   useEffect(() => {
     void load();
@@ -787,7 +861,7 @@ export function useWarehouses(options: UseListOptions = {}) {
 
   return {
     warehouses,
-    totalWarehouses: warehouses.length,
+    totalWarehouses,
     hasMore,
     isLoading,
     error,
@@ -795,30 +869,43 @@ export function useWarehouses(options: UseListOptions = {}) {
   };
 }
 
-/**
- * Bounded aggregate for the Warehouses page "at a glance" tiles — fetches up to
- * `sampleSize` warehouses (independent of the paginated list) so the active /
- * avg-utilization tiles never reflect a single truncated page.
- */
-export function useWarehouseStats(sampleSize = 500) {
-  const { warehouses, isLoading, error } = useWarehouses({ limit: sampleSize, offset: 0 });
-
-  const stats = useMemo(() => {
-    const total = warehouses.length;
-    const active = warehouses.filter((item) => item.isActive).length;
-    const avgUtilization =
-      total > 0
-        ? warehouses.reduce(
-            (sum, item) =>
-              sum +
-              (item.capacity.totalSpace > 0
-                ? item.capacity.usedSpace / item.capacity.totalSpace
-                : 0),
-            0
-          ) / total
-        : 0;
-    return { total, active, avgUtilization };
-  }, [warehouses]);
+const WAREHOUSE_STATS_QUERY = `
+  query WarehouseStats {
+    warehouseStats {
+      total
+      active
+      avgUtilization
+    }
+  }
+`;
+
+export function useWarehouseStats() {
+  const graphQLOptions = useGraphqlOptions();
+  const [stats, setStats] = useState({ total: 0, active: 0, avgUtilization: 0 });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ warehouseStats: typeof stats }>(
+          graphQLOptions,
+          WAREHOUSE_STATS_QUERY
+        );
+        setStats(data.warehouseStats);
+      } catch (fetchError) {
+        setError(
+          fetchError instanceof Error ? fetchError : new Error('Failed to load warehouse stats')
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void load();
+  }, [graphQLOptions]);
 
   return { stats, isLoading, error };
 }
@@ -941,8 +1028,8 @@ export function useInventoryStats() {
  * the row instead of being joined against a separately-paged warehouse list.
  */
 const PRODUCT_STOCK_LEVELS_QUERY = `
-  query GetCargoItemStockLevels($cargoItemId: ID!) {
-    inventoryItems(filter: { cargoItemId: $cargoItemId }, pagination: { limit: 200, offset: 0 }) {
+  query GetCargoItemStockLevels($cargoItemId: ID!, $pagination: PaginationInput) {
+    inventoryItems(filter: { cargoItemId: $cargoItemId }, pagination: $pagination) {
       id
       onHand
       available
@@ -955,6 +1042,10 @@ const PRODUCT_STOCK_LEVELS_QUERY = `
         code
       }
     }
+    inventoryItemsCount(filter: { cargoItemId: $cargoItemId })
+    inventoryStats(filter: { cargoItemId: $cargoItemId }) {
+      totalAvailable
+    }
   }
 `;
 
@@ -980,28 +1071,48 @@ interface ApiProductStockLevel {
   warehouse?: { id: string; name: string; code: string } | null;
 }
 
+interface ApiProductStockSummary {
+  totalAvailable: number;
+}
+
+interface ProductStockLevelOptions {
+  limit?: number;
+  offset?: number;
+}
+
 /** Where a catalog item is stocked, and how much of it is free to promise. */
-export function useProductStockLevels(productId: string | undefined) {
+export function useProductStockLevels(
+  productId: string | undefined,
+  options: ProductStockLevelOptions = {}
+) {
+  const { limit = 20, offset = 0 } = options;
   const graphQLOptions = useGraphqlOptions();
   const [levels, setLevels] = useState<ProductStockLevel[]>([]);
+  const [totalLevels, setTotalLevels] = useState(0);
+  const [totalAvailable, setTotalAvailable] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
   const load = useCallback(async () => {
     if (!productId) {
       setLevels([]);
+      setTotalLevels(0);
+      setTotalAvailable(0);
       return;
     }
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ inventoryItems: ApiProductStockLevel[] }>(
-        graphQLOptions,
-        PRODUCT_STOCK_LEVELS_QUERY,
-        { cargoItemId: productId }
-      );
+      const data = await executeGraphQL<{
+        inventoryItems: ApiProductStockLevel[];
+        inventoryItemsCount: number;
+        inventoryStats: ApiProductStockSummary;
+      }>(graphQLOptions, PRODUCT_STOCK_LEVELS_QUERY, {
+        cargoItemId: productId,
+        pagination: { limit, offset },
+      });
       setLevels(
-        data.inventoryItems.map((item) => ({
+        (data.inventoryItems ?? []).map((item) => ({
           inventoryItemId: item.id,
           warehouseId: item.warehouse?.id ?? '',
           warehouseName: item.warehouse?.name ?? 'Unknown warehouse',
@@ -1013,12 +1124,14 @@ export function useProductStockLevels(productId: string | undefined) {
           reorderPoint: item.reorderPoint ?? undefined,
         }))
       );
+      setTotalLevels(data.inventoryItemsCount ?? 0);
+      setTotalAvailable(data.inventoryStats?.totalAvailable ?? 0);
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load stock levels'));
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, productId]);
+  }, [graphQLOptions, limit, offset, productId]);
 
   useEffect(() => {
     void load();
@@ -1028,7 +1141,15 @@ export function useProductStockLevels(productId: string | undefined) {
     void load();
   }, [load]);
 
-  return { levels, isLoading, error, refetch };
+  return {
+    levels,
+    totalLevels,
+    totalAvailable,
+    hasMore: offset + levels.length < totalLevels,
+    isLoading,
+    error,
+    refetch,
+  };
 }
 
 export type InventoryTransactionType = 'RECEIPT' | 'ISSUE' | 'TRANSFER' | 'ADJUSTMENT' | 'RETURN';

package/src/movethewheels/hooks/useMultiModalShipments.ts

@@ -12,12 +12,7 @@ import { executeGraphQL } from '../utils/graphqlClient';
 
 export type TransportMode = 'ROAD' | 'AIR' | 'OCEAN' | 'RAIL';
 export type ShipmentLegStatus =
-  | 'PLANNED'
-  | 'BOOKED'
-  | 'IN_TRANSIT'
-  | 'ARRIVED'
-  | 'DELIVERED'
-  | 'CANCELLED';
+  'PLANNED' | 'BOOKED' | 'IN_TRANSIT' | 'ARRIVED' | 'DELIVERED' | 'CANCELLED';
 export type OceanContainerType = 'LCL' | 'FCL_20FT' | 'FCL_40FT' | 'FCL_40FT_HC';
 
 export interface FreightRateBreakdownLine {
@@ -139,7 +134,7 @@ const SHIPMENT_FIELDS = `
   origin
   destination
   createdAt
-  legs {
+  legs(pagination: { limit: 20, offset: 0 }) {
     ${LEG_FIELDS}
   }
 `;
@@ -149,6 +144,7 @@ const MULTI_MODAL_SHIPMENTS_QUERY = `
     shipments(filter: { isMultiModal: true }, pagination: $pagination) {
       ${SHIPMENT_FIELDS}
     }
+    shipmentsCount(filter: { isMultiModal: true })
   }
 `;
 
@@ -269,9 +265,12 @@ function useGraphqlOptions() {
   );
 }
 
-export function useMultiModalShipments() {
+export function useMultiModalShipments(options: { limit?: number; offset?: number } = {}) {
+  const { limit = 10, offset = 0 } = options;
   const graphQLOptions = useGraphqlOptions();
   const [shipments, setShipments] = useState<MultiModalShipment[]>([]);
+  const [totalShipments, setTotalShipments] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -279,12 +278,14 @@ export function useMultiModalShipments() {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ shipments: ApiShipment[] }>(
+      const data = await executeGraphQL<{ shipments: ApiShipment[]; shipmentsCount: number }>(
         graphQLOptions,
         MULTI_MODAL_SHIPMENTS_QUERY,
-        { pagination: { limit: 100, offset: 0 } }
+        { pagination: { limit, offset } }
       );
       setShipments(data.shipments.map(mapShipment));
+      setTotalShipments(data.shipmentsCount);
+      setHasMore(offset + data.shipments.length < data.shipmentsCount);
     } catch (fetchError) {
       setError(
         fetchError instanceof Error ? fetchError : new Error('Failed to load multi-modal shipments')
@@ -292,7 +293,7 @@ export function useMultiModalShipments() {
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions]);
+  }, [graphQLOptions, limit, offset]);
 
   useEffect(() => {
     void load();
@@ -333,6 +334,7 @@ export function useMultiModalShipments() {
       );
       const created = mapShipment(data.planMultiModalShipment);
       setShipments((previous) => [created, ...previous]);
+      setTotalShipments((previous) => previous + 1);
       return created;
     },
     [graphQLOptions]
@@ -340,6 +342,8 @@ export function useMultiModalShipments() {
 
   return {
     shipments,
+    totalShipments,
+    hasMore,
     isLoading,
     error,
     refetch: () => void load(),