@burdenoff/microfe-movethewheels 2026.929.4 → 2026.930.1

package/dist/pages/TrackingPage.js

@@ -82,7 +82,7 @@ function N() {
 				className: "p-6",
 				children: /* @__PURE__ */ k("form", {
 					onSubmit: q,
-					className: "flex gap-4",
+					className: "flex flex-col gap-4 sm:flex-row",
 					children: [/* @__PURE__ */ k("div", {
 						className: "flex-1 relative",
 						children: [/* @__PURE__ */ O(a, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-text-secondary" }), /* @__PURE__ */ O(h, {
@@ -94,6 +94,7 @@ function N() {
 					}), /* @__PURE__ */ O(u, {
 						type: "submit",
 						size: "lg",
+						className: "w-full sm:w-auto",
 						disabled: !z || G,
 						children: G ? P("movethewheels.tracking.search.searching", "Searching...") : P("movethewheels.tracking.search.track", "Track")
 					})]

package/dist/utils/orderValidation.js

@@ -0,0 +1,18 @@
+//#region src/movethewheels/utils/orderValidation.ts
+var e = (e) => Number.isFinite(e) && e >= 0;
+function t(t) {
+	let n = {}, r = t.productId.trim().length > 0, i = t.name.trim().length > 0;
+	!r && !i && (n.name = "Enter an item name or select a catalog product."), t.sku.trim().length === 0 && (n.sku = "SKU is required for every shipment item."), (!Number.isFinite(t.quantity) || t.quantity <= 0) && (n.quantity = "Quantity must be a finite number greater than 0."), e(t.weight) || (n.weight = "Weight must be a finite number of 0 or more."), e(t.value) || (n.value = "Value must be a finite number of 0 or more.");
+	let a = t.dimensions;
+	for (let t of [
+		"length",
+		"width",
+		"height"
+	]) (!a || !e(a[t])) && (n[t] = `${t[0].toUpperCase()}${t.slice(1)} must be a finite number of 0 or more.`);
+	return n;
+}
+function n(e) {
+	return Object.fromEntries(e.map((e) => [e.id, t(e)]).filter(([, e]) => Object.keys(e).length > 0));
+}
+//#endregion
+export { n as validateOrderItems };

package/package.json

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

package/src/movethewheels/components/CustomerPicker.tsx

@@ -27,8 +27,12 @@ interface CustomerPickerProps {
   onCreated: (customer: Customer) => void;
   createCustomer: (customer: Partial<Customer>) => Promise<Customer>;
   isLoading: boolean;
+  isLoadingMore?: boolean;
   error: Error | null;
   onRetry: () => void;
+  onLoadMore?: () => void | Promise<void>;
+  hasMore?: boolean;
+  totalCount?: number;
   onOpenCustomers?: () => void;
   selectedCustomer?: Customer | null;
   /** Called with the (already debounced) query text as the user types in the
@@ -60,8 +64,12 @@ export function CustomerPicker({
   onCreated,
   createCustomer,
   isLoading,
+  isLoadingMore = false,
   error,
   onRetry,
+  onLoadMore,
+  hasMore = false,
+  totalCount,
   onOpenCustomers,
   selectedCustomer,
   onSearchQueryChange,
@@ -153,6 +161,10 @@ export function CustomerPicker({
           disabled={disabled || Boolean(error)}
           error={error ? 'Customers could not be loaded' : undefined}
           onSearchChange={onSearchQueryChange}
+          hasMore={hasMore}
+          totalCount={totalCount}
+          onLoadMore={onLoadMore}
+          loadingMore={isLoadingMore}
           className="flex-1"
         />
         {error && (

package/src/movethewheels/components/EntityCombobox.tsx

@@ -8,10 +8,10 @@
  * already proven by `microfe-product`'s `ProductCombobox`.
  *
  * Every list this feeds (`useRoutes`, `useCustomers`, `useVehicles`,
- * `useDrivers`) is capped to a small server page (`limit`, default 20) so the
- * option list is never "fetch everything" — a workspace with thousands of
- * records would otherwise either hang the request or silently truncate. Two
- * search modes cover both call shapes in this app:
+ * `useDrivers`, and product pickers) is capped to a small server page (`limit`,
+ * default 20). When the source exposes `onLoadMore`, the accessible Load more
+ * control requests the next server page and appends it without losing the
+ * current selection.
  *
  * - **Internal search** (pass `onSearchChange`): the combobox renders its own
  *   debounced `CommandInput` and calls back with the debounced query so the
@@ -76,10 +76,13 @@ interface EntityComboboxProps<T> {
   /** Server-side search callback (debounced). Omit to hide the built-in search
    *  input when a caller already provides one elsewhere for the same list. */
   onSearchChange?: (value: string) => void;
-  /** True when the source hook's page doesn't hold every matching record —
-   *  paired with `totalCount` to render a "keep typing to narrow" hint. */
+  /** True when the source hook has another server page available. */
   hasMore?: boolean;
   totalCount?: number;
+  /** Fetches and appends the next server page without replacing the current options. */
+  onLoadMore?: () => void | Promise<void>;
+  /** True while the next server page is being fetched. */
+  loadingMore?: boolean;
 }
 
 export function EntityCombobox<T>({
@@ -104,6 +107,8 @@ export function EntityCombobox<T>({
   onSearchChange,
   hasMore = false,
   totalCount,
+  onLoadMore,
+  loadingMore = false,
 }: EntityComboboxProps<T>) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState('');
@@ -140,7 +145,7 @@ export function EntityCombobox<T>({
     className
   );
 
-  const showMoreHint = hasMore && typeof totalCount === 'number' && totalCount > options.length;
+  const canLoadMore = Boolean(onLoadMore && hasMore);
 
   return (
     <Popover
@@ -223,10 +228,24 @@ export function EntityCombobox<T>({
                 </CommandItem>
               );
             })}
-            {showMoreHint && (
-              <div className="px-2 py-1.5 text-xs text-text-tertiary border-t border-border-seam">
-                Showing {options.length} of {totalCount}
-                {onSearchChange ? ' — keep typing to narrow results.' : '.'}
+            {canLoadMore && (
+              <div className="border-t border-border-seam p-2">
+                <button
+                  type="button"
+                  className="w-full rounded-md px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/10 focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:opacity-60"
+                  onClick={() => void onLoadMore?.()}
+                  disabled={loading || loadingMore}
+                  aria-busy={loadingMore}
+                  aria-label={
+                    loadingMore
+                      ? 'Loading more options'
+                      : `Load more options${typeof totalCount === 'number' ? ` (${options.length} of ${totalCount} shown)` : ''}`
+                  }
+                >
+                  {loadingMore
+                    ? 'Loading more…'
+                    : `Load more${typeof totalCount === 'number' ? ` (${options.length} of ${totalCount})` : ''}`}
+                </button>
               </div>
             )}
           </CommandList>

package/src/movethewheels/components/OrderItemRow.tsx

@@ -12,12 +12,18 @@ import { Button, Input, Label } from './ui';
 import { EntityCombobox } from './EntityCombobox';
 import { useProduct, useProductStockLevels } from '../hooks/useInventory';
 import type { Dimensions, OrderItem, Product } from '../types';
+import type { OrderItemFieldErrors } from '../utils/orderValidation';
 
 interface OrderItemRowProps {
   item: OrderItem;
   index: number;
   products: Product[];
   productsLoading: boolean;
+  productsLoadingMore?: boolean;
+  productsHasMore?: boolean;
+  productsTotalCount?: number;
+  onLoadMoreProducts?: () => void | Promise<void>;
+  errors?: OrderItemFieldErrors;
   onUpdate: (index: number, field: string, value: unknown) => void;
   onRemove: (index: number) => void;
 }
@@ -37,6 +43,11 @@ export function OrderItemRow({
   index,
   products,
   productsLoading,
+  productsLoadingMore = false,
+  productsHasMore = false,
+  productsTotalCount,
+  onLoadMoreProducts,
+  errors = {},
   onUpdate,
   onRemove,
 }: OrderItemRowProps) {
@@ -80,6 +91,17 @@ export function OrderItemRow({
     });
   };
 
+  const fieldError = (field: keyof OrderItemFieldErrors) =>
+    errors[field] ? (
+      <p
+        id={`item-${field}-${item.id}-error`}
+        className="text-xs text-status-error-text"
+        role="alert"
+      >
+        {errors[field]}
+      </p>
+    ) : null;
+
   return (
     <div
       className="rounded-card border border-border-subtle bg-bg-surface p-4 shadow-elevation-1 sm:p-5"
@@ -131,6 +153,10 @@ export function OrderItemRow({
             placeholder="Pick from your product catalog"
             emptyText="No products found."
             noneLabel="Enter details manually"
+            hasMore={productsHasMore}
+            totalCount={productsTotalCount}
+            onLoadMore={onLoadMoreProducts}
+            loadingMore={productsLoadingMore}
           />
           {item.productId && !stockLoading && (
             <p className="mt-2 text-xs text-text-secondary" role="status">
@@ -149,7 +175,10 @@ export function OrderItemRow({
                 onUpdate(index, 'name', e.target.value)
               }
               placeholder="Product name"
+              aria-invalid={Boolean(errors.name)}
+              aria-describedby={errors.name ? `item-name-${item.id}-error` : undefined}
             />
+            {fieldError('name')}
           </div>
           <div className="space-y-2 lg:col-span-3">
             <Label htmlFor={`item-sku-${item.id}`}>SKU</Label>
@@ -160,7 +189,10 @@ export function OrderItemRow({
                 onUpdate(index, 'sku', e.target.value)
               }
               placeholder="SKU-001"
+              aria-invalid={Boolean(errors.sku)}
+              aria-describedby={errors.sku ? `item-sku-${item.id}-error` : undefined}
             />
+            {fieldError('sku')}
           </div>
           <div className="space-y-2 lg:col-span-2">
             <Label htmlFor={`item-quantity-${item.id}`}>Quantity</Label>
@@ -172,7 +204,10 @@ export function OrderItemRow({
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 onUpdate(index, 'quantity', parseInt(e.target.value, 10) || 1)
               }
+              aria-invalid={Boolean(errors.quantity)}
+              aria-describedby={errors.quantity ? `item-quantity-${item.id}-error` : undefined}
             />
+            {fieldError('quantity')}
           </div>
           <div className="space-y-2 lg:col-span-2">
             <Label htmlFor={`item-weight-${item.id}`}>Weight (kg)</Label>
@@ -185,7 +220,10 @@ export function OrderItemRow({
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 onUpdate(index, 'weight', parseFloat(e.target.value) || 0)
               }
+              aria-invalid={Boolean(errors.weight)}
+              aria-describedby={errors.weight ? `item-weight-${item.id}-error` : undefined}
             />
+            {fieldError('weight')}
           </div>
           <div className="space-y-2 lg:col-span-1">
             <Label htmlFor={`item-value-${item.id}`}>Value ($)</Label>
@@ -198,7 +236,10 @@ export function OrderItemRow({
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 onUpdate(index, 'value', parseFloat(e.target.value) || 0)
               }
+              aria-invalid={Boolean(errors.value)}
+              aria-describedby={errors.value ? `item-value-${item.id}-error` : undefined}
             />
+            {fieldError('value')}
           </div>
         </div>
 
@@ -221,7 +262,10 @@ export function OrderItemRow({
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     updateDimension(field, e.target.value)
                   }
+                  aria-invalid={Boolean(errors[field])}
+                  aria-describedby={errors[field] ? `item-${field}-${item.id}-error` : undefined}
                 />
+                {fieldError(field)}
               </div>
             ))}
           </div>

package/src/movethewheels/hooks/useCustomers.ts

@@ -14,8 +14,11 @@ interface UseCustomersResult {
   totalCustomers: number;
   hasMore: boolean;
   isLoading: boolean;
+  /** True while an additional server page is appended. */
+  isLoadingMore: boolean;
   error: Error | null;
   refetch: () => void;
+  loadMore: () => Promise<void>;
   createCustomer: (customer: Partial<Customer>) => Promise<Customer>;
   updateCustomer: (id: string, updates: Partial<Customer>) => Promise<Customer>;
   deleteCustomer: (id: string) => Promise<void>;
@@ -163,6 +166,7 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
   const [totalCustomers, setTotalCustomers] = 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 graphQLOptions = useMemo(
@@ -204,6 +208,38 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
     }
   }, [filters, graphQLOptions, limit, offset]);
 
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoading || isLoadingMore) return;
+    const nextOffset = offset + customers.length;
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        customers: ApiCustomer[];
+        customersCount: number;
+      }>(graphQLOptions, LIST_CUSTOMERS_QUERY, {
+        filter: {
+          type: filters?.type,
+          search: filters?.search,
+        },
+        pagination: { limit, offset: nextOffset },
+      });
+      const mapped = data.customers.map(mapCustomer);
+      setTotalCustomers(data.customersCount);
+      setHasMore(nextOffset + mapped.length < data.customersCount);
+      setCustomers((previous) => {
+        const existingIds = new Set(previous.map((customer) => customer.id));
+        return [...previous, ...mapped.filter((customer) => !existingIds.has(customer.id))];
+      });
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load more customers')
+      );
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [customers.length, filters, graphQLOptions, hasMore, isLoading, isLoadingMore, limit, offset]);
+
   useEffect(() => {
     void loadCustomers();
   }, [loadCustomers]);
@@ -278,8 +314,10 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
     totalCustomers,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch,
+    loadMore,
     createCustomer,
     updateCustomer,
     deleteCustomer,

package/src/movethewheels/hooks/useFleet.ts

@@ -928,8 +928,11 @@ interface UseVehiclesResult {
   /** True when the last fetch returned a full page (rawCount === limit). */
   hasMore: boolean;
   isLoading: boolean;
+  /** True while an additional server page is appended. */
+  isLoadingMore: boolean;
   error: Error | null;
   refetch: () => void;
+  loadMore: () => Promise<void>;
   updateVehicleStatus: (id: string, status: VehicleStatus) => Promise<Vehicle>;
   assignDriver: (vehicleId: string, driverId: string) => Promise<Vehicle>;
   deleteVehicle: (id: string) => Promise<void>;
@@ -942,13 +945,16 @@ export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult
   const [totalVehicles, setTotalVehicles] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   // Stable dependency key for the `ids` array — a caller passing a fresh array
   // literal each render must not defeat the callback's memoization.
   const idsKey = ids ? [...ids].sort().join(',') : '';
+  const idsFilterMode = ids === undefined ? 'none' : 'exact';
+  const exactIds = useMemo(() => (idsKey ? idsKey.split(',') : []), [idsKey]);
 
   const load = useCallback(async () => {
-    if (ids && ids.length === 0) {
+    if (idsFilterMode === 'exact' && exactIds.length === 0) {
       // Nothing to look up — skip the request and clear stale results.
       setVehicles([]);
       setTotalVehicles(0);
@@ -967,11 +973,14 @@ export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult
           status: status ? toApiVehicleStatus(status) : undefined,
           type: vehicleType?.toUpperCase(),
           driverId: driverId || undefined,
-          ids: ids && ids.length > 0 ? [...ids] : undefined,
+          ids: exactIds.length > 0 ? exactIds : undefined,
+        },
+        pagination: {
+          limit: idsFilterMode === 'exact' ? exactIds.length : limit,
+          offset: idsFilterMode === 'exact' ? 0 : offset,
         },
-        pagination: { limit: ids && ids.length > 0 ? ids.length : limit, offset: ids ? 0 : offset },
       });
-      setHasMore(offset + data.vehicles.length < data.vehiclesCount);
+      setHasMore(idsFilterMode === 'none' && offset + data.vehicles.length < data.vehiclesCount);
       setTotalVehicles(data.vehiclesCount);
       setVehicles(data.vehicles.map(mapVehicle));
     } catch (fetchError) {
@@ -979,7 +988,65 @@ export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset, search, status, vehicleType, driverId, idsKey]);
+  }, [
+    graphQLOptions,
+    limit,
+    offset,
+    search,
+    status,
+    vehicleType,
+    driverId,
+    idsFilterMode,
+    exactIds,
+  ]);
+
+  const loadMore = useCallback(async () => {
+    if (idsFilterMode === 'exact' || !hasMore || isLoading || isLoadingMore) return;
+    const nextOffset = offset + vehicles.length;
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{ vehicles: ApiVehicle[]; vehiclesCount: number }>(
+        graphQLOptions,
+        LIST_VEHICLES_QUERY,
+        {
+          filter: {
+            search: search || undefined,
+            status: status ? toApiVehicleStatus(status) : undefined,
+            type: vehicleType?.toUpperCase(),
+            driverId: driverId || undefined,
+          },
+          pagination: { limit, offset: nextOffset },
+        }
+      );
+      const mapped = data.vehicles.map(mapVehicle);
+      setTotalVehicles(data.vehiclesCount);
+      setHasMore(nextOffset + mapped.length < data.vehiclesCount);
+      setVehicles((previous) => {
+        const existingIds = new Set(previous.map((vehicle) => vehicle.id));
+        return [...previous, ...mapped.filter((vehicle) => !existingIds.has(vehicle.id))];
+      });
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load more vehicles')
+      );
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [
+    driverId,
+    graphQLOptions,
+    hasMore,
+    idsFilterMode,
+    isLoading,
+    isLoadingMore,
+    limit,
+    offset,
+    search,
+    status,
+    vehicleType,
+    vehicles.length,
+  ]);
 
   useEffect(() => {
     void load();
@@ -1044,8 +1111,10 @@ export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult
     totalVehicles,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch,
+    loadMore,
     updateVehicleStatus,
     assignDriver,
     deleteVehicle,
@@ -1099,8 +1168,11 @@ interface UseDriversResult {
   /** True when the last fetch returned a full page (rawCount === limit). */
   hasMore: boolean;
   isLoading: boolean;
+  /** True while an additional server page is appended. */
+  isLoadingMore: boolean;
   error: Error | null;
   refetch: () => void;
+  loadMore: () => Promise<void>;
   updateDriverStatus: (id: string, status: DriverStatus) => Promise<Driver>;
   assignVehicle: (driverId: string, vehicleId: string | null) => Promise<Driver>;
 }
@@ -1121,6 +1193,7 @@ export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
   const [totalDrivers, setTotalDrivers] = 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 () => {
@@ -1149,6 +1222,51 @@ export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
     }
   }, [graphQLOptions, limit, offset, status, search, licenseClass, vehicleId]);
 
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoading || isLoadingMore) return;
+    const nextOffset = offset + drivers.length;
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{ drivers: ApiDriver[]; driversCount: number }>(
+        graphQLOptions,
+        LIST_DRIVERS_QUERY,
+        {
+          filter: {
+            status: status ? toApiDriverStatus(status) : undefined,
+            search: search || undefined,
+            licenseClass: licenseClass || undefined,
+            vehicleId: vehicleId || undefined,
+          },
+          pagination: { limit, offset: nextOffset },
+        }
+      );
+      const mapped = data.drivers.map(mapDriver);
+      setTotalDrivers(data.driversCount);
+      setHasMore(nextOffset + mapped.length < data.driversCount);
+      setDrivers((previous) => {
+        const existingIds = new Set(previous.map((driver) => driver.id));
+        return [...previous, ...mapped.filter((driver) => !existingIds.has(driver.id))];
+      });
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load more drivers'));
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [
+    drivers.length,
+    graphQLOptions,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    limit,
+    licenseClass,
+    offset,
+    search,
+    status,
+    vehicleId,
+  ]);
+
   useEffect(() => {
     void load();
   }, [load]);
@@ -1196,8 +1314,10 @@ export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
     totalDrivers,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch,
+    loadMore,
     updateDriverStatus,
     assignVehicle,
   };

package/src/movethewheels/hooks/useInventory.ts

@@ -849,6 +849,7 @@ export function useProducts(options: UseProductsOptions = {}) {
   const [totalProducts, setTotalProducts] = 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 () => {
@@ -872,6 +873,45 @@ export function useProducts(options: UseProductsOptions = {}) {
     }
   }, [graphQLOptions, limit, offset, search, category]);
 
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoading || isLoadingMore) return;
+    const nextOffset = offset + products.length;
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{
+        cargoItems: ApiProduct[];
+        cargoItemsCount: number;
+      }>(graphQLOptions, LIST_PRODUCTS_QUERY, {
+        filter: { search: search || undefined, category: category || undefined },
+        pagination: { limit, offset: nextOffset },
+      });
+      const mapped = data.cargoItems.map(mapProduct);
+      setTotalProducts(data.cargoItemsCount);
+      setHasMore(nextOffset + mapped.length < data.cargoItemsCount);
+      setProducts((previous) => {
+        const existingIds = new Set(previous.map((product) => product.id));
+        return [...previous, ...mapped.filter((product) => !existingIds.has(product.id))];
+      });
+    } catch (fetchError) {
+      setError(
+        fetchError instanceof Error ? fetchError : new Error('Failed to load more products')
+      );
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [
+    category,
+    graphQLOptions,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    limit,
+    offset,
+    products.length,
+    search,
+  ]);
+
   useEffect(() => {
     void load();
   }, [load]);
@@ -881,8 +921,10 @@ export function useProducts(options: UseProductsOptions = {}) {
     totalProducts,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch: () => void load(),
+    loadMore,
   };
 }
 

package/src/movethewheels/hooks/useMultiModalShipments.ts

@@ -140,11 +140,11 @@ const SHIPMENT_FIELDS = `
 `;
 
 const MULTI_MODAL_SHIPMENTS_QUERY = `
-  query ListMultiModalShipments($pagination: PaginationInput) {
-    shipments(filter: { isMultiModal: true }, pagination: $pagination) {
+  query ListMultiModalShipments($search: String, $pagination: PaginationInput) {
+    shipments(filter: { isMultiModal: true, search: $search }, pagination: $pagination) {
       ${SHIPMENT_FIELDS}
     }
-    shipmentsCount(filter: { isMultiModal: true })
+    shipmentsCount(filter: { isMultiModal: true, search: $search })
   }
 `;
 
@@ -265,8 +265,10 @@ function useGraphqlOptions() {
   );
 }
 
-export function useMultiModalShipments(options: { limit?: number; offset?: number } = {}) {
-  const { limit = 10, offset = 0 } = options;
+export function useMultiModalShipments(
+  options: { limit?: number; offset?: number; search?: string } = {}
+) {
+  const { limit = 10, offset = 0, search = '' } = options;
   const graphQLOptions = useGraphqlOptions();
   const [shipments, setShipments] = useState<MultiModalShipment[]>([]);
   const [totalShipments, setTotalShipments] = useState(0);
@@ -281,7 +283,7 @@ export function useMultiModalShipments(options: { limit?: number; offset?: numbe
       const data = await executeGraphQL<{ shipments: ApiShipment[]; shipmentsCount: number }>(
         graphQLOptions,
         MULTI_MODAL_SHIPMENTS_QUERY,
-        { pagination: { limit, offset } }
+        { search: search.trim() || undefined, pagination: { limit, offset } }
       );
       setShipments(data.shipments.map(mapShipment));
       setTotalShipments(data.shipmentsCount);
@@ -293,7 +295,7 @@ export function useMultiModalShipments(options: { limit?: number; offset?: numbe
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset]);
+  }, [graphQLOptions, limit, offset, search]);
 
   useEffect(() => {
     void load();