@burdenoff/microfe-movethewheels 2026.925.2 → 2026.929.1

package/src/movethewheels/pages/DriversPage.tsx

@@ -141,7 +141,11 @@ export default function DriversPage() {
       cell: (row) => (
         <div className="text-sm">
           <p>{row.licenseType}</p>
-          <p className="text-text-secondary">Exp: {formatDate(row.licenseExpiry, 'short')}</p>
+          <p className="text-text-secondary">
+            {row.licenseExpiry
+              ? `Exp: ${formatDate(row.licenseExpiry, 'short')}`
+              : 'Expiry not recorded'}
+          </p>
         </div>
       ),
     },

package/src/movethewheels/pages/FleetPage.tsx

@@ -244,7 +244,8 @@ export default function FleetPage() {
                             <VehicleTypeBadge type={vehicle.type} size="sm" />
                           </div>
                           <p className="text-sm text-text-secondary">
-                            {vehicle.make} {vehicle.model} ({vehicle.year})
+                            {vehicle.make} {vehicle.model}
+                            {vehicle.year ? ` (${vehicle.year})` : ''}
                           </p>
                         </div>
                       </div>

package/src/movethewheels/pages/InventoryPage.tsx

@@ -53,7 +53,7 @@ interface StockRow {
   onHand: number;
   allocated: number;
   available: number;
-  reorderLevel: number;
+  reorderLevel?: number;
   stockState: 'out_of_stock' | 'low' | 'in_stock';
 }
 
@@ -140,10 +140,15 @@ export default function InventoryPage() {
       allocated: item.reservedQuantity,
       available: item.availableQuantity,
       reorderLevel: item.reorderLevel,
+      // Matches the backend's lowStock rule (inventory.service.ts): only
+      // flag "low" when a reorder point is actually configured — items with
+      // none set are never considered low stock, even at 0 available,
+      // otherwise this table disagreed with the dashboard's low-stock count
+      // for the same item (BOFF-7909 follow-up).
       stockState:
         item.quantity === 0
           ? 'out_of_stock'
-          : item.availableQuantity <= item.reorderLevel
+          : item.reorderLevel !== undefined && item.availableQuantity <= item.reorderLevel
             ? 'low'
             : 'in_stock',
     }));
@@ -196,7 +201,7 @@ export default function InventoryPage() {
       header: t('movethewheels.inventory.stock.reorderPoint', 'Reorder point'),
       accessorKey: 'reorderLevel',
       sortable: true,
-      cell: (row) => (row.reorderLevel > 0 ? row.reorderLevel.toLocaleString() : '—'),
+      cell: (row) => (row.reorderLevel !== undefined ? row.reorderLevel.toLocaleString() : '—'),
     },
     {
       id: 'state',
@@ -501,8 +506,12 @@ export default function InventoryPage() {
                         </p>
                       </div>
                       <div className="text-right">
-                        <Badge variant={warehouse.isActive ? 'default' : 'secondary'}>
-                          {warehouse.isActive
+                        <Badge
+                          variant={
+                            warehouse.status.toUpperCase() === 'ACTIVE' ? 'default' : 'secondary'
+                          }
+                        >
+                          {warehouse.status.toUpperCase() === 'ACTIVE'
                             ? t('movethewheels.inventory.warehouses.active', 'Active')
                             : t('movethewheels.inventory.warehouses.inactive', 'Inactive')}
                         </Badge>
@@ -512,7 +521,10 @@ export default function InventoryPage() {
                           </p>
                           <Progress
                             value={
-                              (warehouse.capacity.usedSpace / warehouse.capacity.totalSpace) * 100
+                              warehouse.capacity.totalSpace > 0
+                                ? (warehouse.capacity.usedSpace / warehouse.capacity.totalSpace) *
+                                  100
+                                : 0
                             }
                             className="w-24 h-2"
                           />

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -37,7 +37,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
 import { RouteMap, type RouteStop as MapRouteStop } from '../components/maps';
 import { firstRealLatLng } from '../utils/mapMarkers';
 import { EntityCombobox } from '../components/EntityCombobox';
@@ -425,7 +435,7 @@ export default function RouteDetailsPage() {
   const isEditRoute = useLocation().pathname.endsWith('/edit');
   const { basePath, navigate } = useMoveTheWheels();
   const { route, isLoading, error, refetch } = useRoute(routeId);
-  const { optimizeRoute, updateRoute } = useRoutes();
+  const { optimizeRoute, updateRoute, deleteRoute } = useRoutes();
   const suggestions = useAssignmentSuggestions(routeId);
   const { t: translate } = useI18n();
   const t = (key: string, fallback: string): string => {
@@ -435,10 +445,27 @@ export default function RouteDetailsPage() {
   const { message: notice, notify } = useNotice();
   const [optimizeError, setOptimizeError] = useState<string | null>(null);
   const [optimizing, setOptimizing] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   const goBack = () => navigate?.(joinPath(basePath, 'routes'));
   const goTo = (path: string) => navigate?.(joinPath(basePath, path));
 
+  const handleDelete = async () => {
+    if (!routeId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteRoute(routeId);
+      setDeleteOpen(false);
+      goBack();
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete route.');
+      setDeleting(false);
+    }
+  };
+
   const handleOptimize = async () => {
     if (!routeId) return;
     setOptimizing(true);
@@ -717,18 +744,6 @@ export default function RouteDetailsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
-              {route.startTime && (
-                <div>
-                  <p className="text-sm text-text-secondary">Started</p>
-                  <p>{formatDate(route.startTime, 'full')}</p>
-                </div>
-              )}
-              {route.endTime && (
-                <div>
-                  <p className="text-sm text-text-secondary">Completed</p>
-                  <p>{formatDate(route.endTime, 'full')}</p>
-                </div>
-              )}
               <div>
                 <p className="text-sm text-text-secondary">Created</p>
                 <p>{formatDate(route.createdAt, 'full')}</p>
@@ -736,28 +751,53 @@ export default function RouteDetailsPage() {
             </CardContent>
           </Card>
 
-          {route.trafficConditions.length > 0 && (
-            <Card>
-              <CardHeader>
-                <CardTitle>Traffic Conditions</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {route.trafficConditions.map((tc, i) => (
-                  <div
-                    key={i}
-                    className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-status-error-bg-subtle' : tc.condition === 'heavy' ? 'bg-status-warning-bg-subtle' : 'bg-status-warning-bg-subtle'}`}
-                  >
-                    <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
-                    <p className="text-xs text-text-secondary">
-                      {tc.location} - +{tc.delay} min delay
-                    </p>
-                  </div>
-                ))}
-              </CardContent>
-            </Card>
-          )}
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Route
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this route. It can no longer be dispatched. This cannot be undone from here.
+              </p>
+              <Button
+                variant="outline"
+                className="border-status-error-border text-status-error-text hover:bg-status-error-bg-subtle"
+                onClick={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this route
+              </Button>
+            </CardContent>
+          </Card>
         </div>
       </div>
+
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this route?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {route.name} and cannot be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete route'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }

package/src/movethewheels/pages/RoutesPage.tsx

@@ -3,11 +3,21 @@
  */
 
 import { useState } from 'react';
-import { Plus, RefreshCw, Navigation } from 'lucide-react';
+import { Plus, RefreshCw, Navigation, Filter } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge } from '../components/StatusBadge';
-import { Badge, Button } from '../components/ui';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
 import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useRoutes, useRouteStats } from '../hooks/useRoutes';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
@@ -17,17 +27,28 @@ import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
 import type { Route } from '../types';
 
+const STATUS_OPTIONS: Array<{ value: Route['status'] | 'all'; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'planned', label: 'Planned' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'cancelled', label: 'Cancelled' },
+];
+
 export default function RoutesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<Route['status'] | 'all'>('all');
   const debouncedSearch = useDebouncedValue(search);
   const { routes, totalRoutes, hasMore, isLoading, error, refetch } = useRoutes({
     limit: pageSize,
     offset: page * pageSize,
     search: debouncedSearch || undefined,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
+  const filtersActive = statusFilter !== 'all' || search.length > 0;
   // Bounded aggregate for the tiles + subtitle — not the truncated page.
   const { stats } = useRouteStats();
 
@@ -126,6 +147,49 @@ export default function RoutesPage() {
         </div>
       </EmphasisPanel>
 
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2">
+              <Filter size={16} className="text-text-secondary" />
+              <span className="text-sm font-medium">Filters:</span>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(value) => {
+                setStatusFilter(value as Route['status'] | 'all');
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {filtersActive && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setStatusFilter('all');
+                  setSearch('');
+                  setPage(0);
+                }}
+              >
+                Clear filters
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
       <DataTable
         columns={columns}
         data={routes}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -4,7 +4,18 @@
 
 import { useEffect, useState } from 'react';
 import { useParams, useLocation } from 'react-router';
-import { Truck, ArrowLeft, MapPin, Fuel, UserRound, Edit, Save, Mail, Phone } from 'lucide-react';
+import {
+  Truck,
+  ArrowLeft,
+  MapPin,
+  Fuel,
+  UserRound,
+  Edit,
+  Save,
+  Mail,
+  Phone,
+  Trash2,
+} from 'lucide-react';
 import { PageLayout, LoadingState, ErrorState } from '../components/PageLayout';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
 import {
@@ -24,9 +35,20 @@ import {
   Avatar,
   AvatarFallback,
 } from '../components/ui';
-import { EmphasisPanel, NextSteps, PagePurpose } from '@burdenoff/fe-libs/ui';
+import {
+  EmphasisPanel,
+  NextSteps,
+  PagePurpose,
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+} from '@burdenoff/fe-libs/ui';
 import { useVehicle, useVehicleDrivers, useFleet, toApiVehicleStatus } from '../hooks/useFleet';
-import type { VehicleStatus } from '../types';
+import type { VehicleFuelType, VehicleStatus } from '../types';
+import { VEHICLE_STATUS_LABELS } from '../constants';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -48,11 +70,16 @@ 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 VEHICLE_STATUS_OPTIONS: Array<{ value: VehicleStatus; label: string }> = (
+  Object.entries(VEHICLE_STATUS_LABELS) as Array<[VehicleStatus, string]>
+).map(([value, label]) => ({ value, label }));
+
+const FUEL_TYPE_OPTIONS: Array<{ value: VehicleFuelType; label: string }> = [
+  { value: 'DIESEL', label: 'Diesel' },
+  { value: 'PETROL', label: 'Petrol' },
+  { value: 'CNG', label: 'CNG' },
+  { value: 'ELECTRIC', label: 'Electric' },
+  { value: 'HYBRID', label: 'Hybrid' },
 ];
 
 const OWNERSHIP_TYPE_OPTIONS = [
@@ -63,7 +90,7 @@ const OWNERSHIP_TYPE_OPTIONS = [
 
 function NewVehicleForm({ editId }: { editId?: string }) {
   const { basePath, navigate } = useMoveTheWheels();
-  const { createVehicle, updateVehicle } = useFleet();
+  const { createVehicle, updateVehicle, deleteVehicle } = useFleet();
   const { vehicle } = useVehicle(editId);
   const isEditing = !!editId;
   const [form, setForm] = useState({
@@ -75,11 +102,17 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     ownershipType: '',
     year: '',
     status: 'available' as VehicleStatus,
-    fuelType: '',
+    fuelType: '' as VehicleFuelType | '',
     fuelEfficiencyLPer100Km: '',
+    capacityWeight: '',
+    capacityVolume: '',
+    capacityPallets: '',
   });
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   useEffect(() => {
     if (editId && vehicle) {
@@ -97,6 +130,9 @@ function NewVehicleForm({ editId }: { editId?: string }) {
           vehicle.fuelEfficiencyLPer100Km !== undefined
             ? String(vehicle.fuelEfficiencyLPer100Km)
             : '',
+        capacityWeight: vehicle.capacity.weight ? String(vehicle.capacity.weight) : '',
+        capacityVolume: vehicle.capacity.volume ? String(vehicle.capacity.volume) : '',
+        capacityPallets: vehicle.capacity.pallets ? String(vehicle.capacity.pallets) : '',
       });
     }
   }, [editId, vehicle]);
@@ -125,6 +161,14 @@ function NewVehicleForm({ editId }: { editId?: string }) {
         fuelEfficiencyLPer100Km: form.fuelEfficiencyLPer100Km
           ? Number(form.fuelEfficiencyLPer100Km)
           : undefined,
+        capacity:
+          form.capacityWeight || form.capacityVolume || form.capacityPallets
+            ? {
+                weight: form.capacityWeight ? Number(form.capacityWeight) : undefined,
+                volume: form.capacityVolume ? Number(form.capacityVolume) : undefined,
+                pallets: form.capacityPallets ? Number(form.capacityPallets) : undefined,
+              }
+            : undefined,
       };
       if (editId) {
         const updated = await updateVehicle(editId, payload);
@@ -140,6 +184,21 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     }
   };
 
+  const handleDelete = async () => {
+    if (!editId) return;
+    setDeleting(true);
+    setDeleteError(null);
+    try {
+      await deleteVehicle(editId);
+      setDeleteOpen(false);
+      navigate?.(joinPath(basePath, 'fleet/vehicles'));
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete vehicle.');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
   return (
     <PageLayout
       title={isEditing ? 'Edit Vehicle' : 'Add Vehicle'}
@@ -291,12 +350,26 @@ function NewVehicleForm({ editId }: { editId?: string }) {
             <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"
-                />
+                <Select
+                  value={form.fuelType || undefined}
+                  onValueChange={(value) => {
+                    const fuelType = FUEL_TYPE_OPTIONS.find(
+                      (option) => option.value === value
+                    )?.value;
+                    setForm((prev) => ({ ...prev, fuelType: fuelType ?? '' }));
+                  }}
+                >
+                  <SelectTrigger id="fuelType">
+                    <SelectValue placeholder="Select fuel type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {FUEL_TYPE_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
               <div className="space-y-2">
                 <Label htmlFor="fuelEfficiency">Fuel Efficiency (L/100km)</Label>
@@ -313,9 +386,98 @@ 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="capacityWeight">Capacity — Weight (kg)</Label>
+                <Input
+                  id="capacityWeight"
+                  type="number"
+                  min={0}
+                  value={form.capacityWeight}
+                  onChange={(e) => setForm((prev) => ({ ...prev, capacityWeight: e.target.value }))}
+                  placeholder="5000"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="capacityVolume">Capacity — Volume (m³)</Label>
+                <Input
+                  id="capacityVolume"
+                  type="number"
+                  min={0}
+                  step={0.1}
+                  value={form.capacityVolume}
+                  onChange={(e) => setForm((prev) => ({ ...prev, capacityVolume: e.target.value }))}
+                  placeholder="18"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="capacityPallets">Capacity — Pallets</Label>
+                <Input
+                  id="capacityPallets"
+                  type="number"
+                  min={0}
+                  value={form.capacityPallets}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, capacityPallets: e.target.value }))
+                  }
+                  placeholder="12"
+                />
+              </div>
+            </div>
           </div>
         </EmphasisPanel>
+
+        {isEditing && (
+          <Card className="border-status-error-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-status-error-text">
+                <Trash2 size={18} /> Delete Vehicle
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-3 text-sm text-text-secondary">
+                Removes this vehicle from the active fleet. It can no longer be assigned to drivers,
+                orders, or routes. 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={() => setDeleteOpen(true)}
+              >
+                <Trash2 size={16} /> Delete this vehicle
+              </Button>
+            </CardContent>
+          </Card>
+        )}
       </form>
+
+      <ResponsiveDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <ResponsiveDialogContent>
+          <ResponsiveDialogHeader>
+            <ResponsiveDialogTitle>Delete this vehicle?</ResponsiveDialogTitle>
+            <ResponsiveDialogDescription>
+              This removes {form.vehicleNumber || 'this vehicle'} from the active fleet. It cannot
+              be undone from here.
+            </ResponsiveDialogDescription>
+          </ResponsiveDialogHeader>
+          <div className="px-1">
+            <FormError message={deleteError} />
+          </div>
+          <ResponsiveDialogFooter>
+            <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+              Cancel
+            </Button>
+            <Button
+              className="bg-status-error-text text-text-inverse hover:opacity-90"
+              onClick={handleDelete}
+              disabled={deleting}
+            >
+              {deleting ? 'Deleting...' : 'Delete vehicle'}
+            </Button>
+          </ResponsiveDialogFooter>
+        </ResponsiveDialogContent>
+      </ResponsiveDialog>
     </PageLayout>
   );
 }
@@ -351,7 +513,7 @@ export default function VehicleDetailsPage() {
   return (
     <PageLayout
       title={vehicle.vehicleNumber}
-      subtitle={`${vehicle.make} ${vehicle.model} (${vehicle.year})`}
+      subtitle={`${vehicle.make} ${vehicle.model}${vehicle.year ? ` (${vehicle.year})` : ''}`}
       icon={<Truck size={24} />}
       headerActions={
         <div className="flex gap-2">
@@ -428,7 +590,7 @@ export default function VehicleDetailsPage() {
               </div>
               <div>
                 <p className="text-sm text-text-secondary">Year</p>
-                <p className="font-medium">{vehicle.year}</p>
+                <p className="font-medium">{vehicle.year ?? '—'}</p>
               </div>
               <div>
                 <p className="text-sm text-text-secondary">License Plate</p>
@@ -450,15 +612,13 @@ export default function VehicleDetailsPage() {
                 <div>
                   <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">
-                    {vehicle.capacity.weight}
-                    <span className="text-sm font-normal"> kg</span>
+                    {vehicle.capacity.weight !== undefined ? `${vehicle.capacity.weight} kg` : '—'}
                   </p>
                 </div>
                 <div>
                   <p className="text-sm text-text-secondary">Volume</p>
                   <p className="text-2xl font-bold">
-                    {vehicle.capacity.volume}
-                    <span className="text-sm font-normal"> m³</span>
+                    {vehicle.capacity.volume !== undefined ? `${vehicle.capacity.volume} m³` : '—'}
                   </p>
                 </div>
                 {vehicle.capacity.pallets && (
@@ -601,7 +761,9 @@ export default function VehicleDetailsPage() {
                   {vehicle.currentLocation.address || 'Location updating...'}
                 </p>
                 <p className="text-xs text-text-secondary mt-1">
-                  Updated {formatDate(vehicle.currentLocation.timestamp || new Date(), 'relative')}
+                  {vehicle.currentLocation.timestamp
+                    ? `Updated ${formatDate(vehicle.currentLocation.timestamp, 'relative')}`
+                    : 'Update time not recorded'}
                 </p>
               </CardContent>
             </Card>