@burdenoff/microfe-movethewheels 2026.925.2 → 2026.925.3

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>

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 { VEHICLE_STATUS_LABELS } from '../constants';
 import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -48,12 +70,9 @@ 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 OWNERSHIP_TYPE_OPTIONS = [
   { value: 'owned', label: 'Owned' },
@@ -63,7 +82,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({
@@ -77,9 +96,15 @@ function NewVehicleForm({ editId }: { editId?: string }) {
     status: 'available' as VehicleStatus,
     fuelType: '',
     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 +122,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 +153,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 +176,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'}
@@ -313,9 +364,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 +491,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 +568,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>

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -11,24 +11,44 @@ import {
   CircleCheck,
   Route as RouteIcon,
   Wrench,
+  Filter,
 } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
 import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, VehicleTypeBadge } from '../components/StatusBadge';
-import { Progress } from '../components/ui';
+import {
+  Progress,
+  Card,
+  CardContent,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Button,
+} from '../components/ui';
 import { CTAOverflowMenu, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { useVehicles, useFleetStats } from '../hooks/useFleet';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { joinPath } from '../utils/navigation';
-import type { Vehicle } from '../types';
+import { VEHICLE_STATUS_LABELS } from '../constants';
+import type { Vehicle, VehicleStatus } from '../types';
+
+const STATUS_OPTIONS: Array<{ value: VehicleStatus | 'all'; label: string }> = [
+  { value: 'all', label: 'All statuses' },
+  ...(Object.entries(VEHICLE_STATUS_LABELS) as Array<[VehicleStatus, string]>).map(
+    ([value, label]) => ({ value, label })
+  ),
+];
 
 export default function VehiclesPage() {
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<VehicleStatus | 'all'>('all');
   const debouncedSearch = useDebouncedValue(search);
   const {
     vehicles,
@@ -41,7 +61,9 @@ export default function VehiclesPage() {
     limit: pageSize,
     offset: page * pageSize,
     search: debouncedSearch || undefined,
+    status: statusFilter === 'all' ? undefined : statusFilter,
   });
+  const filtersActive = statusFilter !== 'all' || search.length > 0;
   // Fleet totals + tiles from the live aggregate, not the current page.
   const { stats } = useFleetStats();
   const totalVehicles = stats.totalVehicles;
@@ -74,7 +96,7 @@ export default function VehiclesPage() {
           <p className="font-medium">
             {row.make} {row.model}
           </p>
-          <p className="text-sm text-text-secondary">{row.year}</p>
+          <p className="text-sm text-text-secondary">{row.year ?? '—'}</p>
         </div>
       ),
     },
@@ -178,6 +200,49 @@ export default function VehiclesPage() {
         </MetricGrid>
       </div>
 
+      {/* 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 VehicleStatus | '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={vehicles}