# tejas-rv/apollo-frontend architecture

> Architecture diagram of the GitHub repository tejas-rv/apollo-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tejas-rv/apollo-frontend
- Repository: https://github.com/tejas-rv/apollo-frontend

## Overview

Apollo Elevators is a React frontend for public enquiries and admin and engineer operations, backed by a Spring Boot API. The main workflow is role-based entry, then customer/contract administration or engineer service work, with reports and operational data exchanged through a centralized API client. The tree also contains a smaller root-level frontend alongside the fuller `apollo-frontend` application; both are represented. Links reflect the README and indexed imports, not inspection of every screen or API method.

Main entry points: [`apollo-frontend/src/App.jsx`](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/App.jsx) (Public and role routes), [`apollo-frontend/src/services/api.js`](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/services/api.js) (API client), [`apollo-frontend/src/pages/CustomerForm.jsx`](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/CustomerForm.jsx) (Customer and lift records), [`apollo-frontend/src/pages/Bills.jsx`](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Bills.jsx) (Bills and contracts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry and access"]
  node_fullapp["Public and role routes<br/>[App.jsx]"]
  node_public["Home and contact"]
  node_login["Login<br/>[Login.jsx]"]
  node_rootapp["Root frontend routes<br/>[App.jsx]"]
end

subgraph group_admin["Admin operations"]
  node_admin_dash["Admin dashboard<br/>[Dashboard.jsx]"]
  node_customers["Customer and lift records<br/>[CustomerForm.jsx]"]
  node_customer_detail["Customer details"]
  node_billing["Bills and contracts<br/>[Bills.jsx]"]
  node_enquiries["Enquiries and quotations<br/>[Enquiries.jsx]"]
  node_serviceability["Coverage and allocation<br/>[Serviceability.jsx]"]
  node_visits["Service visits<br/>[Services.jsx]"]
  node_workorders["Work orders<br/>[WorkOrders.jsx]"]
  node_users["Users and security<br/>[Users.jsx]"]
  node_notifications["Notifications<br/>[Notifications.jsx]"]
  node_rootpages["Root customer and settings screens"]
end

subgraph group_field["Engineer service"]
  node_engineer_dash["Engineer dashboard"]
  node_engineer_customers["Engineer customers"]
  node_engineer_detail["Engineer customer detail"]
  node_reports["Service reports"]
end

subgraph group_shared["Shared services"]
  node_api["API client<br/>[api.js]"]
  node_validation["Form validation<br/>[validation.js]"]
  node_amc["Contract calculations<br/>[amc.js]"]
  node_rootapi["Root API client<br/>[api.js]"]
  node_auth[("Session storage<br/>[auth.js]")]
end

node_user(("Visitor or staff"))
node_backend{{"Spring Boot API"}}

node_user -->|"uses"| node_fullapp
node_fullapp -->|"routes to"| node_public
node_fullapp -->|"routes to"| node_login
node_fullapp -->|"routes to"| node_admin_dash
node_fullapp -->|"routes to"| node_customers
node_fullapp -->|"routes to"| node_customer_detail
node_fullapp -->|"routes to"| node_billing
node_fullapp -->|"routes to"| node_enquiries
node_fullapp -->|"routes to"| node_serviceability
node_fullapp -->|"routes to"| node_visits
node_fullapp -->|"routes to"| node_workorders
node_fullapp -->|"routes to"| node_users
node_fullapp -->|"routes to"| node_notifications
node_fullapp -->|"routes to"| node_engineer_dash
node_fullapp -->|"routes to"| node_engineer_customers
node_fullapp -->|"routes to"| node_engineer_detail
node_fullapp -->|"routes to"| node_reports
node_login -->|"authenticates via"| node_api
node_admin_dash -->|"loads data via"| node_api
node_customers -->|"manages records via"| node_api
node_customer_detail -->|"loads details via"| node_api
node_billing -->|"manages billing via"| node_api
node_enquiries -->|"uses"| node_api
node_serviceability -->|"manages coverage via"| node_api
node_visits -->|"manages visits via"| node_api
node_workorders -->|"uses"| node_api
node_users -->|"manages users via"| node_api
node_notifications -->|"uses"| node_api
node_engineer_dash -->|"loads assignments via"| node_api
node_engineer_customers -->|"searches via"| node_api
node_engineer_detail -->|"loads customer via"| node_api
node_reports -->|"submits reports via"| node_api
node_customers -->|"validates with"| node_validation
node_billing -->|"validates with"| node_validation
node_customers -->|"derives contract data"| node_amc
node_billing -->|"uses contract helpers"| node_amc
node_visits -->|"uses date helper"| node_amc
node_api -->|"requests data"| node_backend
node_user -->|"uses"| node_rootapp
node_rootapp -->|"routes to"| node_rootpages
node_rootpages -->|"requests data"| node_rootapi
node_rootapp -->|"loads user via"| node_rootapi
node_rootapi -->|"reads session from"| node_auth
node_rootapi -->|"requests data"| node_backend

click node_fullapp "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/App.jsx"
click node_public "https://github.com/tejas-rv/apollo-frontend/tree/main/apollo-frontend/src/pages"
click node_login "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Login.jsx"
click node_admin_dash "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Dashboard.jsx"
click node_customers "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/CustomerForm.jsx"
click node_customer_detail "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/CustomerDetails.jsx"
click node_billing "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Bills.jsx"
click node_enquiries "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Enquiries.jsx"
click node_serviceability "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Serviceability.jsx"
click node_visits "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Services.jsx"
click node_workorders "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/WorkOrders.jsx"
click node_users "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Users.jsx"
click node_notifications "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Notifications.jsx"
click node_engineer_dash "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/EngineerDashboard.jsx"
click node_engineer_customers "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/EngineerCustomers.jsx"
click node_engineer_detail "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/EngineerCustomerDetail.jsx"
click node_reports "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/ServiceReportForm.jsx"
click node_api "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/services/api.js"
click node_validation "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/utils/validation.js"
click node_amc "https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/utils/amc.js"
click node_rootapp "https://github.com/tejas-rv/apollo-frontend/blob/main/src/App.jsx"
click node_rootpages "https://github.com/tejas-rv/apollo-frontend/tree/main/src/pages"
click node_rootapi "https://github.com/tejas-rv/apollo-frontend/blob/main/src/services/api.js"
click node_auth "https://github.com/tejas-rv/apollo-frontend/blob/main/src/services/auth.js"

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_fullapp,node_public,node_login,node_rootapp toneBlue
class node_admin_dash,node_customers,node_customer_detail,node_billing,node_enquiries,node_serviceability,node_visits,node_workorders,node_users,node_notifications,node_rootpages toneAmber
class node_engineer_dash,node_engineer_customers,node_engineer_detail,node_reports,node_backend toneMint
class node_api,node_validation,node_amc,node_rootapi,node_auth toneRose
class node_user toneIndigo
```

## Components

### App entry and access

- [Public and role routes](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/App.jsx): `apollo-frontend/src/App.jsx`
- [Home and contact](https://github.com/tejas-rv/apollo-frontend/tree/main/apollo-frontend/src/pages): `apollo-frontend/src/pages`
- [Login](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Login.jsx): `apollo-frontend/src/pages/Login.jsx`
- [Root frontend routes](https://github.com/tejas-rv/apollo-frontend/blob/main/src/App.jsx): `src/App.jsx`

### Admin operations

- [Admin dashboard](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Dashboard.jsx): `apollo-frontend/src/pages/Dashboard.jsx`
- [Customer and lift records](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/CustomerForm.jsx): `apollo-frontend/src/pages/CustomerForm.jsx`
- [Customer details](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/CustomerDetails.jsx): `apollo-frontend/src/pages/CustomerDetails.jsx`
- [Bills and contracts](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Bills.jsx): `apollo-frontend/src/pages/Bills.jsx`
- [Enquiries and quotations](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Enquiries.jsx): `apollo-frontend/src/pages/Enquiries.jsx`
- [Coverage and allocation](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Serviceability.jsx): `apollo-frontend/src/pages/Serviceability.jsx`
- [Service visits](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Services.jsx): `apollo-frontend/src/pages/Services.jsx`
- [Work orders](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/WorkOrders.jsx): `apollo-frontend/src/pages/WorkOrders.jsx`
- [Users and security](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Users.jsx): `apollo-frontend/src/pages/Users.jsx`
- [Notifications](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/Notifications.jsx): `apollo-frontend/src/pages/Notifications.jsx`
- [Root customer and settings screens](https://github.com/tejas-rv/apollo-frontend/tree/main/src/pages): `src/pages`

### Engineer service

- [Engineer dashboard](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/EngineerDashboard.jsx): `apollo-frontend/src/pages/engineer/EngineerDashboard.jsx`
- [Engineer customers](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/EngineerCustomers.jsx): `apollo-frontend/src/pages/engineer/EngineerCustomers.jsx`
- [Engineer customer detail](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/EngineerCustomerDetail.jsx): `apollo-frontend/src/pages/engineer/EngineerCustomerDetail.jsx`
- [Service reports](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/pages/engineer/ServiceReportForm.jsx): `apollo-frontend/src/pages/engineer/ServiceReportForm.jsx`

### Shared services

- [API client](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/services/api.js): `apollo-frontend/src/services/api.js`
- [Form validation](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/utils/validation.js): `apollo-frontend/src/utils/validation.js`
- [Contract calculations](https://github.com/tejas-rv/apollo-frontend/blob/main/apollo-frontend/src/utils/amc.js): `apollo-frontend/src/utils/amc.js`
- [Root API client](https://github.com/tejas-rv/apollo-frontend/blob/main/src/services/api.js): `src/services/api.js`
- [Session storage](https://github.com/tejas-rv/apollo-frontend/blob/main/src/services/auth.js): `src/services/auth.js`

### Other components

- **Visitor or staff**
- **Spring Boot API**

## Connections

- Visitor or staff → Public and role routes: uses (evidence: `README.md`)
- Public and role routes → Home and contact: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Login: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Admin dashboard: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Customer and lift records: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Customer details: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Bills and contracts: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Enquiries and quotations: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Coverage and allocation: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Service visits: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Work orders: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Users and security: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Notifications: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Engineer dashboard: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Engineer customers: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Engineer customer detail: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Public and role routes → Service reports: routes to (evidence: `apollo-frontend/src/App.jsx`)
- Login → API client: authenticates via (evidence: `apollo-frontend/src/pages/Login.jsx`)
- Admin dashboard → API client: loads data via (evidence: `apollo-frontend/src/pages/Dashboard.jsx`)
- Customer and lift records → API client: manages records via (evidence: `apollo-frontend/src/pages/CustomerForm.jsx`)
- Customer details → API client: loads details via (evidence: `apollo-frontend/src/pages/CustomerDetails.jsx`)
- Bills and contracts → API client: manages billing via (evidence: `apollo-frontend/src/pages/Bills.jsx`)
- Enquiries and quotations → API client: uses (evidence: `apollo-frontend/src/pages/Enquiries.jsx`)
- Coverage and allocation → API client: manages coverage via (evidence: `apollo-frontend/src/pages/Serviceability.jsx`)
- Service visits → API client: manages visits via (evidence: `apollo-frontend/src/pages/Services.jsx`)
- Work orders → API client: uses (evidence: `apollo-frontend/src/pages/WorkOrders.jsx`)
- Users and security → API client: manages users via (evidence: `apollo-frontend/src/pages/Users.jsx`)
- Notifications → API client: uses
- Engineer dashboard → API client: loads assignments via (evidence: `apollo-frontend/src/pages/engineer/EngineerDashboard.jsx`)
- Engineer customers → API client: searches via (evidence: `apollo-frontend/src/pages/engineer/EngineerCustomers.jsx`)
- Engineer customer detail → API client: loads customer via (evidence: `apollo-frontend/src/pages/engineer/EngineerCustomerDetail.jsx`)
- Service reports → API client: submits reports via (evidence: `apollo-frontend/src/pages/engineer/ServiceReportForm.jsx`)
- Customer and lift records → Form validation: validates with (evidence: `apollo-frontend/src/pages/CustomerForm.jsx`)
- Bills and contracts → Form validation: validates with (evidence: `apollo-frontend/src/pages/Bills.jsx`)
- Customer and lift records → Contract calculations: derives contract data (evidence: `apollo-frontend/src/pages/CustomerForm.jsx`)
- Bills and contracts → Contract calculations: uses contract helpers (evidence: `apollo-frontend/src/pages/Bills.jsx`)
- Service visits → Contract calculations: uses date helper (evidence: `apollo-frontend/src/pages/Services.jsx`)
- API client → Spring Boot API: requests data (evidence: `README.md`)
- Visitor or staff → Root frontend routes: uses (evidence: `README.md`)
- Root frontend routes → Root customer and settings screens: routes to (evidence: `src/App.jsx`)
- Root customer and settings screens → Root API client: requests data (evidence: `src/pages/Customers.jsx`)
- Root frontend routes → Root API client: loads user via (evidence: `src/App.jsx`)
- Root API client → Session storage: reads session from (evidence: `src/services/api.js`)
- Root API client → Spring Boot API: requests data (evidence: `README.md`)