@burdenoff/microfe-movethewheels 2026.929.4 → 2026.930.2

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/pages/VehicleDetailsPage.js

@@ -19,15 +19,16 @@ import { FormError as L } from "../components/FormError.js";
 import { Notice as R, useNotice as z } from "../components/Notice.js";
 import { formatDate as B, getInitials as V } from "../utils/formatters.js";
 import { DocumentsCard as H } from "../components/DocumentsCard.js";
-import { useRecordVehicleService as U } from "../hooks/useFleetIntelligence.js";
-import { VehicleServiceCard as W } from "../components/VehicleServiceCard.js";
+import { useRefetchOnLeaveEdit as U } from "../hooks/useRefetchOnLeaveEdit.js";
+import { useRecordVehicleService as W } from "../hooks/useFleetIntelligence.js";
+import { VehicleServiceCard as ee } from "../components/VehicleServiceCard.js";
 import { useEffect as G, useState as K } from "react";
-import { useLocation as ee, useParams as te } from "react-router";
+import { useLocation as te, useParams as ne } from "react-router";
 import { jsx as q, jsxs as J } from "react/jsx-runtime";
-import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { EmphasisPanel as Y, NextSteps as re, PagePurpose as X, ResponsiveDialog as Z, ResponsiveDialogContent as Q, ResponsiveDialogDescription as $, ResponsiveDialogFooter as ie, ResponsiveDialogHeader as ae, ResponsiveDialogTitle as oe } from "@burdenoff/fe-libs/ui";
+import { useI18n as re } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { EmphasisPanel as Y, NextSteps as ie, PagePurpose as X, ResponsiveDialog as Z, ResponsiveDialogContent as Q, ResponsiveDialogDescription as $, ResponsiveDialogFooter as ae, ResponsiveDialogHeader as oe, ResponsiveDialogTitle as se } from "@burdenoff/fe-libs/ui";
 //#region src/movethewheels/pages/VehicleDetailsPage.tsx
-var se = [
+var ce = [
 	{
 		value: "TRUCK",
 		label: "Truck"
@@ -60,10 +61,10 @@ var se = [
 		value: "DRONE",
 		label: "Drone"
 	}
-], ce = Object.entries(P).map(([e, t]) => ({
+], le = Object.entries(P).map(([e, t]) => ({
 	value: e,
 	label: t
-})), le = [
+})), ue = [
 	{
 		value: "DIESEL",
 		label: "Diesel"
@@ -84,7 +85,7 @@ var se = [
 		value: "HYBRID",
 		label: "Hybrid"
 	}
-], ue = [
+], de = [
 	{
 		value: "owned",
 		label: "Owned"
@@ -98,7 +99,7 @@ var se = [
 		label: "Rented"
 	}
 ];
-function de({ editId: t }) {
+function fe({ editId: t }) {
 	let { basePath: n, navigate: r } = d(), { createVehicle: i, updateVehicle: o, deleteVehicle: l } = p(), { vehicle: h } = m(t), g = !!t, [_, T] = K({
 		vehicleNumber: "",
 		type: "VAN",
@@ -240,7 +241,7 @@ function de({ editId: t }) {
 										children: [/* @__PURE__ */ q(k, {
 											id: "type",
 											children: /* @__PURE__ */ q(A, {})
-										}), /* @__PURE__ */ q(D, { children: se.map((e) => /* @__PURE__ */ q(O, {
+										}), /* @__PURE__ */ q(D, { children: ce.map((e) => /* @__PURE__ */ q(O, {
 											value: e.value,
 											children: e.label
 										}, e.value)) })]
@@ -314,7 +315,7 @@ function de({ editId: t }) {
 											children: [/* @__PURE__ */ q(k, {
 												id: "ownershipType",
 												children: /* @__PURE__ */ q(A, { placeholder: "Select ownership" })
-											}), /* @__PURE__ */ q(D, { children: ue.map((e) => /* @__PURE__ */ q(O, {
+											}), /* @__PURE__ */ q(D, { children: de.map((e) => /* @__PURE__ */ q(O, {
 												value: e.value,
 												children: e.label
 											}, e.value)) })]
@@ -352,7 +353,7 @@ function de({ editId: t }) {
 											children: [/* @__PURE__ */ q(k, {
 												id: "vehicleStatus",
 												children: /* @__PURE__ */ q(A, {})
-											}), /* @__PURE__ */ q(D, { children: ce.map((e) => /* @__PURE__ */ q(O, {
+											}), /* @__PURE__ */ q(D, { children: le.map((e) => /* @__PURE__ */ q(O, {
 												value: e.value,
 												children: e.label
 											}, e.value)) })]
@@ -370,7 +371,7 @@ function de({ editId: t }) {
 									}), /* @__PURE__ */ J(E, {
 										value: _.fuelType || void 0,
 										onValueChange: (e) => {
-											let t = le.find((t) => t.value === e)?.value;
+											let t = ue.find((t) => t.value === e)?.value;
 											T((e) => ({
 												...e,
 												fuelType: t ?? ""
@@ -379,7 +380,7 @@ function de({ editId: t }) {
 										children: [/* @__PURE__ */ q(k, {
 											id: "fuelType",
 											children: /* @__PURE__ */ q(A, { placeholder: "Select fuel type" })
-										}), /* @__PURE__ */ q(D, { children: le.map((e) => /* @__PURE__ */ q(O, {
+										}), /* @__PURE__ */ q(D, { children: ue.map((e) => /* @__PURE__ */ q(O, {
 											value: e.value,
 											children: e.label
 										}, e.value)) })]
@@ -484,7 +485,7 @@ function de({ editId: t }) {
 				open: I,
 				onOpenChange: R,
 				children: /* @__PURE__ */ J(Q, { children: [
-					/* @__PURE__ */ J(ae, { children: [/* @__PURE__ */ q(oe, { children: "Delete this vehicle?" }), /* @__PURE__ */ J($, { children: [
+					/* @__PURE__ */ J(oe, { children: [/* @__PURE__ */ q(se, { children: "Delete this vehicle?" }), /* @__PURE__ */ J($, { children: [
 						"This removes ",
 						_.vehicleNumber || "this vehicle",
 						" from the active fleet. It cannot be undone from here."
@@ -493,7 +494,7 @@ function de({ editId: t }) {
 						className: "px-1",
 						children: /* @__PURE__ */ q(L, { message: V })
 					}),
-					/* @__PURE__ */ J(ie, { children: [/* @__PURE__ */ q(v, {
+					/* @__PURE__ */ J(ae, { children: [/* @__PURE__ */ q(v, {
 						variant: "outline",
 						onClick: () => R(!1),
 						disabled: z,
@@ -520,12 +521,14 @@ function de({ editId: t }) {
 		]
 	});
 }
-function fe() {
-	let { vehicleId: a } = te(), { basePath: s, navigate: f } = d(), { vehicle: p, isLoading: C, error: w, refetch: E } = m(a), D = U(), { message: O, notify: k } = z(), { t: A } = ne(), P = (e, t) => {
+function pe() {
+	let { vehicleId: a } = ne(), { basePath: s, navigate: f } = d(), { vehicle: p, isLoading: C, error: w, refetch: E } = m(a), D = W(), { message: O, notify: k } = z(), { t: A } = re(), P = (e, t) => {
 		let n = A(e);
 		return n === e ? t : n;
-	}, L = ee().pathname.endsWith("/edit"), { drivers: G, isLoading: K, error: Z } = h(L ? void 0 : a), Q = () => f?.(u(s, "fleet/vehicles")), $ = (e) => f?.(u(s, e));
-	return a ? L ? /* @__PURE__ */ q(de, { editId: a }) : C ? /* @__PURE__ */ q(M, { message: "Loading vehicle details..." }) : w || !p ? /* @__PURE__ */ q(j, {
+	}, L = te().pathname.endsWith("/edit");
+	U(L, E);
+	let { drivers: G, isLoading: K, error: Z } = h(L ? void 0 : a), Q = () => f?.(u(s, "fleet/vehicles")), $ = (e) => f?.(u(s, e));
+	return a ? L ? /* @__PURE__ */ q(fe, { editId: a }) : C ? /* @__PURE__ */ q(M, { message: "Loading vehicle details..." }) : w || !p ? /* @__PURE__ */ q(j, {
 		title: "Vehicle not found",
 		onRetry: E
 	}) : /* @__PURE__ */ J(N, {
@@ -555,7 +558,7 @@ function fe() {
 				icon: /* @__PURE__ */ q(c, { size: 18 }),
 				children: "The full record for this vehicle — specs, capacity, fuel and mileage, who is driving it and where it is right now. Use it to confirm a vehicle is fuelled, crewed and the right size before dispatching it on a delivery."
 			}),
-			/* @__PURE__ */ q(re, {
+			/* @__PURE__ */ q(ie, {
 				storageKey: "movethewheels-vehicle-details",
 				steps: [{
 					id: "assign",
@@ -773,7 +776,7 @@ function fe() {
 								})]
 							}, e.id))
 						})] }),
-						/* @__PURE__ */ q(W, {
+						/* @__PURE__ */ q(ee, {
 							vehicle: p,
 							t: P,
 							onRecord: async (e) => {
@@ -794,7 +797,7 @@ function fe() {
 				})]
 			})
 		]
-	}) : /* @__PURE__ */ q(de, {});
+	}) : /* @__PURE__ */ q(fe, {});
 }
 //#endregion
-export { fe as default };
+export { pe as default };

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.2",
   "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,