# rizapatiid/spahsppgtrangkil architecture

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

- Interactive diagram: https://gitdiagram.com/rizapatiid/spahsppgtrangkil
- Repository: https://github.com/rizapatiid/spahsppgtrangkil

## Overview

This is a role-based SPPG Trangkil volunteer operations application: administrators manage volunteers, divisions and accounts, while division staff record attendance and daily reports; supervisors review activity and issue coordination directions. Users access role-specific Next.js screens, which invoke server actions for operations. The tree also documents attendance summaries, history, profile management and printable exports. Sampled code confirms several client-to-action calls and the Cloudinary upload-signing flow. Most server-action implementations were not sampled, so their storage and service wiring is left unspecified.

Main entry points: [`src/lib/clientUpload.ts`](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/lib/clientUpload.ts) (Client uploads), [`src/app/dashboard/laporan/LaporanClient.tsx`](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/laporan/LaporanClient.tsx) (Daily reports), [`src/app/login/page.tsx`](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/login/page.tsx) (Login), [`src/app/api/auth/[...nextauth]/route.ts`](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/api/auth/%5B...nextauth%5D/route.ts) (Auth endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and profiles"]
  node_login["Login<br/>[page.tsx]"]
  node_authroute["Auth endpoint<br/>[route.ts]"]
  node_auth["Auth configuration<br/>[auth.ts]"]
  node_profile["Profile settings<br/>[ProfilClient.tsx]"]
  node_profileaction["Password action<br/>[profil.ts]"]
end

subgraph group_operations["Attendance and reports"]
  node_dashboard["Staff dashboard<br/>[page.tsx]"]
  node_attendance["Attendance entry<br/>[actions.ts]"]
  node_attendanceui["Attendance screen<br/>[AbsensiClient.tsx]"]
  node_reportui["Daily reports<br/>[LaporanClient.tsx]"]
  node_reportaction["Report actions<br/>[actions.ts]"]
  node_history["Activity history<br/>[RiwayatClient.tsx]"]
  node_print["Print views<br/>[page.tsx]"]
end

subgraph group_management["Administration"]
  node_admin["Admin workspace<br/>[page.tsx]"]
  node_volunteers["Volunteer management<br/>[RelawanClient.tsx]"]
  node_accounts["Accounts and divisions<br/>[UsersClient.tsx]"]
  node_adminattendance["Attendance oversight<br/>[AbsensiClient.tsx]"]
  node_matrix["Attendance matrix<br/>[actions.ts]"]
end

subgraph group_coordination["Coordination and media"]
  node_coordination["Coordination directions"]
end

subgraph group_platform["Shared services"]
  node_cloudsign["Upload signing<br/>[route.ts]"]
  node_upload["Client uploads<br/>[clientUpload.ts]"]
  node_cloudinary[("Cloudinary")]
end

node_user(("Staff user"))

node_user -->|"opens"| node_login
node_login -->|"signs in"| node_authroute
node_authroute -->|"uses"| node_auth
node_user -->|"uses"| node_dashboard
node_user -->|"uses"| node_admin
node_profile -->|"changes password"| node_profileaction
node_user -->|"records attendance"| node_attendanceui
node_attendanceui -->|"submits"| node_attendance
node_user -->|"submits report"| node_reportui
node_reportui -->|"manages report"| node_reportaction
node_reportui -->|"uploads photos"| node_upload
node_coordination -->|"uploads image"| node_upload
node_upload -->|"requests signature"| node_cloudsign
node_cloudsign -->|"signs upload"| node_cloudinary
node_upload -->|"uploads media"| node_cloudinary
node_user -->|"reviews activity"| node_history
node_user -->|"manages volunteers"| node_volunteers
node_user -->|"manages accounts"| node_accounts
node_user -->|"reviews attendance"| node_adminattendance
node_adminattendance -->|"resets records"| node_matrix
node_user -->|"manages directions"| node_coordination
node_user -->|"prints reports"| node_print

click node_login "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/login/page.tsx"
click node_authroute "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/api/auth/%5B...nextauth%5D/route.ts"
click node_auth "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/lib/auth.ts"
click node_profile "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/components/ProfilClient.tsx"
click node_profileaction "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/actions/profil.ts"
click node_dashboard "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/page.tsx"
click node_attendance "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/absensi/actions.ts"
click node_attendanceui "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/absensi/AbsensiClient.tsx"
click node_reportui "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/laporan/LaporanClient.tsx"
click node_reportaction "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/laporan/actions.ts"
click node_history "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/riwayat/RiwayatClient.tsx"
click node_admin "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/page.tsx"
click node_volunteers "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/relawan/RelawanClient.tsx"
click node_accounts "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/users/UsersClient.tsx"
click node_adminattendance "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/absensi/AbsensiClient.tsx"
click node_matrix "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/absensi-relawan/actions.ts"
click node_coordination "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/kordinasi/KordinasiClient.tsx"
click node_cloudsign "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/api/cloudinary/sign/route.ts"
click node_upload "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/lib/clientUpload.ts"
click node_print "https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/cetak-laporan/%5Bid%5D/page.tsx"

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_login,node_authroute,node_auth,node_profile,node_profileaction,node_user toneBlue
class node_dashboard,node_attendance,node_attendanceui,node_reportui,node_reportaction,node_history,node_print toneAmber
class node_admin,node_volunteers,node_accounts,node_adminattendance,node_matrix toneMint
class node_coordination toneRose
class node_cloudsign,node_upload,node_cloudinary toneIndigo
```

## Components

### Access and profiles

- [Login](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Auth endpoint](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/api/auth/%5B...nextauth%5D/route.ts): `src/app/api/auth/[...nextauth]/route.ts`
- [Auth configuration](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/lib/auth.ts): `src/lib/auth.ts`
- [Profile settings](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/components/ProfilClient.tsx): `src/components/ProfilClient.tsx`
- [Password action](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/actions/profil.ts): `src/app/actions/profil.ts`

### Attendance and reports

- [Staff dashboard](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/page.tsx): `src/app/dashboard/page.tsx`
- [Attendance entry](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/absensi/actions.ts): `src/app/dashboard/absensi/actions.ts`
- [Attendance screen](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/absensi/AbsensiClient.tsx): `src/app/dashboard/absensi/AbsensiClient.tsx`
- [Daily reports](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/laporan/LaporanClient.tsx): `src/app/dashboard/laporan/LaporanClient.tsx`
- [Report actions](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/laporan/actions.ts): `src/app/dashboard/laporan/actions.ts`
- [Activity history](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/dashboard/riwayat/RiwayatClient.tsx): `src/app/dashboard/riwayat/RiwayatClient.tsx`
- [Print views](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/cetak-laporan/%5Bid%5D/page.tsx): `src/app/cetak-laporan/[id]/page.tsx`

### Administration

- [Admin workspace](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/page.tsx): `src/app/admin/page.tsx`
- [Volunteer management](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/relawan/RelawanClient.tsx): `src/app/admin/relawan/RelawanClient.tsx`
- [Accounts and divisions](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/users/UsersClient.tsx): `src/app/admin/users/UsersClient.tsx`
- [Attendance oversight](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/absensi/AbsensiClient.tsx): `src/app/admin/absensi/AbsensiClient.tsx`
- [Attendance matrix](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/absensi-relawan/actions.ts): `src/app/admin/absensi-relawan/actions.ts`

### Coordination and media

- [Coordination directions](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/admin/kordinasi/KordinasiClient.tsx): `src/app/admin/kordinasi/KordinasiClient.tsx`

### Shared services

- [Upload signing](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/app/api/cloudinary/sign/route.ts): `src/app/api/cloudinary/sign/route.ts`
- [Client uploads](https://github.com/rizapatiid/spahsppgtrangkil/blob/main/src/lib/clientUpload.ts): `src/lib/clientUpload.ts`
- **Cloudinary**

### Other components

- **Staff user**

## Connections

- Staff user → Login: opens
- Login → Auth endpoint: signs in
- Auth endpoint → Auth configuration: uses
- Staff user → Staff dashboard: uses
- Staff user → Admin workspace: uses
- Profile settings → Password action: changes password
- Staff user → Attendance screen: records attendance
- Attendance screen → Attendance entry: submits
- Staff user → Daily reports: submits report
- Daily reports → Report actions: manages report
- Daily reports → Client uploads: uploads photos
- Coordination directions → Client uploads: uploads image
- Client uploads → Upload signing: requests signature
- Upload signing → Cloudinary: signs upload
- Client uploads → Cloudinary: uploads media
- Staff user → Activity history: reviews activity
- Staff user → Volunteer management: manages volunteers
- Staff user → Accounts and divisions: manages accounts
- Staff user → Attendance oversight: reviews attendance
- Attendance oversight → Attendance matrix: resets records
- Staff user → Coordination directions: manages directions
- Staff user → Print views: prints reports