# ilavoga/leave-management architecture

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

- Interactive diagram: https://gitdiagram.com/ilavoga/leave-management
- Repository: https://github.com/ilavoga/leave-management

## Overview

This repository is a leave-management web application: employees can authenticate and submit leave requests, while managers/admins can review requests; the interface also exposes profile, calendar, dashboard, charts and settings. The React app routes users to these screens, with authentication backed by Supabase. The tree indicates dedicated stores and pages for leave requests and approvals, but their implementation and data wiring were not sampled. The Flask server excerpt only exposes a health endpoint, so no leave-processing API connection is shown.

Main entry points: [`client/src/App.tsx`](https://github.com/ilavoga/leave-management/blob/main/client/src/App.tsx) (Route application), [`client/src/services/auth.ts`](https://github.com/ilavoga/leave-management/blob/main/client/src/services/auth.ts) (Authentication service), [`client/src/pages/Authentication/SignIn.tsx`](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Authentication/SignIn.tsx) (Sign-in screen), [`client/src/store/authStore.ts`](https://github.com/ilavoga/leave-management/blob/main/client/src/store/authStore.ts) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["Route application<br/>[App.tsx]"]
  node_defaultlayout["Main layout<br/>[DefaultLayout.tsx]"]
end

subgraph group_identity["Identity and profiles"]
  node_signin["Sign-in screen<br/>[SignIn.tsx]"]
  node_signup["Sign-up screen<br/>[SignUp.tsx]"]
  node_authstore["Authentication state<br/>[authStore.ts]"]
  node_authservice["Authentication service<br/>[auth.ts]"]
end

subgraph group_leave["Leave operations"]
  node_leaverequest["Leave request form<br/>[LeaveRequest.tsx]"]
  node_leavestore["Leave state<br/>[leaveStore.ts]"]
  node_approval["Leave approval<br/>[LeaveApproval.tsx]"]
end

subgraph group_workspace["Workplace views"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_calendar["Calendar<br/>[Calendar.tsx]"]
  node_profile["Profile view<br/>[Profile.tsx]"]
  node_settings["Settings<br/>[Settings.tsx]"]
  node_charts["Charts<br/>[Chart.tsx]"]
end

subgraph group_platform["Data services"]
  node_profiles[("User profiles<br/>[database.ts]")]
  node_supabase[("Supabase<br/>[supabase.ts]")]
  node_health["Health endpoint<br/>[app.py]"]
end

node_employee(("Employee"))
node_administrator(("Administrator"))

node_employee -->|"opens app"| node_app
node_administrator -->|"opens app"| node_app
node_app -->|"renders routes"| node_defaultlayout
node_app -->|"routes to"| node_signin
node_app -->|"routes to"| node_signup
node_app -->|"routes to"| node_leaverequest
node_app -->|"routes to"| node_approval
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_calendar
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_settings
node_app -->|"routes to"| node_charts
node_signin -->|"uses state"| node_authstore
node_authstore -->|"calls sign-in"| node_authservice
node_authservice -->|"auth and profile queries"| node_supabase
node_authservice -->|"reads profile schema"| node_profiles
node_leaverequest -->|"uses state"| node_leavestore
node_approval -->|"uses state"| node_leavestore

click node_app "https://github.com/ilavoga/leave-management/blob/main/client/src/App.tsx"
click node_defaultlayout "https://github.com/ilavoga/leave-management/blob/main/client/src/layout/DefaultLayout.tsx"
click node_signin "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Authentication/SignIn.tsx"
click node_signup "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Authentication/SignUp.tsx"
click node_authstore "https://github.com/ilavoga/leave-management/blob/main/client/src/store/authStore.ts"
click node_authservice "https://github.com/ilavoga/leave-management/blob/main/client/src/services/auth.ts"
click node_profiles "https://github.com/ilavoga/leave-management/blob/main/client/src/types/database.ts"
click node_leaverequest "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Form/LeaveRequest.tsx"
click node_leavestore "https://github.com/ilavoga/leave-management/blob/main/client/src/store/leaveStore.ts"
click node_approval "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/LeaveApproval/LeaveApproval.tsx"
click node_dashboard "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Dashboard/Dashboard.tsx"
click node_calendar "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Calendar.tsx"
click node_profile "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Profile.tsx"
click node_settings "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Settings.tsx"
click node_charts "https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Chart.tsx"
click node_supabase "https://github.com/ilavoga/leave-management/blob/main/client/src/config/supabase.ts"
click node_health "https://github.com/ilavoga/leave-management/blob/main/server/app.py"

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_defaultlayout toneBlue
class node_signin,node_signup,node_authstore,node_authservice toneAmber
class node_leaverequest,node_leavestore,node_approval toneMint
class node_dashboard,node_calendar,node_profile,node_settings,node_charts toneRose
class node_profiles,node_supabase,node_health,node_employee,node_administrator toneIndigo
```

## Components

### Application shell

- [Route application](https://github.com/ilavoga/leave-management/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Main layout](https://github.com/ilavoga/leave-management/blob/main/client/src/layout/DefaultLayout.tsx): `client/src/layout/DefaultLayout.tsx`

### Identity and profiles

- [Sign-in screen](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Authentication/SignIn.tsx): `client/src/pages/Authentication/SignIn.tsx`
- [Sign-up screen](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Authentication/SignUp.tsx): `client/src/pages/Authentication/SignUp.tsx`
- [Authentication state](https://github.com/ilavoga/leave-management/blob/main/client/src/store/authStore.ts): `client/src/store/authStore.ts`
- [Authentication service](https://github.com/ilavoga/leave-management/blob/main/client/src/services/auth.ts): `client/src/services/auth.ts`

### Leave operations

- [Leave request form](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Form/LeaveRequest.tsx): `client/src/pages/Form/LeaveRequest.tsx`
- [Leave state](https://github.com/ilavoga/leave-management/blob/main/client/src/store/leaveStore.ts): `client/src/store/leaveStore.ts`
- [Leave approval](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/LeaveApproval/LeaveApproval.tsx): `client/src/pages/LeaveApproval/LeaveApproval.tsx`

### Workplace views

- [Dashboard](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Dashboard/Dashboard.tsx): `client/src/pages/Dashboard/Dashboard.tsx`
- [Calendar](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Calendar.tsx): `client/src/pages/Calendar.tsx`
- [Profile view](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Profile.tsx): `client/src/pages/Profile.tsx`
- [Settings](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Settings.tsx): `client/src/pages/Settings.tsx`
- [Charts](https://github.com/ilavoga/leave-management/blob/main/client/src/pages/Chart.tsx): `client/src/pages/Chart.tsx`

### Data services

- [User profiles](https://github.com/ilavoga/leave-management/blob/main/client/src/types/database.ts): `client/src/types/database.ts`
- [Supabase](https://github.com/ilavoga/leave-management/blob/main/client/src/config/supabase.ts): `client/src/config/supabase.ts`
- [Health endpoint](https://github.com/ilavoga/leave-management/blob/main/server/app.py): `server/app.py`

### Other components

- **Employee**
- **Administrator**

## Connections

- Employee → Route application: opens app
- Administrator → Route application: opens app
- Route application → Main layout: renders routes
- Route application → Sign-in screen: routes to
- Route application → Sign-up screen: routes to
- Route application → Leave request form: routes to
- Route application → Leave approval: routes to
- Route application → Dashboard: routes to
- Route application → Calendar: routes to
- Route application → Profile view: routes to
- Route application → Settings: routes to
- Route application → Charts: routes to
- Sign-in screen → Authentication state: uses state
- Authentication state → Authentication service: calls sign-in
- Authentication service → Supabase: auth and profile queries
- Authentication service → User profiles: reads profile schema
- Leave request form → Leave state: uses state
- Leave approval → Leave state: uses state