@burdenoff/microfe-movethewheels 2026.920.3 → 2026.921.1

package/src/movethewheels/components/CarbonFootprintPanel.tsx

@@ -95,7 +95,6 @@ export function CarbonFootprintPanel() {
             <div className="space-y-2">
               {summary.byVehicle
                 .filter((v) => v.totalDistanceKm > 0 || v.co2eKg > 0)
-                .slice(0, 5)
                 .map((vehicle) => (
                   <div
                     key={vehicle.vehicleId ?? 'unassigned'}

package/src/movethewheels/components/CustomerPicker.tsx

@@ -30,6 +30,8 @@ interface CustomerPickerProps {
   onRetry: () => void;
   onOpenCustomers?: () => void;
   selectedCustomer?: Customer | null;
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
   disabled?: boolean;
 }
 
@@ -67,6 +69,8 @@ export function CustomerPicker({
   onRetry,
   onOpenCustomers,
   selectedCustomer,
+  searchQuery = '',
+  onSearchQueryChange,
   disabled = false,
 }: CustomerPickerProps) {
   const [isCreateOpen, setIsCreateOpen] = useState(false);
@@ -135,6 +139,16 @@ export function CustomerPicker({
         </Button>
       </div>
       <div className="flex flex-col gap-2 sm:flex-row sm:items-start">
+        {onSearchQueryChange && (
+          <Input
+            value={searchQuery}
+            onChange={(event) => onSearchQueryChange(event.target.value)}
+            placeholder="Search customers"
+            aria-label="Search customers"
+            disabled={disabled}
+            className="sm:max-w-56"
+          />
+        )}
         <Select
           value={value}
           onValueChange={onValueChange}

package/src/movethewheels/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, type ReactNode } from 'react';
+import { useState, useMemo, type ReactNode, type ChangeEvent } from 'react';
 import {
   Table,
   TableBody,
@@ -56,6 +56,10 @@ interface DataTableProps<T> {
   searchable?: boolean;
   searchPlaceholder?: string;
   searchFields?: (keyof T)[];
+  /** Controlled search query for server-side filtering. */
+  searchQuery?: string;
+  /** Called when the search input changes; disables current-page filtering. */
+  onSearchQueryChange?: (query: string) => void;
   pagination?: boolean;
   pageSize?: number;
   pageSizeOptions?: number[];
@@ -106,6 +110,8 @@ export function DataTable<T extends object>({
   searchable = false,
   searchPlaceholder = 'Search...',
   searchFields,
+  searchQuery: controlledSearchQuery,
+  onSearchQueryChange,
   pagination = true,
   pageSize: pageSizeProp = 10,
   pageSizeOptions = [10, 25, 50, 100],
@@ -128,6 +134,8 @@ export function DataTable<T extends object>({
   const controlledPageIndex = pageIndex ?? 0;
 
   const [searchQuery, setSearchQuery] = useState('');
+  const isServerSearch = typeof onSearchQueryChange === 'function';
+  const activeSearchQuery = isServerSearch ? (controlledSearchQuery ?? '') : searchQuery;
   const [sortColumn, setSortColumn] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<SortDirection>(null);
   const [currentPage, setCurrentPage] = useState(1);
@@ -135,25 +143,26 @@ export function DataTable<T extends object>({
 
   const activePageSize = isControlled ? pageSizeProp : internalPageSize;
 
-  // Filter data based on search (client-side; in controlled mode this scopes to
-  // the current page only, which is expected for server-paginated lists).
+  // In server-search mode, `data` is already filtered by the backend. Never
+  // filter just the current page again, or matching rows on other pages vanish.
   const filteredData = useMemo(() => {
-    if (!searchQuery || !searchFields || searchFields.length === 0) {
+    if (isServerSearch || !activeSearchQuery || !searchFields || searchFields.length === 0) {
       return data;
     }
 
-    const query = searchQuery.toLowerCase();
+    const query = activeSearchQuery.toLowerCase();
     return data.filter((row) =>
       searchFields.some((field) => {
         const value = row[field] as unknown;
         return value != null && String(value).toLowerCase().includes(query);
       })
     );
-  }, [data, searchQuery, searchFields]);
+  }, [data, activeSearchQuery, searchFields, isServerSearch]);
 
-  // Sort data
+  // Controlled pages use the backend's stable order. Local sorting a fetched
+  // page would produce a misleading partial-workspace sort.
   const sortedData = useMemo(() => {
-    if (!sortColumn || !sortDirection) {
+    if (isControlled || !sortColumn || !sortDirection) {
       return filteredData;
     }
 
@@ -201,6 +210,7 @@ export function DataTable<T extends object>({
 
   // Handle sort
   const handleSort = (columnId: string) => {
+    if (isControlled) return;
     if (sortColumn === columnId) {
       if (sortDirection === 'asc') {
         setSortDirection('desc');
@@ -320,11 +330,11 @@ export function DataTable<T extends object>({
 
   const renderEmpty = () =>
     emptyIllustration ? (
-      searchQuery ? (
+      activeSearchQuery ? (
         <IllustratedEmptyState
           illustration="empty-search"
           title="No matches"
-          description={`Nothing matches “${searchQuery}”. Try a different search.`}
+          description={`Nothing matches “${activeSearchQuery}”. Try a different search.`}
         />
       ) : (
         <IllustratedEmptyState
@@ -352,10 +362,14 @@ export function DataTable<T extends object>({
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary" />
             <Input
               placeholder={searchPlaceholder}
-              value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value);
-                setCurrentPage(1);
+              value={activeSearchQuery}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                if (isServerSearch) {
+                  onSearchQueryChange?.(e.target.value);
+                } else {
+                  setSearchQuery(e.target.value);
+                  setCurrentPage(1);
+                }
               }}
               className="pl-9"
             />
@@ -372,14 +386,16 @@ export function DataTable<T extends object>({
                 <TableHead
                   key={column.id}
                   className={cn(
-                    column.sortable && 'cursor-pointer select-none hover:bg-bg-sunken/50',
+                    !isControlled &&
+                      column.sortable &&
+                      'cursor-pointer select-none hover:bg-bg-sunken/50',
                     column.headerClassName
                   )}
-                  onClick={() => column.sortable && handleSort(column.id)}
+                  onClick={() => !isControlled && column.sortable && handleSort(column.id)}
                 >
                   <div className="flex items-center gap-2">
                     {column.header}
-                    {column.sortable && getSortIcon(column.id)}
+                    {!isControlled && column.sortable && getSortIcon(column.id)}
                   </div>
                 </TableHead>
               ))}
@@ -481,7 +497,7 @@ export function DataTable<T extends object>({
             )}
             <Select
               value={String(activePageSize)}
-              onValueChange={(value) => {
+              onValueChange={(value: string) => {
                 const next = Number(value);
                 if (isControlled) {
                   onPageSizeChange?.(next);

package/src/movethewheels/components/DocumentsCard.tsx

@@ -33,7 +33,7 @@ function formatFileSize(bytes: number): string {
 
 export function DocumentsCard({ entityType, entityId }: DocumentsCardProps) {
   const { navigate } = useMoveTheWheels();
-  const { documents, isLoading } = useEntityDocuments(entityType, entityId);
+  const { documents, hasMore, isLoading, loadMore } = useEntityDocuments(entityType, entityId);
 
   // Deep-link to the host Files module (mounted at /files in the app shell).
   // This is a host-absolute path, so it uses the raw navigate — not the
@@ -82,6 +82,11 @@ export function DocumentsCard({ entityType, entityId }: DocumentsCardProps) {
                 )}
               </div>
             ))}
+            {hasMore && (
+              <Button variant="outline" size="sm" onClick={loadMore} disabled={isLoading}>
+                Load more documents
+              </Button>
+            )}
           </div>
         ) : (
           <div className="text-center py-6">

package/src/movethewheels/components/maps/leaflet-setup.ts

@@ -13,14 +13,7 @@ export const OSM_ATTRIBUTION =
   '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 
 export type MapMarkerStatus =
-  | 'active'
-  | 'in_transit'
-  | 'idle'
-  | 'delayed'
-  | 'delivered'
-  | 'origin'
-  | 'destination'
-  | 'default';
+  'active' | 'in_transit' | 'idle' | 'delayed' | 'delivered' | 'origin' | 'destination' | 'default';
 
 /**
  * A coordinate is "real" only when it is finite and not the null-island (0,0)

package/src/movethewheels/hooks/useAnalytics.ts

@@ -67,10 +67,15 @@ const DASHBOARD_QUERY = `
     deliveryJobStats {
       total
       pending
+      confirmed
+      assigned
+      pickedUp
       inTransit
+      outForDelivery
       delivered
       cancelled
       failed
+      returned
     }
     fleetStats {
       totalVehicles
@@ -94,10 +99,15 @@ const ORDER_ANALYTICS_QUERY = `
   query GetOrderAnalytics {
     deliveryJobStats {
       pending
+      confirmed
+      assigned
+      pickedUp
       inTransit
+      outForDelivery
       delivered
       cancelled
       failed
+      returned
     }
     analytics {
       orderTrend {
@@ -307,8 +317,15 @@ export function useDashboardMetrics() {
           deliveryJobStats: {
             total: number;
             pending: number;
+            confirmed: number;
+            assigned: number;
+            pickedUp: number;
             inTransit: number;
+            outForDelivery: number;
             delivered: number;
+            cancelled: number;
+            failed: number;
+            returned: number;
           };
           fleetStats: {
             totalVehicles: number;
@@ -416,10 +433,15 @@ export function useOrderAnalytics() {
         const data = await executeGraphQL<{
           deliveryJobStats: {
             pending: number;
+            confirmed: number;
+            assigned: number;
+            pickedUp: number;
             inTransit: number;
+            outForDelivery: number;
             delivered: number;
             cancelled: number;
             failed: number;
+            returned: number;
           };
           analytics: {
             orderTrend: Array<{ label: string; value: number }>;
@@ -429,10 +451,15 @@ export function useOrderAnalytics() {
         setOrderData({
           byStatus: [
             { status: 'pending', count: data.deliveryJobStats.pending },
+            { status: 'confirmed', count: data.deliveryJobStats.confirmed },
+            { status: 'assigned', count: data.deliveryJobStats.assigned },
+            { status: 'picked_up', count: data.deliveryJobStats.pickedUp },
             { status: 'in_transit', count: data.deliveryJobStats.inTransit },
+            { status: 'out_for_delivery', count: data.deliveryJobStats.outForDelivery },
             { status: 'delivered', count: data.deliveryJobStats.delivered },
             { status: 'cancelled', count: data.deliveryJobStats.cancelled },
             { status: 'failed', count: data.deliveryJobStats.failed },
+            { status: 'returned', count: data.deliveryJobStats.returned },
           ],
           byType: [],
           byPriority: [],

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 {