# wael-jaber/ev-fleet-telemetry-dashboard architecture

> Architecture diagram of the GitHub repository wael-jaber/ev-fleet-telemetry-dashboard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/wael-jaber/ev-fleet-telemetry-dashboard
- Repository: https://github.com/wael-jaber/ev-fleet-telemetry-dashboard

## Overview

EV Fleet Telemetry Dashboard simulates fleet telemetry on the backend, streams updates over WebSockets, and presents live fleet status, analytics, and locations in a customizable React dashboard. The main path is simulation → telemetry broadcast → frontend state → dashboard views; connection status and notifications are a supporting path. Backend simulation internals and several UI capabilities are represented at the directory level because their implementations were not sampled.

Main entry points: [`frontend/src/containers/Dashboard/Dashboard.tsx`](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Dashboard/Dashboard.tsx) (Dashboard shell), [`frontend/src/websocket/WebSocketHandler.tsx`](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/websocket/WebSocketHandler.tsx) (WebSocket handler), [`frontend/src/App.tsx`](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/App.tsx) (React application), [`backend/src/websocket/WebSocketManager.ts`](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/websocket/WebSocketManager.ts) (WebSocket manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Backend simulation"]
  node_server["HTTP server<br/>[server.ts]"]
  node_sim["Simulation manager<br/>[simManager.ts]"]
  node_fleet["Fleet simulator<br/>[fleet.ts]"]
  node_vehicle["Vehicle model<br/>[vehicle.ts]"]
  node_factory["Vehicle factory<br/>[vehicleFactory.ts]"]
  node_routes["Route data<br/>[routes.ts]"]
end

subgraph group_transport["Telemetry transport"]
  node_wsmanager["WebSocket manager"]
  node_socket(("WebSocket connection"))
  node_handler["WebSocket handler"]
  node_types["Shared message types<br/>[index.ts]"]
end

subgraph group_frontend["Frontend state"]
  node_store["Redux store<br/>[index.ts]"]
  node_telemetry["Telemetry state<br/>[telemetrySlice.ts]"]
  node_config["Connection state<br/>[configSlice.ts]"]
  node_notifications["Notifications<br/>[useNotification.ts]"]
end

subgraph group_dashboard["Dashboard views"]
  node_app["React application<br/>[App.tsx]"]
  node_dashboard["Dashboard shell<br/>[Dashboard.tsx]"]
  node_overview["Fleet overview<br/>[FleetOverview.tsx]"]
  node_vehicles["Vehicle list<br/>[VehicleList.tsx]"]
  node_map["Live map<br/>[MapPanel.tsx]"]
  node_battery["Battery analytics<br/>[BatteryPanel.tsx]"]
  node_layout["Custom panel layout<br/>[DashboardGrid.tsx]"]
  node_theme["Theme controls<br/>[ThemeProvider.tsx]"]
  node_language["Language controls"]
end

node_operator(("Fleet operator"))

node_operator -->|"views"| node_app
node_server -->|"creates"| node_wsmanager
node_wsmanager -->|"starts"| node_sim
node_sim -->|"starts updates"| node_fleet
node_fleet -->|"collects telemetry"| node_vehicle
node_fleet -->|"creates vehicles"| node_factory
node_factory -->|"uses routes"| node_routes
node_sim -->|"dispatches telemetry"| node_wsmanager
node_wsmanager -->|"broadcasts updates"| node_socket
node_socket -->|"delivers messages"| node_handler
node_handler -->|"dispatches updates"| node_telemetry
node_handler -->|"updates status"| node_config
node_handler -->|"reports connection events"| node_notifications
node_app -->|"mounts"| node_handler
node_app -->|"renders"| node_dashboard
node_app -->|"provides state"| node_store
node_dashboard -->|"presents fleet stats"| node_overview
node_dashboard -->|"shows vehicles"| node_vehicles
node_dashboard -->|"shows locations"| node_map
node_dashboard -->|"shows battery analytics"| node_battery
node_dashboard -->|"arranges panels"| node_layout
node_dashboard -->|"supports themes"| node_theme
node_dashboard -->|"supports languages"| node_language
node_store -->|"holds state"| node_telemetry

click node_server "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/server/server.ts"
click node_sim "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/simulationManager/simManager.ts"
click node_fleet "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/fleet/fleet.ts"
click node_vehicle "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/vehicle/vehicle.ts"
click node_factory "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/vehicleFactory/vehicleFactory.ts"
click node_routes "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/vehicleFactory/routes.ts"
click node_wsmanager "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/websocket/WebSocketManager.ts"
click node_handler "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/websocket/WebSocketHandler.tsx"
click node_types "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/shared/types/index.ts"
click node_store "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/redux/store/index.ts"
click node_telemetry "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/redux/store/slices/telemetrySlice/telemetrySlice.ts"
click node_config "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/redux/store/slices/configSlice.ts"
click node_notifications "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/hooks/useNotification.ts"
click node_app "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/App.tsx"
click node_dashboard "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Dashboard/Dashboard.tsx"
click node_overview "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/FleetOverview/FleetOverview.tsx"
click node_vehicles "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/VehicleList/VehicleList.tsx"
click node_map "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Panels/MapPanel/MapPanel.tsx"
click node_battery "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Panels/BatteryPanel/BatteryPanel.tsx"
click node_layout "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/DashboardGrid/DashboardGrid.tsx"
click node_theme "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/theme/ThemeProvider.tsx"
click node_language "https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/LanguageSwitcher/LanguageSwitcher.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_server,node_sim,node_fleet,node_vehicle,node_factory,node_routes toneBlue
class node_wsmanager,node_socket,node_handler,node_types toneAmber
class node_store,node_telemetry,node_config,node_notifications toneMint
class node_app,node_dashboard,node_overview,node_vehicles,node_map,node_battery,node_layout,node_theme,node_language toneRose
class node_operator toneIndigo
```

## Components

### Backend simulation

- [HTTP server](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/server/server.ts): `backend/src/server/server.ts`
- [Simulation manager](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/simulationManager/simManager.ts): `backend/src/simulations/simulationManager/simManager.ts`
- [Fleet simulator](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/fleet/fleet.ts): `backend/src/simulations/fleet/fleet.ts`
- [Vehicle model](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/vehicle/vehicle.ts): `backend/src/simulations/vehicle/vehicle.ts`
- [Vehicle factory](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/vehicleFactory/vehicleFactory.ts): `backend/src/simulations/vehicleFactory/vehicleFactory.ts`
- [Route data](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/simulations/vehicleFactory/routes.ts): `backend/src/simulations/vehicleFactory/routes.ts`

### Telemetry transport

- [WebSocket manager](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/backend/src/websocket/WebSocketManager.ts): `backend/src/websocket/WebSocketManager.ts`
- **WebSocket connection**
- [WebSocket handler](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/websocket/WebSocketHandler.tsx): `frontend/src/websocket/WebSocketHandler.tsx`
- [Shared message types](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/shared/types/index.ts): `shared/types/index.ts`

### Frontend state

- [Redux store](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/redux/store/index.ts): `frontend/src/redux/store/index.ts`
- [Telemetry state](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/redux/store/slices/telemetrySlice/telemetrySlice.ts): `frontend/src/redux/store/slices/telemetrySlice/telemetrySlice.ts`
- [Connection state](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/redux/store/slices/configSlice.ts): `frontend/src/redux/store/slices/configSlice.ts`
- [Notifications](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/hooks/useNotification.ts): `frontend/src/hooks/useNotification.ts`

### Dashboard views

- [React application](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Dashboard shell](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Dashboard/Dashboard.tsx): `frontend/src/containers/Dashboard/Dashboard.tsx`
- [Fleet overview](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/FleetOverview/FleetOverview.tsx): `frontend/src/containers/FleetOverview/FleetOverview.tsx`
- [Vehicle list](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/VehicleList/VehicleList.tsx): `frontend/src/containers/VehicleList/VehicleList.tsx`
- [Live map](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Panels/MapPanel/MapPanel.tsx): `frontend/src/containers/Panels/MapPanel/MapPanel.tsx`
- [Battery analytics](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/Panels/BatteryPanel/BatteryPanel.tsx): `frontend/src/containers/Panels/BatteryPanel/BatteryPanel.tsx`
- [Custom panel layout](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/DashboardGrid/DashboardGrid.tsx): `frontend/src/containers/DashboardGrid/DashboardGrid.tsx`
- [Theme controls](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/theme/ThemeProvider.tsx): `frontend/src/theme/ThemeProvider.tsx`
- [Language controls](https://github.com/wael-jaber/ev-fleet-telemetry-dashboard/blob/develop/frontend/src/containers/LanguageSwitcher/LanguageSwitcher.tsx): `frontend/src/containers/LanguageSwitcher/LanguageSwitcher.tsx`

### Other components

- **Fleet operator**

## Connections

- Fleet operator → React application: views
- HTTP server → WebSocket manager: creates
- WebSocket manager → Simulation manager: starts
- Simulation manager → Fleet simulator: starts updates
- Fleet simulator → Vehicle model: collects telemetry
- Fleet simulator → Vehicle factory: creates vehicles
- Vehicle factory → Route data: uses routes
- Simulation manager → WebSocket manager: dispatches telemetry
- WebSocket manager → WebSocket connection: broadcasts updates
- WebSocket connection → WebSocket handler: delivers messages
- WebSocket handler → Telemetry state: dispatches updates
- WebSocket handler → Connection state: updates status
- WebSocket handler → Notifications: reports connection events
- React application → WebSocket handler: mounts
- React application → Dashboard shell: renders
- React application → Redux store: provides state
- Dashboard shell → Fleet overview: presents fleet stats
- Dashboard shell → Vehicle list: shows vehicles
- Dashboard shell → Live map: shows locations
- Dashboard shell → Battery analytics: shows battery analytics
- Dashboard shell → Custom panel layout: arranges panels
- Dashboard shell → Theme controls: supports themes
- Dashboard shell → Language controls: supports languages
- Redux store → Telemetry state: holds state