# cth-sla/cthsonlav2 architecture

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

- Interactive diagram: https://gitdiagram.com/cth-sla/cthsonlav2
- Repository: https://github.com/cth-sla/cthsonlav2

## Overview

CTH SLA Platform manages online-meeting schedules and operations. Users can view public upcoming meetings or log in to an administrative dashboard, where the app supports meeting management, monitoring, reporting, operator/account administration, and system configuration. The client’s database facade coordinates remote MySQL operations with local browser storage as a fallback; the backend also maintains a query cache. The tree and sampled excerpts support these main boundaries, but not all UI handlers or API routing details, so uncertain feature-level wiring is omitted.

Main entry points: [`App.tsx`](https://github.com/cth-sla/cthsonlav2/blob/main/App.tsx) (App shell), [`services/supabaseService.ts`](https://github.com/cth-sla/cthsonlav2/blob/main/services/supabaseService.ts) (Data sync facade), [`components/ReportsPage.tsx`](https://github.com/cth-sla/cthsonlav2/blob/main/components/ReportsPage.tsx) (Reports), [`services/geminiService.ts`](https://github.com/cth-sla/cthsonlav2/blob/main/services/geminiService.ts) (Meeting AI analysis)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_app["App shell<br/>[App.tsx]"]
  node_login["Login and public view<br/>[LoginView.tsx]"]
  node_dashboard["Dashboard metrics<br/>[App.tsx]"]
end

subgraph group_operations["Meeting operations"]
  node_meeting_ui["Meeting calendar and lists"]
  node_meeting_detail["Meeting details"]
  node_meeting_create["Create meeting"]
  node_precheck["Meeting pre-check"]
  node_monitoring["Endpoint monitoring<br/>[MonitoringGrid.tsx]"]
  node_reports["Reports<br/>[ReportsPage.tsx]"]
  node_ai["Meeting AI analysis<br/>[geminiService.ts]"]
end

subgraph group_admin["Administration"]
  node_management["System management<br/>[ManagementPage.tsx]"]
  node_users["User administration<br/>[UserManagement.tsx]"]
  node_operators["Operator administration"]
end

subgraph group_data["Data services"]
  node_facade["Data sync facade<br/>[supabaseService.ts]"]
  node_mysql_client["MySQL API client<br/>[mysqlService.ts]"]
  node_local_store[("Browser storage<br/>[storageService.ts]")]
end

subgraph group_backend["Backend"]
  node_api_server["API server<br/>[server.ts]"]
  node_mysql_db[("MySQL database")]
end

node_user(("Staff or visitor"))
node_gemini{{"Google Gemini"}}

node_user -->|"opens"| node_login
node_user -->|"uses"| node_app
node_app -->|"renders"| node_login
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_meeting_ui
node_app -->|"renders"| node_meeting_detail
node_app -->|"renders"| node_meeting_create
node_app -->|"renders"| node_monitoring
node_app -->|"renders"| node_reports
node_app -->|"renders"| node_management
node_app -->|"renders"| node_users
node_app -->|"renders"| node_operators
node_app -->|"calls"| node_facade
node_app -->|"reads settings"| node_local_store
node_facade -->|"delegates"| node_mysql_client
node_facade -->|"fallback reads/writes"| node_local_store
node_mysql_client -->|"requests"| node_api_server
node_api_server -->|"queries"| node_mysql_db
node_reports -.->|"optional analysis"| node_ai
node_ai -->|"generates analysis"| node_gemini

click node_app "https://github.com/cth-sla/cthsonlav2/blob/main/App.tsx"
click node_login "https://github.com/cth-sla/cthsonlav2/blob/main/components/LoginView.tsx"
click node_dashboard "https://github.com/cth-sla/cthsonlav2/blob/main/App.tsx"
click node_meeting_ui "https://github.com/cth-sla/cthsonlav2/blob/main/components/MeetingCalendar.tsx"
click node_meeting_detail "https://github.com/cth-sla/cthsonlav2/blob/main/components/MeetingDetailModal.tsx"
click node_meeting_create "https://github.com/cth-sla/cthsonlav2/blob/main/components/CreateMeetingModal.tsx"
click node_precheck "https://github.com/cth-sla/cthsonlav2/blob/main/components/MeetingPreCheck.tsx"
click node_monitoring "https://github.com/cth-sla/cthsonlav2/blob/main/components/MonitoringGrid.tsx"
click node_reports "https://github.com/cth-sla/cthsonlav2/blob/main/components/ReportsPage.tsx"
click node_ai "https://github.com/cth-sla/cthsonlav2/blob/main/services/geminiService.ts"
click node_management "https://github.com/cth-sla/cthsonlav2/blob/main/components/ManagementPage.tsx"
click node_users "https://github.com/cth-sla/cthsonlav2/blob/main/components/UserManagement.tsx"
click node_operators "https://github.com/cth-sla/cthsonlav2/blob/main/components/OperatorManagement.tsx"
click node_facade "https://github.com/cth-sla/cthsonlav2/blob/main/services/supabaseService.ts"
click node_mysql_client "https://github.com/cth-sla/cthsonlav2/blob/main/services/mysqlService.ts"
click node_local_store "https://github.com/cth-sla/cthsonlav2/blob/main/services/storageService.ts"
click node_api_server "https://github.com/cth-sla/cthsonlav2/blob/main/server.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_app,node_login,node_dashboard toneBlue
class node_meeting_ui,node_meeting_detail,node_meeting_create,node_precheck,node_monitoring,node_reports,node_ai toneAmber
class node_management,node_users,node_operators toneMint
class node_facade,node_mysql_client,node_local_store toneRose
class node_api_server,node_mysql_db,node_user,node_gemini toneIndigo
```

## Components

### User experience

- [App shell](https://github.com/cth-sla/cthsonlav2/blob/main/App.tsx): `App.tsx`
- [Login and public view](https://github.com/cth-sla/cthsonlav2/blob/main/components/LoginView.tsx): `components/LoginView.tsx`
- [Dashboard metrics](https://github.com/cth-sla/cthsonlav2/blob/main/App.tsx): `App.tsx`

### Meeting operations

- [Meeting calendar and lists](https://github.com/cth-sla/cthsonlav2/blob/main/components/MeetingCalendar.tsx): `components/MeetingCalendar.tsx`
- [Meeting details](https://github.com/cth-sla/cthsonlav2/blob/main/components/MeetingDetailModal.tsx): `components/MeetingDetailModal.tsx`
- [Create meeting](https://github.com/cth-sla/cthsonlav2/blob/main/components/CreateMeetingModal.tsx): `components/CreateMeetingModal.tsx`
- [Meeting pre-check](https://github.com/cth-sla/cthsonlav2/blob/main/components/MeetingPreCheck.tsx): `components/MeetingPreCheck.tsx`
- [Endpoint monitoring](https://github.com/cth-sla/cthsonlav2/blob/main/components/MonitoringGrid.tsx): `components/MonitoringGrid.tsx`
- [Reports](https://github.com/cth-sla/cthsonlav2/blob/main/components/ReportsPage.tsx): `components/ReportsPage.tsx`
- [Meeting AI analysis](https://github.com/cth-sla/cthsonlav2/blob/main/services/geminiService.ts): `services/geminiService.ts`

### Administration

- [System management](https://github.com/cth-sla/cthsonlav2/blob/main/components/ManagementPage.tsx): `components/ManagementPage.tsx`
- [User administration](https://github.com/cth-sla/cthsonlav2/blob/main/components/UserManagement.tsx): `components/UserManagement.tsx`
- [Operator administration](https://github.com/cth-sla/cthsonlav2/blob/main/components/OperatorManagement.tsx): `components/OperatorManagement.tsx`

### Data services

- [Data sync facade](https://github.com/cth-sla/cthsonlav2/blob/main/services/supabaseService.ts): `services/supabaseService.ts`
- [MySQL API client](https://github.com/cth-sla/cthsonlav2/blob/main/services/mysqlService.ts): `services/mysqlService.ts`
- [Browser storage](https://github.com/cth-sla/cthsonlav2/blob/main/services/storageService.ts): `services/storageService.ts`

### Backend

- [API server](https://github.com/cth-sla/cthsonlav2/blob/main/server.ts): `server.ts`
- **MySQL database**

### Other components

- **Staff or visitor**
- **Google Gemini**

## Connections

- Staff or visitor → Login and public view: opens
- Staff or visitor → App shell: uses
- App shell → Login and public view: renders
- App shell → Dashboard metrics: renders
- App shell → Meeting calendar and lists: renders
- App shell → Meeting details: renders
- App shell → Create meeting: renders
- App shell → Endpoint monitoring: renders
- App shell → Reports: renders
- App shell → System management: renders
- App shell → User administration: renders
- App shell → Operator administration: renders
- App shell → Data sync facade: calls
- App shell → Browser storage: reads settings
- Data sync facade → MySQL API client: delegates
- Data sync facade → Browser storage: fallback reads/writes
- MySQL API client → API server: requests
- API server → MySQL database: queries
- Reports → Meeting AI analysis: optional analysis
- Meeting AI analysis → Google Gemini: generates analysis