@burdenoff/microfe-movethewheels 2026.929.4 → 2026.930.1

package/src/movethewheels/hooks/useRoutes.ts

@@ -18,8 +18,11 @@ interface UseRoutesResult {
   /** True when the last fetch has another server page. */
   hasMore: boolean;
   isLoading: boolean;
+  /** True while an additional server page is appended. */
+  isLoadingMore: boolean;
   error: Error | null;
   refetch: () => void;
+  loadMore: () => Promise<void>;
   createRoute: (route: Partial<Route>) => Promise<Route>;
   updateRoute: (
     id: string,
@@ -275,6 +278,7 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
   const [totalRoutes, setTotalRoutes] = 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 () => {
@@ -304,6 +308,51 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
     }
   }, [driverId, graphQLOptions, search, status, vehicleId, limit, offset]);
 
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoading || isLoadingMore) return;
+    const nextOffset = offset + routes.length;
+    setIsLoadingMore(true);
+    setError(null);
+    try {
+      const data = await executeGraphQL<{ routes: ApiRoute[]; routesCount: number }>(
+        graphQLOptions,
+        LIST_ROUTES_QUERY,
+        {
+          filter: {
+            driverId,
+            vehicleId,
+            status: status ? toApiRouteStatus(status) : undefined,
+            search: search || undefined,
+          },
+          pagination: { limit, offset: nextOffset },
+        }
+      );
+      const mapped = data.routes.map(mapRoute);
+      setTotalRoutes(data.routesCount);
+      setHasMore(nextOffset + mapped.length < data.routesCount);
+      setRoutes((previous) => {
+        const existingIds = new Set(previous.map((route) => route.id));
+        return [...previous, ...mapped.filter((route) => !existingIds.has(route.id))];
+      });
+    } catch (fetchError) {
+      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load more routes'));
+    } finally {
+      setIsLoadingMore(false);
+    }
+  }, [
+    driverId,
+    graphQLOptions,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    limit,
+    offset,
+    routes.length,
+    search,
+    status,
+    vehicleId,
+  ]);
+
   useEffect(() => {
     void load();
   }, [load]);
@@ -436,8 +485,10 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
     totalRoutes,
     hasMore,
     isLoading,
+    isLoadingMore,
     error,
     refetch,
+    loadMore,
     createRoute,
     updateRoute,
     deleteRoute,

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -48,6 +48,7 @@ import { CustomerPicker } from '../components/CustomerPicker';
 import { EntityCombobox } from '../components/EntityCombobox';
 import { OrderItemRow } from '../components/OrderItemRow';
 import type { Customer } from '../types';
+import { validateOrderItems, type OrderItemFieldErrors } from '../utils/orderValidation';
 
 /**
  * `<input type="datetime-local">` needs a `YYYY-MM-DDTHH:mm` string in LOCAL
@@ -77,8 +78,12 @@ export default function CreateOrderPage() {
     customers,
     createCustomer,
     isLoading: customersLoading,
+    isLoadingMore: customersLoadingMore,
     error: customersError,
     refetch: refetchCustomers,
+    loadMore: loadMoreCustomers,
+    hasMore: customersHaveMore,
+    totalCustomers,
   } = useCustomers({
     limit: 20,
     filters: { search: customerSearch || undefined },
@@ -91,13 +96,22 @@ export default function CreateOrderPage() {
     error: routesError,
     hasMore: routesHaveMore,
     totalRoutes,
+    loadMore: loadMoreRoutes,
+    isLoadingMore: routesLoadingMore,
   } = useRoutes({
     status: 'planned',
     search: routeSearch || undefined,
     limit: 20,
   });
   const [productSearch, setProductSearch] = useState('');
-  const { products, isLoading: productsLoading } = useProducts({
+  const {
+    products,
+    isLoading: productsLoading,
+    isLoadingMore: productsLoadingMore,
+    hasMore: productsHaveMore,
+    totalProducts,
+    loadMore: loadMoreProducts,
+  } = useProducts({
     search: productSearch || undefined,
     limit: 20,
   });
@@ -124,6 +138,7 @@ export default function CreateOrderPage() {
       country: order?.deliveryAddress.country || 'USA',
     },
     items: order?.items || [],
+    trackingNumber: order?.trackingNumber || '',
     scheduledDelivery: toDateTimeLocalValue(order?.scheduledDelivery),
     specialInstructions: order?.specialInstructions || '',
   });
@@ -137,6 +152,7 @@ export default function CreateOrderPage() {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
+  const [itemErrors, setItemErrors] = useState<Record<string, OrderItemFieldErrors>>({});
 
   useEffect(() => {
     if (!linkedCustomer) {
@@ -176,6 +192,7 @@ export default function CreateOrderPage() {
         country: order.deliveryAddress.country || 'USA',
       },
       items: order.items || [],
+      trackingNumber: order.trackingNumber || '',
       scheduledDelivery: toDateTimeLocalValue(order.scheduledDelivery),
       specialInstructions: order.specialInstructions || '',
     });
@@ -210,6 +227,11 @@ export default function CreateOrderPage() {
     if (formData.items.length === 0) {
       return 'Add at least one item to the order.';
     }
+    const nextItemErrors = validateOrderItems(formData.items);
+    setItemErrors(nextItemErrors);
+    if (Object.keys(nextItemErrors).length > 0) {
+      return 'Fix the highlighted shipment item fields before continuing.';
+    }
     if (formData.scheduledDelivery && Number.isNaN(Date.parse(formData.scheduledDelivery))) {
       return 'Enter a valid scheduled delivery date and time.';
     }
@@ -251,6 +273,7 @@ export default function CreateOrderPage() {
         deliveryAddress: formData.deliveryAddress,
         items: formData.items,
         // `null` clears an existing slot on edit; the service field is nullable.
+        trackingNumber: formData.trackingNumber.trim() || undefined,
         scheduledDelivery: formData.scheduledDelivery ? new Date(formData.scheduledDelivery) : null,
         routeId: formData.routeId || undefined,
         specialInstructions: formData.specialInstructions,
@@ -346,6 +369,14 @@ export default function CreateOrderPage() {
   };
 
   const removeItem = (index: number) => {
+    const itemId = formData.items[index]?.id;
+    if (itemId) {
+      setItemErrors((previous) => {
+        const next = { ...previous };
+        delete next[itemId];
+        return next;
+      });
+    }
     setFormData((prev) => ({
       ...prev,
       items: prev.items.filter((_, i) => i !== index),
@@ -353,6 +384,14 @@ export default function CreateOrderPage() {
   };
 
   const updateItem = (index: number, field: string, value: unknown) => {
+    const itemId = formData.items[index]?.id;
+    if (itemId && itemErrors[itemId]) {
+      setItemErrors((previous) => {
+        const next = { ...previous };
+        delete next[itemId];
+        return next;
+      });
+    }
     setFormData((prev) => ({
       ...prev,
       items: prev.items.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
@@ -489,6 +528,10 @@ export default function CreateOrderPage() {
                 onOpenCustomers={goToCustomerCreate}
                 selectedCustomer={selectedCustomer}
                 onSearchQueryChange={setCustomerSearch}
+                hasMore={customersHaveMore}
+                totalCount={totalCustomers}
+                onLoadMore={loadMoreCustomers}
+                isLoadingMore={customersLoadingMore}
               />
               <div className="space-y-2">
                 <Label htmlFor="priority">Priority</Label>
@@ -555,6 +598,8 @@ export default function CreateOrderPage() {
                 onSearchChange={setRouteSearch}
                 hasMore={routesHaveMore}
                 totalCount={totalRoutes}
+                onLoadMore={loadMoreRoutes}
+                loadingMore={routesLoadingMore}
               />
               <p className="mt-2 text-xs text-text-secondary" role="status">
                 {routesLoading
@@ -782,6 +827,11 @@ export default function CreateOrderPage() {
                         index={index}
                         products={products}
                         productsLoading={productsLoading}
+                        productsLoadingMore={productsLoadingMore}
+                        productsHasMore={productsHaveMore}
+                        productsTotalCount={totalProducts}
+                        onLoadMoreProducts={loadMoreProducts}
+                        errors={itemErrors[item.id]}
                         onUpdate={updateItem}
                         onRemove={removeItem}
                       />
@@ -803,6 +853,20 @@ export default function CreateOrderPage() {
           description="Optional delivery timing and instructions for the carrier."
         >
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div className="space-y-2">
+              <Label htmlFor="trackingNumber">Tracking / reference number</Label>
+              <Input
+                id="trackingNumber"
+                value={formData.trackingNumber}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  updateField('trackingNumber', e.target.value)
+                }
+                placeholder="Optional carrier reference"
+              />
+              <p className="text-xs text-text-secondary">
+                Use this when a carrier or customer already supplied a tracking reference.
+              </p>
+            </div>
             <div className="space-y-2">
               <Label htmlFor="scheduledDelivery">Scheduled delivery</Label>
               <Input
@@ -817,7 +881,7 @@ export default function CreateOrderPage() {
                 Leave blank to dispatch as soon as a driver is available.
               </p>
             </div>
-            <div className="space-y-2 lg:col-span-2">
+            <div className="space-y-2 lg:col-span-1">
               <Label htmlFor="specialInstructions">Special instructions</Label>
               <Textarea
                 id="specialInstructions"

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -132,7 +132,14 @@ function NewDriverForm({ editId }: { editId?: string }) {
 
   const [vehicleSearch, setVehicleSearch] = useState('');
   const debouncedVehicleSearch = useDebouncedValue(vehicleSearch);
-  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
+  const {
+    vehicles,
+    isLoading: vehiclesLoading,
+    isLoadingMore: vehiclesLoadingMore,
+    hasMore: vehiclesHaveMore,
+    totalVehicles,
+    loadMore: loadMoreVehicles,
+  } = useVehicles({
     limit: 20,
     search: debouncedVehicleSearch || undefined,
   });
@@ -434,6 +441,10 @@ function NewDriverForm({ editId }: { editId?: string }) {
                   )}
                   selectedOption={selectedVehicle}
                   selectedLoading={selectedVehicleLoading}
+                  hasMore={vehiclesHaveMore}
+                  totalCount={totalVehicles}
+                  onLoadMore={loadMoreVehicles}
+                  loadingMore={vehiclesLoadingMore}
                   placeholder="Unassigned"
                   emptyText="No vehicles match that search."
                 />

package/src/movethewheels/pages/DriversPage.tsx

@@ -299,7 +299,13 @@ export default function DriversPage() {
                 ))}
               </SelectContent>
             </Select>
-            <Select value={licenseClassFilter} onValueChange={setLicenseClassFilter}>
+            <Select
+              value={licenseClassFilter}
+              onValueChange={(value) => {
+                setLicenseClassFilter(value);
+                setPage(0);
+              }}
+            >
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="License class" />
               </SelectTrigger>

package/src/movethewheels/pages/MultiModalShipmentPage.tsx

@@ -81,6 +81,8 @@ function formatMoney(
 export default function MultiModalShipmentPage() {
   const [pageIndex, setPageIndex] = useState(0);
   const pageSize = 10;
+  const [shipmentNumber, setShipmentNumber] = useState('');
+  const [shipmentSearch, setShipmentSearch] = useState('');
   const {
     shipments,
     totalShipments,
@@ -92,9 +94,9 @@ export default function MultiModalShipmentPage() {
   } = useMultiModalShipments({
     limit: pageSize,
     offset: pageIndex * pageSize,
+    search: shipmentSearch,
   });
 
-  const [shipmentNumber, setShipmentNumber] = useState('');
   const [originAddress, setOriginAddress] = useState('');
   const [destinationAddress, setDestinationAddress] = useState('');
   const [legs, setLegs] = useState<ShipmentLegDraft[]>([emptyLeg()]);
@@ -529,6 +531,18 @@ export default function MultiModalShipmentPage() {
       </PageSection>
 
       <PageSection title="Planned Multi-Modal Shipments">
+        <div className="mb-4 max-w-xl space-y-2">
+          <Label htmlFor="planned-shipment-search">Search planned shipments</Label>
+          <Input
+            id="planned-shipment-search"
+            value={shipmentSearch}
+            onChange={(event) => {
+              setShipmentSearch(event.target.value);
+              setPageIndex(0);
+            }}
+            placeholder="Search by shipment or tracking number"
+          />
+        </div>
         {isLoading ? (
           <LoadingState message="Loading multi-modal shipments..." />
         ) : error ? (

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -4,7 +4,7 @@
  * Displays detailed information about a specific order.
  */
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useParams } from 'react-router';
 import {
   Package,
@@ -105,15 +105,27 @@ export default function OrderDetailsPage() {
   const [advancing, setAdvancing] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
   const debouncedFleetSearch = useDebouncedValue(fleetSearch);
-  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
+  const {
+    vehicles,
+    isLoading: vehiclesLoading,
+    isLoadingMore: vehiclesLoadingMore,
+    hasMore: vehiclesHaveMore,
+    totalVehicles,
+    loadMore: loadMoreVehicles,
+  } = useVehicles({
     limit: 20,
     search: debouncedFleetSearch || undefined,
-    driverId: selectedDriver || undefined,
   });
-  const { drivers, isLoading: driversLoading } = useDrivers({
+  const {
+    drivers,
+    isLoading: driversLoading,
+    isLoadingMore: driversLoadingMore,
+    hasMore: driversHaveMore,
+    totalDrivers,
+    loadMore: loadMoreDrivers,
+  } = useDrivers({
     limit: 20,
     search: debouncedFleetSearch || undefined,
-    vehicleId: selectedVehicle || undefined,
   });
   // Resolved independently of the (searched, 20-row) lists above so the
   // trigger still shows the right label once a pick scrolls out of the
@@ -132,26 +144,6 @@ export default function OrderDetailsPage() {
     (driver) => driver.status === 'available' || driver.id === order?.driverId
   );
 
-  useEffect(() => {
-    if (
-      !driversLoading &&
-      selectedDriver &&
-      !drivers.some((driver) => driver.id === selectedDriver)
-    ) {
-      setSelectedDriver('');
-    }
-  }, [drivers, driversLoading, selectedDriver]);
-
-  useEffect(() => {
-    if (
-      !vehiclesLoading &&
-      selectedVehicle &&
-      !vehicles.some((vehicle) => vehicle.id === selectedVehicle)
-    ) {
-      setSelectedVehicle('');
-    }
-  }, [selectedVehicle, vehicles, vehiclesLoading]);
-
   const handleAssign = async () => {
     if (!orderId || !order) {
       setActionError('This order is no longer available. Refresh and try again.');
@@ -607,6 +599,10 @@ export default function OrderDetailsPage() {
                       )}
                       selectedOption={selectedVehicleRecord}
                       selectedLoading={selectedVehicleLoading}
+                      hasMore={vehiclesHaveMore}
+                      totalCount={totalVehicles}
+                      onLoadMore={loadMoreVehicles}
+                      loadingMore={vehiclesLoadingMore}
                       required
                       placeholder={
                         order.vehicleId ? `Current: ${order.vehicleId}` : 'Select a vehicle'
@@ -634,6 +630,10 @@ export default function OrderDetailsPage() {
                       )}
                       selectedOption={selectedDriverRecord}
                       selectedLoading={selectedDriverLoading}
+                      hasMore={driversHaveMore}
+                      totalCount={totalDrivers}
+                      onLoadMore={loadMoreDrivers}
+                      loadingMore={driversLoadingMore}
                       required
                       placeholder={
                         order.driverId ? `Current: ${order.driverId}` : 'Select a driver'

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -95,20 +95,22 @@ function NewRouteForm({ editId }: { editId?: string }) {
     isLoading: vehiclesLoading,
     hasMore: vehiclesHaveMore,
     totalVehicles,
+    loadMore: loadMoreVehicles,
+    isLoadingMore: vehiclesLoadingMore,
   } = useVehicles({
     limit: 20,
     search: vehicleSearch || undefined,
-    driverId: form.driverId || undefined,
   });
   const {
     drivers,
     isLoading: driversLoading,
     hasMore: driversHaveMore,
     totalDrivers,
+    loadMore: loadMoreDrivers,
+    isLoadingMore: driversLoadingMore,
   } = useDrivers({
     limit: 20,
     search: driverSearch || undefined,
-    vehicleId: form.vehicleId || undefined,
   });
   // The selected vehicle/driver may fall outside the current search page (e.g. when
   // editing a route or after the assignee no longer matches the search term); fetch
@@ -314,7 +316,8 @@ function NewRouteForm({ editId }: { editId?: string }) {
                   searchPlaceholder="Search vehicle number or type…"
                   hasMore={vehiclesHaveMore}
                   totalCount={totalVehicles}
-                  required
+                  onLoadMore={loadMoreVehicles}
+                  loadingMore={vehiclesLoadingMore}
                   placeholder="Assign later"
                   emptyText="No available vehicles."
                 />
@@ -340,7 +343,8 @@ function NewRouteForm({ editId }: { editId?: string }) {
                   searchPlaceholder="Search driver name or employee ID…"
                   hasMore={driversHaveMore}
                   totalCount={totalDrivers}
-                  required
+                  onLoadMore={loadMoreDrivers}
+                  loadingMore={driversLoadingMore}
                   placeholder="Assign later"
                   emptyText="No available drivers."
                 />

package/src/movethewheels/pages/TrackingPage.tsx

@@ -120,7 +120,7 @@ export default function TrackingPage() {
       {/* Search Form */}
       <Card>
         <CardContent className="p-6">
-          <form onSubmit={handleSearch} className="flex gap-4">
+          <form onSubmit={handleSearch} className="flex flex-col gap-4 sm:flex-row">
             <div className="flex-1 relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-text-secondary" />
               <Input
@@ -133,7 +133,12 @@ export default function TrackingPage() {
                 className="pl-10 h-12 text-lg"
               />
             </div>
-            <Button type="submit" size="lg" disabled={!trackingInput || isLoading}>
+            <Button
+              type="submit"
+              size="lg"
+              className="w-full sm:w-auto"
+              disabled={!trackingInput || isLoading}
+            >
               {isLoading
                 ? t('movethewheels.tracking.search.searching', 'Searching...')
                 : t('movethewheels.tracking.search.track', 'Track')}

package/src/movethewheels/utils/orderValidation.ts

@@ -0,0 +1,53 @@
+import type { OrderItem } from '../types';
+
+export type OrderItemField =
+  'name' | 'sku' | 'quantity' | 'weight' | 'value' | 'length' | 'width' | 'height';
+
+export type OrderItemFieldErrors = Partial<Record<OrderItemField, string>>;
+
+const isFiniteNonNegative = (value: number): boolean => Number.isFinite(value) && value >= 0;
+
+/**
+ * Validates one delivery-job cargo line without imposing pricing or order
+ * semantics that belong to the service. A catalog product may supply the name;
+ * every line still carries its SKU because cargo-item records require one.
+ */
+export function validateOrderItem(item: OrderItem): OrderItemFieldErrors {
+  const errors: OrderItemFieldErrors = {};
+  const hasProduct = item.productId.trim().length > 0;
+  const hasName = item.name.trim().length > 0;
+
+  if (!hasProduct && !hasName) {
+    errors.name = 'Enter an item name or select a catalog product.';
+  }
+  if (item.sku.trim().length === 0) {
+    errors.sku = 'SKU is required for every shipment item.';
+  }
+  if (!Number.isFinite(item.quantity) || item.quantity <= 0) {
+    errors.quantity = 'Quantity must be a finite number greater than 0.';
+  }
+  if (!isFiniteNonNegative(item.weight)) {
+    errors.weight = 'Weight must be a finite number of 0 or more.';
+  }
+  if (!isFiniteNonNegative(item.value)) {
+    errors.value = 'Value must be a finite number of 0 or more.';
+  }
+
+  const dimensions = item.dimensions;
+  for (const field of ['length', 'width', 'height'] as const) {
+    if (!dimensions || !isFiniteNonNegative(dimensions[field])) {
+      errors[field] =
+        `${field[0].toUpperCase()}${field.slice(1)} must be a finite number of 0 or more.`;
+    }
+  }
+
+  return errors;
+}
+
+export function validateOrderItems(items: OrderItem[]): Record<string, OrderItemFieldErrors> {
+  return Object.fromEntries(
+    items
+      .map((item) => [item.id, validateOrderItem(item)] as const)
+      .filter(([, errors]) => Object.keys(errors).length > 0)
+  );
+}