Skip to main content

​
Overview

The Fleet Dashboard (/fleet) provides a unified real-time view of all fleet operations including tractors, trailers, and drivers. It is the main entry point for the Fleet Management module.
Route: /fleetRepository: Hemut-Prod (Next.js frontend)

​
Key Features

KPI Cards

Real-time metrics for tractor utilization, trailer utilization, active drivers, and critical alerts

Interactive Map

Live vehicle and trailer locations with Leaflet maps, multiple view modes (Tractors, Trailers, Drivers)

Fleet Panels

Quick access to active tractors, trailer pool, and driver status with filtering and search

Real-time Updates

SSE (Server-Sent Events) for live data streaming without page refresh

​
Architecture

┌─────────────────────────────────────────────┐
│                         pages/fleet.tsx                                │
│                     (Next.js Page Component)                           │
└─────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────┐
│                     FleetManagement.tsx                                │
│              (Navigation Wrapper + Route Handler)                      │
└─────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────┐
│                  UnifiedFleetDashboard.tsx                             │
│                   (Main Dashboard Component)                           │
│  ┌──────────┬────────────┬────────────────┐   │
│  │ KPI Cards      │ Search/Filters    │ Tabs (Dashboard, Alerts) │   │
│  └──────────┴────────────┴────────────────┘   │
│  ┌──────────────────┬─────────────────────┐   │
│  │        Fleet Map            │      Fleet Summary Panel         │   │
│  │  ┌──────────────┐  │    - Active Tractors List       │   │
│  │  │   LiveVehicleMap.tsx │   │ - Trailer Pool List             │   │
│  │  │   LiveTrailerMap.tsx │   │ - Active Drivers List           │   │
│  │  └──────────────┘  │                                 │   │
│  └──────────────────┴─────────────────────┘   │
└─────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────┐
│                   useUnifiedFleetData.ts                               │
│                      (Data Hook Layer)                                 │
│  - Fetches from REST APIs                                              │
│  - Manages SSE connections                                             │
│  - Computes statistics                                                 │
└─────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────┐
│                   Tracking Backend APIs                                │
│  GET /api/drivers/current    |  GET /locations/current                 │
│  GET /api/trailers/current   |  GET /api/movements                     │
│  SSE /stream/locations       |  SSE /api/trailers/stream               │
└─────────────────────────────────────────────┘

​
API Endpoints

​
REST Endpoints

MethodEndpointDescription
GET/api/drivers/currentFetch all current drivers
GET/locations/currentFetch vehicle/tractor locations
GET/api/trailers/currentFetch all trailer data
GET/api/movements?limit=500Fetch movements for vehicle-load associations
GET/api/orders/by-ids?ids=...Fetch customer names for orders

​
SSE Streams (Real-time)

EndpointEvent TypeDescription
/stream/locationslocation_updateReal-time vehicle location updates
/api/trailers/streamlocation_updateReal-time trailer location updates
All endpoints are prefixed with the Tracking Backend URL (NEXT_PUBLIC_TRACKING_BACKEND_URL).

​
File Structure

CategoryFilesDescription
Pagespages/fleet.tsxNext.js page component
Components7 filesUI components for dashboard, maps, status indicators
Hooks2 filesData fetching and SSE management
Types3 filesTypeScript type definitions

Pages

Next.js page components

Components

React UI components

Hooks

Custom React hooks

Types

TypeScript definitions
Pages (1 file)Components (7 files)Hooks (2 files)Types (3 files)

​
Data Flow

​
Initial Load

  1. Page Mount: pages/fleet.tsx renders FleetManagement
  2. Route Detection: FleetManagement detects /fleet path, renders UnifiedFleetDashboard
  3. Hook Initialization: useUnifiedFleetData hook initializes
  4. Parallel REST Calls: Fetches drivers, vehicles, and trailers concurrently
  5. SSE Connection: Establishes SSE connections for real-time updates
  6. Render: Dashboard displays with initial data

​
Real-time Updates

  1. SSE Event: Backend sends location_update event
  2. Hook Processing: useUnifiedFleetData updates state
  3. Statistics Recalculation: useMemo recomputes KPIs
  4. Component Re-render: Map and panels update automatically

​
Statistics Computed

The dashboard displays real-time KPIs computed from the fleet data:
KPICalculation
Tractor Utilization(vehicles with drivers / total vehicles) × 100
Trailer Utilization(moving trailers / total trailers) × 100
Available TrailersCount of trailers with speed < 5 mph
Active DriversCount of drivers with status = “active”
Critical AlertsCount of fault codes + HOS warnings