# errorday/absensi-sekolah architecture

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

## Overview

SI-PRESENSI is a browser-based school attendance administration app. Users authenticate, then role-filtered navigation exposes a dashboard, class and student management, attendance/library scanning and reporting, and settings. Page components call a shared cookie-enabled API client; the backend and MongoDB are external to this repository. The excerpts establish several UI-to-API calls, but not the backend’s internal processing or dashboard/report details, so those links are limited to what is shown or documented in the sampled code.

Main entry points: [`src/App.js`](https://github.com/errorday/absensi-sekolah/blob/main/src/App.js) (App and navigation), [`src/lib/api.js`](https://github.com/errorday/absensi-sekolah/blob/main/src/lib/api.js) (API client), [`src/context/AuthContext.jsx`](https://github.com/errorday/absensi-sekolah/blob/main/src/context/AuthContext.jsx) (Session and login), [`src/pages/Login.jsx`](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Login.jsx) (Login screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Shell"]
  node_app["App and navigation<br/>[App.js]"]
  node_auth["Session and login<br/>[AuthContext.jsx]"]
  node_login["Login screen<br/>[Login.jsx]"]
end

subgraph group_domain["School Operations"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_classes["Class management<br/>[Kelas.jsx]"]
  node_students["Student management<br/>[Siswa.jsx]"]
  node_attendance["Attendance and library<br/>[Presensi.jsx]"]
  node_settings["School settings<br/>[Pengaturan.jsx]"]
end

subgraph group_foundation["Client Foundation"]
  node_api["API client<br/>[api.js]"]
end

node_user(("School user"))
node_backend["Application backend"]
node_face["Face recognition service"]
node_database[("MongoDB")]

node_user -->|"uses"| node_app
node_app -->|"provides session"| node_auth
node_app -->|"shows when signed out"| node_login
node_app -->|"routes dashboard"| node_dashboard
node_app -->|"routes classes"| node_classes
node_app -->|"routes students"| node_students
node_app -->|"routes attendance"| node_attendance
node_app -->|"routes settings"| node_settings
node_login -->|"calls login"| node_auth
node_auth -->|"requests session"| node_api
node_classes -->|"reads and writes"| node_api
node_students -->|"reads and writes"| node_api
node_attendance -->|"requests scan and reports"| node_api
node_settings -->|"loads and saves"| node_api
node_dashboard -->|"requests data"| node_api
node_api -.->|"sends HTTP requests"| node_backend
node_backend -.->|"reads and writes"| node_database
node_backend -.->|"may delegate recognition"| node_face

click node_app "https://github.com/errorday/absensi-sekolah/blob/main/src/App.js"
click node_auth "https://github.com/errorday/absensi-sekolah/blob/main/src/context/AuthContext.jsx"
click node_login "https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Login.jsx"
click node_dashboard "https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Dashboard.jsx"
click node_classes "https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Kelas.jsx"
click node_students "https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Siswa.jsx"
click node_attendance "https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Presensi.jsx"
click node_settings "https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Pengaturan.jsx"
click node_api "https://github.com/errorday/absensi-sekolah/blob/main/src/lib/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,node_auth,node_login,node_user toneBlue
class node_dashboard,node_classes,node_students,node_attendance,node_settings,node_database toneAmber
class node_api toneMint
class node_backend,node_face toneIndigo
```

## Components

### App Shell

- [App and navigation](https://github.com/errorday/absensi-sekolah/blob/main/src/App.js): `src/App.js`
- [Session and login](https://github.com/errorday/absensi-sekolah/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Login screen](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`

### School Operations

- [Dashboard](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Class management](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Kelas.jsx): `src/pages/Kelas.jsx`
- [Student management](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Siswa.jsx): `src/pages/Siswa.jsx`
- [Attendance and library](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Presensi.jsx): `src/pages/Presensi.jsx`
- [School settings](https://github.com/errorday/absensi-sekolah/blob/main/src/pages/Pengaturan.jsx): `src/pages/Pengaturan.jsx`

### Client Foundation

- [API client](https://github.com/errorday/absensi-sekolah/blob/main/src/lib/api.js): `src/lib/api.js`

### Other components

- **School user**
- **Application backend**
- **Face recognition service**
- **MongoDB**

## Connections

- School user → App and navigation: uses (evidence: `src/App.js`)
- App and navigation → Session and login: provides session (evidence: `src/App.js`)
- App and navigation → Login screen: shows when signed out (evidence: `src/App.js`)
- App and navigation → Dashboard: routes dashboard (evidence: `src/App.js`)
- App and navigation → Class management: routes classes (evidence: `src/App.js`)
- App and navigation → Student management: routes students (evidence: `src/App.js`)
- App and navigation → Attendance and library: routes attendance (evidence: `src/App.js`)
- App and navigation → School settings: routes settings (evidence: `src/App.js`)
- Login screen → Session and login: calls login (evidence: `src/pages/Login.jsx`)
- Session and login → API client: requests session (evidence: `src/context/AuthContext.jsx`)
- Class management → API client: reads and writes (evidence: `src/pages/Kelas.jsx`)
- Student management → API client: reads and writes (evidence: `src/pages/Siswa.jsx`)
- Attendance and library → API client: requests scan and reports (evidence: `src/pages/Presensi.jsx`)
- School settings → API client: loads and saves (evidence: `src/pages/Pengaturan.jsx`)
- Dashboard → API client: requests data (evidence: `src/pages/Dashboard.jsx`)
- API client → Application backend: sends HTTP requests
- Application backend → MongoDB: reads and writes
- Application backend → Face recognition service: may delegate recognition