@burdenoff/microfe-movethewheels 2026.920.2 → 2026.921.1

package/src/movethewheels/hooks/useCustomers.ts

@@ -12,7 +12,6 @@ interface UseCustomersOptions {
 interface UseCustomersResult {
   customers: Customer[];
   totalCustomers: number;
-  /** True when the last fetch returned a full page (rawCount === limit). */
   hasMore: boolean;
   isLoading: boolean;
   error: Error | null;
@@ -55,6 +54,7 @@ const LIST_CUSTOMERS_QUERY = `
       updatedAt
       deletedAt
     }
+    customersCount(filter: $filter)
   }
 `;
 
@@ -165,6 +165,7 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
     useMoveTheWheels();
 
   const [customers, setCustomers] = useState<Customer[]>([]);
+  const [totalCustomers, setTotalCustomers] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
@@ -187,6 +188,7 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
     try {
       const data = await executeGraphQL<{
         customers: ApiCustomer[];
+        customersCount: number;
       }>(graphQLOptions, LIST_CUSTOMERS_QUERY, {
         filter: {
           type: filters?.type,
@@ -196,11 +198,9 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
       });
 
       const raw = data.customers;
-      setHasMore(raw.length === limit);
-      let mapped = raw.map(mapCustomer);
-      if (filters?.isActive !== undefined) {
-        mapped = mapped.filter((item) => item.isActive === filters.isActive);
-      }
+      setTotalCustomers(data.customersCount);
+      setHasMore(offset + raw.length < data.customersCount);
+      const mapped = raw.map(mapCustomer);
       setCustomers(mapped);
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load customers'));
@@ -280,7 +280,7 @@ export function useCustomers(options: UseCustomersOptions = {}): UseCustomersRes
 
   return {
     customers,
-    totalCustomers: customers.length,
+    totalCustomers,
     hasMore,
     isLoading,
     error,
@@ -342,25 +342,65 @@ export function useCustomer(customerId: string | undefined) {
   return { customer, isLoading, error, refetch };
 }
 
+const CUSTOMER_STATS_QUERY = `
+  query CustomerStats {
+    customerStats {
+      total
+      b2b
+      b2c
+      active
+      inactive
+      avgRating
+    }
+  }
+`;
+
 export function useCustomerStats() {
-  const { customers, isLoading, error } = useCustomers({ limit: 500, offset: 0 });
-
-  const stats = useMemo(() => {
-    const total = customers.length;
-    const b2b = customers.filter((item) => item.type === 'b2b').length;
-    const b2c = total - b2b;
-    const active = customers.filter((item) => item.isActive).length;
-    const totalRating = customers.reduce((sum, item) => sum + item.rating, 0);
-
-    return {
-      total,
-      b2b,
-      b2c,
-      active,
-      inactive: total - active,
-      avgRating: total > 0 ? totalRating / total : 0,
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  const graphQLOptions = useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+  const [stats, setStats] = useState({
+    total: 0,
+    b2b: 0,
+    b2c: 0,
+    active: 0,
+    inactive: 0,
+    avgRating: 0,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{ customerStats: typeof stats }>(
+          graphQLOptions,
+          CUSTOMER_STATS_QUERY
+        );
+        setStats(data.customerStats);
+      } catch (fetchError) {
+        setError(
+          fetchError instanceof Error ? fetchError : new Error('Failed to load customer stats')
+        );
+      } finally {
+        setIsLoading(false);
+      }
     };
-  }, [customers]);
+
+    void load();
+  }, [graphQLOptions]);
 
   return { stats, isLoading, error };
 }

package/src/movethewheels/hooks/useDebouncedValue.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export function useDebouncedValue<T>(value: T, delay = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedValue(value), delay);
+    return () => window.clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/movethewheels/hooks/useEntityDocuments.ts

@@ -55,9 +55,11 @@ interface ApiFile {
 
 interface UseEntityDocumentsResult {
   documents: EntityDocument[];
+  hasMore: boolean;
   isLoading: boolean;
   error: Error | null;
   refetch: () => void;
+  loadMore: () => void;
 }
 
 const LIST_ENTITY_FILES_QUERY = `
@@ -71,6 +73,7 @@ const LIST_ENTITY_FILES_QUERY = `
         createdAt
         downloadUrl
       }
+      hasMore
     }
   }
 `;
@@ -93,6 +96,8 @@ export function useEntityDocuments(
   const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
     useMoveTheWheels();
   const [documents, setDocuments] = useState<EntityDocument[]>([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [offset, setOffset] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -108,43 +113,56 @@ export function useEntityDocuments(
     [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
   );
 
-  const load = useCallback(async () => {
-    if (!entityId) {
-      setDocuments([]);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      const data = await executeGraphQL<{ getFiles: { files: ApiFile[] } }>(
-        graphQLOptions,
-        LIST_ENTITY_FILES_QUERY,
-        {
+  const pageSize = 20;
+
+  const load = useCallback(
+    async (requestedOffset = 0, append = false) => {
+      if (!entityId) {
+        setDocuments([]);
+        setHasMore(false);
+        setOffset(0);
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await executeGraphQL<{
+          getFiles: { files: ApiFile[]; hasMore?: boolean | null };
+        }>(graphQLOptions, LIST_ENTITY_FILES_QUERY, {
           filter: {
             tags: [
               { key: 'mtwEntityType', label: entityType },
               { key: 'mtwEntityId', label: entityId },
             ],
           },
-          pagination: { limit: 50, offset: 0 },
-        }
-      );
-      setDocuments((data.getFiles?.files ?? []).map(mapFile));
-    } catch (fetchError) {
-      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load documents'));
-      setDocuments([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [entityId, entityType, graphQLOptions]);
+          pagination: { limit: pageSize, offset: requestedOffset },
+        });
+        const nextDocuments = (data.getFiles?.files ?? []).map(mapFile);
+        setDocuments((previous) => (append ? [...previous, ...nextDocuments] : nextDocuments));
+        setHasMore(data.getFiles?.hasMore ?? nextDocuments.length === pageSize);
+        setOffset(requestedOffset);
+      } catch (fetchError) {
+        setError(fetchError instanceof Error ? fetchError : new Error('Failed to load documents'));
+        if (!append) setDocuments([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [entityId, entityType, graphQLOptions]
+  );
 
   useEffect(() => {
     void load();
   }, [load]);
 
   const refetch = useCallback(() => {
-    void load();
+    void load(0, false);
   }, [load]);
 
-  return { documents, isLoading, error, refetch };
+  const loadMore = useCallback(() => {
+    if (!hasMore || isLoading) return;
+    void load(offset + pageSize, true);
+  }, [hasMore, isLoading, load, offset]);
+
+  return { documents, hasMore, isLoading, error, refetch, loadMore };
 }

package/src/movethewheels/hooks/useEpod.ts

@@ -70,6 +70,7 @@ const MY_PENDING_EPOD_JOBS_QUERY = `
         phone
       }
     }
+    myPendingEpodDeliveryJobsCount
   }
 `;
 
@@ -205,9 +206,12 @@ interface ApiPendingJob {
 }
 
 /** Type C self-list: the CALLING driver's own jobs still awaiting ePOD capture — feeds the capture flow's job picker. */
-export function useMyPendingEpodDeliveryJobs() {
+export function useMyPendingEpodDeliveryJobs(options: { limit?: number; offset?: number } = {}) {
+  const { limit = 20, offset = 0 } = options;
   const graphQLOptions = useGraphQLOptions();
   const [jobs, setJobs] = useState<PendingEpodDeliveryJob[]>([]);
+  const [totalJobs, setTotalJobs] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -215,10 +219,13 @@ export function useMyPendingEpodDeliveryJobs() {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ myPendingEpodDeliveryJobs: ApiPendingJob[] }>(
-        graphQLOptions,
-        MY_PENDING_EPOD_JOBS_QUERY,
-        { pagination: { limit: 50, offset: 0 } }
+      const data = await executeGraphQL<{
+        myPendingEpodDeliveryJobs: ApiPendingJob[];
+        myPendingEpodDeliveryJobsCount: number;
+      }>(graphQLOptions, MY_PENDING_EPOD_JOBS_QUERY, { pagination: { limit, offset } });
+      setTotalJobs(data.myPendingEpodDeliveryJobsCount ?? 0);
+      setHasMore(
+        offset + data.myPendingEpodDeliveryJobs.length < data.myPendingEpodDeliveryJobsCount
       );
       setJobs(
         data.myPendingEpodDeliveryJobs.map((job) => ({
@@ -240,13 +247,13 @@ export function useMyPendingEpodDeliveryJobs() {
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions]);
+  }, [graphQLOptions, limit, offset]);
 
   useEffect(() => {
     void load();
   }, [load]);
 
-  return { jobs, isLoading, error, refetch: load };
+  return { jobs, totalJobs, hasMore, isLoading, error, refetch: load };
 }
 
 export interface CaptureEpodArgs {

package/src/movethewheels/hooks/useFleet.ts

@@ -5,6 +5,7 @@ import { executeGraphQL } from '../utils/graphqlClient';
 
 interface UseFleetOptions {
   filters?: FleetFilter;
+  limit?: number;
 }
 
 export interface CreateVehicleInput {
@@ -39,7 +40,7 @@ interface UseFleetResult {
   updateDriver: (id: string, input: CreateDriverInput) => Promise<Driver>;
 }
 
-interface ApiVehicle {
+export interface ApiVehicle {
   id: string;
   vehicleNumber: string;
   type: string;
@@ -60,7 +61,7 @@ interface ApiVehicle {
   updatedAt?: string;
 }
 
-interface ApiDriver {
+export interface ApiDriver {
   id: string;
   userId?: string | null;
   firstName: string;
@@ -100,6 +101,7 @@ const LIST_VEHICLES_QUERY = `
       createdAt
       updatedAt
     }
+    vehiclesCount(filter: $filter)
   }
 `;
 
@@ -122,6 +124,7 @@ const LIST_DRIVERS_QUERY = `
       vehicleId
       createdAt
     }
+    driversCount(filter: $filter)
   }
 `;
 
@@ -408,7 +411,7 @@ function toApiDriverStatus(status: DriverStatus): string {
   }
 }
 
-function mapVehicle(vehicle: ApiVehicle): Vehicle {
+export function mapVehicle(vehicle: ApiVehicle): Vehicle {
   return {
     id: vehicle.id,
     vehicleNumber: vehicle.vehicleNumber,
@@ -443,7 +446,7 @@ function mapVehicle(vehicle: ApiVehicle): Vehicle {
   };
 }
 
-function mapDriver(driver: ApiDriver): Driver {
+export function mapDriver(driver: ApiDriver): Driver {
   return {
     id: driver.id,
     userId: driver.userId ?? driver.id,
@@ -524,13 +527,13 @@ function useGraphqlOptions() {
 }
 
 export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
-  const { filters: rawFilters } = options;
+  const { filters: rawFilters, limit = 20 } = options;
   // Stabilize the filters reference by its primitive fields so React Compiler's
   // inferred `filters` dependency stays stable and `load` is not recreated (and
   // refetched) every render when the caller passes an inline filters object.
   const filters = useMemo(
     () => rawFilters,
-    [rawFilters?.driverId, rawFilters?.status, rawFilters?.vehicleType]
+    [rawFilters?.driverId, rawFilters?.search, rawFilters?.status, rawFilters?.vehicleType]
   );
   const graphQLOptions = useGraphqlOptions();
   const [vehicles, setVehicles] = useState<Vehicle[]>([]);
@@ -545,16 +548,18 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
       const [vehicleData, driverData] = await Promise.all([
         executeGraphQL<{ vehicles: ApiVehicle[] }>(graphQLOptions, LIST_VEHICLES_QUERY, {
           filter: {
+            search: filters?.search,
             type: filters?.vehicleType?.toUpperCase(),
             status: filters?.status ? toApiVehicleStatus(filters.status) : undefined,
           },
-          pagination: { limit: 200, offset: 0 },
+          pagination: { limit, offset: 0 },
         }),
         executeGraphQL<{ drivers: ApiDriver[] }>(graphQLOptions, LIST_DRIVERS_QUERY, {
           filter: {
+            search: filters?.search,
             vehicleId: filters?.driverId,
           },
-          pagination: { limit: 200, offset: 0 },
+          pagination: { limit, offset: 0 },
         }),
       ]);
 
@@ -565,7 +570,7 @@ export function useFleet(options: UseFleetOptions = {}): UseFleetResult {
     } finally {
       setIsLoading(false);
     }
-  }, [filters, graphQLOptions]);
+  }, [filters, graphQLOptions, limit]);
 
   useEffect(() => {
     void load();
@@ -686,6 +691,12 @@ interface UseListOptions {
   offset?: number;
 }
 
+interface UseVehiclesOptions extends UseListOptions {
+  search?: string;
+  status?: VehicleStatus;
+  vehicleType?: Vehicle['type'];
+}
+
 interface UseVehiclesResult {
   vehicles: Vehicle[];
   totalVehicles: number;
@@ -698,10 +709,11 @@ interface UseVehiclesResult {
   assignDriver: (vehicleId: string, driverId: string) => Promise<Vehicle>;
 }
 
-export function useVehicles(options: UseListOptions = {}): UseVehiclesResult {
-  const { limit = 200, offset = 0 } = options;
+export function useVehicles(options: UseVehiclesOptions = {}): UseVehiclesResult {
+  const { limit = 20, offset = 0, search, status, vehicleType } = options;
   const graphQLOptions = useGraphqlOptions();
   const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [totalVehicles, setTotalVehicles] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
@@ -710,21 +722,26 @@ export function useVehicles(options: UseListOptions = {}): UseVehiclesResult {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ vehicles: ApiVehicle[] }>(
-        graphQLOptions,
-        LIST_VEHICLES_QUERY,
-        {
-          pagination: { limit, offset },
-        }
-      );
-      setHasMore(data.vehicles.length === limit);
+      const data = await executeGraphQL<{
+        vehicles: ApiVehicle[];
+        vehiclesCount: number;
+      }>(graphQLOptions, LIST_VEHICLES_QUERY, {
+        filter: {
+          search: search || undefined,
+          status: status ? toApiVehicleStatus(status) : undefined,
+          type: vehicleType?.toUpperCase(),
+        },
+        pagination: { limit, offset },
+      });
+      setHasMore(offset + data.vehicles.length < data.vehiclesCount);
+      setTotalVehicles(data.vehiclesCount);
       setVehicles(data.vehicles.map(mapVehicle));
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load vehicles'));
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset]);
+  }, [graphQLOptions, limit, offset, search, status, vehicleType]);
 
   useEffect(() => {
     void load();
@@ -774,7 +791,7 @@ export function useVehicles(options: UseListOptions = {}): UseVehiclesResult {
 
   return {
     vehicles,
-    totalVehicles: vehicles.length,
+    totalVehicles,
     hasMore,
     isLoading,
     error,
@@ -838,17 +855,17 @@ interface UseDriversResult {
 }
 
 interface UseDriversOptions extends UseListOptions {
-  /**
-   * Narrows the roster server-side via `DriverFilterInput.status` so the pager
-   * still counts whole result sets rather than filtering one fetched page.
-   */
+  /** Narrows the roster server-side via DriverFilterInput.status. */
   status?: DriverStatus;
+  search?: string;
+  licenseClass?: string;
 }
 
 export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
-  const { limit = 200, offset = 0, status } = options;
+  const { limit = 20, offset = 0, status, search, licenseClass } = options;
   const graphQLOptions = useGraphqlOptions();
   const [drivers, setDrivers] = useState<Driver[]>([]);
+  const [totalDrivers, setTotalDrivers] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
@@ -857,22 +874,26 @@ export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ drivers: ApiDriver[] }>(
-        graphQLOptions,
-        LIST_DRIVERS_QUERY,
-        {
-          filter: status ? { status: toApiDriverStatus(status) } : undefined,
-          pagination: { limit, offset },
-        }
-      );
-      setHasMore(data.drivers.length === limit);
+      const data = await executeGraphQL<{
+        drivers: ApiDriver[];
+        driversCount: number;
+      }>(graphQLOptions, LIST_DRIVERS_QUERY, {
+        filter: {
+          status: status ? toApiDriverStatus(status) : undefined,
+          search: search || undefined,
+          licenseClass: licenseClass || undefined,
+        },
+        pagination: { limit, offset },
+      });
+      setHasMore(offset + data.drivers.length < data.driversCount);
+      setTotalDrivers(data.driversCount);
       setDrivers(data.drivers.map(mapDriver));
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load drivers'));
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions, limit, offset, status]);
+  }, [graphQLOptions, limit, offset, status, search, licenseClass]);
 
   useEffect(() => {
     void load();
@@ -918,7 +939,7 @@ export function useDrivers(options: UseDriversOptions = {}): UseDriversResult {
 
   return {
     drivers,
-    totalDrivers: drivers.length,
+    totalDrivers,
     hasMore,
     isLoading,
     error,

package/src/movethewheels/hooks/useFleetIntelligence.ts

@@ -11,10 +11,7 @@ import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { executeGraphQL } from '../utils/graphqlClient';
 
 export type FleetAlertType =
-  | 'LICENSE_EXPIRED'
-  | 'LICENSE_EXPIRING'
-  | 'MAINTENANCE_OVERDUE'
-  | 'MAINTENANCE_DUE_SOON';
+  'LICENSE_EXPIRED' | 'LICENSE_EXPIRING' | 'MAINTENANCE_OVERDUE' | 'MAINTENANCE_DUE_SOON';
 export type FleetAlertSeverity = 'CRITICAL' | 'WARNING';
 export type FleetAlertSubjectType = 'VEHICLE' | 'DRIVER';