@burdenoff/microfe-movethewheels 2026.626.2 → 2026.703.2

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -2,8 +2,19 @@
  * Driver Details Page
  */
 
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Users, ArrowLeft, Star, DollarSign, Clock, FileText, Edit, MapPin } from 'lucide-react';
+import {
+  Users,
+  ArrowLeft,
+  Star,
+  DollarSign,
+  Clock,
+  FileText,
+  Edit,
+  MapPin,
+  Save,
+} from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
 import {
@@ -14,12 +25,157 @@ import {
   Button,
   Badge,
   Progress,
+  Input,
+  Label,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDriver } from '../hooks/useFleet';
+import { useDriver, useFleet } from '../hooks/useFleet';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { FormError } from '../components/FormError';
+
+function NewDriverForm() {
+  const { basePath, navigate } = useMoveTheWheels();
+  const { createDriver } = useFleet();
+  const [form, setForm] = useState({
+    employeeId: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    licenseNumber: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.employeeId.trim() || !form.firstName.trim() || !form.lastName.trim()) {
+      setError('Employee ID, first name and last name are required.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const created = await createDriver({
+        employeeId: form.employeeId.trim(),
+        firstName: form.firstName.trim(),
+        lastName: form.lastName.trim(),
+        email: form.email.trim() || undefined,
+        phone: form.phone.trim() || undefined,
+        licenseNumber: form.licenseNumber.trim() || undefined,
+      });
+      navigate?.(joinPath(basePath, `fleet/drivers/${created.id}`));
+    } catch (err) {
+      console.error('Failed to create driver:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create driver. Please try again.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Add Driver"
+      subtitle="Add a driver to your workforce"
+      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...' : 'Add Driver'}
+          </Button>
+        </div>
+      }
+    >
+      <PagePurpose icon={<Users size={18} />}>
+        Add a driver so they can be assigned to orders and routes. An employee ID and name get them on
+        the roster — add contact details and license number to keep the record complete.
+      </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">Driver Details</h2>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="employeeId">
+                  Employee ID <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="employeeId"
+                  value={form.employeeId}
+                  onChange={(e) => setForm((prev) => ({ ...prev, employeeId: e.target.value }))}
+                  placeholder="EMP-001"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="firstName">
+                  First Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="firstName"
+                  value={form.firstName}
+                  onChange={(e) => setForm((prev) => ({ ...prev, firstName: e.target.value }))}
+                  placeholder="Jane"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastName">
+                  Last Name <span className="text-status-error-text">*</span>
+                </Label>
+                <Input
+                  id="lastName"
+                  value={form.lastName}
+                  onChange={(e) => setForm((prev) => ({ ...prev, lastName: e.target.value }))}
+                  placeholder="Doe"
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 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="jane.doe@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 className="space-y-2">
+                <Label htmlFor="licenseNumber">License Number</Label>
+                <Input
+                  id="licenseNumber"
+                  value={form.licenseNumber}
+                  onChange={(e) => setForm((prev) => ({ ...prev, licenseNumber: e.target.value }))}
+                  placeholder="D1234567"
+                />
+              </div>
+            </div>
+          </div>
+        </EmphasisPanel>
+      </form>
+    </PageLayout>
+  );
+}
 
 export default function DriverDetailsPage() {
   const { driverId } = useParams<{ driverId: string }>();
@@ -29,6 +185,7 @@ export default function DriverDetailsPage() {
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  if (!driverId) return <NewDriverForm />;
   if (isLoading) return <LoadingState message="Loading driver details..." />;
   if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
 
@@ -51,7 +208,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>
@@ -92,7 +92,11 @@ export default function DriversPage() {
       icon={<Users size={24} />}
       headerActions={
         <CTAOverflowMenu
-          primary={{ label: 'Add Driver', icon: <Plus size={16} />, onSelect: () => {} }}
+          primary={{
+            label: 'Add Driver',
+            icon: <Plus size={16} />,
+            onSelect: () => goTo('fleet/drivers/new'),
+          }}
           actions={[
             { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
             { label: 'Export', icon: <Download size={16} />, onSelect: () => {} },

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>