# algi221/fe-ppdb-smk-tarunabhakti architecture

> Architecture diagram of the GitHub repository algi221/fe-ppdb-smk-tarunabhakti, 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/algi221/fe-ppdb-smk-tarunabhakti
- Repository: https://github.com/algi221/fe-ppdb-smk-tarunabhakti

## Overview

This is the Next.js frontend for SMK Taruna Bhakti Depok’s PPDB system. The main applicant journey runs from public discovery through staged registration, payment, and registration confirmation; administrators then manage applicants and promote approved students into active-student records and classes. Public school information, announcements, and program pages are additional product capabilities. The README describes a REST/WebSocket backend, PostgreSQL, and Midtrans, but those implementations are outside the supplied file tree; backend connections are therefore represented as external services. Edges reflect documented behavior and sampled calls, not uninspected wiring.

Main entry points: [`src/components/daftar/useDaftarPage.ts`](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar/useDaftarPage.ts) (Registration wizard), [`src/context/PPDBContext.tsx`](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/PPDBContext.tsx) (PPDB state & actions), [`src/app/page.tsx`](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/page.tsx) (Landing page), [`src/components/daftar/payment/PaymentSummarySidebar.tsx`](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar/payment/PaymentSummarySidebar.tsx) (Payment gate)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public information"]
  node_home["Landing page<br/>[page.tsx]"]
  node_school["School &amp; majors<br/>[page.tsx]"]
  node_announcements["Blog &amp; information<br/>[page.tsx]"]
  node_forum["Forum<br/>[page.tsx]"]
end

subgraph group_enrollment["Enrollment"]
  node_register["Registration wizard<br/>[useDaftarPage.ts]"]
  node_stageone["Initial registration<br/>[Tahap1Form.tsx]"]
  node_payment["Payment gate"]
  node_invoice["Invoice &amp; verification<br/>[page.tsx]"]
end

subgraph group_admin["Administration"]
  node_login["Admin login<br/>[page.tsx]"]
  node_applicants["Applicant management"]
  node_active["Active students"]
  node_classes["Class assignment"]
  node_arrears["Payment arrears"]
  node_adminusers["Admin accounts"]
  node_siteconfig["Site configuration<br/>[useKelolaUi.ts]"]
  node_informationadmin["Information editor"]
end

subgraph group_shared["Shared runtime"]
  node_context["PPDB state &amp; actions<br/>[PPDBContext.tsx]"]
  node_actions["Applicant API actions<br/>[usePPDBActions.ts]"]
  node_apiservice["API service<br/>[ppdbApiService.ts]"]
end

node_visitor(("Applicant / visitor"))
node_backend["REST / WebSocket backend"]
node_midtrans["Midtrans payment gateway"]
node_database[("PostgreSQL data")]

node_visitor -->|"browses"| node_home
node_visitor -->|"starts application"| node_register
node_home -->|"opens programs"| node_school
node_visitor -->|"reads updates"| node_announcements
node_visitor -->|"visits forum"| node_forum
node_register -->|"begins registration"| node_stageone
node_register -->|"presents payment"| node_payment
node_payment -.->|"initiates payment"| node_midtrans
node_register -->|"registers applicant"| node_context
node_context -->|"dispatches actions"| node_actions
node_actions -->|"calls API"| node_apiservice
node_apiservice -->|"requests endpoints"| node_backend
node_backend -->|"reads / writes"| node_database
node_visitor -->|"views invoice"| node_invoice
node_visitor -->|"admin sign-in"| node_login
node_login -->|"uses session state"| node_context
node_applicants -->|"manages applicants"| node_context
node_active -->|"loads and updates students"| node_backend
node_classes -->|"assigns student classes"| node_backend
node_arrears -->|"manages arrears"| node_backend
node_adminusers -->|"manages accounts"| node_backend
node_siteconfig -->|"loads and saves config"| node_backend
node_informationadmin -->|"manages information"| node_backend

click node_home "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/page.tsx"
click node_school "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/jurusan/%5Bcode%5D/page.tsx"
click node_announcements "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/blog/page.tsx"
click node_forum "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/forum/page.tsx"
click node_register "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar/useDaftarPage.ts"
click node_stageone "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar-tahap-1/Tahap1Form.tsx"
click node_payment "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar/payment/PaymentSummarySidebar.tsx"
click node_invoice "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/invoice/page.tsx"
click node_login "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/login/page.tsx"
click node_applicants "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/admin/pendaftar/useApplicantsDirectory.ts"
click node_active "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/siswa-aktif/useActiveStudentsDirectory.ts"
click node_classes "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/pembagian-kelas/useClassDivisionDragAssign.ts"
click node_arrears "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/siswa-tidak-lancar/useSiswaTidakLancar.ts"
click node_adminusers "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/admin/useAdminManagement.ts"
click node_siteconfig "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/kelola-ui/useKelolaUi.ts"
click node_informationadmin "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/informasi/useInformationManagement.ts"
click node_context "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/PPDBContext.tsx"
click node_actions "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/usePPDBActions.ts"
click node_apiservice "https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/ppdbApiService.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_home,node_school,node_announcements,node_forum toneBlue
class node_register,node_stageone,node_payment,node_invoice,node_database toneAmber
class node_login,node_applicants,node_active,node_classes,node_arrears,node_adminusers,node_siteconfig,node_informationadmin toneMint
class node_context,node_actions,node_apiservice toneRose
class node_visitor,node_backend,node_midtrans toneIndigo
```

## Components

### Public information

- [Landing page](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [School & majors](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/jurusan/%5Bcode%5D/page.tsx): `src/app/jurusan/[code]/page.tsx`
- [Blog & information](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/blog/page.tsx): `src/app/blog/page.tsx`
- [Forum](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/forum/page.tsx): `src/app/forum/page.tsx`

### Enrollment

- [Registration wizard](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar/useDaftarPage.ts): `src/components/daftar/useDaftarPage.ts`
- [Initial registration](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar-tahap-1/Tahap1Form.tsx): `src/components/daftar-tahap-1/Tahap1Form.tsx`
- [Payment gate](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/daftar/payment/PaymentSummarySidebar.tsx): `src/components/daftar/payment/PaymentSummarySidebar.tsx`
- [Invoice & verification](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/invoice/page.tsx): `src/app/invoice/page.tsx`

### Administration

- [Admin login](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Applicant management](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/admin/pendaftar/useApplicantsDirectory.ts): `src/components/admin/pendaftar/useApplicantsDirectory.ts`
- [Active students](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/siswa-aktif/useActiveStudentsDirectory.ts): `src/components/dashboard/siswa-aktif/useActiveStudentsDirectory.ts`
- [Class assignment](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/pembagian-kelas/useClassDivisionDragAssign.ts): `src/components/dashboard/pembagian-kelas/useClassDivisionDragAssign.ts`
- [Payment arrears](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/siswa-tidak-lancar/useSiswaTidakLancar.ts): `src/components/dashboard/siswa-tidak-lancar/useSiswaTidakLancar.ts`
- [Admin accounts](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/admin/useAdminManagement.ts): `src/components/dashboard/admin/useAdminManagement.ts`
- [Site configuration](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/kelola-ui/useKelolaUi.ts): `src/components/dashboard/kelola-ui/useKelolaUi.ts`
- [Information editor](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/components/dashboard/informasi/useInformationManagement.ts): `src/components/dashboard/informasi/useInformationManagement.ts`

### Shared runtime

- [PPDB state & actions](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/PPDBContext.tsx): `src/context/PPDBContext.tsx`
- [Applicant API actions](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/usePPDBActions.ts): `src/context/usePPDBActions.ts`
- [API service](https://github.com/algi221/fe-ppdb-smk-tarunabhakti/blob/main/src/context/ppdbApiService.ts): `src/context/ppdbApiService.ts`

### Other components

- **Applicant / visitor**
- **REST / WebSocket backend**
- **Midtrans payment gateway**
- **PostgreSQL data**

## Connections

- Applicant / visitor → Landing page: browses
- Applicant / visitor → Registration wizard: starts application
- Landing page → School & majors: opens programs
- Applicant / visitor → Blog & information: reads updates
- Applicant / visitor → Forum: visits forum
- Registration wizard → Initial registration: begins registration
- Registration wizard → Payment gate: presents payment
- Payment gate → Midtrans payment gateway: initiates payment
- Registration wizard → PPDB state & actions: registers applicant
- PPDB state & actions → Applicant API actions: dispatches actions
- Applicant API actions → API service: calls API
- API service → REST / WebSocket backend: requests endpoints
- REST / WebSocket backend → PostgreSQL data: reads / writes
- Applicant / visitor → Invoice & verification: views invoice
- Applicant / visitor → Admin login: admin sign-in
- Admin login → PPDB state & actions: uses session state
- Applicant management → PPDB state & actions: manages applicants
- Active students → REST / WebSocket backend: loads and updates students
- Class assignment → REST / WebSocket backend: assigns student classes
- Payment arrears → REST / WebSocket backend: manages arrears
- Admin accounts → REST / WebSocket backend: manages accounts
- Site configuration → REST / WebSocket backend: loads and saves config
- Information editor → REST / WebSocket backend: manages information