# sarowar-islam/shcms-frontend architecture

> Architecture diagram of the GitHub repository sarowar-islam/shcms-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sarowar-islam/shcms-frontend
- Repository: https://github.com/sarowar-islam/shcms-frontend

## Overview

CUET-SHCMS is a role-based frontend for hostel complaint handling. Users enter through the public landing page or sign-in; the app restores authentication state and routes signed-in users to student, staff, or admin workspaces. The documented workflow covers student complaint submission and tracking, staff assignment/status updates, and admin oversight and configuration, with AI analysis presented as mock insights. The excerpts show app routing, auth/API plumbing, and some admin operations; several dashboard-to-service calls are not shown, so those links are left unverified.

Main entry points: [`src/App.tsx`](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/App.tsx) (App Router), [`src/services/api.ts`](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/services/api.ts) (API Services), [`src/views/AdminConsole.tsx`](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/AdminConsole.tsx) (Admin Console), [`src/views/StudentDashboard.tsx`](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/StudentDashboard.tsx) (Student Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and identity"]
  node_app["App Router<br/>[App.tsx]"]
  node_landing["Public Landing<br/>[LandingPage.tsx]"]
  node_login["Sign In<br/>[Login.tsx]"]
end

subgraph group_workspaces["Role workspaces"]
  node_student["Student Dashboard"]
  node_staff["Staff Dashboard<br/>[StaffDashboard.tsx]"]
  node_admin["Admin Console<br/>[AdminConsole.tsx]"]
  node_analysis["AI Analysis<br/>[AIAnalysis.tsx]"]
end

subgraph group_shared["Shared interface and data"]
  node_chatbot["Complaint Chatbot<br/>[Chatbot.tsx]"]
  node_sidebar["Workspace Navigation<br/>[Sidebar.tsx]"]
  node_badges["Status Badges<br/>[StatusBadge.tsx]"]
  node_mockdata["Sample Data<br/>[dummy.ts]"]
  node_types["Domain Types<br/>[index.ts]"]
end

subgraph group_integration["API integration"]
  node_services["API Services<br/>[api.ts]"]
  node_http["HTTP Client<br/>[api.ts]"]
end

node_visitor(("User"))
node_backend[("SHCMS Backend")]

node_visitor -->|"opens app"| node_app
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_login
node_app -->|"routes student"| node_student
node_app -->|"routes staff"| node_staff
node_app -->|"routes admin"| node_admin
node_app -->|"checks auth"| node_services
node_landing -->|"requests sign-in"| node_app
node_login -->|"authenticates"| node_services
node_student -->|"opens assistant"| node_chatbot
node_admin -->|"renders analysis"| node_analysis
node_admin -->|"manages users"| node_services
node_student -->|"uses navigation"| node_sidebar
node_staff -->|"uses navigation"| node_sidebar
node_admin -->|"uses navigation"| node_sidebar
node_student -->|"renders status"| node_badges
node_staff -->|"renders status"| node_badges
node_admin -->|"renders status"| node_badges
node_analysis -->|"reads sample data"| node_mockdata
node_login -->|"uses contracts"| node_types
node_services -->|"uses contracts"| node_types
node_services -->|"sends requests"| node_http
node_http -->|"calls API"| node_backend
node_student -.->|"submits and tracks complaints"| node_services
node_staff -.->|"updates complaints"| node_services
node_admin -.->|"manages complaints and config"| node_services

click node_app "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/App.tsx"
click node_landing "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/LandingPage.tsx"
click node_login "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/Login.tsx"
click node_student "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/StudentDashboard.tsx"
click node_staff "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/StaffDashboard.tsx"
click node_admin "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/AdminConsole.tsx"
click node_analysis "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/AIAnalysis.tsx"
click node_chatbot "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/components/Chatbot.tsx"
click node_sidebar "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/components/Sidebar.tsx"
click node_badges "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/components/StatusBadge.tsx"
click node_mockdata "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/dummy.ts"
click node_types "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/types/index.ts"
click node_services "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/services/api.ts"
click node_http "https://github.com/sarowar-islam/shcms-frontend/blob/main/src/utils/api.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_landing,node_login,node_visitor toneBlue
class node_student,node_staff,node_admin,node_analysis,node_backend toneAmber
class node_chatbot,node_sidebar,node_badges,node_mockdata,node_types toneMint
class node_services,node_http toneRose
```

## Components

### Entry and identity

- [App Router](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/App.tsx): `src/App.tsx`
- [Public Landing](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/LandingPage.tsx): `src/views/LandingPage.tsx`
- [Sign In](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/Login.tsx): `src/views/Login.tsx`

### Role workspaces

- [Student Dashboard](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/StudentDashboard.tsx): `src/views/StudentDashboard.tsx`
- [Staff Dashboard](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/StaffDashboard.tsx): `src/views/StaffDashboard.tsx`
- [Admin Console](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/AdminConsole.tsx): `src/views/AdminConsole.tsx`
- [AI Analysis](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/views/AIAnalysis.tsx): `src/views/AIAnalysis.tsx`

### Shared interface and data

- [Complaint Chatbot](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/components/Chatbot.tsx): `src/components/Chatbot.tsx`
- [Workspace Navigation](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/components/Sidebar.tsx): `src/components/Sidebar.tsx`
- [Status Badges](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/components/StatusBadge.tsx): `src/components/StatusBadge.tsx`
- [Sample Data](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/dummy.ts): `src/dummy.ts`
- [Domain Types](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/types/index.ts): `src/types/index.ts`

### API integration

- [API Services](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/services/api.ts): `src/services/api.ts`
- [HTTP Client](https://github.com/sarowar-islam/shcms-frontend/blob/main/src/utils/api.ts): `src/utils/api.ts`

### Other components

- **User**
- **SHCMS Backend**

## Connections

- User → App Router: opens app
- App Router → Public Landing: renders (evidence: `src/App.tsx`)
- App Router → Sign In: renders (evidence: `src/App.tsx`)
- App Router → Student Dashboard: routes student (evidence: `src/App.tsx`)
- App Router → Staff Dashboard: routes staff (evidence: `src/App.tsx`)
- App Router → Admin Console: routes admin (evidence: `src/App.tsx`)
- App Router → API Services: checks auth (evidence: `src/App.tsx`)
- Public Landing → App Router: requests sign-in (evidence: `src/App.tsx`)
- Sign In → API Services: authenticates (evidence: `src/views/Login.tsx`)
- Student Dashboard → Complaint Chatbot: opens assistant (evidence: `src/views/StudentDashboard.tsx`)
- Admin Console → AI Analysis: renders analysis (evidence: `src/views/AdminConsole.tsx`)
- Admin Console → API Services: manages users (evidence: `src/views/AdminConsole.tsx`)
- Student Dashboard → Workspace Navigation: uses navigation (evidence: `src/views/StudentDashboard.tsx`)
- Staff Dashboard → Workspace Navigation: uses navigation (evidence: `src/views/StaffDashboard.tsx`)
- Admin Console → Workspace Navigation: uses navigation (evidence: `src/views/AdminConsole.tsx`)
- Student Dashboard → Status Badges: renders status (evidence: `src/views/StudentDashboard.tsx`)
- Staff Dashboard → Status Badges: renders status (evidence: `src/views/StaffDashboard.tsx`)
- Admin Console → Status Badges: renders status (evidence: `src/views/AdminConsole.tsx`)
- AI Analysis → Sample Data: reads sample data (evidence: `src/views/AIAnalysis.tsx`)
- Sign In → Domain Types: uses contracts (evidence: `src/views/Login.tsx`)
- API Services → Domain Types: uses contracts (evidence: `src/services/api.ts`)
- API Services → HTTP Client: sends requests (evidence: `src/services/api.ts`)
- HTTP Client → SHCMS Backend: calls API (evidence: `src/utils/api.ts`)
- Student Dashboard → API Services: submits and tracks complaints
- Staff Dashboard → API Services: updates complaints
- Admin Console → API Services: manages complaints and config (evidence: `src/views/AdminConsole.tsx`)