Site Architecture
Site Architecture
Section titled “Site Architecture”The Control Center is a Multi-Page Application (MPA) built with Vite, Handlebars partials, and ES modules. Source in src/, built to dist/.
CSS Design System
Section titled “CSS Design System”All colors, dimensions and shadows are defined in :root via CSS custom properties (--navy, --accent, --radius, etc.). Dark mode inverts the --gray-* and --bg/--white variables via the body.dark class.
MPA Navigation
Section titled “MPA Navigation”Each page is a separate HTML file in src/pages/. The sidebar highlights the active page via data-page matching the URL path. Navigation is standard anchor links.
Access Management (D1)
Section titled “Access Management (D1)”Permissions are managed via the Access Management page, backed by Cloudflare D1. Elements use the data-perm attribute (e.g. data-perm="page:operations"). On login, GET /api/access/role returns the user’s role, merged permissions, assigned sites, and profile info. JS adds .perm-granted to authorized elements.
| Role | Pages | SSH / TUGA / Quick Access |
|---|---|---|
| admin | All pages (including Access, Setup, Logs, Trigger Settings) | All SSH, TUGA, Quick Access |
| operator | Operations, Monitoring, API Health, Infra, Network, Troubleshoot, Codes, AI, Doc | SSH (main, proxy, rpidev), TUGA (all), QA (all) |
| viewer | Dashboard, Infra, Network, Troubleshoot, Codes, Doc | None |
| india | Dashboard, Infra, Network, Troubleshoot, Codes, Doc | None |
Each user can have per-user overrides on top of their role. For example, a Viewer with override "page:mon": true will also see the Monitoring page.
Permission Keys
Section titled “Permission Keys”| Category | Keys |
|---|---|
| Pages (15) | page:dashboard, page:infra, page:network, page:troubleshoot, page:codes, page:escalation, page:operations, page:mon, page:api-health, page:logs, page:doc, page:ai, page:access, page:setup, page:trigger-settings |
| SSH (7) | ssh:main, ssh:proxy, ssh:rpi1, ssh:rpi2, ssh:rpi3, ssh:rpi4, ssh:rpidev |
| Quick Access (3) | qa:zabbix, qa:zippin, qa:unifi |
| TUGA Doors (4) | tuga:door1, tuga:door2, tuga:door3, tuga:door4 |
API Endpoints
Section titled “API Endpoints”| Method | Action | Access |
|---|---|---|
| GET | /api/access/role — caller’s profile + permissions | All authenticated |
| GET | ?action=users — list all users | Admin only |
| GET | ?action=roles — list all roles | Admin only |
| GET | ?action=teams — list teams + members + sites | Admin only |
| GET | ?action=team-requests — pending requests | Admin only |
| POST | upsert-user — add/update user | Admin only |
| POST | delete-user — remove user | Admin only |
| POST | upsert-role — edit role permissions | Admin only |
| POST | approve-team-request — approve join request | Admin only |
| POST | deny-team-request — deny join request | Admin only |