# dalouuu/dlsu-chorale-official-website architecture

> Architecture diagram of the GitHub repository dalouuu/dlsu-chorale-official-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dalouuu/dlsu-chorale-official-website
- Repository: https://github.com/dalouuu/dlsu-chorale-official-website

## Overview

This is a chorale management web app with member and admin portals, a public attendance kiosk, and Supabase-backed data and services. The principal workflow is member sign-in, role-specific portal use, and management of attendance, events, fees, and requests; HR incident handling adds a separate protected review stage. The graph groups documented capabilities even where their screens were not sampled. Edges are limited to relationships visible in excerpts or the README; several unsampled screen-to-data interactions are therefore not drawn.

Main entry points: [`High Fi DLSU Chorale Website/src/app/App.tsx`](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/App.tsx) (Router and state), [`supabase/functions/send-email/index.ts`](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/supabase/functions/send-email/index.ts) (Email proxy), [`High Fi DLSU Chorale Website/src/app/components/layout/Shell.tsx`](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/layout/Shell.tsx) (Portal shell), [`High Fi DLSU Chorale Website/src/app/data.ts`](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/data.ts) (Data loaders)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_app["Router and state<br/>[App.tsx]"]
  node_shell["Portal shell<br/>[Shell.tsx]"]
  node_login["Sign-in and setup<br/>[Login.tsx]"]
end

subgraph group_member["Member services"]
  node_kiosk["Attendance kiosk<br/>[RFIDKiosk.tsx]"]
  node_member_portal["Member portal"]
  node_events["Events and signups"]
  node_attendance["Attendance records"]
  node_excuses["Excuse requests<br/>[MemberExcuses.tsx]"]
  node_fees["Fees and payments<br/>[MemberFees.tsx]"]
  node_announcements["Announcements"]
  node_library["Music and rules"]
  node_profile["Member profile<br/>[MemberProfile.tsx]"]
  node_reports["Incident reporting"]
end

subgraph group_admin["Administration"]
  node_admin_tools["Admin workspace"]
  node_admin_events["Event management<br/>[AdminEvents.tsx]"]
  node_admin_home["Dashboard and analytics<br/>[AdminHome.tsx]"]
  node_admin_members["Member roster<br/>[AdminMembers.tsx]"]
  node_admin_attendance["Attendance oversight"]
  node_admin_excuses["Excuse approvals<br/>[AdminExcuses.tsx]"]
  node_admin_fees["Fee management<br/>[AdminFees.tsx]"]
  node_admin_library["Library management"]
  node_admin_rules["Rules management<br/>[AdminRules.tsx]"]
  node_admin_reports["HR incident review<br/>[AdminIncidents.tsx]"]
end

subgraph group_backend["Data and services"]
  node_data["Data loaders<br/>[data.ts]"]
  node_supabase_client["Supabase client<br/>[supabase.ts]"]
  node_database[("Supabase database")]
  node_storage[("Supabase storage")]
  node_edge_functions["Edge functions"]
  node_email_fn["Email proxy<br/>[index.ts]"]
  node_scheduled["Scheduled digests"]
end

subgraph group_shared["Shared interface"]
  node_shared_ui["Shared UI components"]
  node_theme["Theme tokens<br/>[theme.ts]"]
end

node_visitor(("Member or admin"))
node_resend["Resend email"]

node_visitor -->|"opens portal"| node_app
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_kiosk
node_app -->|"wraps portal"| node_shell
node_app -->|"initializes user data"| node_data
node_app -->|"routes screens"| node_member_portal
node_shell -->|"renders"| node_shared_ui
node_shell -->|"reads app data"| node_data
node_app -->|"routes screens"| node_admin_tools
node_data -->|"queries through"| node_supabase_client
node_supabase_client -.->|"reads and writes"| node_database
node_member_portal -.->|"stores profile and evidence"| node_storage
node_admin_events -->|"sends notifications"| node_email_fn
node_email_fn -->|"sends mail"| node_resend
node_email_fn -.->|"belongs to"| node_edge_functions
node_scheduled -->|"scheduled jobs"| node_database
node_scheduled -.->|"sends reminders"| node_email_fn
node_shared_ui -.->|"uses tokens"| node_theme

click node_app "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/App.tsx"
click node_shell "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/layout/Shell.tsx"
click node_login "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/Login.tsx"
click node_kiosk "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/RFIDKiosk.tsx"
click node_member_portal "https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens"
click node_events "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberPerformances.tsx"
click node_attendance "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberAttendance.tsx"
click node_excuses "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberExcuses.tsx"
click node_fees "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberFees.tsx"
click node_announcements "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberAnnouncements.tsx"
click node_library "https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens"
click node_profile "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberProfile.tsx"
click node_reports "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberIncidents.tsx"
click node_admin_tools "https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens"
click node_admin_events "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminEvents.tsx"
click node_admin_home "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminHome.tsx"
click node_admin_members "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminMembers.tsx"
click node_admin_attendance "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminAttendance.tsx"
click node_admin_excuses "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminExcuses.tsx"
click node_admin_fees "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminFees.tsx"
click node_admin_library "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminMusicLibrary.tsx"
click node_admin_rules "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminRules.tsx"
click node_admin_reports "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminIncidents.tsx"
click node_data "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/data.ts"
click node_supabase_client "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/supabase.ts"
click node_edge_functions "https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/supabase/functions"
click node_email_fn "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/supabase/functions/send-email/index.ts"
click node_scheduled "https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/supabase/functions"
click node_shared_ui "https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/ui"
click node_theme "https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/theme.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_shell,node_login toneBlue
class node_kiosk,node_member_portal,node_events,node_attendance,node_excuses,node_fees,node_announcements,node_library,node_profile,node_reports toneAmber
class node_admin_tools,node_admin_events,node_admin_home,node_admin_members,node_admin_attendance,node_admin_excuses,node_admin_fees,node_admin_library,node_admin_rules,node_admin_reports toneMint
class node_data,node_supabase_client,node_database,node_storage,node_edge_functions,node_email_fn,node_scheduled toneRose
class node_shared_ui,node_theme,node_visitor,node_resend toneIndigo
```

## Components

### Application entry

- [Router and state](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/App.tsx): `High Fi DLSU Chorale Website/src/app/App.tsx`
- [Portal shell](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/layout/Shell.tsx): `High Fi DLSU Chorale Website/src/app/components/layout/Shell.tsx`
- [Sign-in and setup](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/Login.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/Login.tsx`

### Member services

- [Attendance kiosk](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/RFIDKiosk.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/RFIDKiosk.tsx`
- [Member portal](https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens): `High Fi DLSU Chorale Website/src/app/components/screens`
- [Events and signups](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberPerformances.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberPerformances.tsx`
- [Attendance records](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberAttendance.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberAttendance.tsx`
- [Excuse requests](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberExcuses.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberExcuses.tsx`
- [Fees and payments](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberFees.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberFees.tsx`
- [Announcements](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberAnnouncements.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberAnnouncements.tsx`
- [Music and rules](https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens): `High Fi DLSU Chorale Website/src/app/components/screens`
- [Member profile](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberProfile.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberProfile.tsx`
- [Incident reporting](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/MemberIncidents.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/MemberIncidents.tsx`

### Administration

- [Admin workspace](https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens): `High Fi DLSU Chorale Website/src/app/components/screens`
- [Event management](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminEvents.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminEvents.tsx`
- [Dashboard and analytics](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminHome.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminHome.tsx`
- [Member roster](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminMembers.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminMembers.tsx`
- [Attendance oversight](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminAttendance.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminAttendance.tsx`
- [Excuse approvals](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminExcuses.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminExcuses.tsx`
- [Fee management](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminFees.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminFees.tsx`
- [Library management](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminMusicLibrary.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminMusicLibrary.tsx`
- [Rules management](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminRules.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminRules.tsx`
- [HR incident review](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/screens/AdminIncidents.tsx): `High Fi DLSU Chorale Website/src/app/components/screens/AdminIncidents.tsx`

### Data and services

- [Data loaders](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/data.ts): `High Fi DLSU Chorale Website/src/app/data.ts`
- [Supabase client](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/supabase.ts): `High Fi DLSU Chorale Website/src/app/supabase.ts`
- **Supabase database**
- **Supabase storage**
- [Edge functions](https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/supabase/functions): `supabase/functions`
- [Email proxy](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/supabase/functions/send-email/index.ts): `supabase/functions/send-email/index.ts`
- [Scheduled digests](https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/supabase/functions): `supabase/functions`

### Shared interface

- [Shared UI components](https://github.com/dalouuu/dlsu-chorale-official-website/tree/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/components/ui): `High Fi DLSU Chorale Website/src/app/components/ui`
- [Theme tokens](https://github.com/dalouuu/dlsu-chorale-official-website/blob/main/High%20Fi%20DLSU%20Chorale%20Website/src/app/theme.ts): `High Fi DLSU Chorale Website/src/app/theme.ts`

### Other components

- **Member or admin**
- **Resend email**

## Connections

- Member or admin → Router and state: opens portal (evidence: `README.md`)
- Router and state → Sign-in and setup: routes to (evidence: `High Fi DLSU Chorale Website/src/app/App.tsx`)
- Router and state → Attendance kiosk: routes to (evidence: `High Fi DLSU Chorale Website/src/app/App.tsx`)
- Router and state → Portal shell: wraps portal (evidence: `High Fi DLSU Chorale Website/src/app/App.tsx`)
- Router and state → Data loaders: initializes user data (evidence: `High Fi DLSU Chorale Website/src/app/App.tsx`)
- Router and state → Member portal: routes screens (evidence: `High Fi DLSU Chorale Website/src/app/App.tsx`)
- Portal shell → Shared UI components: renders (evidence: `High Fi DLSU Chorale Website/src/app/components/layout/Shell.tsx`)
- Portal shell → Data loaders: reads app data (evidence: `High Fi DLSU Chorale Website/src/app/components/layout/Shell.tsx`)
- Router and state → Admin workspace: routes screens (evidence: `High Fi DLSU Chorale Website/src/app/App.tsx`)
- Data loaders → Supabase client: queries through (evidence: `High Fi DLSU Chorale Website/src/app/data.ts`)
- Supabase client → Supabase database: reads and writes (evidence: `README.md`)
- Member portal → Supabase storage: stores profile and evidence (evidence: `README.md`)
- Event management → Email proxy: sends notifications (evidence: `High Fi DLSU Chorale Website/src/app/components/screens/AdminEvents.tsx`)
- Email proxy → Resend email: sends mail (evidence: `README.md`)
- Email proxy → Edge functions: belongs to
- Scheduled digests → Supabase database: scheduled jobs (evidence: `README.md`)
- Scheduled digests → Email proxy: sends reminders (evidence: `README.md`)
- Shared UI components → Theme tokens: uses tokens (evidence: `README.md`)