@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -4,14 +4,14 @@
 
 import { BarChart3, TrendingUp, Package, Truck, DollarSign, Users } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
-import { MetricCard, MetricGrid } from '../components/MetricCard';
-import { Card, CardContent, CardHeader, CardTitle, Progress } from '../components/ui';
+import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
+import { Card, CardContent, CardHeader, CardTitle, Progress, Button } from '../components/ui';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useAnalytics, useOrderAnalytics, useFleetAnalytics } from '../hooks/useAnalytics';
 import { formatCurrency } from '../utils/formatters';
 
 export default function AnalyticsPage() {
-  const { analytics } = useAnalytics();
+  const { analytics, isLoading, error, refetch } = useAnalytics();
   const { orderData } = useOrderAnalytics();
   const { fleetData } = useFleetAnalytics();
 
@@ -27,43 +27,55 @@ export default function AnalyticsPage() {
         to invest — whether that's more vehicles, better routes, or new customers.
       </PagePurpose>
 
-      <MetricGrid columns={5}>
-        <MetricCard
-          label="Total Orders"
-          value={analytics.overview.totalOrders.toLocaleString()}
-          icon={<Package size={20} />}
-          change="+8.2%"
-          changeType="positive"
-          trend="up"
-        />
-        <MetricCard
-          treatment="glass"
-          glow
-          label="Revenue"
-          value={formatCurrency(analytics.overview.totalRevenue)}
-          icon={<DollarSign size={20} />}
-          change="+12.5%"
-          changeType="positive"
-          trend="up"
-        />
-        <MetricCard
-          label="Active Vehicles"
-          value={analytics.overview.activeVehicles}
-          icon={<Truck size={20} />}
-        />
-        <MetricCard
-          label="On-Time Rate"
-          value={`${analytics.overview.onTimeDeliveryRate}%`}
-          icon={<TrendingUp size={20} />}
-          changeType={analytics.overview.onTimeDeliveryRate >= 90 ? 'positive' : 'negative'}
-        />
-        <MetricCard
-          label="Satisfaction"
-          value={analytics.overview.customerSatisfaction.toFixed(1)}
-          icon={<Users size={20} />}
-          subtitle="out of 5"
-        />
-      </MetricGrid>
+      {error && !isLoading ? (
+        <Card className="border-status-error-border">
+          <CardContent className="p-6 text-center space-y-3">
+            <p className="text-status-error-text font-medium">Couldn&apos;t load analytics</p>
+            <p className="text-sm text-text-secondary">{error.message}</p>
+            <Button variant="outline" onClick={refetch}>
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      ) : isLoading ? (
+        <MetricGrid columns={5}>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <MetricCardSkeleton key={i} />
+          ))}
+        </MetricGrid>
+      ) : (
+        <MetricGrid columns={5}>
+          <MetricCard
+            label="Total Orders"
+            value={analytics.overview.totalOrders.toLocaleString()}
+            icon={<Package size={20} />}
+          />
+          <MetricCard
+            treatment="glass"
+            glow
+            label="Revenue"
+            value={formatCurrency(analytics.overview.totalRevenue)}
+            icon={<DollarSign size={20} />}
+          />
+          <MetricCard
+            label="Active Vehicles"
+            value={analytics.overview.activeVehicles}
+            icon={<Truck size={20} />}
+          />
+          <MetricCard
+            label="On-Time Rate"
+            value={`${analytics.overview.onTimeDeliveryRate.toFixed(1)}%`}
+            icon={<TrendingUp size={20} />}
+            changeType={analytics.overview.onTimeDeliveryRate >= 90 ? 'positive' : 'neutral'}
+          />
+          <MetricCard
+            label="Satisfaction"
+            value={analytics.overview.customerSatisfaction.toFixed(1)}
+            icon={<Users size={20} />}
+            subtitle="out of 5"
+          />
+        </MetricGrid>
+      )}
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
@@ -149,45 +161,36 @@ export default function AnalyticsPage() {
               </div>
               <Progress value={fleetData.vehicleUtilization} />
             </div>
-            <div>
-              <div className="flex justify-between text-sm mb-1">
-                <span>Avg Fuel Level</span>
-                <span>{fleetData.avgFuelLevel.toFixed(0)}%</span>
+            {fleetData.vehiclesByType.length > 0 && (
+              <div className="pt-2">
+                <p className="text-sm text-text-secondary mb-2">Vehicles by Type</p>
+                {fleetData.vehiclesByType.map(({ type, count }) => (
+                  <div key={type} className="flex justify-between text-sm py-1">
+                    <span className="capitalize">{type}</span>
+                    <span className="font-medium">{count}</span>
+                  </div>
+                ))}
               </div>
-              <Progress value={fleetData.avgFuelLevel} />
-            </div>
-            <div className="pt-2">
-              <p className="text-sm text-text-secondary mb-2">Vehicles by Type</p>
-              {fleetData.vehiclesByType.map(({ type, count }) => (
-                <div key={type} className="flex justify-between text-sm py-1">
-                  <span className="capitalize">{type}</span>
-                  <span className="font-medium">{count}</span>
-                </div>
-              ))}
-            </div>
+            )}
           </CardContent>
         </Card>
 
         {/* Performance Metrics — the page's single emphasis zone */}
         <EmphasisPanel className="space-y-4">
           <h2 className="text-base font-semibold text-text-primary">Performance Metrics</h2>
-          <div>
-            <p className="text-sm text-text-secondary">On-Time Pickup</p>
-            <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
-          </div>
           <div>
             <p className="text-sm text-text-secondary">On-Time Delivery</p>
-            <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
+            <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery.toFixed(1)}%</p>
           </div>
           <div>
-            <p className="text-sm text-text-secondary">Damaged Items</p>
-            <p className="text-2xl font-bold text-status-success-text">
-              {analytics.performance.damagedItems}%
+            <p className="text-sm text-text-secondary">Customer Satisfaction</p>
+            <p className="text-2xl font-bold">
+              {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}/5</p>
+            <p className="text-2xl font-bold">{analytics.performance.driverRatings.toFixed(1)}/5</p>
           </div>
         </EmphasisPanel>
       </div>

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -2,6 +2,7 @@
  * Customer Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Users,
@@ -13,15 +14,164 @@ import {
   Star,
   Building,
   FileText,
+  Save,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { TypeBadge } from '../components/StatusBadge';
-import { Card, CardContent, CardHeader, CardTitle, Button, Badge } from '../components/ui';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useCustomer } from '../hooks/useCustomers';
+import { useCustomer, useCustomers } from '../hooks/useCustomers';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatAddress, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+function NewCustomerForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createCustomer } = useCustomers();
+  const [form, setForm] = useState({
+    name: '',
+    type: 'b2c' as 'b2b' | 'b2c',
+    email: '',
+    phone: '',
+    company: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'customers'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.name.trim()) {
+      setError('Customer name is required.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const created = await createCustomer({
+        name: form.name.trim(),
+        type: form.type,
+        email: form.email.trim() || undefined,
+        phone: form.phone.trim() || undefined,
+        company: form.company.trim() || undefined,
+      });
+      navigate?.(joinPath(basePath, `customers/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create customer:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create customer. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="New Customer"
+      subtitle="Add a new customer to your account"
+      icon={<Users size={24} />}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={goBack} disabled={submitting}>
+            <ArrowLeft size={16} /> Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            <Save size={16} /> {submitting ? 'Saving...' : 'Create Customer'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Users size={18} />}>
+        Add a customer once and their contact details auto-fill every future order you book for them.
+        Only a name is required — add email, phone and company to make deliveries easier to arrange.
+      </PagePurpose>
+
+      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+        <FormError message={error} />
+        <EmphasisPanel>
+          <h2 className="text-base font-semibold text-text-primary mb-4">Customer 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="name">
+                  Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  value={form.name}
+                  onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+                  placeholder="Acme Corp or Jane Doe"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="type">Customer Type</Label>
+                <Select
+                  value={form.type}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, type: value as 'b2b' | 'b2c' }))
+                  }
+                >
+                  <SelectTrigger id="type">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="b2c">B2C (Individual)</SelectItem>
+                    <SelectItem value="b2b">B2B (Business)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={form.email}
+                  onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
+                  placeholder="customer@example.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="phone">Phone</Label>
+                <Input
+                  id="phone"
+                  value={form.phone}
+                  onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
+                  placeholder="+1-555-0100"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="company">Company</Label>
+              <Input
+                id="company"
+                value={form.company}
+                onChange={(e) => setForm((prev) => ({ ...prev, company: e.target.value }))}
+                placeholder="Company name (for B2B accounts)"
+              />
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function CustomerDetailsPage() {
   const { customerId } = useParams<{ customerId: string }>();
@@ -33,24 +183,7 @@ export default function CustomerDetailsPage() {
 
   // Handle new customer form
   if (!customerId) {
-    return (
-      <PageLayout
-        title="New Customer"
-        subtitle="Add a new customer"
-        icon={<Users size={24} />}
-        headerActions={
-          <Button variant="outline" onClick={goBack}>
-            <ArrowLeft size={16} /> Back
-          </Button>
-        }
-      >
-        <Card>
-          <CardContent className="p-8 text-center">
-            <p className="text-text-secondary">Customer creation form would go here</p>
-          </CardContent>
-        </Card>
-      </PageLayout>
-    );
+    return <NewCustomerForm />;
   }
 
   if (isLoading) return <LoadingState message="Loading customer details..." />;
@@ -78,7 +211,7 @@ export default function CustomerDetailsPage() {
             {customer.isActive ? 'Active' : 'Inactive'}
           </Badge>
           <div className="flex items-center gap-1">
-            <Star size={16} className="text-yellow-500 fill-yellow-500" />
+            <Star size={16} className="text-status-warning-text fill-current" />
             <span className="font-medium">{customer.rating.toFixed(1)}</span>
           </div>
         </div>

package/src/movethewheels/pages/CustomersPage.tsx

@@ -59,7 +59,7 @@ export default function CustomersPage() {
       header: 'Rating',
       cell: (row) => (
         <div className="flex items-center gap-1">
-          <Star size={14} className="text-yellow-500 fill-yellow-500" />
+          <Star size={14} className="text-status-warning-text fill-current" />
           <span>{row.rating.toFixed(1)}</span>
         </div>
       ),

package/src/movethewheels/pages/DashboardPage.tsx

@@ -56,6 +56,13 @@ export default function DashboardPage() {
     }
   };
 
+  const onRowKeyDown = (e: React.KeyboardEvent, action: () => void) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      action();
+    }
+  };
+
   return (
     <PageLayout
       hero
@@ -93,9 +100,6 @@ export default function DashboardPage() {
           label={t('movethewheels.dashboard.metrics.totalOrders', 'Total Orders')}
           value={metrics.orders.total}
           icon={<Package size={20} />}
-          change={`+${metrics.orders.today} ${t('movethewheels.dashboard.metrics.today', 'today')}`}
-          changeType="positive"
-          trend="up"
           onClick={() => goTo('orders')}
         />
         <MetricCard
@@ -118,9 +122,6 @@ export default function DashboardPage() {
           label={t('movethewheels.dashboard.metrics.revenue', 'Revenue')}
           value={formatCurrency(metrics.revenue.total)}
           icon={<DollarSign size={20} />}
-          change="+12.5%"
-          changeType="positive"
-          trend="up"
           onClick={() => goTo('analytics')}
         />
       </MetricGrid>
@@ -167,8 +168,12 @@ export default function DashboardPage() {
                 {orders.slice(0, 5).map((order) => (
                   <div
                     key={order.id}
-                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`View order ${order.orderNumber}`}
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg"
                     onClick={() => goTo(`orders/${order.id}`)}
+                    onKeyDown={(e) => onRowKeyDown(e, () => goTo(`orders/${order.id}`))}
                   >
                     <div className="flex items-center justify-between">
                       <div>
@@ -211,8 +216,15 @@ export default function DashboardPage() {
                   delivery.order ? (
                     <div
                       key={delivery.order.id}
-                      className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
+                      role="button"
+                      tabIndex={0}
+                      aria-label={`Track order ${delivery.order.orderNumber}`}
+                      className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg"
                       onClick={() => goTo(`tracking?order=${delivery.order.id}`)}
+                      onKeyDown={(e) =>
+                        delivery.order &&
+                        onRowKeyDown(e, () => goTo(`tracking?order=${delivery.order.id}`))
+                      }
                     >
                       <div className="flex items-center justify-between">
                         <div>
@@ -257,18 +269,26 @@ export default function DashboardPage() {
           </h2>
           <div className="space-y-3">
             {[
-              { status: 'pending', count: orderStats.byStatus.pending, color: 'bg-yellow-500' },
+              {
+                status: 'pending',
+                count: orderStats.byStatus.pending,
+                color: 'bg-status-warning-text',
+              },
               {
                 status: 'in_transit',
                 count: orderStats.byStatus.in_transit,
-                color: 'bg-blue-500',
+                color: 'bg-status-info-text',
               },
               {
                 status: 'delivered',
                 count: orderStats.byStatus.delivered,
-                color: 'bg-green-500',
+                color: 'bg-status-success-text',
+              },
+              {
+                status: 'cancelled',
+                count: orderStats.byStatus.cancelled,
+                color: 'bg-status-error-text',
               },
-              { status: 'cancelled', count: orderStats.byStatus.cancelled, color: 'bg-red-500' },
             ].map(({ status, count, color }) => (
               <div key={status} className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
@@ -313,7 +333,7 @@ export default function DashboardPage() {
                 <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.available', 'Available')}
                 </p>
-                <p className="text-lg font-semibold text-green-600">
+                <p className="text-lg font-semibold text-status-success-text">
                   {fleetStats.vehiclesByStatus.available}
                 </p>
               </div>
@@ -321,7 +341,7 @@ export default function DashboardPage() {
                 <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.inUse', 'In Use')}
                 </p>
-                <p className="text-lg font-semibold text-blue-600">
+                <p className="text-lg font-semibold text-status-info-text">
                   {fleetStats.vehiclesByStatus.assigned}
                 </p>
               </div>
@@ -329,7 +349,7 @@ export default function DashboardPage() {
                 <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.maintenance', 'Maintenance')}
                 </p>
-                <p className="text-lg font-semibold text-yellow-600">
+                <p className="text-lg font-semibold text-status-warning-text">
                   {fleetStats.vehiclesByStatus.maintenance}
                 </p>
               </div>
@@ -347,15 +367,15 @@ export default function DashboardPage() {
         <Card>
           <CardHeader>
             <CardTitle className="text-base flex items-center gap-2">
-              <AlertTriangle size={16} className="text-yellow-500" />
+              <AlertTriangle size={16} className="text-status-warning-text" />
               {t('movethewheels.dashboard.alerts.title', 'Alerts')}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-3">
               {orderStats.byStatus.pending > 5 && (
-                <div className="flex items-start gap-3 p-2 rounded bg-yellow-50 dark:bg-yellow-900/20">
-                  <Clock size={16} className="text-yellow-600 mt-0.5" />
+                <div className="flex items-start gap-3 p-2 rounded bg-status-warning-bg-subtle">
+                  <Clock size={16} className="text-status-warning-text mt-0.5" />
                   <div>
                     <p className="text-sm font-medium">
                       {t('movethewheels.dashboard.alerts.pendingOrders.title', 'Pending Orders')}
@@ -371,8 +391,8 @@ export default function DashboardPage() {
                 </div>
               )}
               {fleetStats.vehiclesByStatus.maintenance > 0 && (
-                <div className="flex items-start gap-3 p-2 rounded bg-orange-50 dark:bg-orange-900/20">
-                  <Truck size={16} className="text-orange-600 mt-0.5" />
+                <div className="flex items-start gap-3 p-2 rounded bg-status-warning-bg-subtle">
+                  <Truck size={16} className="text-status-warning-text mt-0.5" />
                   <div>
                     <p className="text-sm font-medium">
                       {t(
@@ -391,8 +411,8 @@ export default function DashboardPage() {
                 </div>
               )}
               {fleetStats.driversByStatus.offline > 0 && (
-                <div className="flex items-start gap-3 p-2 rounded bg-gray-50 dark:bg-gray-800">
-                  <Users size={16} className="text-gray-600 mt-0.5" />
+                <div className="flex items-start gap-3 p-2 rounded bg-bg-sunken">
+                  <Users size={16} className="text-text-secondary mt-0.5" />
                   <div>
                     <p className="text-sm font-medium">
                       {t('movethewheels.dashboard.alerts.offlineDrivers.title', 'Offline Drivers')}