@burdenoff/microfe-movethewheels 2026.924.2 → 2026.925.2

package/src/movethewheels/pages/DriversPage.tsx

@@ -37,14 +37,17 @@ import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { formatDate } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
+import { DRIVER_STATUS_LABELS } from '../constants';
 import type { Driver, DriverStatus } from '../types';
 
+// Sourced from the same DRIVER_STATUS_LABELS map the roster table's
+// StatusBadge renders from, so this list can never drift from the table
+// again (BOFF-7909).
 const STATUS_OPTIONS: Array<{ value: DriverStatus | 'all'; label: string }> = [
   { value: 'all', label: 'All statuses' },
-  { value: 'available', label: 'Available' },
-  { value: 'busy', label: 'On delivery' },
-  { value: 'on_break', label: 'On break' },
-  { value: 'offline', label: 'Off duty' },
+  ...(Object.entries(DRIVER_STATUS_LABELS) as Array<[DriverStatus, string]>).map(
+    ([value, label]) => ({ value, label })
+  ),
 ];
 
 export default function DriversPage() {
@@ -74,8 +77,17 @@ export default function DriversPage() {
   // Exact ON_BREAK / OFF_DUTY / INACTIVE counts — fleetStats cannot split these.
   const { counts } = useDriverStatusCounts();
   // Drivers carry only `vehicleId`; the roster shows the fleet number, so the
-  // vehicle list is joined client-side into an id -> number lookup.
-  const { vehicles } = useVehicles({ limit: 100 });
+  // exact vehicles referenced on this page are looked up by id — this stays
+  // correct regardless of total fleet size (a flat top-N page would silently
+  // miss drivers assigned to a vehicle outside the first N, BOFF-7909).
+  const assignedVehicleIds = useMemo(
+    () =>
+      Array.from(
+        new Set(drivers.map((driver) => driver.assignedVehicle).filter(Boolean))
+      ) as string[],
+    [drivers]
+  );
+  const { vehicles } = useVehicles({ ids: assignedVehicleIds });
   const vehicleNumberById = useMemo(
     () => new Map(vehicles.map((vehicle) => [vehicle.id, vehicle.vehicleNumber])),
     [vehicles]
@@ -154,10 +166,10 @@ export default function DriversPage() {
       id: 'rating',
       header: 'Rating',
       cell: (row) =>
-        row.ratings.overall > 0 ? (
+        row.rating > 0 ? (
           <div className="flex items-center gap-1">
             <Star size={14} className="text-status-warning-text fill-current" />
-            <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
+            <span className="font-medium">{row.rating.toFixed(1)}</span>
           </div>
         ) : (
           <span className="text-sm text-text-secondary">Not rated</span>
@@ -181,10 +193,15 @@ export default function DriversPage() {
     },
     {
       id: 'joined',
-      header: 'Join Date',
-      accessorKey: 'joinDate',
+      header: 'Hire Date',
+      accessorKey: 'hireDate',
       sortable: true,
-      cell: (row) => formatDate(row.joinDate, 'short'),
+      cell: (row) =>
+        row.hireDate ? (
+          formatDate(row.hireDate, 'short')
+        ) : (
+          <span className="text-text-secondary">Not recorded</span>
+        ),
     },
   ];
 

package/src/movethewheels/pages/FleetPage.tsx

@@ -302,20 +302,17 @@ export default function FleetPage() {
                         </Avatar>
                         <div>
                           <p className="font-medium">{driver.fullName}</p>
-                          <p className="text-sm text-text-secondary">
-                            {driver.employeeId} - {driver.completedOrders}{' '}
-                            {t('movethewheels.fleet.drivers.deliveries', 'deliveries')}
-                          </p>
+                          <p className="text-sm text-text-secondary">{driver.employeeId}</p>
                         </div>
                       </div>
                       <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-status-warning-text fill-current" />
-                          <span className="text-sm font-medium">
-                            {driver.ratings.overall.toFixed(1)}
-                          </span>
-                        </div>
+                        {driver.rating > 0 && (
+                          <div className="mt-1 flex items-center gap-1 justify-end">
+                            <Star size={12} className="text-status-warning-text fill-current" />
+                            <span className="text-sm font-medium">{driver.rating.toFixed(1)}</span>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -23,6 +23,7 @@ import {
   ArrowRight,
   XCircle,
   UserCheck,
+  Search,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, PriorityBadge, PaymentStatusBadge } from '../components/StatusBadge';
@@ -79,10 +80,13 @@ const STATUS_LABELS: Record<OrderStatus, string> = {
   in_transit: 'In Transit',
   out_for_delivery: 'Out for Delivery',
   delivered: 'Delivered',
+  returned: 'Returned',
   cancelled: 'Cancelled',
   failed: 'Failed',
 };
 
+const TERMINAL_STATUSES = new Set<OrderStatus>(['delivered', 'returned', 'cancelled', 'failed']);
+
 function nextStatus(current: OrderStatus): OrderStatus | null {
   const index = STATUS_FLOW.indexOf(current);
   if (index === -1 || index >= STATUS_FLOW.length - 1) return null;
@@ -149,18 +153,31 @@ export default function OrderDetailsPage() {
   }, [selectedVehicle, vehicles, vehiclesLoading]);
 
   const handleAssign = async () => {
-    if (!orderId || (!selectedVehicle && !selectedDriver)) {
-      setActionError('Pick a vehicle and/or a driver to assign.');
+    if (!orderId || !order) {
+      setActionError('This order is no longer available. Refresh and try again.');
+      return;
+    }
+
+    const vehicleId = selectedVehicle || order.vehicleId;
+    const driverId = selectedDriver || order.driverId;
+    if (!vehicleId || !driverId) {
+      setActionError('Select both a compatible vehicle and driver before dispatching.');
       return;
     }
+
+    const wasFullyAssigned = Boolean(order.vehicleId && order.driverId);
     setAssigning(true);
     setActionError(null);
     try {
-      await updateOrder(orderId, {
-        vehicleId: selectedVehicle || undefined,
-        driverId: selectedDriver || undefined,
-      });
-      notify('Assignment updated.');
+      await updateOrder(orderId, { vehicleId, driverId });
+      if (!wasFullyAssigned && order.status === 'confirmed') {
+        await updateOrderStatus(orderId, 'assigned');
+      }
+      notify(
+        !wasFullyAssigned && order.status === 'confirmed'
+          ? 'Fleet assigned and order advanced to Assigned.'
+          : 'Assignment updated.'
+      );
       setSelectedVehicle('');
       setSelectedDriver('');
       refetch();
@@ -172,7 +189,13 @@ export default function OrderDetailsPage() {
   };
 
   const handleStatusChange = async (status: OrderStatus, successMessage: string) => {
-    if (!orderId) return;
+    if (!orderId || !order) return;
+    if (status === 'assigned' && (!order.vehicleId || !order.driverId)) {
+      setActionError('Assign both a compatible vehicle and driver before advancing to Assigned.');
+      return;
+    }
+    if (TERMINAL_STATUSES.has(order.status)) return;
+
     setAdvancing(true);
     setActionError(null);
     try {
@@ -555,13 +578,17 @@ export default function OrderDetailsPage() {
 
                 <div className="space-y-3">
                   <div className="space-y-1.5">
-                    <Label htmlFor="assign-fleet-search">Search fleet</Label>
-                    <Input
-                      id="assign-fleet-search"
-                      value={fleetSearch}
-                      onChange={(event) => setFleetSearch(event.target.value)}
-                      placeholder="Vehicle number, driver name or ID"
-                    />
+                    <Label htmlFor="assign-fleet-search">Search vehicles &amp; drivers</Label>
+                    <div className="relative">
+                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
+                      <Input
+                        id="assign-fleet-search"
+                        value={fleetSearch}
+                        onChange={(event) => setFleetSearch(event.target.value)}
+                        placeholder="Vehicle number, driver name or employee ID"
+                        className="pl-9"
+                      />
+                    </div>
                   </div>
                   <div className="space-y-1.5">
                     <Label htmlFor="assign-vehicle">Vehicle</Label>
@@ -635,24 +662,34 @@ export default function OrderDetailsPage() {
                   {(() => {
                     const upcoming = nextStatus(order.status);
                     if (!upcoming) return null;
+                    const missingDispatchPair =
+                      upcoming === 'assigned' && (!order.vehicleId || !order.driverId);
                     return (
-                      <Button
-                        variant="outline"
-                        className="w-full"
-                        onClick={() =>
-                          handleStatusChange(
-                            upcoming,
-                            `Order advanced to ${STATUS_LABELS[upcoming]}.`
-                          )
-                        }
-                        disabled={advancing}
-                      >
-                        <ArrowRight size={16} />
-                        {advancing ? 'Updating…' : `Advance to ${STATUS_LABELS[upcoming]}`}
-                      </Button>
+                      <>
+                        <Button
+                          variant="outline"
+                          className="w-full"
+                          onClick={() =>
+                            handleStatusChange(
+                              upcoming,
+                              `Order advanced to ${STATUS_LABELS[upcoming]}.`
+                            )
+                          }
+                          disabled={advancing || missingDispatchPair}
+                        >
+                          <ArrowRight size={16} />
+                          {advancing ? 'Updating…' : `Advance to ${STATUS_LABELS[upcoming]}`}
+                        </Button>
+                        {missingDispatchPair && (
+                          <p className="text-xs text-text-secondary">
+                            Assign both a compatible vehicle and driver before dispatching this
+                            order.
+                          </p>
+                        )}
+                      </>
                     );
                   })()}
-                  {order.status !== 'cancelled' && order.status !== 'delivered' && (
+                  {order.status !== 'cancelled' && !TERMINAL_STATUSES.has(order.status) && (
                     <Button
                       variant="outline"
                       className="w-full text-status-error-text"

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -195,6 +195,7 @@ export default function OrdersListPage() {
       label: t('movethewheels.orders.status.outForDelivery', 'Out for Delivery'),
     },
     { value: 'delivered', label: t('movethewheels.orders.status.delivered', 'Delivered') },
+    { value: 'returned', label: t('movethewheels.orders.status.returned', 'Returned') },
     { value: 'cancelled', label: t('movethewheels.orders.status.cancelled', 'Cancelled') },
     { value: 'failed', label: t('movethewheels.orders.status.failed', 'Failed') },
   ];

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -18,6 +18,7 @@ import {
   ArrowUp,
   ArrowDown,
   Fuel,
+  Search,
 } from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge } from '../components/StatusBadge';
@@ -276,13 +277,20 @@ function NewRouteForm({ editId }: { editId?: string }) {
               </div>
             </div>
             <div className="space-y-2">
-              <Label htmlFor="fleet-search">Search fleet</Label>
-              <Input
-                id="fleet-search"
-                value={fleetSearch}
-                onChange={(e) => setFleetSearch(e.target.value)}
-                placeholder="Vehicle number, driver name or ID"
-              />
+              <Label htmlFor="fleet-search">Search vehicles &amp; drivers</Label>
+              <div className="relative">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" />
+                <Input
+                  id="fleet-search"
+                  value={fleetSearch}
+                  onChange={(e) => setFleetSearch(e.target.value)}
+                  placeholder="Vehicle number, driver name or employee ID"
+                  className="pl-9"
+                />
+              </div>
+              <p className="text-xs text-text-secondary">
+                Narrows both pickers below as you type — up to 20 matches at a time.
+              </p>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="space-y-2">

package/src/movethewheels/pages/TrackingPage.tsx

@@ -60,7 +60,20 @@ export default function TrackingPage() {
       ? { ...destCoord, label: `Delivery · ${order.deliveryAddress.city || 'Destination'}` }
       : null;
 
-    const trail: TrackPoint[] = order.timeline
+    const trackingTrail: TrackPoint[] = (tracking?.locationHistory ?? [])
+      .map((location): TrackPoint | null => {
+        const coord = firstRealLatLng(location);
+        return coord
+          ? {
+              lat: coord.lat,
+              lng: coord.lng,
+              timestamp: location.timestamp?.toISOString() ?? new Date().toISOString(),
+            }
+          : null;
+      })
+      .filter((point): point is TrackPoint => point !== null);
+
+    const statusTrail: TrackPoint[] = order.timeline
       .map((event): TrackPoint | null => {
         const coord = event.location ? firstRealLatLng(event.location) : null;
         return coord
@@ -69,6 +82,7 @@ export default function TrackingPage() {
       })
       .filter((point): point is TrackPoint => point !== null);
 
+    const trail = trackingTrail.length > 0 ? trackingTrail : statusTrail;
     const currentCoord = tracking ? firstRealLatLng(tracking.currentLocation) : null;
     const current: TrackEndpoint | null = currentCoord
       ? {
@@ -163,7 +177,7 @@ export default function TrackingPage() {
       )}
 
       {/* Tracking Results */}
-      {order && tracking && (
+      {order && (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           {/* Main Tracking Info */}
           <div className="lg:col-span-2 space-y-6">
@@ -181,14 +195,14 @@ export default function TrackingPage() {
                   <p className="text-sm text-text-secondary">
                     {t('movethewheels.tracking.details.trackingNumber', 'Tracking Number')}
                   </p>
-                  <p className="font-mono font-medium">{order.trackingNumber}</p>
+                  <p className="font-mono font-medium">{order.trackingNumber || '—'}</p>
                 </div>
                 <div>
                   <p className="text-sm text-text-secondary">
                     {t('movethewheels.tracking.details.estimatedDelivery', 'Estimated Delivery')}
                   </p>
                   <p className="font-medium">
-                    {tracking.estimatedArrival
+                    {tracking?.estimatedArrival
                       ? formatDate(tracking.estimatedArrival, 'full')
                       : order.scheduledDelivery
                         ? formatDate(order.scheduledDelivery, 'full')
@@ -207,9 +221,21 @@ export default function TrackingPage() {
                   <p className="text-sm text-text-secondary">
                     {t('movethewheels.tracking.details.lastUpdated', 'Last Updated')}
                   </p>
-                  <p className="font-medium">{formatDate(tracking.lastUpdated, 'relative')}</p>
+                  <p className="font-medium">
+                    {tracking
+                      ? formatDate(tracking.lastUpdated, 'relative')
+                      : t('movethewheels.tracking.details.noUpdates', 'No tracking updates yet')}
+                  </p>
                 </div>
               </div>
+              {!tracking && (
+                <p className="mt-4 rounded-card border border-border-subtle bg-bg-sunken p-3 text-sm text-text-secondary">
+                  {t(
+                    'movethewheels.tracking.details.noUpdatesDescription',
+                    'The delivery was found, but no tracking updates have been recorded yet.'
+                  )}
+                </p>
+              )}
             </EmphasisPanel>
 
             {/* Route Map — real origin/destination + tracking trail + live position */}
@@ -356,7 +382,7 @@ export default function TrackingPage() {
             </Card>
 
             {/* Alerts */}
-            {tracking.alerts && tracking.alerts.length > 0 && (
+            {tracking?.alerts && tracking.alerts.length > 0 && (
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
@@ -430,14 +456,18 @@ export default function TrackingPage() {
                     </p>
                   </div>
                 )}
-                <p className="text-sm">
-                  {tracking.currentLocation.address ||
-                    t('movethewheels.tracking.location.updating', 'Location updating...')}
-                </p>
-                <p className="text-xs text-text-secondary mt-1">
-                  {t('movethewheels.tracking.location.updated', 'Updated')}{' '}
-                  {formatDate(tracking.currentLocation.timestamp || new Date(), 'relative')}
-                </p>
+                {tracking && (
+                  <>
+                    <p className="text-sm">
+                      {tracking.currentLocation.address ||
+                        t('movethewheels.tracking.location.updating', 'Location updating...')}
+                    </p>
+                    <p className="text-xs text-text-secondary mt-1">
+                      {t('movethewheels.tracking.location.updated', 'Updated')}{' '}
+                      {formatDate(tracking.currentLocation.timestamp || new Date(), 'relative')}
+                    </p>
+                  </>
+                )}
               </CardContent>
             </Card>
 

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -25,7 +25,8 @@ import {
   AvatarFallback,
 } from '../components/ui';
 import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
-import { useVehicle, useVehicleDrivers, useFleet } from '../hooks/useFleet';
+import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../hooks/useFleet';
+import type { VehicleStatus } from '../types';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -47,6 +48,19 @@ const VEHICLE_TYPE_OPTIONS = [
   { value: 'DRONE', label: 'Drone' },
 ];
 
+const VEHICLE_STATUS_OPTIONS: Array<{ value: VehicleStatus; label: string }> = [
+  { value: 'available', label: 'Available' },
+  { value: 'assigned', label: 'In Transit' },
+  { value: 'maintenance', label: 'Maintenance' },
+  { value: 'out_of_service', label: 'Out of Service' },
+];
+
+const OWNERSHIP_TYPE_OPTIONS = [
+  { value: 'owned', label: 'Owned' },
+  { value: 'leased', label: 'Leased' },
+  { value: 'rented', label: 'Rented' },
+];
+
 function NewVehicleForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
   const { createVehicle, updateVehicle } = useFleet();
@@ -58,6 +72,11 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     make: '',
     model: '',
     licensePlate: '',
+    ownershipType: '',
+    year: '',
+    status: 'available' as VehicleStatus,
+    fuelType: '',
+    fuelEfficiencyLPer100Km: '',
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -70,6 +89,14 @@ function NewVehicleForm({ editId }: { editId?: string }) {
         make: vehicle.make ?? '',
         model: vehicle.model ?? '',
         licensePlate: vehicle.licensePlate ?? '',
+        ownershipType: vehicle.ownershipType ?? '',
+        year: vehicle.year ? String(vehicle.year) : '',
+        status: vehicle.status,
+        fuelType: vehicle.fuelType ?? '',
+        fuelEfficiencyLPer100Km:
+          vehicle.fuelEfficiencyLPer100Km !== undefined
+            ? String(vehicle.fuelEfficiencyLPer100Km)
+            : '',
       });
     }
   }, [editId, vehicle]);
@@ -85,23 +112,25 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     setSubmitting(true);
     setError(null);
     try {
+      const payload = {
+        vehicleNumber: form.vehicleNumber.trim(),
+        type: form.type,
+        make: form.make.trim() || undefined,
+        model: form.model.trim() || undefined,
+        licensePlate: form.licensePlate.trim() || undefined,
+        ownershipType: form.ownershipType || undefined,
+        year: form.year ? Number(form.year) : undefined,
+        status: toApiVehicleStatus(form.status),
+        fuelType: form.fuelType || undefined,
+        fuelEfficiencyLPer100Km: form.fuelEfficiencyLPer100Km
+          ? Number(form.fuelEfficiencyLPer100Km)
+          : undefined,
+      };
       if (editId) {
-        const updated = await updateVehicle(editId, {
-          vehicleNumber: form.vehicleNumber.trim(),
-          type: form.type,
-          make: form.make.trim() || undefined,
-          model: form.model.trim() || undefined,
-          licensePlate: form.licensePlate.trim() || undefined,
-        });
+        const updated = await updateVehicle(editId, payload);
         navigate?.(joinPath(basePath, `fleet/vehicles/${updated.id}`));
       } else {
-        const created = await createVehicle({
-          vehicleNumber: form.vehicleNumber.trim(),
-          type: form.type,
-          make: form.make.trim() || undefined,
-          model: form.model.trim() || undefined,
-          licensePlate: form.licensePlate.trim() || undefined,
-        });
+        const created = await createVehicle(payload);
         navigate?.(joinPath(basePath, `fleet/vehicles/${created.id}`));
       }
     } catch (err) {
@@ -207,6 +236,83 @@ function NewVehicleForm({ editId }: { editId?: string }) {
                 />
               </div>
             </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="ownershipType">Ownership</Label>
+                <Select
+                  value={form.ownershipType || undefined}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, ownershipType: value }))}
+                >
+                  <SelectTrigger id="ownershipType">
+                    <SelectValue placeholder="Select ownership" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {OWNERSHIP_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="year">Year</Label>
+                <Input
+                  id="year"
+                  type="number"
+                  min={1980}
+                  max={new Date().getFullYear() + 1}
+                  value={form.year}
+                  onChange={(e) => setForm((prev) => ({ ...prev, year: e.target.value }))}
+                  placeholder={String(new Date().getFullYear())}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="vehicleStatus">Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) =>
+                    setForm((prev) => ({ ...prev, status: value as VehicleStatus }))
+                  }
+                >
+                  <SelectTrigger id="vehicleStatus">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {VEHICLE_STATUS_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-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="fuelType">Fuel Type</Label>
+                <Input
+                  id="fuelType"
+                  value={form.fuelType}
+                  onChange={(e) => setForm((prev) => ({ ...prev, fuelType: e.target.value }))}
+                  placeholder="Diesel"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="fuelEfficiency">Fuel Efficiency (L/100km)</Label>
+                <Input
+                  id="fuelEfficiency"
+                  type="number"
+                  min={0}
+                  step={0.1}
+                  value={form.fuelEfficiencyLPer100Km}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, fuelEfficiencyLPer100Km: e.target.value }))
+                  }
+                  placeholder="12.5"
+                />
+              </div>
+            </div>
           </div>
         </EmphasisPanel>
       </form>
@@ -394,6 +500,22 @@ export default function VehicleDetailsPage() {
                   </p>
                 </div>
               )}
+              {(vehicle.fuelType || vehicle.fuelEfficiencyLPer100Km !== undefined) && (
+                <div className="grid grid-cols-2 gap-4">
+                  {vehicle.fuelType && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Fuel Type</p>
+                      <p className="font-medium">{vehicle.fuelType}</p>
+                    </div>
+                  )}
+                  {vehicle.fuelEfficiencyLPer100Km !== undefined && (
+                    <div>
+                      <p className="text-sm text-text-secondary">Efficiency</p>
+                      <p className="font-medium">{vehicle.fuelEfficiencyLPer100Km} L/100km</p>
+                    </div>
+                  )}
+                </div>
+              )}
             </CardContent>
           </Card>