# brandobogar/absensi-web-v2 architecture

> Architecture diagram of the GitHub repository brandobogar/absensi-web-v2, 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/brandobogar/absensi-web-v2
- Repository: https://github.com/brandobogar/absensi-web-v2

## Overview

Aplikasi Absensi Pegawai is a React client for employee attendance and multi-OPD administration. Employees sign in, view schedules and attendance status, submit a location-checked attendance record, and review attendance; administrators manage staff, OPDs, and related configuration. The README documents a Google Apps Script API backed by Google Sheets. Source excerpts confirm the app’s routing/session role and API calls for login, attendance, and management; other frontend modules and backend internals were not sampled, so their detailed wiring is represented only where documented.

Main entry points: [`src/api.js`](https://github.com/brandobogar/absensi-web-v2/blob/main/src/api.js) (API client), [`src/App.jsx`](https://github.com/brandobogar/absensi-web-v2/blob/main/src/App.jsx) (App and session), [`src/layouts/UserLayout.jsx`](https://github.com/brandobogar/absensi-web-v2/blob/main/src/layouts/UserLayout.jsx) (User navigation), [`src/components/Login.jsx`](https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/Login.jsx) (Login)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_app_entry["React entry<br/>[main.jsx]"]
  node_app_router["App and session<br/>[App.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_user_layout["User navigation<br/>[UserLayout.jsx]"]
end

subgraph group_employee["Employee attendance"]
  node_home["Home and schedule<br/>[Beranda.jsx]"]
  node_attendance["Location attendance<br/>[Absen.jsx]"]
  node_history["Attendance history<br/>[Riwayat.jsx]"]
  node_profile["Profile changes"]
  node_gps(("Device GPS"))
end

subgraph group_admin["Administration"]
  node_admin_dashboard["Admin dashboard<br/>[Admin.jsx]"]
  node_staff_management["Staff management"]
  node_opd_management["OPD management<br/>[ManajemenOpd.jsx]"]
  node_admin_management["Admin accounts<br/>[ManajemenAdmin.jsx]"]
  node_opd_config["OPD and session settings<br/>[EditOpdModal.jsx]"]
  node_session_editor["Session editor<br/>[SesiModal.jsx]"]
  node_map_editor["Office map editor<br/>[PetaModal.jsx]"]
end

subgraph group_services["Backend and data"]
  node_api["API client<br/>[api.js]"]
  node_gas["Apps Script API"]
  node_sheets[("Google Sheets")]
end

node_employee_actor(("Employee"))
node_admin_actor(("Administrator"))

node_app_entry -->|"renders"| node_app_router
node_employee_actor -->|"signs in"| node_login
node_admin_actor -->|"signs in"| node_login
node_login -->|"requests login"| node_api
node_api -->|"sends API requests"| node_gas
node_gas -->|"reads and writes"| node_sheets
node_login -->|"reports login"| node_app_router
node_app_router -->|"renders user view"| node_user_layout
node_user_layout -->|"selects tab"| node_home
node_user_layout -->|"selects tab"| node_attendance
node_user_layout -->|"selects tab"| node_history
node_app_router -->|"renders admin view"| node_admin_dashboard
node_app_router -->|"dispatches page"| node_staff_management
node_app_router -->|"dispatches page"| node_opd_management
node_opd_management -->|"opens accounts"| node_admin_management
node_opd_management -->|"requests OPD data"| node_api
node_staff_management -->|"requests staff actions"| node_api
node_home -->|"loads status and config"| node_api
node_home -->|"opens profile editor"| node_profile
node_profile -->|"updates credentials"| node_api
node_attendance -->|"reads coordinates"| node_gps
node_attendance -->|"loads config and submits"| node_api
node_history -->|"loads attendance records"| node_api
node_opd_config -->|"edits session times"| node_session_editor
node_opd_config -->|"edits office location"| node_map_editor

click node_app_entry "https://github.com/brandobogar/absensi-web-v2/blob/main/src/main.jsx"
click node_app_router "https://github.com/brandobogar/absensi-web-v2/blob/main/src/App.jsx"
click node_login "https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/Login.jsx"
click node_user_layout "https://github.com/brandobogar/absensi-web-v2/blob/main/src/layouts/UserLayout.jsx"
click node_home "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/user/Beranda.jsx"
click node_attendance "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/user/Absen.jsx"
click node_history "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/user/Riwayat.jsx"
click node_profile "https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/user/EditProfileModal.jsx"
click node_admin_dashboard "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/Admin.jsx"
click node_staff_management "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/ManajemenPegawai.jsx"
click node_opd_management "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/ManajemenOpd.jsx"
click node_admin_management "https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/ManajemenAdmin.jsx"
click node_opd_config "https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/admin/EditOpdModal.jsx"
click node_session_editor "https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/admin/SesiModal.jsx"
click node_map_editor "https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/admin/PetaModal.jsx"
click node_api "https://github.com/brandobogar/absensi-web-v2/blob/main/src/api.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_entry,node_app_router,node_login,node_user_layout toneBlue
class node_home,node_attendance,node_history,node_profile,node_gps toneAmber
class node_admin_dashboard,node_staff_management,node_opd_management,node_admin_management,node_opd_config,node_session_editor,node_map_editor toneMint
class node_api,node_gas,node_sheets toneRose
class node_employee_actor,node_admin_actor toneIndigo
```

## Components

### Application flow

- [React entry](https://github.com/brandobogar/absensi-web-v2/blob/main/src/main.jsx): `src/main.jsx`
- [App and session](https://github.com/brandobogar/absensi-web-v2/blob/main/src/App.jsx): `src/App.jsx`
- [Login](https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/Login.jsx): `src/components/Login.jsx`
- [User navigation](https://github.com/brandobogar/absensi-web-v2/blob/main/src/layouts/UserLayout.jsx): `src/layouts/UserLayout.jsx`

### Employee attendance

- [Home and schedule](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/user/Beranda.jsx): `src/pages/user/Beranda.jsx`
- [Location attendance](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/user/Absen.jsx): `src/pages/user/Absen.jsx`
- [Attendance history](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/user/Riwayat.jsx): `src/pages/user/Riwayat.jsx`
- [Profile changes](https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/user/EditProfileModal.jsx): `src/components/user/EditProfileModal.jsx`
- **Device GPS**

### Administration

- [Admin dashboard](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/Admin.jsx): `src/pages/admin/Admin.jsx`
- [Staff management](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/ManajemenPegawai.jsx): `src/pages/admin/ManajemenPegawai.jsx`
- [OPD management](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/ManajemenOpd.jsx): `src/pages/admin/ManajemenOpd.jsx`
- [Admin accounts](https://github.com/brandobogar/absensi-web-v2/blob/main/src/pages/admin/ManajemenAdmin.jsx): `src/pages/admin/ManajemenAdmin.jsx`
- [OPD and session settings](https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/admin/EditOpdModal.jsx): `src/components/admin/EditOpdModal.jsx`
- [Session editor](https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/admin/SesiModal.jsx): `src/components/admin/SesiModal.jsx`
- [Office map editor](https://github.com/brandobogar/absensi-web-v2/blob/main/src/components/admin/PetaModal.jsx): `src/components/admin/PetaModal.jsx`

### Backend and data

- [API client](https://github.com/brandobogar/absensi-web-v2/blob/main/src/api.js): `src/api.js`
- **Apps Script API**
- **Google Sheets**

### Other components

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

## Connections

- React entry → App and session: renders
- Employee → Login: signs in
- Administrator → Login: signs in
- Login → API client: requests login
- API client → Apps Script API: sends API requests
- Apps Script API → Google Sheets: reads and writes
- Login → App and session: reports login
- App and session → User navigation: renders user view
- User navigation → Home and schedule: selects tab
- User navigation → Location attendance: selects tab
- User navigation → Attendance history: selects tab
- App and session → Admin dashboard: renders admin view
- App and session → Staff management: dispatches page
- App and session → OPD management: dispatches page
- OPD management → Admin accounts: opens accounts
- OPD management → API client: requests OPD data
- Staff management → API client: requests staff actions
- Home and schedule → API client: loads status and config
- Home and schedule → Profile changes: opens profile editor
- Profile changes → API client: updates credentials
- Location attendance → Device GPS: reads coordinates
- Location attendance → API client: loads config and submits
- Attendance history → API client: loads attendance records
- OPD and session settings → Session editor: edits session times
- OPD and session settings → Office map editor: edits office location