# ironraymond04/capstone-project-galanza-pugales-sacabin architecture

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

- Interactive diagram: https://gitdiagram.com/ironraymond04/capstone-project-galanza-pugales-sacabin
- Repository: https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin

## Overview

This is a React campus helpdesk application. Users enter through public pages or sign in, then role-based routing sends students, staff, and administrators to separate dashboards. The student dashboard supports ticket submission and tracking; ticket classification is delegated to Gemini, while dashboard and authentication code use Supabase. Excerpts establish the router, authentication/profile lookup, student classification call, and student data access; several staff/admin interactions are visible only as imports or load-function names, so their specific data flows are not asserted.

Main entry points: [`src/App.jsx`](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/App.jsx) (Route application), [`src/lib/supabaseClient.js`](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/lib/supabaseClient.js) (Supabase client), [`src/pages/StudentDashboard.jsx`](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/StudentDashboard.jsx) (Student dashboard), [`src/pages/StaffDashboard.jsx`](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/StaffDashboard.jsx) (Staff dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Route application<br/>[App.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_howto["How it works<br/>[Howitworks.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_login["Login page<br/>[Login.jsx]"]
  node_signup["Signup page<br/>[Signup.jsx]"]
  node_auth["Auth context<br/>[AuthContext.jsx]"]
  node_guard["Role guard<br/>[ProtectedRoute.jsx]"]
  node_denied["Access denied<br/>[Unauthorized.jsx]"]
  node_supaclient["Supabase client<br/>[supabaseClient.js]"]
end

subgraph group_student["Student helpdesk"]
  node_studentdash["Student dashboard"]
  node_sidebar["Dashboard navigation<br/>[Sidebar.jsx]"]
  node_classifier["Ticket classifier<br/>[ai.js]"]
end

subgraph group_operations["Staff and administration"]
  node_staffdash["Staff dashboard<br/>[StaffDashboard.jsx]"]
  node_admindash["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_mobile["Viewport hook<br/>[useIsMobile.js]"]
end

node_user(("Helpdesk user"))
node_supabase[("Supabase service")]
node_gemini(("Gemini AI"))

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_howto
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_app -->|"provides"| node_auth
node_app -->|"guards"| node_guard
node_app -->|"routes to"| node_studentdash
node_app -->|"routes to"| node_staffdash
node_app -->|"routes to"| node_admindash
node_app -->|"routes to"| node_denied
node_guard -->|"reads role"| node_auth
node_auth -->|"loads profile"| node_supaclient
node_supaclient -->|"connects"| node_supabase
node_studentdash -->|"reads and writes"| node_supaclient
node_studentdash -->|"classifies concern"| node_classifier
node_classifier -->|"requests classification"| node_gemini
node_studentdash -->|"renders"| node_sidebar
node_staffdash -->|"renders"| node_sidebar
node_admindash -->|"renders"| node_sidebar
node_studentdash -->|"checks viewport"| node_mobile
node_staffdash -->|"checks viewport"| node_mobile
node_admindash -->|"checks viewport"| node_mobile
node_login -.->|"uses auth"| node_supaclient
node_signup -.->|"uses auth"| node_supaclient
node_staffdash -.->|"loads operations data"| node_supaclient
node_admindash -.->|"loads admin data"| node_supaclient

click node_app "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/App.jsx"
click node_home "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Home.jsx"
click node_howto "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Howitworks.jsx"
click node_login "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Login.jsx"
click node_signup "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Signup.jsx"
click node_auth "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/context/AuthContext.jsx"
click node_guard "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/components/ProtectedRoute.jsx"
click node_denied "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Unauthorized.jsx"
click node_supaclient "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/lib/supabaseClient.js"
click node_studentdash "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/StudentDashboard.jsx"
click node_sidebar "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/components/Sidebar.jsx"
click node_classifier "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/lib/ai.js"
click node_staffdash "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/StaffDashboard.jsx"
click node_admindash "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/AdminDashboard.jsx"
click node_mobile "https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/hooks/useIsMobile.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_app,node_home,node_howto,node_user toneBlue
class node_login,node_signup,node_auth,node_guard,node_denied,node_supaclient,node_supabase toneAmber
class node_studentdash,node_sidebar,node_classifier toneMint
class node_staffdash,node_admindash,node_mobile toneRose
class node_gemini toneIndigo
```

## Components

### App navigation

- [Route application](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/App.jsx): `src/App.jsx`
- [Home page](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [How it works](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Howitworks.jsx): `src/pages/Howitworks.jsx`

### Identity and access

- [Login page](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Signup page](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Signup.jsx): `src/pages/Signup.jsx`
- [Auth context](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Role guard](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`
- [Access denied](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/Unauthorized.jsx): `src/pages/Unauthorized.jsx`
- [Supabase client](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/lib/supabaseClient.js): `src/lib/supabaseClient.js`

### Student helpdesk

- [Student dashboard](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/StudentDashboard.jsx): `src/pages/StudentDashboard.jsx`
- [Dashboard navigation](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`
- [Ticket classifier](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/lib/ai.js): `src/lib/ai.js`

### Staff and administration

- [Staff dashboard](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/StaffDashboard.jsx): `src/pages/StaffDashboard.jsx`
- [Admin dashboard](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/pages/AdminDashboard.jsx): `src/pages/AdminDashboard.jsx`
- [Viewport hook](https://github.com/ironraymond04/capstone-project-galanza-pugales-sacabin/blob/main/src/hooks/useIsMobile.js): `src/hooks/useIsMobile.js`

### Other components

- **Helpdesk user**
- **Supabase service**
- **Gemini AI**

## Connections

- Helpdesk user → Route application: opens (evidence: `src/App.jsx`)
- Route application → Home page: routes to (evidence: `src/App.jsx`)
- Route application → How it works: routes to (evidence: `src/App.jsx`)
- Route application → Login page: routes to (evidence: `src/App.jsx`)
- Route application → Signup page: routes to (evidence: `src/App.jsx`)
- Route application → Auth context: provides (evidence: `src/App.jsx`)
- Route application → Role guard: guards (evidence: `src/App.jsx`)
- Route application → Student dashboard: routes to (evidence: `src/App.jsx`)
- Route application → Staff dashboard: routes to (evidence: `src/App.jsx`)
- Route application → Admin dashboard: routes to (evidence: `src/App.jsx`)
- Route application → Access denied: routes to (evidence: `src/App.jsx`)
- Role guard → Auth context: reads role (evidence: `src/components/ProtectedRoute.jsx`)
- Auth context → Supabase client: loads profile (evidence: `src/context/AuthContext.jsx`)
- Supabase client → Supabase service: connects (evidence: `src/lib/supabaseClient.js`)
- Student dashboard → Supabase client: reads and writes (evidence: `src/pages/StudentDashboard.jsx`)
- Student dashboard → Ticket classifier: classifies concern (evidence: `src/pages/StudentDashboard.jsx`)
- Ticket classifier → Gemini AI: requests classification (evidence: `src/lib/ai.js`)
- Student dashboard → Dashboard navigation: renders (evidence: `src/pages/StudentDashboard.jsx`)
- Staff dashboard → Dashboard navigation: renders (evidence: `src/pages/StaffDashboard.jsx`)
- Admin dashboard → Dashboard navigation: renders (evidence: `src/pages/AdminDashboard.jsx`)
- Student dashboard → Viewport hook: checks viewport (evidence: `src/pages/StudentDashboard.jsx`)
- Staff dashboard → Viewport hook: checks viewport (evidence: `src/pages/StaffDashboard.jsx`)
- Admin dashboard → Viewport hook: checks viewport (evidence: `src/pages/AdminDashboard.jsx`)
- Login page → Supabase client: uses auth (evidence: `src/pages/Login.jsx`)
- Signup page → Supabase client: uses auth (evidence: `src/pages/Signup.jsx`)
- Staff dashboard → Supabase client: loads operations data (evidence: `src/pages/StaffDashboard.jsx`)
- Admin dashboard → Supabase client: loads admin data (evidence: `src/pages/AdminDashboard.jsx`)