# darel-developer/hrattendancemanagerdesign architecture

> Architecture diagram of the GitHub repository darel-developer/hrattendancemanagerdesign, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/darel-developer/hrattendancemanagerdesign
- Repository: https://github.com/darel-developer/hrattendancemanagerdesign

## Overview

HR Attendance Manager is a multi-company HR and attendance application. Employees and managers use the web app to authenticate, manage workforce records, record attendance or use the kiosk, handle leave and planning, and review reports; the client sends requests through a shared API layer to Express routes and PostgreSQL. The README documents additional capabilities, including geolocation, exports, document management, and super-admin controls. Those features are represented at their documented module paths; sampled source gives more detail for authentication and manager reports than for most other routes.

Main entry points: [`src/app/services/api.ts`](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/services/api.ts) (HTTP API client), [`server/server.js`](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/server.js) (Express application), [`server/db.js`](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/db.js) (Application database), [`src/app/App.tsx`](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/App.tsx) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web application"]
  node_app["App shell<br/>[App.tsx]"]
  node_routes["Page routing<br/>[routes.tsx]"]
  node_authctx["Session and identity<br/>[AuthContext.tsx]"]
  node_api["HTTP API client<br/>[api.ts]"]
end

subgraph group_workforce["HR workflows"]
  node_clientpages["HR pages"]
  node_reportui["Manager reports UI"]
  node_kiosk["Public kiosk<br/>[KioskPage.tsx]"]
end

subgraph group_server["Backend services"]
  node_server["Express application<br/>[server.js]"]
  node_authroutes["Authentication routes<br/>[auth.js]"]
  node_workroutes["Workforce routes"]
  node_reportroutes["Reporting routes<br/>[managerReports.js]"]
  node_authmw["Auth and tenant checks<br/>[auth.js]"]
  node_db[("Application database<br/>[db.js]")]
  node_pushroute["Push token endpoint<br/>[auth.js]"]
end

subgraph group_messaging["Notifications"]
  node_fcmhook["Push client<br/>[useFcm.ts]"]
  node_fcmservice["FCM delivery<br/>[fcm.js]"]
  node_firebase["Firebase Cloud Messaging"]
end

node_user(("Employee or manager"))

node_user -->|"uses"| node_app
node_app -->|"hosts"| node_routes
node_app -->|"provides session"| node_authctx
node_routes -->|"routes to"| node_clientpages
node_user -->|"uses"| node_kiosk
node_clientpages -->|"requests data"| node_api
node_reportui -->|"manages reports"| node_api
node_authctx -->|"authenticates via"| node_api
node_api -->|"sends requests"| node_server
node_server -->|"dispatches"| node_authroutes
node_server -->|"dispatches"| node_workroutes
node_server -->|"dispatches"| node_reportroutes
node_authroutes -->|"checks tokens"| node_authmw
node_reportroutes -->|"checks access"| node_authmw
node_authroutes -->|"reads and writes"| node_db
node_reportroutes -->|"reads and writes"| node_db
node_workroutes -->|"reads and writes"| node_db
node_fcmhook -->|"registers token"| node_api
node_api -->|"sends token"| node_pushroute
node_pushroute -->|"stores token"| node_db
node_fcmhook -.->|"receives push"| node_firebase
node_fcmservice -.->|"sends push"| node_firebase

click node_app "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/App.tsx"
click node_routes "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/routes.tsx"
click node_authctx "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/context/AuthContext.tsx"
click node_clientpages "https://github.com/darel-developer/hrattendancemanagerdesign/tree/main/src/app/pages"
click node_reportui "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/components/ManagerReportsSection.tsx"
click node_kiosk "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/pages/KioskPage.tsx"
click node_api "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/services/api.ts"
click node_server "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/server.js"
click node_authroutes "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/routes/auth.js"
click node_workroutes "https://github.com/darel-developer/hrattendancemanagerdesign/tree/main/server/routes"
click node_reportroutes "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/routes/managerReports.js"
click node_authmw "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/middleware/auth.js"
click node_db "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/db.js"
click node_fcmhook "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/hooks/useFcm.ts"
click node_pushroute "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/routes/auth.js"
click node_fcmservice "https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/services/fcm.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_app,node_routes,node_authctx,node_api toneBlue
class node_clientpages,node_reportui,node_kiosk toneAmber
class node_server,node_authroutes,node_workroutes,node_reportroutes,node_authmw,node_db,node_pushroute toneMint
class node_fcmhook,node_fcmservice,node_firebase toneRose
class node_user toneIndigo
```

## Components

### Web application

- [App shell](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Page routing](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/routes.tsx): `src/app/routes.tsx`
- [Session and identity](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/context/AuthContext.tsx): `src/app/context/AuthContext.tsx`
- [HTTP API client](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/services/api.ts): `src/app/services/api.ts`

### HR workflows

- [HR pages](https://github.com/darel-developer/hrattendancemanagerdesign/tree/main/src/app/pages): `src/app/pages`
- [Manager reports UI](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/components/ManagerReportsSection.tsx): `src/app/components/ManagerReportsSection.tsx`
- [Public kiosk](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/pages/KioskPage.tsx): `src/app/pages/KioskPage.tsx`

### Backend services

- [Express application](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/server.js): `server/server.js`
- [Authentication routes](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/routes/auth.js): `server/routes/auth.js`
- [Workforce routes](https://github.com/darel-developer/hrattendancemanagerdesign/tree/main/server/routes): `server/routes`
- [Reporting routes](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/routes/managerReports.js): `server/routes/managerReports.js`
- [Auth and tenant checks](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/middleware/auth.js): `server/middleware/auth.js`
- [Application database](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/db.js): `server/db.js`
- [Push token endpoint](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/routes/auth.js): `server/routes/auth.js`

### Notifications

- [Push client](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/src/app/hooks/useFcm.ts): `src/app/hooks/useFcm.ts`
- [FCM delivery](https://github.com/darel-developer/hrattendancemanagerdesign/blob/main/server/services/fcm.js): `server/services/fcm.js`
- **Firebase Cloud Messaging**

### Other components

- **Employee or manager**

## Connections

- Employee or manager → App shell: uses
- App shell → Page routing: hosts
- App shell → Session and identity: provides session
- Page routing → HR pages: routes to
- Employee or manager → Public kiosk: uses
- HR pages → HTTP API client: requests data
- Manager reports UI → HTTP API client: manages reports
- Session and identity → HTTP API client: authenticates via
- HTTP API client → Express application: sends requests
- Express application → Authentication routes: dispatches
- Express application → Workforce routes: dispatches
- Express application → Reporting routes: dispatches
- Authentication routes → Auth and tenant checks: checks tokens
- Reporting routes → Auth and tenant checks: checks access
- Authentication routes → Application database: reads and writes
- Reporting routes → Application database: reads and writes
- Workforce routes → Application database: reads and writes
- Push client → HTTP API client: registers token
- HTTP API client → Push token endpoint: sends token
- Push token endpoint → Application database: stores token
- Push client → Firebase Cloud Messaging: receives push
- FCM delivery → Firebase Cloud Messaging: sends push