Components

interface FleetManagementProps {
  onNavigateToTracking?: (loadId: string) => void;
  onNavigateToTractor?: (tractorId: string) => void;
}

const renderContent = () => {
  switch (currentPath) {
    case '/fleet/drivers':
      return <DriverManagement ... />;
    case '/fleet/tractors':
      return <TractorManagement ... />;
    case '/fleet/trailers':
      return <TrailerManagement />;
    case '/fleet/pta':
      return <PredictedTimeAvailable />;
    case '/fleet':
    default:
      return <UnifiedFleetDashboard />;
  }
};

const performAPISearch = useCallback(async (query: string) => {
  // Only search if query is alphanumeric and >= 3 chars
  if (/^[a-zA-Z0-9\-]+$/.test(query) && query.length >= 3) {
    // Call /api/movements/order/{query}
    // Extract driver_ids, vehicle_ids, trailer_ids from result
    // Set searchResultIds for filtering
  }
}, [data.vehicles]);

┌─────────────────────────────────────────────┐
│ Header: Title + Connection Status + Export + Refresh                   │
├─────────────────────────────────────────────┤
│ KPI Cards (6 columns)                                                  │
│ [Tractor Util] [Trailer Util] [Available] [Active] [Coming] [Alerts]   │
├─────────────────────────────────────────────┤
│ Search Bar                                                             │
├─────────────────────────────────────────────┤
│ Tabs: [Dashboard] [Alerts]                                             │
├─────────────────────────────────────────────┤
│ ┌────────────────────┐ ┌───────────────────┐ │
│ │ Fleet Map (2/3 width)          │ │ Fleet Panel (1/3 width)       │ │
│ │ - View toggle: Tractors/       │ │ - Metric filter buttons       │ │
│ │   Trailers/Drivers             │ │ - Scrollable item list        │ │
│ │ - Dispatcher filter            │ │ - Item cards with status      │ │
│ │ - LiveVehicleMap or            │ │                               │ │
│ │   LiveTrailerMap               │ │                               │ │
│ └────────────────────┘ └───────────────────┘ │
└─────────────────────────────────────────────┘

interface LiveVehicleMapProps {
  backendUrl?: string;
  className?: string;
  filteredVehicles?: VehicleLocation[];
  driverIdToNameMap?: Map<string, string>;
  vehicleToLoadMap?: Map<string, VehicleActiveLoad>;
}

[Total Vehicles] [Moving (Green)] [Stopped (Red)] [Connection Status]

interface LiveTrailerMapProps {
  trailers: TrailerLocation[];
  className?: string;
}

const clusterGroup = new MarkerClusterGroup({
  maxClusterRadius: 80,
  disableClusteringAtZoom: 15,
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true,
  chunkedLoading: true,
  chunkDelay: 200,
  iconCreateFunction: // Custom cluster icon
});

LiveTrailerMap
└── MapContainer
    ├── TileLayer (OpenStreetMap)
    └── MarkerClusterLayer
        └── MarkerClusterLayerInner
            └── MarkerClusterContent (manages cluster group)

interface ConnectionStatusIndicatorProps {
  connectionState: SSEConnectionState;
  lastUpdate: string | null;
}

┌─────────────────────────────────────────────┐
│  [Icon] Label     Error message (if any)                               │
│  └─ Badge ┘                                                          │
└─────────────────────────────────────────────┘

interface ConnectionStatusProps {
  connectionState: ConnectionState;
  lastUpdate: string | null;
  cacheStatus: 'hit' | 'miss' | null;
  onReconnect?: () => void;
}

const formatLastUpdate = () => {
  const diffSec = Math.floor((now - date) / 1000);
  
  if (diffSec < 60) return `${diffSec}s ago`;
  if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
  return date.toLocaleTimeString();
};

interface MapLegendProps {
  className?: string;
  defaultExpanded?: boolean;
}

MapLegend
├── Header (always visible)
│   ├── Info icon
│   ├── "Map Legend" title
│   └── Expand/Collapse chevron
└── Expandable Content (when expanded)
    ├── Timing Status Section
    │   └── 4 color-coded items
    ├── Motion Status Section
    │   └── 2 border-style items
    └── Example Section
        └── Combined status indicator (Late + Idle)

const [isExpanded, setIsExpanded] = useState(defaultExpanded);