@burdenoff/microfe-movethewheels 2026.929.3 → 2026.930.1

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>;
@@ -125,6 +128,7 @@ const DELETE_CUSTOMER_MUTATION = `
 `;
 
 function mapCustomer(customer: ApiCustomer): Customer {
+  const address = customer.address ?? {};
   return {
     id: customer.id,
     name: customer.name,
@@ -132,17 +136,14 @@ function mapCustomer(customer: ApiCustomer): Customer {
     phone: customer.phone ?? '',
     type: customer.type.toLowerCase() === 'b2b' ? 'b2b' : 'b2c',
     company: customer.company ?? undefined,
-    address: {
-      street: '',
-      city: '',
-      state: '',
-      postalCode: '',
-      country: '',
-      ...(customer.address ?? {}),
-    },
+    address: Object.fromEntries(
+      Object.entries(address).filter(
+        ([, value]) => typeof value === 'string' && value.trim().length > 0
+      )
+    ),
     businessLicense: customer.businessLicense ?? undefined,
     taxId: customer.taxId ?? undefined,
-    rating: customer.rating ?? 0,
+    rating: customer.rating ?? undefined,
     createdAt: new Date(customer.createdAt),
     updatedAt: new Date(customer.updatedAt),
   };
@@ -165,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(
@@ -206,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]);
@@ -280,8 +314,10 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
     totalCustomers,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch,
+    loadMore,
     createCustomer,
     updateCustomer,
     deleteCustomer,