# basuki-rahmat/pgni-lampung architecture

> Architecture diagram of the GitHub repository basuki-rahmat/pgni-lampung, 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/basuki-rahmat/pgni-lampung
- Repository: https://github.com/basuki-rahmat/pgni-lampung

## Overview

PGNI Provinsi Lampung is a browser-based directory and administration app for registering and verifying Qur’an teachers, publishing news, and checking registration status. Visitors can search the directory or submit a registration; officers log in to review records and update their status, while provincial administrators can publish news and use the MySQL export panel. App owns application state and persists it in browser local storage. Evidence is based on the supplied tree and excerpts; some component wiring and MySQLCenter implementation were not sampled, so uncertain connections are omitted.

Main entry points: [`src/App.tsx`](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/App.tsx) (App coordinator), [`src/components/RegistrationForm.tsx`](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/RegistrationForm.tsx) (Teacher registration), [`src/types.ts`](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/types.ts) (Domain types), [`src/components/LandingPage.tsx`](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/LandingPage.tsx) (Public landing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Public experience"]
  node_landing["Public landing<br/>[LandingPage.tsx]"]
  node_registration["Teacher registration"]
  node_news["News and articles<br/>[NewsSection.tsx]"]
end

subgraph group_operations["Officer operations"]
  node_login["Officer login<br/>[LoginForm.tsx]"]
  node_dashboard["Officer dashboard"]
  node_mysql["MySQL tools<br/>[MySQLCenter.tsx]"]
end

subgraph group_state["Application state"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_localstorage[("Browser storage")]
  node_seeddata["Initial records<br/>[initialData.ts]"]
end

subgraph group_utilities["Data utilities"]
  node_regions["Regional hierarchy<br/>[lampungData.ts]"]
  node_compressor["Image compressor<br/>[imageCompressor.ts]"]
  node_exporter["SQL exporter<br/>[sqlExporter.ts]"]
  node_types["Domain types<br/>[types.ts]"]
end

node_visitor(("Visitor"))
node_officer(("Officer"))

node_visitor -->|"browses"| node_landing
node_visitor -->|"submits"| node_registration
node_officer -->|"signs in"| node_login
node_officer -->|"manages records"| node_dashboard
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_login
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_news
node_app -->|"reads and writes"| node_localstorage
node_app -->|"seeds defaults"| node_seeddata
node_landing -->|"offers registration"| node_registration
node_registration -->|"compresses photos"| node_compressor
node_registration -->|"uses locations"| node_regions
node_dashboard -->|"shows tools"| node_mysql
node_mysql -->|"exports SQL"| node_exporter
node_app -->|"provides records"| node_exporter
node_app -->|"uses models"| node_types
node_landing -->|"uses models"| node_types
node_registration -->|"uses models"| node_types
node_dashboard -->|"uses models"| node_types
node_news -->|"uses models"| node_types

click node_app "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/App.tsx"
click node_landing "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/LandingPage.tsx"
click node_registration "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/RegistrationForm.tsx"
click node_login "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/LoginForm.tsx"
click node_dashboard "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/OfficerDashboard.tsx"
click node_news "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/NewsSection.tsx"
click node_mysql "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/MySQLCenter.tsx"
click node_seeddata "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/data/initialData.ts"
click node_regions "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/data/lampungData.ts"
click node_compressor "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/utils/imageCompressor.ts"
click node_exporter "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/utils/sqlExporter.ts"
click node_types "https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/types.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_landing,node_registration,node_news toneBlue
class node_login,node_dashboard,node_mysql toneAmber
class node_app,node_localstorage,node_seeddata toneMint
class node_regions,node_compressor,node_exporter,node_types toneRose
class node_visitor,node_officer toneIndigo
```

## Components

### Public experience

- [Public landing](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/LandingPage.tsx): `src/components/LandingPage.tsx`
- [Teacher registration](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/RegistrationForm.tsx): `src/components/RegistrationForm.tsx`
- [News and articles](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/NewsSection.tsx): `src/components/NewsSection.tsx`

### Officer operations

- [Officer login](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/LoginForm.tsx): `src/components/LoginForm.tsx`
- [Officer dashboard](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/OfficerDashboard.tsx): `src/components/OfficerDashboard.tsx`
- [MySQL tools](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/components/MySQLCenter.tsx): `src/components/MySQLCenter.tsx`

### Application state

- [App coordinator](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/App.tsx): `src/App.tsx`
- **Browser storage**
- [Initial records](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/data/initialData.ts): `src/data/initialData.ts`

### Data utilities

- [Regional hierarchy](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/data/lampungData.ts): `src/data/lampungData.ts`
- [Image compressor](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/utils/imageCompressor.ts): `src/utils/imageCompressor.ts`
- [SQL exporter](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/utils/sqlExporter.ts): `src/utils/sqlExporter.ts`
- [Domain types](https://github.com/basuki-rahmat/pgni-lampung/blob/main/src/types.ts): `src/types.ts`

### Other components

- **Visitor**
- **Officer**

## Connections

- Visitor → Public landing: browses
- Visitor → Teacher registration: submits
- Officer → Officer login: signs in
- Officer → Officer dashboard: manages records
- App coordinator → Public landing: renders
- App coordinator → Officer login: renders
- App coordinator → Officer dashboard: renders
- App coordinator → News and articles: renders
- App coordinator → Browser storage: reads and writes
- App coordinator → Initial records: seeds defaults
- Public landing → Teacher registration: offers registration
- Teacher registration → Image compressor: compresses photos
- Teacher registration → Regional hierarchy: uses locations
- Officer dashboard → MySQL tools: shows tools
- MySQL tools → SQL exporter: exports SQL
- App coordinator → SQL exporter: provides records
- App coordinator → Domain types: uses models
- Public landing → Domain types: uses models
- Teacher registration → Domain types: uses models
- Officer dashboard → Domain types: uses models
- News and articles → Domain types: uses models