diff --git a/frontend/src/pages/FleetPage.tsx b/frontend/src/pages/FleetPage.tsx
new file mode 100644
index 0000000..f11f0d1
--- /dev/null
+++ b/frontend/src/pages/FleetPage.tsx
@@ -0,0 +1,54 @@
+import { useSearchParams } from 'react-router-dom';
+import { Car, Truck } from 'lucide-react';
+import { DriverList } from '@/pages/DriverList';
+import { VehicleList } from '@/pages/VehicleList';
+
+type FleetTab = 'drivers' | 'vehicles';
+
+const TABS: { id: FleetTab; label: string; icon: typeof Car }[] = [
+ { id: 'drivers', label: 'Drivers', icon: Car },
+ { id: 'vehicles', label: 'Vehicles', icon: Truck },
+];
+
+export function FleetPage() {
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const rawTab = searchParams.get('tab');
+ const activeTab: FleetTab = rawTab === 'vehicles' ? 'vehicles' : 'drivers';
+
+ const handleTabChange = (tab: FleetTab) => {
+ setSearchParams({ tab }, { replace: true });
+ };
+
+ return (
+
+
+
Fleet Management
+
+
+ {/* Tab Bar */}
+
+
+ {TABS.map((tab) => (
+
+ ))}
+
+
+
+ {/* Tab Content */}
+ {activeTab === 'drivers' &&
}
+ {activeTab === 'vehicles' &&
}
+
+ );
+}
diff --git a/frontend/src/pages/VehicleList.tsx b/frontend/src/pages/VehicleList.tsx
index 16fbb84..cd7bdc5 100644
--- a/frontend/src/pages/VehicleList.tsx
+++ b/frontend/src/pages/VehicleList.tsx
@@ -37,7 +37,7 @@ const VEHICLE_STATUS = [
{ value: 'RESERVED', label: 'Reserved', color: 'yellow' },
];
-export function VehicleList() {
+export function VehicleList({ embedded = false }: { embedded?: boolean }) {
const queryClient = useQueryClient();
const [showForm, setShowForm] = useState(false);
const [editingVehicle, setEditingVehicle] = useState
(null);
@@ -189,16 +189,28 @@ export function VehicleList() {
return (
-
-
Vehicle Management
-
-
+ {!embedded ? (
+
+
Vehicle Management
+
+
+ ) : (
+
+
+
+ )}
{/* Stats Summary */}