# darshankgithub/avicorex-hrms-ui architecture

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

- Interactive diagram: https://gitdiagram.com/darshankgithub/avicorex-hrms-ui
- Repository: https://github.com/darshankgithub/avicorex-hrms-ui

## Overview

UpsatirsHR is a Next.js frontend for an HR SaaS product. Users enter through login, establish an authenticated session, and use a role-aware dashboard and domain pages for employee, attendance, leave, payroll, recruitment, and other HR tasks. Those pages use a shared API URL/fetch layer to communicate with the backend. Shared shell, navigation, and permission components support the experience. The README describes the product focus; several domain routes are represented by their tree paths, but their implementation details and individual API calls were not sampled.

Main entry points: [`components/auth/AuthContext.tsx`](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/AuthContext.tsx) (Auth session), [`components/auth/usePermissions.ts`](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/usePermissions.ts) (Permission hook), [`lib/apiBase.ts`](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/lib/apiBase.ts) (API URL and fetch), [`components/navigation/Breadcrumbs.tsx`](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/navigation/Breadcrumbs.tsx) (Breadcrumb navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and shell"]
  node_login["Login page<br/>[page.tsx]"]
  node_loginform["Login form<br/>[LoginForm.tsx]"]
  node_authshell["Auth shell<br/>[AuthShell.tsx]"]
  node_auth["Auth session<br/>[AuthContext.tsx]"]
  node_permissions["Role permissions<br/>[rolePermissions.ts]"]
  node_permissionhook["Permission hook<br/>[usePermissions.ts]"]
  node_protected["Protected shell<br/>[ProtectedShell.tsx]"]
  node_dashboard["Dashboard<br/>[page.tsx]"]
end

subgraph group_people["People operations"]
  node_employees["Employee records<br/>[page.tsx]"]
  node_recruitment["Recruitment<br/>[page.tsx]"]
  node_lifecycle["Employee lifecycle<br/>[page.tsx]"]
  node_organization["Organization structure<br/>[page.tsx]"]
end

subgraph group_worklife["Employee worklife"]
  node_attendance["Attendance<br/>[page.tsx]"]
  node_leaves["Leave management<br/>[page.tsx]"]
  node_payroll["Payroll<br/>[page.tsx]"]
  node_performance["Performance<br/>[page.tsx]"]
  node_helpdesk["Helpdesk<br/>[page.tsx]"]
  node_services["Employee services<br/>[page.tsx]"]
end

subgraph group_shared["Shared frontend services"]
  node_api["API URL and fetch<br/>[apiBase.ts]"]
  node_breadcrumbs["Breadcrumb navigation<br/>[Breadcrumbs.tsx]"]
  node_employeeid["Employee ID hook<br/>[useEmployeeId.ts]"]
end

node_user(("HR user"))
node_backend["UpsatirsHR backend"]

node_user -->|"signs in"| node_login
node_login -->|"renders"| node_authshell
node_login -->|"renders"| node_loginform
node_loginform -.->|"authenticates"| node_auth
node_auth -->|"builds auth requests"| node_api
node_permissionhook -->|"reads session"| node_auth
node_permissionhook -->|"resolves role"| node_permissions
node_permissionhook -->|"fetches permissions"| node_api
node_protected -.->|"guards access"| node_auth
node_dashboard -->|"reads session"| node_auth
node_dashboard -.->|"fetches dashboard data"| node_api
node_employees -->|"reads session"| node_auth
node_employees -->|"checks permissions"| node_permissionhook
node_employees -->|"renders"| node_breadcrumbs
node_employees -.->|"requests employee data"| node_api
node_recruitment -->|"reads session"| node_auth
node_recruitment -->|"checks permissions"| node_permissionhook
node_recruitment -->|"renders"| node_breadcrumbs
node_lifecycle -->|"reads session"| node_auth
node_lifecycle -->|"checks permissions"| node_permissionhook
node_lifecycle -->|"renders"| node_breadcrumbs
node_organization -->|"reads session"| node_auth
node_organization -->|"renders"| node_breadcrumbs
node_attendance -->|"reads session"| node_auth
node_attendance -->|"gets employee ID"| node_employeeid
node_attendance -->|"checks permissions"| node_permissionhook
node_attendance -.->|"requests attendance data"| node_api
node_leaves -->|"reads session"| node_auth
node_leaves -.->|"gets employee ID"| node_employeeid
node_leaves -.->|"checks permissions"| node_permissionhook
node_leaves -->|"requests leave data"| node_api
node_payroll -->|"reads session"| node_auth
node_payroll -->|"checks permissions"| node_permissionhook
node_payroll -->|"renders"| node_breadcrumbs
node_performance -->|"reads session"| node_auth
node_performance -->|"checks permissions"| node_permissionhook
node_performance -->|"renders"| node_breadcrumbs
node_helpdesk -->|"reads session"| node_auth
node_helpdesk -->|"checks permissions"| node_permissionhook
node_helpdesk -->|"gets employee ID"| node_employeeid
node_services -->|"reads session"| node_auth
node_services -->|"checks permissions"| node_permissionhook
node_api -->|"sends requests"| node_backend

click node_login "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/login/page.tsx"
click node_loginform "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/LoginForm.tsx"
click node_authshell "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/AuthShell.tsx"
click node_auth "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/AuthContext.tsx"
click node_permissions "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/rolePermissions.ts"
click node_permissionhook "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/usePermissions.ts"
click node_protected "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/shell/ProtectedShell.tsx"
click node_dashboard "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/dashboard/page.tsx"
click node_employees "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/employees/page.tsx"
click node_recruitment "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/recruitment/page.tsx"
click node_lifecycle "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/lifecycle/page.tsx"
click node_organization "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/organization/hierarchy/page.tsx"
click node_attendance "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/attendance/page.tsx"
click node_leaves "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/leaves/page.tsx"
click node_payroll "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/payroll/page.tsx"
click node_performance "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/performance/page.tsx"
click node_helpdesk "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/helpdesk/page.tsx"
click node_services "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/services/page.tsx"
click node_api "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/lib/apiBase.ts"
click node_breadcrumbs "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/navigation/Breadcrumbs.tsx"
click node_employeeid "https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/useEmployeeId.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_login,node_loginform,node_authshell,node_auth,node_permissions,node_permissionhook,node_protected,node_dashboard,node_user toneBlue
class node_employees,node_recruitment,node_lifecycle,node_organization toneAmber
class node_attendance,node_leaves,node_payroll,node_performance,node_helpdesk,node_services toneMint
class node_api,node_breadcrumbs,node_employeeid toneRose
class node_backend toneIndigo
```

## Components

### Access and shell

- [Login page](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/login/page.tsx): `app/login/page.tsx`
- [Login form](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/LoginForm.tsx): `components/auth/LoginForm.tsx`
- [Auth shell](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/AuthShell.tsx): `components/auth/AuthShell.tsx`
- [Auth session](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/AuthContext.tsx): `components/auth/AuthContext.tsx`
- [Role permissions](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/rolePermissions.ts): `components/auth/rolePermissions.ts`
- [Permission hook](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/usePermissions.ts): `components/auth/usePermissions.ts`
- [Protected shell](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/shell/ProtectedShell.tsx): `components/shell/ProtectedShell.tsx`
- [Dashboard](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/dashboard/page.tsx): `app/dashboard/page.tsx`

### People operations

- [Employee records](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/employees/page.tsx): `app/employees/page.tsx`
- [Recruitment](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/recruitment/page.tsx): `app/recruitment/page.tsx`
- [Employee lifecycle](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/lifecycle/page.tsx): `app/lifecycle/page.tsx`
- [Organization structure](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/organization/hierarchy/page.tsx): `app/organization/hierarchy/page.tsx`

### Employee worklife

- [Attendance](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/attendance/page.tsx): `app/attendance/page.tsx`
- [Leave management](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/leaves/page.tsx): `app/leaves/page.tsx`
- [Payroll](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/payroll/page.tsx): `app/payroll/page.tsx`
- [Performance](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/performance/page.tsx): `app/performance/page.tsx`
- [Helpdesk](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/helpdesk/page.tsx): `app/helpdesk/page.tsx`
- [Employee services](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/app/services/page.tsx): `app/services/page.tsx`

### Shared frontend services

- [API URL and fetch](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/lib/apiBase.ts): `lib/apiBase.ts`
- [Breadcrumb navigation](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/navigation/Breadcrumbs.tsx): `components/navigation/Breadcrumbs.tsx`
- [Employee ID hook](https://github.com/darshankgithub/avicorex-hrms-ui/blob/main/components/auth/useEmployeeId.ts): `components/auth/useEmployeeId.ts`

### Other components

- **HR user**
- **UpsatirsHR backend**

## Connections

- HR user → Login page: signs in (evidence: `README.md`)
- Login page → Auth shell: renders (evidence: `app/login/page.tsx`)
- Login page → Login form: renders (evidence: `app/login/page.tsx`)
- Login form → Auth session: authenticates
- Auth session → API URL and fetch: builds auth requests (evidence: `components/auth/AuthContext.tsx`)
- Permission hook → Auth session: reads session (evidence: `components/auth/usePermissions.ts`)
- Permission hook → Role permissions: resolves role (evidence: `components/auth/usePermissions.ts`)
- Permission hook → API URL and fetch: fetches permissions (evidence: `components/auth/usePermissions.ts`)
- Protected shell → Auth session: guards access
- Dashboard → Auth session: reads session (evidence: `app/dashboard/page.tsx`)
- Dashboard → API URL and fetch: fetches dashboard data (evidence: `app/dashboard/page.tsx`)
- Employee records → Auth session: reads session (evidence: `app/employees/page.tsx`)
- Employee records → Permission hook: checks permissions (evidence: `app/employees/page.tsx`)
- Employee records → Breadcrumb navigation: renders (evidence: `app/employees/page.tsx`)
- Employee records → API URL and fetch: requests employee data (evidence: `app/employees/page.tsx`)
- Recruitment → Auth session: reads session (evidence: `app/recruitment/page.tsx`)
- Recruitment → Permission hook: checks permissions (evidence: `app/recruitment/page.tsx`)
- Recruitment → Breadcrumb navigation: renders (evidence: `app/recruitment/page.tsx`)
- Employee lifecycle → Auth session: reads session (evidence: `app/lifecycle/page.tsx`)
- Employee lifecycle → Permission hook: checks permissions (evidence: `app/lifecycle/page.tsx`)
- Employee lifecycle → Breadcrumb navigation: renders (evidence: `app/lifecycle/page.tsx`)
- Organization structure → Auth session: reads session (evidence: `app/organization/hierarchy/page.tsx`)
- Organization structure → Breadcrumb navigation: renders (evidence: `app/organization/hierarchy/page.tsx`)
- Attendance → Auth session: reads session (evidence: `app/attendance/page.tsx`)
- Attendance → Employee ID hook: gets employee ID (evidence: `app/attendance/page.tsx`)
- Attendance → Permission hook: checks permissions (evidence: `app/attendance/page.tsx`)
- Attendance → API URL and fetch: requests attendance data (evidence: `app/attendance/page.tsx`)
- Leave management → Auth session: reads session (evidence: `app/leaves/page.tsx`)
- Leave management → Employee ID hook: gets employee ID (evidence: `app/leaves/page.tsx`)
- Leave management → Permission hook: checks permissions (evidence: `app/leaves/page.tsx`)
- Leave management → API URL and fetch: requests leave data (evidence: `app/leaves/page.tsx`)
- Payroll → Auth session: reads session (evidence: `app/payroll/page.tsx`)
- Payroll → Permission hook: checks permissions (evidence: `app/payroll/page.tsx`)
- Payroll → Breadcrumb navigation: renders (evidence: `app/payroll/page.tsx`)
- Performance → Auth session: reads session (evidence: `app/performance/page.tsx`)
- Performance → Permission hook: checks permissions (evidence: `app/performance/page.tsx`)
- Performance → Breadcrumb navigation: renders (evidence: `app/performance/page.tsx`)
- Helpdesk → Auth session: reads session (evidence: `app/helpdesk/page.tsx`)
- Helpdesk → Permission hook: checks permissions (evidence: `app/helpdesk/page.tsx`)
- Helpdesk → Employee ID hook: gets employee ID (evidence: `app/helpdesk/page.tsx`)
- Employee services → Auth session: reads session (evidence: `app/services/page.tsx`)
- Employee services → Permission hook: checks permissions (evidence: `app/services/page.tsx`)
- API URL and fetch → UpsatirsHR backend: sends requests (evidence: `lib/apiBase.ts`)