@burdenoff/microfe-movethewheels 2026.929.4 → 2026.930.2

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();

package/src/movethewheels/hooks/useRefetchOnLeaveEdit.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Detail pages render their `/edit` form from the same route component, so the
+ * component (and its record hook) stays mounted across edit → detail. Without a
+ * refetch the detail view keeps showing the pre-edit record. Call `refetch`
+ * exactly when the edit route is left, never on the initial mount.
+ */
+export function useRefetchOnLeaveEdit(isEditRoute: boolean, refetch: () => void): void {
+  const wasEditing = useRef(isEditRoute);
+
+  useEffect(() => {
+    if (wasEditing.current && !isEditRoute) {
+      refetch();
+    }
+    wasEditing.current = isEditRoute;
+  }, [isEditRoute, refetch]);
+}

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

@@ -57,6 +57,7 @@ import {
   type UpdateDriverInput,
 } from '../hooks/useFleet';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
+import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -132,7 +133,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 +442,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."
                 />
@@ -620,6 +632,7 @@ export default function DriverDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { driver, isLoading, error, refetch } = useDriver(driverId);
+  useRefetchOnLeaveEdit(isEditRoute, refetch);
   const { vehicle: assignedVehicle } = useVehicle(driver?.assignedVehicle);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));

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 ? (