# lms-pancawaluya/frontend architecture

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

- Interactive diagram: https://gitdiagram.com/lms-pancawaluya/frontend
- Repository: https://github.com/lms-pancawaluya/frontend

## Overview

LMS Pancawaluya is a frontend learning platform for West Java high-school teachers, with Guru learning flows, Pengajar school-scoped mentoring, and global Admin management. The main learner journey is course discovery, staged module study (pre-test, material, post-test), progress tracking, and course certification, alongside discussion and support. The graph also shows management, monitoring, profile, and helpdesk capabilities documented in the README. Backend behavior is external; several feature links rely on README documentation because their source was not sampled.

Main entry points: [`lib/api.ts`](https://github.com/lms-pancawaluya/frontend/blob/main/lib/api.ts) (API request client), [`app/modules`](https://github.com/lms-pancawaluya/frontend/tree/main/app/modules) (Learning pages), [`services/module.service.js`](https://github.com/lms-pancawaluya/frontend/blob/main/services/module.service.js) (Module service), [`app/admin`](https://github.com/lms-pancawaluya/frontend/tree/main/app/admin) (Admin & mentor panels)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Learning"]
  node_learning_ui["Learning pages"]
  node_dashboard["Learner dashboard<br/>[page.tsx]"]
  node_course_service["Course service<br/>[course.service.js]"]
  node_module_service["Module service<br/>[module.service.js]"]
  node_evaluation_ui["Evaluation pages"]
  node_evaluation_service["Evaluation service"]
  node_video_quiz["Video mini-quiz"]
  node_progress_service["Progress service"]
  node_certificate_ui["Certificate management<br/>[page.tsx]"]
  node_certificate_service["Certificate service"]
end

subgraph group_management["Management"]
  node_management_ui["Admin &amp; mentor panels"]
  node_monitoring_ui["Learning monitoring<br/>[page.tsx]"]
  node_user_service["User &amp; monitoring service<br/>[user.service.js]"]
end

subgraph group_engagement["Engagement &amp; Support"]
  node_discussion["Course discussions<br/>[page.tsx]"]
  node_feedback["Course feedback"]
  node_helpdesk_ui["Helpdesk<br/>[page.tsx]"]
  node_admin_helpdesk["Ticket administration<br/>[page.tsx]"]
  node_helpdesk_service["Helpdesk service"]
end

subgraph group_platform["Platform Services"]
  node_profile_settings["Profile &amp; settings"]
  node_auth_ui["Authentication pages<br/>[page.tsx]"]
  node_auth_service["Authentication service<br/>[auth.service.js]"]
  node_api_client["API request client<br/>[api.ts]"]
end

node_guru(("Guru"))
node_pengajar(("Pengajar"))
node_admin(("Admin"))
node_backend{{"External backend API"}}

node_guru -->|"signs in"| node_auth_ui
node_auth_ui -->|"submits credentials"| node_auth_service
node_auth_service -->|"sends requests"| node_api_client
node_learning_ui -->|"loads courses"| node_course_service
node_learning_ui -->|"loads modules"| node_module_service
node_learning_ui -->|"opens stages"| node_evaluation_ui
node_evaluation_ui -->|"submits answers"| node_evaluation_service
node_learning_ui -->|"plays interactive video"| node_video_quiz
node_dashboard -->|"loads learning summary"| node_module_service
node_dashboard -->|"loads progress"| node_progress_service
node_certificate_ui -->|"manages templates"| node_certificate_service
node_guru -->|"studies courses"| node_learning_ui
node_pengajar -->|"manages school scope"| node_management_ui
node_admin -->|"administers platform"| node_management_ui
node_management_ui -->|"manages accounts"| node_user_service
node_monitoring_ui -->|"loads progress reports"| node_user_service
node_profile_settings -->|"updates profile"| node_api_client
node_discussion -.->|"reads and replies"| node_backend
node_feedback -->|"sends feedback"| node_api_client
node_helpdesk_ui -->|"creates and replies"| node_helpdesk_service
node_admin_helpdesk -->|"manages tickets"| node_helpdesk_service
node_course_service -->|"requests course data"| node_api_client
node_module_service -->|"requests module data"| node_api_client
node_evaluation_service -->|"requests evaluations"| node_api_client
node_certificate_service -->|"requests certificates"| node_api_client
node_progress_service -->|"requests progress"| node_api_client
node_user_service -->|"requests user data"| node_api_client
node_helpdesk_service -->|"requests ticket data"| node_api_client
node_api_client -->|"calls"| node_backend

click node_learning_ui "https://github.com/lms-pancawaluya/frontend/tree/main/app/modules"
click node_dashboard "https://github.com/lms-pancawaluya/frontend/blob/main/app/dashboard/page.tsx"
click node_course_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/course.service.js"
click node_module_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/module.service.js"
click node_evaluation_ui "https://github.com/lms-pancawaluya/frontend/tree/main/app/modules/%5Bid%5D/evaluations"
click node_evaluation_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/evaluation.service.js"
click node_video_quiz "https://github.com/lms-pancawaluya/frontend/tree/main/app/components/mini-quiz"
click node_progress_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/progress.service.js"
click node_certificate_ui "https://github.com/lms-pancawaluya/frontend/blob/main/app/admin/certificates/page.tsx"
click node_certificate_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/certificate.service.js"
click node_management_ui "https://github.com/lms-pancawaluya/frontend/tree/main/app/admin"
click node_monitoring_ui "https://github.com/lms-pancawaluya/frontend/blob/main/app/admin/checklist/report/page.tsx"
click node_user_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/user.service.js"
click node_profile_settings "https://github.com/lms-pancawaluya/frontend/tree/main/app/profile"
click node_auth_ui "https://github.com/lms-pancawaluya/frontend/blob/main/app/login/page.tsx"
click node_auth_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/auth.service.js"
click node_discussion "https://github.com/lms-pancawaluya/frontend/blob/main/app/pengajar/diskusi/page.tsx"
click node_feedback "https://github.com/lms-pancawaluya/frontend/blob/main/services/evaluation.service.js"
click node_helpdesk_ui "https://github.com/lms-pancawaluya/frontend/blob/main/app/helpdesk/page.tsx"
click node_admin_helpdesk "https://github.com/lms-pancawaluya/frontend/blob/main/app/admin/helpdesk/page.tsx"
click node_helpdesk_service "https://github.com/lms-pancawaluya/frontend/blob/main/services/helpdesk.service.js"
click node_api_client "https://github.com/lms-pancawaluya/frontend/blob/main/lib/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_learning_ui,node_dashboard,node_course_service,node_module_service,node_evaluation_ui,node_evaluation_service,node_video_quiz,node_progress_service,node_certificate_ui,node_certificate_service toneBlue
class node_management_ui,node_monitoring_ui,node_user_service toneAmber
class node_discussion,node_feedback,node_helpdesk_ui,node_admin_helpdesk,node_helpdesk_service,node_backend toneMint
class node_profile_settings,node_auth_ui,node_auth_service,node_api_client toneRose
class node_guru,node_pengajar,node_admin toneIndigo
```

## Components

### Learning

- [Learning pages](https://github.com/lms-pancawaluya/frontend/tree/main/app/modules): `app/modules`
- [Learner dashboard](https://github.com/lms-pancawaluya/frontend/blob/main/app/dashboard/page.tsx): `app/dashboard/page.tsx`
- [Course service](https://github.com/lms-pancawaluya/frontend/blob/main/services/course.service.js): `services/course.service.js`
- [Module service](https://github.com/lms-pancawaluya/frontend/blob/main/services/module.service.js): `services/module.service.js`
- [Evaluation pages](https://github.com/lms-pancawaluya/frontend/tree/main/app/modules/%5Bid%5D/evaluations): `app/modules/[id]/evaluations`
- [Evaluation service](https://github.com/lms-pancawaluya/frontend/blob/main/services/evaluation.service.js): `services/evaluation.service.js`
- [Video mini-quiz](https://github.com/lms-pancawaluya/frontend/tree/main/app/components/mini-quiz): `app/components/mini-quiz`
- [Progress service](https://github.com/lms-pancawaluya/frontend/blob/main/services/progress.service.js): `services/progress.service.js`
- [Certificate management](https://github.com/lms-pancawaluya/frontend/blob/main/app/admin/certificates/page.tsx): `app/admin/certificates/page.tsx`
- [Certificate service](https://github.com/lms-pancawaluya/frontend/blob/main/services/certificate.service.js): `services/certificate.service.js`

### Management

- [Admin & mentor panels](https://github.com/lms-pancawaluya/frontend/tree/main/app/admin): `app/admin`
- [Learning monitoring](https://github.com/lms-pancawaluya/frontend/blob/main/app/admin/checklist/report/page.tsx): `app/admin/checklist/report/page.tsx`
- [User & monitoring service](https://github.com/lms-pancawaluya/frontend/blob/main/services/user.service.js): `services/user.service.js`

### Engagement & Support

- [Course discussions](https://github.com/lms-pancawaluya/frontend/blob/main/app/pengajar/diskusi/page.tsx): `app/pengajar/diskusi/page.tsx`
- [Course feedback](https://github.com/lms-pancawaluya/frontend/blob/main/services/evaluation.service.js): `services/evaluation.service.js`
- [Helpdesk](https://github.com/lms-pancawaluya/frontend/blob/main/app/helpdesk/page.tsx): `app/helpdesk/page.tsx`
- [Ticket administration](https://github.com/lms-pancawaluya/frontend/blob/main/app/admin/helpdesk/page.tsx): `app/admin/helpdesk/page.tsx`
- [Helpdesk service](https://github.com/lms-pancawaluya/frontend/blob/main/services/helpdesk.service.js): `services/helpdesk.service.js`

### Platform Services

- [Profile & settings](https://github.com/lms-pancawaluya/frontend/tree/main/app/profile): `app/profile`
- [Authentication pages](https://github.com/lms-pancawaluya/frontend/blob/main/app/login/page.tsx): `app/login/page.tsx`
- [Authentication service](https://github.com/lms-pancawaluya/frontend/blob/main/services/auth.service.js): `services/auth.service.js`
- [API request client](https://github.com/lms-pancawaluya/frontend/blob/main/lib/api.ts): `lib/api.ts`

### Other components

- **Guru**
- **Pengajar**
- **Admin**
- **External backend API**

## Connections

- Guru → Authentication pages: signs in
- Authentication pages → Authentication service: submits credentials
- Authentication service → API request client: sends requests
- Learning pages → Course service: loads courses
- Learning pages → Module service: loads modules
- Learning pages → Evaluation pages: opens stages
- Evaluation pages → Evaluation service: submits answers
- Learning pages → Video mini-quiz: plays interactive video
- Learner dashboard → Module service: loads learning summary
- Learner dashboard → Progress service: loads progress
- Certificate management → Certificate service: manages templates
- Guru → Learning pages: studies courses
- Pengajar → Admin & mentor panels: manages school scope
- Admin → Admin & mentor panels: administers platform
- Admin & mentor panels → User & monitoring service: manages accounts
- Learning monitoring → User & monitoring service: loads progress reports
- Profile & settings → API request client: updates profile
- Course discussions → External backend API: reads and replies
- Course feedback → API request client: sends feedback
- Helpdesk → Helpdesk service: creates and replies
- Ticket administration → Helpdesk service: manages tickets
- Course service → API request client: requests course data
- Module service → API request client: requests module data
- Evaluation service → API request client: requests evaluations
- Certificate service → API request client: requests certificates
- Progress service → API request client: requests progress
- User & monitoring service → API request client: requests user data
- Helpdesk service → API request client: requests ticket data
- API request client → External backend API: calls