# fudien44/payroll_system_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/fudien44/payroll_system_frontend
- Repository: https://github.com/fudien44/payroll_system_frontend

## Overview

JoPayroll is a Vue-based payroll and HR operations frontend. Authenticated staff use routed modules to manage payroll runs and adjustments, calendar rules, deductions, DTR, reports, signatories, and related employee operations; views and composables communicate with backend APIs. Navigation, user/auth state, and shared dialogs support these workflows. The README gives no product-specific detail, so domain capabilities are inferred from the source index and tree; unsampled screens are represented by their exact paths, with only documented or indexed relationships drawn.

Main entry points: [`src/router/index.ts`](https://github.com/fudien44/payroll_system_frontend/blob/main/src/router/index.ts) (Route access), [`src/stores/user.ts`](https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/user.ts) (User profile), [`src/App.vue`](https://github.com/fudien44/payroll_system_frontend/blob/main/src/App.vue) (Application shell), [`src/stores/auth.ts`](https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/auth.ts) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["Application shell<br/>[App.vue]"]
  node_router["Route access<br/>[index.ts]"]
  node_navigation["Navigation<br/>[index.vue]"]
end

subgraph group_identity["Identity and access"]
  node_auth["Authentication<br/>[auth.ts]"]
  node_user["User profile<br/>[user.ts]"]
end

subgraph group_payroll["Payroll operations"]
  node_payrollrun["Payroll run detail"]
  node_payrollruns["Payroll runs<br/>[PayrollRuns.vue]"]
  node_adjustments["Item adjustments"]
  node_deductions["Deductions<br/>[Deductions.vue]"]
  node_reports["Payroll reports<br/>[Reports.vue]"]
end

subgraph group_hr["HR operations"]
  node_calendar["Calendar management"]
  node_calendarstate["Calendar data"]
  node_standardweeks["Standard week rules"]
  node_weekselector["Week selector"]
  node_dtr["Time records<br/>[Dtr.vue]"]
  node_fleximodal["Flex schedule<br/>[SetFlexiModal.vue]"]
  node_employees["Employee management<br/>[Employees.vue]"]
  node_signatories["Signatories<br/>[Signatories.vue]"]
  node_engas["ENGAS records<br/>[Engas.vue]"]
  node_passes["Pass slips<br/>[PassSlips.vue]"]
  node_audit["Audit logs<br/>[AuditLogs.vue]"]
end

subgraph group_platform["Shared platform"]
  node_http{{"Backend API"}}
  node_axios["HTTP client<br/>[axios.ts]"]
  node_alerts["Notifications<br/>[snackbar.ts]"]
  node_basealert["Alert display<br/>[BaseAlert.vue]"]
end

node_staff(("Staff user"))

node_staff -->|"opens routes"| node_router
node_router -->|"checks access"| node_auth
node_router -->|"checks user"| node_user
node_router -->|"routes to"| node_payrollrun
node_router -->|"routes to"| node_payrollruns
node_router -->|"routes to"| node_calendar
node_router -->|"routes to"| node_deductions
node_router -->|"routes to"| node_dtr
node_router -->|"routes to"| node_signatories
node_app -->|"reads routes"| node_router
node_app -->|"renders alert"| node_basealert
node_app -->|"reads notices"| node_alerts
node_navigation -->|"filters items"| node_user
node_auth -->|"authenticates"| node_http
node_auth -->|"loads profile"| node_user
node_payrollrun -->|"updates run"| node_http
node_payrollrun -->|"opens adjustments"| node_adjustments
node_adjustments -->|"loads dates"| node_http
node_calendar -->|"uses calendar data"| node_calendarstate
node_calendar -->|"opens rules"| node_standardweeks
node_standardweeks -->|"renders selector"| node_weekselector
node_standardweeks -->|"uses calendar data"| node_calendarstate
node_calendarstate -->|"sends requests"| node_axios
node_axios -->|"calls API"| node_http
node_dtr -->|"opens schedule"| node_fleximodal
node_dtr -->|"reads user"| node_user

click node_app "https://github.com/fudien44/payroll_system_frontend/blob/main/src/App.vue"
click node_router "https://github.com/fudien44/payroll_system_frontend/blob/main/src/router/index.ts"
click node_navigation "https://github.com/fudien44/payroll_system_frontend/blob/main/src/layouts/components/vertical-nav/index.vue"
click node_auth "https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/auth.ts"
click node_user "https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/user.ts"
click node_payrollrun "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/PayrollRunDetail.vue"
click node_payrollruns "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/PayrollRuns.vue"
click node_adjustments "https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/payroll/PayrollItemAdjustmentsDialog.vue"
click node_deductions "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Deductions.vue"
click node_reports "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Reports.vue"
click node_calendar "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/CalendarManagement.vue"
click node_calendarstate "https://github.com/fudien44/payroll_system_frontend/blob/main/src/composable/usePayrollCalendar.ts"
click node_standardweeks "https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/payroll/StandardWeekSectionDialog.vue"
click node_weekselector "https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/payroll/StandardWeekSelector.vue"
click node_dtr "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Dtr.vue"
click node_fleximodal "https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/dtr/SetFlexiModal.vue"
click node_employees "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Employees.vue"
click node_signatories "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Signatories.vue"
click node_engas "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Engas.vue"
click node_passes "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/PassSlips.vue"
click node_audit "https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/AuditLogs.vue"
click node_axios "https://github.com/fudien44/payroll_system_frontend/blob/main/src/plugins/axios.ts"
click node_alerts "https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/snackbar.ts"
click node_basealert "https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/base/BaseAlert.vue"

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_router,node_navigation,node_staff toneBlue
class node_auth,node_user toneAmber
class node_payrollrun,node_payrollruns,node_adjustments,node_deductions,node_reports toneMint
class node_calendar,node_calendarstate,node_standardweeks,node_weekselector,node_dtr,node_fleximodal,node_employees,node_signatories,node_engas,node_passes,node_audit toneRose
class node_http,node_axios,node_alerts,node_basealert toneIndigo
```

## Components

### App shell

- [Application shell](https://github.com/fudien44/payroll_system_frontend/blob/main/src/App.vue): `src/App.vue`
- [Route access](https://github.com/fudien44/payroll_system_frontend/blob/main/src/router/index.ts): `src/router/index.ts`
- [Navigation](https://github.com/fudien44/payroll_system_frontend/blob/main/src/layouts/components/vertical-nav/index.vue): `src/layouts/components/vertical-nav/index.vue`

### Identity and access

- [Authentication](https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/auth.ts): `src/stores/auth.ts`
- [User profile](https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/user.ts): `src/stores/user.ts`

### Payroll operations

- [Payroll run detail](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/PayrollRunDetail.vue): `src/views/PayrollRunDetail.vue`
- [Payroll runs](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/PayrollRuns.vue): `src/views/PayrollRuns.vue`
- [Item adjustments](https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/payroll/PayrollItemAdjustmentsDialog.vue): `src/components/payroll/PayrollItemAdjustmentsDialog.vue`
- [Deductions](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Deductions.vue): `src/views/Deductions.vue`
- [Payroll reports](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Reports.vue): `src/views/Reports.vue`

### HR operations

- [Calendar management](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/CalendarManagement.vue): `src/views/CalendarManagement.vue`
- [Calendar data](https://github.com/fudien44/payroll_system_frontend/blob/main/src/composable/usePayrollCalendar.ts): `src/composable/usePayrollCalendar.ts`
- [Standard week rules](https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/payroll/StandardWeekSectionDialog.vue): `src/components/payroll/StandardWeekSectionDialog.vue`
- [Week selector](https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/payroll/StandardWeekSelector.vue): `src/components/payroll/StandardWeekSelector.vue`
- [Time records](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Dtr.vue): `src/views/Dtr.vue`
- [Flex schedule](https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/dtr/SetFlexiModal.vue): `src/components/dtr/SetFlexiModal.vue`
- [Employee management](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Employees.vue): `src/views/Employees.vue`
- [Signatories](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Signatories.vue): `src/views/Signatories.vue`
- [ENGAS records](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/Engas.vue): `src/views/Engas.vue`
- [Pass slips](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/PassSlips.vue): `src/views/PassSlips.vue`
- [Audit logs](https://github.com/fudien44/payroll_system_frontend/blob/main/src/views/AuditLogs.vue): `src/views/AuditLogs.vue`

### Shared platform

- **Backend API**
- [HTTP client](https://github.com/fudien44/payroll_system_frontend/blob/main/src/plugins/axios.ts): `src/plugins/axios.ts`
- [Notifications](https://github.com/fudien44/payroll_system_frontend/blob/main/src/stores/snackbar.ts): `src/stores/snackbar.ts`
- [Alert display](https://github.com/fudien44/payroll_system_frontend/blob/main/src/components/base/BaseAlert.vue): `src/components/base/BaseAlert.vue`

### Other components

- **Staff user**

## Connections

- Staff user → Route access: opens routes (evidence: `src/router/index.ts`)
- Route access → Authentication: checks access (evidence: `src/router/index.ts`)
- Route access → User profile: checks user (evidence: `src/router/index.ts`)
- Route access → Payroll run detail: routes to (evidence: `src/router/index.ts`)
- Route access → Payroll runs: routes to (evidence: `src/router/index.ts`)
- Route access → Calendar management: routes to (evidence: `src/router/index.ts`)
- Route access → Deductions: routes to (evidence: `src/router/index.ts`)
- Route access → Time records: routes to (evidence: `src/router/index.ts`)
- Route access → Signatories: routes to (evidence: `src/router/index.ts`)
- Application shell → Route access: reads routes (evidence: `src/App.vue`)
- Application shell → Alert display: renders alert (evidence: `src/App.vue`)
- Application shell → Notifications: reads notices (evidence: `src/App.vue`)
- Navigation → User profile: filters items (evidence: `src/layouts/components/vertical-nav/index.vue`)
- Authentication → Backend API: authenticates (evidence: `src/stores/auth.ts`)
- Authentication → User profile: loads profile (evidence: `src/stores/auth.ts`)
- Payroll run detail → Backend API: updates run (evidence: `src/views/PayrollRunDetail.vue`)
- Payroll run detail → Item adjustments: opens adjustments (evidence: `src/views/PayrollRunDetail.vue`)
- Item adjustments → Backend API: loads dates (evidence: `src/components/payroll/PayrollItemAdjustmentsDialog.vue`)
- Calendar management → Calendar data: uses calendar data (evidence: `src/views/CalendarManagement.vue`)
- Calendar management → Standard week rules: opens rules (evidence: `src/views/CalendarManagement.vue`)
- Standard week rules → Week selector: renders selector (evidence: `src/components/payroll/StandardWeekSectionDialog.vue`)
- Standard week rules → Calendar data: uses calendar data (evidence: `src/components/payroll/StandardWeekSectionDialog.vue`)
- Calendar data → HTTP client: sends requests (evidence: `src/composable/usePayrollCalendar.ts`)
- HTTP client → Backend API: calls API (evidence: `src/plugins/axios.ts`)
- Time records → Flex schedule: opens schedule (evidence: `src/views/Dtr.vue`)
- Time records → User profile: reads user (evidence: `src/views/Dtr.vue`)