@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.1

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')}

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -51,7 +51,7 @@ export default function DriverDetailsPage() {
         <div className="flex items-center gap-4">
           <StatusBadge status={driver.status} type="driver" />
           <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">{driver.ratings.overall.toFixed(1)}</span>
             <span className="text-text-secondary">({driver.ratings.totalRatings} ratings)</span>
           </div>

package/src/movethewheels/pages/DriversPage.tsx

@@ -53,7 +53,7 @@ export default function DriversPage() {
       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 className="font-medium">{row.ratings.overall.toFixed(1)}</span>
           <span className="text-text-secondary text-sm">({row.ratings.totalRatings})</span>
         </div>

package/src/movethewheels/pages/FleetPage.tsx

@@ -6,7 +6,7 @@
 
 import { Truck, Users, Wrench, Fuel, Star, ChevronRight } from 'lucide-react';
 import { PageLayout, PageSection } from '../components/PageLayout';
-import { MetricCard, MetricGrid } from '../components/MetricCard';
+import { MetricCard, MetricGrid, MetricCardSkeleton } from '../components/MetricCard';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import {
   Card,
@@ -31,9 +31,32 @@ export default function FleetPage() {
     return value === key ? fallback : value;
   };
   const { basePath, navigate } = useMoveTheWheels();
-  const { stats } = useFleetStats();
-  const { vehicles } = useVehicles();
-  const { drivers } = useDrivers();
+  const {
+    stats,
+    isLoading: statsLoading,
+    error: statsError,
+    refetch: refetchStats,
+  } = useFleetStats();
+  const {
+    vehicles,
+    isLoading: vehiclesLoading,
+    error: vehiclesError,
+    refetch: refetchVehicles,
+  } = useVehicles();
+  const {
+    drivers,
+    isLoading: driversLoading,
+    error: driversError,
+    refetch: refetchDrivers,
+  } = useDrivers();
+
+  const isLoading = statsLoading || vehiclesLoading || driversLoading;
+  const error = statsError ?? vehiclesError ?? driversError;
+  const refetchAll = () => {
+    refetchStats();
+    refetchVehicles();
+    refetchDrivers();
+  };
 
   const goTo = (path: string) => {
     if (navigate) {
@@ -41,6 +64,13 @@ export default function FleetPage() {
     }
   };
 
+  const onRowKeyDown = (e: React.KeyboardEvent, action: () => void) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      action();
+    }
+  };
+
   return (
     <PageLayout
       title={t('movethewheels.fleet.title', 'Fleet Management')}
@@ -107,37 +137,57 @@ export default function FleetPage() {
       />
 
       {/* Key Metrics */}
-      <MetricGrid columns={4}>
-        <MetricCard
-          label={t('movethewheels.fleet.metrics.totalVehicles', 'Total Vehicles')}
-          value={stats.totalVehicles}
-          icon={<Truck size={20} />}
-          subtitle={`${stats.vehiclesByStatus.available} ${t('movethewheels.fleet.metrics.available', 'available')}`}
-          onClick={() => goTo('fleet/vehicles')}
-        />
-        <MetricCard
-          label={t('movethewheels.fleet.metrics.totalDrivers', 'Total Drivers')}
-          value={stats.totalDrivers}
-          icon={<Users size={20} />}
-          subtitle={`${stats.driversByStatus.available} ${t('movethewheels.fleet.metrics.available', 'available')}`}
-          onClick={() => goTo('fleet/drivers')}
-        />
-        <MetricCard
-          treatment="glass"
-          glow
-          label={t('movethewheels.fleet.metrics.utilization', 'Fleet Utilization')}
-          value={`${stats.utilization.toFixed(0)}%`}
-          icon={<Truck size={20} />}
-          changeType={stats.utilization >= 70 ? 'positive' : 'neutral'}
-        />
-        <MetricCard
-          label={t('movethewheels.fleet.metrics.avgDriverRating', 'Avg Driver Rating')}
-          value={stats.avgDriverRating.toFixed(1)}
-          icon={<Star size={20} />}
-          subtitle={t('movethewheels.fleet.metrics.outOfFive', 'out of 5')}
-          changeType={stats.avgDriverRating >= 4.5 ? 'positive' : 'neutral'}
-        />
-      </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">
+              {t('movethewheels.fleet.error.title', "Couldn't load fleet data")}
+            </p>
+            <p className="text-sm text-text-secondary">{error.message}</p>
+            <Button variant="outline" onClick={refetchAll}>
+              {t('movethewheels.fleet.error.retry', 'Retry')}
+            </Button>
+          </CardContent>
+        </Card>
+      ) : isLoading ? (
+        <MetricGrid columns={4}>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <MetricCardSkeleton key={i} />
+          ))}
+        </MetricGrid>
+      ) : (
+        <MetricGrid columns={4}>
+          <MetricCard
+            label={t('movethewheels.fleet.metrics.totalVehicles', 'Total Vehicles')}
+            value={stats.totalVehicles}
+            icon={<Truck size={20} />}
+            subtitle={`${stats.vehiclesByStatus.available} ${t('movethewheels.fleet.metrics.available', 'available')}`}
+            onClick={() => goTo('fleet/vehicles')}
+          />
+          <MetricCard
+            label={t('movethewheels.fleet.metrics.totalDrivers', 'Total Drivers')}
+            value={stats.totalDrivers}
+            icon={<Users size={20} />}
+            subtitle={`${stats.driversByStatus.available} ${t('movethewheels.fleet.metrics.available', 'available')}`}
+            onClick={() => goTo('fleet/drivers')}
+          />
+          <MetricCard
+            treatment="glass"
+            glow
+            label={t('movethewheels.fleet.metrics.utilization', 'Fleet Utilization')}
+            value={`${stats.utilization.toFixed(0)}%`}
+            icon={<Truck size={20} />}
+            changeType={stats.utilization >= 70 ? 'positive' : 'neutral'}
+          />
+          <MetricCard
+            label={t('movethewheels.fleet.metrics.avgDriverRating', 'Avg Driver Rating')}
+            value={stats.avgDriverRating.toFixed(1)}
+            icon={<Star size={20} />}
+            subtitle={t('movethewheels.fleet.metrics.outOfFive', 'out of 5')}
+            changeType={stats.avgDriverRating >= 4.5 ? 'positive' : 'neutral'}
+          />
+        </MetricGrid>
+      )}
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Vehicles Overview */}
@@ -155,8 +205,12 @@ export default function FleetPage() {
                 {vehicles.slice(0, 5).map((vehicle) => (
                   <div
                     key={vehicle.id}
-                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`View vehicle ${vehicle.vehicleNumber}`}
+                    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(`fleet/vehicles/${vehicle.id}`)}
+                    onKeyDown={(e) => onRowKeyDown(e, () => goTo(`fleet/vehicles/${vehicle.id}`))}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
@@ -208,8 +262,12 @@ export default function FleetPage() {
                 {drivers.slice(0, 5).map((driver) => (
                   <div
                     key={driver.id}
-                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`View driver ${driver.fullName}`}
+                    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(`fleet/drivers/${driver.id}`)}
+                    onKeyDown={(e) => onRowKeyDown(e, () => goTo(`fleet/drivers/${driver.id}`))}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
@@ -232,7 +290,7 @@ export default function FleetPage() {
                       <div className="text-right">
                         <StatusBadge status={driver.status} type="driver" size="sm" />
                         <div className="mt-1 flex items-center gap-1 justify-end">
-                          <Star size={12} className="text-yellow-500 fill-yellow-500" />
+                          <Star size={12} className="text-status-warning-text fill-current" />
                           <span className="text-sm font-medium">
                             {driver.ratings.overall.toFixed(1)}
                           </span>