# smart-campus-portal/scp-frontend architecture

> Architecture diagram of the GitHub repository smart-campus-portal/scp-frontend, 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/smart-campus-portal/scp-frontend
- Repository: https://github.com/smart-campus-portal/scp-frontend

## Overview

Smart Campus Portal is a role-based frontend for student, lecturer, and administrator workflows. Users sign in, then enter protected dashboards for campus bookings and schedules, maintenance issues, or account and system administration. The sampled code confirms authentication and selected API calls, while the file tree identifies additional feature areas whose internal wiring was not sampled; those are represented as routed capabilities without speculative service links.

Main entry points: [`src/components/DashboardLayoutStudent.js`](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/components/DashboardLayoutStudent.js) (Student Dashboard), [`src/components/DashboardLayoutAdmin.js`](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/components/DashboardLayoutAdmin.js) (Admin Dashboard Shell), [`src/pages/lecturer/LecturerDashboard.js`](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/LecturerDashboard.js) (Lecturer Dashboard), [`src/App.js`](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/App.js) (Route Application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and Shell"]
  node_app["Route Application<br/>[App.js]"]
  node_login["Sign In<br/>[LoginPage.js]"]
  node_guard["Role Guard<br/>[ProtectedRoute.js]"]
  node_student_shell["Student Dashboard"]
  node_admin_shell["Admin Dashboard Shell"]
end

subgraph group_student["Student Services"]
  node_student_home["Student Home<br/>[DashboardHome.js]"]
  node_student_booking["Room and Lecture Booking<br/>[BookStudyRoom.js]"]
  node_student_schedule["Schedules and Rooms<br/>[LectureSchedule.js]"]
  node_student_bookings["My Bookings<br/>[MyBookings.js]"]
  node_student_issues["Student Issues<br/>[ReportIssue.js]"]
  node_student_community["Profile and Announcements<br/>[StudentProfile.js]"]
end

subgraph group_lecturer["Lecturer Services"]
  node_lecturer_shell["Lecturer Dashboard"]
  node_lecturer_appointments["Appointment Bookings<br/>[appt_bookings.jsx]"]
  node_lecturer_timetable["Timetable Management"]
  node_lecturer_issues["Lecturer Issues"]
end

subgraph group_admin["Administration"]
  node_admin_accounts["Account Administration"]
  node_admin_issues["Issue Management"]
  node_admin_analytics["System Analytics<br/>[AdminDashboard.js]"]
  node_admin_reports["System Reports"]
  node_admin_notifications["Notifications"]
end

subgraph group_shared["Shared State"]
  node_user_context["Account and Activity State<br/>[UserContext.js]"]
end

node_user(("Campus User"))
node_backend{{"Campus API"}}

node_user -->|"opens portal"| node_app
node_app -->|"routes public"| node_login
node_app -->|"checks protected routes"| node_guard
node_guard -->|"admits student"| node_student_shell
node_guard -->|"admits lecturer"| node_lecturer_shell
node_guard -->|"admits admin"| node_admin_shell
node_login -->|"authenticates"| node_backend
node_login -->|"stores session"| node_user
node_student_shell -->|"routes student pages"| node_student_home
node_student_shell -->|"routes student pages"| node_student_booking
node_student_shell -->|"routes student pages"| node_student_schedule
node_student_shell -->|"routes student pages"| node_student_bookings
node_student_shell -->|"routes student pages"| node_student_issues
node_student_shell -->|"routes student pages"| node_student_community
node_student_booking -->|"searches and books rooms"| node_backend
node_lecturer_shell -->|"renders nested route"| node_lecturer_appointments
node_lecturer_shell -->|"renders nested route"| node_lecturer_timetable
node_lecturer_shell -->|"renders nested route"| node_lecturer_issues
node_lecturer_shell -->|"fetches issues and notifications"| node_backend
node_admin_shell -->|"routes admin pages"| node_admin_accounts
node_admin_shell -->|"routes admin pages"| node_admin_issues
node_admin_shell -->|"routes admin pages"| node_admin_analytics
node_admin_shell -->|"routes admin pages"| node_admin_reports
node_admin_shell -->|"routes admin pages"| node_admin_notifications
node_admin_analytics -->|"fetches dashboard data"| node_backend
node_app -->|"provides account state"| node_user_context

click node_app "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/App.js"
click node_login "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/LoginPage.js"
click node_guard "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/ProtectedRoute.js"
click node_student_shell "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/components/DashboardLayoutStudent.js"
click node_lecturer_shell "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/LecturerDashboard.js"
click node_admin_shell "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/components/DashboardLayoutAdmin.js"
click node_student_home "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/DashboardHome.js"
click node_student_booking "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/BookStudyRoom.js"
click node_student_schedule "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/LectureSchedule.js"
click node_student_bookings "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/MyBookings.js"
click node_student_issues "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/ReportIssue.js"
click node_student_community "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/StudentProfile.js"
click node_lecturer_appointments "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/appt_bookings.jsx"
click node_lecturer_timetable "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/update_timetable.jsx"
click node_lecturer_issues "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/lect_report_issue.jsx"
click node_admin_accounts "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/CreateUserAccounts.js"
click node_admin_issues "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/AdminIssueManagement.js"
click node_admin_analytics "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/AdminDashboard.js"
click node_admin_reports "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/GenerateSystemReport.js"
click node_admin_notifications "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/NotificationPage.js"
click node_user_context "https://github.com/smart-campus-portal/scp-frontend/blob/main/src/Context/UserContext.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_login,node_guard,node_student_shell,node_admin_shell,node_user toneBlue
class node_student_home,node_student_booking,node_student_schedule,node_student_bookings,node_student_issues,node_student_community toneAmber
class node_lecturer_shell,node_lecturer_appointments,node_lecturer_timetable,node_lecturer_issues,node_backend toneMint
class node_admin_accounts,node_admin_issues,node_admin_analytics,node_admin_reports,node_admin_notifications toneRose
class node_user_context toneIndigo
```

## Components

### Access and Shell

- [Route Application](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/App.js): `src/App.js`
- [Sign In](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/LoginPage.js): `src/pages/LoginPage.js`
- [Role Guard](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/ProtectedRoute.js): `src/pages/ProtectedRoute.js`
- [Student Dashboard](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/components/DashboardLayoutStudent.js): `src/components/DashboardLayoutStudent.js`
- [Admin Dashboard Shell](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/components/DashboardLayoutAdmin.js): `src/components/DashboardLayoutAdmin.js`

### Student Services

- [Student Home](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/DashboardHome.js): `src/pages/student/DashboardHome.js`
- [Room and Lecture Booking](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/BookStudyRoom.js): `src/pages/student/BookStudyRoom.js`
- [Schedules and Rooms](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/LectureSchedule.js): `src/pages/student/LectureSchedule.js`
- [My Bookings](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/MyBookings.js): `src/pages/student/MyBookings.js`
- [Student Issues](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/ReportIssue.js): `src/pages/student/ReportIssue.js`
- [Profile and Announcements](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/student/StudentProfile.js): `src/pages/student/StudentProfile.js`

### Lecturer Services

- [Lecturer Dashboard](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/LecturerDashboard.js): `src/pages/lecturer/LecturerDashboard.js`
- [Appointment Bookings](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/appt_bookings.jsx): `src/pages/lecturer/appt_bookings.jsx`
- [Timetable Management](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/update_timetable.jsx): `src/pages/lecturer/update_timetable.jsx`
- [Lecturer Issues](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/lecturer/lect_report_issue.jsx): `src/pages/lecturer/lect_report_issue.jsx`

### Administration

- [Account Administration](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/CreateUserAccounts.js): `src/pages/admin/CreateUserAccounts.js`
- [Issue Management](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/AdminIssueManagement.js): `src/pages/admin/AdminIssueManagement.js`
- [System Analytics](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/AdminDashboard.js): `src/pages/admin/AdminDashboard.js`
- [System Reports](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/GenerateSystemReport.js): `src/pages/admin/GenerateSystemReport.js`
- [Notifications](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/pages/admin/NotificationPage.js): `src/pages/admin/NotificationPage.js`

### Shared State

- [Account and Activity State](https://github.com/smart-campus-portal/scp-frontend/blob/main/src/Context/UserContext.js): `src/Context/UserContext.js`

### Other components

- **Campus User**
- **Campus API**

## Connections

- Campus User → Route Application: opens portal
- Route Application → Sign In: routes public
- Route Application → Role Guard: checks protected routes
- Role Guard → Student Dashboard: admits student
- Role Guard → Lecturer Dashboard: admits lecturer
- Role Guard → Admin Dashboard Shell: admits admin
- Sign In → Campus API: authenticates
- Sign In → Campus User: stores session
- Student Dashboard → Student Home: routes student pages
- Student Dashboard → Room and Lecture Booking: routes student pages
- Student Dashboard → Schedules and Rooms: routes student pages
- Student Dashboard → My Bookings: routes student pages
- Student Dashboard → Student Issues: routes student pages
- Student Dashboard → Profile and Announcements: routes student pages
- Room and Lecture Booking → Campus API: searches and books rooms
- Lecturer Dashboard → Appointment Bookings: renders nested route
- Lecturer Dashboard → Timetable Management: renders nested route
- Lecturer Dashboard → Lecturer Issues: renders nested route
- Lecturer Dashboard → Campus API: fetches issues and notifications
- Admin Dashboard Shell → Account Administration: routes admin pages
- Admin Dashboard Shell → Issue Management: routes admin pages
- Admin Dashboard Shell → System Analytics: routes admin pages
- Admin Dashboard Shell → System Reports: routes admin pages
- Admin Dashboard Shell → Notifications: routes admin pages
- System Analytics → Campus API: fetches dashboard data
- Route Application → Account and Activity State: provides account state