@burdenoff/microfe-movethewheels 2026.703.2 → 2026.703.4

package/src/movethewheels/hooks/useRoutes.ts

@@ -7,11 +7,15 @@ interface UseRoutesOptions {
   driverId?: string;
   vehicleId?: string;
   status?: 'planned' | 'in_progress' | 'completed' | 'cancelled';
+  limit?: number;
+  offset?: number;
 }
 
 interface UseRoutesResult {
   routes: Route[];
   totalRoutes: number;
+  /** True when the last fetch returned a full page (rawCount === limit). */
+  hasMore: boolean;
   isLoading: boolean;
   error: Error | null;
   refetch: () => void;
@@ -36,6 +40,7 @@ interface ApiRoute {
   waypoints?: unknown;
   estimatedDistance?: number | null;
   estimatedDuration?: number | null;
+  fuelCost?: number | null;
   actualDistance?: number | null;
   actualDuration?: number | null;
   createdAt: string;
@@ -53,6 +58,7 @@ const LIST_ROUTES_QUERY = `
       waypoints
       estimatedDistance
       estimatedDuration
+      fuelCost
       actualDistance
       actualDuration
       createdAt
@@ -72,6 +78,7 @@ const GET_ROUTE_QUERY = `
       waypoints
       estimatedDistance
       estimatedDuration
+      fuelCost
       actualDistance
       actualDuration
       createdAt
@@ -91,6 +98,7 @@ const CREATE_ROUTE_MUTATION = `
       waypoints
       estimatedDistance
       estimatedDuration
+      fuelCost
       actualDistance
       actualDuration
       createdAt
@@ -110,6 +118,7 @@ const UPDATE_ROUTE_MUTATION = `
       waypoints
       estimatedDistance
       estimatedDuration
+      fuelCost
       actualDistance
       actualDuration
       createdAt
@@ -135,6 +144,7 @@ const OPTIMIZE_ROUTE_MUTATION = `
       waypoints
       estimatedDistance
       estimatedDuration
+      fuelCost
       actualDistance
       actualDuration
       createdAt
@@ -206,6 +216,7 @@ function mapRoute(route: ApiRoute): Route {
     stops: mapWaypoints(route.waypoints),
     distance: route.estimatedDistance ?? 0,
     estimatedDuration: route.estimatedDuration ?? 0,
+    fuelCost: route.fuelCost ?? undefined,
     actualDuration: route.actualDuration ?? undefined,
     startTime: undefined,
     endTime: undefined,
@@ -232,9 +243,10 @@ function useGraphqlOptions() {
 }
 
 export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
-  const { driverId, vehicleId, status } = options;
+  const { driverId, vehicleId, status, limit = 500, offset = 0 } = options;
   const graphQLOptions = useGraphqlOptions();
   const [routes, setRoutes] = useState<Route[]>([]);
+  const [hasMore, setHasMore] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -248,16 +260,17 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
           vehicleId,
           status: status ? toApiRouteStatus(status) : undefined,
         },
-        pagination: { limit: 500, offset: 0 },
+        pagination: { limit, offset },
       });
 
+      setHasMore(data.routes.length === limit);
       setRoutes(data.routes.map(mapRoute));
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load routes'));
     } finally {
       setIsLoading(false);
     }
-  }, [driverId, graphQLOptions, status, vehicleId]);
+  }, [driverId, graphQLOptions, status, vehicleId, limit, offset]);
 
   useEffect(() => {
     void load();
@@ -282,6 +295,7 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
             waypoints: route.stops ?? [],
             estimatedDistance: route.distance ?? 0,
             estimatedDuration: route.estimatedDuration ?? 0,
+            fuelCost: route.fuelCost,
             actualDistance: route.distance,
             actualDuration: route.actualDuration,
           },
@@ -311,6 +325,7 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
             waypoints: updates.stops,
             estimatedDistance: updates.distance,
             estimatedDuration: updates.estimatedDuration,
+            fuelCost: updates.fuelCost,
             actualDistance: updates.distance,
             actualDuration: updates.actualDuration,
           },
@@ -376,6 +391,7 @@ export function useRoutes(options: UseRoutesOptions = {}): UseRoutesResult {
   return {
     routes,
     totalRoutes: routes.length,
+    hasMore,
     isLoading,
     error,
     refetch,
@@ -446,6 +462,7 @@ export function useRouteStats() {
       completedRoutes: routes.filter((route) => route.status === 'completed').length,
       inProgressRoutes: routes.filter((route) => route.status === 'in_progress').length,
       plannedRoutes: routes.filter((route) => route.status === 'planned').length,
+      optimizedRoutes: routes.filter((route) => route.optimized).length,
     };
   }, [routes]);
 

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -90,7 +90,7 @@ export default function AnalyticsPage() {
                 <p className="text-xs">(Chart library integration needed)</p>
               </div>
             </div>
-            <div className="mt-4 grid grid-cols-4 gap-2">
+            <div className="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-2">
               {orderData.trends.slice(-4).map((t) => (
                 <div key={t.date} className="text-center p-2 bg-bg-sunken/50 rounded">
                   <p className="text-xs text-text-secondary">
@@ -114,7 +114,7 @@ export default function AnalyticsPage() {
                 <p>Revenue trend chart</p>
               </div>
             </div>
-            <div className="mt-4 grid grid-cols-5 gap-2">
+            <div className="mt-4 grid grid-cols-2 sm:grid-cols-5 gap-2">
               {analytics.trends.revenue.map((r) => (
                 <div key={r.month} className="text-center p-2 bg-bg-sunken/50 rounded">
                   <p className="text-xs text-text-secondary">{r.month}</p>

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Package, ArrowLeft, Save, Plus, Trash2, Users, MapPin } from 'lucide-react';
 import { PageLayout, EmptyState } from '../components/PageLayout';
+import { FormError } from '../components/FormError';
 import {
   Card,
   CardContent,
@@ -62,6 +63,7 @@ export default function CreateOrderPage() {
   });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
 
   const goBack = () => {
     if (navigate) {
@@ -69,27 +71,49 @@ export default function CreateOrderPage() {
     }
   };
 
+  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.pickupAddress.street.trim()) {
+      return 'Enter a pickup street address.';
+    }
+    if (!formData.deliveryAddress.street.trim()) {
+      return 'Enter a delivery street address.';
+    }
+    if (formData.items.length === 0) {
+      return 'Add at least one item to the order.';
+    }
+    return null;
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setIsSubmitting(true);
+    setFormError(null);
 
-    try {
-      const selectedCustomer = customers.find((c) => c.id === formData.customerId);
+    const validationError = validate();
+    if (validationError) {
+      setFormError(validationError);
+      return;
+    }
+
+    const selectedCustomer = customers.find((c) => c.id === formData.customerId);
+    if (!selectedCustomer) {
+      setFormError('Select a customer for this order.');
+      return;
+    }
 
+    setIsSubmitting(true);
+    try {
       await createOrder({
         customerId: formData.customerId,
-        customerInfo: selectedCustomer
-          ? {
-              name: selectedCustomer.name,
-              email: selectedCustomer.email,
-              phone: selectedCustomer.phone,
-              company: selectedCustomer.company,
-            }
-          : {
-              name: 'New Customer',
-              email: 'customer@example.com',
-              phone: '+1-555-0000',
-            },
+        customerInfo: {
+          name: selectedCustomer.name,
+          email: selectedCustomer.email,
+          phone: selectedCustomer.phone,
+          company: selectedCustomer.company,
+        },
         orderType: formData.orderType as 'b2b' | 'b2c',
         priority: formData.priority as 'low' | 'normal' | 'high' | 'urgent',
         pickupAddress: formData.pickupAddress,
@@ -100,7 +124,9 @@ export default function CreateOrderPage() {
 
       goBack();
     } catch (error) {
-      console.error('Failed to create order:', error);
+      setFormError(
+        error instanceof Error ? error.message : 'Could not create the order. Please try again.'
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -209,6 +235,8 @@ export default function CreateOrderPage() {
       />
 
       <form onSubmit={handleSubmit} className="space-y-6">
+        <FormError message={formError} />
+
         {/* Order Details — the page's single emphasis zone (the form's starting point) */}
         <EmphasisPanel>
           <h2 className="text-base font-semibold text-text-primary mb-4">Order Details</h2>

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -2,7 +2,7 @@
  * Customer Details Page
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Users,
@@ -15,9 +15,11 @@ import {
   Building,
   FileText,
   Save,
+  Package,
+  X,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
-import { TypeBadge } from '../components/StatusBadge';
+import { TypeBadge, StatusBadge } from '../components/StatusBadge';
 import {
   Card,
   CardContent,
@@ -35,10 +37,28 @@ import {
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useCustomer, useCustomers } from '../hooks/useCustomers';
+import { useOrders } from '../hooks/useOrders';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatAddress, formatDate } from '../utils/formatters';
+import { formatAddress, formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
+
+/**
+ * Only surface http(s) links. Anything else (javascript:, data:, mailto:, etc.)
+ * is unsafe to render as a raw href, so we drop it.
+ */
+function safeHttpUrl(raw: string | undefined): string | null {
+  if (!raw) return null;
+  const value = raw.trim();
+  const candidate = /^https?:\/\//i.test(value) ? value : `https://${value}`;
+  try {
+    const parsed = new URL(candidate);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.href : null;
+  } catch {
+    return null;
+  }
+}
 
 function NewCustomerForm() {
   const { basePath, navigate } = useMoveTheWheels();
@@ -177,10 +197,77 @@ export default function CustomerDetailsPage() {
   const { customerId } = useParams<{ customerId: string }>();
   const { basePath, navigate } = useMoveTheWheels();
   const { customer, isLoading, error, refetch } = useCustomer(customerId);
+  const { updateCustomer } = useCustomers();
+  const { orders, isLoading: ordersLoading } = useOrders({ filters: { customerId } });
+  const { message: notice, notify } = useNotice();
+
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editError, setEditError] = useState<string | null>(null);
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    company: '',
+  });
+
+  useEffect(() => {
+    if (customer) {
+      setForm({
+        name: customer.name,
+        email: customer.email,
+        phone: customer.phone,
+        company: customer.company ?? '',
+      });
+    }
+  }, [customer]);
 
   const goBack = () => navigate?.(joinPath(basePath, 'customers'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  const startEdit = () => {
+    setEditError(null);
+    setEditing(true);
+  };
+
+  const cancelEdit = () => {
+    setEditError(null);
+    setEditing(false);
+    if (customer) {
+      setForm({
+        name: customer.name,
+        email: customer.email,
+        phone: customer.phone,
+        company: customer.company ?? '',
+      });
+    }
+  };
+
+  const handleSave = async () => {
+    if (!customerId) return;
+    if (!form.name.trim()) {
+      setEditError('Customer name is required.');
+      return;
+    }
+    setSaving(true);
+    setEditError(null);
+    try {
+      await updateCustomer(customerId, {
+        name: form.name.trim(),
+        email: form.email.trim(),
+        phone: form.phone.trim(),
+        company: form.company.trim() || undefined,
+      });
+      notify('Customer updated.');
+      setEditing(false);
+      refetch();
+    } catch (err) {
+      setEditError(err instanceof Error ? err.message : 'Failed to update customer.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
   // Handle new customer form
   if (!customerId) {
     return <NewCustomerForm />;
@@ -199,9 +286,20 @@ export default function CustomerDetailsPage() {
           <Button variant="outline" onClick={goBack}>
             <ArrowLeft size={16} /> Back
           </Button>
-          <Button>
-            <Edit size={16} /> Edit
-          </Button>
+          {editing ? (
+            <>
+              <Button variant="outline" onClick={cancelEdit} disabled={saving}>
+                <X size={16} /> Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={saving}>
+                <Save size={16} /> {saving ? 'Saving…' : 'Save'}
+              </Button>
+            </>
+          ) : (
+            <Button onClick={startEdit}>
+              <Edit size={16} /> Edit
+            </Button>
+          )}
         </div>
       }
       headerContent={
@@ -238,53 +336,112 @@ export default function CustomerDetailsPage() {
             label: 'Update contact details',
             description: 'Keep email, phone and address current.',
             icon: <Edit size={16} />,
-            onClick: () => {},
+            onClick: startEdit,
           },
         ]}
       />
 
+      {notice && (
+        <div className="mb-2">
+          <Notice message={notice} />
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
           {/* Contact Information — the page's single emphasis zone */}
           <EmphasisPanel>
             <h2 className="text-base font-semibold text-text-primary mb-4">Contact Information</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {editing ? (
               <div className="space-y-4">
-                <div className="flex items-center gap-3">
-                  <Mail size={18} className="text-text-secondary" />
-                  <div>
-                    <p className="text-sm text-text-secondary">Email</p>
-                    <p className="font-medium">{customer.email}</p>
+                <FormError message={editError} />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-name">
+                      Name <span className="text-status-error-text">*</span>
+                    </Label>
+                    <Input
+                      id="edit-name"
+                      value={form.name}
+                      onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+                    />
                   </div>
-                </div>
-                <div className="flex items-center gap-3">
-                  <Phone size={18} className="text-text-secondary" />
-                  <div>
-                    <p className="text-sm text-text-secondary">Phone</p>
-                    <p className="font-medium">{customer.phone}</p>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-company">Company</Label>
+                    <Input
+                      id="edit-company"
+                      value={form.company}
+                      onChange={(e) => setForm((prev) => ({ ...prev, company: e.target.value }))}
+                      placeholder="Company name (for B2B accounts)"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-email">Email</Label>
+                    <Input
+                      id="edit-email"
+                      type="email"
+                      value={form.email}
+                      onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="edit-phone">Phone</Label>
+                    <Input
+                      id="edit-phone"
+                      value={form.phone}
+                      onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
+                    />
                   </div>
                 </div>
               </div>
-              <div className="space-y-4">
-                {customer.company && (
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
                   <div className="flex items-center gap-3">
-                    <Building size={18} className="text-text-secondary" />
+                    <Mail size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-text-secondary">Company</p>
-                      <p className="font-medium">{customer.company}</p>
+                      <p className="text-sm text-text-secondary">Email</p>
+                      <p className="font-medium">{customer.email || '—'}</p>
                     </div>
                   </div>
-                )}
-                {customer.website && (
-                  <div>
-                    <p className="text-sm text-text-secondary">Website</p>
-                    <a href={customer.website} className="text-primary hover:underline">
-                      {customer.website}
-                    </a>
+                  <div className="flex items-center gap-3">
+                    <Phone size={18} className="text-text-secondary" />
+                    <div>
+                      <p className="text-sm text-text-secondary">Phone</p>
+                      <p className="font-medium">{customer.phone || '—'}</p>
+                    </div>
                   </div>
-                )}
+                </div>
+                <div className="space-y-4">
+                  {customer.company && (
+                    <div className="flex items-center gap-3">
+                      <Building size={18} className="text-text-secondary" />
+                      <div>
+                        <p className="text-sm text-text-secondary">Company</p>
+                        <p className="font-medium">{customer.company}</p>
+                      </div>
+                    </div>
+                  )}
+                  {(() => {
+                    const website = safeHttpUrl(customer.website);
+                    if (!website) return null;
+                    return (
+                      <div>
+                        <p className="text-sm text-text-secondary">Website</p>
+                        <a
+                          href={website}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary hover:underline"
+                        >
+                          {website}
+                        </a>
+                      </div>
+                    );
+                  })()}
+                </div>
               </div>
-            </div>
+            )}
           </EmphasisPanel>
 
           <Card>
@@ -310,6 +467,55 @@ export default function CustomerDetailsPage() {
               </CardContent>
             </Card>
           )}
+
+          {/* Orders for this customer */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle className="flex items-center gap-2">
+                <Package size={18} /> Orders
+              </CardTitle>
+              <Button variant="outline" size="sm" onClick={() => goTo('orders/new')}>
+                <FileText size={14} /> New order
+              </Button>
+            </CardHeader>
+            <CardContent>
+              {ordersLoading ? (
+                <p className="text-text-secondary text-center py-4">Loading orders…</p>
+              ) : orders.length > 0 ? (
+                <div className="space-y-2">
+                  {orders.map((order) => (
+                    <button
+                      key={order.id}
+                      type="button"
+                      onClick={() => goTo(`orders/${order.id}`)}
+                      className="w-full flex items-center justify-between gap-3 p-3 border rounded-lg text-left hover:bg-bg-sunken/50 transition-colors"
+                    >
+                      <div className="min-w-0">
+                        <p className="font-medium truncate">{order.orderNumber}</p>
+                        <p className="text-sm text-text-secondary">
+                          {formatDate(order.createdAt, 'relative')} ·{' '}
+                          {formatCurrency(order.pricing.total)}
+                        </p>
+                      </div>
+                      <StatusBadge status={order.status} type="order" size="sm" />
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-6">
+                  <Package size={32} className="mx-auto mb-2 text-text-secondary opacity-50" />
+                  <p className="text-text-secondary">No orders yet for this customer</p>
+                  <button
+                    type="button"
+                    onClick={() => goTo('orders/new')}
+                    className="mt-1 text-sm text-primary hover:underline"
+                  >
+                    Book their first delivery
+                  </button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
         </div>
 
         <div className="space-y-6">