@burdenoff/microfe-movethewheels 2026.703.3 → 2026.703.5

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

@@ -1,20 +1,49 @@
 /**
  * Analytics Page
+ *
+ * Real charts (recharts) fed entirely from Query.analytics / orderStats /
+ * fleetStats. Metrics we cannot source (e.g. per-lane volume) are simply not
+ * shown rather than faked.
  */
 
-import { BarChart3, TrendingUp, Package, Truck, DollarSign, Users } from 'lucide-react';
+import { useMemo } from 'react';
+import { BarChart3, TrendingUp, Package, DollarSign, Users, Star } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
 import { Card, CardContent, CardHeader, CardTitle, Progress, Button } from '../components/ui';
+import { TrendChart, VolumeBar, StatusDonut, type DonutSlice } from '../components/charts';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics, useOrderAnalytics, useFleetAnalytics } from '../hooks/useAnalytics';
 import { formatCurrency } from '../utils/formatters';
 
+const statusLabel = (status: string) =>
+  status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
 export default function AnalyticsPage() {
   const { analytics, isLoading, error, refetch } = useAnalytics();
   const { orderData } = useOrderAnalytics();
   const { fleetData } = useFleetAnalytics();
 
+  const orderSpark = useMemo(
+    () => analytics.trends.dailyOrders.map((d) => d.orders),
+    [analytics.trends.dailyOrders]
+  );
+
+  const revenueData = useMemo(
+    () => analytics.trends.revenue.map((r) => ({ month: r.month, revenue: r.revenue })),
+    [analytics.trends.revenue]
+  );
+
+  const statusSlices = useMemo<DonutSlice[]>(
+    () =>
+      orderData.byStatus
+        .filter((s) => s.count > 0)
+        .map((s) => ({ name: statusLabel(s.status), value: s.count })),
+    [orderData.byStatus]
+  );
+
+  const statusTotal = statusSlices.reduce((sum, s) => sum + s.value, 0);
+
   return (
     <PageLayout
       title="Analytics"
@@ -38,17 +67,19 @@ export default function AnalyticsPage() {
           </CardContent>
         </Card>
       ) : isLoading ? (
-        <MetricGrid columns={5}>
-          {Array.from({ length: 5 }).map((_, i) => (
+        <MetricGrid columns={4}>
+          {Array.from({ length: 4 }).map((_, i) => (
             <MetricCardSkeleton key={i} />
           ))}
         </MetricGrid>
       ) : (
-        <MetricGrid columns={5}>
+        <MetricGrid columns={4}>
           <MetricCard
-            label="Total Orders"
+            label="Order Volume"
             value={analytics.overview.totalOrders.toLocaleString()}
             icon={<Package size={20} />}
+            accent="brand"
+            sparklineData={orderSpark.length >= 2 ? orderSpark : undefined}
           />
           <MetricCard
             treatment="glass"
@@ -56,99 +87,83 @@ export default function AnalyticsPage() {
             label="Revenue"
             value={formatCurrency(analytics.overview.totalRevenue)}
             icon={<DollarSign size={20} />}
+            accent="success"
           />
           <MetricCard
-            label="Active Vehicles"
-            value={analytics.overview.activeVehicles}
-            icon={<Truck size={20} />}
-          />
-          <MetricCard
-            label="On-Time Rate"
+            label="On-Time Delivery"
             value={`${analytics.overview.onTimeDeliveryRate.toFixed(1)}%`}
             icon={<TrendingUp size={20} />}
-            changeType={analytics.overview.onTimeDeliveryRate >= 90 ? 'positive' : 'neutral'}
+            accent="blue"
+            delta={
+              analytics.overview.onTimeDeliveryRate >= 90
+                ? { value: 'On target', direction: 'up' }
+                : { value: 'Below 90%', direction: 'down' }
+            }
           />
           <MetricCard
-            label="Satisfaction"
+            label="Customer Satisfaction"
             value={analytics.overview.customerSatisfaction.toFixed(1)}
-            icon={<Users size={20} />}
+            icon={<Star size={20} />}
+            accent="warning"
             subtitle="out of 5"
           />
         </MetricGrid>
       )}
 
+      {/* Order & delivery trend */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Order &amp; delivery trend</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TrendChart
+            xKey="date"
+            height={300}
+            data={analytics.trends.dailyOrders}
+            series={[
+              { dataKey: 'orders', name: 'Orders' },
+              { dataKey: 'deliveries', name: 'Deliveries' },
+            ]}
+            emptyMessage="No order trend recorded yet"
+          />
+        </CardContent>
+      </Card>
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader>
-            <CardTitle>Order Trends</CardTitle>
+            <CardTitle>Revenue by month</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg">
-              <div className="text-center text-text-secondary">
-                <BarChart3 size={48} className="mx-auto mb-2 opacity-50" />
-                <p>Order trend chart</p>
-                <p className="text-xs">(Chart library integration needed)</p>
-              </div>
-            </div>
-            <div className="mt-4 grid 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">
-                    {t.date.split('-').slice(1).join('/')}
-                  </p>
-                  <p className="font-medium">{t.orders}</p>
-                </div>
-              ))}
-            </div>
+            <VolumeBar
+              xKey="month"
+              height={280}
+              showLegend={false}
+              data={revenueData}
+              series={[{ dataKey: 'revenue', name: 'Revenue' }]}
+              valueFormatter={(v) => formatCurrency(Number(v))}
+              emptyMessage="No revenue recorded yet"
+            />
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle>Revenue Trends</CardTitle>
+            <CardTitle>Orders by status</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg">
-              <div className="text-center text-text-secondary">
-                <TrendingUp size={48} className="mx-auto mb-2 opacity-50" />
-                <p>Revenue trend chart</p>
-              </div>
-            </div>
-            <div className="mt-4 grid 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>
-                  <p className="font-medium text-sm">{formatCurrency(r.revenue / 1000)}k</p>
-                </div>
-              ))}
-            </div>
+            <StatusDonut
+              data={statusSlices}
+              height={240}
+              centerLabel={statusTotal.toLocaleString()}
+              centerSubLabel="orders"
+              emptyMessage="No orders to break down yet"
+            />
           </CardContent>
         </Card>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Orders by Status</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {orderData.byStatus
-              .filter((s) => s.count > 0)
-              .map(({ status, count }) => (
-                <div key={status} className="flex items-center justify-between">
-                  <span className="text-sm capitalize">{status.replace('_', ' ')}</span>
-                  <div className="flex items-center gap-2">
-                    <Progress
-                      value={(count / analytics.overview.totalOrders) * 100}
-                      className="w-20 h-2"
-                    />
-                    <span className="font-medium w-8 text-right">{count}</span>
-                  </div>
-                </div>
-              ))}
-          </CardContent>
-        </Card>
-
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader>
             <CardTitle>Fleet Performance</CardTitle>
@@ -188,9 +203,14 @@ export default function AnalyticsPage() {
               {analytics.overview.customerSatisfaction.toFixed(1)}/5
             </p>
           </div>
-          <div>
-            <p className="text-sm text-text-secondary">Driver Ratings</p>
-            <p className="text-2xl font-bold">{analytics.performance.driverRatings.toFixed(1)}/5</p>
+          <div className="flex items-center gap-2">
+            <Users size={16} className="text-text-secondary" />
+            <div>
+              <p className="text-sm text-text-secondary">Driver Ratings</p>
+              <p className="text-2xl font-bold">
+                {analytics.performance.driverRatings.toFixed(1)}/5
+              </p>
+            </div>
           </div>
         </EmphasisPanel>
       </div>

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>
@@ -285,7 +313,7 @@ export default function CreateOrderPage() {
                   placeholder="123 Main St"
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="pickupCity">City</Label>
                   <Input
@@ -305,7 +333,7 @@ export default function CreateOrderPage() {
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="pickupPostal">Postal Code</Label>
                   <Input
@@ -343,7 +371,7 @@ export default function CreateOrderPage() {
                   placeholder="456 Oak Ave"
                 />
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="deliveryCity">City</Label>
                   <Input
@@ -363,7 +391,7 @@ export default function CreateOrderPage() {
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="deliveryPostal">Postal Code</Label>
                   <Input