# zammanzim/osistarpanone architecture

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

- Interactive diagram: https://gitdiagram.com/zammanzim/osistarpanone
- Repository: https://github.com/zammanzim/osistarpanone

## Overview

OSIS Tarpan One is a browser-based OSIS organization portal: users navigate a shared app, authenticate where required, and use public or member-facing features to view and manage organizational information. The domain spans communications and public content, member operations, planning, finance, and forms; feature modules access Supabase through a shared data layer. Offline queuing and media uploads are supporting runtime paths. Evidence is limited to the supplied tree and excerpts, so unsampled feature-to-feature wiring is omitted.

Main entry points: [`js/app.js`](https://github.com/zammanzim/osistarpanone/blob/main/js/app.js) (SPA navigation), [`js/db.js`](https://github.com/zammanzim/osistarpanone/blob/main/js/db.js) (Supabase data layer), [`js/outbox.js`](https://github.com/zammanzim/osistarpanone/blob/main/js/outbox.js) (Offline outbox), [`js/formulir.js`](https://github.com/zammanzim/osistarpanone/blob/main/js/formulir.js) (Form builder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_router["SPA navigation<br/>[app.js]"]
end

subgraph group_identity["Identity and media"]
  node_login["Login and access<br/>[osis-auth.js]"]
  node_media_worker["Media presign worker"]
  node_r2[("Cloudflare R2")]
end

subgraph group_content["Public information"]
  node_public_features["Public information<br/>[home.js]"]
  node_announcements["News and activities<br/>[informasi.js]"]
  node_media_content["Gallery and achievements<br/>[galeri.js]"]
end

subgraph group_operations["OSIS operations"]
  node_member_records["Members and attendance<br/>[anggota.js]"]
  node_planning["Programs and tasks<br/>[program.js]"]
  node_meetings["Meetings and archives<br/>[notulensi.js]"]
  node_finance["Finance and savings<br/>[keuangan.js]"]
  node_forms["Form builder<br/>[formulir.js]"]
  node_polling["Polling and feedback<br/>[polling.js]"]
end

subgraph group_runtime["Data and offline"]
  node_db["Supabase data layer<br/>[db.js]"]
  node_supabase[("Supabase")]
  node_outbox["Offline outbox<br/>[outbox.js]"]
  node_indexeddb[("Browser IndexedDB")]
  node_service_worker["PWA service worker<br/>[sw.js]"]
end

node_member(("OSIS member"))
node_visitor(("Public visitor"))
node_respondent(("Form respondent"))

node_member -->|"opens app"| node_router
node_visitor -->|"opens app"| node_router
node_respondent -->|"submits response"| node_forms
node_router -->|"initializes auth"| node_login
node_router -->|"routes to"| node_public_features
node_router -->|"routes to"| node_announcements
node_router -->|"routes to"| node_media_content
node_router -->|"routes to"| node_member_records
node_router -->|"routes to"| node_planning
node_router -->|"routes to"| node_meetings
node_router -->|"routes to"| node_finance
node_router -->|"routes to"| node_forms
node_router -->|"routes to"| node_polling
node_login -->|"authenticates"| node_supabase
node_login -->|"loads account"| node_db
node_public_features -->|"reads data"| node_db
node_announcements -->|"reads and writes"| node_db
node_media_content -->|"reads and writes"| node_db
node_member_records -->|"reads and writes"| node_db
node_planning -->|"reads and writes"| node_db
node_meetings -->|"reads and writes"| node_db
node_finance -->|"reads and writes"| node_db
node_forms -->|"reads and writes"| node_db
node_polling -->|"reads and writes"| node_db
node_db -->|"queries and RPCs"| node_supabase
node_forms -.->|"requests upload URL"| node_media_worker
node_media_worker -->|"validates identity"| node_supabase
node_media_worker -->|"signs upload"| node_r2
node_member_records -.->|"queues offline writes"| node_outbox
node_planning -.->|"queues offline writes"| node_outbox
node_finance -.->|"queues offline writes"| node_outbox
node_forms -.->|"queues offline writes"| node_outbox
node_outbox -->|"stores operations"| node_indexeddb
node_outbox -->|"replays operations"| node_db
node_service_worker -->|"serves cached shell"| node_member

click node_router "https://github.com/zammanzim/osistarpanone/blob/main/js/app.js"
click node_login "https://github.com/zammanzim/osistarpanone/blob/main/js/osis-auth.js"
click node_public_features "https://github.com/zammanzim/osistarpanone/blob/main/js/home.js"
click node_announcements "https://github.com/zammanzim/osistarpanone/blob/main/js/informasi.js"
click node_media_content "https://github.com/zammanzim/osistarpanone/blob/main/js/galeri.js"
click node_member_records "https://github.com/zammanzim/osistarpanone/blob/main/js/anggota.js"
click node_planning "https://github.com/zammanzim/osistarpanone/blob/main/js/program.js"
click node_meetings "https://github.com/zammanzim/osistarpanone/blob/main/js/notulensi.js"
click node_finance "https://github.com/zammanzim/osistarpanone/blob/main/js/keuangan.js"
click node_forms "https://github.com/zammanzim/osistarpanone/blob/main/js/formulir.js"
click node_polling "https://github.com/zammanzim/osistarpanone/blob/main/js/polling.js"
click node_db "https://github.com/zammanzim/osistarpanone/blob/main/js/db.js"
click node_outbox "https://github.com/zammanzim/osistarpanone/blob/main/js/outbox.js"
click node_service_worker "https://github.com/zammanzim/osistarpanone/blob/main/sw.js"
click node_media_worker "https://github.com/zammanzim/osistarpanone/blob/main/worker/osis-media-presign.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_router toneBlue
class node_login,node_media_worker,node_r2 toneAmber
class node_public_features,node_announcements,node_media_content toneMint
class node_member_records,node_planning,node_meetings,node_finance,node_forms,node_polling toneRose
class node_db,node_supabase,node_outbox,node_indexeddb,node_service_worker,node_member,node_visitor,node_respondent toneIndigo
```

## Components

### Application shell

- [SPA navigation](https://github.com/zammanzim/osistarpanone/blob/main/js/app.js): `js/app.js`

### Identity and media

- [Login and access](https://github.com/zammanzim/osistarpanone/blob/main/js/osis-auth.js): `js/osis-auth.js`
- [Media presign worker](https://github.com/zammanzim/osistarpanone/blob/main/worker/osis-media-presign.js): `worker/osis-media-presign.js`
- **Cloudflare R2**

### Public information

- [Public information](https://github.com/zammanzim/osistarpanone/blob/main/js/home.js): `js/home.js`
- [News and activities](https://github.com/zammanzim/osistarpanone/blob/main/js/informasi.js): `js/informasi.js`
- [Gallery and achievements](https://github.com/zammanzim/osistarpanone/blob/main/js/galeri.js): `js/galeri.js`

### OSIS operations

- [Members and attendance](https://github.com/zammanzim/osistarpanone/blob/main/js/anggota.js): `js/anggota.js`
- [Programs and tasks](https://github.com/zammanzim/osistarpanone/blob/main/js/program.js): `js/program.js`
- [Meetings and archives](https://github.com/zammanzim/osistarpanone/blob/main/js/notulensi.js): `js/notulensi.js`
- [Finance and savings](https://github.com/zammanzim/osistarpanone/blob/main/js/keuangan.js): `js/keuangan.js`
- [Form builder](https://github.com/zammanzim/osistarpanone/blob/main/js/formulir.js): `js/formulir.js`
- [Polling and feedback](https://github.com/zammanzim/osistarpanone/blob/main/js/polling.js): `js/polling.js`

### Data and offline

- [Supabase data layer](https://github.com/zammanzim/osistarpanone/blob/main/js/db.js): `js/db.js`
- **Supabase**
- [Offline outbox](https://github.com/zammanzim/osistarpanone/blob/main/js/outbox.js): `js/outbox.js`
- **Browser IndexedDB**
- [PWA service worker](https://github.com/zammanzim/osistarpanone/blob/main/sw.js): `sw.js`

### Other components

- **OSIS member**
- **Public visitor**
- **Form respondent**

## Connections

- OSIS member → SPA navigation: opens app
- Public visitor → SPA navigation: opens app
- Form respondent → Form builder: submits response
- SPA navigation → Login and access: initializes auth
- SPA navigation → Public information: routes to
- SPA navigation → News and activities: routes to
- SPA navigation → Gallery and achievements: routes to
- SPA navigation → Members and attendance: routes to
- SPA navigation → Programs and tasks: routes to
- SPA navigation → Meetings and archives: routes to
- SPA navigation → Finance and savings: routes to
- SPA navigation → Form builder: routes to
- SPA navigation → Polling and feedback: routes to
- Login and access → Supabase: authenticates
- Login and access → Supabase data layer: loads account
- Public information → Supabase data layer: reads data
- News and activities → Supabase data layer: reads and writes
- Gallery and achievements → Supabase data layer: reads and writes
- Members and attendance → Supabase data layer: reads and writes
- Programs and tasks → Supabase data layer: reads and writes
- Meetings and archives → Supabase data layer: reads and writes
- Finance and savings → Supabase data layer: reads and writes
- Form builder → Supabase data layer: reads and writes
- Polling and feedback → Supabase data layer: reads and writes
- Supabase data layer → Supabase: queries and RPCs
- Form builder → Media presign worker: requests upload URL
- Media presign worker → Supabase: validates identity
- Media presign worker → Cloudflare R2: signs upload
- Members and attendance → Offline outbox: queues offline writes
- Programs and tasks → Offline outbox: queues offline writes
- Finance and savings → Offline outbox: queues offline writes
- Form builder → Offline outbox: queues offline writes
- Offline outbox → Browser IndexedDB: stores operations
- Offline outbox → Supabase data layer: replays operations
- PWA service worker → OSIS member: serves cached shell