@burdenoff/microfe-movethewheels 2026.920.2 → 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

@@ -0,0 +1,321 @@
+import { useState, type ChangeEvent, type FormEvent } from 'react';
+import { Plus, RefreshCw, UserPlus } from 'lucide-react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui';
+import type { Customer } from '../types';
+import { FormError } from './FormError';
+
+interface CustomerPickerProps {
+  customers: Customer[];
+  value: string;
+  onValueChange: (value: string) => void;
+  onCreated: (customer: Customer) => void;
+  createCustomer: (customer: Partial<Customer>) => Promise<Customer>;
+  isLoading: boolean;
+  error: Error | null;
+  onRetry: () => void;
+  onOpenCustomers?: () => void;
+  selectedCustomer?: Customer | null;
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
+  disabled?: boolean;
+}
+
+interface CustomerFormState {
+  name: string;
+  type: Customer['type'];
+  email: string;
+  phone: string;
+  company: string;
+}
+
+const EMPTY_FORM: CustomerFormState = {
+  name: '',
+  type: 'b2c',
+  email: '',
+  phone: '',
+  company: '',
+};
+
+function mergeCustomers(customers: Customer[], selectedCustomer?: Customer | null): Customer[] {
+  if (!selectedCustomer || customers.some((customer) => customer.id === selectedCustomer.id)) {
+    return customers;
+  }
+  return [selectedCustomer, ...customers];
+}
+
+export function CustomerPicker({
+  customers,
+  value,
+  onValueChange,
+  onCreated,
+  createCustomer,
+  isLoading,
+  error,
+  onRetry,
+  onOpenCustomers,
+  selectedCustomer,
+  searchQuery = '',
+  onSearchQueryChange,
+  disabled = false,
+}: CustomerPickerProps) {
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [form, setForm] = useState<CustomerFormState>(EMPTY_FORM);
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const options = mergeCustomers(customers, selectedCustomer);
+
+  const openCreateDialog = () => {
+    setCreateError(null);
+    setForm(EMPTY_FORM);
+    setIsCreateOpen(true);
+  };
+
+  const closeCreateDialog = () => {
+    if (isCreating) return;
+    setIsCreateOpen(false);
+  };
+
+  const handleCreate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const name = form.name.trim();
+    if (!name) {
+      setCreateError('Customer name is required.');
+      return;
+    }
+
+    setIsCreating(true);
+    setCreateError(null);
+    try {
+      const created = await createCustomer({
+        name,
+        type: form.type,
+        email: form.email.trim() || undefined,
+        phone: form.phone.trim() || undefined,
+        company: form.company.trim() || undefined,
+      });
+      onCreated(created);
+      setIsCreateOpen(false);
+      setForm(EMPTY_FORM);
+    } catch (creationError) {
+      setCreateError(
+        creationError instanceof Error
+          ? creationError.message
+          : 'Could not create the customer. Please try again.'
+      );
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor="customer">Customer</Label>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={openCreateDialog}
+          disabled={disabled || isLoading}
+        >
+          <Plus size={14} className="mr-1" />
+          Add customer
+        </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}
+          disabled={disabled || isLoading || Boolean(error)}
+        >
+          <SelectTrigger id="customer" className="flex-1">
+            <SelectValue placeholder={isLoading ? 'Loading customers...' : 'Select customer'} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((customer) => (
+              <SelectItem key={customer.id} value={customer.id}>
+                {customer.name} {customer.email ? `(${customer.email})` : ''}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {error && (
+          <Button type="button" variant="outline" size="sm" onClick={onRetry}>
+            <RefreshCw size={14} className="mr-1" />
+            Retry
+          </Button>
+        )}
+      </div>
+      {error ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <p role="alert" className="text-sm text-status-error-text">
+            Customers could not be loaded. Retry or add a customer to continue.
+          </p>
+          {onOpenCustomers && (
+            <Button type="button" variant="outline" size="sm" onClick={onOpenCustomers}>
+              Open customer page
+            </Button>
+          )}
+        </div>
+      ) : !isLoading && options.length === 0 ? (
+        <div className="rounded-lg border border-border-seam bg-bg-sunken/40 p-3">
+          <div className="flex items-start gap-2">
+            <UserPlus size={16} className="mt-0.5 shrink-0 text-text-secondary" />
+            <div>
+              <p className="text-sm font-medium text-text-primary">Add a customer to continue</p>
+              <p className="text-sm text-text-secondary">
+                The customer will be selected automatically and your order details will stay here.
+              </p>
+            </div>
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            className="mt-3"
+            onClick={openCreateDialog}
+            disabled={disabled}
+          >
+            <Plus size={14} className="mr-1.5" />
+            Create customer
+          </Button>
+        </div>
+      ) : null}
+
+      <Dialog
+        open={isCreateOpen}
+        onOpenChange={(open: boolean) => (open ? setIsCreateOpen(true) : closeCreateDialog())}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create customer</DialogTitle>
+            <DialogDescription>
+              Add the customer without leaving this order. They will be selected automatically.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleCreate} className="space-y-4">
+            <FormError message={createError} />
+            <div className="space-y-2">
+              <Label htmlFor="quick-customer-name">Name</Label>
+              <Input
+                id="quick-customer-name"
+                value={form.name}
+                onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                  setForm((previous) => ({ ...previous, name: event.target.value }))
+                }
+                placeholder="Acme Corp or Jane Doe"
+                autoFocus
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="quick-customer-type">Customer type</Label>
+              <Select
+                value={form.type}
+                onValueChange={(value: string) =>
+                  setForm((previous) => ({ ...previous, type: value as Customer['type'] }))
+                }
+              >
+                <SelectTrigger id="quick-customer-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="b2c">B2C (Individual)</SelectItem>
+                  <SelectItem value="b2b">B2B (Business)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="quick-customer-email">Email</Label>
+                <Input
+                  id="quick-customer-email"
+                  type="email"
+                  value={form.email}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                    setForm((previous) => ({ ...previous, email: event.target.value }))
+                  }
+                  placeholder="customer@example.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="quick-customer-phone">Phone</Label>
+                <Input
+                  id="quick-customer-phone"
+                  value={form.phone}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                    setForm((previous) => ({ ...previous, phone: event.target.value }))
+                  }
+                  placeholder="+1-555-0100"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="quick-customer-company">Company</Label>
+              <Input
+                id="quick-customer-company"
+                value={form.company}
+                onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                  setForm((previous) => ({ ...previous, company: event.target.value }))
+                }
+                placeholder="Company name (optional)"
+              />
+            </div>
+            <DialogFooter>
+              {onOpenCustomers && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => {
+                    closeCreateDialog();
+                    onOpenCustomers();
+                  }}
+                  disabled={isCreating}
+                >
+                  Use customer page
+                </Button>
+              )}
+              <Button
+                type="button"
+                variant="outline"
+                onClick={closeCreateDialog}
+                disabled={isCreating}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isCreating}>
+                <Plus size={16} />
+                {isCreating ? 'Creating...' : 'Create and select'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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: [],