# skimatt/dashboard_monitoring_bps architecture

> Architecture diagram of the GitHub repository skimatt/dashboard_monitoring_bps, 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/skimatt/dashboard_monitoring_bps
- Repository: https://github.com/skimatt/dashboard_monitoring_bps

## Overview

Dashboard Monitoring BPS Bireuen reads operational data from Google Sheets through Google Apps Script and presents monitoring views in a browser dashboard. Its principal workflow runs from sheet data through backend aggregation to overview, regional, staff, SLS, and risk analysis. Users can also search and export dashboard tables. The separate AI workflow sends browser-held dashboard context through a Cloudflare Worker to OpenRouter. Backend and frontend wiring is based on README documentation; source excerpts were available only for the Worker, so uncertain implementation details are omitted.

Main entry points: [`js.html`](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html) (Dashboard logic), [`cloudflare-worker.js`](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/cloudflare-worker.js) (AI proxy), [`kode.gs`](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/kode.gs) (Apps Script API), [`index.html`](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/index.html) (Dashboard layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_data["Operational data"]
  node_sheets[("Google Sheets")]
  node_apps_script["Apps Script API<br/>[kode.gs]"]
end

subgraph group_dashboard["Monitoring dashboard"]
  node_layout["Dashboard layout<br/>[index.html]"]
  node_styles["Dashboard styles<br/>[css.html]"]
  node_dashboard_logic["Dashboard logic<br/>[js.html]"]
  node_overview["Executive overview<br/>[js.html]"]
  node_regional["District analysis<br/>[js.html]"]
  node_staff["Staff analysis<br/>[js.html]"]
  node_sls["SLS details<br/>[js.html]"]
  node_risk["Risk monitor<br/>[js.html]"]
  node_search_export["Search and export<br/>[js.html]"]
end

subgraph group_assistant["AI assistant"]
  node_ai_drawer["AI chat drawer<br/>[ai.html]"]
end

subgraph group_ai_service["AI service"]
  node_worker["AI proxy"]
  node_worker_secret["Worker API secret"]
  node_openrouter["OpenRouter"]
end

node_user(("Dashboard user"))

node_user -->|"opens dashboard"| node_layout
node_layout -->|"loads interface"| node_dashboard_logic
node_layout -->|"applies styles"| node_styles
node_dashboard_logic -->|"requests data"| node_apps_script
node_apps_script -->|"reads sheets"| node_sheets
node_apps_script -->|"returns data"| node_dashboard_logic
node_dashboard_logic -->|"renders summary"| node_overview
node_dashboard_logic -->|"renders analysis"| node_regional
node_dashboard_logic -->|"renders analysis"| node_staff
node_dashboard_logic -->|"renders details"| node_sls
node_dashboard_logic -->|"renders risks"| node_risk
node_dashboard_logic -->|"handles search"| node_search_export
node_user -->|"asks question"| node_ai_drawer
node_ai_drawer -->|"sends context"| node_worker
node_worker -->|"reads secret"| node_worker_secret
node_worker -->|"forwards request"| node_openrouter
node_worker -->|"returns answer"| node_ai_drawer

click node_apps_script "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/kode.gs"
click node_layout "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/index.html"
click node_styles "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/css.html"
click node_dashboard_logic "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_overview "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_regional "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_staff "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_sls "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_risk "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_search_export "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html"
click node_ai_drawer "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/ai.html"
click node_worker "https://github.com/skimatt/dashboard_monitoring_bps/blob/main/cloudflare-worker.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_sheets,node_apps_script,node_user toneBlue
class node_layout,node_styles,node_dashboard_logic,node_overview,node_regional,node_staff,node_sls,node_risk,node_search_export toneAmber
class node_ai_drawer toneMint
class node_worker,node_worker_secret,node_openrouter toneRose
```

## Components

### Operational data

- **Google Sheets**
- [Apps Script API](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/kode.gs): `kode.gs`

### Monitoring dashboard

- [Dashboard layout](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/index.html): `index.html`
- [Dashboard styles](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/css.html): `css.html`
- [Dashboard logic](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`
- [Executive overview](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`
- [District analysis](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`
- [Staff analysis](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`
- [SLS details](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`
- [Risk monitor](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`
- [Search and export](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/js.html): `js.html`

### AI assistant

- [AI chat drawer](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/ai.html): `ai.html`

### AI service

- [AI proxy](https://github.com/skimatt/dashboard_monitoring_bps/blob/main/cloudflare-worker.js): `cloudflare-worker.js`
- **Worker API secret**
- **OpenRouter**

### Other components

- **Dashboard user**

## Connections

- Dashboard user → Dashboard layout: opens dashboard
- Dashboard layout → Dashboard logic: loads interface
- Dashboard layout → Dashboard styles: applies styles
- Dashboard logic → Apps Script API: requests data
- Apps Script API → Google Sheets: reads sheets
- Apps Script API → Dashboard logic: returns data
- Dashboard logic → Executive overview: renders summary
- Dashboard logic → District analysis: renders analysis
- Dashboard logic → Staff analysis: renders analysis
- Dashboard logic → SLS details: renders details
- Dashboard logic → Risk monitor: renders risks
- Dashboard logic → Search and export: handles search
- Dashboard user → AI chat drawer: asks question
- AI chat drawer → AI proxy: sends context
- AI proxy → Worker API secret: reads secret
- AI proxy → OpenRouter: forwards request
- AI proxy → AI chat drawer: returns answer