@burdenoff/microfe-movethewheels 2026.924.2 → 2026.925.2

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -14,6 +14,9 @@ import {
   Edit,
   MapPin,
   Save,
+  UserX,
+  Truck,
+  StickyNote,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
@@ -23,34 +26,116 @@ import {
   CardHeader,
   CardTitle,
   Button,
-  Badge,
-  Progress,
   Input,
   Label,
+  Textarea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useDriver, useFleet } from '../hooks/useFleet';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
+import { EntityCombobox } from '../components/EntityCombobox';
+import {
+  useDriver,
+  useFleet,
+  useVehicle,
+  useVehicles,
+  toApiDriverStatus,
+  type UpdateDriverInput,
+} from '../hooks/useFleet';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatCurrency, formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
 import { DocumentsCard } from '../components/DocumentsCard';
+import { DRIVER_STATUS_LABELS } from '../constants';
+import type { DriverStatus } from '../types';
+
+const STATUS_SELECT_OPTIONS: Array<{ value: DriverStatus; label: string }> = (
+  Object.entries(DRIVER_STATUS_LABELS) as Array<[DriverStatus, string]>
+).map(([value, label]) => ({ value, label }));
+
+const toDateInput = (date: Date | undefined): string =>
+  date ? date.toISOString().slice(0, 10) : '';
+/** Noon UTC avoids the date shifting a day in either direction across timezones. */
+const fromDateInput = (value: string): string | undefined =>
+  value ? `${value}T12:00:00.000Z` : undefined;
+
+interface DriverFormState {
+  employeeId: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  licenseNumber: string;
+  licenseClass: string;
+  licenseExpiry: string;
+  status: DriverStatus;
+  vehicleId: string;
+  rating: string;
+  notes: string;
+  hireDate: string;
+  baseSalary: string;
+  bonusYtd: string;
+  payCurrency: string;
+  onLeaveUntil: string;
+}
+
+const emptyForm: DriverFormState = {
+  employeeId: '',
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+  licenseNumber: '',
+  licenseClass: '',
+  licenseExpiry: '',
+  status: 'available',
+  vehicleId: '',
+  rating: '',
+  notes: '',
+  hireDate: '',
+  baseSalary: '',
+  bonusYtd: '',
+  payCurrency: '',
+  onLeaveUntil: '',
+};
 
 function NewDriverForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
   const { createDriver, updateDriver } = useFleet();
-  const { driver } = useDriver(editId);
+  const { driver, refetch: refetchDriver } = useDriver(editId);
   const isEditing = !!editId;
-  const [form, setForm] = useState({
-    employeeId: '',
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    licenseNumber: '',
-  });
+  const [form, setForm] = useState<DriverFormState>(emptyForm);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [dismissOpen, setDismissOpen] = useState(false);
+  const [dismissReason, setDismissReason] = useState('');
+  const [dismissing, setDismissing] = useState(false);
+  const [dismissError, setDismissError] = useState<string | null>(null);
+
+  const [vehicleSearch, setVehicleSearch] = useState('');
+  const debouncedVehicleSearch = useDebouncedValue(vehicleSearch);
+  const { vehicles, isLoading: vehiclesLoading } = useVehicles({
+    limit: 20,
+    search: debouncedVehicleSearch || undefined,
+  });
+  const { vehicle: selectedVehicle, isLoading: selectedVehicleLoading } = useVehicle(
+    form.vehicleId || undefined
+  );
 
   useEffect(() => {
     if (!editId || !driver) return;
@@ -62,39 +147,59 @@ function NewDriverForm({ editId }: { editId?: string }) {
       email: driver.email || '',
       phone: driver.phone || '',
       licenseNumber: driver.licenseNumber || '',
+      licenseClass: driver.licenseType || '',
+      licenseExpiry: toDateInput(driver.licenseExpiry),
+      status: driver.status,
+      vehicleId: driver.assignedVehicle || '',
+      rating: driver.rating ? String(driver.rating) : '',
+      notes: driver.notes || '',
+      hireDate: toDateInput(driver.hireDate),
+      baseSalary: driver.baseSalary !== undefined ? String(driver.baseSalary) : '',
+      bonusYtd: driver.bonusYtd !== undefined ? String(driver.bonusYtd) : '',
+      payCurrency: driver.payCurrency || '',
+      onLeaveUntil: toDateInput(driver.onLeaveUntil),
     });
   }, [editId, driver]);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
 
+  const buildPayload = (): UpdateDriverInput => ({
+    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,
+    licenseClass: form.licenseClass.trim() || undefined,
+    licenseExpiry: fromDateInput(form.licenseExpiry),
+    status: toApiDriverStatus(form.status),
+    vehicleId: form.vehicleId || undefined,
+    rating: form.rating ? Number(form.rating) : undefined,
+    notes: form.notes.trim() || undefined,
+    hireDate: fromDateInput(form.hireDate),
+    baseSalary: form.baseSalary ? Number(form.baseSalary) : undefined,
+    bonusYtd: form.bonusYtd ? Number(form.bonusYtd) : undefined,
+    payCurrency: form.payCurrency.trim() || undefined,
+  });
+
   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;
     }
+    if (!form.phone.trim()) {
+      setError('Phone is required so this driver can be reached.');
+      return;
+    }
     setSubmitting(true);
     setError(null);
     try {
       if (editId) {
-        const updated = await updateDriver(editId, {
-          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,
-        });
+        const updated = await updateDriver(editId, buildPayload());
         navigate?.(joinPath(basePath, `fleet/drivers/${updated.id}`));
       } else {
-        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,
-        });
+        const created = await createDriver(buildPayload());
         navigate?.(joinPath(basePath, `fleet/drivers/${created.id}`));
       }
     } catch (err) {
@@ -104,6 +209,31 @@ function NewDriverForm({ editId }: { editId?: string }) {
     }
   };
 
+  const handleDismiss = async () => {
+    if (!editId || !dismissReason.trim()) {
+      setDismissError('A reason is required to dismiss a driver.');
+      return;
+    }
+    setDismissing(true);
+    setDismissError(null);
+    try {
+      await updateDriver(editId, {
+        ...buildPayload(),
+        terminatedAt: new Date().toISOString(),
+        terminationReason: dismissReason.trim(),
+      });
+      setDismissOpen(false);
+      await refetchDriver();
+      navigate?.(joinPath(basePath, `fleet/drivers/${editId}`));
+    } catch (err) {
+      setDismissError(err instanceof Error ? err.message : 'Failed to dismiss driver.');
+    } finally {
+      setDismissing(false);
+    }
+  };
+
+  const alreadyDismissed = isEditing && Boolean(driver?.terminatedAt);
+
   return (
     <PageLayout
       title={isEditing ? 'Edit Driver' : 'Add Driver'}
@@ -128,11 +258,21 @@ function NewDriverForm({ editId }: { editId?: string }) {
       }
     >
       <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.
+        Add a driver so they can be assigned to orders and routes. An employee ID, name and phone
+        get them on the roster — add licensing, a vehicle and HR details to keep the record
+        complete.
       </PagePurpose>
 
-      <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+      {alreadyDismissed && driver?.terminatedAt && (
+        <div className="rounded-card border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text">
+          <p className="font-medium">
+            This driver was dismissed on {formatDate(driver.terminatedAt, 'full')}.
+          </p>
+          {driver.terminationReason && <p className="mt-1">Reason: {driver.terminationReason}</p>}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
         <FormError message={error} />
         <EmphasisPanel>
           <h2 className="text-base font-semibold text-text-primary mb-4">Driver Details</h2>
@@ -187,14 +327,39 @@ function NewDriverForm({ editId }: { editId?: string }) {
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="phone">Phone</Label>
+                <Label htmlFor="phone">
+                  Phone <span className="text-status-error-text">*</span>
+                </Label>
                 <Input
                   id="phone"
                   value={form.phone}
                   onChange={(e) => setForm((prev) => ({ ...prev, phone: e.target.value }))}
                   placeholder="+1-555-0100"
+                  required
                 />
               </div>
+              <div className="space-y-2">
+                <Label htmlFor="status">Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, status: value as DriverStatus }))
+                  }
+                >
+                  <SelectTrigger id="status">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {STATUS_SELECT_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="licenseNumber">License Number</Label>
                 <Input
@@ -204,10 +369,218 @@ function NewDriverForm({ editId }: { editId?: string }) {
                   placeholder="D1234567"
                 />
               </div>
+              <div className="space-y-2">
+                <Label htmlFor="licenseClass">License Class</Label>
+                <Input
+                  id="licenseClass"
+                  value={form.licenseClass}
+                  onChange={(e) => setForm((prev) => ({ ...prev, licenseClass: e.target.value }))}
+                  placeholder="Class A"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="licenseExpiry">License Expiry</Label>
+                <Input
+                  id="licenseExpiry"
+                  type="date"
+                  value={form.licenseExpiry}
+                  onChange={(e) => setForm((prev) => ({ ...prev, licenseExpiry: e.target.value }))}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="vehicleSearch">Search vehicles</Label>
+                <Input
+                  id="vehicleSearch"
+                  value={vehicleSearch}
+                  onChange={(e) => setVehicleSearch(e.target.value)}
+                  placeholder="Vehicle number or type"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="vehicle">Assigned Vehicle</Label>
+                <EntityCombobox
+                  id="vehicle"
+                  value={form.vehicleId}
+                  onChange={(value) => setForm((prev) => ({ ...prev, vehicleId: value }))}
+                  options={vehicles}
+                  loading={vehiclesLoading}
+                  getId={(vehicle) => vehicle.id}
+                  getLabel={(vehicle) => `${vehicle.vehicleNumber} (${vehicle.type})`}
+                  renderOption={(vehicle) => (
+                    <>
+                      <Truck size={14} className="mr-2 inline text-text-secondary" />
+                      {vehicle.vehicleNumber} ({vehicle.type})
+                    </>
+                  )}
+                  selectedOption={selectedVehicle}
+                  selectedLoading={selectedVehicleLoading}
+                  placeholder="Unassigned"
+                  emptyText="No vehicles match that search."
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="rating">Rating (0–5)</Label>
+                <Input
+                  id="rating"
+                  type="number"
+                  min={0}
+                  max={5}
+                  step={0.1}
+                  value={form.rating}
+                  onChange={(e) => setForm((prev) => ({ ...prev, rating: e.target.value }))}
+                  placeholder="4.8"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="hireDate">Hire Date</Label>
+                <Input
+                  id="hireDate"
+                  type="date"
+                  value={form.hireDate}
+                  onChange={(e) => setForm((prev) => ({ ...prev, hireDate: e.target.value }))}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="onLeaveUntil">On Leave Until</Label>
+                <Input
+                  id="onLeaveUntil"
+                  type="date"
+                  value={form.onLeaveUntil}
+                  onChange={(e) => setForm((prev) => ({ ...prev, onLeaveUntil: e.target.value }))}
+                />
+              </div>
             </div>
           </div>
         </EmphasisPanel>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <DollarSign size={18} /> Compensation
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="baseSalary">Base Salary (annual)</Label>
+                <Input
+                  id="baseSalary"
+                  type="number"
+                  min={0}
+                  step={0.01}
+                  value={form.baseSalary}
+                  onChange={(e) => setForm((prev) => ({ ...prev, baseSalary: e.target.value }))}
+                  placeholder="55000"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="bonusYtd">Bonus (YTD)</Label>
+                <Input
+                  id="bonusYtd"
+                  type="number"
+                  min={0}
+                  step={0.01}
+                  value={form.bonusYtd}
+                  onChange={(e) => setForm((prev) => ({ ...prev, bonusYtd: e.target.value }))}
+                  placeholder="1200"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="payCurrency">Currency</Label>
+                <Input
+                  id="payCurrency"
+                  value={form.payCurrency}
+                  onChange={(e) => setForm((prev) => ({ ...prev, payCurrency: e.target.value }))}
+                  placeholder="USD"
+                  maxLength={10}
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <StickyNote size={18} /> HR Notes
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Textarea
+              value={form.notes}
+              onChange={(e) => setForm((prev) => ({ ...prev, notes: e.target.value }))}
+              placeholder="Performance notes, disciplinary history, anything worth tracking for this driver..."
+              rows={4}
+            />
+          </CardContent>
+        </Card>
+
+        {isEditing && !alreadyDismissed && (
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <UserX size={18} /> Dismiss Driver
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Dismissing a driver marks them as no longer employed. Their delivery and route
+                history stays visible; they can no longer be assigned new work. This cannot be
+                undone from here.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDismissOpen(true)}
+              >
+                <UserX size={16} /> Dismiss this driver
+              </Button>
+            </CardContent>
+          </Card>
+        )}
       </form>
+
+      <ResponsiveDialog open={dismissOpen} onOpenChange={setDismissOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Dismiss this driver?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This records the driver as dismissed and requires a reason. It cannot be undone from
+              here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="space-y-2 px-1">
+            <Label htmlFor="dismissReason">
+              Reason <span className="text-status-error-text">*</span>
+            </Label>
+            <Textarea
+              id="dismissReason"
+              value={dismissReason}
+              onChange={(e) => setDismissReason(e.target.value)}
+              placeholder="e.g. Repeated policy violations, voluntary resignation, performance..."
+              rows={3}
+            />
+            <FormError message={dismissError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDismissOpen(false)} disabled={dismissing}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDismiss}
+              disabled={dismissing}
+            >
+              {dismissing ? 'Dismissing...' : 'Confirm dismissal'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }
@@ -217,6 +590,7 @@ export default function DriverDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { driver, isLoading, error, refetch } = useDriver(driverId);
+  const { vehicle: assignedVehicle } = useVehicle(driver?.assignedVehicle);
 
   const goBack = () => navigate?.(joinPath(basePath, 'fleet/drivers'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
@@ -226,6 +600,13 @@ export default function DriverDetailsPage() {
   if (isLoading) return <LoadingState message="Loading driver details..." />;
   if (error || !driver) return <ErrorState title="Driver not found" onRetry={refetch} />;
 
+  const isDismissed = Boolean(driver.terminatedAt);
+  const onLeaveUntil =
+    driver.onLeaveUntil && driver.onLeaveUntil.getTime() > new Date().getTime()
+      ? driver.onLeaveUntil
+      : undefined;
+  const hasCompensation = driver.baseSalary !== undefined || driver.bonusYtd !== undefined;
+
   return (
     <PageLayout
       title={driver.fullName}
@@ -244,20 +625,34 @@ export default function DriverDetailsPage() {
         </div>
       }
       headerContent={
-        <div className="flex items-center gap-4">
+        <div className="flex flex-wrap items-center gap-4">
           <StatusBadge status={driver.status} type="driver" />
-          <div className="flex items-center gap-1">
-            <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>
+          {isDismissed && (
+            <StatusBadge
+              status="dismissed"
+              label="Dismissed"
+              customColors={{ bg: 'bg-status-error-bg-subtle', text: 'text-status-error-text' }}
+            />
+          )}
+          {onLeaveUntil && !isDismissed && (
+            <StatusBadge
+              status="on_leave"
+              label={`On leave until ${formatDate(onLeaveUntil, 'short')}`}
+              customColors={{ bg: 'bg-status-warning-bg-subtle', text: 'text-status-warning-text' }}
+            />
+          )}
+          {driver.rating > 0 && (
+            <div className="flex items-center gap-1">
+              <Star size={16} className="text-status-warning-text fill-current" />
+              <span className="font-medium">{driver.rating.toFixed(1)}</span>
+            </div>
+          )}
         </div>
       }
     >
       <PagePurpose icon={<Users size={18} />}>
-        A driver&apos;s full profile — performance ratings, working hours, documents, earnings and
-        live location. Use it to confirm someone is road-ready and compliant before assigning them
-        an order or route.
+        A driver&apos;s full profile — licensing, assigned vehicle, documents and HR record. Use it
+        to confirm someone is road-ready and compliant before assigning them an order or route.
       </PagePurpose>
 
       <NextSteps
@@ -280,75 +675,24 @@ export default function DriverDetailsPage() {
           {
             id: 'edit',
             label: 'Update driver record',
-            description: 'Refresh documents, shift or compliance details.',
+            description: 'Refresh documents, license or HR details.',
             icon: <Edit size={16} />,
             onClick: () => {},
           },
         ]}
       />
 
+      {isDismissed && (
+        <div className="rounded-card border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text">
+          <p className="font-medium">
+            Dismissed {driver.terminatedAt && formatDate(driver.terminatedAt, 'full')}
+          </p>
+          {driver.terminationReason && <p className="mt-1">Reason: {driver.terminationReason}</p>}
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
-          {/* Ratings — the page's single emphasis zone */}
-          <EmphasisPanel>
-            <h2 className="flex items-center gap-2 text-base font-semibold text-text-primary mb-4">
-              <Star size={18} /> Ratings
-            </h2>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-              {[
-                { label: 'Punctuality', value: driver.ratings.punctuality },
-                { label: 'Communication', value: driver.ratings.communication },
-                { label: 'Handling', value: driver.ratings.carefulHandling },
-                { label: 'Professionalism', value: driver.ratings.professionalism },
-                { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
-              ].map((rating) => (
-                <div key={rating.label}>
-                  <p className="text-sm text-text-secondary">{rating.label}</p>
-                  <div className="flex items-center gap-2 mt-1">
-                    <Progress value={rating.value * 20} className="flex-1 h-2" />
-                    <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </EmphasisPanel>
-
-          {/* Working Hours */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Clock size={18} /> Working Hours
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <div>
-                  <p className="text-sm text-text-secondary">Shift</p>
-                  <p className="font-medium">
-                    {driver.workingHours.startTime} - {driver.workingHours.endTime}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Working Days</p>
-                  <p className="font-medium">{driver.workingHours.workingDays.length} days/week</p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Hours Today</p>
-                  <p className="font-medium">
-                    {driver.workingHours.currentHoursToday}h / {driver.workingHours.maxHoursPerDay}h
-                  </p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">Hours This Week</p>
-                  <p className="font-medium">
-                    {driver.workingHours.currentHoursThisWeek}h /{' '}
-                    {driver.workingHours.maxHoursPerWeek}h
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
           {/* License — real driver credential fields */}
           <Card>
             <CardHeader>
@@ -372,60 +716,95 @@ export default function DriverDetailsPage() {
             </CardContent>
           </Card>
 
+          {driver.notes && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <StickyNote size={18} /> HR Notes
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm whitespace-pre-wrap">{driver.notes}</p>
+              </CardContent>
+            </Card>
+          )}
+
           {/* Documents — real files via wspace-files-svc */}
           <DocumentsCard entityType="driver" entityId={driver.id} />
         </div>
 
         <div className="space-y-6">
-          {/* Stats */}
+          {/* Assigned Vehicle */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Truck size={18} /> Assigned Vehicle
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {driver.assignedVehicle ? (
+                assignedVehicle ? (
+                  <button
+                    type="button"
+                    className="text-sm font-medium text-primary hover:underline"
+                    onClick={() => goTo(`fleet/vehicles/${assignedVehicle.id}`)}
+                  >
+                    {assignedVehicle.vehicleNumber} ({assignedVehicle.type})
+                  </button>
+                ) : (
+                  <p className="text-sm text-text-secondary">Loading…</p>
+                )
+              ) : (
+                <p className="text-sm text-text-secondary">No vehicle assigned</p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Record */}
           <Card>
             <CardHeader>
-              <CardTitle>Statistics</CardTitle>
+              <CardTitle>Record</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-text-secondary">Total Deliveries</p>
-                <p className="text-2xl font-bold">{driver.completedOrders.toLocaleString()}</p>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Today's Deliveries</p>
-                <p className="text-2xl font-bold">{driver.todayOrders}</p>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Join Date</p>
-                <p className="font-medium">{formatDate(driver.joinDate)}</p>
+                <p className="text-sm text-text-secondary">Hire Date</p>
+                <p className="font-medium">
+                  {driver.hireDate ? formatDate(driver.hireDate) : 'Not recorded'}
+                </p>
               </div>
             </CardContent>
           </Card>
 
-          {/* Earnings */}
+          {/* Compensation — real fields, no fabricated earnings breakdown */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <DollarSign size={18} /> Earnings
+                <DollarSign size={18} /> Compensation
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
-              <div>
-                <p className="text-sm text-text-secondary">Total Earnings</p>
-                <p className="text-2xl font-bold">
-                  {formatCurrency(driver.earnings.totalEarnings)}
-                </p>
-              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                <div>
-                  <p className="text-sm text-text-secondary">This Week</p>
-                  <p className="font-medium">{formatCurrency(driver.earnings.weeklyEarnings)}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-text-secondary">This Month</p>
-                  <p className="font-medium">{formatCurrency(driver.earnings.monthlyEarnings)}</p>
-                </div>
-              </div>
-              <div>
-                <p className="text-sm text-text-secondary">Base Salary</p>
-                <p className="font-medium">{formatCurrency(driver.baseSalary)}/year</p>
-              </div>
+              {hasCompensation ? (
+                <>
+                  {driver.baseSalary !== undefined && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Base Salary</p>
+                      <p className="font-medium">
+                        {formatCurrency(driver.baseSalary, driver.payCurrency || undefined)}/year
+                      </p>
+                    </div>
+                  )}
+                  {driver.bonusYtd !== undefined && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Bonus (YTD)</p>
+                      <p className="font-medium">
+                        {formatCurrency(driver.bonusYtd, driver.payCurrency || undefined)}
+                      </p>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <p className="text-sm text-text-secondary">Not recorded</p>
+              )}
             </CardContent>
           </Card>
 
@@ -447,25 +826,6 @@ export default function DriverDetailsPage() {
               </CardContent>
             </Card>
           )}
-
-          {/* Compliance */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Compliance Status</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-2">
-              {Object.entries(driver.compliance)
-                .filter(([k]) => k !== 'lastUpdate')
-                .map(([key, value]) => (
-                  <div key={key} className="flex items-center justify-between">
-                    <span className="text-sm capitalize">{key.replace(/([A-Z])/g, ' $1')}</span>
-                    <Badge variant={value ? 'default' : 'destructive'}>
-                      {value ? 'Compliant' : 'Non-compliant'}
-                    </Badge>
-                  </div>
-                ))}
-            </CardContent>
-          </Card>
         </div>
       </div>
     </PageLayout>