diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7df9ec4..62beece 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -15,8 +15,7 @@ import { Dashboard } from '@/pages/Dashboard'; import { CommandCenter } from '@/pages/CommandCenter'; import { VIPList } from '@/pages/VipList'; import { VIPSchedule } from '@/pages/VIPSchedule'; -import { DriverList } from '@/pages/DriverList'; -import { VehicleList } from '@/pages/VehicleList'; +import { FleetPage } from '@/pages/FleetPage'; import { EventList } from '@/pages/EventList'; import { FlightList } from '@/pages/FlightList'; import { UserList } from '@/pages/UserList'; @@ -115,8 +114,9 @@ function App() { } /> } /> } /> - } /> - } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 5301e0b..91ad3ac 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -9,7 +9,6 @@ import { Plane, Users, Car, - Truck, Calendar, UserCog, LayoutDashboard, @@ -71,8 +70,7 @@ export function Layout({ children }: LayoutProps) { { name: 'My Profile', href: '/profile', icon: UserCog, driverOnly: true }, { name: 'War Room', href: '/command-center', icon: Radio, requireRead: 'ScheduleEvent' as const, coordinatorOnly: true }, { name: 'VIPs', href: '/vips', icon: Users, requireRead: 'VIP' as const, coordinatorOnly: true }, - { name: 'Drivers', href: '/drivers', icon: Car, requireRead: 'Driver' as const, coordinatorOnly: true }, - { name: 'Vehicles', href: '/vehicles', icon: Truck, requireRead: 'Vehicle' as const, coordinatorOnly: true }, + { name: 'Fleet', href: '/fleet', icon: Car, requireRead: 'Driver' as const, coordinatorOnly: true }, { name: 'Activities', href: '/events', icon: Calendar, requireRead: 'ScheduleEvent' as const, coordinatorOnly: true }, { name: 'Flights', href: '/flights', icon: Plane, requireRead: 'Flight' as const, coordinatorOnly: true }, ]; diff --git a/frontend/src/pages/CommandCenter.tsx b/frontend/src/pages/CommandCenter.tsx index 3550a86..fd543be 100644 --- a/frontend/src/pages/CommandCenter.tsx +++ b/frontend/src/pages/CommandCenter.tsx @@ -378,7 +378,7 @@ export function CommandCenter() { alerts.push({ type: 'warning', message: 'No vehicles available - all vehicles in use', - link: `/vehicles`, + link: `/fleet?tab=vehicles`, }); } @@ -902,7 +902,7 @@ export function CommandCenter() { Events @@ -916,7 +916,7 @@ export function CommandCenter() { VIPs diff --git a/frontend/src/pages/DriverList.tsx b/frontend/src/pages/DriverList.tsx index 525464f..bc19662 100644 --- a/frontend/src/pages/DriverList.tsx +++ b/frontend/src/pages/DriverList.tsx @@ -14,7 +14,7 @@ import { DriverChatModal } from '@/components/DriverChatModal'; import { DriverScheduleModal } from '@/components/DriverScheduleModal'; import { useUnreadCounts } from '@/hooks/useSignalMessages'; -export function DriverList() { +export function DriverList({ embedded = false }: { embedded?: boolean }) { const queryClient = useQueryClient(); const [showForm, setShowForm] = useState(false); const [editingDriver, setEditingDriver] = useState(null); @@ -234,17 +234,19 @@ export function DriverList() { if (isLoading) { return (
-
-

Drivers

- -
+ {!embedded && ( +
+

Drivers

+ +
+ )}
@@ -257,17 +259,30 @@ export function DriverList() { return (
-
-

Drivers

- -
+ {!embedded ? ( +
+

Drivers

+ +
+ ) : ( +
+ +
+ )} {/* Search and Filter Section */}
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 */}