Frontend Developer Guide

Frontend Codebase Scope

Root path: web-portal/

Primary stack:

  • React 18
  • Vite
  • Redux Toolkit
  • Material UI (MUI)
  • React Router
  • OIDC (react-oidc-context)

Bootstrap Flow

Entry file: src/index.jsx

Key provider chain:

  1. Redux Provider
  2. Localization provider
  3. Theming providers (StyledEngineProvider, AppThemeProvider)
  4. OIDC AuthProvider
  5. ServerProvider
  6. Router provider (Navigation root)

Core Application Shell

src/App.jsx wires shared shell components:

  • SocketController (live updates)
  • CachingController
  • route Outlet
  • global snackbar notifications
  • mobile bottom navigation fallback

Module Footprint (Approx JS/TS Files)

Module File Count
common 75
device 45
journeys 44
settings 43
inventory 37
map 32
cargo 27
routes 25
alerts 23
reports 21

Routing Model

Main route composition is in src/Navigation.jsx.

Patterns used:

  • Public auth pages (/login, /register, /reset-password, /change-server)
  • Authenticated pages wrapped by SessionManager
  • Role-specific route protection via requiredRole prop on wrappers

State and Data Access

Redux slices

Located in src/store/ and include:

  • session, devices, journeys, cargo, alerts, reports, etc.

API calls

  • API wrapper in src/api/index.js
  • Axios instance/interceptors in src/api/axios.js
  • Bearer token injection from Oauth/authUtils

Auth lifecycle

SessionManager:

  • checks token presence/auth state
  • loads user roles from token claims
  • enforces role gate for protected routes
  • redirects unauthorized users

MainNavbar dynamically filters menu links based on roles.

Top-level navigation categories:

  • Home
  • Cargo
  • Routes
  • Journeys
  • Inventory
  • Devices
  • Alerts
  • Reports

Each category opens a module-specific sidebar with task pages (lists, create/edit forms, details, analytics).

Development Notes

  • Many pages expect backend data; without API they render empty-state shells
  • Runtime config can come from both env vars and window.RUNTIME_CONFIG
  • Route modules often save draft form state through /drafts/... endpoints