How algi221/fe-ppdb-smk-tarunabhakti works
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: useDaftarPage.ts Registration wizard · PPDBContext.tsx PPDB state & actions · page.tsx Landing page · PaymentSummarySidebar.tsx Payment gate
Components 23
Public information
- Landing page
src/app/page.tsx - School & majors
src/app/jurusan/[code]/page.tsx - Blog & information
src/app/blog/page.tsx - Forum
src/app/forum/page.tsx
Enrollment
- Registration wizard
src/components/daftar/useDaftarPage.ts - Initial registration
src/components/daftar-tahap-1/Tahap1Form.tsx - Payment gate
src/components/daftar/payment/PaymentSummarySidebar.tsx - Invoice & verification
src/app/invoice/page.tsx
Administration
- Admin login
src/app/login/page.tsx - Applicant management
src/components/admin/pendaftar/useApplicantsDirectory.ts - Active students
src/components/dashboard/siswa-aktif/useActiveStudentsDirectory.ts - Class assignment
src/components/dashboard/pembagian-kelas/useClassDivisionDragAssign.ts - Payment arrears
src/components/dashboard/siswa-tidak-lancar/useSiswaTidakLancar.ts - Admin accounts
src/components/dashboard/admin/useAdminManagement.ts - Site configuration
src/components/dashboard/kelola-ui/useKelolaUi.ts - Information editor
src/components/dashboard/informasi/useInformationManagement.ts
Shared runtime
- PPDB state & actions
src/context/PPDBContext.tsx - Applicant API actions
src/context/usePPDBActions.ts - API service
src/context/ppdbApiService.ts
Other components
- Applicant / visitor
- REST / WebSocket backend
- Midtrans payment gateway
- PostgreSQL data
Connections 23
- 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