# suryani-76/hrms_app architecture

> Architecture diagram of the GitHub repository suryani-76/hrms_app, 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/suryani-76/hrms_app
- Repository: https://github.com/suryani-76/hrms_app

## Overview

This is a web-based human-resources management system. Employees and HR staff enter through the React application; authentication and route protection lead users to operational pages, which expose functions such as attendance, leave, payroll, recruitment, tasks, and service requests. The sampled service-request path shows a page calling its API module, which uploads documents to Supabase storage. The router documents the wider set of product areas, but their internal data flows were not sampled, so those links are not inferred. Relationships shown are limited to explicit excerpts and routing declarations.

Main entry points: [`hrms-app/src/router.tsx`](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/router.tsx) (Route access), [`hrms-app/src/App.tsx`](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/App.tsx) (HRMS app), [`hrms-app/src/pages/service-requests-page.tsx`](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/service-requests-page.tsx) (Service requests), [`hrms-app/src/lib/api/service-requests.ts`](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/lib/api/service-requests.ts) (Request API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["HRMS app<br/>[App.tsx]"]
  node_auth["Authentication<br/>[auth-context.tsx]"]
  node_router["Route access<br/>[router.tsx]"]
  node_dashboard["Dashboard<br/>[dashboard-page.tsx]"]
end

subgraph group_people["People operations"]
  node_attendance["Attendance"]
  node_leave["Leave<br/>[leave-page.tsx]"]
  node_employees["Employee records<br/>[employees-page.tsx]"]
  node_payroll["Payroll and payslips<br/>[payroll-page.tsx]"]
  node_recruitment["Recruitment portal"]
  node_insurance["Insurance enrollment"]
end

subgraph group_work["Work management"]
  node_tasks["Tasks and projects<br/>[tasks-page.tsx]"]
  node_service["Service requests"]
end

subgraph group_platform["Data and communications"]
  node_api["Request API"]
  node_supabase[("Supabase storage<br/>[supabase.ts]")]
  node_email["Email delivery<br/>[index.ts]"]
end

node_user(("Employee or HR"))

node_user -->|"uses"| node_app
node_app -->|"provides context"| node_auth
node_app -->|"renders routes"| node_router
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_attendance
node_router -->|"routes to"| node_leave
node_router -->|"routes to"| node_employees
node_router -->|"routes to"| node_payroll
node_router -->|"routes to"| node_recruitment
node_router -->|"routes to"| node_insurance
node_router -->|"routes to"| node_tasks
node_router -->|"routes to"| node_service
node_service -->|"fetches and uploads"| node_api
node_api -->|"uploads documents"| node_supabase

click node_app "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/App.tsx"
click node_auth "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/features/auth/auth-context.tsx"
click node_router "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/router.tsx"
click node_dashboard "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/dashboard-page.tsx"
click node_attendance "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/attendance-page.tsx"
click node_leave "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/leave-page.tsx"
click node_employees "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/employees-page.tsx"
click node_payroll "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/payroll-page.tsx"
click node_recruitment "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/recruitment-page.tsx"
click node_insurance "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/insurance-enrollment-page.tsx"
click node_tasks "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/tasks-page.tsx"
click node_service "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/service-requests-page.tsx"
click node_api "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/lib/api/service-requests.ts"
click node_supabase "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/lib/supabase.ts"
click node_email "https://github.com/suryani-76/hrms_app/blob/main/hrms-app/supabase/functions/send-email/index.ts"

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_auth,node_router,node_dashboard toneBlue
class node_attendance,node_leave,node_employees,node_payroll,node_recruitment,node_insurance toneAmber
class node_tasks,node_service toneMint
class node_api,node_supabase,node_email toneRose
class node_user toneIndigo
```

## Components

### Application shell

- [HRMS app](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/App.tsx): `hrms-app/src/App.tsx`
- [Authentication](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/features/auth/auth-context.tsx): `hrms-app/src/features/auth/auth-context.tsx`
- [Route access](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/router.tsx): `hrms-app/src/router.tsx`
- [Dashboard](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/dashboard-page.tsx): `hrms-app/src/pages/dashboard-page.tsx`

### People operations

- [Attendance](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/attendance-page.tsx): `hrms-app/src/pages/attendance-page.tsx`
- [Leave](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/leave-page.tsx): `hrms-app/src/pages/leave-page.tsx`
- [Employee records](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/employees-page.tsx): `hrms-app/src/pages/employees-page.tsx`
- [Payroll and payslips](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/payroll-page.tsx): `hrms-app/src/pages/payroll-page.tsx`
- [Recruitment portal](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/recruitment-page.tsx): `hrms-app/src/pages/recruitment-page.tsx`
- [Insurance enrollment](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/insurance-enrollment-page.tsx): `hrms-app/src/pages/insurance-enrollment-page.tsx`

### Work management

- [Tasks and projects](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/tasks-page.tsx): `hrms-app/src/pages/tasks-page.tsx`
- [Service requests](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/pages/service-requests-page.tsx): `hrms-app/src/pages/service-requests-page.tsx`

### Data and communications

- [Request API](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/lib/api/service-requests.ts): `hrms-app/src/lib/api/service-requests.ts`
- [Supabase storage](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/src/lib/supabase.ts): `hrms-app/src/lib/supabase.ts`
- [Email delivery](https://github.com/suryani-76/hrms_app/blob/main/hrms-app/supabase/functions/send-email/index.ts): `hrms-app/supabase/functions/send-email/index.ts`

### Other components

- **Employee or HR**

## Connections

- Employee or HR → HRMS app: uses
- HRMS app → Authentication: provides context (evidence: `hrms-app/src/App.tsx`)
- HRMS app → Route access: renders routes (evidence: `hrms-app/src/App.tsx`)
- Route access → Dashboard: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Attendance: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Leave: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Employee records: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Payroll and payslips: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Recruitment portal: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Insurance enrollment: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Tasks and projects: routes to (evidence: `hrms-app/src/router.tsx`)
- Route access → Service requests: routes to (evidence: `hrms-app/src/router.tsx`)
- Service requests → Request API: fetches and uploads (evidence: `hrms-app/src/pages/service-requests-page.tsx`)
- Request API → Supabase storage: uploads documents (evidence: `hrms-app/src/lib/api/service-requests.ts`)