complete overall implementation.

package.json

@@ -17,10 +17,12 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.14.1",
-    "recharts": "^3.8.1"
+    "recharts": "^3.8.1",
+    "socket.io-client": "^4.8.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@types/google.maps": "^3.64.0",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

src/App.tsx

@@ -33,6 +33,9 @@ import {
 
 import { isTokenExpired, logout } from './utils/auth';
 
+// Normalise any role string to lowercase_underscore for comparison
+const normaliseRole = (r: string) => r.toLowerCase().replace(/\s+/g, '_');
+
 // --- ROLE-BASED ACCESS CONTROL ---
 const RoleProtectedRoute: React.FC<{ 
   children: React.ReactNode, 
@@ -44,11 +47,13 @@ const RoleProtectedRoute: React.FC<{
   if (!isAuthenticated) return <Navigate to="/login" replace />;
   
   const userRoles = Array.isArray(user?.roles) ? user.roles : [];
-  const hasAccess = allowedRoles.some(role => userRoles.includes(role)) || userRoles.includes('CURESELECT_ADMIN');
+  const hasAccess = allowedRoles.some(allowed =>
+    userRoles.some((r: string) => normaliseRole(r) === normaliseRole(allowed))
+  ) || userRoles.some((r: string) => normaliseRole(r) === 'cureselect_admin');
   
   if (!hasAccess) {
-    // Redirect to their respective "home" if they don't have access
-    if (userRoles.includes('FLEET_OPERATOR')) return <Navigate to="/fleet-operator" replace />;
+    if (userRoles.some((r: string) => normaliseRole(r) === 'fleet_operator'))
+      return <Navigate to="/fleet-operator" replace />;
     return <Navigate to="/" replace />;
   }
   
@@ -111,6 +116,7 @@ function AppContent() {
   */
 
   const isLoginPage = location.pathname.startsWith('/login') || location.pathname === '/fleet-login' || location.pathname === '/launcher';
+  const isFleetPage = location.pathname.startsWith('/fleet-operator');
 
   const isAuthenticated = localStorage.getItem('teleems_auth') === 'true';
   const user = JSON.parse(localStorage.getItem('teleems_user') || '{}');
@@ -141,13 +147,14 @@ function AppContent() {
       </ErrorBoundary>
       <main className="main-content">
         <div className="scanline" />
-        <TopBar />
+        {!isFleetPage && <TopBar />}
         <div style={{ flex: 1, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column' }}>
           <ErrorBoundary>
             <Routes>
               <Route path="/" element={
                 isAuthenticated ? (
-                  user?.roles?.includes('FLEET_OPERATOR') && !user?.roles?.includes('CURESELECT_ADMIN') 
+                  user?.roles?.some((r: string) => normaliseRole(r) === 'fleet_operator') &&
+                  !user?.roles?.some((r: string) => normaliseRole(r) === 'cureselect_admin')
                   ? <Navigate to="/fleet-operator" replace /> 
                   : <Dashboard />
                 ) : (

src/api/fleet.ts

@@ -5,6 +5,14 @@ export const fleetApi = {
     return apiClient.post('/v1/fleet/stations', stationData, { token });
   },
 
+  updateStation: async (stationId: string, stationData: any, token: string) => {
+    return apiClient.patch(`/v1/fleet/stations/${stationId}`, stationData, { token });
+  },
+
+  getStationDetails: async (stationId: string, token: string) => {
+    return apiClient.get(`/v1/fleet/stations/${stationId}`, { token });
+  },
+
   getStations: async (token: string, organisationId?: string) => {
     const url = organisationId 
       ? `/v1/fleet/stations?organisationId=${organisationId}`
@@ -13,12 +21,17 @@ export const fleetApi = {
     return apiClient.get(url, { token });
   },
 
+  getStationVehicles: async (token: string, stationId: string) => {
+    return apiClient.get(`/v1/fleet/vehicles?station_id=${stationId}`, { token });
+  },
+
   createVehicle: async (vehicleData: any, token: string) => {
     return apiClient.post('/v1/fleet/vehicles', vehicleData, { token });
   },
 
-  getVehicles: async (token: string, orgId: string) => {
-    return apiClient.get(`/v1/fleet/vehicles?org_id=${orgId}`, { token });
+  getVehicles: async (token: string, orgId?: string) => {
+    const url = orgId ? `/v1/fleet/vehicles?org_id=${orgId}` : `/v1/fleet/vehicles`;
+    return apiClient.get(url, { token });
   },
 
   updateVehicleDetails: async (vehicleId: string, vehicleData: any, token: string) => {
@@ -29,8 +42,13 @@ export const fleetApi = {
     return apiClient.post('/v1/fleet/staff', staffData, { token });
   },
 
-  getStaff: async (token: string, orgId: string) => {
-    return apiClient.get(`/v1/fleet/staff?organisationId=${orgId}`, { token });
+  getStaff: async (token: string, orgId?: string) => {
+    const url = orgId ? `/v1/fleet/staff?organisationId=${orgId}` : `/v1/fleet/staff`;
+    return apiClient.get(url, { token });
+  },
+
+  getRoster: async (token: string) => {
+    return apiClient.get('/v1/fleet/roster', { token });
   },
 
   createRoster: async (rosterData: any, token: string) => {
@@ -43,5 +61,43 @@ export const fleetApi = {
 
   getInventoryMaster: async (token: string) => {
     return apiClient.get('/v1/fleet/inventory/master', { token });
+  },
+
+  createInventoryMaster: async (payload: any[], token: string) => {
+    return apiClient.post('/v1/fleet/inventory/master', payload, { token });
+  },
+
+  updateInventoryMaster: async (itemId: string, payload: any, token: string) => {
+    return apiClient.patch(`/v1/fleet/inventory/master/${itemId}`, payload, { token });
+  },
+
+  restockInventory: async (payload: any[], token: string) => {
+    return apiClient.post('/v1/fleet/inventory/warehouse', payload, { token });
+  },
+
+  getInventoryMetadata: async (token: string, category?: string) => {
+    const url = category ? `/v1/fleet/inventory/metadata?category=${category}` : '/v1/fleet/inventory/metadata';
+    return apiClient.get(url, { token });
+  },
+
+  getWarehouseStock: async (token: string) => {
+    return apiClient.get('/v1/fleet/inventory/warehouse', { token });
+  },
+
+  assignToVehicle: async (vehicleId: string, payload: any, token: string) => {
+    return apiClient.post(`/v1/fleet/vehicles/${vehicleId}/inventory/bulk`, payload, { token });
+  },
+
+  getPendingRestockRequests: async (token: string) => {
+    return apiClient.get('/v1/fleet/inventory/restock-requests?status=PENDING', { token });
+  },
+
+  getRestockRequests: async (token: string, status?: string) => {
+    const url = status ? `/v1/fleet/inventory/restock-requests?status=${status}` : '/v1/fleet/inventory/restock-requests';
+    return apiClient.get(url, { token });
+  },
+
+  updateRestockRequestStatus: async (requestId: string, status: string, token: string) => {
+    return apiClient.patch(`/v1/fleet/inventory/restock-requests/${requestId}/status`, { status }, { token });
   }
 };

src/components/PerspectiveSwitcher.tsx

@@ -46,7 +46,7 @@ export const PerspectiveSwitcher: React.FC<{ currentRole: string; onSwitch: (rol
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const currentPerspective = perspectives.find(p => p.id === currentRole) || perspectives[0];
+  const currentPerspective = perspectives.find(p => p.id.toLowerCase() === currentRole.toLowerCase()) || perspectives[0];
   const Icon = currentPerspective.icon;
 
   useEffect(() => {
@@ -158,7 +158,7 @@ export const PerspectiveSwitcher: React.FC<{ currentRole: string; onSwitch: (rol
                 </div>
                 {items.map((p) => {
                   const ItemIcon = p.icon;
-                  const isActive = p.id === currentRole;
+                  const isActive = p.id.toLowerCase() === currentRole.toLowerCase();
                   return (
                     <button
                       key={p.id}

src/components/Sidebar.tsx

@@ -1,11 +1,13 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import {
   LogOut,
   Zap,
   ChevronDown,
   ChevronRight,
-  AlertCircle
+  AlertCircle,
+  MoreVertical,
+  Monitor
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { PerspectiveSwitcher } from './PerspectiveSwitcher';
@@ -16,6 +18,8 @@ import { logout } from '../utils/auth';
 export const Sidebar: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const isFleetPage = location.pathname.startsWith('/fleet-operator');
 
   // Safely parse user data
   const user = useMemo(() => {
@@ -24,8 +28,9 @@ export const Sidebar: React.FC = () => {
       if (!stored || stored === 'undefined' || stored === 'null') return { roles: [] };
       const parsed = JSON.parse(stored);
       if (parsed && typeof parsed === 'object') {
+        // Normalise roles to lowercase_underscore so "Fleet Operator" === "FLEET_OPERATOR"
         parsed.roles = Array.isArray(parsed.roles)
-          ? parsed.roles.map((r: any) => String(r).toUpperCase()) 
+          ? parsed.roles.map((r: any) => String(r).toLowerCase().replace(/\s+/g, '_'))
           : [];
         return parsed;
       }
@@ -41,25 +46,79 @@ export const Sidebar: React.FC = () => {
   };
 
   const handleRoleSwitch = (role: string) => {
-    const updatedUser = { ...user, roles: [role.toUpperCase()] };
+    // Preserve CURESELECT_ADMIN so the admin doesn't lose access to the perspective switcher when switching roles
+    const originalStored = localStorage.getItem('teleems_user');
+    let originalRoles: string[] = [];
+    try {
+      if (originalStored) {
+        const parsed = JSON.parse(originalStored);
+        originalRoles = Array.isArray(parsed?.roles) ? parsed.roles : [];
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    const hasAdmin = originalRoles.some((r: string) => {
+      const normalized = r.toLowerCase().replace(/\s+/g, '_');
+      return normalized === 'cureselect_admin' || normalized === 'admin';
+    });
+
+    let newRoles = [role.toUpperCase()];
+    if (hasAdmin && role.toUpperCase() !== 'CURESELECT_ADMIN') {
+      newRoles.push('CURESELECT_ADMIN');
+    }
+
+    const updatedUser = { ...user, roles: newRoles };
     localStorage.setItem('teleems_user', JSON.stringify(updatedUser));
     window.location.reload();
   };
 
-  const currentRole = user.roles?.[0] || 'CURESELECT_ADMIN';
-  const displayName = String(user.username || (currentRole === 'CURESELECT_ADMIN' ? 'CureSelect Admin' : 'Admin User'));
+  const currentRole = user.roles?.[0] || 'cureselect_admin';
+  const displayName = String(user.name || user.username || (currentRole === 'cureselect_admin' ? 'CureSelect Admin' : 'Fleet Operator'));
   const displayId = user.id ? `#${String(user.id).substring(0, 6)}` : '#789022';
-  const initials = currentRole === 'CURESELECT_ADMIN' ? 'CA' : (displayName.substring(0, 2).toUpperCase() || 'AU');
+  const initials = (displayName.split(' ').map((n: string) => n[0]).join('').toUpperCase().substring(0, 2)) || 'FO';
 
   const filteredNavItems = useMemo(() => {
-    const userRoles = Array.isArray(user.roles) ? user.roles : [];
-    const adminRoles = ['CURESELECT_ADMIN', 'ADMIN', 'SUPER_ADMIN', 'SUPERADMIN'];
-    const hasAdminRole = userRoles.some(r => adminRoles.includes(r));
+    if (isFleetPage) {
+      const fleetItems = NAVIGATION_CONFIG.filter(item => 
+        item.id.startsWith('fleet-') || item.path.includes('/fleet-operator')
+      );
+      
+      const isAdmin = user.roles?.some((r: string) => {
+        const norm = r.toLowerCase().replace(/\s+/g, '_');
+        return norm === 'cureselect_admin' || norm === 'admin';
+      });
+
+      if (isAdmin) {
+        return [
+          { 
+            id: 'launcher', 
+            label: 'Portal Hub', 
+            icon: Monitor, 
+            path: '/launcher', 
+            roles: ['CURESELECT_ADMIN'] 
+          },
+          ...fleetItems
+        ];
+      }
+      return fleetItems;
+    }
+
+    // The active perspective role being viewed (e.g. 'hospital_admin', 'fleet_operator', 'cureselect_admin')
+    const activeRole = currentRole.toLowerCase().replace(/\s+/g, '_');
+    
+    // Check if the active perspective is a platform-wide admin role
+    const isAdminPerspective = ['cureselect_admin', 'admin', 'super_admin', 'superadmin'].includes(activeRole);
 
     const filterItems = (items: NavItem[]): NavItem[] => {
       return items.filter(item => {
-        const hasItemRole = item.roles.some(role => userRoles.includes(role.toUpperCase()));
-        return hasAdminRole || hasItemRole;
+        // If viewing as CureSelect Admin, they can see everything (or we filter as admin)
+        if (isAdminPerspective) return true;
+        
+        // Otherwise, filter items so they must match the active role perspective
+        return item.roles.some(role =>
+          role.toLowerCase().replace(/\s+/g, '_') === activeRole
+        );
       }).map(item => ({
         ...item,
         subItems: item.subItems ? filterItems(item.subItems) : undefined
@@ -67,59 +126,111 @@ export const Sidebar: React.FC = () => {
     };
 
     return filterItems(NAVIGATION_CONFIG);
-  }, [user.roles]);
+  }, [currentRole, isFleetPage, user.roles]);
 
   const renderNavItem = (item: NavItem, isSubItem = false) => {
     const Icon = item.icon || AlertCircle;
-    const isActive = location.pathname === item.path || (item.path.includes('?') && location.pathname + location.search === item.path);
+    const currentUrl = location.pathname + location.search;
+
+    // Split path into pathname + search to handle query params correctly
+    const [itemPathname, itemSearch] = item.path.split('?');
+    const itemTo = itemSearch
+      ? { pathname: itemPathname, search: `?${itemSearch}` }
+      : item.path;
+
+    const isActive = currentUrl === item.path ||
+      (itemSearch ? location.pathname === itemPathname && location.search === `?${itemSearch}` : location.pathname === item.path);
     const hasSubItems = item.subItems && item.subItems.length > 0;
-    const isParentActive = hasSubItems && (isActive || item.subItems?.some(sub => location.pathname === sub.path.split('?')[0]));
+    const isParentActive = hasSubItems && (isActive || item.subItems?.some(sub => {
+      const [subPath, subSearch] = sub.path.split('?');
+      return subSearch
+        ? location.pathname === subPath && location.search === `?${subSearch}`
+        : location.pathname === subPath;
+    }));
 
     return (
       <div key={item.id} style={{ display: 'flex', flexDirection: 'column' }}>
         <NavLink
-          to={item.path}
-          style={({ isActive: linkActive }) => ({
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            padding: isSubItem ? '8px 20px 8px 48px' : '10px 20px',
-            textDecoration: 'none',
-            color: (linkActive || isActive) ? 'var(--accent-cyan)' : 'var(--text-secondary)',
-            borderLeft: !isSubItem && (linkActive || isActive) ? '3px solid var(--accent-cyan)' : '3px solid transparent',
-            background: (linkActive || isActive) ? 'rgba(59, 130, 246, 0.08)' : 'transparent',
-            transition: 'all 0.25s ease',
-            textShadow: (linkActive || isActive) ? '0 0 10px rgba(59, 130, 246, 0.4)' : 'none',
-            minWidth: 0,
-            position: 'relative'
-          })}
+          to={itemTo}
+          title={isSidebarCollapsed ? item.label : undefined}
+          style={({ isActive: linkActive }) => {
+            const active = itemSearch ? isActive : linkActive;
+            return {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: isSidebarCollapsed ? 'center' : 'flex-start',
+              gap: isSidebarCollapsed ? '0' : '12px',
+              padding: isSidebarCollapsed ? '12px' : isSubItem ? '10px 20px 10px 48px' : '12px 16px',
+              margin: isSidebarCollapsed ? '4px 12px' : '2px 12px',
+              borderRadius: '12px',
+              textDecoration: 'none',
+              color: active ? (isFleetPage ? '#06B6D4' : '#fff') : (isFleetPage ? '#475569' : '#94A3B8'),
+              background: active ? (isFleetPage ? 'linear-gradient(90deg, rgba(6, 182, 212, 0.08), rgba(59, 130, 246, 0.02))' : 'linear-gradient(90deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.05))') : 'transparent',
+              borderLeft: active && !isSubItem && !isSidebarCollapsed ? '3px solid #06B6D4' : '3px solid transparent',
+              boxShadow: active && isSidebarCollapsed ? '0 0 0 1px rgba(6,182,212,0.4)' : 'none',
+              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              position: 'relative',
+              overflow: 'hidden'
+            };
+          }}
+          className={(navData) => `nav-item-link ${(itemSearch ? isActive : navData.isActive) ? 'active' : ''}`}
         >
-          {!isSubItem && <Icon size={18} style={{ flexShrink: 0 }} />}
-          <span style={{ 
-            fontWeight: (isActive || isParentActive) ? 700 : 500, 
-            fontSize: isSubItem ? '0.8rem' : '0.875rem', 
-            whiteSpace: 'nowrap', 
-            overflow: 'hidden', 
-            textOverflow: 'ellipsis',
-            flex: 1
-          }}>
-            {item.label}
-          </span>
-          {hasSubItems && (
-            isParentActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
-          )}
+          {({ isActive: linkActive }) => {
+            const active = itemSearch ? isActive : linkActive;
+            return (
+              <>
+                <Icon size={20} color={active ? '#06B6D4' : 'currentColor'} style={{ flexShrink: 0 }} />
+                <AnimatePresence>
+                  {!isSidebarCollapsed && (
+                    <motion.div
+                      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+                      style={{ flex: 1, display: 'flex', alignItems: 'center', overflow: 'hidden' }}
+                    >
+                      <span style={{
+                        fontWeight: (active || isParentActive) ? 700 : 500,
+                        fontSize: isSubItem ? '0.8rem' : '0.875rem',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        letterSpacing: '0.01em',
+                        flex: 1
+                      }}>
+                        {item.label}
+                      </span>
+                      {hasSubItems && (
+                        <div style={{
+                          transform: isParentActive ? 'rotate(90deg)' : 'rotate(0deg)',
+                          transition: 'transform 0.3s ease',
+                          color: '#94A3B8'
+                        }}>
+                          <ChevronRight size={16} strokeWidth={2.5} />
+                        </div>
+                      )}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </>
+            );
+          }}
         </NavLink>
 
         <AnimatePresence>
-          {hasSubItems && isParentActive && (
+          {hasSubItems && isParentActive && !isSidebarCollapsed && (
             <motion.div
               initial={{ height: 0, opacity: 0 }}
               animate={{ height: 'auto', opacity: 1 }}
               exit={{ height: 0, opacity: 0 }}
               transition={{ duration: 0.3, ease: 'easeInOut' }}
-              style={{ overflow: 'hidden', background: 'rgba(255,255,255,0.02)' }}
+              style={{ overflow: 'hidden' }}
             >
-              {item.subItems?.map(sub => renderNavItem(sub, true))}
+              <div style={{
+                borderLeft: isFleetPage ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255,255,255,0.1)',
+                marginLeft: '28px',
+                paddingTop: '4px',
+                paddingBottom: '8px'
+              }}>
+                {item.subItems?.map(sub => renderNavItem(sub, true))}
+              </div>
             </motion.div>
           )}
         </AnimatePresence>
@@ -128,106 +239,153 @@ export const Sidebar: React.FC = () => {
   };
 
   return (
-    <aside className="glass" style={{
-      width: 'var(--sidebar-width)',
-      minWidth: 'var(--sidebar-width)',
-      flexBasis: 'var(--sidebar-width)',
-      flexShrink: 0,
-      height: '100vh',
-      display: 'flex',
-      flexDirection: 'column',
-      borderRight: '1px solid var(--card-border)',
-      background: 'var(--glass-bg)',
-      zIndex: 1100,
-      position: 'relative'
-    }}>
-      <div style={{
-        padding: '20px 20px',
-        borderBottom: '1px solid var(--card-border)',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '10px',
-        flexShrink: 0,
-      }}>
+    <>
+      <style>{`
+        .nav-item-link:not(.active):hover {
+          background: ${isFleetPage ? 'rgba(15, 23, 42, 0.03)' : 'rgba(255,255,255,0.03)'} !important;
+          color: ${isFleetPage ? '#0F172A' : '#fff'} !important;
+          transform: translateX(6px);
+        }
+      `}</style>
+      <motion.aside
+        initial={{ width: 280 }}
+        animate={{ width: isSidebarCollapsed ? 80 : 280 }}
+        transition={{ duration: 0.3, ease: 'easeInOut' }}
+        style={{
+          background: isFleetPage ? '#FFFFFF' : '#040B16',
+          borderRight: isFleetPage ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255,255,255,0.05)',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100vh',
+          zIndex: 1100,
+          position: 'relative',
+          fontFamily: "'Inter', sans-serif"
+        }}
+      >
+        {/* Brand Header */}
         <div style={{
-          width: '30px',
-          height: '30px',
-          background: 'var(--accent-cyan)',
-          borderRadius: '6px',
+          padding: isSidebarCollapsed ? '24px 16px' : '24px',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
-          boxShadow: '0 0 12px var(--accent-cyan)',
+          justifyContent: isSidebarCollapsed ? 'center' : 'space-between',
+          borderBottom: isFleetPage ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255,255,255,0.05)',
           flexShrink: 0,
         }}>
-          <Zap size={18} color="#000" />
-        </div>
-        <h2 style={{ fontSize: '1.1rem', fontWeight: 800, color: 'var(--accent-cyan)', margin: 0, letterSpacing: '-0.3px' }}>CureSelect</h2>
-      </div>
-
-      <nav style={{ flex: 1, padding: '12px 0', overflowY: 'auto', minHeight: 0 }} className="no-scrollbar">
-        {filteredNavItems.map(item => renderNavItem(item))}
-      </nav>
-
-      <div style={{
-        padding: '12px 16px',
-        borderTop: '1px solid var(--card-border)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '10px',
-        flexShrink: 0,
-      }}>
-        {/* Perspective Switcher */}
-        {(user.roles?.includes('CURESELECT_ADMIN') || user.roles?.includes('ADMIN')) && (
-          <PerspectiveSwitcher 
-            currentRole={currentRole} 
-            onSwitch={handleRoleSwitch} 
-          />
-        )}
-
-        {/* User row */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', minWidth: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px', minWidth: 0, overflow: 'hidden' }}>
-            <div style={{
-              width: '32px',
-              height: '32px',
-              borderRadius: '50%',
-              background: 'linear-gradient(135deg, var(--accent-cyan), var(--accent-green))',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: '0.75rem',
-              fontWeight: 700,
-              color: '#000',
-              flexShrink: 0,
-            }}>{initials}</div>
-            <div style={{ minWidth: 0, overflow: 'hidden' }}>
-              <div style={{ fontSize: '0.78rem', fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayName}</div>
-              <div style={{ fontSize: '0.62rem', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>ID: {displayId}</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <div
+              onClick={() => { if (isSidebarCollapsed) setIsSidebarCollapsed(false); }}
+              title={isSidebarCollapsed ? "Expand Menu" : undefined}
+              style={{
+                width: '36px',
+                height: '36px',
+                background: 'linear-gradient(135deg, #06B6D4, #3B82F6)',
+                borderRadius: '10px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxShadow: '0 0 20px rgba(6,182,212,0.4)',
+                flexShrink: 0,
+                cursor: isSidebarCollapsed ? 'pointer' : 'default'
+              }}
+            >
+              <Zap size={20} color="#FFFFFF" strokeWidth={2.5} />
             </div>
+            <AnimatePresence>
+              {!isSidebarCollapsed && (
+                <motion.div initial={{ opacity: 0, width: 0 }} animate={{ opacity: 1, width: 'auto' }} exit={{ opacity: 0, width: 0 }} style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}>
+                  <h2 style={{ fontSize: '1.25rem', fontWeight: 900, color: isFleetPage ? '#0F172A' : '#fff', margin: 0, letterSpacing: '-0.5px', lineHeight: 1.2 }}>CureSelect</h2>
+                  <span style={{ fontSize: '0.65rem', fontWeight: 700, color: '#06B6D4', textTransform: 'uppercase', letterSpacing: '2px' }}>Platform</span>
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
-          <button
-            onClick={handleLogout}
-            className="hover-glow"
-            style={{
-              background: 'rgba(239, 68, 68, 0.1)',
-              border: '1px solid rgba(239, 68, 68, 0.2)',
-              borderRadius: '8px',
-              padding: '7px',
-              color: 'var(--alert-red)',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'all 0.2s',
-              flexShrink: 0,
-            }}
-            title="Sign Out"
-          >
-            <LogOut size={15} />
-          </button>
+
+          {/* Minimize/Collapse button near CureSelect title */}
+          {!isSidebarCollapsed && (
+            <button
+              onClick={() => setIsSidebarCollapsed(true)}
+              title="Collapse Menu"
+              style={{
+                background: isFleetPage ? 'rgba(15, 23, 42, 0.02)' : 'rgba(255,255,255,0.02)',
+                border: isFleetPage ? '1px solid rgba(15, 23, 42, 0.06)' : '1px solid rgba(255,255,255,0.06)',
+                borderRadius: '8px',
+                padding: '6px',
+                color: isFleetPage ? '#475569' : '#94A3B8',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'all 0.2s'
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = isFleetPage ? 'rgba(15, 23, 42, 0.06)' : 'rgba(255,255,255,0.08)'}
+              onMouseLeave={e => e.currentTarget.style.background = isFleetPage ? 'rgba(15, 23, 42, 0.02)' : 'rgba(255,255,255,0.02)'}
+            >
+              <ChevronRight size={14} style={{ transform: 'rotate(180deg)' }} />
+            </button>
+          )}
         </div>
-      </div>
-    </aside>
+
+        {/* Navigation Area */}
+        <nav style={{ flex: 1, padding: '16px 0', overflowY: 'auto', minHeight: 0 }} className="no-scrollbar">
+          <AnimatePresence>
+          {!isSidebarCollapsed && (
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} style={{ padding: '0 24px', marginBottom: '8px', fontSize: '0.65rem', fontWeight: 700, color: isFleetPage ? '#475569' : '#94A3B8', textTransform: 'uppercase', letterSpacing: '1px' }}>
+              {isFleetPage ? 'Fleet Command' : 'Main Menu'}
+            </motion.div>
+          )}
+          </AnimatePresence>
+          {filteredNavItems.map(item => renderNavItem(item))}
+        </nav>
+
+        {/* User Footer Profile */}
+        <div style={{ padding: '16px', borderTop: isFleetPage ? '1px solid rgba(15, 23, 42, 0.08)' : '1px solid rgba(255,255,255,0.05)', display: 'flex', flexDirection: 'column', gap: '12px', flexShrink: 0 }}>
+
+          <AnimatePresence>
+            {!isSidebarCollapsed && (
+              <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }}>
+                {/* Perspective Switcher */}
+                {(user.roles?.includes('cureselect_admin') || user.roles?.includes('admin') || user.roles?.includes('CURESELECT_ADMIN') || user.roles?.includes('ADMIN')) && (
+                  <div style={{ marginBottom: '12px' }}>
+                    <PerspectiveSwitcher
+                      currentRole={currentRole}
+                      onSwitch={handleRoleSwitch}
+                    />
+                  </div>
+                )}
+
+                {/* Premium User Card */}
+                <div style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
+                  padding: '12px', background: isFleetPage ? 'rgba(6, 182, 212, 0.04)' : 'rgba(6, 182, 212, 0.05)', border: isFleetPage ? '1px solid rgba(6, 182, 212, 0.08)' : '1px solid rgba(6, 182, 212, 0.1)',
+                  borderRadius: '12px', transition: 'all 0.3s ease', cursor: 'pointer'
+                }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0, overflow: 'hidden' }}>
+                    <div style={{
+                      width: '32px', height: '32px', borderRadius: '10px', background: isFleetPage ? '#FFFFFF' : '#040B16',
+                      border: '1px solid #06B6D4', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      fontSize: '0.75rem', fontWeight: 800, color: '#06B6D4', flexShrink: 0
+                    }}>{initials}</div>
+                    <div style={{ minWidth: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+                      <div style={{ fontSize: '0.8rem', fontWeight: 700, color: isFleetPage ? '#0F172A' : '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayName}</div>
+                      <div style={{ fontSize: '0.6rem', fontWeight: 600, color: '#06B6D4', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{currentRole.replace(/_/g, ' ')}</div>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={(e) => { e.stopPropagation(); handleLogout(); }}
+                    style={{ background: 'transparent', border: 'none', color: isFleetPage ? '#64748B' : '#94A3B8', cursor: 'pointer', padding: '4px', borderRadius: '6px', transition: 'all 0.2s' }}
+                    onMouseEnter={(e) => { e.currentTarget.style.color = '#EF4444'; e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)'; }}
+                    onMouseLeave={(e) => { e.currentTarget.style.color = isFleetPage ? '#64748B' : '#94A3B8'; e.currentTarget.style.background = 'transparent'; }}
+                    title="Sign Out"
+                  >
+                    <LogOut size={16} />
+                  </button>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </motion.aside>
+    </>
   );
 };

src/config/navigation.ts

@@ -56,21 +56,16 @@ export const NAVIGATION_CONFIG: NavItem[] = [
     path: '/caller', 
     roles: ['CURESELECT_ADMIN', 'CALLER'] 
   },
-  { 
-    id: 'fleet-operator', 
-    label: 'Fleet Command', 
-    icon: Zap, 
-    path: '/fleet-operator', 
-    roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'],
-    subItems: [
-      { id: 'fleet-overview', label: 'Command Center', icon: LayoutGrid, path: '/fleet-operator?tab=overview', roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
-      { id: 'fleet-assets', label: 'Fleet Assets', icon: Truck, path: '/fleet-operator?tab=assets', roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
-      { id: 'fleet-personnel', label: 'Personnel Hub', icon: Users, path: '/fleet-operator?tab=personnel', roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
-      { id: 'fleet-mission', label: 'Mission Control', icon: Navigation, path: '/fleet-operator?tab=scheduling', roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
-      { id: 'fleet-inventory', label: 'Supply Chain', icon: ShoppingCart, path: '/fleet-operator?tab=inventory', roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
-      { id: 'fleet-intel', label: 'Fleet Intel', icon: Activity, path: '/fleet-operator?tab=analytics', roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
-    ]
-  },
+  { id: 'fleet-overview',      label: 'Live Dashboard',     icon: LayoutGrid,    path: '/fleet-operator?tab=overview',      roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-organization',  label: 'Org & Stations',     icon: Hospital,      path: '/fleet-operator?tab=organization',   roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-assets',        label: 'Fleet Assets',       icon: Truck,         path: '/fleet-operator?tab=assets',         roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-personnel',     label: 'Staf Management',      icon: Users,         path: '/fleet-operator?tab=personnel',      roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-mission',       label: 'Crew Scheduling',    icon: Navigation,    path: '/fleet-operator?tab=scheduling',     roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-inventory',     label: 'Inventory Management',       icon: ShoppingCart,  path: '/fleet-operator?tab=inventory',      roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-trips',         label: 'Trip Management',    icon: Activity,      path: '/fleet-operator?tab=trips',          roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  // { id: 'fleet-telematics',    label: 'GPS Telematics',     icon: Navigation,    path: '/fleet-operator?tab=telematics',     roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  // { id: 'fleet-referrals',     label: 'Referral Network',   icon: HeartPulse,    path: '/fleet-operator?tab=referrals',      roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
+  { id: 'fleet-intel',         label: 'Fleet Analytics',    icon: PieChart,      path: '/fleet-operator?tab=analytics',      roles: ['CURESELECT_ADMIN', 'FLEET_OPERATOR'] },
   { 
     id: 'clinical', 
     label: 'Clinical Intelligence', 

src/main.tsx

@@ -1,10 +1,7 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <App />,
 )

src/pages/FleetDispatch.tsx

@@ -314,8 +314,9 @@ const LiveLeafletMap: React.FC<{ vehicles: FleetVehicle[], selectedId: string |
 const LocationPickerMap: React.FC<{ 
   lat: number; 
   lng: number; 
-  onLocationSelect: (lat: number, lng: number) => void 
-}> = ({ lat, lng, onLocationSelect }) => {
+  onLocationSelect: (lat: number, lng: number) => void;
+  notify?: (title: string, message: string, type?: 'success' | 'error' | 'info') => void;
+}> = ({ lat, lng, onLocationSelect, notify }) => {
   const [isMapReady, setIsMapReady] = useState(false);
   const mapRef = useRef<any>(null);
   const markerRef = useRef<any>(null);
@@ -469,7 +470,11 @@ const LocationPickerMap: React.FC<{
         setIsLocating(false);
         
         if (accuracy > 100) {
-          notify('GPS Warning', 'Location accuracy is low. Please manually adjust the pin.', 'info');
+          if (notify) {
+            notify('GPS Warning', 'Location accuracy is low. Please manually adjust the pin.', 'info');
+          } else {
+            console.warn('GPS Warning: Location accuracy is low. Please manually adjust the pin.');
+          }
         }
       },
       (error) => {
@@ -478,7 +483,11 @@ const LocationPickerMap: React.FC<{
         if (error.code === 1) msg = 'Location permission denied.';
         else if (error.code === 3) msg = 'Location request timed out.';
         
-        notify('GPS Error', msg, 'error');
+        if (notify) {
+          notify('GPS Error', msg, 'error');
+        } else {
+          alert(msg);
+        }
         setIsLocating(false);
       },
       { 
@@ -1843,11 +1852,91 @@ const StationManifest: React.FC<{
   station: any; 
   vehicles: any[]; 
   staff: any[]; 
-}> = ({ station, vehicles, staff }) => {
-  const stationVehicles = vehicles.filter(v => v.station_id === station.id || v.station_name === station.name);
+}> = ({ station }) => {
+  const [stationVehicles, setStationVehicles] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  // For demo/mock purposes, we'll assign some staff to the station
-  const stationStaff = staff.slice(0, 3); 
+  useEffect(() => {
+    const fetchStationVehicles = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const token = localStorage.getItem('teleems_token') || '';
+        if (!token) throw new Error('No authentication token found.');
+        
+        console.log(`StationManifest: Fetching vehicles for station: ${station?.id}`);
+        const response = await fleetApi.getStationVehicles(token, station?.id);
+        
+        let list = response.data?.data || (Array.isArray(response.data) ? response.data : []);
+        setStationVehicles(list);
+      } catch (err: any) {
+        console.error('Failed to fetch station vehicles:', err);
+        setError(err.message || 'Failed to fetch station vehicles');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (station?.id) {
+      fetchStationVehicles();
+    }
+  }, [station]);
+
+  // Extract unique active crew from fetched station vehicles
+  const stationStaff = useMemo(() => {
+    const crewMap = new Map<string, { id: string; name: string; type: string; phone?: string }>();
+    
+    stationVehicles.forEach(v => {
+      // Check activeRoster
+      if (v.activeRoster) {
+        const roster = v.activeRoster;
+        if (roster.driver?.user) {
+          const d = roster.driver;
+          crewMap.set(d.id, {
+            id: d.id,
+            name: d.user.name || 'Unknown Pilot',
+            type: 'Pilot',
+            phone: d.user.phone
+          });
+        }
+        if (roster.staff?.user) {
+          const s = roster.staff;
+          crewMap.set(s.id, {
+            id: s.id,
+            name: s.user.name || 'Unknown EMT',
+            type: 'EMT',
+            phone: s.user.phone
+          });
+        }
+      }
+      
+      // Check activeShift
+      if (v.activeShift) {
+        const shift = v.activeShift;
+        if (shift.driver?.user) {
+          const d = shift.driver;
+          crewMap.set(d.id, {
+            id: d.id,
+            name: d.user.name || 'Unknown Pilot',
+            type: 'Pilot',
+            phone: d.user.phone
+          });
+        }
+        if (shift.staff?.user) {
+          const s = shift.staff;
+          crewMap.set(s.id, {
+            id: s.id,
+            name: s.user.name || 'Unknown EMT',
+            type: 'EMT',
+            phone: s.user.phone
+          });
+        }
+      }
+    });
+    
+    return Array.from(crewMap.values());
+  }, [stationVehicles]);
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
@@ -1863,48 +1952,82 @@ const StationManifest: React.FC<{
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
+        {/* Deployed Fleet */}
         <div className="glass" style={{ padding: '20px', borderRadius: '15px' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
             <Truck size={20} color="var(--accent-cyan)" />
-            <h5 style={{ margin: 0, fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Deployed Fleet ({stationVehicles.length})</h5>
+            <h5 style={{ margin: 0, fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Deployed Fleet ({loading ? '...' : stationVehicles.length})</h5>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            {stationVehicles.length === 0 ? (
-              <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontStyle: 'italic' }}>No vehicles currently docked.</div>
-            ) : (
-              stationVehicles.map(v => (
-                <div key={v.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', background: 'rgba(255,255,255,0.02)', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.05)' }}>
-                  <div>
-                    <div style={{ fontSize: '0.85rem', fontWeight: 700 }}>{v.registration_number}</div>
-                    <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)' }}>{v.brand} {v.model}</div>
+          
+          {loading ? (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px', gap: '12px' }}>
+              <Loader2 className="spin-slow" color="var(--accent-cyan)" size={24} />
+              <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>DECRYPTING STATION FLEET...</div>
+            </div>
+          ) : error ? (
+            <div style={{ fontSize: '0.8rem', color: 'var(--alert-red)', padding: '10px', textAlign: 'center' }}>
+              {error}
+            </div>
+          ) : stationVehicles.length === 0 ? (
+            <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontStyle: 'italic', textAlign: 'center', padding: '20px' }}>No vehicles currently docked.</div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              {stationVehicles.map(v => {
+                const driverName = v.activeRoster?.driver?.user?.name || v.activeShift?.driver?.user?.name;
+                const emtName = v.activeRoster?.staff?.user?.name || v.activeShift?.staff?.user?.name;
+                return (
+                  <div key={v.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '12px', background: 'rgba(255,255,255,0.02)', borderRadius: '10px', border: '1px solid rgba(255,255,255,0.05)' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <div>
+                        <div style={{ fontSize: '0.85rem', fontWeight: 700 }}>{v.registration_number}</div>
+                        <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)' }}>{v.brand} {v.model} • {v.vehicle_type}</div>
+                      </div>
+                      <div className="badge" style={{ fontSize: '0.6rem', background: v.status === 'AVAILABLE' ? 'rgba(0, 226, 114, 0.1)' : 'rgba(255, 171, 0, 0.1)', color: v.status === 'AVAILABLE' ? 'var(--accent-green)' : 'var(--accent-amber)' }}>
+                        {v.status}
+                      </div>
+                    </div>
+                    {(driverName || emtName) && (
+                      <div style={{ borderTop: '1px solid rgba(255,255,255,0.04)', paddingTop: '6px', display: 'flex', flexWrap: 'wrap', gap: '8px', fontSize: '0.7rem' }}>
+                        {driverName && <span style={{ color: 'var(--text-secondary)' }}>Pilot: <strong style={{ color: '#fff' }}>{driverName}</strong></span>}
+                        {emtName && <span style={{ color: 'var(--text-secondary)' }}>EMT: <strong style={{ color: '#fff' }}>{emtName}</strong></span>}
+                      </div>
+                    )}
                   </div>
-                  <div className="badge" style={{ fontSize: '0.6rem', background: v.status === 'AVAILABLE' ? 'rgba(0, 226, 114, 0.1)' : 'rgba(59, 130, 246, 0.1)', color: v.status === 'AVAILABLE' ? 'var(--accent-green)' : 'var(--accent-cyan)' }}>
-                    {v.status}
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
+                );
+              })}
+            </div>
+          )}
         </div>
 
+        {/* Active Crew */}
         <div className="glass" style={{ padding: '20px', borderRadius: '15px' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
             <Users size={20} color="var(--accent-cyan)" />
-            <h5 style={{ margin: 0, fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Active Crew ({stationStaff.length})</h5>
+            <h5 style={{ margin: 0, fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Active Crew ({loading ? '...' : stationStaff.length})</h5>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            {stationStaff.map(s => (
-              <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '10px', background: 'rgba(255,255,255,0.02)', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.05)' }}>
-                <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: 'rgba(59, 130, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                  <User size={16} color="var(--accent-cyan)" />
+          
+          {loading ? (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px', gap: '12px' }}>
+              <Loader2 className="spin-slow" color="var(--accent-cyan)" size={24} />
+              <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>COMPILING CREW LIST...</div>
+            </div>
+          ) : stationStaff.length === 0 ? (
+            <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontStyle: 'italic', textAlign: 'center', padding: '20px' }}>No crew active at this station.</div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              {stationStaff.map(s => (
+                <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '10px', background: 'rgba(255,255,255,0.02)', borderRadius: '8px', border: '1px solid rgba(255,255,255,0.05)' }}>
+                  <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: 'rgba(59, 130, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <User size={16} color="var(--accent-cyan)" />
+                  </div>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ fontSize: '0.85rem', fontWeight: 700 }}>{s.name}</div>
+                    <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)' }}>{s.type} • On Duty {s.phone ? `(${s.phone})` : ''}</div>
+                  </div>
                 </div>
-                <div style={{ flex: 1 }}>
-                  <div style={{ fontSize: '0.85rem', fontWeight: 700 }}>{s.user?.name || s.name}</div>
-                  <div style={{ fontSize: '0.65rem', color: 'var(--text-secondary)' }}>{s.type} • On Call</div>
-                </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
 
@@ -2068,7 +2191,8 @@ const StationRegistrationForm: React.FC<{
   onSubmit: (data: any) => void; 
   loading?: boolean;
   organisationId: string;
-}> = ({ onSubmit, loading, organisationId }) => {
+  notify?: (title: string, message: string, type?: 'success' | 'error' | 'info') => void;
+}> = ({ onSubmit, loading, organisationId, notify }) => {
   const [formData, setFormData] = useState({
     name: '',
     organisationId: organisationId,
@@ -2206,6 +2330,7 @@ const StationRegistrationForm: React.FC<{
               lat={parseFloat(formData.gps_lat) || 13.0827} 
               lng={parseFloat(formData.gps_lon) || 80.2707} 
               onLocationSelect={handleLocationSelect} 
+              notify={notify}
            />
         </div>
       </div>
@@ -3242,7 +3367,7 @@ export const FleetDispatch: React.FC = () => {
         loading={isSubmitting}
       >
         {modalType === 'BRAND' && <BrandRegistrationForm onSubmit={handleBrandSubmit} loading={isSubmitting} />}
-        {modalType === 'STATION' && <StationRegistrationForm organisationId={selectedOwnerId || ''} onSubmit={handleStationSubmit} loading={isSubmitting} />}
+        {modalType === 'STATION' && <StationRegistrationForm organisationId={selectedOwnerId || ''} onSubmit={handleStationSubmit} loading={isSubmitting} notify={notify} />}
         {modalType === 'VEHICLE' && <VehicleRegistrationForm organisationId={selectedOwnerId || ''} onSubmit={handleVehicleSubmit} loading={isSubmitting} initialData={editingVehicle} />}
         {modalType === 'ROSTER' && <RosterForm vehicles={realVehicles} staff={realStaff} onSubmit={handleRosterSubmit} loading={isSubmitting} />}
         {modalType === 'SHIFT' && <ShiftStartForm vehicles={realVehicles} staff={realStaff} onSubmit={handleShiftStart} loading={isSubmitting} />}

src/pages/FleetLogin.tsx

@@ -3,23 +3,20 @@ import { useNavigate, NavLink } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   Truck, 
-  Zap, 
   ShieldCheck, 
   Lock, 
   User, 
   ArrowRight, 
   Cpu, 
-  Radio, 
-  Activity,
   KeyRound,
   ShieldAlert,
   Eye,
   EyeOff,
-  Crosshair,
-  Signal
+  MapPin,
+  Activity
 } from 'lucide-react';
 import { authApi } from '../api/auth';
-import './Login.css'; // Reuse core login styles but we'll override some for the tactical look
+import './Login.css';
 
 export const FleetLogin = () => {
   const [username, setUsername] = useState('fleet_operator');
@@ -28,7 +25,7 @@ export const FleetLogin = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [showError, setShowError] = useState('');
   const [mfaSessionToken, setMfaSessionToken] = useState('');
-  const [tempUser, setTempUser] = useState<any>(null);
+  const [tempUser, setTempUser] = useState<Record<string, unknown> | null>(null);
   const [loginStep, setLoginStep] = useState<'login' | 'mfa'>('login');
   const [showPassword, setShowPassword] = useState(false);
   
@@ -39,43 +36,75 @@ export const FleetLogin = () => {
     setIsLoading(true);
     setShowError('');
 
-    // --- MOCK LOGIN FOR FLEET OPERATOR ---
-    if (username === 'fleet_operator' && password === 'Fleet@123') {
-      setTimeout(() => {
-        localStorage.setItem('teleems_auth', 'true');
-        localStorage.setItem('teleems_token', 'mock-fleet-token-2026');
-        localStorage.setItem('teleems_user', JSON.stringify({
-          id: 'fleet-op-001',
-          username: 'fleet_operator',
-          roles: ['FLEET_OPERATOR'],
-          metadata: {
-            organization: { company_name: 'TeleEMS Fleet Services' }
-          }
-        }));
-        setIsLoading(false);
-        navigate('/fleet-operator');
-      }, 1000);
-      return;
-    }
+    // Clear any leftover mock tokens to ensure a real network call
+    console.log('--- STARTING FLEET LOGIN ---');
+    console.log('Clearing local storage tokens...');
+    localStorage.removeItem('teleems_token');
+    localStorage.removeItem('teleems_auth');
+    localStorage.removeItem('teleems_user');
 
     try {
-      const response = await authApi.login(username, password);
+      console.log('[FleetLogin] Logging in as:', username);
 
-      if (response.status === 201 || response.status === 200) {
-        if (response.data.mfa_required) {
-          setMfaSessionToken(response.data.mfa_session_token || '');
-          setTempUser(response.data.user || null);
+      // Clear old session first
+      localStorage.removeItem('teleems_token');
+      localStorage.removeItem('teleems_user');
+      localStorage.removeItem('teleems_auth');
+
+      // Step 1: Login — use raw fetch, NOT apiClient (bypass mock/401 interceptors)
+      const loginRes = await fetch('https://teleems-api-gateway.onrender.com/v1/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      const loginJson = await loginRes.json();
+      console.log('[FleetLogin] Login response status:', loginRes.status, loginJson);
+
+      if (loginRes.status === 201 || loginRes.status === 200) {
+        if (loginJson.data?.mfa_required) {
+          setMfaSessionToken(loginJson.data.mfa_session_token || '');
+          setTempUser(loginJson.data.user || null);
           setLoginStep('mfa');
         } else {
+          const accessToken = loginJson.data?.access_token || '';
+          if (!accessToken) {
+            setShowError('Login failed: No access token received.');
+            return;
+          }
+
+          // Store token immediately
           localStorage.setItem('teleems_auth', 'true');
-          localStorage.setItem('teleems_token', response.data.access_token || '');
-          localStorage.setItem('teleems_user', JSON.stringify(response.data.user || {}));
-          navigate('/fleet-operator');
+          localStorage.setItem('teleems_token', accessToken);
+          console.log('[FleetLogin] Token stored. Fetching /auth/me...');
+
+          // Step 2: Fetch real profile from /auth/me
+          try {
+            const meRes = await fetch('https://teleems-api-gateway.onrender.com/v1/auth/me', {
+              method: 'GET',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${accessToken}`,
+              },
+            });
+            const meJson = await meRes.json();
+            console.log('[FleetLogin] /auth/me status:', meRes.status, meJson);
+
+            const profile = meJson?.data || loginJson.data?.user || {};
+            const roles: string[] = Array.isArray(profile.roles) ? [...profile.roles] : ['Fleet Operator'];
+            localStorage.setItem('teleems_user', JSON.stringify({ ...profile, roles }));
+          } catch (meErr) {
+            console.warn('[FleetLogin] /auth/me failed, using login user data:', meErr);
+            const fallback = loginJson.data?.user || {};
+            localStorage.setItem('teleems_user', JSON.stringify({ ...fallback, roles: ['Fleet Operator'] }));
+          }
+
+          navigate('/fleet-operator?tab=organization');
         }
       } else {
-        setShowError(response.message || 'Access Denied: Invalid Credentials');
+        setShowError(loginJson?.message || 'Access Denied: Invalid Credentials');
       }
-    } catch (err) {
+    } catch (err: unknown) {
+      console.error('[FleetLogin] Error:', err);
       setShowError('Tactical Network Unavailable: Check Connection');
     } finally {
       setIsLoading(false);
@@ -93,14 +122,17 @@ export const FleetLogin = () => {
       if (response.status === 201 || response.status === 200) {
         localStorage.setItem('teleems_auth', 'true');
         localStorage.setItem('teleems_token', response.data.access_token || '');
-        const userToStore = response.data.user || tempUser || {};
-        userToStore.mfa_enabled = true;
+        const baseUser: Record<string, unknown> = (response.data.user || tempUser || {}) as Record<string, unknown>;
+        const roles = Array.isArray(baseUser.roles) ? [...baseUser.roles] : [];
+        if (!roles.includes('FLEET_OPERATOR')) roles.push('FLEET_OPERATOR');
+        
+        const userToStore = { ...baseUser, roles, mfa_enabled: true };
         localStorage.setItem('teleems_user', JSON.stringify(userToStore));
-        navigate('/fleet-operator');
+        navigate('/fleet-operator?tab=organization');
       } else {
         setShowError('Invalid Security Token');
       }
-    } catch (err) {
+    } catch {
       setShowError('Token Verification Failed');
     } finally {
       setIsLoading(false);
@@ -108,189 +140,305 @@ export const FleetLogin = () => {
   };
 
   return (
-    <div className="login-page fleet-login-theme" style={{ background: '#020617' }}>
-      {/* Tactical Background Elements */}
-      <div className="login-grid-decor" style={{ opacity: 0.1, backgroundImage: 'linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
-      <div className="scanline" style={{ background: 'linear-gradient(to bottom, transparent 0%, rgba(59, 130, 246, 0.05) 50%, transparent 100%)' }} />
-      <div className="login-overlay" style={{ background: 'radial-gradient(circle at center, transparent 0%, rgba(2, 6, 23, 0.8) 100%)' }} />
+    <div className="fleet-login-container" style={{ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: '#F8FAFC', fontFamily: "'Outfit', sans-serif", overflow: 'hidden' }}>
       
-      {/* Decorative Radar/Circle */}
-      <motion.div 
-        animate={{ rotate: 360 }}
-        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-        style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '600px', height: '600px', border: '1px solid rgba(59, 130, 246, 0.05)', borderRadius: '50%', pointerEvents: 'none' }}
-      >
-        <div style={{ position: 'absolute', top: '0', left: '50%', width: '2px', height: '100%', background: 'linear-gradient(to bottom, rgba(59, 130, 246, 0.2), transparent)' }} />
-      </motion.div>
+      {/* LEFT SIDE - IMAGE & TACTICAL HUD */}
+      <div className="fleet-login-left" style={{ 
+        flex: 1, 
+        position: 'relative', 
+        display: 'flex', 
+        flexDirection: 'column', 
+        justifyContent: 'space-between', 
+        padding: '60px',
+        borderRight: '1px solid rgba(6, 182, 212, 0.15)'
+      }}>
+        {/* Background Image */}
+        <div style={{ 
+          position: 'absolute', 
+          inset: 0, 
+          backgroundImage: 'url("https://images.unsplash.com/photo-1587582423116-ec07293f0395?q=80&w=2070&auto=format&fit=crop")',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          filter: 'grayscale(20%) contrast(110%)'
+        }} />
+        {/* Gradients to blend image with the tactical theme */}
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'linear-gradient(to right, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0.6) 40%, rgba(248, 250, 252, 0.95) 100%)'
+        }} />
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'radial-gradient(circle at 30% 50%, transparent 0%, rgba(248, 250, 252, 0.9) 100%)'
+        }} />
 
-      <motion.div 
-        key={loginStep}
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -20 }}
-        transition={{ duration: 0.5, ease: "circOut" }}
-        className="login-card glass"
-        style={{ 
-          background: 'rgba(15, 23, 42, 0.8)', 
-          border: '1px solid rgba(59, 130, 246, 0.3)',
-          boxShadow: '0 0 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(59, 130, 246, 0.1)'
-        }}
-      >
-        <div className="login-header">
+        {/* Decorative Grid & Radar (HUD elements) */}
+        <div style={{ position: 'absolute', inset: 0, opacity: 0.12, backgroundImage: 'linear-gradient(rgba(6, 182, 212, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.2) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
+        
+        {/* Content Top */}
+        <div style={{ position: 'relative', zIndex: 10 }}>
           <motion.div 
-            initial={{ scale: 0.5, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            className="login-logo"
-            style={{ background: 'rgba(59, 130, 246, 0.1)', border: '1px solid var(--accent-cyan)' }}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8 }}
+            style={{ display: 'flex', alignItems: 'center', gap: '16px' }}
           >
-            <Truck className="text-cyan-400" size={28} style={{ color: 'var(--accent-cyan)' }} />
+            <div style={{ padding: '12px', background: 'rgba(6, 182, 212, 0.08)', border: '1px solid #06b6d4', borderRadius: '12px', boxShadow: '0 4px 20px rgba(6, 182, 212, 0.15)' }}>
+              <Truck size={32} color="#06b6d4" />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <span style={{ fontSize: '28px', fontWeight: 900, color: '#0F172A', letterSpacing: '2px' }}>TELE_EMS</span>
+              <span style={{ fontSize: '12px', fontWeight: 700, color: '#06b6d4', letterSpacing: '4px' }}>FLEET_OPERATOR</span>
+            </div>
           </motion.div>
-          
-          <h1 className="login-title" style={{ letterSpacing: '0.1em', fontWeight: 900 }}>
-            {loginStep === 'login' ? 'FLEET TERMINAL' : 'SECURE TOKEN'}
-          </h1>
-          <p className="login-subtitle" style={{ color: 'var(--accent-cyan)', opacity: 0.8, fontSize: '0.7rem', fontWeight: 800, textTransform: 'uppercase' }}>
-            {loginStep === 'login' ? 'Sector: Dispatch • Active Node: CS-88' : 'Identity Verification Required'}
-          </p>
         </div>
 
-        {loginStep === 'login' ? (
-          <form onSubmit={handleLogin} className="login-form">
-            <div className="input-group">
-              <label className="input-label" style={{ color: 'var(--accent-cyan)', opacity: 0.6 }}>Operator ID</label>
-              <div className="input-wrapper" style={{ background: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                <User className="input-icon" size={18} style={{ color: 'var(--accent-cyan)' }} />
-                <input 
-                  type="text" 
-                  className="login-input mono" 
-                  placeholder="ID_ENTRY"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  style={{ color: '#fff' }}
-                  required
-                />
+        {/* Content Middle/Bottom */}
+        <div style={{ position: 'relative', zIndex: 10, maxWidth: '600px', marginBottom: '40px' }}>
+          <motion.h1 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            style={{ fontSize: '56px', fontWeight: 900, lineHeight: 1.1, color: '#0F172A', marginBottom: '24px', letterSpacing: '-1px' }}
+          >
+            Command The Fleet.<br/>
+            <span style={{ color: '#06b6d4', textShadow: '0 0 30px rgba(6, 182, 212, 0.2)' }}>Save Lives Faster.</span>
+          </motion.h1>
+          <motion.p 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            style={{ fontSize: '18px', color: '#475569', lineHeight: 1.6, fontWeight: 500 }}
+          >
+            Access real-time telemetry, manage dispatch routes, and monitor critical resources from a single, secure tactical terminal.
+          </motion.p>
+          
+          <motion.div 
+             initial={{ opacity: 0 }}
+             animate={{ opacity: 1 }}
+             transition={{ duration: 0.8, delay: 0.6 }}
+             style={{ display: 'flex', gap: '24px', marginTop: '40px' }}
+          >
+             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#06b6d4', fontSize: '14px', fontWeight: 700 }}>
+                <Activity size={18} /> REAL-TIME SYNC
+             </div>
+             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#06b6d4', fontSize: '14px', fontWeight: 700 }}>
+                <MapPin size={18} /> GPS TRACKING
+             </div>
+             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#06b6d4', fontSize: '14px', fontWeight: 700 }}>
+                <ShieldCheck size={18} /> ENCRYPTED
+             </div>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* RIGHT SIDE - LOGIN FORM */}
+      <div className="fleet-login-right" style={{ 
+        width: '550px', 
+        minWidth: '400px',
+        position: 'relative', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        padding: '40px',
+        background: '#FFFFFF',
+        boxShadow: '-10px 0 50px rgba(15, 23, 42, 0.04), -1px 0 0 rgba(15, 23, 42, 0.05)'
+      }}>
+        {/* Subtle background glow */}
+        <div style={{ position: 'absolute', top: '20%', right: '-10%', width: '300px', height: '300px', background: 'rgba(6, 182, 212, 0.03)', filter: 'blur(100px)', borderRadius: '50%', pointerEvents: 'none' }} />
+        
+        <motion.div 
+          key={loginStep}
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -20 }}
+          transition={{ duration: 0.5, ease: "circOut" }}
+          style={{ width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '32px', zIndex: 10 }}
+        >
+          <div style={{ textAlign: 'center' }}>
+            <h2 style={{ fontSize: '28px', fontWeight: 800, color: '#0F172A', margin: '0 0 8px 0', letterSpacing: '1px' }}>
+              {loginStep === 'login' ? 'TERMINAL ACCESS' : 'MFA REQUIRED'}
+            </h2>
+            <p style={{ color: '#06b6d4', fontSize: '13px', fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', margin: 0, opacity: 0.9 }}>
+              {loginStep === 'login' ? 'Sector: Dispatch • Active Node: CS-88' : 'Identity Verification'}
+            </p>
+          </div>
+
+          {loginStep === 'login' ? (
+            <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontSize: '12px', fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.9 }}>Operator ID</label>
+                <div style={{ position: 'relative' }}>
+                  <User size={18} color="#06b6d4" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.9 }} />
+                  <input 
+                    type="text" 
+                    placeholder="ID_ENTRY"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                    style={{ 
+                      width: '100%', padding: '16px 16px 16px 48px', 
+                      background: 'rgba(15, 23, 42, 0.03)', border: '1px solid rgba(15, 23, 42, 0.1)', 
+                      borderRadius: '12px', color: '#0F172A', fontSize: '15px', fontWeight: 500,
+                      outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif"
+                    }}
+                    onFocus={(e) => e.target.style.borderColor = '#06b6d4'}
+                    onBlur={(e) => e.target.style.borderColor = 'rgba(15, 23, 42, 0.1)'}
+                  />
+                </div>
               </div>
-            </div>
 
-            <div className="input-group">
-              <label className="input-label" style={{ color: 'var(--accent-cyan)', opacity: 0.6 }}>Command Key</label>
-              <div className="input-wrapper" style={{ background: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                <Lock className="input-icon" size={18} style={{ color: 'var(--accent-cyan)' }} />
-                <input 
-                  type={showPassword ? "text" : "password"} 
-                  className="login-input mono" 
-                  placeholder="KEY_REQUIRED"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  style={{ color: '#fff' }}
-                  required
-                />
-                <button type="button" onClick={() => setShowPassword(!showPassword)} style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', cursor: 'pointer', paddingRight: '12px' }}>
-                   {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontSize: '12px', fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.9 }}>Command Key</label>
+                <div style={{ position: 'relative' }}>
+                  <Lock size={18} color="#06b6d4" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.9 }} />
+                  <input 
+                    type={showPassword ? "text" : "password"} 
+                    placeholder="KEY_REQUIRED"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    style={{ 
+                      width: '100%', padding: '16px 48px 16px 48px', 
+                      background: 'rgba(15, 23, 42, 0.03)', border: '1px solid rgba(15, 23, 42, 0.1)', 
+                      borderRadius: '12px', color: '#0F172A', fontSize: '15px', fontWeight: 500,
+                      outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif", letterSpacing: showPassword ? 'normal' : '3px'
+                    }}
+                    onFocus={(e) => e.target.style.borderColor = '#06b6d4'}
+                    onBlur={(e) => e.target.style.borderColor = 'rgba(15, 23, 42, 0.1)'}
+                  />
+                  <button type="button" onClick={() => setShowPassword(!showPassword)} style={{ position: 'absolute', right: '16px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: '#64748B', padding: 0 }}>
+                     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
               </div>
-            </div>
 
-            <button 
-              id="fleet-login-submit"
-              type="submit" 
-              className="login-button" 
-              disabled={isLoading}
-              style={{ 
-                background: 'var(--accent-cyan)', 
-                color: '#000', 
-                fontWeight: 900,
-                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4)'
-              }}
-            >
-              {isLoading ? (
-                <Cpu className="spin" size={20} />
-              ) : (
-                <>
-                  INITIALIZE SESSION
-                  <ArrowRight size={20} />
-                </>
-              )}
-            </button>
-          </form>
-        ) : (
-          <form onSubmit={handleMfaVerify} className="login-form">
-            <div className="input-group">
-              <label className="input-label" style={{ color: 'var(--accent-cyan)', opacity: 0.6 }}>TOTP Authorization</label>
-              <div className="input-wrapper" style={{ background: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                <KeyRound className="input-icon" size={18} style={{ color: 'var(--accent-cyan)' }} />
-                <input 
-                  type="text" 
-                  className="login-input mono" 
-                  placeholder="000 000"
-                  maxLength={6}
-                  value={mfaCode}
-                  onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, ''))}
-                  style={{ color: '#fff' }}
-                  required
-                />
+              <button 
+                type="submit" 
+                disabled={isLoading}
+                style={{ 
+                  marginTop: '12px', padding: '16px', background: '#06b6d4', color: '#FFFFFF', 
+                  border: 'none', borderRadius: '12px', fontSize: '15px', fontWeight: 800, letterSpacing: '1px',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                  cursor: isLoading ? 'not-allowed' : 'pointer', transition: 'all 0.3s',
+                  boxShadow: '0 8px 24px rgba(6, 182, 212, 0.25)'
+                }}
+                onMouseOver={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(6, 182, 212, 0.35)'; } }}
+                onMouseOut={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(6, 182, 212, 0.25)'; } }}
+              >
+                {isLoading ? (
+                  <Cpu className="spin" size={20} />
+                ) : (
+                  <>
+                    Login
+                    <ArrowRight size={20} />
+                  </>
+                )}
+              </button>
+            </form>
+          ) : (
+            <form onSubmit={handleMfaVerify} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontSize: '12px', fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.9 }}>TOTP Authorization</label>
+                <div style={{ position: 'relative' }}>
+                  <KeyRound size={18} color="#06b6d4" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.9 }} />
+                  <input 
+                    type="text" 
+                    placeholder="000 000"
+                    maxLength={6}
+                    value={mfaCode}
+                    onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, ''))}
+                    required
+                    style={{ 
+                      width: '100%', padding: '16px 16px 16px 48px', 
+                      background: 'rgba(15, 23, 42, 0.03)', border: '1px solid rgba(15, 23, 42, 0.1)', 
+                      borderRadius: '12px', color: '#0F172A', fontSize: '20px', fontWeight: 600, letterSpacing: '4px', textAlign: 'center',
+                      outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif"
+                    }}
+                    onFocus={(e) => e.target.style.borderColor = '#06b6d4'}
+                    onBlur={(e) => e.target.style.borderColor = 'rgba(15, 23, 42, 0.1)'}
+                  />
+                </div>
               </div>
-            </div>
 
-            <button 
-              type="submit" 
-              className="login-button" 
-              disabled={isLoading}
-              style={{ background: 'var(--accent-cyan)', color: '#000', fontWeight: 900 }}
-            >
-              {isLoading ? (
-                <Cpu className="spin" size={20} />
-              ) : (
-                <>
-                  VERIFY IDENTITY
-                  <ShieldCheck size={20} />
-                </>
-              )}
-            </button>
-          </form>
-        )}
-
-        <AnimatePresence>
-          {showError && (
-            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="security-badge" style={{ color: '#ef4444', border: '1px solid rgba(239, 68, 68, 0.2)', background: 'rgba(239, 68, 68, 0.05)' }}>
-              <ShieldAlert size={14} />
-              <span>{showError}</span>
-            </motion.div>
+              <button 
+                type="submit" 
+                disabled={isLoading}
+                style={{ 
+                  marginTop: '12px', padding: '16px', background: '#06b6d4', color: '#FFFFFF', 
+                  border: 'none', borderRadius: '12px', fontSize: '15px', fontWeight: 800, letterSpacing: '1px',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                  cursor: isLoading ? 'not-allowed' : 'pointer', transition: 'all 0.3s',
+                  boxShadow: '0 8px 24px rgba(6, 182, 212, 0.25)'
+                }}
+              >
+                {isLoading ? (
+                  <Cpu className="spin" size={20} />
+                ) : (
+                  <>
+                    VERIFY IDENTITY
+                    <ShieldCheck size={20} />
+                  </>
+                )}
+              </button>
+            </form>
           )}
-        </AnimatePresence>
 
-        <div className="security-badge" style={{ borderColor: 'rgba(59, 130, 246, 0.2)', background: 'rgba(59, 130, 246, 0.05)' }}>
-          <Signal size={14} color="var(--accent-cyan)" />
-          <span style={{ color: 'var(--accent-cyan)', fontWeight: 700 }}>SECURE UPLINK ESTABLISHED</span>
-        </div>
+          <AnimatePresence>
+            {showError && (
+              <motion.div 
+                initial={{ opacity: 0, height: 0 }} 
+                animate={{ opacity: 1, height: 'auto' }} 
+                exit={{ opacity: 0, height: 0 }}
+                style={{ overflow: 'hidden' }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '14px', background: 'rgba(239, 68, 68, 0.06)', border: '1px solid rgba(239, 68, 68, 0.2)', borderRadius: '10px', color: '#ef4444', fontSize: '13px', fontWeight: 600, marginTop: '8px' }}>
+                  <ShieldAlert size={16} />
+                  <span>{showError}</span>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
 
-        <div className="login-footer" style={{ marginTop: '24px', borderTop: '1px solid rgba(59, 130, 246, 0.1)', paddingTop: '16px', textAlign: 'center' }}>
-          <NavLink to="/login" style={{ color: 'var(--accent-cyan)', textDecoration: 'none', fontSize: '0.8rem', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', opacity: 0.7 }}>
-            <ArrowRight size={14} style={{ transform: 'rotate(180deg)' }} /> BACK TO STANDARD LOGIN
-          </NavLink>
-        </div>
-      </motion.div>
-
-      {/* Page-level status indicators */}
-      <div className="login-status-indicators" style={{ bottom: '40px', right: '40px' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '8px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', background: 'rgba(15, 23, 42, 0.8)', padding: '8px 16px', borderRadius: '8px', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-            <span style={{ fontSize: '0.65rem', fontWeight: 800, color: 'var(--accent-cyan)' }}>COMMS_STRENGTH</span>
-            <div style={{ display: 'flex', gap: '2px' }}>
-              {[1, 2, 3, 4].map(i => <div key={i} style={{ width: '3px', height: i * 3, background: 'var(--accent-cyan)' }} />)}
-            </div>
+          <div style={{ marginTop: '20px', borderTop: '1px solid rgba(6, 182, 212, 0.1)', paddingTop: '24px', textAlign: 'center' }}>
+            <NavLink to="/login" style={{ color: '#64748B', textDecoration: 'none', fontSize: '13px', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '8px', transition: 'color 0.2s' }} onMouseOver={(e) => e.currentTarget.style.color = '#06b6d4'} onMouseOut={(e) => e.currentTarget.style.color = '#64748B'}>
+              <ArrowRight size={14} style={{ transform: 'rotate(180deg)' }} /> RETURN TO STANDARD PORTAL
+            </NavLink>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--accent-green)', fontSize: '0.7rem', fontWeight: 800 }}>
-             <Radio size={14} className="pulse" /> LIVE TELEMETRY SYNC
-          </div>
-        </div>
+        </motion.div>
       </div>
 
-      <div className="login-sys-log" style={{ bottom: '40px', left: '40px', opacity: 0.3 }}>
-        <p>TERMINAL_ID: DISPATCH-X7</p>
-        <p>PROTOCOL: CS-SECURE-v4</p>
-        <p>ENCRYPTION: QUANTUM-SAFE</p>
-      </div>
+      {/* Embedded Global Styles to avoid breaking any other page, since we are overriding locally */}
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        .spin {
+          animation: spin 1s linear infinite;
+        }
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover, 
+        input:-webkit-autofill:focus, 
+        input:-webkit-autofill:active{
+            -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
+            -webkit-text-fill-color: #0f172a !important;
+            transition: background-color 5000s ease-in-out 0s;
+        }
+        @media (max-width: 900px) {
+          .fleet-login-container {
+             flex-direction: column !important;
+          }
+          .fleet-login-left {
+             display: none !important;
+          }
+          .fleet-login-right {
+             width: 100% !important;
+             min-width: 100% !important;
+          }
+        }
+      `}</style>
     </div>
   );
 };

src/pages/FleetOperatorDashboard.tsx

@@ -1,339 +1,60 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { 
-  Activity, 
-  Truck, 
-  Zap, 
-  ShieldCheck, 
-  MapPin, 
-  Clock, 
-  Navigation, 
-  AlertTriangle,
-  Fuel,
-  Gauge,
-  Thermometer,
-  Wind,
-  Bell,
-  Settings,
-  ChevronRight,
-  LayoutGrid,
-  Route as RouteIcon,
-  Users,
-  Search,
-  CheckCircle2,
-  ShoppingCart
+  Building2, Truck, Users, CalendarDays, ClipboardCheck, 
+  ShoppingCart, Map, MapPin, Navigation, Link2, Activity,
+  Bell, Settings, Search, Database
 } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Card, StatCard } from '../components/Common';
-import { fleetApi } from '../api/fleet';
-import { incidentsApi } from '../api/incidents';
-import type { Incident } from '../api/types';
-import { 
-  AreaChart, 
-  Area, 
-  Tooltip, 
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis
-} from 'recharts';
+import { motion } from 'framer-motion';
 
-// --- NEW FLEET MODULES ---
+import { FleetOrganization } from './fleet/FleetOrganization';
 import { FleetAssets } from './fleet/FleetAssets';
 import { FleetPersonnel } from './fleet/FleetPersonnel';
-import { FleetInventory } from './fleet/FleetInventory';
 import { FleetScheduling } from './fleet/FleetScheduling';
+import { FleetInventory } from './fleet/FleetInventory';
+import { FleetWarehouseStock } from './fleet/FleetWarehouseStock';
+import { FleetPendingRequests } from './fleet/FleetPendingRequests';
+import { LiveDashboard } from './fleet/LiveDashboard';
+import { FleetActiveShifts } from './fleet/FleetActiveShifts';
+import { FleetTrips } from './fleet/FleetTrips';
+import { FleetAnalytics } from './fleet/FleetAnalytics';
+import './fleet/FleetOperator.css';
 
-// --- MOCK DATA FOR THE ENHANCED FEEL ---
-const MOCK_VEHICLES = [
-  { id: 'V001', number: 'TN-01-AM-1024', status: 'EN_ROUTE', speed: 45, fuel: 82, lat: 13.0827, lng: 80.2707, type: 'ALS' },
-  { id: 'V002', number: 'TN-05-AM-5521', status: 'IDLE', speed: 0, fuel: 65, lat: 13.0067, lng: 80.2575, type: 'BLS' },
-  { id: 'V003', number: 'TN-07-AM-1122', status: 'TRANSPORTING', speed: 52, fuel: 45, lat: 12.9667, lng: 80.2475, type: 'TRANSFER' },
-  { id: 'V004', number: 'TN-09-AM-9988', status: 'AT_SCENE', speed: 0, fuel: 78, lat: 12.9941, lng: 80.1709, type: 'AIR' },
+const SCOPE_MODULES = [
+  { id: 'overview', label: 'Live Dashboard', icon: Map, desc: 'Real-time fleet tracking & telemetry' },
+  { id: 'organization', label: 'Stations', icon: Building2, desc: 'Manage stations and profiles' },
+  { id: 'assets', label: 'Vehicle Management', icon: Truck, desc: 'Registration, Docs, Services' },
+  { id: 'personnel', label: 'Staff Management', icon: Users, desc: 'Pilots, EMTs, Doctors' },
+  { id: 'scheduling', label: 'Crew Scheduling', icon: CalendarDays, desc: 'Shift assignments & conflicts' },
+  { id: 'attendance', label: 'Attendance & Duty', icon: ClipboardCheck, desc: 'Daily attendance & payroll' },
+  { id: 'inventory', label: 'Inventory Management', icon: ShoppingCart, desc: 'Stock levels & consumption' },
+  { id: 'trips', label: 'Trip Management', icon: MapPin, desc: 'Active, pending, and completed trips' },
+  { id: 'telematics', label: 'GPS Telematics', icon: Navigation, desc: 'Geofencing, speed, SOS alerts' },
+  { id: 'referrals', label: 'Referral Network', icon: Link2, desc: 'Hospitals & specialty routing' },
+  { id: 'analytics', label: 'Fleet Analytics', icon: Activity, desc: 'KPIs, SLAs, and reports' },
+  { id: 'warehouse', label: 'Warehouse Stock', icon: Database, desc: 'Central warehouse inventory overview' },
+  { id: 'pending-requests', label: 'Stock Requests', icon: ShoppingCart, desc: 'View, approve, and complete supply restock requests' },
+  { id: 'active-shifts', label: 'Active Shifts', icon: Activity, desc: 'Real-time tracking of active shifts' }
 ];
 
-const PERFORMANCE_DATA = [
-  { time: '08:00', trips: 12, response: 14 },
-  { time: '10:00', trips: 18, response: 12 },
-  { time: '12:00', trips: 25, response: 18 },
-  { time: '14:00', trips: 22, response: 15 },
-  { time: '16:00', trips: 30, response: 22 },
-  { time: '18:00', trips: 28, response: 19 },
-];
-
-// --- LIVE MAP COMPONENT ---
-const CommandMap: React.FC<{ vehicles: any[] }> = ({ vehicles }) => {
-  const [L, setL] = useState<any>(null);
-  const mapRef = React.useRef<any>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    
-    const loadLeaflet = () => {
-      const leaflet = (window as any).L;
-      if (leaflet) {
-        setL(leaflet);
-        if (!mapRef.current) {
-          const m = leaflet.map('fleet-command-map', {
-            zoomControl: false,
-            attributionControl: false
-          }).setView([13.0827, 80.2707], 12);
-          
-          leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
-            maxZoom: 20
-          }).addTo(m);
-          
-          mapRef.current = m;
-        }
-      }
-    };
-
-    if (!(window as any).L) {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
-      document.head.appendChild(link);
-
-      const script = document.createElement('script');
-      script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
-      script.async = true;
-      script.onload = loadLeaflet;
-      document.head.appendChild(script);
-    } else {
-      loadLeaflet();
-    }
-
-    return () => {
-      if (mapRef.current) {
-        mapRef.current.remove();
-        mapRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!L || !mapRef.current) return;
-    const map = mapRef.current;
-    
-    vehicles.forEach(v => {
-      const getStatusColor = (status: string) => {
-        switch (status) {
-          case 'IDLE': return '#94A3B8';
-          case 'EN_ROUTE': return '#3B82F6';
-          case 'AT_SCENE': return '#F59E0B';
-          case 'TRANSPORTING': return '#EF4444';
-          case 'AT_HOSPITAL': return '#A855F7';
-          case 'BREAKDOWN': return '#000000';
-          case 'OFF_DUTY': return '#FFFFFF';
-          default: return '#3B82F6';
-        }
-      };
-      const color = getStatusColor(v.status);
-      const icon = L.divIcon({
-        className: 'custom-marker',
-        html: `<div style="background: ${color}; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px ${color}; border: 2px solid #fff;">
-                <div style="transform: rotate(45deg); color: #fff;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-1.1 0-2 .9-2 2v9c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg></div>
-              </div>`,
-        iconSize: [24, 24],
-        iconAnchor: [12, 24]
-      });
-      L.marker([v.lat, v.lng], { icon }).addTo(map).bindPopup(`<b>${v.number}</b><br/>Status: ${v.status}`);
-    });
-  }, [L, vehicles]);
-
-  return <div id="fleet-command-map" style={{ height: '100%', minHeight: '400px', borderRadius: '16px' }} />;
-};
+const PlaceholderModule: React.FC<{ label: string; icon: React.ElementType }> = ({ label, icon: Icon }) => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', minHeight: '400px', color: '#94A3B8', gap: '16px' }}>
+    <Icon size={64} style={{ opacity: 0.15 }} />
+    <h2 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#fff', margin: 0 }}>{label}</h2>
+    <p style={{ margin: 0, opacity: 0.6 }}>This module is under active development.</p>
+  </div>
+);
 
 export const FleetOperatorDashboard: React.FC = () => {
   const [searchParams] = useSearchParams();
-  const activeTab = searchParams.get('tab') || 'overview';
+  const activeModule = searchParams.get('tab') || 'overview';
 
-  const [isLoading, setIsLoading] = useState(true);
-  const [incidents, setIncidents] = useState<Incident[]>([]);
-  const [vehicles, setVehicles] = useState(MOCK_VEHICLES);
+  const activeModuleInfo = SCOPE_MODULES.find(m => m.id === activeModule);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const token = localStorage.getItem('teleems_token') || '';
-        const res = await incidentsApi.getIncidents({}, token);
-        if (res && res.data) setIncidents(res.data.slice(0, 5));
-      } catch (err) {
-        console.error(err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchData();
-  }, []);
-
-  const menuItems = [
-    { id: 'overview', label: 'Command Center', icon: LayoutGrid },
-    { id: 'assets', label: 'Fleet Assets', icon: Truck },
-    { id: 'personnel', label: 'Personnel Hub', icon: Users },
-    { id: 'scheduling', label: 'Mission Control', icon: Navigation },
-    { id: 'inventory', label: 'Supply Chain', icon: ShoppingCart },
-    { id: 'analytics', label: 'Fleet Intel', icon: Activity },
-  ];
-
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'overview':
-        return (
-          <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
-            {/* Stats Grid */}
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '24px', marginBottom: '32px' }}>
-              <StatCard label="Live Fleet" value="48" icon={Truck} glowColor="cyan" trend={{ value: '12%', isUp: true }} />
-              <StatCard label="Active Trips" value="12" icon={Activity} glowColor="green" pulse />
-              <StatCard label="Avg Response" value="8.4m" icon={Zap} glowColor="amber" trend={{ value: '0.5m', isUp: false }} />
-              <StatCard label="Compliance" value="99.2%" icon={ShieldCheck} glowColor="cyan" />
-            </div>
-
-            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '24px' }}>
-              {/* Left Column: Map and Fleet List */}
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-                <Card style={{ height: '500px', padding: 0, overflow: 'hidden', border: '1px solid rgba(59, 130, 246, 0.3)', position: 'relative' }}>
-                  <CommandMap vehicles={vehicles} />
-                  <div style={{ position: 'absolute', top: '20px', left: '20px', zIndex: 1000 }}>
-                    <div className="glass" style={{ padding: '12px', borderRadius: '12px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', border: '1px solid rgba(255,255,255,0.1)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#3B82F6' }}></div>
-                        <span style={{ fontSize: '0.65rem', fontWeight: 600 }}>EN ROUTE</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#94A3B8' }}></div>
-                        <span style={{ fontSize: '0.65rem', fontWeight: 600 }}>IDLE</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#F59E0B' }}></div>
-                        <span style={{ fontSize: '0.65rem', fontWeight: 600 }}>AT SCENE</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#EF4444' }}></div>
-                        <span style={{ fontSize: '0.65rem', fontWeight: 600 }}>TRANSPORTING</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#A855F7' }}></div>
-                        <span style={{ fontSize: '0.65rem', fontWeight: 600 }}>HOSPITAL</span>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#000000' }}></div>
-                        <span style={{ fontSize: '0.65rem', fontWeight: 600 }}>BREAKDOWN</span>
-                      </div>
-                    </div>
-                  </div>
-                </Card>
-
-                <Card title="Live Fleet Telemetry">
-                  <div className="table-container no-scrollbar" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-                      <thead>
-                        <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.1)', textAlign: 'left' }}>
-                          <th style={{ padding: '12px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Vehicle</th>
-                          <th style={{ padding: '12px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Status</th>
-                          <th style={{ padding: '12px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Speed</th>
-                          <th style={{ padding: '12px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Fuel</th>
-                          <th style={{ padding: '12px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {vehicles.map(v => (
-                          <tr key={v.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
-                            <td style={{ padding: '16px 12px' }}>
-                              <div style={{ fontWeight: 700 }}>{v.number}</div>
-                              <div style={{ fontSize: '0.7rem', opacity: 0.5 }}>{v.type} UNIT</div>
-                            </td>
-                            <td style={{ padding: '16px 12px' }}>
-                              <span style={{ 
-                                fontSize: '0.65rem', 
-                                fontWeight: 900, 
-                                padding: '4px 8px', 
-                                borderRadius: '4px',
-                                background: v.status === 'IDLE' ? 'rgba(148, 163, 184, 0.1)' : 'rgba(59, 130, 246, 0.1)',
-                                color: v.status === 'IDLE' ? '#94A3B8' : 'var(--accent-cyan)',
-                                border: `1px solid ${v.status === 'IDLE' ? 'rgba(148, 163, 184, 0.2)' : 'rgba(59, 130, 246, 0.2)'}`
-                              }}>{v.status}</span>
-                            </td>
-                            <td style={{ padding: '16px 12px' }} className="mono">{v.speed} km/h</td>
-                            <td style={{ padding: '16px 12px' }}>
-                              <div style={{ width: '100px', height: '6px', background: 'rgba(255,255,255,0.1)', borderRadius: '3px', overflow: 'hidden' }}>
-                                <div style={{ width: `${v.fuel}%`, height: '100%', background: v.fuel < 30 ? 'var(--alert-red)' : 'var(--accent-green)' }}></div>
-                              </div>
-                            </td>
-                            <td style={{ padding: '16px 12px' }}>
-                              <button className="btn-ghost-sm"><Navigation size={14} /></button>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </Card>
-              </div>
-
-              {/* Right Column: Performance and Incidents */}
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-                <Card title="Operational Load">
-                  <div style={{ height: '200px', width: '100%', position: 'relative' }}>
-                    <ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0}>
-                      <AreaChart data={PERFORMANCE_DATA}>
-                        <defs>
-                          <linearGradient id="colorTrips" x1="0" y1="0" x2="0" y2="1">
-                            <stop offset="5%" stopColor="var(--accent-cyan)" stopOpacity={0.3}/>
-                            <stop offset="95%" stopColor="var(--accent-cyan)" stopOpacity={0}/>
-                          </linearGradient>
-                        </defs>
-                        <Tooltip 
-                          contentStyle={{ background: '#1E293B', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px' }}
-                          itemStyle={{ color: 'var(--accent-cyan)' }}
-                        />
-                        <Area type="monotone" dataKey="trips" stroke="var(--accent-cyan)" fillOpacity={1} fill="url(#colorTrips)" />
-                      </AreaChart>
-                    </ResponsiveContainer>
-                  </div>
-                </Card>
-
-                <Card title="Active Incident Feed">
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                    {incidents.length > 0 ? incidents.map(inc => (
-                      <div key={inc.id} className="glass hover-glow" style={{ padding: '16px', borderRadius: '12px', borderLeft: `4px solid ${inc.severity === 'CRITICAL' ? 'var(--alert-red)' : 'var(--accent-cyan)'}` }}>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
-                          <span className="mono" style={{ fontSize: '0.8rem', fontWeight: 800 }}>#{inc.id.split('-').pop()?.toUpperCase()}</span>
-                          <span style={{ fontSize: '0.6rem', color: 'var(--alert-red)', fontWeight: 900 }}>{inc.severity}</span>
-                        </div>
-                        <div style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: '4px' }}>{inc.category}</div>
-                        <div style={{ fontSize: '0.75rem', opacity: 0.6, display: 'flex', alignItems: 'center', gap: '4px' }}>
-                          <MapPin size={12} /> {inc.address}
-                        </div>
-                      </div>
-                    )) : (
-                      <div style={{ textAlign: 'center', padding: '20px', opacity: 0.5 }}>No active incidents</div>
-                    )}
-                  </div>
-                  <button style={{ width: '100%', marginTop: '16px', padding: '10px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px', color: 'var(--accent-cyan)', fontWeight: 700, cursor: 'pointer' }}>
-                    VIEW ALL INCIDENTS
-                  </button>
-                </Card>
-
-                <Card title="Fleet Health Indicators">
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
-                    <div style={{ padding: '16px', background: 'rgba(255,255,255,0.02)', borderRadius: '12px', textAlign: 'center' }}>
-                      <Gauge size={24} color="var(--accent-cyan)" style={{ marginBottom: '8px' }} />
-                      <div style={{ fontSize: '1.25rem', fontWeight: 800 }}>82%</div>
-                      <div style={{ fontSize: '0.65rem', opacity: 0.5 }}>AVAILABILITY</div>
-                    </div>
-                    <div style={{ padding: '16px', background: 'rgba(255,255,255,0.02)', borderRadius: '12px', textAlign: 'center' }}>
-                      <Fuel size={24} color="var(--accent-green)" style={{ marginBottom: '8px' }} />
-                      <div style={{ fontSize: '1.25rem', fontWeight: 800 }}>94%</div>
-                      <div style={{ fontSize: '0.65rem', opacity: 0.5 }}>FUEL READINESS</div>
-                    </div>
-                  </div>
-                </Card>
-              </div>
-            </div>
-          </div>
-        );
+  const renderModuleContent = () => {
+    switch (activeModule) {
+      case 'organization':
+        return <FleetOrganization />;
       case 'assets':
         return <FleetAssets />;
       case 'personnel':
@@ -342,53 +63,101 @@ export const FleetOperatorDashboard: React.FC = () => {
         return <FleetScheduling />;
       case 'inventory':
         return <FleetInventory />;
+      case 'warehouse':
+        return <FleetWarehouseStock />;
+      case 'pending-requests':
+        return <FleetPendingRequests />;
+      case 'active-shifts':
+        return <FleetActiveShifts />;
+      case 'overview':
+        return <LiveDashboard />;
+      case 'attendance':
+        return <PlaceholderModule label="Attendance & Duty" icon={ClipboardCheck} />;
+      case 'trips':
+        return <FleetTrips />;
+      case 'telematics':
+        return <PlaceholderModule label="GPS Telematics" icon={Navigation} />;
+      case 'referrals':
+        return <PlaceholderModule label="Referral Network" icon={Link2} />;
       case 'analytics':
-        return <div className="glass" style={{ padding: '40px', textAlign: 'center', color: 'var(--text-secondary)' }}>Fleet Intelligence Reports Loading...</div>;
+        return <FleetAnalytics />;
       default:
-        return null;
+        return <PlaceholderModule label="Module Loading" icon={Activity} />;
     }
   };
 
   return (
-    <div className="fleet-operator-dashboard" style={{ 
-      background: '#020617', 
-      color: '#F8FAFC', 
-      minHeight: '100vh',
-      fontFamily: "'Inter', sans-serif",
+    <div className="fleet-dashboard-container" style={{ 
       display: 'flex', 
-      flexDirection: 'column'
+      flexDirection: 'column',
+      height: '100%', 
+      width: '100%',
+      background: '#040B16',
+      color: '#F8FAFC',
+      fontFamily: "'Inter', sans-serif"
     }}>
-      {/* Main Content Area */}
-      <div style={{ 
-        flex: 1, 
-        padding: '32px',
-        maxWidth: '100%'
+      {/* Top Header */}
+      <header className="fleet-dashboard-header" style={{ 
+        height: '72px', 
+        padding: '0 32px', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'space-between',
+        borderBottom: '1px solid rgba(255,255,255,0.05)', 
+        background: 'rgba(15, 23, 42, 0.5)', 
+        backdropFilter: 'blur(12px)', 
+        zIndex: 40,
+        flexShrink: 0
       }}>
-        {/* Header */}
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '32px' }}>
-          <div>
-            <h1 style={{ fontSize: '2.5rem', fontWeight: 900, letterSpacing: '-0.05em', color: 'var(--accent-cyan)', textTransform: 'uppercase' }}>
-              {menuItems.find(m => m.id === activeTab)?.label || 'Fleet Command'}
-            </h1>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', opacity: 0.7 }}>
-              <div className="status-pulse" style={{ background: 'var(--accent-green)' }}></div>
-              <span style={{ fontSize: '0.875rem' }}>Strategic Operations • Live Platform Telemetry</span>
-            </div>
-          </div>
-          <div style={{ display: 'flex', gap: '12px' }}>
-            <div style={{ background: 'rgba(255,255,255,0.05)', padding: '8px 16px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', gap: '12px' }}>
-              <div style={{ textAlign: 'right' }}>
-                <div style={{ fontSize: '0.65rem', textTransform: 'uppercase', opacity: 0.5 }}>Tactical Time</div>
-                <div style={{ fontWeight: 700 }}>{new Date().toLocaleTimeString()}</div>
-              </div>
-              <Clock size={20} color="var(--accent-cyan)" />
-            </div>
-            <button className="btn-icon glass"><Bell size={20} /></button>
-            <button className="btn-icon glass"><Settings size={20} /></button>
+        <div>
+          <h1 style={{ fontSize: '1.5rem', fontWeight: 900, color: '#fff', margin: 0, letterSpacing: '-0.5px' }}>
+            {activeModuleInfo?.label || 'Fleet Command'}
+          </h1>
+          <div style={{ fontSize: '0.7rem', color: '#94A3B8', display: 'flex', alignItems: 'center', gap: '8px', marginTop: '3px' }}>
+            <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#10B981', boxShadow: '0 0 8px #10B981' }} />
+            {activeModuleInfo?.desc || 'Secure Connection • TeleEMS Fleet'}
           </div>
         </div>
 
-        {renderContent()}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+          <div className="fleet-search-container" style={{ display: 'flex', alignItems: 'center', gap: '8px', background: 'rgba(255,255,255,0.03)', padding: '8px 16px', borderRadius: '20px', border: '1px solid rgba(255,255,255,0.06)' }}>
+            <Search size={14} color="#64748B" />
+            <input 
+              type="text" 
+              placeholder="Search fleet..." 
+              style={{ background: 'transparent', border: 'none', color: '#fff', fontSize: '0.82rem', width: '140px', outline: 'none' }} 
+            />
+          </div>
+          <button className="fleet-header-btn" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '10px', padding: '8px', color: '#94A3B8', cursor: 'pointer', position: 'relative', display: 'flex' }}>
+            <Bell size={18} />
+            <span style={{ position: 'absolute', top: 6, right: 6, width: '7px', height: '7px', background: '#EF4444', borderRadius: '50%', border: '1px solid #040B16' }} />
+          </button>
+          <button className="fleet-header-btn" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '10px', padding: '8px', color: '#94A3B8', cursor: 'pointer', display: 'flex' }}>
+            <Settings size={18} />
+          </button>
+          <div className="fleet-header-divider" style={{ width: '1px', height: '24px', background: 'rgba(255,255,255,0.07)' }} />
+          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            <div className="fleet-profile-name" style={{ textAlign: 'right' }}>
+              <div className="fleet-profile-title" style={{ fontSize: '0.8rem', fontWeight: 700, color: '#fff' }}>Station Incharge</div>
+              <div style={{ fontSize: '0.62rem', color: '#06B6D4' }}>Fleet Operator</div>
+            </div>
+            <div style={{ width: '34px', height: '34px', borderRadius: '10px', background: 'linear-gradient(135deg, #06B6D4, #3B82F6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Users size={16} color="#fff" />
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Scrollable Content */}
+      <div className="fleet-dashboard-content" style={{ flex: 1, overflowY: 'auto', padding: '32px' }}>
+        <motion.div
+          key={activeModule}
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.35, ease: 'easeOut' }}
+        >
+          {renderModuleContent()}
+        </motion.div>
       </div>
     </div>
   );

src/pages/fleet/FleetActiveShifts.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Clock, CheckCircle, Car, User, Activity, Loader2, Calendar } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+interface ActiveShift {
+  id: string;
+  vehicleId: string;
+  vehicle?: {
+    registration_number?: string;
+    vehicle_type?: string;
+  };
+  driverId: string;
+  driver?: {
+    userId?: string;
+    type?: string;
+    user?: { name?: string };
+  };
+  staffId: string;
+  staff?: {
+    userId?: string;
+    type?: string;
+    user?: { name?: string };
+  };
+  startTime: string;
+  endTime: string | null;
+  status: string;
+  notes?: string | null;
+}
+
+export const FleetActiveShifts: React.FC = () => {
+  const [shifts, setShifts] = useState<ActiveShift[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const fetchActiveShifts = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      const res = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/shifts/active', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      const json = await res.json();
+      if (!res.ok) throw new Error(json.message || 'Failed to fetch active shifts');
+      
+      const data = json?.data?.data || json?.data || [];
+      setShifts(Array.isArray(data) ? data : []);
+    } catch (err: any) {
+      console.error('Error fetching active shifts:', err);
+      setError(err.message || 'An error occurred while fetching shifts.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchActiveShifts();
+  }, [fetchActiveShifts]);
+
+  return (
+    <div style={{ color: '#F8FAFC', fontFamily: 'Inter, sans-serif' }}>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: 24 }}>
+        <button 
+          onClick={fetchActiveShifts}
+          style={{ 
+            display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', 
+            background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', 
+            borderRadius: 10, color: '#94A3B8', fontSize: '0.75rem', fontWeight: 700, cursor: 'pointer' 
+          }}
+        >
+          {loading ? <Loader2 size={13} className="spin" /> : '↺ Refresh'}
+        </button>
+      </div>
+
+      {error && (
+        <div style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', padding: '12px 16px', borderRadius: 12, color: '#EF4444', fontSize: '0.8rem', marginBottom: 20 }}>
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
+          <Loader2 size={32} color="#06B6D4" className="spin" />
+        </div>
+      ) : shifts.length === 0 ? (
+        <div style={{ textAlign: 'center', padding: '64px 24px', background: 'rgba(255,255,255,0.01)', border: '1px dashed rgba(255,255,255,0.08)', borderRadius: 16 }}>
+          <CheckCircle size={36} color="#10B981" style={{ marginBottom: 12 }} />
+          <p style={{ color: '#64748B', fontSize: '0.88rem', margin: 0 }}>No active shifts at the moment. All shifts have been completed or none are currently scheduled.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          {shifts.map((shift, i) => (
+            <motion.div 
+              key={shift.id} 
+              initial={{ opacity: 0, y: 10 }} 
+              animate={{ opacity: 1, y: 0 }} 
+              transition={{ delay: i * 0.05 }}
+              style={{ 
+                background: 'rgba(255,255,255,0.02)', 
+                border: '1px solid rgba(255,255,255,0.07)', 
+                borderRadius: 16, 
+                padding: '18px 24px', 
+              }}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+                  {/* Vehicle identifier */}
+                  <div style={{ padding: '6px 12px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 9, display: 'flex', alignItems: 'center', gap: 7 }}>
+                    <Car size={14} color="#06B6D4" />
+                    <span style={{ fontWeight: 800, fontSize: '0.82rem', color: '#000000' }}>
+                      {shift.vehicle?.registration_number || 'Unknown Vehicle'}
+                    </span>
+                    <span style={{ fontSize: '0.65rem', fontWeight: 700, color: '#000000', background: 'rgba(6,182,212,0.12)', padding: '1px 7px', borderRadius: 4 }}>
+                      {shift.vehicle?.vehicle_type || 'N/A'}
+                    </span>
+                  </div>
+                  
+                  {/* Status Badge */}
+                  <div style={{ padding: '5px 10px', background: 'rgba(16,185,129,0.1)', border: `1px solid rgba(16,185,129,0.3)`, borderRadius: 7, display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <Clock size={11} color="#10B981" />
+                    <span style={{ fontSize: '0.7rem', fontWeight: 700, color: '#10B981' }}>{shift.status}</span>
+                  </div>
+                  
+                  {/* Time details */}
+                  <div style={{ fontSize: '0.72rem', fontWeight: 600, color: '#64748B', display: 'flex', alignItems: 'center', gap: 4 }}>
+                    <Calendar size={12} /> Started: {new Date(shift.startTime).toLocaleString()}
+                  </div>
+                </div>
+              </div>
+
+              {/* Crew Members */}
+              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                {/* Driver */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(6,182,212,0.04)', border: '1px solid rgba(6,182,212,0.08)', borderRadius: 12, flex: 1, minWidth: 200 }}>
+                  <User size={15} color="#06B6D4" />
+                  <div>
+                    <div style={{ fontSize: '0.58rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 700 }}>Pilot Driver</div>
+                    <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#000000' }}>
+                      {shift.driver?.user?.name || 'Driver Profile'}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Staff / EMT */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(59,130,246,0.04)', border: '1px solid rgba(59,130,246,0.08)', borderRadius: 12, flex: 1, minWidth: 200 }}>
+                  <Activity size={15} color="#3B82F6" />
+                  <div>
+                    <div style={{ fontSize: '0.58rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 700 }}>
+                      {shift.staff?.type === 'DOCTOR' ? 'Medical Doctor' : 'Emergency Medical Technician'}
+                    </div>
+                    <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#000000' }}>
+                      {shift.staff?.user?.name || 'EMT/Staff Profile'}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      )}
+
+      <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .spin{animation:spin 1s linear infinite}`}</style>
+    </div>
+  );
+};

src/pages/fleet/FleetAnalytics.tsx

@@ -0,0 +1,620 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { 
+  Activity, 
+  Truck, 
+  Users, 
+  TrendingUp, 
+  Calendar, 
+  Clock, 
+  AlertCircle, 
+  Loader2, 
+  RefreshCw,
+  Award,
+  Shield,
+  MapPin,
+  Car
+} from 'lucide-react';
+import { 
+  ResponsiveContainer, 
+  PieChart, 
+  Pie, 
+  Cell, 
+  BarChart, 
+  Bar, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  Legend,
+  AreaChart,
+  Area
+} from 'recharts';
+import { motion } from 'framer-motion';
+import { fleetApi } from '../../api/fleet';
+
+interface APIVehicle {
+  id: string;
+  registration_number: string;
+  chassis_number?: string | null;
+  brand?: string;
+  model?: string;
+  vehicle_type: string;
+  status?: string;
+  ownership_type?: string;
+  gps_lat?: string | number;
+  gps_lon?: string | number;
+  activeShift?: any;
+  activeRoster?: any;
+  createdAt?: string;
+}
+
+export const FleetAnalytics: React.FC = () => {
+  const [vehicles, setVehicles] = useState<APIVehicle[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [timeRange, setTimeRange] = useState<'7D' | '30D' | 'ALL'>('ALL');
+
+  const token = localStorage.getItem('teleems_token') || '';
+
+  const fetchVehiclesData = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fleetApi.getVehicles(token);
+      let list: APIVehicle[] = [];
+      if (res?.data?.data && Array.isArray(res.data.data)) list = res.data.data;
+      else if (res?.data && Array.isArray(res.data)) list = res.data;
+      else if (Array.isArray(res)) list = res;
+      setVehicles(list);
+    } catch (err: any) {
+      console.error('Failed to fetch vehicles for analytics:', err);
+      setError('Failed to load fleet analytics data. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    fetchVehiclesData();
+  }, [fetchVehiclesData]);
+
+  // --- DERIVED ANALYTICS METRICS ---
+  const stats = useMemo(() => {
+    const total = vehicles.length;
+    const available = vehicles.filter(v => v.status === 'AVAILABLE').length;
+    const busy = vehicles.filter(v => v.status === 'BUSY').length;
+    const offline = vehicles.filter(v => v.status === 'OFFLINE' || (!v.status)).length;
+    const withActiveShift = vehicles.filter(v => v.activeShift !== null).length;
+    const withActiveRoster = vehicles.filter(v => v.activeRoster !== null).length;
+    const hasGps = vehicles.filter(v => v.gps_lat && parseFloat(v.gps_lat as string) !== 0).length;
+
+    const utilizationRate = total > 0 ? Math.round(((busy + withActiveShift) / total) * 100) : 0;
+
+    return {
+      total,
+      available,
+      busy,
+      offline,
+      withActiveShift,
+      withActiveRoster,
+      hasGps,
+      utilizationRate
+    };
+  }, [vehicles]);
+
+  // Chart 1: Status Distribution
+  const statusChartData = useMemo(() => {
+    const statuses: Record<string, { count: number; color: string }> = {
+      AVAILABLE: { count: 0, color: '#10B981' }, // Emerald
+      BUSY: { count: 0, color: '#F59E0B' },      // Amber
+      OFFLINE: { count: 0, color: '#475569' },   // Slate
+      MAINTENANCE: { count: 0, color: '#EF4444' } // Red
+    };
+
+    vehicles.forEach(v => {
+      const status = (v.status || 'OFFLINE').toUpperCase();
+      if (statuses[status]) {
+        statuses[status].count += 1;
+      } else {
+        statuses['OFFLINE'].count += 1;
+      }
+    });
+
+    return Object.entries(statuses).map(([name, info]) => ({
+      name,
+      value: info.count,
+      color: info.color
+    })).filter(d => d.value > 0);
+  }, [vehicles]);
+
+  // Chart 2: Vehicle Type Breakdown
+  const typeChartData = useMemo(() => {
+    const types: Record<string, number> = {};
+    vehicles.forEach(v => {
+      const type = v.vehicle_type || 'Unknown';
+      types[type] = (types[type] || 0) + 1;
+    });
+
+    const colors = ['#06B6D4', '#3B82F6', '#8B5CF6', '#EC4899', '#F43F5E'];
+    return Object.entries(types).map(([name, value], idx) => ({
+      name,
+      value,
+      color: colors[idx % colors.length]
+    }));
+  }, [vehicles]);
+
+  // Chart 3: Shift / Roster Deployment Metrics
+  const deploymentChartData = useMemo(() => {
+    let activeShiftCount = 0;
+    let scheduledRosterCount = 0;
+    let unassignedCount = 0;
+
+    vehicles.forEach(v => {
+      if (v.activeShift) {
+        activeShiftCount++;
+      } else if (v.activeRoster) {
+        scheduledRosterCount++;
+      } else {
+        unassignedCount++;
+      }
+    });
+
+    return [
+      { name: 'Active Shift (On Duty)', value: activeShiftCount, color: '#10B981' },
+      { name: 'Scheduled Roster (Planned)', value: scheduledRosterCount, color: '#8B5CF6' },
+      { name: 'Unassigned Units', value: unassignedCount, color: '#F59E0B' }
+    ];
+  }, [vehicles]);
+
+  // Chart 4: Brand Representation
+  const brandChartData = useMemo(() => {
+    const brands: Record<string, number> = {};
+    vehicles.forEach(v => {
+      const brand = v.brand || 'Unspecified';
+      brands[brand] = (brands[brand] || 0) + 1;
+    });
+
+    const colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];
+    return Object.entries(brands).map(([name, value], idx) => ({
+      name,
+      count: value,
+      color: colors[idx % colors.length]
+    }));
+  }, [vehicles]);
+
+  // Chart 5: Mock Fleet Mileage / Performance (Time Series)
+  const performanceTrendData = useMemo(() => {
+    return [
+      { name: '06:00', trips: 2, responseTime: 8, efficiency: 94 },
+      { name: '08:00', trips: 5, responseTime: 12, efficiency: 89 },
+      { name: '10:00', trips: 8, responseTime: 14, efficiency: 85 },
+      { name: '12:00', trips: 6, responseTime: 10, efficiency: 91 },
+      { name: '14:00', trips: 9, responseTime: 15, efficiency: 82 },
+      { name: '16:00', trips: 11, responseTime: 13, efficiency: 86 },
+      { name: '18:00', trips: 14, responseTime: 16, efficiency: 80 },
+      { name: '20:00', trips: 12, responseTime: 11, efficiency: 88 },
+      { name: '22:00', trips: 7, responseTime: 9, efficiency: 93 },
+      { name: '00:00', trips: 4, responseTime: 7, efficiency: 95 },
+    ];
+  }, []);
+
+  const customTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      return (
+        <div style={{
+          background: '#0F172A',
+          border: '1px solid rgba(255,255,255,0.1)',
+          padding: '12px 16px',
+          borderRadius: 12,
+          boxShadow: '0 10px 25px rgba(0,0,0,0.5)'
+        }}>
+          <p style={{ margin: 0, fontSize: '0.75rem', fontWeight: 800, color: '#94A3B8', textTransform: 'uppercase' }}>
+            {payload[0].name}
+          </p>
+          <p style={{ margin: '4px 0 0', fontSize: '1.25rem', fontWeight: 900, color: '#fff' }}>
+            {payload[0].value} <span style={{ fontSize: '0.75rem', fontWeight: 500, color: '#64748B' }}>Ambulances</span>
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 28, color: '#F8FAFC' }}>
+      
+      {/* HEADER CONTROLS */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
+        <div>
+          <h2 style={{ fontSize: '1.4rem', fontWeight: 900, color: '#fff', margin: 0, letterSpacing: '-0.5px' }}>
+            Fleet Telemetry & Resource Intelligence
+          </h2>
+          <p style={{ margin: '4px 0 0', fontSize: '0.78rem', color: '#64748B' }}>
+            Real-time analytics harvested from live active-shifts, scheduling rosters and vehicle metadata.
+          </p>
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={{ display: 'flex', gap: 4, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: 3 }}>
+            {(['7D', '30D', 'ALL'] as const).map(range => (
+              <button 
+                key={range} 
+                onClick={() => setTimeRange(range)}
+                style={{ 
+                  padding: '6px 12px', 
+                  borderRadius: 8, 
+                  border: 'none', 
+                  fontSize: '0.72rem', 
+                  fontWeight: 700, 
+                  cursor: 'pointer', 
+                  background: timeRange === range ? 'linear-gradient(135deg,#06B6D4,#3B82F6)' : 'transparent', 
+                  color: timeRange === range ? '#fff' : '#64748B', 
+                  transition: 'all 0.2s' 
+                }}
+              >
+                {range === '7D' ? '7 Days' : range === '30D' ? '30 Days' : 'All Time'}
+              </button>
+            ))}
+          </div>
+
+          <button 
+            onClick={fetchVehiclesData} 
+            disabled={loading}
+            style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: 8, 
+              padding: '8px 16px', 
+              background: 'rgba(255,255,255,0.03)', 
+              border: '1px solid rgba(255,255,255,0.08)', 
+              borderRadius: 10, 
+              color: '#06B6D4', 
+              fontSize: '0.75rem', 
+              fontWeight: 700, 
+              cursor: 'pointer',
+              transition: 'all 0.2s'
+            }}
+          >
+            <RefreshCw size={12} className={loading ? 'spin' : ''} /> Sync Engine
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 350, gap: 16 }}>
+          <Loader2 size={36} className="spin" color="#06B6D4" />
+          <p style={{ margin: 0, fontSize: '0.85rem', color: '#64748B', fontWeight: 600 }}>Analyzing fleet database records...</p>
+        </div>
+      ) : error ? (
+        <div style={{ textAlign: 'center', padding: '64px 24px', background: 'rgba(239,68,68,0.03)', border: '1px dashed rgba(239,68,68,0.15)', borderRadius: 16 }}>
+          <AlertCircle size={40} color="#EF4444" style={{ marginBottom: 12 }} />
+          <p style={{ color: '#EF4444', fontSize: '0.88rem', fontWeight: 600, margin: 0 }}>{error}</p>
+          <button onClick={fetchVehiclesData} style={{ marginTop: 16, padding: '8px 16px', background: '#EF4444', border: 'none', borderRadius: 8, color: '#fff', fontSize: '0.78rem', fontWeight: 700, cursor: 'pointer' }}>Retry Sync</button>
+        </div>
+      ) : vehicles.length === 0 ? (
+        <div style={{ textAlign: 'center', padding: '64px 24px', background: 'rgba(255,255,255,0.01)', border: '1px dashed rgba(255,255,255,0.08)', borderRadius: 16 }}>
+          <Truck size={40} color="#64748B" style={{ marginBottom: 12 }} />
+          <p style={{ color: '#64748B', fontSize: '0.88rem', margin: 0 }}>No active fleet assets found in the system registry.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+          
+          {/* STAT CARDS SECTION */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
+            
+            {/* Total Fleet Size */}
+            <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, padding: 20 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                <span style={{ fontSize: '0.75rem', fontWeight: 700, color: '#64748B', textTransform: 'uppercase' }}>Fleet Size</span>
+                <div style={{ background: 'rgba(59,130,246,0.1)', color: '#3B82F6', borderRadius: 8, padding: 6, display: 'flex' }}>
+                  <Truck size={16} />
+                </div>
+              </div>
+              <div style={{ fontSize: '2rem', fontWeight: 900, color: '#fff' }}>{stats.total}</div>
+              <div style={{ fontSize: '0.68rem', color: '#64748B', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
+                <TrendingUp size={11} color="#10B981" /> Fully Registered Active Units
+              </div>
+            </div>
+
+            {/* Utilization Rate */}
+            <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, padding: 20 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                <span style={{ fontSize: '0.75rem', fontWeight: 700, color: '#64748B', textTransform: 'uppercase' }}>Utilization Rate</span>
+                <div style={{ background: 'rgba(16,185,129,0.1)', color: '#10B981', borderRadius: 8, padding: 6, display: 'flex' }}>
+                  <Activity size={16} />
+                </div>
+              </div>
+              <div style={{ fontSize: '2rem', fontWeight: 900, color: '#fff' }}>{stats.utilizationRate}%</div>
+              <div style={{ fontSize: '0.68rem', color: '#64748B', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
+                <TrendingUp size={11} color="#10B981" /> Ratio of On-Duty Deployments
+              </div>
+            </div>
+
+            {/* Shift Deployment Status */}
+            <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, padding: 20 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                <span style={{ fontSize: '0.75rem', fontWeight: 700, color: '#64748B', textTransform: 'uppercase' }}>Active Duty Shifts</span>
+                <div style={{ background: 'rgba(139,92,246,0.1)', color: '#8B5CF6', borderRadius: 8, padding: 6, display: 'flex' }}>
+                  <Clock size={16} />
+                </div>
+              </div>
+              <div style={{ fontSize: '2rem', fontWeight: 900, color: '#fff' }}>{stats.withActiveShift}</div>
+              <div style={{ fontSize: '0.68rem', color: '#64748B', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
+                <TrendingUp size={11} color="#8B5CF6" /> {stats.withActiveRoster} Planned Rosters Scheduled
+              </div>
+            </div>
+
+            {/* GPS Telemetry Connectivity */}
+            <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, padding: 20 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
+                <span style={{ fontSize: '0.75rem', fontWeight: 700, color: '#64748B', textTransform: 'uppercase' }}>GPS Core Status</span>
+                <div style={{ background: 'rgba(6,182,212,0.1)', color: '#06B6D4', borderRadius: 8, padding: 6, display: 'flex' }}>
+                  <MapPin size={16} />
+                </div>
+              </div>
+              <div style={{ fontSize: '2rem', fontWeight: 900, color: '#fff' }}>{stats.hasGps} / {stats.total}</div>
+              <div style={{ fontSize: '0.68rem', color: '#10B981', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
+                <Award size={11} /> 100% Secure Telemetry Sync
+              </div>
+            </div>
+
+          </div>
+
+          {/* MAIN CHARTS SECTION */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20, flexWrap: 'wrap' }}>
+            
+            {/* Chart Block 1: Deployment & Utilization */}
+            <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 24 }}>
+              <h3 style={{ fontSize: '0.95rem', fontWeight: 800, margin: '0 0 4px', color: '#fff' }}>Operational Deployment Dynamics</h3>
+              <p style={{ fontSize: '0.72rem', color: '#64748B', margin: '0 0 24px' }}>Real-time balance of actively deployed shifts vs scheduled rosters.</p>
+              <div style={{ height: 260 }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={deploymentChartData} margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.03)" />
+                    <XAxis dataKey="name" stroke="#64748B" fontSize={11} tickLine={false} />
+                    <YAxis stroke="#64748B" fontSize={11} tickLine={false} />
+                    <Tooltip content={customTooltip} />
+                    <Bar dataKey="value" radius={[8, 8, 0, 0]} barSize={50}>
+                      {deploymentChartData.map((entry, idx) => (
+                        <Cell key={`cell-${idx}`} fill={entry.color} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+
+            {/* Chart Block 2: Fleet Status Pie Chart */}
+            <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 24, display: 'flex', flexDirection: 'column' }}>
+              <h3 style={{ fontSize: '0.95rem', fontWeight: 800, margin: '0 0 4px', color: '#fff' }}>Availability & Health Allocation</h3>
+              <p style={{ fontSize: '0.72rem', color: '#64748B', margin: '0 0 24px' }}>Current real-time operational state distribution across the entire fleet.</p>
+              <div style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20, flexWrap: 'wrap' }}>
+                <div style={{ width: 170, height: 170, position: 'relative' }}>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={statusChartData}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={55}
+                        outerRadius={75}
+                        paddingAngle={6}
+                        dataKey="value"
+                      >
+                        {statusChartData.map((entry, index) => (
+                          <Cell key={`cell-${index}`} fill={entry.color} stroke="transparent" />
+                        ))}
+                      </Pie>
+                      <Tooltip content={customTooltip} />
+                    </PieChart>
+                  </ResponsiveContainer>
+                  {/* Central Text inside Pie */}
+                  <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+                    <span style={{ fontSize: '1.5rem', fontWeight: 900, color: '#fff' }}>{stats.total}</span>
+                    <span style={{ fontSize: '0.55rem', fontWeight: 700, color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Active Units</span>
+                  </div>
+                </div>
+
+                {/* Legend list */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 140 }}>
+                  {statusChartData.map((item, idx) => {
+                    const pct = stats.total > 0 ? Math.round((item.value / stats.total) * 100) : 0;
+                    return (
+                      <div key={idx} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                          <span style={{ width: 8, height: 8, borderRadius: '50%', background: item.color }} />
+                          <span style={{ fontSize: '0.72rem', fontWeight: 700, color: '#94A3B8' }}>{item.name}</span>
+                        </div>
+                        <span style={{ fontSize: '0.72rem', fontWeight: 900, color: '#fff' }}>{item.value} ({pct}%)</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          {/* SECOND CHARTS ROW */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 20, flexWrap: 'wrap' }}>
+            
+            {/* Chart Block 3: Brand Representation */}
+            <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 24 }}>
+              <h3 style={{ fontSize: '0.95rem', fontWeight: 800, margin: '0 0 4px', color: '#fff' }}>Fleet Vehicle Brands</h3>
+              <p style={{ fontSize: '0.72rem', color: '#64748B', margin: '0 0 24px' }}>Composition of mechanical support brands currently integrated.</p>
+              <div style={{ height: 240 }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={brandChartData}
+                      dataKey="count"
+                      nameKey="name"
+                      cx="50%"
+                      cy="50%"
+                      outerRadius={80}
+                      label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
+                      labelLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                    >
+                      {brandChartData.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={entry.color} stroke="transparent" />
+                      ))}
+                    </Pie>
+                    <Tooltip />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+
+            {/* Chart Block 4: Vehicle Type Breakdown */}
+            <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 24 }}>
+              <h3 style={{ fontSize: '0.95rem', fontWeight: 800, margin: '0 0 4px', color: '#fff' }}>Vehicle Type Distribution</h3>
+              <p style={{ fontSize: '0.72rem', color: '#64748B', margin: '0 0 24px' }}>Classification of fleet units (ALS: Advanced Life Support, BLS: Basic Life Support, etc.).</p>
+              <div style={{ height: 240 }}>
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={typeChartData} layout="vertical" margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.03)" />
+                    <XAxis type="number" stroke="#64748B" fontSize={11} tickLine={false} />
+                    <YAxis type="category" dataKey="name" stroke="#64748B" fontSize={11} tickLine={false} />
+                    <Tooltip />
+                    <Bar dataKey="value" radius={[0, 6, 6, 0]} barSize={24}>
+                      {typeChartData.map((entry, idx) => (
+                        <Cell key={`cell-${idx}`} fill={entry.color} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+
+          </div>
+
+          {/* PERFORMANCE TREND ANALYSIS (AREA CHART) */}
+          <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 24 }}>
+            <h3 style={{ fontSize: '0.95rem', fontWeight: 800, margin: '0 0 4px', color: '#fff' }}>Performance Trend & Mission Load Density</h3>
+            <p style={{ fontSize: '0.72rem', color: '#64748B', margin: '0 0 24px' }}>Hourly analysis tracking active emergencies, average dispatch response delays (min), and fleet efficiency (%).</p>
+            <div style={{ height: 260 }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={performanceTrendData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                  <defs>
+                    <linearGradient id="colorTrips" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#06B6D4" stopOpacity={0.4}/>
+                      <stop offset="95%" stopColor="#06B6D4" stopOpacity={0}/>
+                    </linearGradient>
+                    <linearGradient id="colorResponse" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#8B5CF6" stopOpacity={0.4}/>
+                      <stop offset="95%" stopColor="#8B5CF6" stopOpacity={0}/>
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.03)" />
+                  <XAxis dataKey="name" stroke="#64748B" fontSize={11} tickLine={false} />
+                  <YAxis stroke="#64748B" fontSize={11} tickLine={false} />
+                  <Tooltip contentStyle={{ background: '#0F172A', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12 }} />
+                  <Legend verticalAlign="top" height={36} wrapperStyle={{ fontSize: '0.75rem', fontWeight: 700 }} />
+                  <Area type="monotone" name="Active Emergency Dispatches" dataKey="trips" stroke="#06B6D4" strokeWidth={2} fillOpacity={1} fill="url(#colorTrips)" />
+                  <Area type="monotone" name="Response Speed (Minutes)" dataKey="responseTime" stroke="#8B5CF6" strokeWidth={2} fillOpacity={1} fill="url(#colorResponse)" />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+
+          {/* DYNAMIC ACTIVE WORKFORCE INTEGRATION STATUS LIST */}
+          <div style={{ background: 'rgba(255,255,255,0.01)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, padding: 24 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
+              <div>
+                <h3 style={{ fontSize: '0.95rem', fontWeight: 800, margin: 0, color: '#fff' }}>Operational Dispatch Readiness List</h3>
+                <p style={{ fontSize: '0.72rem', color: '#64748B', margin: '4px 0 0' }}>Real-time assignment states of active fleet units and current assigned pilots / EMTs.</p>
+              </div>
+              <div style={{ background: 'rgba(16,185,129,0.1)', color: '#10B981', borderRadius: 8, padding: '4px 12px', fontSize: '0.7rem', fontWeight: 800, display: 'flex', alignItems: 'center', gap: 6 }}>
+                <Shield size={12} /> Live Compliance Engine
+              </div>
+            </div>
+
+            <div style={{ overflowX: 'auto' }}>
+              <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left', fontSize: '0.8rem' }}>
+                <thead>
+                  <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
+                    <th style={{ padding: '12px 16px', color: '#64748B', fontWeight: 700 }}>VEHICLE UNIT</th>
+                    <th style={{ padding: '12px 16px', color: '#64748B', fontWeight: 700 }}>TYPE</th>
+                    <th style={{ padding: '12px 16px', color: '#64748B', fontWeight: 700 }}>ASSIGNMENT STATE</th>
+                    <th style={{ padding: '12px 16px', color: '#64748B', fontWeight: 700 }}>ACTIVE PILOT (DRIVER)</th>
+                    <th style={{ padding: '12px 16px', color: '#64748B', fontWeight: 700 }}>ACTIVE STAFF (EMT)</th>
+                    <th style={{ padding: '12px 16px', color: '#64748B', fontWeight: 700 }}>STATUS</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {vehicles.map((v) => {
+                    // Extract active driver/staff from shift or roster
+                    const driverName = v.activeShift?.driver?.user?.name || v.activeRoster?.driver?.user?.name || '—';
+                    const driverPhone = v.activeShift?.driver?.user?.phone || v.activeRoster?.driver?.user?.phone || '';
+                    const staffName = v.activeShift?.staff?.user?.name || v.activeRoster?.staff?.user?.name || '—';
+
+                    const deploymentState = v.activeShift 
+                      ? { label: 'ON ACTIVE SHIFT', bg: 'rgba(16,185,129,0.1)', color: '#10B981' }
+                      : v.activeRoster
+                        ? { label: 'SCHEDULED ROSTER', bg: 'rgba(139,92,246,0.1)', color: '#8B5CF6' }
+                        : { label: 'UNASSIGNED IDLE', bg: 'rgba(255,255,255,0.04)', color: '#64748B' };
+
+                    const statusColor = v.status === 'AVAILABLE' 
+                      ? '#10B981' 
+                      : v.status === 'BUSY' 
+                        ? '#F59E0B' 
+                        : '#475569';
+
+                    return (
+                      <tr key={v.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)', transition: 'background 0.2s' }} className="table-row">
+                        <td style={{ padding: '16px', display: 'flex', alignItems: 'center', gap: 10 }}>
+                          <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <Car size={14} color="#06B6D4" />
+                          </div>
+                          <div>
+                            <div style={{ fontWeight: 800, color: '#fff' }}>{v.registration_number}</div>
+                            <div style={{ fontSize: '0.68rem', color: '#64748B' }}>{v.brand} {v.model}</div>
+                          </div>
+                        </td>
+                        <td style={{ padding: '16px' }}>
+                          <span style={{ fontSize: '0.65rem', fontWeight: 800, color: '#06B6D4', background: 'rgba(6,182,212,0.12)', padding: '2px 8px', borderRadius: 6 }}>
+                            {v.vehicle_type}
+                          </span>
+                        </td>
+                        <td style={{ padding: '16px' }}>
+                          <span style={{ fontSize: '0.65rem', fontWeight: 800, background: deploymentState.bg, color: deploymentState.color, padding: '3px 8px', borderRadius: 6 }}>
+                            {deploymentState.label}
+                          </span>
+                        </td>
+                        <td style={{ padding: '16px' }}>
+                          {driverName !== '—' ? (
+                            <div>
+                              <div style={{ fontWeight: 700, color: '#E2E8F0' }}>{driverName}</div>
+                              {driverPhone && <div style={{ fontSize: '0.68rem', color: '#64748B' }}>{driverPhone}</div>}
+                            </div>
+                          ) : '—'}
+                        </td>
+                        <td style={{ padding: '16px' }}>
+                          <span style={{ fontWeight: 700, color: '#E2E8F0' }}>{staffName}</span>
+                        </td>
+                        <td style={{ padding: '16px' }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                            <span style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor }} />
+                            <span style={{ fontWeight: 800, color: statusColor }}>{v.status || 'OFFLINE'}</span>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+        </div>
+      )}
+
+      <style>{`
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        .spin { animation: spin 1s linear infinite; }
+        .table-row:hover { background: rgba(255,255,255,0.015); }
+      `}</style>
+
+    </div>
+  );
+};

src/pages/fleet/FleetAssets.tsx

@@ -1,207 +1,562 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
-  Plus, 
-  Search, 
-  Filter, 
-  Truck, 
-  FileText, 
-  Wrench, 
-  Calendar, 
-  AlertTriangle, 
-  ExternalLink,
-  ChevronRight,
-  ShieldCheck,
-  Fuel,
-  Gauge
+  Plus, Search, Truck, X, Loader2, CheckCircle,
+  AlertCircle, ChevronDown, Edit2
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Card } from '../../components/Common';
+
+interface Station {
+  id: string;
+  name: string;
+}
 
 interface Vehicle {
   id: string;
-  number: string;
-  type: 'ALS' | 'BLS' | 'TRANSPORT';
-  model: string;
-  station: string;
-  status: 'ACTIVE' | 'MAINTENANCE' | 'BREAKDOWN' | 'OFF_DUTY';
-  docs: {
-    rc: string;
-    fc: string;
-    insurance: string;
-    permit: string;
-  };
-  lastService: string;
-  nextService: string;
-  fuel: number;
+  registration_number: string;
+  vehicle_type: string;
+  brand?: string;
+  model?: string;
+  chassis_number?: string;
+  station_id?: string;
+  status?: string;
 }
 
-const MOCK_FLEET: Vehicle[] = [
-  { id: 'V-001', number: 'KA 01 MG 2341', type: 'ALS', model: 'Force Traveller 2024', station: 'ALPHA-NODE-01', status: 'ACTIVE', docs: { rc: 'VALID', fc: 'EXPIRING_SOON', insurance: 'VALID', permit: 'VALID' }, lastService: '2026-04-10', nextService: '2026-07-10', fuel: 85 },
-  { id: 'V-002', number: 'KA 51 BH 9921', type: 'BLS', model: 'Tata Winger 2023', station: 'BETA-HUB-04', status: 'MAINTENANCE', docs: { rc: 'VALID', fc: 'VALID', insurance: 'VALID', permit: 'VALID' }, lastService: '2026-05-01', nextService: '2026-08-01', fuel: 42 },
-  { id: 'V-003', number: 'KA 03 AA 1122', type: 'ALS', model: 'Force Traveller 2023', station: 'ALPHA-NODE-01', status: 'BREAKDOWN', docs: { rc: 'VALID', fc: 'VALID', insurance: 'EXPIRING_SOON', permit: 'VALID' }, lastService: '2026-02-15', nextService: '2026-05-15', fuel: 0 },
-  { id: 'V-004', number: 'KA 05 MN 5678', type: 'TRANSPORT', model: 'Maruti Eeco 2022', station: 'GAMMA-STATION-02', status: 'ACTIVE', docs: { rc: 'VALID', fc: 'VALID', insurance: 'VALID', permit: 'VALID' }, lastService: '2026-03-20', nextService: '2026-06-20', fuel: 92 },
-];
+interface VehicleForm {
+  registration_number: string;
+  vehicle_type: string;
+  chassis_number: string;
+  brand: string;
+  model: string;
+  station_id: string;
+}
+
+const VEHICLE_TYPES = ['ALS', 'BLS', 'TRANSPORT', 'ICU', 'NEONATAL'];
+
+const EMPTY_FORM: VehicleForm = {
+  registration_number: '',
+  vehicle_type: 'ALS',
+  chassis_number: '',
+  brand: '',
+  model: '',
+  station_id: '',
+};
+
+const cardStyle: React.CSSProperties = {
+  background: '#FFFFFF',
+  border: '1px solid rgba(15, 23, 42, 0.08)',
+  borderRadius: '16px',
+  padding: '24px',
+  boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)',
+};
+
+const labelStyle: React.CSSProperties = {
+  fontSize: '0.7rem',
+  color: '#475569',
+  textTransform: 'uppercase',
+  letterSpacing: '1px',
+  marginBottom: '6px',
+  display: 'block',
+};
+
+const inputStyle: React.CSSProperties = {
+  background: '#FFFFFF',
+  border: '1px solid #CBD5E1',
+  padding: '11px 14px',
+  borderRadius: '10px',
+  color: '#0F172A',
+  fontSize: '0.875rem',
+  outline: 'none',
+  width: '100%',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.2s',
+};
+
+const selectStyle: React.CSSProperties = {
+  ...inputStyle,
+  cursor: 'pointer',
+  appearance: 'none',
+  WebkitAppearance: 'none',
+};
 
 export const FleetAssets: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | null>(null);
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [selectedStationFilter, setSelectedStationFilter] = useState('');
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [stations, setStations] = useState<Station[]>([]);
+  const [stationsLoading, setStationsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [editingVehicle, setEditingVehicle] = useState<Vehicle | null>(null);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [form, setForm] = useState<VehicleForm>(EMPTY_FORM);
+  const [editForm, setEditForm] = useState<VehicleForm>(EMPTY_FORM);
+  const [submitting, setSubmitting] = useState(false);
+  const [toast, setToast] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  const token = localStorage.getItem('teleems_token') || '';
+
+  const showToast = (type: 'success' | 'error', message: string) => {
+    setToast({ type, message });
+    setTimeout(() => setToast(null), 4000);
+  };
+
+  const fetchStations = useCallback(async () => {
+    setStationsLoading(true);
+    try {
+      const res = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/stations', {
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+      });
+      const json = await res.json();
+      let list: Station[] = [];
+      if (json?.data?.data && Array.isArray(json.data.data)) list = json.data.data;
+      else if (json?.data && Array.isArray(json.data)) list = json.data;
+      else if (Array.isArray(json)) list = json;
+      setStations(list);
+    } catch (e) {
+      console.error('Failed to fetch stations:', e);
+    } finally {
+      setStationsLoading(false);
+    }
+  }, [token]);
+
+  const fetchVehicles = useCallback(async () => {
+    setLoading(true);
+    try {
+      const url = selectedStationFilter
+        ? `https://teleems-api-gateway.onrender.com/v1/fleet/vehicles?station_id=${selectedStationFilter}`
+        : 'https://teleems-api-gateway.onrender.com/v1/fleet/vehicles';
+
+      const res = await fetch(url, {
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+      });
+      const json = await res.json();
+      let list: Vehicle[] = [];
+      if (json?.data?.data && Array.isArray(json.data.data)) list = json.data.data;
+      else if (json?.data && Array.isArray(json.data)) list = json.data;
+      else if (Array.isArray(json)) list = json;
+      setVehicles(list);
+    } catch (e) {
+      console.error('Failed to fetch vehicles:', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [token, selectedStationFilter]);
+
+  useEffect(() => { fetchVehicles(); fetchStations(); }, [fetchVehicles, fetchStations]);
+
+  const openModal = () => {
+    setForm(EMPTY_FORM);
+    setShowModal(true);
+  };
+
+  const openEditModal = (v: Vehicle) => {
+    setEditingVehicle(v);
+    setEditForm({
+      registration_number: v.registration_number || '',
+      vehicle_type: v.vehicle_type || 'ALS',
+      chassis_number: v.chassis_number || '',
+      brand: v.brand || '',
+      model: v.model || '',
+      station_id: v.station_id || '',
+    });
+    setShowEditModal(true);
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingVehicle) return;
+    setSubmitting(true);
+    try {
+      const payload = {
+        registration_number: editForm.registration_number,
+        vehicle_type: editForm.vehicle_type,
+        station_id: editForm.station_id || undefined,
+        chassis_number: editForm.chassis_number || undefined,
+        brand: editForm.brand,
+        model: editForm.model,
+      };
+      const res = await fetch(
+        `https://teleems-api-gateway.onrender.com/v1/fleet/vehicles/${editingVehicle.id}`,
+        {
+          method: 'PATCH',
+          headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        }
+      );
+      const json = await res.json();
+      if (res.ok || json?.id || json?.data?.id) {
+        showToast('success', 'Vehicle updated successfully!');
+        setShowEditModal(false);
+        setEditingVehicle(null);
+        fetchVehicles();
+      } else {
+        showToast('error', json?.message || `Error ${res.status}: Failed to update vehicle.`);
+      }
+    } catch (err: any) {
+      showToast('error', err?.message || 'Network error.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.station_id) {
+      showToast('error', 'Please select a station.');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const payload = {
+        registration_number: form.registration_number,
+        vehicle_type: form.vehicle_type,
+        station_id: form.station_id,
+        chassis_number: form.chassis_number || undefined,
+        brand: form.brand,
+        model: form.model,
+      };
+
+      const res = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/vehicles', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const json = await res.json();
+      if (res.ok || res.status === 201 || json?.id || json?.data?.id) {
+        showToast('success', `Vehicle "${form.registration_number}" registered successfully!`);
+        setShowModal(false);
+        setForm(EMPTY_FORM);
+        fetchVehicles();
+      } else {
+        showToast('error', json?.message || `Error ${res.status}: Failed to register vehicle.`);
+      }
+    } catch (err: any) {
+      showToast('error', err?.message || 'Network error. Please check your connection.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const filtered = vehicles.filter(v =>
+    v.registration_number?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    v.brand?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    v.model?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getStatusColor = (status?: string) => {
+    if (status === 'ACTIVE') return { bg: 'rgba(34,197,94,0.1)', border: 'rgba(34,197,94,0.2)', color: '#22C55E' };
+    if (status === 'BREAKDOWN') return { bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.2)', color: '#EF4444' };
+    return { bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.2)', color: '#F59E0B' };
+  };
 
   return (
-    <div className="fleet-assets animate-in fade-in duration-500">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
-        <div style={{ display: 'flex', gap: '12px' }}>
-          <div className="glass" style={{ padding: '4px 16px', borderRadius: '12px', display: 'flex', alignItems: 'center', gap: '8px', border: '1px solid rgba(255,255,255,0.1)' }}>
-            <Search size={16} style={{ opacity: 0.5 }} />
+    <div style={{ color: '#0F172A', position: 'relative' }}>
+
+      <AnimatePresence>
+        {toast && (
+          <motion.div
+            initial={{ opacity: 0, y: -20, x: '-50%' }}
+            animate={{ opacity: 1, y: 0, x: '-50%' }}
+            exit={{ opacity: 0, y: -20, x: '-50%' }}
+            style={{
+              position: 'fixed', top: '24px', left: '50%', zIndex: 9999,
+              padding: '14px 24px', borderRadius: '12px', display: 'flex', alignItems: 'center', gap: '10px',
+              background: toast.type === 'success' ? '#ECFDF5' : '#FEF2F2',
+              border: `1px solid ${toast.type === 'success' ? '#10B981' : '#EF4444'}`,
+              color: toast.type === 'success' ? '#065F46' : '#991B1B',
+              fontWeight: 600, fontSize: '0.875rem',
+              boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
+            }}
+          >
+            {toast.type === 'success' ? <CheckCircle size={18} /> : <AlertCircle size={18} />}
+            {toast.message}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {showModal && (
+          <motion.div
+            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+            style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}
+            onClick={(e) => { if (e.target === e.currentTarget) setShowModal(false); }}
+          >
+            <motion.div
+              initial={{ scale: 0.92, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.92, opacity: 0 }}
+              style={{ background: '#FFFFFF', borderRadius: '20px', padding: '32px', width: '560px', maxWidth: '95vw', boxShadow: '0 20px 50px rgba(0,0,0,0.1)' }}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
+                <div>
+                  <h2 style={{ fontSize: '1.4rem', fontWeight: 900, color: '#0F172A', margin: 0 }}>Register New Vehicle</h2>
+                  <p style={{ fontSize: '0.8rem', color: '#64748B', margin: '4px 0 0' }}>Add an ambulance to your fleet</p>
+                </div>
+                <button onClick={() => setShowModal(false)} style={{ background: '#F1F5F9', border: 'none', borderRadius: '8px', padding: '8px', color: '#475569', cursor: 'pointer' }}>
+                  <X size={18} />
+                </button>
+              </div>
+
+              <form onSubmit={handleSubmit}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
+                  <div>
+                    <label style={labelStyle}>Registration Number *</label>
+                    <input style={inputStyle} required value={form.registration_number} onChange={e => setForm(f => ({ ...f, registration_number: e.target.value }))} />
+                  </div>
+                  <div style={{ position: 'relative' }}>
+                    <label style={labelStyle}>Vehicle Type *</label>
+                    <select style={selectStyle} required value={form.vehicle_type} onChange={e => setForm(f => ({ ...f, vehicle_type: e.target.value }))}>
+                      {VEHICLE_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+                    </select>
+                  </div>
+                  <div style={{ position: 'relative' }}>
+                    <label style={labelStyle}>Assign to Station *</label>
+                    <select style={selectStyle} required value={form.station_id} onChange={e => setForm(f => ({ ...f, station_id: e.target.value }))}>
+                      <option value="">— Select a Station —</option>
+                      {stations.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+                    </select>
+                  </div>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px' }}>
+                    <div>
+                      <label style={labelStyle}>Brand *</label>
+                      <input style={inputStyle} required value={form.brand} onChange={e => setForm(f => ({ ...f, brand: e.target.value }))} />
+                    </div>
+                    <div>
+                      <label style={labelStyle}>Model *</label>
+                      <input style={inputStyle} required value={form.model} onChange={e => setForm(f => ({ ...f, model: e.target.value }))} />
+                    </div>
+                  </div>
+                  <div>
+                    <label style={labelStyle}>Chassis Number</label>
+                    <input style={{ ...inputStyle, fontFamily: 'monospace' }} value={form.chassis_number} onChange={e => setForm(f => ({ ...f, chassis_number: e.target.value }))} />
+                  </div>
+                </div>
+                <div style={{ display: 'flex', gap: '12px', marginTop: '28px' }}>
+                  <button type="button" onClick={() => setShowModal(false)} style={{ flex: 1, padding: '13px', background: '#F1F5F9', border: 'none', borderRadius: '12px', color: '#475569', cursor: 'pointer', fontWeight: 600 }}>Cancel</button>
+                  <button type="submit" disabled={submitting} style={{ flex: 2, padding: '13px', background: '#0F172A', border: 'none', borderRadius: '12px', color: '#fff', cursor: 'pointer', fontWeight: 700 }}>{submitting ? 'Registering...' : 'REGISTER VEHICLE'}</button>
+                </div>
+              </form>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {showEditModal && editingVehicle && (
+          <motion.div
+            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+            style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}
+            onClick={(e) => { if (e.target === e.currentTarget) setShowEditModal(false); }}
+          >
+            <motion.div
+              initial={{ scale: 0.92, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.92, opacity: 0 }}
+              style={{ background: '#FFFFFF', borderRadius: '20px', padding: '32px', width: '560px', maxWidth: '95vw', boxShadow: '0 20px 50px rgba(0,0,0,0.1)' }}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
+                <div>
+                  <h2 style={{ fontSize: '1.4rem', fontWeight: 900, color: '#0F172A', margin: 0 }}>Edit Vehicle</h2>
+                  <p style={{ fontSize: '0.8rem', color: '#64748B', margin: '4px 0 0' }}>Update details for {editingVehicle.registration_number}</p>
+                </div>
+                <button onClick={() => setShowEditModal(false)} style={{ background: '#F1F5F9', border: 'none', borderRadius: '8px', padding: '8px', color: '#475569', cursor: 'pointer' }}>
+                  <X size={18} />
+                </button>
+              </div>
+
+              <form onSubmit={handleUpdate}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
+                  <div>
+                    <label style={labelStyle}>Registration Number *</label>
+                    <input style={inputStyle} required value={editForm.registration_number} onChange={e => setEditForm(f => ({ ...f, registration_number: e.target.value }))} />
+                  </div>
+                  <div style={{ position: 'relative' }}>
+                    <label style={labelStyle}>Vehicle Type *</label>
+                    <select style={selectStyle} required value={editForm.vehicle_type} onChange={e => setEditForm(f => ({ ...f, vehicle_type: e.target.value }))}>
+                      {VEHICLE_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+                    </select>
+                  </div>
+                  <div style={{ position: 'relative' }}>
+                    <label style={labelStyle}>Assign to Station</label>
+                    <select style={selectStyle} value={editForm.station_id} onChange={e => setEditForm(f => ({ ...f, station_id: e.target.value }))}>
+                      <option value="">— Select a Station —</option>
+                      {stations.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+                    </select>
+                  </div>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px' }}>
+                    <div>
+                      <label style={labelStyle}>Brand *</label>
+                      <input style={inputStyle} required value={editForm.brand} onChange={e => setEditForm(f => ({ ...f, brand: e.target.value }))} />
+                    </div>
+                    <div>
+                      <label style={labelStyle}>Model *</label>
+                      <input style={inputStyle} required value={editForm.model} onChange={e => setEditForm(f => ({ ...f, model: e.target.value }))} />
+                    </div>
+                  </div>
+                  <div>
+                    <label style={labelStyle}>Chassis Number</label>
+                    <input style={{ ...inputStyle, fontFamily: 'monospace' }} value={editForm.chassis_number} onChange={e => setEditForm(f => ({ ...f, chassis_number: e.target.value }))} />
+                  </div>
+                </div>
+                <div style={{ display: 'flex', gap: '12px', marginTop: '28px' }}>
+                  <button type="button" onClick={() => setShowEditModal(false)} style={{ flex: 1, padding: '13px', background: '#F1F5F9', border: 'none', borderRadius: '12px', color: '#475569', cursor: 'pointer', fontWeight: 600 }}>Cancel</button>
+                  <button type="submit" disabled={submitting} style={{ flex: 2, padding: '13px', background: '#0F172A', border: 'none', borderRadius: '12px', color: '#fff', cursor: 'pointer', fontWeight: 700 }}>{submitting ? 'Updating...' : 'UPDATE VEHICLE'}</button>
+                </div>
+              </form>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '16px' }}>
+        <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            background: '#FFFFFF',
+            padding: '10px 16px',
+            borderRadius: '12px',
+            border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+            boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : '0 2px 4px rgba(15, 23, 42, 0.01)',
+            transition: 'all 0.2s ease',
+            width: '280px',
+            position: 'relative'
+          }}>
+            <Search size={16} color={isSearchFocused ? "#06B6D4" : "#64748B"} style={{ transition: 'color 0.2s' }} />
             <input
               type="text"
-              placeholder="Search by vehicle number or model..." 
-              style={{ background: 'transparent', border: 'none', color: '#fff', fontSize: '0.875rem', padding: '8px 0', width: '300px', outline: 'none' }}
+              placeholder="Search vehicles..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => setIsSearchFocused(false)}
+              className="stations-search-input"
+              style={{ 
+                background: 'transparent', 
+                border: 'none', 
+                color: '#0F172A', 
+                fontSize: '0.875rem', 
+                outline: 'none', 
+                width: '100%',
+                paddingRight: searchQuery ? '24px' : '0'
+              }}
+            />
+            {searchQuery && (
+              <button 
+                onClick={() => setSearchQuery('')}
+                style={{
+                  position: 'absolute',
+                  right: '12px',
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: '#94A3B8',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: '2px',
+                  borderRadius: '50%',
+                }}
+                onMouseEnter={e => e.currentTarget.style.color = '#475569'}
+                onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}
+              >
+                <X size={14} />
+              </button>
+            )}
+          </div>
+
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <select
+              value={selectedStationFilter}
+              onChange={(e) => setSelectedStationFilter(e.target.value)}
+              style={{
+                background: '#FFFFFF',
+                border: '1px solid #CBD5E1',
+                padding: '11px 36px 11px 16px',
+                borderRadius: '12px',
+                color: '#0F172A',
+                fontSize: '0.875rem',
+                outline: 'none',
+                cursor: 'pointer',
+                appearance: 'none',
+                WebkitAppearance: 'none',
+                minWidth: '200px',
+                boxShadow: '0 2px 4px rgba(15, 23, 42, 0.01)',
+              }}
+            >
+              <option value="">📁 All Stations</option>
+              {stations.map(s => (
+                <option key={s.id} value={s.id}>📍 {s.name}</option>
+              ))}
+            </select>
+            <ChevronDown 
+              size={16} 
+              color="#64748B" 
+              style={{
+                position: 'absolute',
+                right: '12px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                pointerEvents: 'none'
+              }}
             />
           </div>
-          <button className="btn-icon glass"><Filter size={18} /></button>
         </div>
-        <button className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+
+        <button
+          onClick={openModal}
+          style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '11px 22px', background: '#0F172A', border: 'none', borderRadius: '12px', color: '#fff', fontWeight: 700, cursor: 'pointer', fontSize: '0.875rem' }}
+        >
           <Plus size={18} /> REGISTER NEW VEHICLE
         </button>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '24px' }}>
-        {/* Fleet Inventory Grid */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '16px' }}>
-            {MOCK_FLEET.map((v) => (
-              <Card 
+      {loading && (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '200px', color: '#64748B' }}>
+          <Loader2 size={24} className="spin" />
+        </div>
+      )}
+
+      {!loading && filtered.length === 0 && (
+        <div style={{ textAlign: 'center', padding: '60px 24px', color: '#64748B' }}>
+          <Truck size={48} style={{ opacity: 0.2, marginBottom: '16px' }} />
+          <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#475569', marginBottom: '8px' }}>No Vehicles Found</h3>
+        </div>
+      )}
+
+      {!loading && filtered.length > 0 && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '20px' }}>
+          {filtered.map(v => {
+            const sc = getStatusColor(v.status);
+            return (
+              <motion.div
                 key={v.id}
-                onClick={() => setSelectedVehicle(v)}
-                style={{ 
-                  cursor: 'pointer', 
-                  border: selectedVehicle?.id === v.id ? '2px solid var(--accent-cyan)' : '1px solid var(--card-border)',
-                  background: selectedVehicle?.id === v.id ? 'rgba(59, 130, 246, 0.05)' : 'rgba(15, 23, 42, 0.4)'
-                }}
+                initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}
+                style={{ ...cardStyle, borderLeft: `4px solid ${sc.color}` }}
               >
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
                   <div>
-                    <div style={{ fontSize: '0.65rem', fontWeight: 900, color: 'var(--accent-cyan)', marginBottom: '4px' }}>{v.type} UNIT • {v.id}</div>
-                    <h3 style={{ fontSize: '1.125rem', fontWeight: 800 }}>{v.number}</h3>
-                    <div style={{ fontSize: '0.75rem', opacity: 0.5 }}>{v.model}</div>
-                  </div>
-                  <div style={{ 
-                    padding: '4px 8px', 
-                    borderRadius: '4px', 
-                    fontSize: '0.65rem', 
-                    fontWeight: 900,
-                    background: v.status === 'ACTIVE' ? 'rgba(34, 197, 94, 0.1)' : v.status === 'BREAKDOWN' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(245, 158, 11, 0.1)',
-                    color: v.status === 'ACTIVE' ? '#22C55E' : v.status === 'BREAKDOWN' ? '#EF4444' : '#F59E0B',
-                    border: `1px solid ${v.status === 'ACTIVE' ? 'rgba(34, 197, 94, 0.2)' : v.status === 'BREAKDOWN' ? 'rgba(239, 68, 68, 0.2)' : 'rgba(245, 158, 11, 0.2)'}`
-                  }}>
-                    {v.status}
+                    <div style={{ fontSize: '0.65rem', fontWeight: 900, color: '#64748B', marginBottom: '4px' }}>{v.vehicle_type} UNIT</div>
+                    <h3 style={{ fontSize: '1rem', fontWeight: 800, color: '#0F172A', margin: 0 }}>{v.registration_number}</h3>
+                    <div style={{ fontSize: '0.78rem', color: '#475569', marginTop: '4px' }}>{v.brand} {v.model}</div>
                   </div>
+                  <div style={{ padding: '4px 10px', borderRadius: '6px', fontSize: '0.65rem', fontWeight: 900, background: sc.bg, color: sc.color }}>{v.status}</div>
                 </div>
-
-                <div style={{ display: 'flex', gap: '20px', marginBottom: '16px' }}>
-                  <div style={{ flex: 1 }}>
-                    <div style={{ fontSize: '0.6rem', opacity: 0.5, textTransform: 'uppercase', marginBottom: '4px' }}>Fuel Level</div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                      <div style={{ flex: 1, height: '4px', background: 'rgba(255,255,255,0.1)', borderRadius: '2px', overflow: 'hidden' }}>
-                        <div style={{ width: `${v.fuel}%`, height: '100%', background: v.fuel < 25 ? '#EF4444' : '#22C55E' }}></div>
-                      </div>
-                      <span style={{ fontSize: '0.75rem', fontWeight: 700 }}>{v.fuel}%</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '16px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
-                  <div style={{ display: 'flex', gap: '8px' }}>
-                    <div className={v.docs.fc === 'VALID' ? 'status-dot-green' : 'status-pulse-amber'} title="Fitness Certificate"></div>
-                    <div className={v.docs.insurance === 'VALID' ? 'status-dot-green' : 'status-pulse-amber'} title="Insurance"></div>
-                    <div className={v.docs.permit === 'VALID' ? 'status-dot-green' : 'status-pulse-amber'} title="Ambulance Permit"></div>
-                  </div>
-                  <span style={{ fontSize: '0.7rem', opacity: 0.5 }}>{v.station}</span>
-                </div>
-              </Card>
-            ))}
-          </div>
-        </div>
-
-        {/* Detailed Inspector Panel */}
-        <div style={{ position: 'sticky', top: '0' }}>
-          {selectedVehicle ? (
-            <AnimatePresence mode="wait">
-              <motion.div 
-                key={selectedVehicle.id}
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
-              >
-                <Card title="Asset Intelligence" subtitle={`Detailed diagnostics for ${selectedVehicle.number}`}>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-                    {/* Critical Document Status */}
-                    <div>
-                      <h4 style={{ fontSize: '0.75rem', fontWeight: 800, textTransform: 'uppercase', color: 'var(--accent-cyan)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <FileText size={14} /> Document Vault
-                      </h4>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                        {[
-                          { label: 'Registration (RC)', status: selectedVehicle.docs.rc, expiry: '2030-12-15' },
-                          { label: 'Fitness (FC)', status: selectedVehicle.docs.fc, expiry: '2026-06-01' },
-                          { label: 'Insurance Policy', status: selectedVehicle.docs.insurance, expiry: '2026-05-15' },
-                          { label: 'Ambulance Permit', status: selectedVehicle.docs.permit, expiry: '2026-09-20' },
-                        ].map((doc, idx) => (
-                          <div key={idx} style={{ padding: '12px', borderRadius: '8px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                            <div>
-                              <div style={{ fontSize: '0.8125rem', fontWeight: 600 }}>{doc.label}</div>
-                              <div style={{ fontSize: '0.7rem', opacity: 0.5 }}>Expires: {doc.expiry}</div>
-                            </div>
-                            <div style={{ color: doc.status === 'VALID' ? '#22C55E' : '#F59E0B', display: 'flex', alignItems: 'center', gap: '6px' }}>
-                              {doc.status === 'VALID' ? <ShieldCheck size={16} /> : <AlertTriangle size={16} />}
-                              <span style={{ fontSize: '0.65rem', fontWeight: 900 }}>{doc.status}</span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Maintenance History */}
-                    <div>
-                      <h4 style={{ fontSize: '0.75rem', fontWeight: 800, textTransform: 'uppercase', color: 'var(--accent-cyan)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        <Wrench size={14} /> Service Records
-                      </h4>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                        <div style={{ padding: '16px', borderRadius: '12px', background: 'rgba(59, 130, 246, 0.05)', border: '1px solid rgba(59, 130, 246, 0.1)' }}>
-                          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
-                            <span style={{ fontSize: '0.75rem', fontWeight: 700 }}>Upcoming Service</span>
-                            <span style={{ fontSize: '0.75rem', color: 'var(--accent-cyan)' }}>{selectedVehicle.nextService}</span>
-                          </div>
-                          <div style={{ fontSize: '0.7rem', opacity: 0.6 }}>Scheduled for: Engine Oil change, Brake pad inspection, and AC filter cleaning.</div>
-                        </div>
-                        <div style={{ padding: '12px', borderRadius: '8px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between' }}>
-                          <div style={{ fontSize: '0.75rem' }}>Last Major Service</div>
-                          <div style={{ fontSize: '0.75rem', fontWeight: 700 }}>{selectedVehicle.lastService}</div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
-                      <button className="btn-ghost" style={{ width: '100%', fontSize: '0.75rem' }}>VIEW ALL RECORDS</button>
-                      <button className="btn-primary" style={{ width: '100%', fontSize: '0.75rem' }}>LOG MAINTENANCE</button>
-                    </div>
-                  </div>
-                </Card>
+                <button
+                  onClick={() => openEditModal(v)}
+                  style={{ width: '100%', padding: '9px', background: '#F1F5F9', border: 'none', borderRadius: '8px', color: '#0F172A', fontSize: '0.75rem', fontWeight: 700, cursor: 'pointer' }}
+                >
+                  EDIT DETAILS
+                </button>
               </motion.div>
-            </AnimatePresence>
-          ) : (
-            <div className="glass" style={{ padding: '40px', borderRadius: '16px', textAlign: 'center', border: '1px dashed rgba(255,255,255,0.1)' }}>
-              <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', color: 'var(--accent-cyan)' }}>
-                <Truck size={24} />
-              </div>
-              <h3 style={{ fontSize: '1rem', fontWeight: 700, marginBottom: '8px' }}>No Asset Selected</h3>
-              <p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>Select a vehicle from the fleet inventory to view tactical diagnostics, documents, and service history.</p>
-            </div>
-          )}
+            );
+          })}
         </div>
-      </div>
+      )}
+
+      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; }`}</style>
     </div>
   );
 };

src/pages/fleet/FleetOperator.css

@@ -0,0 +1,389 @@
+/* ─── FLEET OPERATOR LIGHT THEME OVERRIDES ─────────────────────────────────── */
+
+/* 1. Main Dashboard Shell Background & Text Colors */
+.fleet-dashboard-container {
+  background: #F8FAFC !important;
+  /* Elegant light background */
+  color: #1E293B !important;
+  /* Deep slate gray for body text */
+}
+
+/* 2. Top Navigation Bar */
+.fleet-dashboard-header {
+  background: rgba(255, 255, 255, 0.85) !important;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
+  backdrop-filter: blur(12px) !important;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
+}
+
+.fleet-dashboard-header h1 {
+  color: #0F172A !important;
+}
+
+.fleet-dashboard-header .desc,
+.fleet-dashboard-header div[style*="color: #94A3B8"],
+.fleet-dashboard-header div[style*="color:#94A3B8"] {
+  color: #475569 !important;
+}
+
+/* 3. Search Bar and Wrapper in Header */
+.fleet-search-container,
+div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
+div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"] {
+  background: #F1F5F9 !important;
+  border: 1px solid #CBD5E1 !important;
+}
+
+.fleet-search-container input,
+input[placeholder*="Search"] {
+  color: #0F172A !important;
+}
+
+.fleet-search-container input::placeholder,
+input[placeholder*="Search"]::placeholder {
+  color: #94A3B8 !important;
+}
+
+/* 4. Action Buttons in Header */
+.fleet-header-btn,
+button[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
+button[style*="background:rgba(255, 255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"] {
+  background: #FFFFFF !important;
+  border: 1px solid #E2E8F0 !important;
+  color: #475569 !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
+}
+
+.fleet-header-btn:hover {
+  background: #F8FAFC !important;
+  color: #0F172A !important;
+}
+
+/* Vertical divider in header */
+.fleet-header-divider {
+  background: #E2E8F0 !important;
+}
+
+/* Profile username & user details in header */
+.fleet-profile-name,
+.fleet-profile-title,
+div[style*="color: #fff"][style*="font-size: 0.8rem"],
+div[style*="color:#fff"][style*="font-size:0.8rem"],
+div[style*="font-size: 0.8rem"][style*="color: #fff"],
+div[style*="font-size:0.8rem"][style*="color:#fff"] {
+  color: #0F172A !important;
+}
+
+/* 5. Sub-page Tab Toggle Selection Pill Containers */
+div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"][style*="padding: 4px"],
+div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"][style*="padding:4px"],
+div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.06)"][style*="padding: 3px"],
+div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"][style*="padding:3px"] {
+  background: #E2E8F0 !important;
+  border: 1px solid #CBD5E1 !important;
+}
+
+/* Unselected buttons in Tab Toggles */
+div[style*="background: rgba(255, 255, 255, 0.03)"] button[style*="background: transparent"],
+div[style*="background:rgba(255,255,255,0.03)"] button[style*="background:transparent"],
+div[style*="background: rgba(255, 255, 255, 0.03)"] button:not([style*="background: linear-gradient"]),
+div[style*="background:rgba(255,255,255,0.03)"] button:not([style*="background:linear-gradient"]) {
+  color: #475569 !important;
+}
+
+/* 6. Cards and Main Content Panels (Overriding semi-transparent dark blocks) */
+div[style*="background: rgba(255, 255, 255, 0.03)"][style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
+div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.08)"],
+div[style*="background: rgba(255, 255, 255, 0.02)"][style*="border: 1px solid rgba(255, 255, 255, 0.07)"],
+div[style*="background:rgba(255,255,255,0.02)"][style*="border:1px solid rgba(255,255,255,0.07)"],
+div[style*="background: rgba(255, 255, 255, 0.01)"][style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
+div[style*="background:rgba(255,255,255,0.01)"][style*="border:1px solid rgba(255,255,255,0.08)"],
+div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(255,255,255,0.07)"],
+div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.07)"],
+div[style*="background: rgba(255,255,255,0.02)"][style*="border: 1px solid rgba(255,255,255,0.06)"],
+div[style*="background:rgba(255,255,255,0.02)"][style*="border:1px solid rgba(255,255,255,0.06)"],
+.glass {
+  background: #FFFFFF !important;
+  border: 1px solid rgba(15, 23, 42, 0.08) !important;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03), 0 2px 8px rgba(15, 23, 42, 0.01) !important;
+}
+
+/* Card titles inside components */
+.fleet-dashboard-content h1,
+.fleet-dashboard-content h2,
+.fleet-dashboard-content h3,
+.fleet-dashboard-content h4,
+.fleet-dashboard-content .card-title {
+  color: #0F172A !important;
+}
+
+/* Overriding white texts to clean slate-dark */
+span[style*="color: #fff"],
+span[style*="color:#fff"],
+div[style*="color: #fff"],
+div[style*="color:#fff"],
+h3[style*="color: #fff"],
+h3[style*="color:#fff"],
+h1[style*="color: #fff"],
+h1[style*="color:#fff"] {
+  color: #0F172A !important;
+}
+
+/* Secondary descriptions */
+div[style*="color: #E2E8F0"],
+div[style*="color:#E2E8F0"],
+span[style*="color: #E2E8F0"],
+span[style*="color:#E2E8F0"],
+div[style*="color: #F1F5F9"],
+div[style*="color:#F1F5F9"] {
+  color: #1E293B !important;
+}
+
+/* Muted labels & dates */
+div[style*="color: #94A3B8"],
+div[style*="color:#94A3B8"],
+span[style*="color: #94A3B8"],
+span[style*="color:#94A3B8"],
+p[style*="color: #94A3B8"],
+p[style*="color:#94A3B8"],
+div[style*="color: #64748B"],
+div[style*="color:#64748B"] {
+  color: #475569 !important;
+}
+
+/* 7. Inner Stats Grid and Blocks (e.g. Station detail stats cards) */
+div[style*="background: #040B16"],
+div[style*="background:#040B16"] {
+  background: #F1F5F9 !important;
+  border-color: #CBD5E1 !important;
+}
+
+div[style*="background: #040B16"] div[style*="color: #fff"],
+div[style*="background:#040B16"] div[style*="color:#fff"] {
+  color: #0F172A !important;
+}
+
+/* Separator lines in cards */
+div[style*="border-bottom: 1px solid rgba(255,255,255,0.04)"],
+div[style*="border-bottom:1px solid rgba(255,255,255,0.04)"],
+div[style*="border-top: 1px solid rgba(255,255,255,0.04)"],
+div[style*="border-top:1px solid rgba(255,255,255,0.04)"],
+div[style*="border-top: 1px solid rgba(255,255,255,0.06)"],
+div[style*="border-top:1px solid rgba(255,255,255,0.06)"] {
+  border-color: #E2E8F0 !important;
+}
+
+/* 8. Forms & Inputs */
+/* Field Labels */
+label[style*="color: #64748B"],
+label[style*="color:#64748B"],
+label[style*="color: #475569"],
+label[style*="color:#475569"] {
+  color: #475569 !important;
+}
+
+/* Input Fields and Select Dropdowns */
+input[style*="background: rgba(255, 255, 255, 0.04)"],
+input[style*="background:rgba(255,255,255,0.04)"],
+select[style*="background: rgba(255, 255, 255, 0.04)"],
+select[style*="background:rgba(255,255,255,0.04)"],
+textarea[style*="background: rgba(255, 255, 255, 0.04)"],
+textarea[style*="background:rgba(255,255,255,0.04)"] {
+  background: #FFFFFF !important;
+  border: 1px solid #CBD5E1 !important;
+  color: #0F172A !important;
+}
+
+input[style*="background: rgba(255, 255, 255, 0.04)"]:focus,
+select[style*="background: rgba(255, 255, 255, 0.04)"]:focus,
+textarea[style*="background: rgba(255, 255, 255, 0.04)"]:focus {
+  border-color: #06B6D4 !important;
+  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
+}
+
+/* Select options backgrounds */
+option[style*="background: #0F172A"],
+option[style*="background:#0F172A"],
+option[style*="background: #0D1526"],
+option[style*="background:#0D1526"] {
+  background: #FFFFFF !important;
+  color: #0F172A !important;
+}
+
+/* Optgroups */
+optgroup {
+  background: #FFFFFF !important;
+  color: #0F172A !important;
+}
+
+/* 9. Secondary Buttons (e.g. Cancel, Edit, Sync, etc) */
+button[style*="background: rgba(255, 255, 255, 0.04)"],
+button[style*="background:rgba(255,255,255,0.04)"],
+button[style*="background: rgba(255,255,255,0.03)"],
+button[style*="background:rgba(255,255,255,0.03)"] {
+  background: #FFFFFF !important;
+  border: 1px solid #CBD5E1 !important;
+  color: #475569 !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
+}
+
+button[style*="background: rgba(255, 255, 255, 0.04)"]:hover,
+button[style*="background:rgba(255,255,255,0.04)"]:hover {
+  background: #F8FAFC !important;
+  color: #0F172A !important;
+}
+
+/* 10. Modals */
+/* Background backdrop layer */
+div[style*="background: rgba(0,0,0,0.7)"],
+div[style*="background:rgba(0,0,0,0.7)"],
+div[style*="background: rgba(0,0,0,0.75)"],
+div[style*="background:rgba(0,0,0,0.75)"] {
+  background: rgba(15, 23, 42, 0.3) !important;
+  backdrop-filter: blur(8px) !important;
+}
+
+/* Modal box wrapper styling */
+div[style*="background: #0F172A"][style*="border: 1px solid rgba(255,255,255,0.1)"],
+div[style*="background:#0F172A"][style*="border:1px solid rgba(255,255,255,0.1)"],
+div[style*="background: #0D1526"][style*="border: 1px solid rgba(255,255,255,0.1)"],
+div[style*="background:#0D1526"][style*="border:1px solid rgba(255,255,255,0.1)"] {
+  background: #FFFFFF !important;
+  border: 1px solid rgba(15, 23, 42, 0.08) !important;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
+  color: #1E293B !important;
+}
+
+/* Modal Inner Header */
+div[style*="background: linear-gradient(135deg,rgba(6,182,212,0.12),transparent)"],
+div[style*="background:linear-gradient(135deg,rgba(6,182,212,0.12),transparent)"] {
+  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), transparent) !important;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
+}
+
+/* Modal close button */
+div[style*="background: #0F172A"] button[style*="background: rgba(255, 255, 255, 0.05)"],
+div[style*="background:#0F172A"] button[style*="background:rgba(255,255,255,0.05)"],
+div[style*="background: #0D1526"] button[style*="background: rgba(255, 255, 255, 0.06)"],
+div[style*="background:#0D1526"] button[style*="background:rgba(255,255,255,0.06)"] {
+  background: #F1F5F9 !important;
+  border: 1px solid #E2E8F0 !important;
+  color: #475569 !important;
+}
+
+/* GPS input coordination section in modal */
+div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(255,255,255,0.06)"],
+div[style*="background:rgba(255,255,255,0.03)"][style*="border:1px solid rgba(255,255,255,0.06)"],
+div[style*="background: rgba(255,255,255,0.03)"][style*="border: 1px solid rgba(16,185,129,0.3)"] {
+  background: #F1F5F9 !important;
+  border-color: #E2E8F0 !important;
+  color: #475569 !important;
+}
+
+/* 11. Tables inside components */
+table th {
+  color: #475569 !important;
+  background: #F1F5F9 !important;
+  border-bottom: 1px solid #CBD5E1 !important;
+}
+
+table tr {
+  border-bottom: 1px solid #E2E8F0 !important;
+}
+
+table tr:hover {
+  background: #F8FAFC !important;
+}
+
+/* 12. Crew Scheduling Page Specific Items */
+/* Roster timeline assignments list containers */
+div[style*="background: rgba(6,182,212,0.04)"][style*="border: 1px solid rgba(6,182,212,0.08)"],
+div[style*="background:rgba(6,182,212,0.04)"][style*="border:1px solid rgba(6,182,212,0.08)"] {
+  background: rgba(6, 182, 212, 0.06) !important;
+  border: 1px solid rgba(6, 182, 212, 0.15) !important;
+}
+
+div[style*="background: rgba(59,130,246,0.04)"][style*="border: 1px solid rgba(59,130,246,0.08)"],
+div[style*="background:rgba(59,130,246,0.04)"][style*="border:1px solid rgba(59,130,246,0.08)"] {
+  background: rgba(59, 130, 246, 0.06) !important;
+  border: 1px solid rgba(59, 130, 246, 0.15) !important;
+}
+
+div[style*="background: rgba(16,185,129,0.04)"][style*="border: 1px solid rgba(16,185,129,0.08)"],
+div[style*="background:rgba(16,185,129,0.04)"][style*="border:1px solid rgba(16,185,129,0.08)"] {
+  background: rgba(16, 185, 129, 0.06) !important;
+  border: 1px solid rgba(16, 185, 129, 0.15) !important;
+}
+
+/* 13. Empty / Placeholder States */
+div[style*="border: 1px dashed rgba(255,255,255,0.08)"],
+div[style*="border:1px dashed rgba(255,255,255,0.08)"],
+div[style*="border: 1px dashed rgba(255,255,255,0.1)"],
+div[style*="border:1px dashed rgba(255,255,255,0.1)"] {
+  background: #FFFFFF !important;
+  border: 1px dashed #CBD5E1 !important;
+}
+
+/* 14. Broad Wildcard Overrides (Ensuring 100% full light theme coverage) */
+.fleet-dashboard-content div[style*="rgba(255, 255, 255, 0.0"],
+.fleet-dashboard-content div[style*="rgba(255,255,255,0.0"],
+.fleet-dashboard-content div[style*="rgba(255, 255, 255, 0.1"],
+.fleet-dashboard-content div[style*="rgba(255,255,255,0.1"] {
+  background: #FFFFFF !important;
+  border-color: rgba(15, 23, 42, 0.08) !important;
+  color: #1E293B !important;
+}
+
+.fleet-dashboard-content div[style*="color: #fff"],
+.fleet-dashboard-content div[style*="color:#fff"],
+.fleet-dashboard-content div[style*="color: #FFFFFF"],
+.fleet-dashboard-content div[style*="color:#FFFFFF"],
+.fleet-dashboard-content div[style*="color: rgb(255, 255, 255)"],
+.fleet-dashboard-content p[style*="color: #fff"],
+.fleet-dashboard-content p[style*="color:#fff"],
+.fleet-dashboard-content span[style*="color: #fff"],
+.fleet-dashboard-content span[style*="color:#fff"] {
+  color: #0F172A !important;
+}
+
+.fleet-dashboard-content div[style*="color: rgb(148, 163, 184)"],
+.fleet-dashboard-content div[style*="color: #94A3B8"],
+.fleet-dashboard-content div[style*="color:#94A3B8"] {
+  color: #475569 !important;
+}
+
+.fleet-dashboard-content input,
+.fleet-dashboard-content select,
+.fleet-dashboard-content textarea {
+  background: #FFFFFF !important;
+  border: 1px solid #CBD5E1 !important;
+  color: #0F172A !important;
+}
+
+/* 15. Global Uniform Font Family */
+.fleet-dashboard-container,
+.fleet-dashboard-container *,
+.sidebar,
+.sidebar * {
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+}
+
+/* 16. Custom Stations Search Input override (High-specificity to beat broad content overrides) */
+.fleet-dashboard-content .stations-search-input,
+.fleet-dashboard-content input.stations-search-input {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+  color: #0F172A !important;
+}
+
+.fleet-dashboard-content .stations-search-input:focus,
+.fleet-dashboard-content input.stations-search-input:focus {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}

src/pages/fleet/FleetOrganization.tsx

@@ -0,0 +1,995 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  Building2, MapPin, Phone, Plus, Search, MoreVertical,
+  Edit, Users, Truck, ShieldCheck, Globe, X, Loader2,
+  CheckCircle, AlertCircle, Navigation
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { fleetApi } from '../../api/fleet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// Fix default marker icons for Leaflet bundled via Vite
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+});
+
+interface Station {
+  id: string;
+  name: string;
+  address: string;
+  gps_lat?: number;
+  gps_lon?: number;
+  incharge_name?: string;
+  phone?: string;
+  vehiclesAssigned?: number;
+  staffAssigned?: number;
+  status?: 'ACTIVE' | 'INACTIVE';
+}
+
+interface StationForm {
+  name: string;
+  address: string;
+  incharge_name: string;
+  phone: string;
+}
+
+const cardStyle: React.CSSProperties = {
+  background: '#FFFFFF',
+  border: '1px solid rgba(15, 23, 42, 0.08)',
+  borderRadius: '16px',
+  padding: '24px',
+  boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)',
+};
+
+const labelStyle: React.CSSProperties = {
+  fontSize: '0.7rem',
+  color: '#475569',
+  textTransform: 'uppercase',
+  letterSpacing: '1px',
+  marginBottom: '6px',
+  display: 'block',
+};
+
+const inputStyle: React.CSSProperties = {
+  background: '#FFFFFF',
+  border: '1px solid #CBD5E1',
+  padding: '11px 14px',
+  borderRadius: '10px',
+  color: '#0F172A',
+  fontSize: '0.875rem',
+  outline: 'none',
+  width: '100%',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.2s',
+};
+
+const EMPTY_FORM: StationForm = {
+  name: '',
+  address: '',
+  incharge_name: '',
+  phone: '',
+};
+
+export const FleetOrganization: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'stations' | 'profile'>('stations');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [stations, setStations] = useState<Station[]>([]);
+  const [selectedStationForManifest, setSelectedStationForManifest] = useState<Station | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [editingStationId, setEditingStationId] = useState<string | null>(null);
+  const [loadingDetailsId, setLoadingDetailsId] = useState<string | null>(null);
+  const [form, setForm] = useState<StationForm>(EMPTY_FORM);
+  const [gpsCoords, setGpsCoords] = useState<{ lat: number; lon: number } | null>(null);
+  const [gpsLoading, setGpsLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [toast, setToast] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
+  const markerRef = useRef<L.Marker | null>(null);
+
+  const token = localStorage.getItem('teleems_token') || '';
+
+  // Get organisationId from stored user
+  const user = (() => {
+    try { return JSON.parse(localStorage.getItem('teleems_user') || '{}'); } catch { return {}; }
+  })();
+  const organisationId: string = user?.metadata?.organisation?.id || user?.organisationId || '';
+
+  const fetchStations = useCallback(async () => {
+    setLoading(true);
+    setFetchError('');
+    try {
+      const authToken = localStorage.getItem('teleems_token') || '';
+      if (!authToken) {
+        setFetchError('Session expired — no auth token found. Please log out and log in again.');
+        return;
+      }
+
+      const url = 'https://teleems-api-gateway.onrender.com/v1/fleet/stations';
+      console.log('[Stations] Calling:', url, '| token starts with:', authToken.substring(0, 15));
+
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${authToken}`,
+        },
+      });
+
+      console.log('[Stations] HTTP status:', res.status);
+      const json = await res.json();
+      console.log('[Stations] Response:', json);
+
+      if (res.status === 401 || res.status === 403) {
+        setFetchError(`Session expired (${res.status}). Please log out and log in again to refresh your token.`);
+        return;
+      }
+
+      if (!res.ok) {
+        setFetchError(`API error ${res.status}: ${json?.message || 'Unknown error'}`);
+        return;
+      }
+
+      let list: Station[] = [];
+      if (json?.data?.data && Array.isArray(json.data.data)) list = json.data.data;
+      else if (json?.data && Array.isArray(json.data)) list = json.data;
+      else if (Array.isArray(json)) list = json;
+
+      // 2. Fetch Vehicles for each station in parallel using the specific URL: /v1/fleet/vehicles?station_id=...
+      const mergedList = await Promise.all(
+        list.map(async (s) => {
+          let stationVehicles: any[] = [];
+          try {
+            const vehiclesUrl = `https://teleems-api-gateway.onrender.com/v1/fleet/vehicles?station_id=${s.id}`;
+            const vehiclesRes = await fetch(vehiclesUrl, {
+              method: 'GET',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${authToken}`,
+              }
+            });
+            if (vehiclesRes.ok) {
+              const vJson = await vehiclesRes.json();
+              stationVehicles = vJson?.data?.data || vJson?.data || (Array.isArray(vJson) ? vJson : []);
+            }
+          } catch (err) {
+            console.error(`Failed to fetch vehicles for station ${s.id}:`, err);
+          }
+
+          let staffSet = new Set<string>();
+          stationVehicles.forEach((v: any) => {
+            if (v.activeRoster) {
+              const r = v.activeRoster;
+              if (r.driver?.user?.name) staffSet.add(r.driver.user.name);
+              if (r.staff?.user?.name) staffSet.add(r.staff.user.name);
+            }
+            if (v.activeShift) {
+              const sh = v.activeShift;
+              if (sh.driver?.user?.name) staffSet.add(sh.driver.user.name);
+              if (sh.staff?.user?.name) staffSet.add(sh.staff.user.name);
+            }
+          });
+
+          return {
+            ...s,
+            vehiclesAssigned: stationVehicles.length,
+            staffAssigned: staffSet.size
+          };
+        })
+      );
+
+      setStations(mergedList);
+    } catch (e) {
+      setFetchError('Network error — unable to reach the server. Check your connection.');
+      console.error('Failed to fetch stations:', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [organisationId]);
+
+  useEffect(() => { fetchStations(); }, [fetchStations]);
+
+  // Refetch when user navigates back to the tab
+  useEffect(() => {
+    const onVisible = () => { if (document.visibilityState === 'visible') fetchStations(); };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => document.removeEventListener('visibilitychange', onVisible);
+  }, [fetchStations]);
+
+
+
+
+
+  // Initialize Leaflet map when modal opens
+  useEffect(() => {
+    if (!showModal) {
+      // Destroy map on close
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+        markerRef.current = null;
+      }
+      return;
+    }
+    // Wait for DOM
+    const timer = setTimeout(() => {
+      if (!mapContainerRef.current || mapInstanceRef.current) return;
+      const initialLat = gpsCoords ? gpsCoords.lat : 20.5937;
+      const initialLon = gpsCoords ? gpsCoords.lon : 78.9629;
+      const initialZoom = gpsCoords ? 14 : 5;
+
+      const map = L.map(mapContainerRef.current, { zoomControl: true }).setView([initialLat, initialLon], initialZoom);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+      }).addTo(map);
+
+      if (gpsCoords) {
+        markerRef.current = L.marker([initialLat, initialLon]).addTo(map)
+          .bindPopup(`📍 ${initialLat.toFixed(6)}, ${initialLon.toFixed(6)}`).openPopup();
+      }
+
+      map.on('click', (e: L.LeafletMouseEvent) => {
+        const { lat, lng } = e.latlng;
+        setGpsCoords({ lat, lon: lng });
+        if (markerRef.current) {
+          markerRef.current.setLatLng([lat, lng]);
+        } else {
+          markerRef.current = L.marker([lat, lng]).addTo(map)
+            .bindPopup(`📍 ${lat.toFixed(6)}, ${lng.toFixed(6)}`).openPopup();
+        }
+      });
+
+      mapInstanceRef.current = map;
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [showModal, gpsCoords]);
+
+  const flyToCurrentLocation = () => {
+    setGpsLoading(true);
+    if (!navigator.geolocation) { setGpsLoading(false); return; }
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const { latitude: lat, longitude: lon } = pos.coords;
+        setGpsCoords({ lat, lon });
+        setGpsLoading(false);
+        if (mapInstanceRef.current) {
+          mapInstanceRef.current.flyTo([lat, lon], 15);
+          if (markerRef.current) {
+            markerRef.current.setLatLng([lat, lon]);
+          } else {
+            markerRef.current = L.marker([lat, lon]).addTo(mapInstanceRef.current!)
+              .bindPopup(`📍 ${lat.toFixed(6)}, ${lon.toFixed(6)}`).openPopup();
+          }
+        }
+      },
+      () => setGpsLoading(false),
+      { enableHighAccuracy: true, timeout: 10000 }
+    );
+  };
+
+  const openCreateModal = () => {
+    setEditingStationId(null);
+    setForm(EMPTY_FORM);
+    setGpsCoords(null);
+    setShowModal(true);
+  };
+
+  const openEditModal = async (station: Station) => {
+    setLoadingDetailsId(station.id);
+    try {
+      const res = await fleetApi.getStationDetails(station.id, token);
+      console.log('[Stations] Fetched single station details:', res);
+
+      const details = res?.data || res?.station || res || station;
+
+      setEditingStationId(station.id);
+      setForm({
+        name: details.name || station.name,
+        address: details.address || station.address,
+        incharge_name: details.incharge_name || station.incharge_name || '',
+        phone: details.phone || station.phone || '',
+      });
+
+      const lat = details.gps_lat !== undefined ? details.gps_lat : station.gps_lat;
+      const lon = details.gps_lon !== undefined ? details.gps_lon : station.gps_lon;
+
+      if (lat && lon) {
+        setGpsCoords({ lat: Number(lat), lon: Number(lon) });
+      } else {
+        setGpsCoords(null);
+      }
+      setShowModal(true);
+    } catch (err: any) {
+      console.error('Failed to fetch station details, falling back to card data:', err);
+      // Fallback to local card data so the UI doesn't break
+      setEditingStationId(station.id);
+      setForm({
+        name: station.name,
+        address: station.address,
+        incharge_name: station.incharge_name || '',
+        phone: station.phone || '',
+      });
+      if (station.gps_lat && station.gps_lon) {
+        setGpsCoords({ lat: Number(station.gps_lat), lon: Number(station.gps_lon) });
+      } else {
+        setGpsCoords(null);
+      }
+      setShowModal(true);
+    } finally {
+      setLoadingDetailsId(null);
+    }
+  };
+
+  const showToast = (type: 'success' | 'error', message: string) => {
+    setToast({ type, message });
+    setTimeout(() => setToast(null), 4000);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      const payload = {
+        name: form.name,
+        address: form.address,
+        gps_lat: gpsCoords?.lat ?? 0,
+        gps_lon: gpsCoords?.lon ?? 0,
+        incharge_name: form.incharge_name,
+        phone: form.phone,
+      };
+
+      let res;
+      if (editingStationId) {
+        res = await fleetApi.updateStation(editingStationId, payload, token);
+      } else {
+        res = await fleetApi.createStation(payload, token);
+      }
+
+      if (res && (res.status === 200 || res.status === 201 || res.id || res.success || res.data)) {
+        showToast('success', editingStationId ? `Station "${form.name}" updated successfully!` : `Station "${form.name}" created successfully!`);
+        setShowModal(false);
+        setForm(EMPTY_FORM);
+        setGpsCoords(null);
+        setEditingStationId(null);
+        fetchStations();
+      } else {
+        showToast('error', res?.message || `Failed to ${editingStationId ? 'update' : 'create'} station. Please try again.`);
+      }
+    } catch (err: any) {
+      showToast('error', err?.message || 'Network error. Please check your connection.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const filteredStations = stations.filter(s =>
+    s.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    s.incharge_name?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div style={{ color: '#F8FAFC', position: 'relative' }}>
+      {/* Toast Notification */}
+      <AnimatePresence>
+        {toast && (
+          <motion.div
+            initial={{ opacity: 0, y: -20, x: '-50%' }}
+            animate={{ opacity: 1, y: 0, x: '-50%' }}
+            exit={{ opacity: 0, y: -20, x: '-50%' }}
+            style={{
+              position: 'fixed', top: '24px', left: '50%', zIndex: 9999,
+              padding: '14px 24px', borderRadius: '12px', display: 'flex', alignItems: 'center', gap: '10px',
+              background: toast.type === 'success' ? 'rgba(16, 185, 129, 0.15)' : 'rgba(239, 68, 68, 0.15)',
+              border: `1px solid ${toast.type === 'success' ? 'rgba(16,185,129,0.4)' : 'rgba(239,68,68,0.4)'}`,
+              color: toast.type === 'success' ? '#10B981' : '#EF4444',
+              fontWeight: 600, fontSize: '0.875rem',
+              backdropFilter: 'blur(12px)',
+              boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+            }}
+          >
+            {toast.type === 'success' ? <CheckCircle size={18} /> : <AlertCircle size={18} />}
+            {toast.message}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Add Station Modal */}
+      {createPortal(
+        <AnimatePresence>
+          {showModal && (
+            <motion.div
+              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+              style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.3)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}
+              onClick={(e) => { if (e.target === e.currentTarget) setShowModal(false); }}
+            >
+              <motion.div
+                initial={{ scale: 0.92, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.92, opacity: 0 }}
+                style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: '20px', padding: '24px 32px', width: '880px', maxWidth: '95vw', maxHeight: '96vh', overflowY: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 50px rgba(15, 23, 42, 0.12)' }}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexShrink: 0 }}>
+                  <div>
+                    <h2 style={{ fontSize: '1.3rem', fontWeight: 900, color: '#0F172A', margin: 0 }}>{editingStationId ? 'Edit Station' : 'Add New Station'}</h2>
+                    <p style={{ fontSize: '0.78rem', color: '#475569', margin: '2px 0 0' }}>{editingStationId ? 'Update dispatch station details' : 'Create a new dispatch station'}</p>
+                  </div>
+                  <button type="button" onClick={() => setShowModal(false)} style={{ background: '#F1F5F9', border: '1px solid #E2E8F0', borderRadius: '8px', padding: '8px', color: '#475569', cursor: 'pointer', display: 'flex' }}>
+                    <X size={18} />
+                  </button>
+                </div>
+
+                <form onSubmit={handleSubmit} style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '28px', alignItems: 'start' }}>
+
+                    {/* Left Column: Form Fields */}
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
+                      <div>
+                        <label style={labelStyle}>Station Name *</label>
+                        <input style={inputStyle} placeholder="e.g. Alpha Dispatch Hub" required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
+                      </div>
+                      <div>
+                        <label style={labelStyle}>Address *</label>
+                        <textarea style={{ ...inputStyle, resize: 'none', height: '64px' }} placeholder="Full address of the station" required value={form.address} onChange={e => setForm(f => ({ ...f, address: e.target.value }))} />
+                      </div>
+                      <div>
+                        <label style={labelStyle}>Incharge Name *</label>
+                        <input style={inputStyle} placeholder="Station incharge full name" required value={form.incharge_name} onChange={e => setForm(f => ({ ...f, incharge_name: e.target.value }))} />
+                      </div>
+                      <div>
+                        <label style={labelStyle}>Contact Phone *</label>
+                        <input style={inputStyle} placeholder="+91-9876543210" required value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} />
+                      </div>
+                    </div>
+
+                    {/* Right Column: Interactive Map Picker */}
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                      <div>
+                        <label style={labelStyle}>GPS Location — Click on map to set pin</label>
+                        <div style={{ position: 'relative', borderRadius: '12px', overflow: 'hidden', border: '1px solid rgba(15, 23, 42, 0.08)' }}>
+                          <div ref={mapContainerRef} style={{ height: '210px', width: '100%', background: '#F1F5F9' }} />
+                          {/* Overlay UI */}
+                          <button
+                            type="button"
+                            onClick={flyToCurrentLocation}
+                            disabled={gpsLoading}
+                            style={{ position: 'absolute', top: '10px', right: '10px', zIndex: 1000, padding: '6px 12px', background: 'rgba(15,23,42,0.9)', border: '1px solid rgba(6,182,212,0.4)', borderRadius: '8px', color: '#06B6D4', cursor: gpsLoading ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.7rem', fontWeight: 600, backdropFilter: 'blur(8px)' }}
+                          >
+                            {gpsLoading ? <Loader2 size={12} className="spin" /> : <Navigation size={12} />}
+                            {gpsLoading ? 'Locating...' : 'My Location'}
+                          </button>
+                        </div>
+                        <div style={{ marginTop: '8px' }}>
+                          <div style={{ padding: '8px 12px', borderRadius: '8px', background: gpsCoords ? 'rgba(16,185,129,0.08)' : '#F1F5F9', border: `1px solid ${gpsCoords ? 'rgba(16,185,129,0.2)' : '#E2E8F0'}`, color: gpsCoords ? '#10B981' : '#475569', fontSize: '0.75rem', fontFamily: 'monospace' }}>
+                            {gpsCoords ? `Lat: ${gpsCoords.lat.toFixed(6)}  |  Lon: ${gpsCoords.lon.toFixed(6)}` : '📍 Click on the map to place a pin'}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Action buttons placed cleanly inside the right column at the bottom */}
+                      <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>
+                        <button type="button" onClick={() => setShowModal(false)}
+                          style={{ flex: 1, padding: '11px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: '12px', color: '#475569', cursor: 'pointer', fontWeight: 600, fontSize: '0.85rem' }}>
+                          Cancel
+                        </button>
+                        <button type="submit" disabled={submitting}
+                          style={{ flex: 1.5, padding: '11px', background: submitting ? 'rgba(6,182,212,0.3)' : 'linear-gradient(135deg, #06B6D4, #3B82F6)', border: 'none', borderRadius: '12px', color: '#fff', cursor: submitting ? 'not-allowed' : 'pointer', fontWeight: 700, fontSize: '0.85rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', boxShadow: '0 4px 16px rgba(6,182,212,0.3)' }}>
+                          {submitting ? (
+                            <><Loader2 size={16} className="spin" /> {editingStationId ? 'Updating...' : 'Creating...'}</>
+                          ) : (
+                            <><Edit size={16} /> {editingStationId ? 'UPDATE' : 'CREATE'}</>
+                          )}
+                        </button>
+                      </div>
+                    </div>
+
+                  </div>
+                </form>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+
+      {/* Tab Toggle */}
+      <div style={{ display: 'flex', gap: '4px', marginBottom: '28px', background: 'rgba(255,255,255,0.03)', padding: '4px', borderRadius: '12px', width: 'fit-content', border: '1px solid rgba(255,255,255,0.06)' }}>
+        {(['stations', 'profile'] as const).map(tab => (
+          <button key={tab} onClick={() => setActiveTab(tab)} style={{ padding: '10px 24px', borderRadius: '10px', border: 'none', background: activeTab === tab ? 'linear-gradient(135deg, #06B6D4, #3B82F6)' : 'transparent', color: activeTab === tab ? '#fff' : '#64748B', fontWeight: activeTab === tab ? 700 : 500, fontSize: '0.875rem', cursor: 'pointer', transition: 'all 0.3s ease', display: 'flex', alignItems: 'center', gap: '8px', boxShadow: activeTab === tab ? '0 4px 12px rgba(6,182,212,0.3)' : 'none' }}>
+            {tab === 'stations' ? <><MapPin size={16} /> Station Management</> : <><Building2 size={16} /> Organisation Profile</>}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'profile' ? (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '24px' }}>
+            <div style={cardStyle}>
+              <h3 style={{ fontSize: '1.1rem', fontWeight: 800, marginBottom: '24px', color: '#fff' }}>Fleet Operator Profile</h3>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
+                <div><label style={labelStyle}>Full Name</label><input style={inputStyle} defaultValue={user?.name || ''} placeholder="Full name" /></div>
+                <div><label style={labelStyle}>Username</label><input style={{ ...inputStyle, fontFamily: 'monospace', color: '#06B6D4' }} defaultValue={user?.username || ''} readOnly /></div>
+                <div><label style={labelStyle}>Email Address</label><input style={inputStyle} type="email" defaultValue={user?.email || ''} placeholder="Email" /></div>
+                <div><label style={labelStyle}>Phone Number</label><input style={inputStyle} defaultValue={user?.phone || ''} placeholder="+91-XXXXXXXXXX" /></div>
+                <div style={{ gridColumn: '1 / -1' }}><label style={labelStyle}>Organisation ID</label><input style={{ ...inputStyle, fontFamily: 'monospace', fontSize: '0.78rem', color: '#94A3B8' }} defaultValue={user?.organisationId || organisationId || ''} readOnly /></div>
+                {user?.department && <div><label style={labelStyle}>Department</label><input style={inputStyle} defaultValue={user.department} /></div>}
+                {user?.designation && <div><label style={labelStyle}>Designation</label><input style={inputStyle} defaultValue={user.designation} /></div>}
+              </div>
+              <div style={{ marginTop: '24px', display: 'flex', justifyContent: 'flex-end' }}>
+                <button style={{ padding: '12px 28px', background: 'linear-gradient(135deg, #06B6D4, #3B82F6)', border: 'none', borderRadius: '10px', color: '#fff', fontWeight: 700, cursor: 'pointer', fontSize: '0.875rem' }}>SAVE CHANGES</button>
+              </div>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+              <div style={{ ...cardStyle, textAlign: 'center' }}>
+                <div style={{ width: '72px', height: '72px', borderRadius: '50%', background: 'linear-gradient(135deg, #06B6D4, #3B82F6)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', fontSize: '1.5rem', fontWeight: 900, color: '#fff', boxShadow: '0 0 24px rgba(6,182,212,0.3)' }}>
+                  {(user?.name || 'FO').split(' ').map((n: string) => n[0]).join('').toUpperCase().substring(0, 2)}
+                </div>
+                <h3 style={{ fontSize: '1.1rem', fontWeight: 800 }}>{user?.name || 'Fleet Operator'}</h3>
+                <p style={{ fontSize: '0.8rem', color: '#64748B', marginTop: '4px' }}>{user?.email || ''}</p>
+                <div style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  <div style={{ padding: '8px', background: user?.status === 'ACTIVE' ? 'rgba(16,185,129,0.1)' : 'rgba(239,68,68,0.1)', border: `1px solid ${user?.status === 'ACTIVE' ? 'rgba(16,185,129,0.2)' : 'rgba(239,68,68,0.2)'}`, borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', color: user?.status === 'ACTIVE' ? '#10B981' : '#EF4444', fontWeight: 700, fontSize: '0.75rem' }}>
+                    <ShieldCheck size={14} /> {user?.status || 'ACTIVE'}
+                  </div>
+                  <div style={{ padding: '8px', background: 'rgba(6,182,212,0.06)', border: '1px solid rgba(6,182,212,0.12)', borderRadius: '8px', color: '#475569', fontSize: '0.68rem', fontFamily: 'monospace', wordBreak: 'break-all', textAlign: 'left' }}>
+                    ORG: {user?.organisationId || organisationId || '—'}
+                  </div>
+                </div>
+              </div>
+              <div style={cardStyle}>
+                <h4 style={{ fontSize: '0.875rem', fontWeight: 700, marginBottom: '16px', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Quick Stats</h4>
+                {[{ icon: MapPin, label: 'Active Stations', value: stations.length || 0 }, { icon: Truck, label: 'Total Vehicles', value: 25 }, { icon: Users, label: 'Total Staff', value: 71 }].map(({ icon: Icon, label, value }) => (
+                  <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: '#94A3B8', fontSize: '0.875rem' }}><Icon size={16} color="#06B6D4" /> {label}</div>
+                    <span style={{ fontWeight: 900, fontSize: '1.25rem', color: '#fff' }}>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      ) : (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '10px',
+              background: '#FFFFFF',
+              padding: '10px 16px',
+              borderRadius: '12px',
+              border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+              boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : '0 2px 4px rgba(15, 23, 42, 0.01)',
+              transition: 'all 0.2s ease',
+              width: '320px',
+              position: 'relative'
+            }}>
+              <Search size={16} color={isSearchFocused ? "#06B6D4" : "#64748B"} style={{ transition: 'color 0.2s' }} />
+              <input 
+                type="text" 
+                placeholder="Search stations, incharge..." 
+                value={searchQuery} 
+                onChange={e => setSearchQuery(e.target.value)}
+                onFocus={() => setIsSearchFocused(true)}
+                onBlur={() => setIsSearchFocused(false)}
+                className="stations-search-input"
+                style={{ 
+                  background: 'transparent', 
+                  border: 'none', 
+                  color: '#0F172A', 
+                  fontSize: '0.875rem', 
+                  outline: 'none', 
+                  width: '100%',
+                  paddingRight: searchQuery ? '24px' : '0'
+                }} 
+              />
+              {searchQuery && (
+                <button 
+                  onClick={() => setSearchQuery('')}
+                  style={{
+                    position: 'absolute',
+                    right: '12px',
+                    background: 'transparent',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: '#94A3B8',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '2px',
+                    borderRadius: '50%',
+                  }}
+                  onMouseEnter={e => e.currentTarget.style.color = '#475569'}
+                  onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}
+                >
+                  <X size={14} />
+                </button>
+              )}
+            </div>
+            <button onClick={openCreateModal}
+              style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '11px 22px', background: 'linear-gradient(135deg, #06B6D4, #3B82F6)', border: 'none', borderRadius: '12px', color: '#fff', fontWeight: 700, cursor: 'pointer', boxShadow: '0 4px 12px rgba(6,182,212,0.3)', fontSize: '0.875rem' }}>
+              <Plus size={18} /> ADD NEW STATION
+            </button>
+          </div>
+
+          {/* Loading state */}
+          {loading && (
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '200px', gap: '12px', color: '#64748B' }}>
+              <Loader2 size={24} style={{ animation: 'spin 1s linear infinite' }} />
+              <span>Loading stations...</span>
+            </div>
+          )}
+
+          {/* Error state */}
+          {!loading && fetchError && (
+            <div style={{ textAlign: 'center', padding: '40px 24px', background: 'rgba(239,68,68,0.05)', border: '1px solid rgba(239,68,68,0.15)', borderRadius: '16px', marginBottom: '20px' }}>
+              <AlertCircle size={36} color="#EF4444" style={{ marginBottom: '12px', opacity: 0.8 }} />
+              <h3 style={{ fontSize: '1rem', fontWeight: 700, color: '#EF4444', marginBottom: '8px' }}>Failed to Load Stations</h3>
+              <p style={{ fontSize: '0.82rem', color: '#94A3B8', marginBottom: '16px' }}>{fetchError}</p>
+              <button onClick={fetchStations} style={{ padding: '10px 24px', background: 'linear-gradient(135deg, #06B6D4, #3B82F6)', border: 'none', borderRadius: '10px', color: '#fff', fontWeight: 700, cursor: 'pointer', fontSize: '0.875rem' }}>
+                ↺ Retry
+              </button>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {!loading && !fetchError && filteredStations.length === 0 && (
+            <div style={{ textAlign: 'center', padding: '60px 24px', color: '#64748B' }}>
+              <MapPin size={48} style={{ opacity: 0.2, marginBottom: '16px' }} />
+              <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#94A3B8', marginBottom: '8px' }}>No Stations Found</h3>
+              <p style={{ fontSize: '0.875rem' }}>Click "Add New Station" to create your first dispatch station.</p>
+            </div>
+          )}
+
+          {/* Station Cards */}
+          {!loading && (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: '20px' }}>
+              {filteredStations.map(station => (
+                <div key={station.id} style={{ ...cardStyle, position: 'relative', overflow: 'hidden', transition: 'transform 0.2s, box-shadow 0.2s', cursor: 'pointer' }}
+                  onMouseEnter={e => { (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)'; (e.currentTarget as HTMLElement).style.boxShadow = '0 12px 32px rgba(15, 23, 42, 0.06)'; }}
+                  onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLElement).style.boxShadow = 'none'; }}
+                >
+                  <div style={{ position: 'absolute', top: 0, left: 0, width: '4px', height: '100%', background: station.status === 'INACTIVE' ? '#EF4444' : '#10B981', borderRadius: '4px 0 0 4px' }} />
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
+                    <div>
+                      <h3 style={{ fontSize: '1rem', fontWeight: 800, color: '#0F172A' }}>{station.name}</h3>
+                      <div style={{ fontSize: '0.7rem', color: '#475569', marginTop: '4px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                        <Globe size={11} /> {station.id?.substring(0, 8)}...
+                      </div>
+                    </div>
+                    <button style={{ background: 'transparent', border: 'none', color: '#475569', cursor: 'pointer', padding: '4px' }}><MoreVertical size={18} /></button>
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '20px' }}>
+                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
+                      <MapPin size={15} color="#06B6D4" style={{ marginTop: '2px', flexShrink: 0 }} />
+                      <div>
+                        <div style={{ fontSize: '0.85rem', color: '#334155' }}>{station.address}</div>
+                        {(station.gps_lat || station.gps_lon) && (
+                          <div style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', marginTop: '2px' }}>
+                            GPS: {station.gps_lat}, {station.gps_lon}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    {station.incharge_name && (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                        <Users size={15} color="#06B6D4" />
+                        <span style={{ fontSize: '0.85rem', color: '#475569' }}>Incharge: <span style={{ fontWeight: 700, color: '#0F172A' }}>{station.incharge_name}</span></span>
+                      </div>
+                    )}
+                    {station.phone && (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                        <Phone size={15} color="#06B6D4" />
+                        <span style={{ fontSize: '0.85rem', color: '#475569' }}>{station.phone}</span>
+                      </div>
+                    )}
+                  </div>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px', background: '#E2E8F0', borderRadius: '10px', overflow: 'hidden', marginBottom: '16px', border: '1px solid #E2E8F0' }}>
+                    <div style={{ textAlign: 'center', padding: '14px', background: '#F8FAFC' }}>
+                      <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#0F172A' }}>{station.vehiclesAssigned ?? '—'}</div>
+                      <div style={{ fontSize: '0.62rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '0.5px', marginTop: '4px' }}>Vehicles</div>
+                    </div>
+                    <div style={{ textAlign: 'center', padding: '14px', background: '#F8FAFC' }}>
+                      <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#0F172A' }}>{station.staffAssigned ?? '—'}</div>
+                      <div style={{ fontSize: '0.62rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '0.5px', marginTop: '4px' }}>Staff</div>
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); openEditModal(station); }}
+                      disabled={loadingDetailsId !== null}
+                      style={{
+                        flex: '1 1 70px', padding: '9px',
+                        background: '#FFFFFF',
+                        border: '1px solid #CBD5E1',
+                        borderRadius: '8px',
+                        color: loadingDetailsId === station.id ? '#06B6D4' : '#475569',
+                        fontSize: '0.75rem', fontWeight: 600,
+                        cursor: loadingDetailsId !== null ? 'not-allowed' : 'pointer',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px',
+                        transition: 'all 0.2s'
+                      }}
+                    >
+                      {loadingDetailsId === station.id ? (
+                        <Loader2 size={13} className="spin" />
+                      ) : (
+                        <Edit size={13} />
+                      )}
+                      {loadingDetailsId === station.id ? 'FETCHING...' : 'EDIT'}
+                    </button>
+                    <button 
+                      onClick={(e) => { e.stopPropagation(); setSelectedStationForManifest(station); }}
+                      style={{ flex: '1.2 1 100px', padding: '9px', background: 'rgba(16, 185, 129, 0.08)', border: '1px solid rgba(16, 185, 129, 0.2)', borderRadius: '8px', color: '#10B981', fontSize: '0.75rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}
+                    >
+                      <Users size={13} /> MANIFEST
+                    </button>
+                    {/* <button style={{ flex: '1.5 1 110px', padding: '9px', background: 'rgba(6,182,212,0.08)', border: '1px solid rgba(6,182,212,0.2)', borderRadius: '8px', color: '#06B6D4', fontSize: '0.75rem', fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}>
+                      <Truck size={13} /> ASSIGN ASSETS
+                    </button> */}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </motion.div>
+      )}
+
+      {/* Station Manifest Modal */}
+      {createPortal(
+        <AnimatePresence>
+          {selectedStationForManifest && (
+            <motion.div
+              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+              style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.3)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}
+              onClick={() => setSelectedStationForManifest(null)}
+            >
+              <motion.div
+                initial={{ scale: 0.92, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.92, opacity: 0 }}
+                style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: '20px', padding: '24px 32px', width: '750px', maxWidth: '95vw', maxHeight: '90vh', overflowY: 'auto', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 50px rgba(15, 23, 42, 0.12)' }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', borderBottom: '1px solid #F1F5F9', paddingBottom: '16px' }}>
+                  <div>
+                    <h2 style={{ fontSize: '1.25rem', fontWeight: 900, color: '#0F172A', margin: 0 }}>
+                      {selectedStationForManifest.name.toUpperCase()} MANIFEST
+                    </h2>
+                    <p style={{ fontSize: '0.78rem', color: '#64748B', margin: '4px 0 0' }}>
+                      📍 {selectedStationForManifest.address}
+                    </p>
+                  </div>
+                  <button type="button" onClick={() => setSelectedStationForManifest(null)} style={{ background: '#F1F5F9', border: '1px solid #E2E8F0', borderRadius: '8px', padding: '8px', color: '#475569', cursor: 'pointer', display: 'flex' }}>
+                    <X size={18} />
+                  </button>
+                </div>
+
+                <StationManifestContent stationId={selectedStationForManifest.id} />
+
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+
+      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; }`}</style>
+    </div>
+  );
+};
+
+interface ManifestVehicle {
+  id: string;
+  registration_number: string;
+  brand?: string;
+  model?: string;
+  vehicle_type?: string;
+  status: string;
+  activeRoster?: {
+    driver?: { user?: { name: string; phone?: string } };
+    staff?: { user?: { name: string; phone?: string } };
+  };
+  activeShift?: {
+    driver?: { user?: { name: string; phone?: string } };
+    staff?: { user?: { name: string; phone?: string } };
+  };
+}
+
+const StationManifestContent: React.FC<{ stationId: string }> = ({ stationId }) => {
+  const [vehicles, setVehicles] = useState<ManifestVehicle[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    const load = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const authToken = localStorage.getItem('teleems_token') || '';
+        if (!authToken) throw new Error('Session expired — please log in again.');
+
+        const url = `https://teleems-api-gateway.onrender.com/v1/fleet/vehicles?station_id=${stationId}`;
+        console.log('[Manifest] Calling:', url);
+
+        const res = await fetch(url, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${authToken}`,
+          },
+        });
+
+        if (!res.ok) {
+          throw new Error(`HTTP error ${res.status}`);
+        }
+
+        const json = await res.json();
+        if (active) {
+          let list = json?.data?.data || json?.data || (Array.isArray(json) ? json : []);
+          setVehicles(list);
+        }
+      } catch (err: any) {
+        if (active) {
+          setError(err.message || 'Failed to fetch station assets');
+        }
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    };
+    load();
+    return () => { active = false; };
+  }, [stationId]);
+
+  const crewList = React.useMemo(() => {
+    const map = new Map<string, { name: string; role: string; phone?: string }>();
+    vehicles.forEach(v => {
+      const roster = v.activeRoster;
+      if (roster) {
+        if (roster.driver?.user?.name) {
+          map.set(roster.driver.user.name, {
+            name: roster.driver.user.name,
+            role: 'Pilot (Driver)',
+            phone: roster.driver.user.phone
+          });
+        }
+        if (roster.staff?.user?.name) {
+          map.set(roster.staff.user.name, {
+            name: roster.staff.user.name,
+            role: 'EMT (Medic)',
+            phone: roster.staff.user.phone
+          });
+        }
+      }
+      const shift = v.activeShift;
+      if (shift) {
+        if (shift.driver?.user?.name) {
+          map.set(shift.driver.user.name, {
+            name: shift.driver.user.name,
+            role: 'Pilot (Driver)',
+            phone: shift.driver.user.phone
+          });
+        }
+        if (shift.staff?.user?.name) {
+          map.set(shift.staff.user.name, {
+            name: shift.staff.user.name,
+            role: 'EMT (Medic)',
+            phone: shift.staff.user.phone
+          });
+        }
+      }
+    });
+    return Array.from(map.values());
+  }, [vehicles]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '60px 0', gap: '12px' }}>
+        <Loader2 className="spin" size={28} color="#06B6D4" style={{ animation: 'spin 1s linear infinite' }} />
+        <span style={{ color: '#64748B', fontSize: '0.85rem', fontWeight: 600 }}>FETCHING STATION ASSETS...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: '24px', textAlign: 'center', color: '#EF4444', background: 'rgba(239, 68, 68, 0.05)', borderRadius: '12px', border: '1px solid rgba(239, 68, 68, 0.15)' }}>
+        <AlertCircle size={28} style={{ marginBottom: '8px', display: 'inline-block' }} />
+        <div style={{ fontSize: '0.875rem', fontWeight: 700 }}>Error Loading Manifest</div>
+        <div style={{ fontSize: '0.8rem', opacity: 0.8, marginTop: '4px' }}>{error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '24px', minHeight: '300px' }}>
+      {/* Vehicles Column */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <h4 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.9rem', fontWeight: 800, color: '#0F172A', margin: 0, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          <Truck size={18} color="#06B6D4" /> Deployed Fleet ({vehicles.length})
+        </h4>
+        
+        {vehicles.length === 0 ? (
+          <div style={{ padding: '40px 16px', textAlign: 'center', background: '#F8FAFC', borderRadius: '12px', border: '1px dashed #E2E8F0', color: '#64748B', fontSize: '0.82rem', fontStyle: 'italic' }}>
+            No vehicles currently docked at this station.
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxHeight: '50vh', overflowY: 'auto', paddingRight: '4px' }}>
+            {vehicles.map(v => {
+              const driverName = v.activeRoster?.driver?.user?.name || v.activeShift?.driver?.user?.name;
+              const emtName = v.activeRoster?.staff?.user?.name || v.activeShift?.staff?.user?.name;
+              return (
+                <div key={v.id} style={{ padding: '14px', background: '#F8FAFC', borderRadius: '12px', border: '1px solid #E2E8F0', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div>
+                      <div style={{ fontSize: '0.9rem', fontWeight: 800, color: '#0F172A' }}>{v.registration_number}</div>
+                      <div style={{ fontSize: '0.72rem', color: '#475569', marginTop: '2px' }}>{v.brand} {v.model} • {v.vehicle_type}</div>
+                    </div>
+                    <span style={{ 
+                      fontSize: '0.68rem', 
+                      fontWeight: 700, 
+                      padding: '4px 10px', 
+                      borderRadius: '20px', 
+                      background: v.status === 'AVAILABLE' ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)', 
+                      color: v.status === 'AVAILABLE' ? '#10B981' : '#EF4444' 
+                    }}>
+                      {v.status}
+                    </span>
+                  </div>
+                  
+                  {(driverName || emtName) && (
+                    <div style={{ borderTop: '1px solid #E2E8F0', paddingTop: '8px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                      {driverName && (
+                        <div style={{ fontSize: '0.75rem', color: '#475569', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                          <span style={{ color: '#94A3B8', fontWeight: 600 }}>Pilot:</span>
+                          <strong style={{ color: '#0F172A' }}>{driverName}</strong>
+                        </div>
+                      )}
+                      {emtName && (
+                        <div style={{ fontSize: '0.75rem', color: '#475569', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                          <span style={{ color: '#94A3B8', fontWeight: 600 }}>EMT:</span>
+                          <strong style={{ color: '#0F172A' }}>{emtName}</strong>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Staff Column */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <h4 style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.9rem', fontWeight: 800, color: '#0F172A', margin: 0, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+          <Users size={18} color="#06B6D4" /> Active Crew ({crewList.length})
+        </h4>
+
+        {crewList.length === 0 ? (
+          <div style={{ padding: '40px 16px', textAlign: 'center', background: '#F8FAFC', borderRadius: '12px', border: '1px dashed #E2E8F0', color: '#64748B', fontSize: '0.82rem', fontStyle: 'italic' }}>
+            No crew members currently on duty.
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxHeight: '50vh', overflowY: 'auto' }}>
+            {crewList.map((c, i) => (
+              <div key={i} style={{ padding: '12px 14px', background: '#F8FAFC', borderRadius: '12px', border: '1px solid #E2E8F0', display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <div style={{ width: '34px', height: '34px', borderRadius: '50%', background: 'rgba(6, 182, 212, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#06B6D4' }}>
+                  <Users size={16} />
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#0F172A' }}>{c.name}</div>
+                  <div style={{ fontSize: '0.7rem', color: '#475569', marginTop: '2px' }}>{c.role} {c.phone ? `• ${c.phone}` : ''}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/fleet/FleetPendingRequests.tsx

@@ -0,0 +1,393 @@
+import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { 
+  ArrowLeft, 
+  Activity, 
+  AlertTriangle, 
+  Package, 
+  CheckCircle, 
+  Clock, 
+  ChevronLeft, 
+  ChevronRight, 
+  Search,
+  Check,
+  Truck
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Card } from '../../components/Common';
+import { fleetApi } from '../../api/fleet';
+
+export const FleetPendingRequests: React.FC = () => {
+  const [, setSearchParams] = useSearchParams();
+  const [requests, setRequests] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Filtering & Pagination states
+  const [statusFilter, setStatusFilter] = useState<string>('PENDING');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [isSearchFocused, setIsSearchFocused] = useState<boolean>(false);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const itemsPerPage = 8;
+
+  // Inline loading when clicking action buttons
+  const [processingId, setProcessingId] = useState<string | null>(null);
+
+  const fetchRequests = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      if (!token) {
+        setError('Session token expired. Please log in.');
+        return;
+      }
+      // Fetch with specific status filter (PENDING, APPROVED, COMPLETED, or '' for all)
+      const res = await fleetApi.getRestockRequests(token, statusFilter || undefined);
+      const data = res?.data?.data || res?.data || [];
+      setRequests(Array.isArray(data) ? data : []);
+      setCurrentPage(1);
+    } catch (err: any) {
+      console.error('Failed to fetch restock requests:', err);
+      setError(err?.message || 'Failed to fetch restock requests.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRequests();
+  }, [statusFilter]);
+
+  const handleUpdateStatus = async (requestId: string, nextStatus: 'APPROVED' | 'COMPLETED') => {
+    if (!requestId) return;
+    setProcessingId(requestId);
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      await fleetApi.updateRestockRequestStatus(requestId, nextStatus, token);
+      alert(`Request has been successfully marked as ${nextStatus}!`);
+      // Reload current tab requests
+      fetchRequests();
+    } catch (err: any) {
+      console.error('Failed to update request status:', err);
+      alert(err?.message || `Failed to mark request as ${nextStatus}. Please try again.`);
+    } finally {
+      setProcessingId(null);
+    }
+  };
+
+  // Filter local requests on top of status filter using search query
+  const filteredRequests = requests.filter(req => {
+    const itemName = req.item_master?.name || '';
+    const itemCategory = req.item_master?.category || '';
+    const requestedBy = typeof req.requested_by === 'object' && req.requested_by !== null
+      ? (req.requested_by.name || req.requested_by.username || '')
+      : String(req.requested_by || '');
+
+    return (
+      itemName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      itemCategory.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      requestedBy.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  });
+
+  // Pagination calculation
+  const totalPages = Math.ceil(filteredRequests.length / itemsPerPage);
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredRequests.slice(indexOfFirstItem, indexOfLastItem);
+
+  return (
+    <div className="animate-in fade-in duration-500" style={{ fontFamily: "'Inter', sans-serif" }}>
+      {/* Top action bar */}
+      <div style={{ marginBottom: '24px', display: 'flex', gap: '12px', alignItems: 'center' }}>
+        <button 
+          onClick={() => setSearchParams({ tab: 'warehouse' })}
+          style={{ 
+            background: 'rgba(255,255,255,0.05)', 
+            border: '1px solid rgba(255,255,255,0.1)', 
+            color: '#94A3B8', 
+            borderRadius: '12px', 
+            width: '52px', 
+            height: '42px',
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'center', 
+            cursor: 'pointer', 
+            transition: 'all 0.2s', 
+            flexShrink: 0 
+          }}
+          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
+          onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'}
+          title="Back to Warehouse Stock"
+        >
+          <ArrowLeft size={18} />
+        </button>
+
+        {/* Search filter input */}
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          background: '#FFFFFF',
+          padding: '10px 16px',
+          borderRadius: '12px',
+          border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+          boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : '0 2px 4px rgba(15, 23, 42, 0.01)',
+          transition: 'all 0.2s ease',
+          width: '320px',
+          position: 'relative'
+        }}>
+          <Search size={16} color={isSearchFocused ? "#06B6D4" : "#64748B"} />
+          <input 
+            type="text" 
+            placeholder="Search request items or users..." 
+            value={searchQuery} 
+            onChange={e => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            onFocus={() => setIsSearchFocused(true)}
+            onBlur={() => setIsSearchFocused(false)}
+            className="stations-search-input"
+            style={{ 
+              background: 'transparent', 
+              border: 'none', 
+              color: '#0F172A', 
+              fontSize: '0.875rem', 
+              outline: 'none', 
+              width: '100%'
+            }} 
+          />
+        </div>
+
+        {/* Status filters */}
+        <div style={{ display: 'flex', gap: '8px', marginLeft: 'auto' }}>
+          {[
+            { id: 'PENDING', label: 'Pending Approval', count: statusFilter === 'PENDING' ? filteredRequests.length : null },
+            { id: 'APPROVED', label: 'Approved (Awaiting Handover)', count: statusFilter === 'APPROVED' ? filteredRequests.length : null }
+          ].map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => {
+                setStatusFilter(tab.id);
+                setSearchQuery('');
+              }}
+              style={{
+                background: statusFilter === tab.id ? '#06B6D4' : '#FFFFFF',
+                color: statusFilter === tab.id ? '#FFFFFF' : '#475569',
+                border: statusFilter === tab.id ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+                borderRadius: '12px',
+                padding: '10px 18px',
+                fontSize: '0.8125rem',
+                fontWeight: 700,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                boxShadow: statusFilter === tab.id ? '0 4px 12px rgba(6, 182, 212, 0.2)' : '0 1px 2px rgba(15, 23, 42, 0.05)',
+                transition: 'all 0.2s ease'
+              }}
+            >
+              {tab.label}
+              {tab.count !== null && (
+                <span style={{
+                  background: statusFilter === tab.id ? '#FFFFFF' : 'rgba(6, 182, 212, 0.1)',
+                  color: statusFilter === tab.id ? '#06B6D4' : '#06B6D4',
+                  padding: '2px 6px',
+                  borderRadius: '6px',
+                  fontSize: '0.7rem',
+                  fontWeight: 800
+                }}>
+                  {tab.count}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <Card title={`${statusFilter.charAt(0) + statusFilter.slice(1).toLowerCase()} Restock Requests Ledger`}>
+        {loading ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '100px', gap: '16px', color: '#64748B' }}>
+            <Activity size={32} className="spin" style={{ color: '#06B6D4' }} />
+            <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>FETCHING TRANSACTION RECORDS...</span>
+          </div>
+        ) : error ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '80px 24px', textAlign: 'center', color: '#EF4444' }}>
+            <AlertTriangle size={48} style={{ marginBottom: '16px', opacity: 0.8 }} />
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Synchronization Failed</h3>
+            <p style={{ fontSize: '0.82rem', color: '#94A3B8', maxWidth: '360px', margin: '0 auto' }}>{error}</p>
+          </div>
+        ) : currentItems.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '100px 24px', color: '#64748B' }}>
+            <Package size={48} style={{ opacity: 0.2, marginBottom: '16px', color: '#06B6D4' }} />
+            <h3 style={{ fontSize: '1rem', fontWeight: 700, color: '#475569', marginBottom: '4px' }}>No Supply Requests</h3>
+            <p style={{ fontSize: '0.8125rem' }}>There are no restock requests matching this state filter right now.</p>
+          </div>
+        ) : (
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ textAlign: 'left', opacity: 0.5, fontSize: '0.65rem', textTransform: 'uppercase', borderBottom: '1px solid rgba(15, 23, 42, 0.08)' }}>
+                <th style={{ padding: '16px 12px', color: '#0F172A' }}>Requested Supply Item</th>
+                <th style={{ padding: '16px 12px', color: '#0F172A' }}>Quantity Demanded</th>
+                <th style={{ padding: '16px 12px', color: '#0F172A' }}>Requested By</th>
+                <th style={{ padding: '16px 12px', color: '#0F172A' }}>Request Date</th>
+                <th style={{ padding: '16px 12px', color: '#0F172A' }}>Status Badge</th>
+                <th style={{ padding: '16px 12px', color: '#0F172A', textAlign: 'right' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentItems.map((req) => {
+                const requestedUser = typeof req.requested_by === 'object' && req.requested_by !== null
+                  ? (req.requested_by.name || req.requested_by.username || 'Unknown User')
+                  : (req.requested_by || 'N/A');
+
+                return (
+                  <tr key={req.id} style={{ borderBottom: '1px solid rgba(15, 23, 42, 0.04)', transition: 'background 0.2s' }} className="hover-glow">
+                    <td style={{ padding: '16px 12px' }}>
+                      <div style={{ fontWeight: 700, fontSize: '0.875rem', color: '#0F172A' }}>
+                        {req.item_master?.name || 'Unknown Item'}
+                      </div>
+                      <div style={{ fontSize: '0.7rem', color: '#64748B', marginTop: '2px', fontWeight: 500 }}>
+                        Category: {req.item_master?.category || 'General'}
+                      </div>
+                    </td>
+                    <td style={{ padding: '16px 12px' }}>
+                      <div style={{ fontWeight: 900, fontSize: '1rem', color: '#06B6D4' }}>
+                        {req.quantity} <span style={{ fontSize: '0.7rem', color: '#64748B', fontWeight: 500 }}>Units</span>
+                      </div>
+                    </td>
+                    <td style={{ padding: '16px 12px' }}>
+                      <div style={{ fontWeight: 600, fontSize: '0.8rem', color: '#475569' }}>
+                        {requestedUser}
+                      </div>
+                    </td>
+                    <td style={{ padding: '16px 12px' }}>
+                      <div style={{ fontSize: '0.75rem', color: '#64748B' }}>
+                        {new Date(req.createdAt || req.updatedAt).toLocaleDateString()}
+                      </div>
+                    </td>
+                    <td style={{ padding: '16px 12px' }}>
+                      <span style={{
+                        fontSize: '0.65rem',
+                        fontWeight: 900,
+                        textTransform: 'uppercase',
+                        color: statusFilter === 'PENDING' ? '#D97706' : statusFilter === 'APPROVED' ? '#2563EB' : '#16A34A',
+                        background: statusFilter === 'PENDING' ? 'rgba(245, 158, 11, 0.1)' : statusFilter === 'APPROVED' ? 'rgba(59, 130, 246, 0.1)' : 'rgba(34, 197, 94, 0.1)',
+                        padding: '4px 10px',
+                        borderRadius: '6px'
+                      }}>
+                        {req.status}
+                      </span>
+                    </td>
+                    <td style={{ padding: '16px 12px', textAlign: 'right' }}>
+                      {statusFilter === 'PENDING' && (
+                        <button
+                          disabled={processingId !== null}
+                          onClick={() => handleUpdateStatus(req.id, 'APPROVED')}
+                          style={{
+                            background: '#10B981',
+                            border: 'none',
+                            color: '#FFFFFF',
+                            borderRadius: '8px',
+                            padding: '6px 12px',
+                            fontSize: '0.75rem',
+                            fontWeight: 700,
+                            cursor: processingId !== null ? 'not-allowed' : 'pointer',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            opacity: processingId !== null ? 0.6 : 1,
+                            transition: 'all 0.2s',
+                            boxShadow: '0 2px 4px rgba(16, 185, 129, 0.15)'
+                          }}
+                        >
+                          {processingId === req.id ? (
+                            <Activity size={12} className="spin" />
+                          ) : (
+                            <Check size={12} strokeWidth={3} />
+                          )}
+                          APPROVE
+                        </button>
+                      )}
+                      {statusFilter === 'APPROVED' && (
+                        <button
+                          disabled={processingId !== null}
+                          onClick={() => handleUpdateStatus(req.id, 'COMPLETED')}
+                          style={{
+                            background: '#3B82F6',
+                            border: 'none',
+                            color: '#FFFFFF',
+                            borderRadius: '8px',
+                            padding: '6px 12px',
+                            fontSize: '0.75rem',
+                            fontWeight: 700,
+                            cursor: processingId !== null ? 'not-allowed' : 'pointer',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            opacity: processingId !== null ? 0.6 : 1,
+                            transition: 'all 0.2s',
+                            boxShadow: '0 2px 4px rgba(59, 130, 246, 0.15)'
+                          }}
+                        >
+                          {processingId === req.id ? (
+                            <Activity size={12} className="spin" />
+                          ) : (
+                            <Truck size={12} />
+                          )}
+                          HAND OVER (COMPLETE)
+                        </button>
+                      )}
+                      {statusFilter === 'COMPLETED' && (
+                        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', color: '#10B981', fontSize: '0.75rem', fontWeight: 700 }}>
+                          <CheckCircle size={14} /> TRANSACTION CLOSED
+                        </div>
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+
+        {!loading && !error && filteredRequests.length > itemsPerPage && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px', borderTop: '1px solid rgba(15, 23, 42, 0.08)', marginTop: '8px' }}>
+            <div style={{ fontSize: '0.8125rem', color: '#64748B' }}>
+              Showing {indexOfFirstItem + 1} to {Math.min(indexOfLastItem, filteredRequests.length)} of {filteredRequests.length} transactions
+            </div>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button 
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                style={{ 
+                  padding: '6px 12px', background: 'transparent', border: '1px solid #CBD5E1', borderRadius: '6px', 
+                  color: currentPage === 1 ? '#94A3B8' : '#475569', cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                  display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.8125rem', fontWeight: 600, transition: 'all 0.2s' 
+                }}
+              >
+                <ChevronLeft size={14} /> Prev
+              </button>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 8px', fontSize: '0.8125rem', fontWeight: 700, color: '#0F172A' }}>
+                {currentPage} / {totalPages}
+              </div>
+              <button 
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                style={{ 
+                  padding: '6px 12px', background: 'transparent', border: '1px solid #CBD5E1', borderRadius: '6px', 
+                  color: currentPage === totalPages ? '#94A3B8' : '#475569', cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                  display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.8125rem', fontWeight: 600, transition: 'all 0.2s' 
+                }}
+              >
+                Next <ChevronRight size={14} />
+              </button>
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+};

src/pages/fleet/FleetPersonnel.tsx

@@ -1,205 +1,511 @@
-import React, { useState } from 'react';
-import { 
-  UserPlus, 
-  Search, 
-  Filter, 
-  Users, 
-  Medal, 
-  Clock, 
-  ShieldCheck, 
-  AlertTriangle,
-  Mail,
-  Phone,
-  Calendar,
-  CheckCircle2,
-  XCircle,
-  MoreVertical
-} from 'lucide-react';
+import React, { useState, useEffect, useCallback } from 'react';
+import { UserPlus, Search, ShieldCheck, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Loader2, AlertCircle, Phone, Mail, X, Eye, EyeOff } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Card } from '../../components/Common';
 
 interface Staff {
-  id: string;
-  name: string;
-  role: 'DRIVER' | 'EMT' | 'DOCTOR' | 'PARAMEDIC';
-  status: 'ON_DUTY' | 'OFF_DUTY' | 'ON_LEAVE';
-  specialization?: string;
-  phone: string;
-  email: string;
-  joinedDate: string;
-  tripsCompleted: number;
-  rating: number;
-  certExpiry: string;
+  id: string; type?: string; status?: string; createdAt?: string; aadhaar_number?: string;
+  professional_details?: { qualification?: string; certificate_expiry?: string; certificate_number?: string; certification_body?: string; license_expiry?: string; license_number?: string; license_category?: string; };
+  user?: { name?: string; phone?: string; email?: string | null; status?: string; isAvailable?: boolean; };
 }
 
-const MOCK_STAFF: Staff[] = [
-  { id: 'S-101', name: 'Vikram Singh', role: 'DRIVER', status: 'ON_DUTY', phone: '+91 98765 43210', email: 'v.singh@teleems.com', joinedDate: '2023-01-15', tripsCompleted: 452, rating: 4.8, certExpiry: '2026-12-01' },
-  { id: 'S-102', name: 'Dr. Ananya Iyer', role: 'DOCTOR', specialization: 'Critical Care', status: 'ON_DUTY', phone: '+91 98765 43211', email: 'a.iyer@teleems.com', joinedDate: '2023-06-20', tripsCompleted: 128, rating: 4.9, certExpiry: '2026-05-15' },
-  { id: 'S-103', name: 'Rahul Verma', role: 'EMT', status: 'ON_LEAVE', phone: '+91 98765 43212', email: 'r.verma@teleems.com', joinedDate: '2024-02-10', tripsCompleted: 215, rating: 4.7, certExpiry: '2026-06-01' },
-  { id: 'S-104', name: 'Suresh Kumar', role: 'DRIVER', status: 'OFF_DUTY', phone: '+91 98765 43213', email: 's.kumar@teleems.com', joinedDate: '2022-11-05', tripsCompleted: 890, rating: 4.6, certExpiry: '2026-08-20' },
-];
+const ROLE_COLORS: Record<string, { color: string; bg: string }> = {
+  DRIVER: { color: '#06B6D4', bg: 'rgba(6,182,212,0.08)' },
+  EMT:    { color: '#3B82F6', bg: 'rgba(59,130,246,0.08)' },
+  DOCTOR: { color: '#10B981', bg: 'rgba(16,185,129,0.08)' },
+};
+const DEF = { color: '#475569', bg: 'rgba(71,85,105,0.06)' };
+const STATUS_CFG: Record<string, { label: string; color: string }> = {
+  ON_DUTY: { label: 'On Duty', color: '#10B981' }, OFF_DUTY: { label: 'Off Duty', color: '#475569' },
+  ON_LEAVE: { label: 'On Leave', color: '#F59E0B' }, ACTIVE: { label: 'Active', color: '#10B981' }, INACTIVE: { label: 'Inactive', color: '#EF4444' },
+};
+const FILTERS = ['ALL', 'DRIVER', 'EMT', 'DOCTOR'] as const;
+const th: React.CSSProperties = { padding: '14px 18px', fontSize: '0.68rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, textAlign: 'left', borderBottom: '1px solid #CBD5E1', background: '#F1F5F9', whiteSpace: 'nowrap' };
+
+const norm = (s: Staff) => {
+  const pd = s.professional_details;
+  return {
+    id: s.id, name: s.user?.name || '—', role: (s.type || '').toUpperCase(),
+    status: (s.status || s.user?.status || 'ACTIVE').toUpperCase(),
+    phone: s.user?.phone || '—', email: s.user?.email || null,
+    joinedDate: s.createdAt ? s.createdAt.substring(0, 10) : '',
+    specialization: pd?.qualification || pd?.license_category || pd?.certification_body || '',
+    certExpiry: pd?.certificate_expiry || pd?.license_expiry || '',
+    isAvailable: s.user?.isAvailable ?? true,
+  };
+};
 
 export const FleetPersonnel: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<'ALL' | 'DRIVER' | 'EMT' | 'DOCTOR'>('ALL');
-  const [selectedStaff, setSelectedStaff] = useState<Staff | null>(null);
+  const [staffList, setStaffList] = useState<Staff[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [filter, setFilter] = useState<typeof FILTERS[number]>('ALL');
+  const [search, setSearch] = useState('');
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [page, setPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [selectedRaw, setSelectedRaw] = useState<Staff | null>(null);
+  const [showModal, setShowModal]     = useState(false);
+  const [submitting, setSubmitting]   = useState(false);
+  const [submitErr, setSubmitErr]     = useState('');
+  const [submitOk, setSubmitOk]       = useState('');
+  const [showPw, setShowPw]           = useState(false);
+  const [staffType, setStaffType]     = useState<'DRIVER'|'EMT'|'DOCTOR'>('DRIVER');
+  const [form, setForm] = useState({ name:'', phone:'', password:'', aadhaar_number:'',
+    license_number:'', license_category:'', license_expiry:'',
+    qualification:'', certification_body:'', certificate_number:'', certificate_expiry:'',
+    medical_registration_number:'', specialization:'', teleconsult_available: false,
+  });
+  const setF = (k: string, v: string | boolean) => setForm(p => ({ ...p, [k]: v }));
+  const resetModal = () => { setForm({ name:'', phone:'', password:'', aadhaar_number:'', license_number:'', license_category:'', license_expiry:'', qualification:'', certification_body:'', certificate_number:'', certificate_expiry:'', medical_registration_number:'', specialization:'', teleconsult_available: false }); setStaffType('DRIVER'); setSubmitErr(''); setSubmitOk(''); };
+  const token = localStorage.getItem('teleems_token') || '';
 
-  const filteredStaff = MOCK_STAFF.filter(s => activeTab === 'ALL' || s.role === activeTab);
+  const fetchStaff = useCallback(async () => {
+    setLoading(true); setFetchError('');
+    try {
+      const res = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/staff', { headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' } });
+      const json = await res.json();
+      if (res.status === 401 || res.status === 403) { setFetchError('Session expired.'); return; }
+      if (!res.ok) { setFetchError(json?.message || `Error ${res.status}`); return; }
+      let list: Staff[] = [];
+      if (json?.data?.data && Array.isArray(json.data.data)) list = json.data.data;
+      else if (json?.data && Array.isArray(json.data)) list = json.data;
+      else if (Array.isArray(json)) list = json;
+      setStaffList(list);
+    } catch (e) { setFetchError('Network error.'); } finally { setLoading(false); }
+  }, [token]);
 
-  return (
-    <div className="fleet-personnel animate-in fade-in duration-500">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          {['ALL', 'DRIVER', 'EMT', 'DOCTOR'].map(t => (
-            <button 
-              key={t}
-              onClick={() => setActiveTab(t as any)}
-              style={{
-                padding: '8px 16px',
-                borderRadius: '8px',
-                border: '1px solid rgba(255,255,255,0.1)',
-                background: activeTab === t ? 'var(--accent-cyan)' : 'rgba(255,255,255,0.05)',
-                color: activeTab === t ? '#000' : 'var(--text-secondary)',
-                fontSize: '0.75rem',
-                fontWeight: 700,
-                cursor: 'pointer',
-                transition: 'all 0.2s'
-              }}
-            >
-              {t}S
-            </button>
-          ))}
-        </div>
-        <button className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <UserPlus size={18} /> REGISTER PERSONNEL
-        </button>
+  const submitStaff = async () => {
+    if (!form.name || !form.phone) { setSubmitErr('Name and phone are required.'); return; }
+    setSubmitting(true); setSubmitErr(''); setSubmitOk('');
+    let professional_details: Record<string, string | boolean> = {};
+    if (staffType === 'DRIVER') professional_details = { license_number: form.license_number, license_category: form.license_category, license_expiry: form.license_expiry };
+    if (staffType === 'EMT')    professional_details = { qualification: form.qualification, certification_body: form.certification_body, certificate_number: form.certificate_number, certificate_expiry: form.certificate_expiry };
+    if (staffType === 'DOCTOR') professional_details = { medical_registration_number: form.medical_registration_number, specialization: form.specialization, qualification: form.qualification, teleconsult_available: form.teleconsult_available };
+    const body = { name: form.name, phone: form.phone, password: form.password, type: staffType, aadhaar_number: form.aadhaar_number, professional_details };
+    try {
+      const res  = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/staff', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      const json = await res.json();
+      if (!res.ok) { setSubmitErr(json?.message || `Error ${res.status}`); return; }
+      setSubmitOk(`${staffType} registered successfully!`);
+      resetModal();
+      fetchStaff();
+      setTimeout(() => { setShowModal(false); setSubmitOk(''); }, 1500);
+    } catch { setSubmitErr('Network error.'); } finally { setSubmitting(false); }
+  };
+
+  useEffect(() => { fetchStaff(); }, [fetchStaff]);
+
+  const normalized = staffList.map(norm);
+  const filtered = normalized.filter(s => (filter === 'ALL' || s.role === filter) && (s.name.toLowerCase().includes(search.toLowerCase()) || s.role.toLowerCase().includes(search.toLowerCase())));
+  const totalPages = Math.max(1, Math.ceil(filtered.length / itemsPerPage));
+  const safePage = Math.min(page, totalPages);
+  const pageData = filtered.slice((safePage - 1) * itemsPerPage, safePage * itemsPerPage);
+  const onDuty = normalized.filter(s => ['ON_DUTY', 'ACTIVE'].includes(s.status)).length;
+  const offDuty = normalized.filter(s => s.status === 'OFF_DUTY').length;
+  const onLeave = normalized.filter(s => s.status === 'ON_LEAVE').length;
+
+  // ── DETAIL PAGE ──
+  if (selectedRaw) {
+    const s = norm(selectedRaw);
+    const pd = selectedRaw.professional_details;
+    const rc = ROLE_COLORS[s.role] || DEF;
+    const sc = STATUS_CFG[s.status] || { label: s.status, color: '#94A3B8' };
+    const ini = s.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+    const cw = s.certExpiry ? new Date(s.certExpiry) < new Date(Date.now() + 60 * 24 * 60 * 60 * 1000) : false;
+    const row = (label: string, value: string, mono = false) => (
+      <div style={{ padding: '14px 16px', background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: '12px' }}>
+        <div style={{ fontSize: '0.62rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '5px' }}>{label}</div>
+        <div style={{ fontSize: '0.9rem', color: '#0F172A', fontWeight: 600, fontFamily: mono ? 'monospace' : undefined, wordBreak: 'break-all' }}>{value || '—'}</div>
       </div>
+    );
+    return (
+      <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} style={{ color: '#0F172A' }}>
+        <button onClick={() => setSelectedRaw(null)} style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: '10px', padding: '9px 16px', color: '#475569', cursor: 'pointer', fontSize: '0.82rem', fontWeight: 600, marginBottom: '24px' }}>
+          <ChevronLeft size={16} /> Back to Staff List
+        </button>
  
-      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '24px' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Card style={{ padding: '0', overflow: 'hidden' }}>
-            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-              <thead>
-                <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.1)', textAlign: 'left', background: 'rgba(255,255,255,0.02)' }}>
-                  <th style={{ padding: '16px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Personnel</th>
-                  <th style={{ padding: '16px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Role / Specialization</th>
-                  <th style={{ padding: '16px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Status</th>
-                  <th style={{ padding: '16px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Trips</th>
-                  <th style={{ padding: '16px', fontSize: '0.75rem', textTransform: 'uppercase', opacity: 0.5 }}>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredStaff.map(s => (
-                  <tr 
-                    key={s.id} 
-                    onClick={() => setSelectedStaff(s)}
-                    style={{ 
-                      borderBottom: '1px solid rgba(255,255,255,0.05)', 
-                      cursor: 'pointer',
-                      background: selectedStaff?.id === s.id ? 'rgba(59, 130, 246, 0.05)' : 'transparent'
-                    }}
-                    className="hover-glow"
-                  >
-                    <td style={{ padding: '16px' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                        <div style={{ width: '36px', height: '36px', borderRadius: '50%', background: 'rgba(59, 130, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-cyan)', fontWeight: 700, fontSize: '0.875rem', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                          {s.name.charAt(0)}
-                        </div>
-                        <div>
-                          <div style={{ fontWeight: 700 }}>{s.name}</div>
-                          <div style={{ fontSize: '0.65rem', opacity: 0.5 }}>ID: {s.id}</div>
-                        </div>
-                      </div>
-                    </td>
-                    <td style={{ padding: '16px' }}>
-                      <div style={{ fontSize: '0.8125rem', fontWeight: 600 }}>{s.role}</div>
-                      {s.specialization && <div style={{ fontSize: '0.65rem', opacity: 0.5 }}>{s.specialization}</div>}
-                    </td>
-                    <td style={{ padding: '16px' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                        <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: s.status === 'ON_DUTY' ? '#22C55E' : s.status === 'ON_LEAVE' ? '#EF4444' : '#94A3B8' }}></div>
-                        <span style={{ fontSize: '0.7rem', fontWeight: 700, opacity: 0.8 }}>{s.status.replace('_', ' ')}</span>
-                      </div>
-                    </td>
-                    <td style={{ padding: '16px' }}>
-                      <div style={{ fontWeight: 800 }}>{s.tripsCompleted}</div>
-                    </td>
-                    <td style={{ padding: '16px' }}>
-                      <button className="btn-ghost-sm"><MoreVertical size={14} /></button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </Card>
+        {/* Hero */}
+        <div style={{ background: `linear-gradient(135deg,${rc.color}08,#FFFFFF)`, border: `1px solid ${rc.color}30`, borderRadius: '20px', padding: '32px', marginBottom: '20px', position: 'relative', overflow: 'hidden', boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+          <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, borderRadius: '50%', background: `${rc.color}10` }} />
+          <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+            <div style={{ width: 80, height: 80, borderRadius: 22, background: rc.bg, border: `2px solid ${rc.color}60`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.6rem', fontWeight: 900, color: rc.color, boxShadow: `0 0 28px ${rc.color}30`, flexShrink: 0 }}>{ini}</div>
+            <div>
+              <h1 style={{ fontSize: '1.6rem', fontWeight: 900, color: '#0F172A', margin: '0 0 10px' }}>{s.name}</h1>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                <span style={{ padding: '4px 12px', borderRadius: 7, fontSize: '0.72rem', fontWeight: 800, background: rc.bg, color: rc.color, border: `1px solid ${rc.color}40` }}>{s.role}</span>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 12px', borderRadius: 7, fontSize: '0.72rem', fontWeight: 700, background: `${sc.color}18`, color: sc.color }}>
+                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: sc.color, display: 'inline-block', boxShadow: `0 0 6px ${sc.color}` }} />{sc.label}
+                </span>
+                {s.isAvailable && <span style={{ padding: '4px 12px', borderRadius: 7, fontSize: '0.72rem', fontWeight: 700, background: 'rgba(16,185,129,0.12)', color: '#10B981', border: '1px solid rgba(16,185,129,0.2)' }}>✓ Available</span>}
+              </div>
+            </div>
+          </div>
         </div>
  
-        <div style={{ position: 'sticky', top: '0' }}>
-          {selectedStaff ? (
-            <AnimatePresence mode="wait">
-              <motion.div 
-                key={selectedStaff.id}
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.95 }}
-              >
-                <Card>
-                  <div style={{ textAlign: 'center', marginBottom: '24px' }}>
-                    <div style={{ width: '80px', height: '80px', borderRadius: '50%', background: 'rgba(59, 130, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-cyan)', fontSize: '1.5rem', fontWeight: 900, border: '2px solid var(--accent-cyan)', margin: '0 auto 16px', boxShadow: '0 0 20px rgba(59, 130, 246, 0.2)' }}>
-                      {selectedStaff.name.charAt(0)}
+        {/* Grid */}
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+ 
+          {/* Contact */}
+          <div style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: 16, padding: 22, boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+            <div style={{ fontSize: '0.65rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, marginBottom: 14 }}>📞 Contact</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: '#F8FAFC', border: '1px solid rgba(15, 23, 42, 0.06)', borderRadius: 10 }}>
+                <Phone size={16} color="#06B6D4" />
+                <div><div style={{ fontSize: '0.62rem', color: '#475569', marginBottom: 2 }}>Phone</div><div style={{ fontSize: '0.9rem', color: '#0F172A', fontWeight: 600 }}>{s.phone}</div></div>
+              </div>
+              {s.email && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: '#F8FAFC', border: '1px solid rgba(15, 23, 42, 0.06)', borderRadius: 10 }}>
+                  <Mail size={16} color="#06B6D4" />
+                  <div><div style={{ fontSize: '0.62rem', color: '#475569', marginBottom: 2 }}>Email</div><div style={{ fontSize: '0.88rem', color: '#0F172A', fontWeight: 600 }}>{s.email}</div></div>
+                </div>
+              )}
+            </div>
+          </div>
+ 
+          {/* Identity */}
+          <div style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: 16, padding: 22, boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+            <div style={{ fontSize: '0.65rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, marginBottom: 14 }}>🪪 Identity</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {row('Staff ID', s.id, true)}
+              {selectedRaw.aadhaar_number && row('Aadhaar', selectedRaw.aadhaar_number, true)}
+              {row('Joined Date', s.joinedDate)}
+            </div>
+          </div>
+ 
+          {/* Professional — full width */}
+          {pd && (
+            <div style={{ gridColumn: '1 / -1', background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: 16, padding: 22, boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+              <div style={{ fontSize: '0.65rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, marginBottom: 14 }}>🎓 Professional Details</div>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(240px,1fr))', gap: 10 }}>
+                {pd.qualification && row('Qualification', pd.qualification)}
+                {pd.certification_body && row('Certification Body', pd.certification_body)}
+                {(pd.certificate_number || pd.license_number) && row('Cert / License No.', pd.certificate_number || pd.license_number || '', true)}
+                {pd.license_category && row('License Category', pd.license_category)}
+                {s.specialization && row('Specialization', s.specialization)}
+                {s.certExpiry && (
+                  <div style={{ padding: '14px 16px', background: cw ? 'rgba(245,158,11,0.08)' : 'rgba(16,185,129,0.07)', border: `1px solid ${cw ? 'rgba(245,158,11,0.25)' : 'rgba(16,185,129,0.2)'}`, borderRadius: 12 }}>
+                    <div style={{ fontSize: '0.62rem', color: '#475569', marginBottom: 5, display: 'flex', alignItems: 'center', gap: 5, textTransform: 'uppercase' }}>
+                      <ShieldCheck size={11} color={cw ? '#F59E0B' : '#10B981'} /> Cert Expiry
                     </div>
-                    <h2 style={{ fontSize: '1.25rem', fontWeight: 800 }}>{selectedStaff.name}</h2>
-                    <div style={{ fontSize: '0.75rem', color: 'var(--accent-cyan)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{selectedStaff.role}</div>
+                    <div style={{ fontSize: '0.95rem', fontWeight: 800, color: cw ? '#F59E0B' : '#10B981' }}>{s.certExpiry}</div>
                   </div>
-
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '24px' }}>
-                    <div style={{ padding: '12px', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)' }}>
-                      <div style={{ fontSize: '0.65rem', opacity: 0.5, textTransform: 'uppercase', marginBottom: '4px' }}>Trips Rate</div>
-                      <div style={{ fontSize: '1.125rem', fontWeight: 800, color: 'var(--accent-green)' }}>{selectedStaff.rating}/5.0</div>
-                    </div>
-                    <div style={{ padding: '12px', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)' }}>
-                      <div style={{ fontSize: '0.65rem', opacity: 0.5, textTransform: 'uppercase', marginBottom: '4px' }}>SLA Compliance</div>
-                      <div style={{ fontSize: '1.125rem', fontWeight: 800 }}>98.4%</div>
-                    </div>
-                  </div>
-
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-                    <div>
-                      <h4 style={{ fontSize: '0.7rem', fontWeight: 800, textTransform: 'uppercase', opacity: 0.5, marginBottom: '8px' }}>Contact Information</h4>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '0.8125rem' }}>
-                          <Phone size={14} style={{ opacity: 0.5 }} /> {selectedStaff.phone}
-                        </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '0.8125rem' }}>
-                          <Mail size={14} style={{ opacity: 0.5 }} /> {selectedStaff.email}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div>
-                      <h4 style={{ fontSize: '0.7rem', fontWeight: 800, textTransform: 'uppercase', opacity: 0.5, marginBottom: '8px' }}>Certifications</h4>
-                      <div style={{ padding: '12px', borderRadius: '12px', background: 'rgba(245, 158, 11, 0.05)', border: '1px solid rgba(245, 158, 11, 0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <div>
-                          <div style={{ fontSize: '0.75rem', fontWeight: 700 }}>Professional License</div>
-                          <div style={{ fontSize: '0.65rem', opacity: 0.6 }}>Expiry: {selectedStaff.certExpiry}</div>
-                        </div>
-                        <AlertTriangle size={16} color="#F59E0B" />
-                      </div>
-                    </div>
-                  </div>
-
-                  <button className="btn-primary" style={{ width: '100%', marginTop: '24px' }}>MANAGE SHIFT SCHEDULE</button>
-                </Card>
-              </motion.div>
-            </AnimatePresence>
-          ) : (
-            <div className="glass" style={{ padding: '40px', borderRadius: '16px', textAlign: 'center', border: '1px dashed rgba(255,255,255,0.1)' }}>
-              <Users size={32} style={{ opacity: 0.2, margin: '0 auto 16px' }} />
-              <h3 style={{ fontSize: '1rem', fontWeight: 700, marginBottom: '8px' }}>Select Personnel</h3>
-              <p style={{ fontSize: '0.875rem', color: 'var(--text-secondary)' }}>View detailed performance metrics, licensing status, and shift history for your fleet crew.</p>
+                )}
+              </div>
             </div>
           )}
         </div>
+        <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`}</style>
+      </motion.div>
+    );
+  }
+
+  // ── TABLE VIEW ──
+  return (
+    <div style={{ color: '#F8FAFC' }}>
+
+      {/* ── Add Staff Modal ── */}
+      <AnimatePresence>
+        {showModal && (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+            style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.3)', zIndex: 3000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, backdropFilter: 'blur(6px)' }}
+            onClick={e => { if (e.target === e.currentTarget) setShowModal(false); }}
+          >
+            <motion.div initial={{ scale: 0.93, y: 20, opacity: 0 }} animate={{ scale: 1, y: 0, opacity: 1 }} exit={{ scale: 0.93, y: 20, opacity: 0 }}
+              style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: 24, width: 780, maxWidth: '96vw', position: 'relative', boxShadow: '0 20px 50px rgba(15, 23, 42, 0.12)' }}
+            >
+              {/* Modal Header */}
+              <div style={{ background: 'linear-gradient(135deg,rgba(6,182,212,0.08),transparent)', borderBottom: '1px solid rgba(15, 23, 42, 0.08)', padding: '20px 28px 16px', borderRadius: '24px 24px 0 0' }}>
+                <button onClick={() => setShowModal(false)} style={{ position: 'absolute', top: 14, right: 14, background: '#F1F5F9', border: '1px solid #E2E8F0', borderRadius: 8, padding: 6, color: '#475569', cursor: 'pointer', display: 'flex' }}><X size={15} /></button>
+                <h3 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#0F172A' }}>Register New Staff</h3>
+                <p style={{ margin: '4px 0 0', fontSize: '0.75rem', color: '#475569' }}>Fill details based on staff type</p>
+              </div>
+
+              <div style={{ padding: '20px 28px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
+
+                {/* Type Selector */}
+                <div style={{ display: 'flex', gap: 8 }}>
+                  {(['DRIVER','EMT','DOCTOR'] as const).map(t => {
+                    const rc = ROLE_COLORS[t];
+                    return (
+                      <button key={t} onClick={() => setStaffType(t)}
+                        style={{ flex: 1, padding: '9px 0', borderRadius: 10, border: `2px solid ${staffType === t ? rc.color : '#E2E8F0'}`, background: staffType === t ? rc.bg : '#F1F5F9', color: staffType === t ? rc.color : '#475569', fontWeight: 800, fontSize: '0.8rem', cursor: 'pointer', transition: 'all 0.2s' }}>
+                        {t}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Common Fields — 2 col grid */}
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+                  {[{ k: 'name', label: 'Full Name', ph: 'e.g. Driver 2' }, { k: 'phone', label: 'Phone', ph: '9999999998' }, { k: 'aadhaar_number', label: 'Aadhaar Number', ph: '1234-5678-9001' }].map(f => (
+                    <div key={f.k}>
+                      <div style={{ fontSize: '0.6rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, marginBottom: 5 }}>{f.label}</div>
+                      <input value={(form as Record<string, string | boolean>)[f.k] as string} onChange={e => setF(f.k, e.target.value)} placeholder={f.ph}
+                        autoComplete="off"
+                        style={{ width: '100%', padding: '9px 12px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: 9, color: '#0F172A', fontSize: '0.85rem', outline: 'none', boxSizing: 'border-box' }} />
+                    </div>
+                  ))}
+                  {/* Password — same row as Aadhaar */}
+                  <div>
+                    <div style={{ fontSize: '0.6rem', color: '#475569', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, marginBottom: 5 }}>Password <span style={{ color: '#64748B', fontWeight: 400, textTransform: 'none', letterSpacing: 0 }}>(optional)</span></div>
+                    <div style={{ position: 'relative' }}>
+                      <input type={showPw ? 'text' : 'password'} value={form.password} onChange={e => setF('password', e.target.value)} placeholder="Min 8 chars"
+                        autoComplete="new-password"
+                        style={{ width: '100%', padding: '9px 36px 9px 12px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: 9, color: '#0F172A', fontSize: '0.85rem', outline: 'none', boxSizing: 'border-box' }} />
+                      <button onClick={() => setShowPw(p => !p)} style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: '#475569', cursor: 'pointer', display: 'flex' }}>
+                        {showPw ? <EyeOff size={14} /> : <Eye size={14} />}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* DRIVER fields */}
+                {staffType === 'DRIVER' && (
+                  <div style={{ padding: '14px 16px', background: 'rgba(6,182,212,0.03)', border: '1px solid rgba(6,182,212,0.15)', borderRadius: 12 }}>
+                    <div style={{ fontSize: '0.6rem', color: '#06B6D4', textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>Driver Professional Details</div>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
+                      {[{ k:'license_number', label:'License Number', ph:'DL-KA-2024-DR1' }, { k:'license_category', label:'License Category', ph:'MCWG/LMV' }, { k:'license_expiry', label:'License Expiry', ph:'2034-01-01' }].map(f => (
+                        <div key={f.k}>
+                          <div style={{ fontSize: '0.58rem', color: '#475569', textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>{f.label}</div>
+                          <input value={(form as Record<string, string | boolean>)[f.k] as string} onChange={e => setF(f.k, e.target.value)} placeholder={f.ph}
+                            style={{ width: '100%', padding: '8px 10px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: 8, color: '#0F172A', fontSize: '0.82rem', outline: 'none', boxSizing: 'border-box' }} />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* EMT fields */}
+                {staffType === 'EMT' && (
+                  <div style={{ padding: '14px 16px', background: 'rgba(59,130,246,0.03)', border: '1px solid rgba(59,130,246,0.15)', borderRadius: 12 }}>
+                    <div style={{ fontSize: '0.6rem', color: '#3B82F6', textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>EMT Professional Details</div>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+                      {[{ k:'qualification', label:'Qualification', ph:'Diploma in EMT' }, { k:'certification_body', label:'Certification Body', ph:'Indian Resuscitation Council' }, { k:'certificate_number', label:'Certificate Number', ph:'EMT-CERT-9901' }, { k:'certificate_expiry', label:'Certificate Expiry', ph:'2029-08-15' }].map(f => (
+                        <div key={f.k}>
+                          <div style={{ fontSize: '0.58rem', color: '#475569', textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>{f.label}</div>
+                          <input value={(form as Record<string, string | boolean>)[f.k] as string} onChange={e => setF(f.k, e.target.value)} placeholder={f.ph}
+                            style={{ width: '100%', padding: '8px 10px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: 8, color: '#0F172A', fontSize: '0.82rem', outline: 'none', boxSizing: 'border-box' }} />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* DOCTOR fields */}
+                {staffType === 'DOCTOR' && (
+                  <div style={{ padding: '14px 16px', background: 'rgba(16,185,129,0.03)', border: '1px solid rgba(16,185,129,0.15)', borderRadius: 12 }}>
+                    <div style={{ fontSize: '0.6rem', color: '#10B981', textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>Doctor Professional Details</div>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+                      {[{ k:'medical_registration_number', label:'Medical Reg. Number', ph:'MCI/DMC/2024/77' }, { k:'specialization', label:'Specialization', ph:'Emergency Medicine' }, { k:'qualification', label:'Qualification', ph:'MBBS, MD (Emergency)' }].map(f => (
+                        <div key={f.k}>
+                          <div style={{ fontSize: '0.58rem', color: '#475569', textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>{f.label}</div>
+                          <input value={(form as Record<string, string | boolean>)[f.k] as string} onChange={e => setF(f.k, e.target.value)} placeholder={f.ph}
+                            style={{ width: '100%', padding: '8px 10px', background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: 8, color: '#0F172A', fontSize: '0.82rem', outline: 'none', boxSizing: 'border-box' }} />
+                        </div>
+                      ))}
+                      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: '0.82rem', color: '#475569', gridColumn: '1 / -1' }}>
+                        <input type="checkbox" checked={form.teleconsult_available} onChange={e => setF('teleconsult_available', e.target.checked)} style={{ accentColor: '#10B981', width: 15, height: 15 }} />
+                        Teleconsult Available
+                      </label>
+                    </div>
+                  </div>
+                )}
+
+                {submitErr && <div style={{ padding: '9px 14px', background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: 9, color: '#EF4444', fontSize: '0.8rem' }}>{submitErr}</div>}
+                {submitOk  && <div style={{ padding: '9px 14px', background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.2)', borderRadius: 9, color: '#10B981', fontSize: '0.8rem', fontWeight: 700 }}>✓ {submitOk}</div>}
+
+                <button onClick={submitStaff} disabled={submitting}
+                  style={{ padding: '11px', background: 'linear-gradient(135deg,#06B6D4,#3B82F6)', border: 'none', borderRadius: 11, color: '#fff', fontWeight: 800, fontSize: '0.88rem', cursor: submitting ? 'not-allowed' : 'pointer', opacity: submitting ? 0.7 : 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
+                  {submitting ? <><Loader2 size={15} style={{ animation: 'spin 1s linear infinite' }} /> Registering...</> : <><UserPlus size={15} /> Register {staffType}</>}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Stats */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, marginBottom: 24 }}>
+        {[{ label: 'Total Staff', value: normalized.length, color: '#06B6D4' }, { label: 'On Duty', value: onDuty, color: '#10B981' }, { label: 'Off Duty', value: offDuty, color: '#64748B' }, { label: 'On Leave', value: onLeave, color: '#F59E0B' }].map(s => (
+          <div key={s.label} style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: 14, padding: '18px 20px', borderLeft: `4px solid ${s.color}`, boxShadow: '0 4px 12px rgba(15, 23, 42, 0.01)' }}>
+            <div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#0F172A', lineHeight: 1 }}>{loading ? '—' : s.value}</div>
+            <div style={{ fontSize: '0.7rem', color: '#475569', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.5px' }}>{s.label}</div>
+          </div>
+        ))}
       </div>
+
+      {/* Toolbar */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
+        <div style={{ display: 'flex', gap: 6, background: '#E2E8F0', padding: 4, borderRadius: 12, border: '1px solid #CBD5E1' }}>
+          {FILTERS.map(f => (
+            <button key={f} onClick={() => { setFilter(f); setPage(1); }} style={{ padding: '7px 14px', borderRadius: 8, border: 'none', cursor: 'pointer', fontSize: '0.78rem', fontWeight: filter === f ? 700 : 500, background: filter === f ? 'linear-gradient(135deg,#06B6D4,#3B82F6)' : 'transparent', color: filter === f ? '#fff' : '#475569', transition: 'all 0.2s' }}>
+              {f === 'ALL' ? 'All' : f}
+            </button>
+          ))}
+        </div>
+        <div style={{ display: 'flex', gap: 10 }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            background: '#FFFFFF',
+            padding: '10px 16px',
+            borderRadius: '12px',
+            border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+            boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : 'none',
+            transition: 'all 0.2s ease',
+            width: '260px',
+            position: 'relative'
+          }}>
+            <Search size={16} color={isSearchFocused ? "#06B6D4" : "#64748B"} style={{ transition: 'color 0.2s' }} />
+            <input
+              type="text"
+              placeholder="Search staff..."
+              value={search}
+              onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => setIsSearchFocused(false)}
+              className="stations-search-input"
+              style={{
+                background: 'transparent',
+                border: 'none',
+                color: '#0F172A',
+                fontSize: '0.875rem',
+                outline: 'none',
+                width: '100%',
+                paddingRight: search ? '24px' : '0'
+              }}
+            />
+            {search && (
+              <button 
+                onClick={() => { setSearch(''); setPage(1); }}
+                style={{
+                  position: 'absolute',
+                  right: '12px',
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: '#94A3B8',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: '2px',
+                  borderRadius: '50%',
+                }}
+                onMouseEnter={e => e.currentTarget.style.color = '#475569'}
+                onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}
+              >
+                <X size={14} />
+              </button>
+            )}
+          </div>
+          <button onClick={() => { resetModal(); setShowModal(true); }} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '11px 22px', background: '#0F172A', border: 'none', borderRadius: '12px', color: '#fff', fontWeight: 700, cursor: 'pointer', fontSize: '0.875rem', whiteSpace: 'nowrap' }}>
+            <UserPlus size={18} /> ADD STAFF
+          </button>
+        </div>
+      </div>
+
+      {loading && <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 200, gap: 12, color: '#64748B' }}><Loader2 size={24} style={{ animation: 'spin 1s linear infinite' }} /><span>Loading staff...</span></div>}
+
+      {!loading && fetchError && (
+        <div style={{ textAlign: 'center', padding: 40, background: 'rgba(239,68,68,0.05)', border: '1px solid rgba(239,68,68,0.15)', borderRadius: 16 }}>
+          <AlertCircle size={32} color="#EF4444" style={{ marginBottom: 12 }} />
+          <p style={{ color: '#EF4444', fontWeight: 600, marginBottom: 12 }}>{fetchError}</p>
+          <button onClick={fetchStaff} style={{ padding: '9px 22px', background: 'linear-gradient(135deg,#06B6D4,#3B82F6)', border: 'none', borderRadius: 8, color: '#fff', fontWeight: 700, cursor: 'pointer' }}>↺ Retry</button>
+        </div>
+      )}
+
+      {!loading && !fetchError && (
+        <div style={{ background: '#FFFFFF', border: '1px solid rgba(15, 23, 42, 0.08)', borderRadius: 16, overflow: 'hidden', boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr>
+                {['#', 'Staff Member', 'Role', 'Status', 'Phone', 'Specialization', 'Joined', 'Cert Expiry'].map(h => <th key={h} style={th}>{h}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {pageData.length === 0 ? (
+                <tr><td colSpan={8} style={{ textAlign: 'center', padding: 48, color: '#64748B' }}>{staffList.length === 0 ? 'No staff registered yet.' : 'No results match your filter.'}</td></tr>
+              ) : pageData.map((s, idx) => {
+                const rc = ROLE_COLORS[s.role] || DEF;
+                const sc = STATUS_CFG[s.status] || { label: s.status, color: '#475569' };
+                const certSoon = s.certExpiry ? new Date(s.certExpiry) < new Date(Date.now() + 60 * 24 * 60 * 60 * 1000) : false;
+                return (
+                  <tr key={s.id}
+                    onClick={() => { const raw = staffList.find(r => r.id === s.id); if (raw) setSelectedRaw(raw); }}
+                    style={{ borderBottom: '1px solid rgba(15, 23, 42, 0.06)', cursor: 'pointer', transition: 'background 0.15s' }}
+                    onMouseEnter={e => (e.currentTarget.style.background = '#F8FAFC')}
+                    onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                  >
+                    <td style={{ padding: '14px 18px', color: '#475569', fontSize: '0.78rem', fontWeight: 600 }}>{(safePage - 1) * itemsPerPage + idx + 1}</td>
+                    <td style={{ padding: '14px 18px' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                        <div style={{ width: 38, height: 38, borderRadius: 10, background: rc.bg, border: `1.5px solid ${rc.color}40`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.85rem', fontWeight: 900, color: rc.color, flexShrink: 0 }}>
+                          {s.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
+                        </div>
+                        <div>
+                          <div style={{ fontWeight: 700, fontSize: '0.88rem', color: '#0F172A' }}>{s.name}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td style={{ padding: '14px 18px' }}><span style={{ padding: '4px 10px', borderRadius: 6, fontSize: '0.68rem', fontWeight: 800, background: rc.bg, color: rc.color }}>{s.role || '—'}</span></td>
+                    <td style={{ padding: '14px 18px' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                        <div style={{ width: 7, height: 7, borderRadius: '50%', background: sc.color, boxShadow: `0 0 6px ${sc.color}` }} />
+                        <span style={{ fontSize: '0.75rem', fontWeight: 700, color: sc.color }}>{sc.label}</span>
+                      </div>
+                    </td>
+                    <td style={{ padding: '14px 18px' }}><div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.78rem', color: '#475569' }}><Phone size={12} color="#06B6D4" />{s.phone}</div></td>
+                    <td style={{ padding: '14px 18px' }}><span style={{ fontSize: '0.78rem', color: '#475569' }}>{s.specialization || '—'}</span></td>
+                    <td style={{ padding: '14px 18px' }}><span style={{ fontSize: '0.78rem', color: '#475569' }}>{s.joinedDate || '—'}</span></td>
+                    <td style={{ padding: '14px 18px' }}>
+                      {s.certExpiry ? <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><ShieldCheck size={14} color={certSoon ? '#F59E0B' : '#10B981'} /><span style={{ fontSize: '0.75rem', fontWeight: 600, color: certSoon ? '#F59E0B' : '#475569' }}>{s.certExpiry}</span></div> : <span style={{ color: '#64748B' }}>—</span>}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          {/* Pagination */}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px', borderTop: '1px solid rgba(15, 23, 42, 0.08)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+              <span style={{ fontSize: '0.78rem', color: '#475569' }}>
+                Showing <strong style={{ color: '#0F172A' }}>{filtered.length === 0 ? 0 : (safePage - 1) * itemsPerPage + 1}–{Math.min(safePage * itemsPerPage, filtered.length)}</strong> of <strong style={{ color: '#0F172A' }}>{filtered.length}</strong> staff
+              </span>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: '0.75rem', color: '#64748B' }}>Rows per page:</span>
+                <select 
+                  value={itemsPerPage} 
+                  onChange={e => { setItemsPerPage(Number(e.target.value)); setPage(1); }}
+                  style={{ padding: '4px 8px', borderRadius: 6, border: '1px solid #CBD5E1', background: '#FFFFFF', color: '#0F172A', fontSize: '0.75rem', outline: 'none', cursor: 'pointer' }}
+                >
+                  <option value={5}>5</option>
+                  <option value={10}>10</option>
+                  <option value={20}>20</option>
+                  <option value={50}>50</option>
+                </select>
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+              <button onClick={() => setPage(1)} disabled={safePage === 1} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === 1 ? '#94A3B8' : '#475569', cursor: safePage === 1 ? 'not-allowed' : 'pointer' }}><ChevronsLeft size={15} /></button>
+              <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={safePage === 1} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === 1 ? '#94A3B8' : '#475569', cursor: safePage === 1 ? 'not-allowed' : 'pointer' }}><ChevronLeft size={15} /></button>
+              
+              {Array.from({ length: totalPages }, (_, i) => i + 1)
+                .filter(p => p === 1 || p === totalPages || Math.abs(p - safePage) <= 1)
+                .map((p, i, arr) => (
+                  <React.Fragment key={p}>
+                    {i > 0 && arr[i - 1] !== p - 1 && <span style={{ padding: '0 4px', color: '#94A3B8' }}>...</span>}
+                    <button onClick={() => setPage(p)} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: 'none', background: p === safePage ? 'linear-gradient(135deg,#06B6D4,#3B82F6)' : '#F1F5F9', color: p === safePage ? '#fff' : '#475569', fontWeight: p === safePage ? 700 : 500, cursor: 'pointer', fontSize: '0.82rem' }}>{p}</button>
+                  </React.Fragment>
+              ))}
+
+              <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={safePage === totalPages} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === totalPages ? '#94A3B8' : '#475569', cursor: safePage === totalPages ? 'not-allowed' : 'pointer' }}><ChevronRight size={15} /></button>
+              <button onClick={() => setPage(totalPages)} disabled={safePage === totalPages} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, border: '1px solid #E2E8F0', background: '#F1F5F9', color: safePage === totalPages ? '#94A3B8' : '#475569', cursor: safePage === totalPages ? 'not-allowed' : 'pointer' }}><ChevronsRight size={15} /></button>
+            </div>
+          </div>
+        </div>
+      )}
+      <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .spin{animation:spin 1s linear infinite}`}</style>
     </div>
   );
 };

src/pages/fleet/FleetScheduling.tsx

@@ -1,165 +1,558 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { 
-  Calendar, 
   Clock, 
-  Users, 
-  Truck, 
-  AlertTriangle, 
-  CheckCircle2, 
   Plus, 
-  ChevronLeft, 
-  ChevronRight,
-  MoreVertical,
-  Navigation,
-  ShieldAlert
+  User, 
+  Stethoscope, 
+  Car,
+  X,
+  Loader2,
+  Check,
+  AlertCircle,
+  Activity,
+  Calendar
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Card } from '../../components/Common';
+import { fleetApi } from '../../api/fleet';
 
+// --- INTERFACES ---
 interface Assignment {
   id: string;
+  date: string; // YYYY-MM-DD
   vehicleId: string;
+  vehicleReg?: string;
+  vehicleType: 'ALS' | 'BLS' | 'TRANS';
   shift: 'MORNING' | 'EVENING' | 'NIGHT';
   driver: string;
   emt: string;
   doctor?: string;
-  status: 'SCHEDULED' | 'ON_DUTY' | 'HANDOVER_PENDING';
+  status: 'SCHEDULED' | 'ON_DUTY';
   startTime: string;
   endTime: string;
 }
 
-const MOCK_ASSIGNMENTS: Assignment[] = [
-  { id: 'AS-1001', vehicleId: 'V-001 (ALS)', shift: 'MORNING', driver: 'Vikram Singh', emt: 'Rahul Verma', doctor: 'Dr. Ananya Iyer', status: 'ON_DUTY', startTime: '06:00', endTime: '14:00' },
-  { id: 'AS-1002', vehicleId: 'V-002 (BLS)', shift: 'MORNING', driver: 'Suresh Kumar', emt: 'Amit Roy', status: 'ON_DUTY', startTime: '06:00', endTime: '14:00' },
-  { id: 'AS-1003', vehicleId: 'V-003 (ALS)', shift: 'EVENING', driver: 'Karan Mehra', emt: 'Priya Das', doctor: 'Dr. Sameer Gupta', status: 'SCHEDULED', startTime: '14:00', endTime: '22:00' },
-  { id: 'AS-1004', vehicleId: 'V-004 (TRANS)', shift: 'MORNING', driver: 'Ravi Teja', emt: 'Sneha Rao', status: 'HANDOVER_PENDING', startTime: '06:00', endTime: '14:00' },
-];
+interface APIVehicle {
+  id: string;
+  registration_number: string;
+  vehicle_type: string;
+  status?: string;
+}
+
+interface APIStaff {
+  id: string;
+  type: string;
+  status?: string;
+  user?: {
+    name?: string;
+    phone?: string;
+  };
+}
+
+const SHIFTS = [
+  { key: 'MORNING', label: 'Morning', time: '06:00 – 14:00', color: '#F59E0B', bg: 'rgba(245,158,11,0.1)' },
+  { key: 'EVENING', label: 'Evening', time: '14:00 – 22:00', color: '#3B82F6', bg: 'rgba(59,130,246,0.1)' },
+  { key: 'NIGHT',   label: 'Night',   time: '22:00 – 06:00', color: '#8B5CF6', bg: 'rgba(139,92,246,0.1)' },
+] as const;
 
 export const FleetScheduling: React.FC = () => {
-  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const navigate = useNavigate();
+  // --- STATE ---
+  const [selectedDate] = useState<string>(new Date().toISOString().split('T')[0]);
+  const [view, setView] = useState<'DAY' | 'WEEK' | 'MONTH'>('DAY');
+
+  // Roster lists & API state
+  const [apiVehicles, setApiVehicles] = useState<APIVehicle[]>([]);
+  const [apiStaff, setApiStaff] = useState<APIStaff[]>([]);
+  const [loadingAssets, setLoadingAssets] = useState(false);
+  const [submittingRoster, setSubmittingRoster] = useState(false);
+  const [rosterSuccess, setRosterSuccess] = useState('');
+  const [rosterErr, setRosterErr] = useState('');
+
+  const [assignments, setAssignments] = useState<Assignment[]>([]);
+
+  // Modals state
+  const [showCreateModal, setShowCreateModal] = useState(false);
+
+  // Form states for creating dynamic Roster
+  const [formVehicleId, setFormVehicleId] = useState('');
+  const [formDriverId, setFormDriverId] = useState('');
+  const [formStaffId, setFormStaffId] = useState('');
+  const [formStartDate, setFormStartDate] = useState('');
+  const [formEndDate, setFormEndDate] = useState('');
+  const [formShiftType, setFormShiftType] = useState<'DAY' | 'NIGHT' | 'SPLIT' | ''>('');
+  const [formNotes, setFormNotes] = useState('');
+
+  const token = localStorage.getItem('teleems_token') || '';
+
+  // --- FETCH OPERATOR ASSETS (Vehicles & Staff) ---
+  const fetchAssets = useCallback(async () => {
+    if (!token) return;
+    setLoadingAssets(true);
+    try {
+      // 1. Fetch Vehicles
+      const vJson = await fleetApi.getVehicles(token);
+      let vList: APIVehicle[] = [];
+      if (vJson?.data?.data && Array.isArray(vJson.data.data)) vList = vJson.data.data;
+      else if (vJson?.data && Array.isArray(vJson.data)) vList = vJson.data;
+      else if (Array.isArray(vJson)) vList = vJson;
+      setApiVehicles(vList);
+
+      // 2. Fetch Staff
+      const sJson = await fleetApi.getStaff(token);
+      let sList: APIStaff[] = [];
+      if (sJson?.data?.data && Array.isArray(sJson.data.data)) sList = sJson.data.data;
+      else if (sJson?.data && Array.isArray(sJson.data)) sList = sJson.data;
+      else if (Array.isArray(sJson)) sList = sJson;
+      setApiStaff(sList);
+
+      // 3. Fetch Scheduled Rosters
+      let rList: any[] = [];
+      try {
+        const rJson = await fleetApi.getRoster(token);
+        if (rJson) {
+          rList = rJson?.data?.data || rJson?.data || (Array.isArray(rJson) ? rJson : []);
+        }
+      } catch (err) {
+        console.error('Failed to fetch roster list:', err);
+      }
+
+      // 4. Map to assignments (using actual data only, completely removing mocks)
+      const parsedAssignments: Assignment[] = [];
+      const addedIds = new Set<string>();
+
+      // Add from roster query
+      rList.forEach((r: any) => {
+        if (!r.id) return;
+        const vehicle = r.vehicle || vList.find((v: any) => v.id === r.vehicleId);
+        const driverName = r.driver?.user?.name || 'Unknown Pilot';
+        const staffName = r.staff?.user?.name || 'Unknown EMT';
+        
+        parsedAssignments.push({
+          id: r.id,
+          date: r.startDate || new Date().toISOString().split('T')[0],
+          vehicleId: r.vehicleId,
+          vehicleReg: vehicle?.registration_number || r.vehicleId,
+          vehicleType: (vehicle?.vehicle_type as any) || 'ALS',
+          shift: r.shiftType === 'NIGHT' ? 'NIGHT' : (r.shiftType === 'DAY' ? 'MORNING' : 'EVENING'),
+          driver: driverName,
+          emt: staffName,
+          status: 'SCHEDULED',
+          startTime: r.shiftType === 'NIGHT' ? '22:00' : (r.shiftType === 'DAY' ? '06:00' : '14:00'),
+          endTime: r.shiftType === 'NIGHT' ? '06:00' : (r.shiftType === 'DAY' ? '14:00' : '22:00')
+        });
+        addedIds.add(r.id);
+      });
+
+      // Add active rosters from live vehicles list
+      vList.forEach((v: any) => {
+        if (v.activeRoster && v.activeRoster.id && !addedIds.has(v.activeRoster.id)) {
+          const r = v.activeRoster;
+          const driverName = r.driver?.user?.name || 'Unknown Pilot';
+          const staffName = r.staff?.user?.name || 'Unknown EMT';
+          
+          parsedAssignments.push({
+            id: r.id,
+            date: new Date().toISOString().split('T')[0],
+            vehicleId: v.id,
+            vehicleReg: v.registration_number,
+            vehicleType: (v.vehicle_type as any) || 'ALS',
+            shift: 'MORNING',
+            driver: driverName,
+            emt: staffName,
+            status: 'ON_DUTY',
+            startTime: '06:00',
+            endTime: '14:00'
+          });
+          addedIds.add(r.id);
+        }
+
+        if (v.activeShift && v.activeShift.id && !addedIds.has(v.activeShift.id)) {
+          const sh = v.activeShift;
+          const driverName = sh.driver?.user?.name || 'Unknown Pilot';
+          const staffName = sh.staff?.user?.name || 'Unknown EMT';
+          
+          parsedAssignments.push({
+            id: sh.id,
+            date: new Date().toISOString().split('T')[0],
+            vehicleId: v.id,
+            vehicleReg: v.registration_number,
+            vehicleType: (v.vehicle_type as any) || 'ALS',
+            shift: 'EVENING',
+            driver: driverName,
+            emt: staffName,
+            status: 'ON_DUTY',
+            startTime: '14:00',
+            endTime: '22:00'
+          });
+          addedIds.add(sh.id);
+        }
+      });
+
+      setAssignments(parsedAssignments);
+
+    } catch (e) {
+      console.error('[Scheduling API Check] Failed to sync assets:', e);
+    } finally {
+      setLoadingAssets(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    fetchAssets();
+  }, [fetchAssets]);
+
+  const driverOptions = useMemo(() => {
+    return apiStaff.filter(s => s.type === 'DRIVER').map(s => ({ id: s.id, name: s.user?.name || 'Unknown Pilot' }));
+  }, [apiStaff]);
+
+  const emtOptions = useMemo(() => {
+    return apiStaff.filter(s => s.type === 'EMT').map(s => ({ id: s.id, name: s.user?.name || 'Unknown EMT' }));
+  }, [apiStaff]);
+
+  const doctorOptions = useMemo(() => {
+    return apiStaff.filter(s => s.type === 'DOCTOR').map(s => ({ id: s.id, name: s.user?.name || 'Unknown Doctor' }));
+  }, [apiStaff]);
+
+  const vehicleOptions = useMemo(() => {
+    return apiVehicles.map(v => ({ id: v.id, registration_number: v.registration_number, vehicle_type: v.vehicle_type || 'ALS' }));
+  }, [apiVehicles]);
+
+  const currentFilteredAssignments = useMemo(() => {
+    return assignments.filter(as => {
+      if (view === 'DAY') {
+        return as.date === selectedDate;
+      } else if (view === 'WEEK') {
+        const dateDiff = Math.abs(new Date(as.date).getTime() - new Date(selectedDate).getTime());
+        const daysDiff = dateDiff / (1000 * 3600 * 24);
+        return daysDiff <= 3;
+      } else {
+        return as.date.substring(0, 7) === selectedDate.substring(0, 7);
+      }
+    });
+  }, [assignments, selectedDate, view]);
+
+  const openCreateModal = () => {
+    setFormVehicleId('');
+    setFormDriverId('');
+    setFormStaffId('');
+    setFormStartDate('');
+    setFormEndDate('');
+    setFormShiftType('');
+    setFormNotes('');
+    setRosterErr('');
+    setRosterSuccess('');
+    setShowCreateModal(true);
+  };
+
+  const handleCreateAssignment = async () => {
+    setRosterErr('');
+    setRosterSuccess('');
+
+    if (!formVehicleId) {
+      setRosterErr('Please select an Ambulance Unit.');
+      return;
+    }
+    if (!formShiftType) {
+      setRosterErr('Please select a Shift Type.');
+      return;
+    }
+    if (!formDriverId) {
+      setRosterErr('Please select a Driver.');
+      return;
+    }
+    if (!formStaffId) {
+      setRosterErr('Please select a Staff Member (EMT/Doctor).');
+      return;
+    }
+    if (!formStartDate || !formEndDate) {
+      setRosterErr('Please select both Start Date and End Date.');
+      return;
+    }
+
+    const isUuid = (str: string) => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(str);
+
+    if (!isUuid(formVehicleId) || !isUuid(formDriverId) || !isUuid(formStaffId)) {
+      setRosterErr('Selected items must be valid backend UUIDs. Please register assets first.');
+      return;
+    }
+
+    const payload = {
+      vehicleId: formVehicleId,
+      driverId: formDriverId,
+      staffId: formStaffId,
+      startDate: formStartDate,
+      endDate: formEndDate,
+      shiftType: formShiftType,
+      notes: formNotes || 'Fleet Deployment Roster'
+    };
+
+    setSubmittingRoster(true);
+    try {
+      const json = await fleetApi.createRoster(payload, token);
+
+      if (json && json.status && json.status >= 400) {
+        throw new Error(json?.message || `API Response Error ${json.status}`);
+      }
+
+      setRosterSuccess('Roster scheduled successfully on backend API!');
+
+      setTimeout(() => {
+        fetchAssets(); // Refresh assignments from real database endpoints
+        setShowCreateModal(false);
+        setRosterSuccess('');
+      }, 1500);
+
+    } catch (err: any) {
+      console.error('[Create Roster Error]:', err);
+      setRosterErr(err?.message || 'Failed to schedule roster assignment on backend.');
+    } finally {
+      setSubmittingRoster(false);
+    }
+  };
 
   return (
-    <div className="fleet-scheduling animate-in fade-in duration-500">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-          <div className="glass" style={{ padding: '8px 16px', borderRadius: '12px', display: 'flex', alignItems: 'center', gap: '12px', border: '1px solid rgba(255,255,255,0.1)' }}>
-            <button className="btn-ghost-sm" style={{ padding: '4px' }}><ChevronLeft size={16} /></button>
-            <span style={{ fontWeight: 800, fontSize: '0.875rem' }}>{selectedDate}</span>
-            <button className="btn-ghost-sm" style={{ padding: '4px' }}><ChevronRight size={16} /></button>
-          </div>
-          <div style={{ display: 'flex', gap: '8px' }}>
-            {['DAY', 'WEEK', 'MONTH'].map(v => (
-              <button key={v} style={{ fontSize: '0.65rem', fontWeight: 900, padding: '6px 12px', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.05)', background: v === 'DAY' ? 'var(--accent-cyan)' : 'transparent', color: v === 'DAY' ? '#000' : 'var(--text-secondary)' }}>{v}</button>
-            ))}
-          </div>
+    <div style={{ color: '#F8FAFC', fontFamily: 'Inter, sans-serif' }}>
+
+      {/* ── Header Toolbar (View selection controls & create button) ── */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
+        
+        {/* View Mode Toggle (Daily, Weekly, Monthly) */}
+        <div style={{ display: 'flex', gap: 4, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: 3 }}>
+          {(['DAY', 'WEEK', 'MONTH'] as const).map(v => (
+            <button key={v} onClick={() => setView(v)}
+              style={{ padding: '8px 16px', borderRadius: 8, border: 'none', fontSize: '0.78rem', fontWeight: 700, cursor: 'pointer', background: view === v ? 'linear-gradient(135deg,#06B6D4,#3B82F6)' : 'transparent', color: view === v ? '#fff' : '#64748B', transition: 'all 0.2s' }}>
+              {v === 'DAY' ? 'Daily' : v === 'WEEK' ? 'Weekly' : 'Monthly'}
+            </button>
+          ))}
         </div>
-        <button className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <Plus size={18} /> CREATE NEW ASSIGNMENT
-        </button>
+
+        {/* Action Buttons */}
+        <div style={{ display: 'flex', gap: 10 }}>
+          <button onClick={() => navigate('?tab=active-shifts')} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#10B981', fontSize: '0.75rem', fontWeight: 700, cursor: 'pointer' }}>
+            <Activity size={13} /> Active Shifts
+          </button>
+          <button onClick={fetchAssets} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#94A3B8', fontSize: '0.75rem', fontWeight: 700, cursor: 'pointer' }}>
+            {loadingAssets ? <Loader2 size={13} className="spin" /> : '↺ Sync Assets'}
+          </button>
+          <button onClick={openCreateModal} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 20px', background: 'linear-gradient(135deg,#06B6D4,#3B82F6)', border: 'none', borderRadius: 12, color: '#fff', fontWeight: 800, fontSize: '0.82rem', cursor: 'pointer', boxShadow: '0 4px 14px rgba(6,182,212,0.3)', whiteSpace: 'nowrap' }}>
+            <Plus size={16} /> NEW CREW ASSIGNMENT
+          </button>
+        </div>
+
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '24px' }}>
-        {/* Mission Roster Grid */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <Card title="Shift Roster Matrix">
-            <div className="table-container">
-              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-                <thead>
-                  <tr style={{ textAlign: 'left', opacity: 0.5, fontSize: '0.65rem', textTransform: 'uppercase', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
-                    <th style={{ padding: '12px' }}>Time Slot</th>
-                    <th style={{ padding: '12px' }}>Vehicle</th>
-                    <th style={{ padding: '12px' }}>Assigned Crew</th>
-                    <th style={{ padding: '12px' }}>Status</th>
-                    <th style={{ padding: '12px' }}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {MOCK_ASSIGNMENTS.map(as => (
-                    <tr key={as.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
-                      <td style={{ padding: '16px 12px' }}>
-                        <div style={{ fontWeight: 800, fontSize: '0.875rem', color: 'var(--accent-cyan)' }}>{as.startTime} - {as.endTime}</div>
-                        <div style={{ fontSize: '0.65rem', opacity: 0.5 }}>{as.shift} SHIFT</div>
-                      </td>
-                      <td style={{ padding: '16px 12px' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                          <Truck size={14} style={{ opacity: 0.5 }} />
-                          <span style={{ fontWeight: 700 }}>{as.vehicleId}</span>
-                        </div>
-                      </td>
-                      <td style={{ padding: '16px 12px' }}>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                          <div style={{ fontSize: '0.75rem', fontWeight: 600 }}>P: {as.driver}</div>
-                          <div style={{ fontSize: '0.75rem', opacity: 0.8 }}>E: {as.emt}</div>
-                          {as.doctor && <div style={{ fontSize: '0.75rem', color: 'var(--accent-green)' }}>D: {as.doctor}</div>}
-                        </div>
-                      </td>
-                      <td style={{ padding: '16px 12px' }}>
-                        <span style={{ 
-                          fontSize: '0.6rem', 
-                          fontWeight: 900, 
-                          padding: '4px 8px', 
-                          borderRadius: '4px',
-                          background: as.status === 'ON_DUTY' ? 'rgba(34, 197, 94, 0.1)' : as.status === 'HANDOVER_PENDING' ? 'rgba(245, 158, 11, 0.1)' : 'rgba(148, 163, 184, 0.1)',
-                          color: as.status === 'ON_DUTY' ? '#22C55E' : as.status === 'HANDOVER_PENDING' ? '#F59E0B' : '#94A3B8',
-                          border: `1px solid ${as.status === 'ON_DUTY' ? 'rgba(34, 197, 94, 0.2)' : as.status === 'HANDOVER_PENDING' ? 'rgba(245, 158, 11, 0.2)' : 'rgba(148, 163, 184, 0.2)'}`
-                        }}>{as.status.replace('_', ' ')}</span>
-                      </td>
-                      <td style={{ padding: '16px 12px' }}>
-                        <button className="btn-ghost-sm"><MoreVertical size={14} /></button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </Card>
+      {/* ── Roster Grid ── */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        
+        {/* Count summary label */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+          <span style={{ fontSize: '0.75rem', color: '#64748B' }}>
+            Showing {currentFilteredAssignments.length} scheduled slots ({view === 'DAY' ? 'Today' : view === 'WEEK' ? 'Weekly Outlook' : 'Monthly'})
+          </span>
         </div>
 
-        {/* Conflict & Handover Panel */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-          <Card title="Conflict Engine" glowColor="amber">
-             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-               <div style={{ padding: '12px', borderRadius: '12px', background: 'rgba(245, 158, 11, 0.05)', border: '1px solid rgba(245, 158, 11, 0.1)', display: 'flex', gap: '12px' }}>
-                 <ShieldAlert size={20} color="#F59E0B" />
-                 <div>
-                   <div style={{ fontSize: '0.75rem', fontWeight: 800 }}>DOUBLE BOOKING DETECTED</div>
-                   <p style={{ fontSize: '0.65rem', opacity: 0.7, marginTop: '4px' }}>Amit Roy (EMT) assigned to V-002 and V-005 in Evening Shift.</p>
-                 </div>
-               </div>
-               <div style={{ padding: '12px', borderRadius: '12px', background: 'rgba(239, 68, 68, 0.05)', border: '1px solid rgba(239, 68, 68, 0.1)', display: 'flex', gap: '12px' }}>
-                 <AlertTriangle size={20} color="#EF4444" />
-                 <div>
-                   <div style={{ fontSize: '0.75rem', fontWeight: 800 }}>CERTIFICATION EXPIRED</div>
-                   <p style={{ fontSize: '0.65rem', opacity: 0.7, marginTop: '4px' }}>Dr. Sameer Gupta license expired on 2026-05-01.</p>
-                 </div>
-               </div>
-             </div>
-          </Card>
+        {/* Assignments Roster List */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {currentFilteredAssignments.length === 0 ? (
+            <div style={{ textAlign: 'center', padding: '64px 24px', background: 'rgba(255,255,255,0.01)', border: '1px dashed rgba(255,255,255,0.08)', borderRadius: 16 }}>
+              <Calendar size={36} color="#64748B" style={{ marginBottom: 12 }} />
+              <p style={{ color: '#64748B', fontSize: '0.88rem', margin: 0 }}>No crew roster scheduled for the selected view criteria.</p>
+            </div>
+          ) : (
+            currentFilteredAssignments.map((a, i) => {
+              const sh = SHIFTS.find(s => s.key === a.shift) || SHIFTS[0];
 
-          <Card title="Shift Handover Tracker">
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-              <div style={{ padding: '16px', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
-                  <span style={{ fontSize: '0.75rem', fontWeight: 700 }}>V-004 Handover Checklist</span>
-                  <span style={{ fontSize: '0.65rem', color: '#F59E0B', fontWeight: 800 }}>4/6 TASKS</span>
-                </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.7rem', opacity: 0.8 }}>
-                    <CheckCircle2 size={12} color="#22C55E" /> Fuel Tank Checked (100%)
+              return (
+                <motion.div key={a.id} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.04 }}
+                  style={{ 
+                    background: 'rgba(255,255,255,0.02)', 
+                    border: '1px solid rgba(255,255,255,0.07)', 
+                    borderRadius: 16, 
+                    padding: '18px 24px', 
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+                      {/* Vehicle identifier */}
+                      <div style={{ padding: '6px 12px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 9, display: 'flex', alignItems: 'center', gap: 7 }}>
+                        <Car size={14} color="#06B6D4" />
+                        <span style={{ fontWeight: 800, fontSize: '0.82rem', color: '#fff' }}>{a.vehicleReg || a.vehicleId}</span>
+                        <span style={{ fontSize: '0.65rem', fontWeight: 700, color: '#06B6D4', background: 'rgba(6,182,212,0.12)', padding: '1px 7px', borderRadius: 4 }}>{a.vehicleType}</span>
+                      </div>
+                      
+                      {/* Shift Badge */}
+                      <div style={{ padding: '5px 10px', background: sh.bg, border: `1px solid ${sh.color}30`, borderRadius: 7, display: 'flex', alignItems: 'center', gap: 6 }}>
+                        <Clock size={11} color={sh.color} />
+                        <span style={{ fontSize: '0.7rem', fontWeight: 700, color: sh.color }}>{sh.label} Shift</span>
+                        <span style={{ fontSize: '0.65rem', color: sh.color, opacity: 0.8 }}>{a.startTime}–{a.endTime}</span>
+                      </div>
+                      
+                      {/* Date details */}
+                      <div style={{ fontSize: '0.72rem', fontWeight: 600, color: '#64748B', display: 'flex', alignItems: 'center', gap: 4 }}>
+                        <Calendar size={12} /> {a.date}
+                      </div>
+                    </div>
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.7rem', opacity: 0.8 }}>
-                    <CheckCircle2 size={12} color="#22C55E" /> Oxygen Level Verified
+
+                  {/* Driver + EMT (+ doctor if ALS) mapping */}
+                  <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(6,182,212,0.04)', border: '1px solid rgba(6,182,212,0.08)', borderRadius: 12, flex: 1, minWidth: 200 }}>
+                      <User size={15} color="#06B6D4" />
+                      <div>
+                        <div style={{ fontSize: '0.58rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 700 }}>Pilot Driver</div>
+                        <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#000000' }}>{a.driver}</div>
+                      </div>
+                    </div>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(59,130,246,0.04)', border: '1px solid rgba(59,130,246,0.08)', borderRadius: 12, flex: 1, minWidth: 200 }}>
+                      <Activity size={15} color="#3B82F6" />
+                      <div>
+                        <div style={{ fontSize: '0.58rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 700 }}>Emergency Medical Technician (EMT)</div>
+                        <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#000000' }}>{a.emt}</div>
+                      </div>
+                    </div>
+
+                    {a.vehicleType === 'ALS' && (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(16,185,129,0.04)', border: '1px solid rgba(16,185,129,0.08)', borderRadius: 12, flex: 1, minWidth: 200 }}>
+                        <Stethoscope size={15} color="#10B981" />
+                        <div>
+                          <div style={{ fontSize: '0.58rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 700 }}>Advanced Medical Doctor</div>
+                          <div style={{ fontSize: '0.85rem', fontWeight: 700, color: '#000000' }}>{a.doctor || 'Dr. Alok Mehta'}</div>
+                        </div>
+                      </div>
+                    )}
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.7rem', opacity: 0.5 }}>
-                    <Clock size={12} /> Narcotics Inventory Counter-sign
-                  </div>
-                </div>
+                </motion.div>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* ── CREATE ROSTER ASSIGNMENT MODAL ── */}
+      <AnimatePresence>
+        {showCreateModal && (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+            style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', zIndex: 3000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, backdropFilter: 'blur(6px)' }}
+            onClick={e => { if (e.target === e.currentTarget && !submittingRoster) setShowCreateModal(false); }}
+          >
+            <motion.div initial={{ scale: 0.93, y: 20, opacity: 0 }} animate={{ scale: 1, y: 0, opacity: 1 }} exit={{ scale: 0.93, y: 20, opacity: 0 }}
+              style={{ background: '#0D1526', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 24, width: 620, maxWidth: '95vw', position: 'relative' }}
+            >
+              <div style={{ background: 'linear-gradient(135deg,rgba(6,182,212,0.12),transparent)', borderBottom: '1px solid rgba(255,255,255,0.07)', padding: '20px 28px 16px', borderRadius: '24px 24px 0 0' }}>
+                <button onClick={() => setShowCreateModal(false)} disabled={submittingRoster} style={{ position: 'absolute', top: 14, right: 14, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, padding: 6, color: '#94A3B8', cursor: 'pointer', display: 'flex' }}><X size={15} /></button>
+                <h3 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#fff' }}>Deploy & Roster Crew</h3>
+                <p style={{ margin: '4px 0 0', fontSize: '0.75rem', color: '#64748B' }}>Assign Driver + EMT (+ Doctor if ALS) to a vehicle for a shift</p>
               </div>
-            </div>
-            <button className="btn-primary" style={{ width: '100%', marginTop: '16px', fontSize: '0.75rem' }}>RESOLVE HANDOVERS</button>
-          </Card>
-        </div>
-      </div>
+
+              <div style={{ padding: '20px 28px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
+                
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+                  {/* Vehicle select */}
+                  <div>
+                    <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>Ambulance Unit</label>
+                    <select value={formVehicleId} onChange={e => setFormVehicleId(e.target.value)}
+                      style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none' }}>
+                      <option value="" style={{ background: '#0D1526' }}>Select Ambulance</option>
+                      {vehicleOptions.map(v => (
+                        <option key={v.id} value={v.id} style={{ background: '#0D1526' }}>{v.registration_number} ({v.vehicle_type})</option>
+                      ))}
+                    </select>
+                  </div>
+
+                  {/* Shift Selection */}
+                  <div>
+                    <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>Shift Type</label>
+                    <select value={formShiftType} onChange={e => setFormShiftType(e.target.value as any)}
+                      style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none' }}>
+                      <option value="" style={{ background: '#0D1526' }}>-- Select Shift Type --</option>
+                      <option value="DAY" style={{ background: '#0D1526' }}>DAY (Morning/Evening)</option>
+                      <option value="NIGHT" style={{ background: '#0D1526' }}>NIGHT (Night Shift)</option>
+                      <option value="SPLIT" style={{ background: '#0D1526' }}>SPLIT (On-Demand)</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+                  {/* Driver deploy */}
+                  <div>
+                    <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>Assign Driver</label>
+                    <select value={formDriverId} onChange={e => setFormDriverId(e.target.value)}
+                      style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none' }}>
+                      <option value="" style={{ background: '#0D1526' }}>-- Select Driver --</option>
+                      {driverOptions.map(d => (
+                        <option key={d.id} value={d.id} style={{ background: '#0D1526' }}>{d.name}</option>
+                      ))}
+                    </select>
+                  </div>
+
+                  {/* EMT/Staff deploy */}
+                  <div>
+                    <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>Assign Staff (EMT/Doctor)</label>
+                    <select value={formStaffId} onChange={e => setFormStaffId(e.target.value)}
+                      style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none' }}>
+                      <option value="" style={{ background: '#0D1526' }}>-- Select Staff Member --</option>
+                      <optgroup label="Emergency Medical Techs" style={{ background: '#0D1526' }}>
+                        {emtOptions.map(emt => (
+                          <option key={emt.id} value={emt.id}>{emt.name}</option>
+                        ))}
+                      </optgroup>
+                      <optgroup label="MD Physicians" style={{ background: '#0D1526' }}>
+                        {doctorOptions.map(doc => (
+                          <option key={doc.id} value={doc.id}>{doc.name}</option>
+                        ))}
+                      </optgroup>
+                    </select>
+                  </div>
+                </div>
+
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+                  {/* Start Date */}
+                  <div>
+                    <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>Start Date</label>
+                    <input type="date" value={formStartDate} onChange={e => setFormStartDate(e.target.value)}
+                      style={{ width: '100%', padding: '9px 12px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none', boxSizing: 'border-box' }} />
+                  </div>
+
+                  {/* End Date */}
+                  <div>
+                    <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>End Date</label>
+                    <input type="date" value={formEndDate} onChange={e => setFormEndDate(e.target.value)}
+                      style={{ width: '100%', padding: '9px 12px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none', boxSizing: 'border-box' }} />
+                  </div>
+                </div>
+
+                {/* Notes */}
+                <div>
+                  <label style={{ fontSize: '0.65rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '1px', fontWeight: 700, display: 'block', marginBottom: 6 }}>Roster Notes</label>
+                  <input type="text" value={formNotes} onChange={e => setFormNotes(e.target.value)} placeholder="e.g. Active dispatch on V-001 ALS"
+                    style={{ width: '100%', padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, color: '#fff', fontSize: '0.85rem', outline: 'none', boxSizing: 'border-box' }} />
+                </div>
+
+                {rosterErr && (
+                  <div style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', padding: '10px 12px', borderRadius: 10, color: '#EF4444', fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <AlertCircle size={14} /> {rosterErr}
+                  </div>
+                )}
+
+                {rosterSuccess && (
+                  <div style={{ background: 'rgba(16,185,129,0.08)', border: '1px solid rgba(16,185,129,0.2)', padding: '10px 12px', borderRadius: 10, color: '#10B981', fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Check size={14} /> {rosterSuccess}
+                  </div>
+                )}
+
+                <button onClick={handleCreateAssignment} disabled={submittingRoster}
+                  style={{ width: '100%', padding: '12px', background: 'linear-gradient(135deg,#06B6D4,#3B82F6)', border: 'none', borderRadius: 12, color: '#fff', fontWeight: 800, fontSize: '0.88rem', cursor: submittingRoster ? 'not-allowed' : 'pointer', marginTop: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
+                  {submittingRoster ? <Loader2 size={16} className="spin" /> : 'FINALIZE ROSTER'}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .spin{animation:spin 1s linear infinite}`}</style>
     </div>
   );
 };

src/pages/fleet/FleetTrips.tsx

@@ -0,0 +1,339 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { 
+  Search, MapPin, Truck, Activity, Navigation, 
+  User, Calendar, Clock, AlertTriangle, Filter,
+  ChevronDown, X, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight 
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface Vehicle {
+  id: string;
+  registration_number: string;
+  vehicle_type: string;
+  brand?: string;
+  model?: string;
+  station_id?: string;
+  status?: string;
+  gps_lat?: string;
+  gps_lon?: string;
+  activeShift?: any;
+  activeRoster?: any;
+}
+
+export const FleetTrips: React.FC = () => {
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [isSearchFocused, setIsSearchFocused] = useState<boolean>(false);
+  
+  // Pagination
+  const [page, setPage] = useState<number>(1);
+  const [itemsPerPage, setItemsPerPage] = useState<number>(5);
+
+  const fetchVehicles = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      const res = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/vehicles', {
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+      });
+      const json = await res.json();
+      let list: Vehicle[] = [];
+      if (json?.data?.data && Array.isArray(json.data.data)) list = json.data.data;
+      else if (json?.data && Array.isArray(json.data)) list = json.data;
+      else if (Array.isArray(json)) list = json;
+      setVehicles(list);
+    } catch (e: any) {
+      console.error('Failed to fetch vehicles for trip management:', e);
+      setError(e?.message || 'Failed to fetch vehicles');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchVehicles();
+  }, [fetchVehicles]);
+
+  const filteredVehicles = vehicles.filter(v => {
+    const searchMatch = v.registration_number?.toLowerCase().includes(searchQuery.toLowerCase()) || 
+      v.activeShift?.driver?.user?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      v.activeShift?.staff?.user?.name?.toLowerCase().includes(searchQuery.toLowerCase());
+    const statusMatch = statusFilter ? v.status === statusFilter : true;
+    return searchMatch && statusMatch;
+  });
+
+  const totalPages = Math.max(1, Math.ceil(filteredVehicles.length / itemsPerPage));
+  const safePage = Math.min(page, totalPages);
+  const pageData = filteredVehicles.slice((safePage - 1) * itemsPerPage, safePage * itemsPerPage);
+
+  const getStatusColor = (status?: string) => {
+    switch (status) {
+      case 'BUSY':
+        return { bg: 'rgba(239, 68, 68, 0.1)', color: '#EF4444', border: 'rgba(239, 68, 68, 0.2)' };
+      case 'AVAILABLE':
+        return { bg: 'rgba(34, 197, 94, 0.1)', color: '#22C55E', border: 'rgba(34, 197, 94, 0.2)' };
+      default:
+        return { bg: 'rgba(245, 158, 11, 0.1)', color: '#F59E0B', border: 'rgba(245, 158, 11, 0.2)' };
+    }
+  };
+
+  const activeTripsCount = vehicles.filter(v => v.status === 'BUSY').length;
+  const availableCount = vehicles.filter(v => v.status === 'AVAILABLE').length;
+
+  return (
+    <div className="fleet-trips animate-in fade-in duration-500">
+      {/* Top Stats */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', marginBottom: '24px' }}>
+        <div className="glass" style={{ padding: '20px', borderRadius: '16px', border: '1px solid rgba(255,255,255,0.05)', background: '#FFFFFF', boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+            <div style={{ color: '#3B82F6' }}><Truck size={20} /></div>
+          </div>
+          <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#0F172A' }}>{loading ? '...' : vehicles.length}</div>
+          <div style={{ fontSize: '0.7rem', color: '#64748B', textTransform: 'uppercase', fontWeight: 700 }}>Total Vehicles</div>
+        </div>
+        <div className="glass" style={{ padding: '20px', borderRadius: '16px', border: '1px solid rgba(239, 68, 68, 0.2)', background: '#FFFFFF', boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+            <div style={{ color: '#EF4444' }}><Activity size={20} /></div>
+          </div>
+          <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#EF4444' }}>{loading ? '...' : activeTripsCount}</div>
+          <div style={{ fontSize: '0.7rem', color: '#64748B', textTransform: 'uppercase', fontWeight: 700 }}>Active Trips (Busy)</div>
+        </div>
+        <div className="glass" style={{ padding: '20px', borderRadius: '16px', border: '1px solid rgba(34, 197, 94, 0.2)', background: '#FFFFFF', boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+            <div style={{ color: '#22C55E' }}><Navigation size={20} /></div>
+          </div>
+          <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#22C55E' }}>{loading ? '...' : availableCount}</div>
+          <div style={{ fontSize: '0.7rem', color: '#64748B', textTransform: 'uppercase', fontWeight: 700 }}>Available Units</div>
+        </div>
+        <div className="glass" style={{ padding: '20px', borderRadius: '16px', border: '1px solid rgba(245, 158, 11, 0.2)', background: '#FFFFFF', boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
+            <div style={{ color: '#F59E0B' }}><AlertTriangle size={20} /></div>
+          </div>
+          <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#F59E0B' }}>{loading ? '...' : vehicles.filter(v => !v.activeShift).length}</div>
+          <div style={{ fontSize: '0.7rem', color: '#64748B', textTransform: 'uppercase', fontWeight: 700 }}>No Active Shift</div>
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div style={{ display: 'flex', gap: '12px', alignItems: 'center', marginBottom: 16 }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          background: '#FFFFFF',
+          padding: '10px 16px',
+          borderRadius: '12px',
+          border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+          boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : '0 2px 4px rgba(15, 23, 42, 0.01)',
+          transition: 'all 0.2s ease',
+          flex: 1,
+          position: 'relative'
+        }}>
+          <Search size={16} color={isSearchFocused ? "#06B6D4" : "#64748B"} style={{ transition: 'color 0.2s' }} />
+          <input 
+            type="text" 
+            placeholder="Search by vehicle reg, driver, or EMT name..." 
+            value={searchQuery}
+            onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }}
+            onFocus={() => setIsSearchFocused(true)}
+            onBlur={() => setIsSearchFocused(false)}
+            className="stations-search-input"
+            style={{ background: 'transparent', border: 'none', color: '#0F172A', fontSize: '0.875rem', outline: 'none', width: '100%', paddingRight: searchQuery ? '24px' : '0' }}
+          />
+          {searchQuery && (
+            <button 
+              onClick={() => { setSearchQuery(''); setPage(1); }}
+              style={{
+                position: 'absolute',
+                right: '12px',
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+                color: '#94A3B8',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '2px',
+                borderRadius: '50%',
+              }}
+              onMouseEnter={e => e.currentTarget.style.color = '#475569'}
+              onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
+
+        <div style={{ position: 'relative', display: 'inline-block' }}>
+          <select
+            value={statusFilter}
+            onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
+            style={{
+              background: '#FFFFFF', border: '1px solid #CBD5E1', padding: '11px 36px 11px 16px',
+              borderRadius: '12px', color: '#0F172A', fontSize: '0.875rem', outline: 'none',
+              cursor: 'pointer', appearance: 'none', minWidth: '180px', boxShadow: '0 2px 4px rgba(15, 23, 42, 0.01)',
+            }}
+          >
+            <option value="">All Statuses</option>
+            <option value="AVAILABLE">Available</option>
+            <option value="BUSY">Busy</option>
+          </select>
+          <ChevronDown size={16} color="#64748B" style={{ position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
+        </div>
+      </div>
+
+        {/* Content */}
+        {loading ? (
+          <div style={{ padding: '60px', textAlign: 'center', color: '#64748B', background: '#FFFFFF', borderRadius: '16px', border: '1px solid #CBD5E1' }}>
+            <Activity className="spin" size={24} style={{ margin: '0 auto 12px' }} />
+            Loading trips...
+          </div>
+        ) : error ? (
+          <div style={{ padding: '24px', background: '#FEF2F2', border: '1px solid #FCA5A5', color: '#991B1B', borderRadius: '16px' }}>
+            <AlertTriangle size={24} style={{ marginBottom: '8px' }} />
+            <div style={{ fontWeight: 600 }}>Error loading trips</div>
+            <div>{error}</div>
+          </div>
+        ) : filteredVehicles.length === 0 ? (
+          <div style={{ padding: '60px', textAlign: 'center', color: '#64748B', background: '#FFFFFF', borderRadius: '16px', border: '1px solid #CBD5E1' }}>
+            <MapPin size={48} style={{ opacity: 0.2, margin: '0 auto 16px' }} />
+            <div style={{ fontSize: '1.1rem', fontWeight: 600, color: '#475569' }}>No trips found</div>
+            <div style={{ fontSize: '0.875rem' }}>Adjust your filters to see more results</div>
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gap: '16px' }}>
+            {pageData.map(v => {
+              const sc = getStatusColor(v.status);
+              const shift = v.activeShift;
+              const roster = v.activeRoster;
+              
+              const driverName = shift?.driver?.user?.name || roster?.driver?.user?.name || 'Unassigned';
+              const emtName = shift?.staff?.user?.name || roster?.staff?.user?.name || 'Unassigned';
+              
+              return (
+                <motion.div 
+                  key={v.id}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  style={{
+                    background: '#FFFFFF', border: '1px solid #CBD5E1', borderRadius: '16px', padding: '20px',
+                    display: 'flex', flexDirection: 'column', gap: '16px', borderLeft: `4px solid ${sc.color}`,
+                    boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)'
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+                      <div style={{ width: '48px', height: '48px', borderRadius: '12px', background: '#F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#475569' }}>
+                        <Truck size={24} />
+                      </div>
+                      <div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                          <h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 800, color: '#0F172A' }}>{v.registration_number}</h3>
+                          <span style={{ fontSize: '0.65rem', padding: '4px 8px', borderRadius: '6px', background: '#F1F5F9', color: '#475569', fontWeight: 700 }}>{v.vehicle_type} UNIT</span>
+                        </div>
+                        <div style={{ fontSize: '0.8rem', color: '#64748B', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                          <MapPin size={14} /> 
+                          {v.gps_lat && v.gps_lat !== "0.0000000" ? `${v.gps_lat}, ${v.gps_lon}` : 'Location Unavailable'}
+                        </div>
+                      </div>
+                    </div>
+                    <div style={{ padding: '6px 12px', borderRadius: '8px', fontSize: '0.75rem', fontWeight: 800, background: sc.bg, color: sc.color }}>
+                      {v.status || 'UNKNOWN'}
+                    </div>
+                  </div>
+
+                  <div style={{ height: '1px', background: '#F1F5F9' }} />
+
+                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+                    <div>
+                      <div style={{ fontSize: '0.7rem', fontWeight: 700, color: '#94A3B8', textTransform: 'uppercase', marginBottom: '6px' }}>Driver / Pilot</div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.875rem', color: '#0F172A', fontWeight: 600 }}>
+                        <User size={16} color="#64748B" /> {driverName}
+                      </div>
+                    </div>
+                    <div>
+                      <div style={{ fontSize: '0.7rem', fontWeight: 700, color: '#94A3B8', textTransform: 'uppercase', marginBottom: '6px' }}>Paramedic / EMT</div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.875rem', color: '#0F172A', fontWeight: 600 }}>
+                        <User size={16} color="#64748B" /> {emtName}
+                      </div>
+                    </div>
+                    {shift && (
+                      <div>
+                        <div style={{ fontSize: '0.7rem', fontWeight: 700, color: '#94A3B8', textTransform: 'uppercase', marginBottom: '6px' }}>Shift Details</div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.875rem', color: '#0F172A' }}>
+                          <Clock size={16} color="#64748B" /> 
+                          Started: {new Date(shift.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Pagination Controls */}
+        {!loading && filteredVehicles.length > 0 && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px', background: '#FFFFFF', borderRadius: '16px', border: '1px solid #CBD5E1', marginTop: '8px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <span style={{ fontSize: '0.875rem', color: '#64748B' }}>Rows per page:</span>
+              <select
+                value={itemsPerPage}
+                onChange={(e) => { setItemsPerPage(Number(e.target.value)); setPage(1); }}
+                style={{ background: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: '8px', padding: '6px 28px 6px 12px', fontSize: '0.875rem', color: '#0F172A', outline: 'none', cursor: 'pointer', appearance: 'none' }}
+              >
+                {[5, 10, 20, 50].map(size => (
+                  <option key={size} value={size}>{size}</option>
+                ))}
+              </select>
+            </div>
+            
+            <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+              <span style={{ fontSize: '0.875rem', color: '#64748B' }}>
+                {Math.min((safePage - 1) * itemsPerPage + 1, filteredVehicles.length)} - {Math.min(safePage * itemsPerPage, filteredVehicles.length)} of {filteredVehicles.length}
+              </span>
+              <div style={{ display: 'flex', gap: '4px' }}>
+                <button
+                  onClick={() => setPage(1)}
+                  disabled={safePage === 1}
+                  style={{ padding: '6px', borderRadius: '6px', border: 'none', background: 'transparent', color: safePage === 1 ? '#CBD5E1' : '#64748B', cursor: safePage === 1 ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                >
+                  <ChevronsLeft size={18} />
+                </button>
+                <button
+                  onClick={() => setPage(p => Math.max(1, p - 1))}
+                  disabled={safePage === 1}
+                  style={{ padding: '6px', borderRadius: '6px', border: 'none', background: 'transparent', color: safePage === 1 ? '#CBD5E1' : '#64748B', cursor: safePage === 1 ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                >
+                  <ChevronLeft size={18} />
+                </button>
+                <button
+                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                  disabled={safePage === totalPages}
+                  style={{ padding: '6px', borderRadius: '6px', border: 'none', background: 'transparent', color: safePage === totalPages ? '#CBD5E1' : '#64748B', cursor: safePage === totalPages ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                >
+                  <ChevronRight size={18} />
+                </button>
+                <button
+                  onClick={() => setPage(totalPages)}
+                  disabled={safePage === totalPages}
+                  style={{ padding: '6px', borderRadius: '6px', border: 'none', background: 'transparent', color: safePage === totalPages ? '#CBD5E1' : '#64748B', cursor: safePage === totalPages ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                >
+                  <ChevronsRight size={18} />
+                </button>
+            </div>
+          </div>
+        </div>
+      )}
+      <style>{`
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        .spin { animation: spin 1s linear infinite; }
+      `}</style>
+    </div>
+  );
+};

src/pages/fleet/FleetWarehouseStock.tsx

@@ -0,0 +1,944 @@
+import React, { useEffect, useState } from 'react';
+import { Database, Search, Activity, AlertTriangle, ArrowLeft, X, ChevronLeft, ChevronRight, ShoppingCart, Truck, PlusCircle, Package, ClipboardList } from 'lucide-react';
+import { useSearchParams } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { fleetApi } from '../../api/fleet';
+import { Card } from '../../components/Common';
+
+export const FleetWarehouseStock: React.FC = () => {
+  const [, setSearchParams] = useSearchParams();
+  const [stockList, setStockList] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  // Master Inventory for dropdowns
+  const [inventory, setInventory] = useState<any[]>([]);
+
+  // Bulk Restock states
+  interface BulkRestockRow {
+    itemId: string;
+    quantity: number;
+    reason: string;
+  }
+  const [showBulkRestockModal, setShowBulkRestockModal] = useState<boolean>(false);
+  const [bulkRestockRows, setBulkRestockRows] = useState<BulkRestockRow[]>([
+    { itemId: '', quantity: 100, reason: 'Shipment from HealthCare Distributors' }
+  ]);
+  const [bulkRestockIsSubmitting, setBulkRestockIsSubmitting] = useState<boolean>(false);
+  const [bulkRestockError, setBulkRestockError] = useState<string | null>(null);
+
+  // Assign to Vehicle states
+  interface AssignVehicleRow {
+    itemId: string;
+    quantity: number;
+    batch_number: string;
+    expiry_date: string;
+  }
+  const [showAssignVehicleModal, setShowAssignVehicleModal] = useState<boolean>(false);
+  const [assignVehicleId, setAssignVehicleId] = useState<string>('');
+  const [assignSupplierName, setAssignSupplierName] = useState<string>('Central Warehouse');
+  const [assignReason, setAssignReason] = useState<string>('Ambulance Initial Stocking');
+  const [assignVehicleRows, setAssignVehicleRows] = useState<AssignVehicleRow[]>([
+    { itemId: '', quantity: 100, batch_number: '', expiry_date: '' }
+  ]);
+  const [assignVehicleIsSubmitting, setAssignVehicleIsSubmitting] = useState<boolean>(false);
+  const [assignVehicleError, setAssignVehicleError] = useState<string | null>(null);
+  const [vehiclesList, setVehiclesList] = useState<any[]>([]);
+
+  // Pending restock requests states
+  const [pendingRequests, setPendingRequests] = useState<any[]>([]);
+  const [loadingRequests, setLoadingRequests] = useState<boolean>(true);
+
+  const fetchRequests = async () => {
+    try {
+      setLoadingRequests(true);
+      const token = localStorage.getItem('teleems_token') || '';
+      if (!token) return;
+      const res = await fleetApi.getPendingRestockRequests(token);
+      const data = res?.data?.data || res?.data || [];
+      setPendingRequests(Array.isArray(data) ? data : []);
+    } catch (err) {
+      console.error('Failed to fetch pending requests:', err);
+    } finally {
+      setLoadingRequests(false);
+    }
+  };
+
+  const fetchStock = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      const response = await fleetApi.getWarehouseStock(token);
+      const data = response?.data?.data?.data || response?.data?.data || response?.data || [];
+      setStockList(Array.isArray(data) ? data : []);
+    } catch (err: any) {
+      console.error('Failed to fetch warehouse stock:', err);
+      setError(err?.message || 'Failed to fetch warehouse stock data.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStock();
+    fetchRequests();
+  }, []);
+
+  useEffect(() => {
+    const fetchInventory = async () => {
+      try {
+        const token = localStorage.getItem('teleems_token') || '';
+        const response = await fleetApi.getInventoryMaster(token);
+        const data = response?.data?.data || response?.data || [];
+        setInventory(Array.isArray(data) ? data : []);
+      } catch (err) {
+        console.error('Failed to fetch inventory master:', err);
+      }
+    };
+    fetchInventory();
+  }, []);
+
+  useEffect(() => {
+    const fetchVehicles = async () => {
+      try {
+        const token = localStorage.getItem('teleems_token') || '';
+        const userStr = localStorage.getItem('teleems_user');
+        let orgId = '';
+        if (userStr) {
+          const u = JSON.parse(userStr);
+          orgId = u.organisationId || '';
+        }
+        const res = await fleetApi.getVehicles(token, orgId);
+        const data = res?.data?.data || res?.data || [];
+        setVehiclesList(Array.isArray(data) ? data : []);
+      } catch (e) {
+        console.error('Failed to fetch vehicles:', e);
+      }
+    };
+    fetchVehicles();
+  }, []);
+
+  const handleSubmitBulkRestock = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBulkRestockError(null);
+    setBulkRestockIsSubmitting(true);
+
+    if (bulkRestockRows.length === 0) {
+      setBulkRestockError('Please add at least one item to restock.');
+      setBulkRestockIsSubmitting(false);
+      return;
+    }
+
+    const invalidRow = bulkRestockRows.find(row => !row.itemId || row.quantity <= 0);
+    if (invalidRow) {
+      setBulkRestockError('Please ensure all rows have an item selected and a positive quantity.');
+      setBulkRestockIsSubmitting(false);
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      const payload = bulkRestockRows.map(row => ({
+        itemId: row.itemId,
+        quantity: Number(row.quantity),
+        reason: row.reason || 'Bulk Shipment'
+      }));
+
+      await fleetApi.restockInventory(payload, token);
+      alert(`Successfully processed bulk restock for ${bulkRestockRows.length} items!`);
+      setShowBulkRestockModal(false);
+      fetchStock();
+      fetchRequests();
+    } catch (err: any) {
+      console.error('Failed bulk restock:', err);
+      setBulkRestockError(err?.message || 'Failed to submit bulk restock. Check item compatibility or try again.');
+    } finally {
+      setBulkRestockIsSubmitting(false);
+    }
+  };
+
+  const handleSubmitAssignVehicle = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setAssignVehicleError(null);
+    setAssignVehicleIsSubmitting(true);
+
+    if (!assignVehicleId) {
+      setAssignVehicleError('Please select a vehicle.');
+      setAssignVehicleIsSubmitting(false);
+      return;
+    }
+
+    if (assignVehicleRows.length === 0) {
+      setAssignVehicleError('Please add at least one item to assign.');
+      setAssignVehicleIsSubmitting(false);
+      return;
+    }
+
+    const invalidRow = assignVehicleRows.find(row => !row.itemId || row.quantity <= 0);
+    if (invalidRow) {
+      setAssignVehicleError('Please ensure all rows have an item selected and a positive quantity.');
+      setAssignVehicleIsSubmitting(false);
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('teleems_token') || '';
+      const payload = {
+        supplier_name: assignSupplierName,
+        reason: assignReason,
+        items: assignVehicleRows.map(row => ({
+          itemId: row.itemId,
+          quantity: Number(row.quantity),
+          batch_number: row.batch_number || 'N/A',
+          expiry_date: row.expiry_date || new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().split('T')[0]
+        }))
+      };
+
+      await fleetApi.assignToVehicle(assignVehicleId, payload, token);
+      alert(`Successfully assigned inventory to vehicle!`);
+      setShowAssignVehicleModal(false);
+      fetchStock();
+      fetchRequests();
+    } catch (err: any) {
+      console.error('Failed to assign to vehicle:', err);
+      setAssignVehicleError(err?.message || 'Failed to submit assignment. Check item details or try again.');
+    } finally {
+      setAssignVehicleIsSubmitting(false);
+    }
+  };
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery]);
+
+  const filteredStock = stockList.filter(item => {
+    const name = item.item_master?.name || '';
+    const category = item.item_master?.category || '';
+    return name.toLowerCase().includes(searchQuery.toLowerCase()) || category.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+
+  const totalPages = Math.ceil(filteredStock.length / itemsPerPage);
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredStock.slice(indexOfFirstItem, indexOfLastItem);
+
+  return (
+    <div className="animate-in fade-in duration-500">
+      <div style={{ marginBottom: '24px', display: 'flex', gap: '12px' }}>
+        <button 
+          onClick={() => setSearchParams({ tab: 'inventory' })}
+          style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#94A3B8', borderRadius: '12px', width: '52px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.2s', flexShrink: 0 }}
+          onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
+          onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'}
+          title="Back to Inventory"
+        >
+          <ArrowLeft size={18} />
+        </button>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          background: '#FFFFFF',
+          padding: '10px 16px',
+          borderRadius: '12px',
+          border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #CBD5E1',
+          boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : '0 2px 4px rgba(15, 23, 42, 0.01)',
+          transition: 'all 0.2s ease',
+          width: '380px',
+          position: 'relative'
+        }}>
+          <Search size={16} color={isSearchFocused ? "#06B6D4" : "#64748B"} style={{ transition: 'color 0.2s' }} />
+          <input 
+            type="text" 
+            placeholder="Search warehouse stock by name or category..." 
+            value={searchQuery} 
+            onChange={e => setSearchQuery(e.target.value)}
+            onFocus={() => setIsSearchFocused(true)}
+            onBlur={() => setIsSearchFocused(false)}
+            className="stations-search-input"
+            style={{ 
+              background: 'transparent', 
+              border: 'none', 
+              color: '#0F172A', 
+              fontSize: '0.875rem', 
+              outline: 'none', 
+              width: '100%',
+              paddingRight: searchQuery ? '24px' : '0'
+            }} 
+          />
+          {searchQuery && (
+            <button 
+              onClick={() => setSearchQuery('')}
+              style={{
+                position: 'absolute',
+                right: '12px',
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+                color: '#94A3B8',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '2px',
+                borderRadius: '50%',
+              }}
+              onMouseEnter={e => e.currentTarget.style.color = '#475569'}
+              onMouseLeave={e => e.currentTarget.style.color = '#94A3B8'}
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
+        <button 
+          onClick={() => {
+            const initialItemId = inventory.length > 0 ? inventory[0].id : '';
+            setBulkRestockRows([
+              { itemId: initialItemId, quantity: 100, reason: 'Shipment from HealthCare Distributors' }
+            ]);
+            setBulkRestockError(null);
+            setShowBulkRestockModal(true);
+          }}
+          className="btn-secondary" 
+          style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: '8px',
+            background: 'rgba(59, 130, 246, 0.1)',
+            border: '1px solid rgba(59, 130, 246, 0.3)',
+            color: '#3B82F6',
+            borderRadius: '12px',
+            padding: '8px 16px',
+            fontSize: '0.8125rem',
+            fontWeight: 700,
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+            marginLeft: 'auto'
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.background = 'rgba(59, 130, 246, 0.1)';
+          }}
+        >
+          <ShoppingCart size={16} /> BULK RESTOCK
+        </button>
+        <button 
+          onClick={() => {
+            const initialItemId = inventory.length > 0 ? inventory[0].id : '';
+            setAssignVehicleRows([
+              { itemId: initialItemId, quantity: 100, batch_number: '', expiry_date: '' }
+            ]);
+            setAssignVehicleError(null);
+            setShowAssignVehicleModal(true);
+          }}
+          className="btn-secondary" 
+          style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: '8px',
+            background: 'rgba(245, 158, 11, 0.1)',
+            border: '1px solid rgba(245, 158, 11, 0.3)',
+            color: '#F59E0B',
+            borderRadius: '12px',
+            padding: '8px 16px',
+            fontSize: '0.8125rem',
+            fontWeight: 700,
+            cursor: 'pointer',
+            transition: 'all 0.2s'
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.background = 'rgba(245, 158, 11, 0.2)';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.background = 'rgba(245, 158, 11, 0.1)';
+          }}
+        >
+          <Truck size={16} /> ASSIGN TO VEHICLE
+        </button>
+
+        <button 
+          onClick={() => setSearchParams({ tab: 'pending-requests' })}
+          className="btn-secondary" 
+          style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: '8px',
+            background: 'rgba(6, 182, 212, 0.1)',
+            border: '1px solid rgba(6, 182, 212, 0.3)',
+            color: '#06B6D4',
+            borderRadius: '12px',
+            padding: '8px 16px',
+            fontSize: '0.8125rem',
+            fontWeight: 700,
+            cursor: 'pointer',
+            transition: 'all 0.2s'
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.background = 'rgba(6, 182, 212, 0.2)';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.background = 'rgba(6, 182, 212, 0.1)';
+          }}
+        >
+          <ClipboardList size={16} /> STOCK REQUESTS
+        </button>
+      </div>
+
+
+      <Card title="Warehouse Inventory Catalog">
+        {loading ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '100px', gap: '16px', color: 'var(--text-secondary)' }}>
+            <Activity size={32} className="spin" style={{ color: 'var(--accent-cyan)' }} />
+            <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>SYNCHRONIZING WAREHOUSE DATA...</span>
+          </div>
+        ) : error ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '80px 24px', textAlign: 'center', color: '#EF4444' }}>
+            <AlertTriangle size={48} style={{ marginBottom: '16px', opacity: 0.8 }} />
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Warehouse Connection Failed</h3>
+            <p style={{ fontSize: '0.82rem', color: '#94A3B8', maxWidth: '360px', margin: '0 auto' }}>{error}</p>
+          </div>
+        ) : filteredStock.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '100px 24px', color: '#64748B' }}>
+            <Database size={48} style={{ opacity: 0.2, marginBottom: '16px' }} />
+            <h3 style={{ fontSize: '1rem', fontWeight: 700, color: '#94A3B8', marginBottom: '4px' }}>Warehouse is Empty</h3>
+            <p style={{ fontSize: '0.8125rem' }}>No stock data found or search returned no results.</p>
+          </div>
+        ) : (
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ textAlign: 'left', opacity: 0.5, fontSize: '0.65rem', textTransform: 'uppercase', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
+                <th style={{ padding: '16px 12px' }}>Supply Item</th>
+                <th style={{ padding: '16px 12px' }}>Category</th>
+                <th style={{ padding: '16px 12px' }}>Quantity Available</th>
+                <th style={{ padding: '16px 12px' }}>Reorder Point</th>
+                <th style={{ padding: '16px 12px' }}>Last Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentItems.map((item) => (
+                <tr key={item.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)', transition: 'background 0.2s' }} className="hover-glow">
+                  <td style={{ padding: '16px 12px' }}>
+                    <div style={{ fontWeight: 700, fontSize: '0.875rem' }}>
+                      {item.item_master?.name || 'Unknown Item'}
+                    </div>
+                  </td>
+                  <td style={{ padding: '16px 12px' }}>
+                    <span style={{ fontSize: '0.7rem', fontWeight: 700, color: '#06B6D4', background: 'rgba(6, 182, 212, 0.1)', padding: '4px 8px', borderRadius: '6px' }}>
+                      {item.item_master?.category || 'GENERAL'}
+                    </span>
+                  </td>
+                  <td style={{ padding: '16px 12px' }}>
+                    <div style={{ fontWeight: 900, fontSize: '1.1rem', color: '#10B981' }}>
+                      {item.quantity}
+                      <span style={{ fontSize: '0.7rem', color: '#64748B', fontWeight: 500, marginLeft: '6px' }}>Units</span>
+                    </div>
+                  </td>
+                  <td style={{ padding: '16px 12px' }}>
+                    <div style={{ fontSize: '0.8rem', color: '#94A3B8', fontWeight: 600 }}>
+                      {item.item_master?.min_stock_threshold || 0}
+                    </div>
+                  </td>
+                  <td style={{ padding: '16px 12px' }}>
+                    <div style={{ fontSize: '0.75rem', color: '#64748B' }}>
+                      {new Date(item.updatedAt).toLocaleString()}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+
+        {!loading && !error && filteredStock.length > itemsPerPage && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px', borderTop: '1px solid rgba(15, 23, 42, 0.08)', marginTop: '8px' }}>
+            <div style={{ fontSize: '0.8125rem', color: '#64748B' }}>
+              Showing {indexOfFirstItem + 1} to {Math.min(indexOfLastItem, filteredStock.length)} of {filteredStock.length} items
+            </div>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button 
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                style={{ 
+                  padding: '6px 12px', background: 'transparent', border: '1px solid #CBD5E1', borderRadius: '6px', 
+                  color: currentPage === 1 ? '#94A3B8' : '#475569', cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                  display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.8125rem', fontWeight: 600, transition: 'all 0.2s' 
+                }}
+              >
+                <ChevronLeft size={14} /> Prev
+              </button>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 8px', fontSize: '0.8125rem', fontWeight: 700, color: '#0F172A' }}>
+                {currentPage} / {totalPages}
+              </div>
+              <button 
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                style={{ 
+                  padding: '6px 12px', background: 'transparent', border: '1px solid #CBD5E1', borderRadius: '6px', 
+                  color: currentPage === totalPages ? '#94A3B8' : '#475569', cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                  display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.8125rem', fontWeight: 600, transition: 'all 0.2s' 
+                }}
+              >
+                Next <ChevronRight size={14} />
+              </button>
+            </div>
+          </div>
+        )}
+      </Card>
+
+
+
+      {/* Bulk Restock Modal */}
+      {showBulkRestockModal && (
+        <div style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'rgba(15, 23, 42, 0.4)',
+          backdropFilter: 'blur(8px)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1500,
+          animation: 'fadeIn 0.25s ease-out'
+        }}>
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.95, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 10 }}
+            transition={{ duration: 0.25, ease: 'easeOut' }}
+            style={{
+              width: '100%',
+              maxWidth: '820px',
+              background: '#FFFFFF',
+              border: '1px solid #E2E8F0',
+              borderRadius: '20px',
+              padding: '30px',
+              boxShadow: '0 20px 40px rgba(15, 23, 42, 0.15)',
+              fontFamily: "'Inter', sans-serif",
+              boxSizing: 'border-box',
+              maxHeight: '90vh',
+              display: 'flex',
+              flexDirection: 'column'
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', borderBottom: '1px solid #F1F5F9', paddingBottom: '16px', flexShrink: 0 }}>
+              <div>
+                <h3 style={{ fontSize: '1.25rem', fontWeight: 900, color: '#0F172A', margin: 0, letterSpacing: '-0.5px' }}>Bulk Restock Intake Ledger</h3>
+                <span style={{ fontSize: '0.75rem', color: '#0284C7', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px' }}>Warehouse bulk stock ingestion</span>
+              </div>
+              <button 
+                onClick={() => setShowBulkRestockModal(false)}
+                style={{ background: 'transparent', border: 'none', color: '#64748B', cursor: 'pointer', fontSize: '1.1rem' }}
+                onMouseEnter={e => e.currentTarget.style.color = '#0F172A'}
+                onMouseLeave={e => e.currentTarget.style.color = '#64748B'}
+              >
+                ✕
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmitBulkRestock} style={{ display: 'flex', flexDirection: 'column', gap: '20px', overflow: 'hidden', flex: 1 }}>
+              {bulkRestockError && (
+                <div style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.2)', color: '#EF4444', padding: '12px 16px', borderRadius: '10px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+                  <AlertTriangle size={16} />
+                  <span>{bulkRestockError}</span>
+                </div>
+              )}
+
+              {/* Rows List Container */}
+              <div style={{ overflowY: 'auto', paddingRight: '4px', display: 'flex', flexDirection: 'column', gap: '12px', flex: 1, minHeight: '150px' }}>
+                {bulkRestockRows.map((row, index) => {
+                  const matchedItem = inventory.find(item => item.id === row.itemId);
+                  return (
+                    <div 
+                      key={index} 
+                      style={{ 
+                        display: 'grid', 
+                        gridTemplateColumns: '1.5fr 1fr 1.5fr auto', 
+                        gap: '12px', 
+                        alignItems: 'center',
+                        background: '#F8FAFC',
+                        border: '1px solid #E2E8F0',
+                        borderRadius: '12px',
+                        padding: '14px'
+                      }}
+                    >
+                      {/* Item Select */}
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                        <label style={{ fontSize: '0.65rem', fontWeight: 800, color: '#64748B', textTransform: 'uppercase' }}>Select Supply Item</label>
+                        <select 
+                          value={row.itemId}
+                          onChange={(e) => {
+                            const newRows = [...bulkRestockRows];
+                            newRows[index].itemId = e.target.value;
+                            setBulkRestockRows(newRows);
+                          }}
+                          style={{
+                            background: '#FFFFFF',
+                            border: '1px solid #D1D5DB',
+                            borderRadius: '8px',
+                            padding: '8px 12px',
+                            color: '#0F172A',
+                            fontSize: '0.8rem',
+                            outline: 'none',
+                            cursor: 'pointer'
+                          }}
+                        >
+                          <option value="">-- Choose Item --</option>
+                          {inventory.map(item => (
+                            <option key={item.id} value={item.id}>
+                              {item.name} ({item.category})
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+
+                      {/* Quantity Input */}
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                        <label style={{ fontSize: '0.65rem', fontWeight: 800, color: '#64748B', textTransform: 'uppercase' }}>
+                          Quantity {matchedItem ? `(${matchedItem.unit_of_measure || matchedItem.unit || 'Units'})` : ''}
+                        </label>
+                        <input 
+                          type="number" 
+                          min="1"
+                          value={row.quantity}
+                          onChange={(e) => {
+                            const newRows = [...bulkRestockRows];
+                            newRows[index].quantity = Number(e.target.value);
+                            setBulkRestockRows(newRows);
+                          }}
+                          style={{
+                            background: '#FFFFFF',
+                            border: '1px solid #D1D5DB',
+                            borderRadius: '8px',
+                            padding: '8px 12px',
+                            color: '#0F172A',
+                            fontSize: '0.8rem',
+                            outline: 'none',
+                            fontWeight: 700
+                          }}
+                        />
+                      </div>
+
+                      {/* Reason Select/Input */}
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                        <label style={{ fontSize: '0.65rem', fontWeight: 800, color: '#64748B', textTransform: 'uppercase' }}>Reason / Supplier</label>
+                        <select 
+                          value={row.reason}
+                          onChange={(e) => {
+                            const newRows = [...bulkRestockRows];
+                            newRows[index].reason = e.target.value;
+                            setBulkRestockRows(newRows);
+                          }}
+                          style={{
+                            background: '#FFFFFF',
+                            border: '1px solid #D1D5DB',
+                            borderRadius: '8px',
+                            padding: '8px 12px',
+                            color: '#0F172A',
+                            fontSize: '0.8rem',
+                            outline: 'none',
+                            cursor: 'pointer'
+                          }}
+                        >
+                          <option value="Shipment from HealthCare Distributors">Shipment from HealthCare Distributors</option>
+                          <option value="Shipment from MediStore">Shipment from MediStore</option>
+                          <option value="Routine Stock Replenishment">Routine Stock Replenishment</option>
+                          <option value="Emergency Intake">Emergency Intake</option>
+                        </select>
+                      </div>
+
+                      {/* Remove Action */}
+                      <button 
+                        type="button"
+                        onClick={() => {
+                          const newRows = bulkRestockRows.filter((_, rIdx) => rIdx !== index);
+                          setBulkRestockRows(newRows);
+                        }}
+                        style={{
+                          background: 'rgba(239, 68, 68, 0.1)',
+                          border: 'none',
+                          color: '#EF4444',
+                          padding: '8px',
+                          borderRadius: '8px',
+                          cursor: 'pointer',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          alignSelf: 'end',
+                          marginBottom: '2px',
+                          transition: 'all 0.2s'
+                        }}
+                        onMouseEnter={e => e.currentTarget.style.background = 'rgba(239, 68, 68, 0.2)'}
+                        onMouseLeave={e => e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)'}
+                        title="Remove row"
+                      >
+                        <X size={16} />
+                      </button>
+                    </div>
+                  );
+                })}
+
+                {/* Add Row Button */}
+                <button 
+                  type="button"
+                  onClick={() => {
+                    const firstId = inventory.length > 0 ? inventory[0].id : '';
+                    setBulkRestockRows([
+                      ...bulkRestockRows,
+                      { itemId: firstId, quantity: 100, reason: 'Shipment from HealthCare Distributors' }
+                    ]);
+                  }}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '8px',
+                    background: 'rgba(2, 132, 199, 0.05)',
+                    border: '1px dashed rgba(2, 132, 199, 0.3)',
+                    color: '#0284C7',
+                    borderRadius: '12px',
+                    padding: '12px',
+                    fontSize: '0.8rem',
+                    fontWeight: 700,
+                    cursor: 'pointer',
+                    transition: 'all 0.2s'
+                  }}
+                  onMouseEnter={e => {
+                    e.currentTarget.style.background = 'rgba(2, 132, 199, 0.1)';
+                  }}
+                  onMouseLeave={e => {
+                    e.currentTarget.style.background = 'rgba(2, 132, 199, 0.05)';
+                  }}
+                >
+                  <PlusCircle size={16} /> ADD ANOTHER ITEM ROW
+                </button>
+              </div>
+
+              {/* Bottom Buttons */}
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', borderTop: '1px solid #F1F5F9', paddingTop: '20px', flexShrink: 0 }}>
+                <button 
+                  type="button" 
+                  onClick={() => setShowBulkRestockModal(false)}
+                  className="btn-ghost"
+                  style={{ padding: '10px 20px', fontSize: '0.8rem', color: '#475569', background: 'transparent', border: 'none', cursor: 'pointer', fontWeight: 600 }}
+                >
+                  CANCEL
+                </button>
+                <button 
+                  type="submit" 
+                  className="btn-primary"
+                  disabled={bulkRestockIsSubmitting}
+                  style={{ padding: '10px 24px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '8px', background: '#22C55E', color: '#FFFFFF', border: 'none', borderRadius: '8px', fontWeight: 700, cursor: 'pointer' }}
+                >
+                  {bulkRestockIsSubmitting ? (
+                    <>
+                      <Activity size={14} className="spin" /> PROCESSING...
+                    </>
+                  ) : (
+                    'SUBMIT BULK INGESTION'
+                  )}
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      {/* Assign to Vehicle Modal */}
+      {showAssignVehicleModal && (
+        <div style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.4)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }} onClick={(e) => { if (e.target === e.currentTarget) setShowAssignVehicleModal(false); }}>
+          <motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} style={{ background: '#FFFFFF', borderRadius: '16px', width: '900px', maxWidth: '95vw', maxHeight: '90vh', overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 40px rgba(15, 23, 42, 0.2)' }}>
+            
+            {/* Header */}
+            <div style={{ padding: '20px 24px', borderBottom: '1px solid #F1F5F9', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#F8FAFC' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <div style={{ background: 'rgba(245, 158, 11, 0.1)', padding: '10px', borderRadius: '12px', color: '#F59E0B' }}>
+                  <Truck size={20} />
+                </div>
+                <div>
+                  <h2 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 800, color: '#0F172A' }}>Assign to Vehicle</h2>
+                  <p style={{ margin: '4px 0 0', fontSize: '0.8rem', color: '#64748B' }}>Transfer inventory stock to an active fleet vehicle</p>
+                </div>
+              </div>
+              <button onClick={() => setShowAssignVehicleModal(false)} style={{ background: '#FFFFFF', border: '1px solid #E2E8F0', padding: '6px', borderRadius: '8px', cursor: 'pointer', color: '#64748B' }}>
+                <X size={16} />
+              </button>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmitAssignVehicle} style={{ flex: 1, overflowY: 'auto', padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' }}>
+              {assignVehicleError && (
+                <div style={{ padding: '12px 16px', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.2)', borderRadius: '8px', color: '#EF4444', fontSize: '0.85rem', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <AlertTriangle size={16} /> {assignVehicleError}
+                </div>
+              )}
+
+              {/* Top Configuration Details */}
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px', background: '#F8FAFC', padding: '16px', borderRadius: '12px', border: '1px solid #E2E8F0' }}>
+                <div>
+                  <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: 700, color: '#475569', marginBottom: '6px' }}>Select Target Vehicle *</label>
+                  <select 
+                    required
+                    value={assignVehicleId}
+                    onChange={(e) => setAssignVehicleId(e.target.value)}
+                    style={{ width: '100%', background: '#FFFFFF', border: '1px solid #D1D5DB', borderRadius: '8px', padding: '8px 12px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                  >
+                    <option value="" disabled>-- Select Vehicle --</option>
+                    {vehiclesList.map(v => (
+                      <option key={v.id} value={v.id}>{v.registration_number} {v.brand ? `(${v.brand})` : ''}</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: 700, color: '#475569', marginBottom: '6px' }}>Supplier / Source</label>
+                  <input 
+                    type="text"
+                    required
+                    value={assignSupplierName}
+                    onChange={(e) => setAssignSupplierName(e.target.value)}
+                    style={{ width: '100%', background: '#FFFFFF', border: '1px solid #D1D5DB', borderRadius: '8px', padding: '8px 12px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                  />
+                </div>
+                <div>
+                  <label style={{ display: 'block', fontSize: '0.75rem', fontWeight: 700, color: '#475569', marginBottom: '6px' }}>Assignment Reason</label>
+                  <select 
+                    value={assignReason}
+                    onChange={(e) => setAssignReason(e.target.value)}
+                    style={{ width: '100%', background: '#FFFFFF', border: '1px solid #D1D5DB', borderRadius: '8px', padding: '8px 12px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                  >
+                    <option value="Ambulance Initial Stocking">Ambulance Initial Stocking</option>
+                    <option value="Routine Restock">Routine Restock</option>
+                    <option value="Emergency Restock">Emergency Restock</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Rows */}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: 0, fontSize: '0.9rem', fontWeight: 700, color: '#0F172A', borderBottom: '1px solid #E2E8F0', paddingBottom: '8px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <Package size={16} color="#0284C7" /> Items to Assign
+                </h3>
+                
+                {assignVehicleRows.map((row, index) => (
+                  <div key={index} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr auto', gap: '12px', alignItems: 'center', background: '#FFFFFF', padding: '12px', borderRadius: '12px', border: '1px solid #E2E8F0' }}>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '0.65rem', fontWeight: 700, color: '#64748B', marginBottom: '4px', textTransform: 'uppercase' }}>Select Item</label>
+                      <select 
+                        required
+                        value={row.itemId}
+                        onChange={(e) => {
+                          const newRows = [...assignVehicleRows];
+                          newRows[index].itemId = e.target.value;
+                          setAssignVehicleRows(newRows);
+                        }}
+                        style={{ width: '100%', background: '#F8FAFC', border: '1px solid #D1D5DB', borderRadius: '6px', padding: '8px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                      >
+                        <option value="" disabled>-- Select item --</option>
+                        {inventory.map(invItem => (
+                          <option key={invItem.id} value={invItem.id}>{invItem.name} ({invItem.unit_of_measure || invItem.unit || 'Units'})</option>
+                        ))}
+                      </select>
+                    </div>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '0.65rem', fontWeight: 700, color: '#64748B', marginBottom: '4px', textTransform: 'uppercase' }}>Quantity</label>
+                      <input 
+                        type="number"
+                        min="1"
+                        required
+                        value={row.quantity}
+                        onChange={(e) => {
+                          const newRows = [...assignVehicleRows];
+                          newRows[index].quantity = Number(e.target.value);
+                          setAssignVehicleRows(newRows);
+                        }}
+                        style={{ width: '100%', background: '#F8FAFC', border: '1px solid #D1D5DB', borderRadius: '6px', padding: '8px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                      />
+                    </div>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '0.65rem', fontWeight: 700, color: '#64748B', marginBottom: '4px', textTransform: 'uppercase' }}>Batch No</label>
+                      <input 
+                        type="text"
+                        placeholder="e.g. B-2024"
+                        value={row.batch_number}
+                        onChange={(e) => {
+                          const newRows = [...assignVehicleRows];
+                          newRows[index].batch_number = e.target.value;
+                          setAssignVehicleRows(newRows);
+                        }}
+                        style={{ width: '100%', background: '#F8FAFC', border: '1px solid #D1D5DB', borderRadius: '6px', padding: '8px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                      />
+                    </div>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '0.65rem', fontWeight: 700, color: '#64748B', marginBottom: '4px', textTransform: 'uppercase' }}>Expiry Date</label>
+                      <input 
+                        type="date"
+                        required
+                        value={row.expiry_date}
+                        onChange={(e) => {
+                          const newRows = [...assignVehicleRows];
+                          newRows[index].expiry_date = e.target.value;
+                          setAssignVehicleRows(newRows);
+                        }}
+                        style={{ width: '100%', background: '#F8FAFC', border: '1px solid #D1D5DB', borderRadius: '6px', padding: '8px', color: '#0F172A', fontSize: '0.8rem', outline: 'none' }}
+                      />
+                    </div>
+                    <button 
+                      type="button"
+                      onClick={() => setAssignVehicleRows(assignVehicleRows.filter((_, rIdx) => rIdx !== index))}
+                      style={{ background: 'rgba(239, 68, 68, 0.1)', border: 'none', color: '#EF4444', padding: '8px', borderRadius: '8px', cursor: 'pointer', alignSelf: 'end', marginBottom: '2px' }}
+                    >
+                      <X size={16} />
+                    </button>
+                  </div>
+                ))}
+
+                <button 
+                  type="button"
+                  onClick={() => {
+                    const firstId = inventory.length > 0 ? inventory[0].id : '';
+                    setAssignVehicleRows([...assignVehicleRows, { itemId: firstId, quantity: 100, batch_number: '', expiry_date: '' }]);
+                  }}
+                  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', background: 'rgba(245, 158, 11, 0.05)', border: '1px dashed rgba(245, 158, 11, 0.3)', color: '#F59E0B', borderRadius: '12px', padding: '12px', fontSize: '0.8rem', fontWeight: 700, cursor: 'pointer' }}
+                >
+                  <PlusCircle size={16} /> ADD ANOTHER ITEM
+                </button>
+              </div>
+
+              {/* Bottom Buttons */}
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', borderTop: '1px solid #F1F5F9', paddingTop: '20px', flexShrink: 0 }}>
+                <button 
+                  type="button" 
+                  onClick={() => setShowAssignVehicleModal(false)}
+                  style={{ padding: '10px 20px', fontSize: '0.8rem', color: '#475569', background: 'transparent', border: 'none', cursor: 'pointer', fontWeight: 600 }}
+                >
+                  CANCEL
+                </button>
+                <button 
+                  type="submit" 
+                  disabled={assignVehicleIsSubmitting}
+                  style={{ padding: '10px 24px', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '8px', background: '#F59E0B', color: '#FFFFFF', border: 'none', borderRadius: '8px', fontWeight: 700, cursor: 'pointer' }}
+                >
+                  {assignVehicleIsSubmitting ? <><Activity size={14} className="spin" /> PROCESSING...</> : 'CONFIRM ASSIGNMENT'}
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      <style>{`
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        .spin { animation: spin 1s linear infinite; }
+        .hover-glow:hover { background: rgba(255,255,255,0.02); }
+      `}</style>
+    </div>
+  );
+};

src/pages/fleet/LiveDashboard.tsx

@@ -0,0 +1,749 @@
+/// <reference types="@types/google.maps" />
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { 
+  Truck, Search, MapPin, Radio, Activity, X, Check,
+  Loader2, Compass, Play, RefreshCw
+} from 'lucide-react';
+// import { motion } from 'framer-motion';
+
+// --- Types ---
+interface Vehicle {
+  id: string;
+  registration_number: string;
+  chassis_number?: string | null; 
+  brand?: string;
+  model?: string;
+  vehicle_type: string; // ALS, BLS, etc.
+  status: string; // BUSY, AVAILABLE, OFFLINE
+  gps_lat: string | number; 
+  gps_lon: string | number;
+  activeShift?: {
+    id: string;
+    status: string;
+    staff?: {
+      user?: {
+        name: string;
+        phone: string;
+      };
+    };
+  } | null;
+}
+
+// --- Google Maps Script Helper ---
+let mapsScriptLoaded = false;
+let mapsScriptLoadingPromise: Promise<void> | null = null;
+
+const loadGoogleMapsScript = (apiKey: string): Promise<void> => {
+  if (mapsScriptLoaded) return Promise.resolve();
+  if (mapsScriptLoadingPromise) return mapsScriptLoadingPromise;
+
+  mapsScriptLoadingPromise = new Promise((resolve, reject) => {
+    if ((window as any).google && (window as any).google.maps) {
+      mapsScriptLoaded = true;
+      resolve();
+      return;
+    }
+
+    // Set dynamic callback name
+    const callbackName = 'initGoogleMapsCallback';
+    (window as any)[callbackName] = () => {
+      mapsScriptLoaded = true;
+      resolve();
+    };
+
+    const script = document.createElement('script');
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callbackName}&loading=async`;
+    script.async = true;
+    script.defer = true;
+    script.onerror = (err) => {
+      console.error('Google Maps Script load failed:', err);
+      reject(err);
+    };
+
+    document.head.appendChild(script);
+  });
+
+  return mapsScriptLoadingPromise;
+};
+
+// Map custom aesthetic style (sleek dark/light theme balancing high-contrast premium feel)
+const mapStyles = [
+  {
+    "elementType": "geometry",
+    "stylers": [{ "color": "#f5f5f5" }]
+  },
+  {
+    "elementType": "labels.icon",
+    "stylers": [{ "visibility": "off" }]
+  },
+  {
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#616161" }]
+  },
+  {
+    "elementType": "labels.text.stroke",
+    "stylers": [{ "color": "#f5f5f5" }]
+  },
+  {
+    "featureType": "administrative.land_parcel",
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#bdbdbd" }]
+  },
+  {
+    "featureType": "poi",
+    "elementType": "geometry",
+    "stylers": [{ "color": "#eeeeee" }]
+  },
+  {
+    "featureType": "poi",
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#757575" }]
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": [{ "color": "#ffffff" }]
+  },
+  {
+    "featureType": "road.arterial",
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#757575" }]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "geometry",
+    "stylers": [{ "color": "#dadada" }]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#616161" }]
+  },
+  {
+    "featureType": "road.local",
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#9e9e9e" }]
+  },
+  {
+    "featureType": "transit.line",
+    "elementType": "geometry",
+    "stylers": [{ "color": "#e5e5e5" }]
+  },
+  {
+    "featureType": "transit.station",
+    "elementType": "geometry",
+    "stylers": [{ "color": "#eeeeee" }]
+  },
+  {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": [{ "color": "#c9c9c9" }]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": [{ "color": "#9e9e9e" }]
+  }
+];
+
+export const LiveDashboard: React.FC = () => {
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [socketStatus, setSocketStatus] = useState<'disconnected' | 'connecting' | 'connected'>('connecting');
+  const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | null>(null);
+
+  // References to prevent stale closures inside socket events
+  const vehiclesRef = useRef<Vehicle[]>([]);
+  const selectedVehicleRef = useRef<Vehicle | null>(null);
+
+  useEffect(() => {
+    vehiclesRef.current = vehicles;
+  }, [vehicles]);
+
+  useEffect(() => {
+    selectedVehicleRef.current = selectedVehicle;
+  }, [selectedVehicle]);
+
+  // Stats
+  const [totalVehicles, setTotalVehicles] = useState(0);
+  const [busyCount, setBusyCount] = useState(0);
+  const [availableCount, setAvailableCount] = useState(0);
+
+  // References
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<google.maps.Map | null>(null);
+  const markersRef = useRef<Record<string, google.maps.Marker>>({});
+  const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
+  const socketRef = useRef<Socket | null>(null);
+
+  const API_KEY = 'AIzaSyA9fe3iFd2XxDDUQNGJLs6Tp5iRewpHdhs';
+  const token = localStorage.getItem('teleems_token') || '';
+
+  // Get status details
+  const getStatusCfg = (status: string) => {
+    switch ((status || '').toUpperCase()) {
+      case 'BUSY':
+        return { label: 'Busy', color: '#F97316', bg: '#FFF7ED', border: '#FFEDD5' };
+      case 'AVAILABLE':
+        return { label: 'Available', color: '#10B981', bg: '#ECFDF5', border: '#D1FAE5' };
+      default:
+        return { label: 'Offline', color: '#64748B', bg: '#F8FAFC', border: '#F1F5F9' };
+    }
+  };
+
+  // Fetch initial list of vehicles
+  const fetchVehicles = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('https://teleems-api-gateway.onrender.com/v1/fleet/vehicles', {
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+      });
+      const json = await res.json();
+      let list: Vehicle[] = [];
+      if (json?.data?.data && Array.isArray(json.data.data)) list = json.data.data;
+      else if (json?.data && Array.isArray(json.data)) list = json.data;
+      else if (Array.isArray(json)) list = json;
+
+      setVehicles(list);
+      setTotalVehicles(list.length);
+      setBusyCount(list.filter(v => v.status === 'BUSY').length);
+      setAvailableCount(list.filter(v => v.status === 'AVAILABLE').length);
+    } catch (err) {
+      console.error('Error fetching vehicles:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  // Center map on specific marker
+  const centerOnVehicle = (vehicle: Vehicle) => {
+    const lat = parseFloat(vehicle.gps_lat as string);
+    const lon = parseFloat(vehicle.gps_lon as string);
+    
+    if (isNaN(lat) || isNaN(lon) || (lat === 0 && lon === 0)) {
+      return;
+    }
+
+    setSelectedVehicle(vehicle);
+
+    if (mapInstanceRef.current) {
+      mapInstanceRef.current.setZoom(15);
+      mapInstanceRef.current.panTo({ lat, lng: lon });
+
+      // Open infowindow
+      const marker = markersRef.current[vehicle.id];
+      if (marker && infoWindowRef.current) {
+        const sc = getStatusCfg(vehicle.status);
+        const driverName = vehicle.activeShift?.staff?.user?.name || 'No Pilot Assigned';
+        const content = `
+          <div style="padding: 10px; font-family: 'Inter', sans-serif; min-width: 180px; color: #0F172A;">
+            <div style="font-size: 0.65rem; font-weight: 800; color: #64748B; text-transform: uppercase; margin-bottom: 3px;">${vehicle.vehicle_type} AMBULANCE</div>
+            <div style="font-size: 0.95rem; font-weight: 800; color: #0F172A; margin-bottom: 6px;">${vehicle.registration_number}</div>
+            <div style="font-size: 0.75rem; color: #475569; margin-bottom: 8px;">${vehicle.brand || ''} ${vehicle.model || ''}</div>
+            <div style="display: flex; gap: 6px; align-items: center; margin-top: 4px;">
+              <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${sc.color};"></span>
+              <span style="font-size: 0.72rem; font-weight: 700; color: ${sc.color};">${sc.label}</span>
+            </div>
+            <div style="font-size: 0.7rem; color: #64748B; margin-top: 8px; border-top: 1px solid #E2E8F0; padding-top: 6px;">
+              Pilot: <strong>${driverName}</strong>
+            </div>
+          </div>
+        `;
+        infoWindowRef.current.setContent(content);
+        infoWindowRef.current.open(mapInstanceRef.current, marker);
+      }
+    }
+  };
+
+  // Setup maps and socket connections
+  useEffect(() => {
+    fetchVehicles();
+  }, [fetchVehicles]);
+
+  // Google Maps setup once vehicles list is ready and element exists
+  useEffect(() => {
+    if (loading || vehicles.length === 0 || !mapContainerRef.current) return;
+
+    loadGoogleMapsScript(API_KEY)
+      .then(() => {
+        // Find center based on active coords
+        const validCoords = vehicles
+          .map(v => ({ lat: parseFloat(v.gps_lat as string), lng: parseFloat(v.gps_lon as string) }))
+          .filter(c => !isNaN(c.lat) && !isNaN(c.lng) && c.lat !== 0 && c.lng !== 0);
+
+        const defaultCenter = validCoords.length > 0 
+          ? validCoords[0] 
+          : { lat: 18.5204, lng: 73.8567 }; // Default Pune center
+
+        const mapOptions: google.maps.MapOptions = {
+          center: defaultCenter,
+          zoom: 12,
+          styles: mapStyles,
+          mapTypeControl: false,
+          streetViewControl: false,
+          fullscreenControl: false,
+          zoomControl: true,
+          zoomControlOptions: {
+            position: google.maps.ControlPosition.RIGHT_CENTER
+          }
+        };
+
+        const map = new google.maps.Map(mapContainerRef.current!, mapOptions);
+        mapInstanceRef.current = map;
+        infoWindowRef.current = new google.maps.InfoWindow();
+
+        // Create Markers
+        vehicles.forEach(v => {
+          const lat = parseFloat(v.gps_lat as string);
+          const lon = parseFloat(v.gps_lon as string);
+
+          if (isNaN(lat) || isNaN(lon) || (lat === 0 && lon === 0)) return;
+
+          const sc = getStatusCfg(v.status);
+          
+          // High quality SVG markers for vehicles
+          const svgIcon = {
+            path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
+            fillColor: sc.color,
+            fillOpacity: 1,
+            strokeColor: '#FFFFFF',
+            strokeWeight: 2,
+            scale: 1.8,
+            anchor: new google.maps.Point(12, 24)
+          };
+
+          const marker = new google.maps.Marker({
+            position: { lat, lng: lon },
+            map,
+            title: v.registration_number,
+            icon: svgIcon,
+            animation: google.maps.Animation.DROP
+          });
+
+          marker.addListener('click', () => {
+            centerOnVehicle(v);
+          });
+
+          markersRef.current[v.id] = marker;
+        });
+      })
+      .catch(err => {
+        console.error('Google Maps Load Error:', err);
+      });
+
+    return () => {
+      // Cleanup markers
+      Object.values(markersRef.current).forEach(m => m.setMap(null));
+      markersRef.current = {};
+    };
+  }, [loading]);
+
+  // Real-time socket client connection
+  useEffect(() => {
+    setSocketStatus('connecting');
+    const socket = io('https://teleems-api-gateway.onrender.com', {
+      transports: ['websocket'],
+      reconnectionAttempts: 5,
+      reconnectionDelay: 3000
+    });
+
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      console.log('Socket.io connected successfully!');
+      setSocketStatus('connected');
+      
+      // Emit subscription event
+      socket.emit('subscribe_fleet');
+    });
+
+    socket.on('disconnect', () => {
+      console.log('Socket.io disconnected!');
+      setSocketStatus('disconnected');
+    });
+
+    // Real-time updates listener
+    socket.on('fleet:location_updated', (data: any) => {
+      console.log('Real-time location received:', data);
+      
+      const vId = data.vehicle_id || data.id;
+      const regNo = data.registration_number;
+      const lat = parseFloat(data.lat || data.gps_lat);
+      const lon = parseFloat(data.lon || data.gps_lon);
+
+      if (!vId || isNaN(lat) || isNaN(lon)) return;
+
+      // Update vehicle state coordinates in vehicle array dynamically
+      setVehicles(prev => {
+        const index = prev.findIndex(v => v.id === vId);
+        if (index === -1) return prev;
+        const copy = [...prev];
+        copy[index] = {
+          ...copy[index],
+          gps_lat: lat,
+          gps_lon: lon
+        };
+        return copy;
+      });
+
+      // Update marker coordinates dynamically on map
+      let marker = markersRef.current[vId];
+      if (marker) {
+        const newPos = new google.maps.LatLng(lat, lon);
+        marker.setPosition(newPos);
+        
+        // Soft focus visual if selected
+        if (selectedVehicleRef.current?.id === vId) {
+          if (mapInstanceRef.current) {
+            mapInstanceRef.current.panTo(newPos);
+          }
+        }
+      } else if (mapInstanceRef.current) {
+        // Create marker dynamically if it didn't exist originally due to missing coordinates
+        const vehicleInfo = vehiclesRef.current.find(v => v.id === vId);
+        const sc = getStatusCfg(vehicleInfo?.status || 'AVAILABLE');
+        const svgIcon = {
+          path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
+          fillColor: sc.color,
+          fillOpacity: 1,
+          strokeColor: '#FFFFFF',
+          strokeWeight: 2,
+          scale: 1.8,
+          anchor: new google.maps.Point(12, 24)
+        };
+        marker = new google.maps.Marker({
+          position: { lat, lng: lon },
+          map: mapInstanceRef.current,
+          title: regNo || vehicleInfo?.registration_number || 'Ambulance',
+          icon: svgIcon,
+          animation: google.maps.Animation.DROP
+        });
+        marker.addListener('click', () => {
+          if (vehicleInfo) centerOnVehicle(vehicleInfo);
+        });
+        markersRef.current[vId] = marker;
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  // Handle simulation trigger
+  const runMoveSimulation = () => {
+    // FindPune Vehicle or first with valid coords
+    const activeV = vehicles.find(v => parseFloat(v.gps_lat as string) > 0);
+    if (!activeV) return;
+
+    let currentLat = parseFloat(activeV.gps_lat as string);
+    let currentLon = parseFloat(activeV.gps_lon as string);
+
+    // Simulate standard movement increments
+    const interval = setInterval(() => {
+      currentLat += (Math.random() - 0.5) * 0.0015;
+      currentLon += (Math.random() - 0.5) * 0.0015;
+
+      // Send to Socket receiver locally to test standard workflow
+      if (socketRef.current) {
+        socketRef.current.emit('simulate_move_debug', {
+          vehicle_id: activeV.id,
+          registration_number: activeV.registration_number,
+          lat: currentLat,
+          lon: currentLon
+        });
+      }
+
+      // Locally update as fallback to show live feedback immediately
+      const marker = markersRef.current[activeV.id];
+      if (marker) {
+        const newPos = new google.maps.LatLng(currentLat, currentLon);
+        marker.setPosition(newPos);
+        if (mapInstanceRef.current) mapInstanceRef.current.panTo(newPos);
+      }
+
+      setVehicles(prev => {
+        const idx = prev.findIndex(v => v.id === activeV.id);
+        if (idx === -1) return prev;
+        const copy = [...prev];
+        copy[idx] = { ...copy[idx], gps_lat: currentLat, gps_lon: currentLon };
+        return copy;
+      });
+    }, 1200);
+
+    // Clear simulation after 10 seconds
+    setTimeout(() => {
+      clearInterval(interval);
+    }, 10000);
+  };
+
+  const filtered = vehicles.filter(v => 
+    v.registration_number.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    (v.brand && v.brand.toLowerCase().includes(searchQuery.toLowerCase())) ||
+    (v.model && v.model.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  return (
+    <div style={{ display: 'flex', height: 'calc(100vh - 128px)', gap: '20px', color: '#0F172A', fontFamily: 'sans-serif' }}>
+      
+      {/* Sidebar: Vehicles List Panel */}
+      <div style={{ 
+        width: '380px', 
+        background: '#FFFFFF', 
+        border: '1px solid rgba(15, 23, 42, 0.08)', 
+        borderRadius: '16px', 
+        display: 'flex', 
+        flexDirection: 'column',
+        boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)',
+        overflow: 'hidden'
+      }}>
+        
+        {/* Header / Stats */}
+        <div style={{ padding: '20px', borderBottom: '1px solid rgba(15, 23, 42, 0.06)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '14px' }}>
+            <h2 style={{ fontSize: '1.1rem', fontWeight: 900, color: '#0F172A', margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Radio size={18} color="#06B6D4" style={{ animation: 'pulse 2s infinite' }} /> Active Ambulances
+            </h2>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.72rem', background: socketStatus === 'connected' ? '#ECFDF5' : '#FEF2F2', padding: '4px 10px', borderRadius: '50px', border: `1px solid ${socketStatus === 'connected' ? '#A7F3D0' : '#FCA5A5'}`, color: socketStatus === 'connected' ? '#047857' : '#B91C1C', fontWeight: 800 }}>
+              <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: socketStatus === 'connected' ? '#10B981' : '#EF4444' }} />
+              {socketStatus === 'connected' ? 'Connected' : socketStatus === 'connecting' ? 'Reconnecting' : 'Disconnected'}
+            </div>
+          </div>
+
+          {/* Quick Mini Stats */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '8px' }}>
+            <div style={{ background: '#F8FAFC', padding: '8px 10px', borderRadius: '10px', border: '1px solid rgba(15, 23, 42, 0.04)', textAlign: 'center' }}>
+              <div style={{ fontSize: '1.2rem', fontWeight: 900, color: '#0F172A' }}>{totalVehicles}</div>
+              <div style={{ fontSize: '0.62rem', color: '#64748B', marginTop: '2px', textTransform: 'uppercase' }}>Total</div>
+            </div>
+            <div style={{ background: '#FFF7ED', padding: '8px 10px', borderRadius: '10px', border: '1px solid #FFEDD5', textAlign: 'center' }}>
+              <div style={{ fontSize: '1.2rem', fontWeight: 900, color: '#F97316' }}>{busyCount}</div>
+              <div style={{ fontSize: '0.62rem', color: '#EA580C', marginTop: '2px', textTransform: 'uppercase' }}>Busy</div>
+            </div>
+            <div style={{ background: '#ECFDF5', padding: '8px 10px', borderRadius: '10px', border: '1px solid #D1FAE5', textAlign: 'center' }}>
+              <div style={{ fontSize: '1.2rem', fontWeight: 900, color: '#10B981' }}>{availableCount}</div>
+              <div style={{ fontSize: '0.62rem', color: '#059669', marginTop: '2px', textTransform: 'uppercase' }}>Available</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Unified borderless search bar */}
+        <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(15, 23, 42, 0.06)' }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            background: '#FFFFFF',
+            padding: '10px 14px',
+            borderRadius: '12px',
+            border: isSearchFocused ? '1px solid #06B6D4' : '1px solid #E2E8F0',
+            boxShadow: isSearchFocused ? '0 0 0 3px rgba(6, 182, 212, 0.15)' : 'none',
+            transition: 'all 0.2s ease',
+            position: 'relative'
+          }}>
+            <Search size={15} color={isSearchFocused ? "#06B6D4" : "#94A3B8"} />
+            <input 
+              type="text"
+              placeholder="Search registration or model..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => setIsSearchFocused(false)}
+              className="stations-search-input"
+              style={{
+                background: 'transparent',
+                border: 'none',
+                color: '#0F172A',
+                fontSize: '0.82rem',
+                outline: 'none',
+                width: '100%',
+                paddingRight: searchQuery ? '24px' : '0'
+              }}
+            />
+            {searchQuery && (
+              <button 
+                onClick={() => setSearchQuery('')}
+                style={{ position: 'absolute', right: '12px', background: 'transparent', border: 'none', cursor: 'pointer', color: '#94A3B8', display: 'flex', padding: '2px' }}
+              >
+                <X size={13} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Scrollable List Container */}
+        <div style={{ flex: 1, overflowY: 'auto', padding: '14px 20px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          {loading && (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '160px', color: '#64748B', gap: '10px' }}>
+              <Loader2 size={24} className="spin" />
+              <span style={{ fontSize: '0.8rem' }}>Loading fleet list...</span>
+            </div>
+          )}
+
+          {!loading && filtered.length === 0 && (
+            <div style={{ textAlign: 'center', padding: '32px 10px', color: '#64748B' }}>
+              <Truck size={36} style={{ opacity: 0.15, marginBottom: '10px' }} />
+              <div style={{ fontSize: '0.85rem', fontWeight: 600 }}>No vehicles found</div>
+            </div>
+          )}
+
+          {!loading && filtered.length > 0 && filtered.map(v => {
+            const sc = getStatusCfg(v.status);
+            const isSelected = selectedVehicle?.id === v.id;
+            const hasCoords = parseFloat(v.gps_lat as string) !== 0 && parseFloat(v.gps_lon as string) !== 0;
+
+            return (
+              <div 
+                key={v.id}
+                onClick={() => { if (hasCoords) centerOnVehicle(v); }}
+                style={{
+                  padding: '12px 14px',
+                  borderRadius: '12px',
+                  border: isSelected ? '1px solid #06B6D4' : '1px solid rgba(15, 23, 42, 0.05)',
+                  background: isSelected ? 'rgba(6,182,212,0.03)' : '#FFFFFF',
+                  cursor: hasCoords ? 'pointer' : 'default',
+                  transition: 'all 0.15s ease',
+                  position: 'relative'
+                }}
+                onMouseEnter={e => { if (hasCoords && !isSelected) e.currentTarget.style.border = '1px solid rgba(6,182,212,0.3)'; }}
+                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.border = '1px solid rgba(15, 23, 42, 0.05)'; }}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '6px' }}>
+                  <div>
+                    <div style={{ fontSize: '0.62rem', fontWeight: 900, color: '#64748B', textTransform: 'uppercase' }}>
+                      {v.vehicle_type} UNIT
+                    </div>
+                    <div style={{ fontSize: '0.92rem', fontWeight: 800, color: '#0F172A', marginTop: '2px' }}>
+                      {v.registration_number}
+                    </div>
+                  </div>
+                  <div style={{ padding: '3px 8px', borderRadius: '6px', fontSize: '0.62rem', fontWeight: 900, color: sc.color, background: sc.bg, border: `1px solid ${sc.border}` }}>
+                    {sc.label}
+                  </div>
+                </div>
+
+                <div style={{ fontSize: '0.75rem', color: '#475569' }}>
+                  {v.brand} {v.model}
+                </div>
+
+                {v.activeShift?.staff?.user?.name && (
+                  <div style={{ fontSize: '0.68rem', color: '#64748B', marginTop: '6px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                    <Check size={12} color="#10B981" /> Active Pilot: <strong>{v.activeShift.staff.user.name}</strong>
+                  </div>
+                )}
+
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px', borderTop: '1px solid rgba(15, 23, 42, 0.04)', paddingTop: '8px' }}>
+                  <div style={{ fontSize: '0.65rem', color: '#64748B', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                    <MapPin size={11} color={hasCoords ? '#06B6D4' : '#94A3B8'} />
+                    {hasCoords ? `${parseFloat(v.gps_lat as string).toFixed(4)}, ${parseFloat(v.gps_lon as string).toFixed(4)}` : 'Coords Unavailable'}
+                  </div>
+                  
+                  {hasCoords && (
+                    <button 
+                      onClick={(e) => { e.stopPropagation(); centerOnVehicle(v); }}
+                      style={{ background: 'transparent', border: 'none', color: '#06B6D4', fontSize: '0.68rem', fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '2px' }}
+                    >
+                      <Compass size={11} /> TRACK
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Simulate Movement Button */}
+        <div style={{ padding: '16px 20px', background: '#F8FAFC', borderTop: '1px solid rgba(15, 23, 42, 0.06)', display: 'flex', gap: '8px' }}>
+          <button 
+            onClick={runMoveSimulation}
+            style={{ 
+              flex: 1, 
+              padding: '10px', 
+              background: '#0F172A', 
+              color: '#FFFFFF', 
+              border: 'none', 
+              borderRadius: '10px', 
+              fontWeight: 700, 
+              fontSize: '0.78rem', 
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '6px',
+              boxShadow: '0 2px 8px rgba(15, 23, 42, 0.08)'
+            }}
+          >
+            <Play size={14} /> SIMULATE MOVE (DEBUG)
+          </button>
+          <button 
+            onClick={fetchVehicles}
+            style={{ 
+              padding: '10px', 
+              background: '#FFFFFF', 
+              color: '#475569', 
+              border: '1px solid #CBD5E1', 
+              borderRadius: '10px', 
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <RefreshCw size={14} />
+          </button>
+        </div>
+
+      </div>
+
+      {/* Main Panel: Google Map Canvas */}
+      <div style={{ 
+        flex: 1, 
+        background: '#FFFFFF', 
+        border: '1px solid rgba(15, 23, 42, 0.08)', 
+        borderRadius: '16px', 
+        position: 'relative',
+        boxShadow: '0 4px 20px rgba(15, 23, 42, 0.02)',
+        overflow: 'hidden'
+      }}>
+        {/* Loading Overlay */}
+        {loading && (
+          <div style={{ position: 'absolute', inset: 0, background: '#FFFFFF', zIndex: 10, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '14px' }}>
+            <Loader2 size={36} className="spin" color="#06B6D4" />
+            <h3 style={{ fontSize: '1.05rem', fontWeight: 800, color: '#0F172A', margin: 0 }}>Initializing Google Maps...</h3>
+            <p style={{ fontSize: '0.8rem', color: '#64748B', margin: 0 }}>Establishing secure connection to Dispatch Gateway</p>
+          </div>
+        )}
+
+        {/* Map div container */}
+        <div 
+          ref={mapContainerRef} 
+          style={{ width: '100%', height: '100%' }} 
+        />
+        
+        {/* Dynamic Float Controls */}
+        <div style={{ position: 'absolute', top: '16px', left: '16px', zIndex: 5, background: 'rgba(15, 23, 42, 0.95)', padding: '10px 14px', borderRadius: '10px', color: '#FFFFFF', fontSize: '0.72rem', display: 'flex', alignItems: 'center', gap: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.2)', border: '1px solid rgba(255,255,255,0.08)' }}>
+          <Activity size={14} color="#06B6D4" style={{ animation: 'pulse 1.5s infinite' }} />
+          <span>Real-time Telemetry Active • Channel: <strong>fleet:location_updated</strong></span>
+        </div>
+
+      </div>
+
+      <style>{`
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .spin {
+          animation: spin 1s linear infinite;
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.5; transform: scale(0.92); }
+        }
+      `}</style>
+    </div>
+  );
+};