@burdenoff/microfe-movethewheels 2026.920.2 → 2026.921.1

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin, CalendarClock } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { FormError } from '../components/FormError';
@@ -27,9 +27,12 @@ import {
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useOrder, useOrders } from '../hooks/useOrders';
-import { useCustomers } from '../hooks/useCustomers';
+import { useCustomer, useCustomers } from '../hooks/useCustomers';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { joinPath } from '../utils/navigation';
+import { joinPath, buildCustomerCreatePath } from '../utils/navigation';
+import { CustomerPicker } from '../components/CustomerPicker';
+import type { Customer } from '../types';
 
 /**
  * `<input type="datetime-local">` needs a `YYYY-MM-DDTHH:mm` string in LOCAL
@@ -49,15 +52,30 @@ function toDateTimeLocalValue(date: Date | undefined): string {
 
 export default function CreateOrderPage() {
   const { orderId } = useParams<{ orderId: string }>();
+  const [searchParams] = useSearchParams();
+  const prefilledCustomerId = searchParams.get('customerId')?.trim() || undefined;
   const { basePath, navigate } = useMoveTheWheels();
   const { order } = useOrder(orderId);
   const { createOrder, updateOrder } = useOrders();
-  const { customers } = useCustomers({ limit: 100 });
+  const [customerSearch, setCustomerSearch] = useState('');
+  const debouncedCustomerSearch = useDebouncedValue(customerSearch);
+  const {
+    customers,
+    createCustomer,
+    isLoading: customersLoading,
+    error: customersError,
+    refetch: refetchCustomers,
+  } = useCustomers({
+    limit: 20,
+    filters: { search: debouncedCustomerSearch || undefined },
+  });
+  const { customer: linkedCustomer } = useCustomer(prefilledCustomerId ?? order?.customerId);
 
   const isEditing = !!orderId && !!order;
 
+  const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
   const [formData, setFormData] = useState({
-    customerId: order?.customerId || '',
+    customerId: prefilledCustomerId || order?.customerId || '',
     priority: order?.priority || 'normal',
     pickupAddress: {
       street: order?.pickupAddress.street || '',
@@ -81,6 +99,18 @@ export default function CreateOrderPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (!linkedCustomer) {
+      return;
+    }
+    setSelectedCustomer((previous) =>
+      previous?.id === linkedCustomer.id ? previous : linkedCustomer
+    );
+    setFormData((previous) =>
+      previous.customerId ? previous : { ...previous, customerId: linkedCustomer.id }
+    );
+  }, [linkedCustomer]);
+
   // Prefill the form from the loaded order when editing. `order` arrives
   // asynchronously after the initial render, so the useState initializers alone
   // leave the fields blank until this syncs them.
@@ -112,15 +142,24 @@ export default function CreateOrderPage() {
   }, [order]);
 
   const goBack = () => {
-    if (navigate) {
-      navigate(joinPath(basePath, 'orders'));
+    if (!navigate) {
+      return;
     }
+    if (!isEditing && prefilledCustomerId) {
+      navigate(joinPath(basePath, `customers/${prefilledCustomerId}`));
+      return;
+    }
+    navigate(joinPath(basePath, 'orders'));
   };
 
+  const getSelectedCustomer = () =>
+    selectedCustomer ?? customers.find((customer) => customer.id === formData.customerId);
+
   const validate = (): string | null => {
-    const selectedCustomer = customers.find((c) => c.id === formData.customerId);
-    if (!formData.customerId || !selectedCustomer) {
-      return 'Select a customer for this order.';
+    if (!formData.customerId || !getSelectedCustomer()) {
+      return customersError
+        ? 'Customers could not be loaded. Retry or create a customer before continuing.'
+        : 'Select a customer for this order.';
     }
     if (!formData.pickupAddress.street.trim()) {
       return 'Enter a pickup street address.';
@@ -147,9 +186,13 @@ export default function CreateOrderPage() {
       return;
     }
 
-    const selectedCustomer = customers.find((c) => c.id === formData.customerId);
+    const selectedCustomer = getSelectedCustomer();
     if (!selectedCustomer) {
-      setFormError('Select a customer for this order.');
+      setFormError(
+        customersError
+          ? 'Customers could not be loaded. Retry or create a customer before continuing.'
+          : 'Select a customer for this order.'
+      );
       return;
     }
 
@@ -242,6 +285,14 @@ export default function CreateOrderPage() {
     }));
   };
 
+  const goToCustomerCreate = () => {
+    if (!navigate) {
+      return;
+    }
+    const orderPath = isEditing && orderId ? `orders/${orderId}/edit` : 'orders/new';
+    navigate(joinPath(basePath, buildCustomerCreatePath(orderPath)));
+  };
+
   return (
     <PageLayout
       title={isEditing ? 'Edit Order' : 'Create Order'}
@@ -253,7 +304,7 @@ export default function CreateOrderPage() {
             <ArrowLeft size={16} />
             Cancel
           </Button>
-          <Button onClick={handleSubmit} disabled={isSubmitting}>
+          <Button onClick={handleSubmit} disabled={isSubmitting || customersLoading}>
             <Save size={16} />
             {isSubmitting ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Order'}
           </Button>
@@ -304,24 +355,34 @@ export default function CreateOrderPage() {
           <h2 className="text-base font-semibold text-text-primary mb-4">Order Details</h2>
           <div className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="customer">Customer</Label>
-                <Select
-                  value={formData.customerId}
-                  onValueChange={(value) => updateField('customerId', value)}
-                >
-                  <SelectTrigger id="customer">
-                    <SelectValue placeholder="Select customer" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {customers.map((customer) => (
-                      <SelectItem key={customer.id} value={customer.id}>
-                        {customer.name} ({customer.email})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+              <CustomerPicker
+                customers={customers}
+                value={formData.customerId}
+                onValueChange={(value) => {
+                  if (!value) {
+                    return;
+                  }
+                  updateField('customerId', value);
+                  setSelectedCustomer(
+                    customers.find((customer) => customer.id === value) ??
+                      (selectedCustomer?.id === value ? selectedCustomer : null)
+                  );
+                  setFormError(null);
+                }}
+                onCreated={(customer) => {
+                  setSelectedCustomer(customer);
+                  updateField('customerId', customer.id);
+                  setFormError(null);
+                }}
+                createCustomer={createCustomer}
+                isLoading={customersLoading}
+                error={customersError}
+                onRetry={refetchCustomers}
+                onOpenCustomers={goToCustomerCreate}
+                selectedCustomer={selectedCustomer}
+                searchQuery={customerSearch}
+                onSearchQueryChange={setCustomerSearch}
+              />
               <div className="space-y-2">
                 <Label htmlFor="priority">Priority</Label>
                 <Select

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import {
   Users,
   ArrowLeft,
@@ -40,7 +40,7 @@ import { useCustomer, useCustomers } from '../hooks/useCustomers';
 import { useOrders } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress, formatCurrency, formatDate } from '../utils/formatters';
-import { joinPath } from '../utils/navigation';
+import { joinPath, buildOrderCustomerPath, getSafeCustomerReturnPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
 
@@ -62,6 +62,8 @@ function safeHttpUrl(raw: string | undefined): string | null {
 
 function NewCustomerForm() {
   const { basePath, navigate } = useMoveTheWheels();
+  const [searchParams] = useSearchParams();
+  const returnTo = getSafeCustomerReturnPath(searchParams.get('returnTo'));
   const { createCustomer } = useCustomers();
   const [form, setForm] = useState({
     name: '',
@@ -91,7 +93,10 @@ function NewCustomerForm() {
         phone: form.phone.trim() || undefined,
         company: form.company.trim() || undefined,
       });
-      navigate?.(joinPath(basePath, `customers/${created.id}`));
+      const destination = returnTo
+        ? buildOrderCustomerPath(returnTo, created.id)
+        : `customers/${created.id}`;
+      navigate?.(joinPath(basePath, destination));
     } catch (err) {
       console.error('Failed to create customer:', err);
       setError(err instanceof Error ? err.message : 'Failed to create customer. Please try again.');
@@ -330,7 +335,7 @@ export default function CustomerDetailsPage() {
             label: 'Book a delivery for this customer',
             description: 'Start a new order pre-filled for this account.',
             icon: <FileText size={16} />,
-            onClick: () => goTo('orders/new'),
+            onClick: () => goTo(buildOrderCustomerPath('orders/new', customer.id)),
           },
           {
             id: 'edit',
@@ -475,7 +480,11 @@ export default function CustomerDetailsPage() {
               <CardTitle className="flex items-center gap-2">
                 <Package size={18} /> Orders
               </CardTitle>
-              <Button variant="outline" size="sm" onClick={() => goTo('orders/new')}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => goTo(buildOrderCustomerPath('orders/new', customer.id))}
+              >
                 <FileText size={14} /> New order
               </Button>
             </CardHeader>
@@ -508,7 +517,7 @@ export default function CustomerDetailsPage() {
                   <p className="text-text-secondary">No orders yet for this customer</p>
                   <button
                     type="button"
-                    onClick={() => goTo('orders/new')}
+                    onClick={() => goTo(buildOrderCustomerPath('orders/new', customer.id))}
                     className="mt-1 text-sm text-primary hover:underline"
                   >
                     Book their first delivery

package/src/movethewheels/pages/CustomersPage.tsx

@@ -11,6 +11,7 @@ import { TypeBadge } from '../components/StatusBadge';
 import { Badge, Avatar, AvatarFallback, Button } from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomers, useCustomerStats } from '../hooks/useCustomers';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -20,9 +21,12 @@ export default function CustomersPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
-  const { customers, hasMore, isLoading, error, refetch } = useCustomers({
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebouncedValue(search);
+  const { customers, totalCustomers, hasMore, isLoading, error, refetch } = useCustomers({
     limit: pageSize,
     offset: page * pageSize,
+    filters: { search: debouncedSearch },
   });
   // Bounded aggregate for the tiles + subtitle — never the truncated page.
   const { stats } = useCustomerStats();
@@ -156,6 +160,11 @@ export default function CustomersPage() {
         searchable
         searchPlaceholder="Search customers..."
         searchFields={['name', 'email', 'company'] as (keyof Customer)[]}
+        searchQuery={search}
+        onSearchQueryChange={(query) => {
+          setSearch(query);
+          setPage(0);
+        }}
         onRowClick={(row) => goTo(`customers/${row.id}`)}
         getRowId={(row) => row.id}
         pageIndex={page}
@@ -165,6 +174,7 @@ export default function CustomersPage() {
           setPageSize(size);
           setPage(0);
         }}
+        totalItems={totalCustomers}
         hasNextPage={hasMore}
         emptyIllustration="empty-people"
         emptyTitle="No customers yet"

package/src/movethewheels/pages/DeliveryCapturePage.tsx

@@ -25,6 +25,8 @@ import {
   Truck,
   Type as TypeIcon,
   Upload,
+  ChevronLeft,
+  ChevronRight,
 } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import {
@@ -248,13 +250,19 @@ function CaptureForm({
 }
 
 export default function DeliveryCapturePage() {
-  const { jobs, isLoading, error, refetch } = useMyPendingEpodDeliveryJobs();
+  const [pageIndex, setPageIndex] = useState(0);
+  const pageSize = 20;
+  const { jobs, hasMore, isLoading, error, refetch } = useMyPendingEpodDeliveryJobs({
+    limit: pageSize,
+    offset: pageIndex * pageSize,
+  });
   const [selectedJob, setSelectedJob] = useState<PendingEpodDeliveryJob | null>(null);
   const { message, notify } = useNotice();
 
   const handleCaptured = () => {
     notify('Proof of delivery captured — delivery marked complete.');
     setSelectedJob(null);
+    setPageIndex(0);
     refetch();
   };
 
@@ -309,6 +317,28 @@ export default function DeliveryCapturePage() {
                 </CardContent>
               </Card>
             ))}
+            {(pageIndex > 0 || hasMore) && (
+              <div className="flex justify-end gap-2 pt-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={pageIndex === 0 || isLoading}
+                  onClick={() => setPageIndex((previous) => Math.max(0, previous - 1))}
+                >
+                  <ChevronLeft size={16} /> Previous
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={!hasMore || isLoading}
+                  onClick={() => setPageIndex((previous) => previous + 1)}
+                >
+                  Next <ChevronRight size={16} />
+                </Button>
+              </div>
+            )}
           </div>
         ) : (
           <div className="text-center py-12">

package/src/movethewheels/pages/DriversPage.tsx

@@ -33,6 +33,7 @@ import {
 } from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useDrivers, useDriverStatusCounts, useFleetStats, useVehicles } from '../hooks/useFleet';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -50,12 +51,23 @@ export default function DriversPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebouncedValue(search);
   const [statusFilter, setStatusFilter] = useState<DriverStatus | 'all'>('all');
   const [licenseClassFilter, setLicenseClassFilter] = useState<string>('all');
-  const { drivers, isLoading, error, refetch } = useDrivers({
+  const {
+    drivers,
+    totalDrivers: filteredDriverCount,
+    hasMore,
+    isLoading,
+    error,
+    refetch,
+  } = useDrivers({
     limit: pageSize,
     offset: page * pageSize,
+    search: debouncedSearch || undefined,
     status: statusFilter === 'all' ? undefined : statusFilter,
+    licenseClass: licenseClassFilter === 'all' ? undefined : licenseClassFilter,
   });
   // Workforce totals + tiles from the live aggregate, not the current page.
   const { stats } = useFleetStats();
@@ -63,7 +75,7 @@ export default function DriversPage() {
   const { counts } = useDriverStatusCounts();
   // Drivers carry only `vehicleId`; the roster shows the fleet number, so the
   // vehicle list is joined client-side into an id -> number lookup.
-  const { vehicles } = useVehicles({ limit: 500 });
+  const { vehicles } = useVehicles({ limit: 100 });
   const vehicleNumberById = useMemo(
     () => new Map(vehicles.map((vehicle) => [vehicle.id, vehicle.vehicleNumber])),
     [vehicles]
@@ -79,14 +91,7 @@ export default function DriversPage() {
       ),
     [drivers]
   );
-  const visibleDrivers = useMemo(
-    () =>
-      licenseClassFilter === 'all'
-        ? drivers
-        : drivers.filter((driver) => driver.licenseType === licenseClassFilter),
-    [drivers, licenseClassFilter]
-  );
-  const filtersActive = statusFilter !== 'all' || licenseClassFilter !== 'all';
+  const filtersActive = statusFilter !== 'all' || licenseClassFilter !== 'all' || search.length > 0;
 
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
@@ -293,6 +298,7 @@ export default function DriversPage() {
                 onClick={() => {
                   setStatusFilter('all');
                   setLicenseClassFilter('all');
+                  setSearch('');
                   setPage(0);
                 }}
               >
@@ -305,13 +311,18 @@ export default function DriversPage() {
 
       <DataTable
         columns={columns}
-        data={visibleDrivers}
+        data={drivers}
         isLoading={isLoading}
         error={error}
         onRetry={refetch}
         searchable
         searchPlaceholder="Search drivers..."
         searchFields={['fullName', 'employeeId'] as (keyof Driver)[]}
+        searchQuery={search}
+        onSearchQueryChange={(query) => {
+          setSearch(query);
+          setPage(0);
+        }}
         onRowClick={(row) => goTo(`fleet/drivers/${row.id}`)}
         getRowId={(row) => row.id}
         pageIndex={page}
@@ -321,7 +332,8 @@ export default function DriversPage() {
           setPageSize(size);
           setPage(0);
         }}
-        totalItems={filtersActive ? undefined : totalDrivers}
+        totalItems={filteredDriverCount}
+        hasNextPage={hasMore}
         emptyIllustration="empty-people"
         emptyTitle={filtersActive ? 'No drivers match these filters' : 'No drivers yet'}
         emptyDescription={

package/src/movethewheels/pages/InventoryPage.tsx

@@ -2,7 +2,7 @@
  * Inventory Page - Overview of inventory management
  */
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Package,
   Warehouse,
@@ -38,6 +38,7 @@ import {
   type InventoryTransactionType,
 } from '../hooks/useInventory';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
@@ -90,7 +91,25 @@ export default function InventoryPage() {
     return value === key ? fallback : value;
   };
   const { basePath, navigate } = useMoveTheWheels();
-  const { inventory, products, warehouses, isLoading, error, refetch } = useInventory();
+  const [search, setSearch] = useState('');
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const debouncedSearch = useDebouncedValue(search);
+  const {
+    inventory,
+    lowStockItems,
+    products,
+    warehouses,
+    totalItems,
+    hasMore,
+    isLoading,
+    error,
+    refetch,
+  } = useInventory({
+    search: debouncedSearch,
+    limit: pageSize,
+    offset: pageIndex * pageSize,
+  });
   const { stats } = useInventoryStats();
   const {
     transactions,
@@ -105,37 +124,30 @@ export default function InventoryPage() {
       action();
     }
   };
-  const lowStockItems = inventory.filter((inv) => inv.availableQuantity <= inv.reorderLevel);
-
   const unknownProductLabel = t(
     'movethewheels.inventory.lowStock.unknownProduct',
     'Unknown Product'
   );
 
   const stockRows = useMemo<StockRow[]>(() => {
-    const productById = new Map(products.map((product) => [product.id, product]));
-    const warehouseById = new Map(warehouses.map((warehouse) => [warehouse.id, warehouse]));
-    return inventory.map((item) => {
-      const product = productById.get(item.productId);
-      return {
-        id: item.id,
-        productId: item.productId,
-        productName: product?.name ?? unknownProductLabel,
-        sku: product?.sku ?? '—',
-        warehouseName: warehouseById.get(item.warehouseId)?.name ?? '—',
-        onHand: item.quantity,
-        allocated: item.reservedQuantity,
-        available: item.availableQuantity,
-        reorderLevel: item.reorderLevel,
-        stockState:
-          item.quantity === 0
-            ? 'out_of_stock'
-            : item.availableQuantity <= item.reorderLevel
-              ? 'low'
-              : 'in_stock',
-      };
-    });
-  }, [inventory, products, warehouses, unknownProductLabel]);
+    return inventory.map((item) => ({
+      id: item.id,
+      productId: item.productId,
+      productName: item.productName ?? unknownProductLabel,
+      sku: item.productSku ?? '—',
+      warehouseName: item.warehouseName ?? '—',
+      onHand: item.quantity,
+      allocated: item.reservedQuantity,
+      available: item.availableQuantity,
+      reorderLevel: item.reorderLevel,
+      stockState:
+        item.quantity === 0
+          ? 'out_of_stock'
+          : item.availableQuantity <= item.reorderLevel
+            ? 'low'
+            : 'in_stock',
+    }));
+  }, [inventory, unknownProductLabel]);
 
   const stockColumns: Column<StockRow>[] = [
     {
@@ -309,13 +321,12 @@ export default function InventoryPage() {
         <EmphasisPanel className="space-y-4">
           <h2 className="flex items-center gap-2 text-base font-semibold text-status-warning-text">
             <AlertTriangle size={18} />
-            {t('movethewheels.inventory.lowStock.title', 'Low Stock Alert')} ({lowStockItems.length}{' '}
+            {t('movethewheels.inventory.lowStock.title', 'Low Stock Alert')} ({stats.lowStockCount}{' '}
             {t('movethewheels.inventory.lowStock.items', 'items')})
           </h2>
           <div>
             <div className="space-y-3">
-              {lowStockItems.slice(0, 5).map((item) => {
-                const product = products.find((p) => p.id === item.productId);
+              {lowStockItems.map((item) => {
                 return (
                   <div
                     key={item.id}
@@ -323,11 +334,11 @@ export default function InventoryPage() {
                   >
                     <div>
                       <p className="font-medium">
-                        {product?.name ||
+                        {item.productName ??
                           t('movethewheels.inventory.lowStock.unknownProduct', 'Unknown Product')}
                       </p>
                       <p className="text-sm text-text-secondary">
-                        {t('movethewheels.inventory.lowStock.sku', 'SKU:')} {product?.sku}
+                        {t('movethewheels.inventory.lowStock.sku', 'SKU:')} {item.productSku ?? '—'}
                       </p>
                     </div>
                     <div className="text-right">
@@ -365,6 +376,20 @@ export default function InventoryPage() {
                 'Search product, SKU or warehouse...'
               )}
               searchFields={['productName', 'sku', 'warehouseName'] as (keyof StockRow)[]}
+              searchQuery={search}
+              onSearchQueryChange={(query) => {
+                setSearch(query);
+                setPageIndex(0);
+              }}
+              pageIndex={pageIndex}
+              pageSize={pageSize}
+              onPageChange={setPageIndex}
+              onPageSizeChange={(nextPageSize) => {
+                setPageSize(nextPageSize);
+                setPageIndex(0);
+              }}
+              totalItems={totalItems}
+              hasNextPage={hasMore}
               onRowClick={(row) => goTo(`inventory/products/${row.productId}`)}
               getRowId={(row) => row.id}
               emptyIllustration="empty-data"