# zainul18-tech/leetcode_trackerdashboard architecture

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

- Interactive diagram: https://gitdiagram.com/zainul18-tech/leetcode_trackerdashboard
- Repository: https://github.com/zainul18-tech/leetcode_trackerdashboard

## Overview

This appears to be an academic progress dashboard for staff and students: staff manage classes, students, tasks, and activities, while student and class pages present progress. The sampled task and activity pages create Supabase clients; the class-detail panel supports filtering student progress and exporting results. The README is only the generic Next.js starter README, so product capabilities are inferred from routes and types. Several routes and the sync endpoint were not sampled; their internal behavior and connections are therefore left unspecified.

Main entry points: [`components/layout/DashboardLayout.tsx`](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/DashboardLayout.tsx) (Dashboard shell), [`lib/supabase/client.ts`](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/supabase/client.ts) (Supabase client), [`app/dashboard/staff/page.tsx`](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/page.tsx) (Staff dashboard), [`components/staff-dashboard/ClassDetailPanel.tsx`](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/ClassDetailPanel.tsx) (Class progress)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Dashboard experience"]
  node_staff["Staff dashboard<br/>[page.tsx]"]
  node_department["Department view<br/>[page.tsx]"]
  node_staff_detail["Staff details<br/>[page.tsx]"]
  node_students["Student directory<br/>[page.tsx]"]
  node_class_detail_route["Class detail route<br/>[page.tsx]"]
  node_task_detail["Class task detail<br/>[page.tsx]"]
  node_student_view["Student view<br/>[page.tsx]"]
  node_admin["Admin overview<br/>[page.tsx]"]
  node_class_view["Class overview<br/>[page.tsx]"]
  node_my_class["My class<br/>[page.tsx]"]
  node_settings["Settings<br/>[page.tsx]"]
end

subgraph group_workflows["Staff workflows"]
  node_activity["Activities<br/>[page.tsx]"]
  node_tasks["Task management<br/>[page.tsx]"]
  node_class_panel["Class progress"]
  node_settings_panel["Staff settings<br/>[SettingsPanel.tsx]"]
  node_classes_panel["Class list panel<br/>[ClassesPanel.tsx]"]
  node_leaderboard["Streak leaderboard"]
end

subgraph group_data["Data and services"]
  node_class_hook["Staff class hook"]
  node_mock_data["Mock data<br/>[mock-data.ts]"]
  node_sync["Sync endpoint<br/>[route.ts]"]
  node_supabase_client["Supabase client<br/>[client.ts]"]
  node_supabase[("Supabase service")]
  node_export["Student export<br/>[export-utils.ts]"]
end

subgraph group_shared["Shared interface"]
  node_dashboard_layout["Dashboard shell"]
  node_sidebar["Navigation sidebar<br/>[Sidebar.tsx]"]
  node_topnav["Top navigation<br/>[TopNav.tsx]"]
end

node_actor(("Dashboard user"))

node_actor -.->|"opens"| node_staff
node_staff -->|"renders"| node_dashboard_layout
node_activity -->|"renders"| node_dashboard_layout
node_tasks -->|"renders"| node_dashboard_layout
node_department -->|"renders"| node_dashboard_layout
node_staff_detail -->|"renders"| node_dashboard_layout
node_students -->|"renders"| node_dashboard_layout
node_class_detail_route -->|"renders"| node_dashboard_layout
node_student_view -->|"renders"| node_dashboard_layout
node_admin -->|"renders"| node_dashboard_layout
node_dashboard_layout -->|"renders"| node_sidebar
node_dashboard_layout -->|"renders"| node_topnav
node_dashboard_layout -->|"renders"| node_class_panel
node_class_detail_route -->|"renders"| node_class_panel
node_staff -->|"renders"| node_settings_panel
node_activity -->|"creates client"| node_supabase_client
node_tasks -->|"creates client"| node_supabase_client
node_supabase_client -.->|"connects to"| node_supabase
node_class_panel -->|"exports students"| node_export
node_sidebar -.->|"uses classes"| node_class_hook
node_class_hook -.->|"uses client"| node_supabase_client

click node_staff "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/page.tsx"
click node_activity "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/activity/page.tsx"
click node_tasks "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/task/page.tsx"
click node_department "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/department/page.tsx"
click node_staff_detail "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/staff-detail/page.tsx"
click node_students "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/students/page.tsx"
click node_class_detail_route "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/classes/%5BclassId%5D/page.tsx"
click node_class_panel "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/ClassDetailPanel.tsx"
click node_task_detail "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/task-detail-class/%5BtaskId%5D/%5BclassId%5D/page.tsx"
click node_student_view "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/student/%5Bid%5D/page.tsx"
click node_admin "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/admin/page.tsx"
click node_class_view "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/class/%5Bid%5D/page.tsx"
click node_my_class "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/class/my-class/page.tsx"
click node_settings "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/settings/page.tsx"
click node_dashboard_layout "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/DashboardLayout.tsx"
click node_sidebar "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/Sidebar.tsx"
click node_topnav "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/TopNav.tsx"
click node_settings_panel "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/settings/SettingsPanel.tsx"
click node_classes_panel "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/ClassesPanel.tsx"
click node_leaderboard "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/StreakLeaderboard.tsx"
click node_class_hook "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/hooks/use-staff-classes.ts"
click node_mock_data "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/mock-data.ts"
click node_sync "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/api/sync/route.ts"
click node_supabase_client "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/supabase/client.ts"
click node_export "https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/export-utils.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_staff,node_department,node_staff_detail,node_students,node_class_detail_route,node_task_detail,node_student_view,node_admin,node_class_view,node_my_class,node_settings,node_actor toneBlue
class node_activity,node_tasks,node_class_panel,node_settings_panel,node_classes_panel,node_leaderboard toneAmber
class node_class_hook,node_mock_data,node_sync,node_supabase_client,node_supabase,node_export toneMint
class node_dashboard_layout,node_sidebar,node_topnav toneRose
```

## Components

### Dashboard experience

- [Staff dashboard](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/page.tsx): `app/dashboard/staff/page.tsx`
- [Department view](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/department/page.tsx): `app/dashboard/staff/department/page.tsx`
- [Staff details](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/staff-detail/page.tsx): `app/dashboard/staff/staff-detail/page.tsx`
- [Student directory](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/students/page.tsx): `app/dashboard/staff/students/page.tsx`
- [Class detail route](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/classes/%5BclassId%5D/page.tsx): `components/staff-dashboard/classes/[classId]/page.tsx`
- [Class task detail](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/task-detail-class/%5BtaskId%5D/%5BclassId%5D/page.tsx): `app/dashboard/staff/task-detail-class/[taskId]/[classId]/page.tsx`
- [Student view](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/student/%5Bid%5D/page.tsx): `app/dashboard/student/[id]/page.tsx`
- [Admin overview](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/admin/page.tsx): `app/dashboard/admin/page.tsx`
- [Class overview](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/class/%5Bid%5D/page.tsx): `app/dashboard/class/[id]/page.tsx`
- [My class](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/class/my-class/page.tsx): `app/dashboard/class/my-class/page.tsx`
- [Settings](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/settings/page.tsx): `app/dashboard/settings/page.tsx`

### Staff workflows

- [Activities](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/activity/page.tsx): `app/dashboard/staff/activity/page.tsx`
- [Task management](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/dashboard/staff/task/page.tsx): `app/dashboard/staff/task/page.tsx`
- [Class progress](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/ClassDetailPanel.tsx): `components/staff-dashboard/ClassDetailPanel.tsx`
- [Staff settings](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/settings/SettingsPanel.tsx): `components/staff-dashboard/settings/SettingsPanel.tsx`
- [Class list panel](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/ClassesPanel.tsx): `components/staff-dashboard/ClassesPanel.tsx`
- [Streak leaderboard](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/staff-dashboard/StreakLeaderboard.tsx): `components/staff-dashboard/StreakLeaderboard.tsx`

### Data and services

- [Staff class hook](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/hooks/use-staff-classes.ts): `lib/hooks/use-staff-classes.ts`
- [Mock data](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/mock-data.ts): `lib/mock-data.ts`
- [Sync endpoint](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/app/api/sync/route.ts): `app/api/sync/route.ts`
- [Supabase client](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/supabase/client.ts): `lib/supabase/client.ts`
- **Supabase service**
- [Student export](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/lib/export-utils.ts): `lib/export-utils.ts`

### Shared interface

- [Dashboard shell](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/DashboardLayout.tsx): `components/layout/DashboardLayout.tsx`
- [Navigation sidebar](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/Sidebar.tsx): `components/layout/Sidebar.tsx`
- [Top navigation](https://github.com/zainul18-tech/leetcode_trackerdashboard/blob/main/components/layout/TopNav.tsx): `components/layout/TopNav.tsx`

### Other components

- **Dashboard user**

## Connections

- Dashboard user → Staff dashboard: opens
- Staff dashboard → Dashboard shell: renders (evidence: `app/dashboard/staff/page.tsx`)
- Activities → Dashboard shell: renders (evidence: `app/dashboard/staff/activity/page.tsx`)
- Task management → Dashboard shell: renders (evidence: `app/dashboard/staff/task/page.tsx`)
- Department view → Dashboard shell: renders (evidence: `app/dashboard/staff/department/page.tsx`)
- Staff details → Dashboard shell: renders (evidence: `app/dashboard/staff/staff-detail/page.tsx`)
- Student directory → Dashboard shell: renders (evidence: `app/dashboard/staff/students/page.tsx`)
- Class detail route → Dashboard shell: renders (evidence: `components/staff-dashboard/classes/[classId]/page.tsx`)
- Student view → Dashboard shell: renders (evidence: `app/dashboard/student/[id]/page.tsx`)
- Admin overview → Dashboard shell: renders (evidence: `app/dashboard/admin/page.tsx`)
- Dashboard shell → Navigation sidebar: renders (evidence: `components/layout/DashboardLayout.tsx`)
- Dashboard shell → Top navigation: renders (evidence: `components/layout/DashboardLayout.tsx`)
- Dashboard shell → Class progress: renders (evidence: `components/layout/DashboardLayout.tsx`)
- Class detail route → Class progress: renders (evidence: `components/staff-dashboard/classes/[classId]/page.tsx`)
- Staff dashboard → Staff settings: renders (evidence: `app/dashboard/staff/page.tsx`)
- Activities → Supabase client: creates client (evidence: `app/dashboard/staff/activity/page.tsx`)
- Task management → Supabase client: creates client (evidence: `app/dashboard/staff/task/page.tsx`)
- Supabase client → Supabase service: connects to
- Class progress → Student export: exports students (evidence: `components/staff-dashboard/ClassDetailPanel.tsx`)
- Navigation sidebar → Staff class hook: uses classes (evidence: `components/layout/Sidebar.tsx`)
- Staff class hook → Supabase client: uses client (evidence: `lib/hooks/use-staff-classes.ts`)