web-admin — CONTEXT.md
Angular 20 admin dashboard for municipalities and transport syndicates. Tenant/line/route/driver/vehicle management, real-time bus monitoring, and dispatch. For global conventions (branding, Angular patterns, GIS overview), see
/CLAUDE.md.
1. Routes (25 total)
| Path | Component | Roles |
|---|---|---|
/login |
LoginComponent |
Public |
/dashboard |
DashboardComponent (lazy) |
SUPER_ADMIN, ADMIN |
/tenants |
TenantListComponent |
SUPER_ADMIN |
/register-tenant |
TenantFormComponent |
SUPER_ADMIN |
/passengers |
PassengerListComponent |
SUPER_ADMIN |
/tenant/:id |
TenantDetailsComponent |
SUPER_ADMIN, ADMIN |
/tenant/:id/lines |
LinesDetailComponent |
SUPER_ADMIN, ADMIN |
/tenant/:id/lines/new |
LineFormComponent |
SUPER_ADMIN, ADMIN |
/line/:id |
LineDetailComponent |
SUPER_ADMIN, ADMIN |
/line/:id/route/new |
RouteFormComponent |
SUPER_ADMIN, ADMIN |
/line/:id/route/:routeId/edit |
RouteFormComponent |
SUPER_ADMIN, ADMIN |
/line/:id/edit-geometry |
LineGeometryEditorComponent |
SUPER_ADMIN, ADMIN |
/lines/:lineId/vehicles |
VehicleListComponent |
Any authenticated |
/vehicles |
VehicleListComponent |
SUPER_ADMIN, ADMIN |
/vehicles/edit/:id |
RegisterVehicleComponent |
SUPER_ADMIN, ADMIN |
/vehicles/:id |
VehicleDetailComponent |
SUPER_ADMIN, ADMIN |
/register-vehicle |
RegisterVehicleComponent |
SUPER_ADMIN, ADMIN |
/drivers |
DriverListComponent |
SUPER_ADMIN, ADMIN |
/drivers/:id |
DriverDetailComponent |
SUPER_ADMIN, ADMIN |
/drivers/:id/edit |
RegisterDriverComponent |
SUPER_ADMIN, ADMIN |
/register-driver |
RegisterDriverComponent |
SUPER_ADMIN, ADMIN |
/dispatch |
DispatchComponent (lazy) |
SUPER_ADMIN, ADMIN |
/map |
BusMapComponent |
Any authenticated |
/ |
redirectGuard |
— |
** |
Redirects to / |
— |
Guards: authGuard (JWT validation), roleGuard (checks route data.roles), redirectGuard (root → dashboard or login).
2. Two-Step Line Creation Flow
- Step 1 —
/tenant/:id/lines/new→LineFormComponent: - Admin draws path on Leaflet map by clicking waypoints
- Each segment snapped to roads via OSRM (driving profile)
- Result saved as
Line.polyline(Google Encoded Polyline, precision 5) -
On save → navigates to Step 2
-
Step 2 —
/line/:id/route/new→RouteFormComponent: - Shows
Line.polylineas background track on map - Admin clicks to place checkpoints (auto-snapped to track)
- Saves Route with ordered Checkpoints (PostGIS points)
Editing
/line/:id/edit-geometry→LineGeometryEditorComponent: redraw the polyline/line/:id/route/:routeId/edit→RouteFormComponent: edit checkpoint positions
3. OSRM Usage (Driving Profile)
OsrmRoutingService at src/app/services/osrm-routing.service.ts:
- Called from LineFormComponent when admin draws line segments
- Profile: driving (not foot)
- URL: https://router.project-osrm.org/route/v1/driving/{lng,lat};{lng,lat}?overview=full&geometries=polyline
- Called from browser — never proxied through the backend
4. Key Components
| Component | Directory | Purpose |
|---|---|---|
LineFormComponent |
components/line-form/ |
Step 1: draw line geometry |
RouteFormComponent |
components/route-form/ |
Step 2: place checkpoints |
LineDetailComponent |
components/line-detail/ |
Line detail + routes list |
LineGeometryEditorComponent |
components/line-geometry-editor/ |
Edit existing line polyline |
LinesDetailComponent |
components/lines-detail/ |
Lines list for a tenant |
BusMapComponent |
components/bus-map/ |
Real-time bus monitoring map |
DashboardComponent |
dashboard/ |
Operations dashboard (lazy) |
DispatchComponent |
dispatch/ |
Trip dispatch management (lazy) |
TripDetailsComponent |
components/trip-details/ |
Trip detail modal |
PassengerListComponent |
components/passengers/ |
Passenger management |
ConfirmModalComponent |
components/shared/confirm-modal/ |
Reusable confirm dialog |
ToastComponent |
components/shared/toast/ |
Toast notifications |
5. Services
| Service | Path | Purpose |
|---|---|---|
AuthService |
services/auth.service.ts |
JWT login, token management |
BusService |
services/bus.service.ts |
Real-time bus data (MonitoringData) |
OsrmRoutingService |
services/osrm-routing.service.ts |
OSRM road snapping (driving profile) |
SocketService |
services/socket.service.ts |
Socket.IO connection |
ToastService |
services/toast.service.ts |
Toast notification management |
AnalyticsService |
core/services/analytics.service.ts |
Dashboard analytics |
FilterDataService |
core/services/filter-data.service.ts |
List filtering logic |
PermissionService |
core/services/permission.service.ts |
Role-based UI permissions |
TripsService |
core/services/trips.service.ts |
Trip CRUD operations |
Guards & Interceptors
core/guards/:auth.guard.ts,role.guard.ts,redirect.guard.tscore/interceptors/:auth.interceptor.ts(JWT headers),error.interceptor.ts(global error handling)
6. Dev Workflow
cd apps/web-admin
npm install
npm start # Dev server at http://localhost:4200
npm run build:prod # Production build → dist/web-admin/browser/
npm run build:dev # Dev build
Environment config via set-env.cjs (same pattern as other apps):
- npm run config:local / config:dev / config:prod
7. Key File Paths
| What | Path |
|---|---|
| Routes | src/app/app.routes.ts |
| Polyline utils | src/app/utils/polyline.ts |
| OSRM service | src/app/services/osrm-routing.service.ts |
| Tailwind config | tailwind.config.js |
| Global styles | src/styles.css |
| Components | src/app/components/ |
| Services | src/app/services/ + src/app/core/services/ |
| Guards | src/app/core/guards/ |
| Interceptors | src/app/core/interceptors/ |
Last updated: 2026-06-05.