chore: update POT file

chore: sync translations from crowdin

.github/helper/install_dependencies.sh

@@ -5,7 +5,7 @@ echo "Setting Up System Dependencies..."
 
 sudo apt update
 sudo apt remove mysql-server mysql-client
-sudo apt install libcups2-dev redis-server mariadb-client-10.6
+sudo apt-get install libcups2-dev redis-server mariadb-client
 
 install_wkhtmltopdf() {
   wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb

.github/workflows/build.yml

@@ -0,0 +1,64 @@
+name: Build Container Image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - "*"
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        arch: [amd64, arm64]
+
+    permissions:
+      packages: write
+
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/${{ matrix.arch }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          
+      - name: Set Branch
+        run: |
+          export APPS_JSON='[{"url": "https://github.com/frappe/lms","branch": "main"}]'
+          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
+          echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
+
+      - name: Set Image Tag
+        run: |
+          echo "IMAGE_TAG=stable" >> $GITHUB_ENV
+      - uses: actions/checkout@v4
+        with:
+          repository: frappe/frappe_docker
+          path: builds
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          context: builds
+          file: builds/images/layered/Containerfile
+          tags: >
+            ghcr.io/${{ github.repository }}:${{ github.ref_name }},
+            ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
+          build-args: |
+            "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
+            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"

.github/workflows/ci.yml

@@ -39,7 +39,7 @@ jobs:
         node-version: '18'
         check-latest: true
     - name: setup cache for bench
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         path: ~/bench-cache
         key: ${{ runner.os }}

.github/workflows/ui-tests.yml

@@ -24,7 +24,7 @@ jobs:
 
     services:
       mariadb:
-        image: mariadb:10.6
+        image: mariadb:10.8
         env:
           MARIADB_ROOT_PASSWORD: 123
         ports:
@@ -58,7 +58,7 @@ jobs:
           echo "127.0.0.1 lms.test" | sudo tee -a /etc/hosts
 
       - name: Cache pip
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}

README.md

@@ -1,115 +1,174 @@
-<p align="center">
-  <a href="https://www.frappelms.com/">
-    <img src="https://frappe.io/files/lms.png" alt="Frappe LMS" width="50px" height="50px">
-  </a>
-  <p align="center">Easy to use, open source, learning management system.</p>
-</p>
+<div align="center" markdown="1">
 
+<img src=".github/lms-logo.png" alt="Frappe Learning logo" width="80" height="80"/>
+<h1>Frappe Learning</h1>
 
-&nbsp;
+**Easy to use, open source, Learning Management System**
 
-<p align="center">
-    <a href="https://www.producthunt.com/posts/frappe-lms?utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_souce=badge-frappe&#0045;lms" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=396079&theme=dark&period=weekly&topic_id=204" alt="Frappe&#0032;LMS - Easy&#0032;to&#0032;use&#0044;&#0032;100&#0037;&#0032;open&#0032;source&#0032;learning&#0032;management&#0032;system | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</p>
+![Tests](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress)
 
-
-<div align="center" style="max-height: 40px;">
-    <a href="https://frappecloud.com/lms/signup">
-        <img src=".github/try-on-f-cloud.svg" height="40">
-    </a>
 </div>
 
-&nbsp;
 
-<p align="center">
-	<a href="https://dashboard.cypress.io/projects/vandxn/runs">
-    <img alt="cypress" src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress">
-  </a>
-  <a href="https://github.com/frappe/lms/blob/main/LICENSE">
-    <img alt="license" src="https://img.shields.io/badge/license-AGPLv3-blue">
-  </a>
-</p>
+<div align="center">
+	<img src=".github/hero.png?v=5" alt="Hero Image" width="72%" />
+</div>
+<br />
+<div align="center">
+	<a href="https://frappe.io/learning">Website</a>
+	-
+	<a href="https://docs.frappe.io/learning">Documentation</a>
+</div>
 
-<img width="1402" alt="Lesson" src="https://frappelms.com/files/banner.png">
+## Frappe Learning
+Frappe Learning is an easy-to-use learning system that helps you bring structure to your content.
+
+### Motivation
+In 2021, we were looking for a Learning Management System to launch [Mon.School](https://mon.school) for FOSS United. We checked out Moodle, but it didn’t feel right. The forms were unnecessarily lengthy and the UI was confusing. It shouldn't be this hard to create a course right? So I started making a learning system for Mon.School which soon became a product in itself. The aim is to have a simple platform that anyone can use to launch a course of their own and make knowledge sharing easier.
+
+### Key Features
+
+- **Structured Learning**: Design a course with a 3-level hierarchy, where your courses have chapters and you can group your lessons within these chapters. This ensures that the context of the lesson is set by the chapter.
+
+- **Live Classes**: Group learners into batches based on courses and duration. You can then create Zoom live class for these batches right from the app. Learners get to see the list of live classes they have to take as a part of this batch.
+
+- **Quizzes and Assignments**: Create quizzes where questions can have single-choice, multiple-choice options, or can be open ended. Instructors can also add assignments which learners can submit as PDF's or Documents.
+
+- **Getting Certified**: Once a learner has completed the course or batch, you can grant them a certificate. The app provides an inbuilt certificate template. You can use this or else create a template of your own and use that instead.
 
 <details>
-	<summary>Show more screenshots</summary>
-	<img width="1520" alt="ss1" src="https://user-images.githubusercontent.com/31363128/210056046-584bc8aa-d28c-4514-b031-73817012837d.png">
-	<img width="830" alt="ss2" src="https://user-images.githubusercontent.com/31363128/210056097-36849182-6db0-43a2-8c62-5333cd2aedf4.png">
-	<img width="941" alt="ss3" src="https://user-images.githubusercontent.com/31363128/210056134-01a7c429-1ef4-434e-9d43-128dda35d7e5.png">
+<summary>View Screenshots</summary>
+
+
+![Batch](.github/batch.png)
+<div align="center">
+	<sub>
+		Create batches to group your learners
+	</sub>
+</div>
+<br>
+
+
+![Quiz](.github/quiz.png)
+<div align="center">
+	<sub>
+		Evaluate their knowledge by quizzes
+	</sub>
+</div>
+<br>
+
+
+![Cerficicate](.github/certificate.png)
+<div align="center">
+	<sub>
+		Autenticate their work with certification
+	</sub>
+</div>
 </details>
 
-Frappe LMS is an easy-to-use, open-source learning management system. You can use it to create and share online courses. The app has a clear UI that helps students focus only on what's important and assists in distraction-free learning.
 
-You can create courses and lessons through simple forms. Lessons can be in the form of text, videos, quizzes or a combination of all these. You can keep your students engaged with quizzes to help revise and test the concepts learned. Course Instructors and Students can reach out to each other through the discussions section available for each lesson and get queries resolved.
+### Under the Hood
 
-## Features
-- Create online courses. 📚
-- Add detailed descriptions and preview videos to the course. 🎬
-- Add videos, quizzes, and assignments to your lessons and make them interesting and interactive 📝
-- Discussions section below each lesson where instructors and students can interact with each other. 💬
-- Create batches to group your students based on courses and track their progress 🏛
-- Statistics dashboard that provides all important numbers at a glimpse. 📈
-- Job Board where users can post and look for jobs. 💼
-- People directory with each person's profile page 👨‍👩‍👧‍👦
-- Set cover image, profile photo, short bio, and other professional information. 🦹🏼‍♀️
-- Simple layout that optimizes readability 🤓
-- Delightful user experience in overall usage ✨
+- [**Frappe Framework**](https://github.com/frappe/frappe): A full-stack web application framework.
 
-## Tech Stack
+- [**Frappe UI**](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.
 
-Frappe LMS is built on [Frappe Framework](https://frappeframework.com) which is a batteries-included python web framework.
-These are some of the tools it's built on:
-- [Python](https://www.python.org)
-- [Redis](https://redis.io/)
-- [MariaDB](https://mariadb.org/)
-- [Socket.io](https://socket.io/)
-
-## Local Setup
-
-### Docker
-You need Docker, docker-compose, and git setup on your machine. Refer to [Docker documentation](https://docs.docker.com/). After that, run the following commands:
-```
-git clone https://github.com/frappe/lms
-cd apps/lms/docker
-docker-compose up
-```
-
-Wait for some time until the setup script creates a site. After that, you can access `http://localhost:8000` in your browser and the app's login screen should appear.
-You'll have to go through the setup wizard to set up the website the first time you access it. Log in using the following credentials to complete the setup wizard.
-
-```
-Username: Administrator
-password: admin
-```
-
-### Frappe Bench
-
-Currently, this app depends on the `develop` branch of [frappe](https://github.com/frappe/frappe).
-
-1. Setup frappe-bench by following [this guide](https://frappeframework.com/docs/v14/user/en/installation)
-1. In the frappe-bench directory, run `bench start` and keep it running. Open a new terminal session and cd into the `frappe-bench` directory.
-1. Run the following commands:
-    ```sh
-    bench new-site lms.test
-    bench get-app lms
-    bench --site lms.test install-app lms
-    bench --site lms.test add-to-hosts
-
- 1. Now, you can access the site at `http://lms.test:8000`
-
-
-## Deployment
-Frappe LMS is an app built on top of the Frappe Framework. So, you can follow any deployment guide for hosting a Frappe Framework-based site.
+## Production Setup
 
 ### Managed Hosting
-Frappe LMS can be deployed in a few clicks on [Frappe Cloud](https://frappecloud.com/marketplace/apps/lms).
 
-### Self-hosting
-If you want to self-host, you can follow official [Frappe Bench Installation](https://github.com/frappe/bench#installation) instructions.
+You can try [Frappe Cloud](https://frappecloud.com), a simple, user-friendly and sophisticated [open-source](https://github.com/frappe/press) platform to host Frappe applications with peace of mind.
 
-## Bugs and Feature Requests
-If you find any bugs or have a feature idea for the app, feel free to report them here on [GitHub Issues](https://github.com/frappe/lms/issues). Make sure you share enough information (app screenshots, browser console screenshots, stack traces, etc) for project maintainers.
+It takes care of installation, setup, upgrades, monitoring, maintenance and support of your Frappe deployments. It is a fully featured developer platform with an ability to manage and control multiple Frappe deployments.
 
-## License
-Distributed under [GNU AFFERO GENERAL PUBLIC LICENSE](license.txt)
+<div>
+	<a href="https://frappecloud.com/lms/signup" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/try-on-fc-white.png">
+			<img src="https://frappe.io/files/try-on-fc-black.png" alt="Try on Frappe Cloud" height="28" />
+		</picture>
+	</a>
+</div>
+
+### Self Hosting
+
+Follow these steps to set up Frappe Learning in production:
+
+**Step 1**: Download the easy install script
+
+```bash
+wget https://frappe.io/easy-install.py
+```
+
+**Step 2**: Run the deployment command
+
+```bash
+python3 ./easy-install.py deploy \
+    --project=learning_prod_setup \
+    --email=your_email.example.com \
+    --image=ghcr.io/frappe/lms \
+    --version=stable \
+    --app=lms \
+    --sitename subdomain.domain.tld
+```
+
+Replace the following parameters with your values:
+- `your_email.example.com`: Your email address
+- `subdomain.domain.tld`: Your domain name where Learning will be hosted
+
+The script will set up a production-ready instance of Frappe Learning with all the necessary configurations in about 5 minutes.
+
+## Development Setup
+
+### Docker
+
+You need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, follow below steps:
+
+**Step 1**: Setup folder and download the required files
+
+    mkdir frappe-learning
+    cd frappe-learning
+
+    # Download the docker-compose file
+    wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/lms/develop/docker/docker-compose.yml
+
+    # Download the setup script
+    wget -O init.sh https://raw.githubusercontent.com/frappe/lms/develop/docker/init.sh
+
+**Step 2**: Run the container and daemonize it
+
+    docker compose up -d
+
+**Step 3**: The site [http://lms.localhost:8000/lms](http://lms.localhost:8000/lms) should now be available. The default credentials are:
+- Username: Administrator
+- Password: admin
+
+### Local
+
+To setup the repository locally follow the steps mentioned below:
+
+1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
+1. Start the server by running `bench start`
+1. In a separate terminal window, create a new site by running `bench new-site learning.test`
+1. Map your site to localhost with the command `bench --site learning.test add-to-hosts`
+1. Get the Learning app. Run `bench get-app https://github.com/frappe/lms`
+1. Run `bench --site learning.test install-app lms`.
+1. Now open the URL `http://learning.test:8000/lms` in your browser, you should see the app running
+
+## Learn and connect
+
+- [Telegram Public Group](https://t.me/frappelms)
+- [Discuss Forum](https://discuss.frappe.io/c/lms/70)
+- [Documentation](https://docs.frappe.io/learning)
+- [YouTube](https://www.youtube.com/channel/UCn3bV5kx77HsVwtnlCeEi_A)
+
+<br>
+<br>
+<div align="center" style="padding-top: 0.75rem;">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

cypress.config.js

@@ -13,6 +13,6 @@ module.exports = defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://test_site_ui:8000",
+		baseUrl: "http://testui:8000",
 	},
 });

cypress/e2e/course_creation.cy.js

@@ -5,7 +5,7 @@ describe("Course Creation", () => {
 		cy.visit("/lms/courses");
 
 		// Create a course
-		cy.get("a").contains("New").click();
+		cy.get("button").contains("New").click();
 		cy.wait(1000);
 		cy.url().should("include", "/courses/new/edit");
 
@@ -73,7 +73,7 @@ describe("Course Creation", () => {
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
-				cy.button("Add Chapter").click();
+				cy.button("Create").click();
 			});
 
 		// Add Lesson
@@ -84,9 +84,8 @@ describe("Course Creation", () => {
 		cy.wait(1000);
 
 		cy.get("label").contains("Title").type("Test Lesson");
-
 		cy.get("#content .ce-block").type(
-			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+			"{enter}This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);
 		cy.button("Save").click();
 

cypress/support/commands.js

@@ -37,6 +37,9 @@ Cypress.Commands.add("login", (email, password) => {
 		url: "/api/method/login",
 		method: "POST",
 		body: { usr: email, pwd: password },
+		timeout: 60000,
+		retryOnStatusCodeFailure: true,
+		retryOnNetworkFailure: true,
 	});
 });
 

docker/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 name: lms
 services:
   mariadb:
-    image: mariadb:10.6
+    image: mariadb:10.8
     command:
       - --character-set-server=utf8mb4
       - --collation-server=utf8mb4_unicode_ci

frontend/components.d.ts

@@ -0,0 +1,96 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Annoucements: typeof import('./src/components/Annoucements.vue')['default']
+    AnnouncementModal: typeof import('./src/components/Modals/AnnouncementModal.vue')['default']
+    Apps: typeof import('./src/components/Apps.vue')['default']
+    AppSidebar: typeof import('./src/components/AppSidebar.vue')['default']
+    AssessmentModal: typeof import('./src/components/Modals/AssessmentModal.vue')['default']
+    AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
+    Assessments: typeof import('./src/components/Assessments.vue')['default']
+    Assignment: typeof import('./src/components/Assignment.vue')['default']
+    AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
+    Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
+    BatchCard: typeof import('./src/components/BatchCard.vue')['default']
+    BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default']
+    BatchCourses: typeof import('./src/components/BatchCourses.vue')['default']
+    BatchDashboard: typeof import('./src/components/BatchDashboard.vue')['default']
+    BatchFeedback: typeof import('./src/components/BatchFeedback.vue')['default']
+    BatchOverlay: typeof import('./src/components/BatchOverlay.vue')['default']
+    BatchStudentProgress: typeof import('./src/components/Modals/BatchStudentProgress.vue')['default']
+    BatchStudents: typeof import('./src/components/BatchStudents.vue')['default']
+    BrandSettings: typeof import('./src/components/BrandSettings.vue')['default']
+    BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
+    Categories: typeof import('./src/components/Categories.vue')['default']
+    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
+    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
+    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
+    CourseCard: typeof import('./src/components/CourseCard.vue')['default']
+    CourseCardOverlay: typeof import('./src/components/CourseCardOverlay.vue')['default']
+    CourseInstructors: typeof import('./src/components/CourseInstructors.vue')['default']
+    CourseOutline: typeof import('./src/components/CourseOutline.vue')['default']
+    CourseReviews: typeof import('./src/components/CourseReviews.vue')['default']
+    CreateOutline: typeof import('./src/components/CreateOutline.vue')['default']
+    DateRange: typeof import('./src/components/Common/DateRange.vue')['default']
+    DesktopLayout: typeof import('./src/components/DesktopLayout.vue')['default']
+    DiscussionModal: typeof import('./src/components/Modals/DiscussionModal.vue')['default']
+    DiscussionReplies: typeof import('./src/components/DiscussionReplies.vue')['default']
+    Discussions: typeof import('./src/components/Discussions.vue')['default']
+    EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
+    EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
+    EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
+    Evaluators: typeof import('./src/components/Evaluators.vue')['default']
+    Event: typeof import('./src/components/Modals/Event.vue')['default']
+    ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
+    FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
+    IconPicker: typeof import('./src/components/Controls/IconPicker.vue')['default']
+    IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
+    InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
+    JobApplicationModal: typeof import('./src/components/Modals/JobApplicationModal.vue')['default']
+    JobCard: typeof import('./src/components/JobCard.vue')['default']
+    LessonContent: typeof import('./src/components/LessonContent.vue')['default']
+    LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
+    Link: typeof import('./src/components/Controls/Link.vue')['default']
+    LiveClass: typeof import('./src/components/LiveClass.vue')['default']
+    LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
+    LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
+    Members: typeof import('./src/components/Members.vue')['default']
+    MobileLayout: typeof import('./src/components/MobileLayout.vue')['default']
+    MultiSelect: typeof import('./src/components/Controls/MultiSelect.vue')['default']
+    NoPermission: typeof import('./src/components/NoPermission.vue')['default']
+    NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
+    NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
+    OnboardingBanner: typeof import('./src/components/OnboardingBanner.vue')['default']
+    PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
+    PaymentSettings: typeof import('./src/components/PaymentSettings.vue')['default']
+    ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
+    Question: typeof import('./src/components/Modals/Question.vue')['default']
+    Quiz: typeof import('./src/components/Quiz.vue')['default']
+    QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
+    Rating: typeof import('./src/components/Controls/Rating.vue')['default']
+    ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SettingDetails: typeof import('./src/components/SettingDetails.vue')['default']
+    SettingFields: typeof import('./src/components/SettingFields.vue')['default']
+    Settings: typeof import('./src/components/Modals/Settings.vue')['default']
+    SidebarLink: typeof import('./src/components/SidebarLink.vue')['default']
+    StudentHeatmap: typeof import('./src/components/StudentHeatmap.vue')['default']
+    StudentModal: typeof import('./src/components/Modals/StudentModal.vue')['default']
+    Tags: typeof import('./src/components/Tags.vue')['default']
+    UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
+    UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
+    UploadPlugin: typeof import('./src/components/UploadPlugin.vue')['default']
+    UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
+    UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
+    VideoBlock: typeof import('./src/components/VideoBlock.vue')['default']
+  }
+}

frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="{{ favicon or '/assets/lms/frontend/favicon.png' }}" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Frappe Learning</title>
 		<meta name="title" content="{{ meta.title }}" />
@@ -42,6 +42,7 @@
 
 		<script>
 			window.csrf_token = '{{ csrf_token }}'
+			window.setup_complete = '{{ setup_complete }}'
 			document.getElementById('seo-content').style.display = 'none';
 		</script>
 		<script type="module" src="/src/main.js"></script>

frontend/package.json

@@ -18,21 +18,27 @@
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.6.0",
+    "@editorjs/table": "^2.4.2",
+    "@vueuse/router": "^12.7.0",
     "ace-builds": "^1.36.2",
+    "apexcharts": "^4.3.0",
     "chart.js": "^4.4.1",
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.69",
+    "frappe-ui": "^0.1.122",
+    "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
     "socket.io-client": "^4.7.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.4.15",
+    "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.0.12",
+    "vue3-apexcharts": "^1.8.0",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -8,18 +8,34 @@
 <script setup>
 import { Toasts } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
+import NoSidebarLayout from './components/NoSidebarLayout.vue'
 import { stopSession } from '@/telemetry'
 import { init as initTelemetry } from '@/telemetry'
 import { usersStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
 
 const screenSize = useScreenSize()
 let { userResource } = usersStore()
+const router = useRouter()
+const noSidebar = ref(false)
+
+router.beforeEach((to, from, next) => {
+	if (to.query.fromLesson) {
+		noSidebar.value = true
+	} else {
+		noSidebar.value = false
+	}
+	next()
+})
 
 const Layout = computed(() => {
+	if (noSidebar.value) {
+		return NoSidebarLayout
+	}
 	if (screenSize.width < 640) {
 		return MobileLayout
 	} else {
@@ -28,11 +44,11 @@ const Layout = computed(() => {
 })
 
 onMounted(async () => {
-	if (!userResource.data) return
-	await initTelemetry()
+	if (userResource.data) await initTelemetry()
 })
 
 onUnmounted(() => {
+	noSidebar.value = false
 	stopSession()
 })
 </script>

frontend/src/components/Annoucements.vue

@@ -5,7 +5,7 @@
 				<div class="flex items-center justify-between mb-2">
 					<div class="flex items-center">
 						<Avatar :label="comm.sender_full_name" size="lg" />
-						<div class="ml-2">
+						<div class="ml-2 text-ink-gray-7">
 							{{ comm.sender_full_name }}
 						</div>
 					</div>
@@ -14,18 +14,18 @@
 					</div>
 				</div>
 				<div
-					class="prose prose-sm bg-gray-50 !min-w-full px-4 py-2 rounded-md"
+					class="prose prose-sm bg-surface-menu-bar !min-w-full px-4 py-2 rounded-md"
 					v-html="comm.content"
 				></div>
 			</div>
 		</div>
 	</div>
-	<div v-else class="text-sm italic text-gray-600">
+	<div v-else class="text-sm italic text-ink-gray-5">
 		{{ __('No announcements') }}
 	</div>
 </template>
 <script setup>
-import { createListResource, Avatar } from 'frappe-ui'
+import { createResource, Avatar } from 'frappe-ui'
 import { timeAgo } from '@/utils'
 
 const props = defineProps({
@@ -35,24 +35,15 @@ const props = defineProps({
 	},
 })
 
-const communications = createListResource({
-	doctype: 'Communication',
-	fields: [
-		'subject',
-		'content',
-		'recipients',
-		'cc',
-		'communication_date',
-		'sender',
-		'sender_full_name',
-	],
-	filters: {
-		reference_doctype: 'LMS Batch',
-		reference_name: props.batch,
+const communications = createResource({
+	url: 'lms.lms.api.get_announcements',
+	makeParams(value) {
+		return {
+			batch: props.batch,
+		}
 	},
-	orderBy: 'communication_date desc',
 	auto: true,
-	cache: ['batch', props.batch],
+	cache: ['announcement', props.batch],
 })
 </script>
 <style>

frontend/src/components/AppSidebar.vue

@@ -1,18 +1,18 @@
 <template>
 	<div
-		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-r bg-surface-menu-bar"
+		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
 			class="flex flex-col overflow-hidden"
-			:class="isSidebarCollapsed ? 'items-center' : ''"
+			:class="sidebarStore.isSidebarCollapsed ? 'items-center' : ''"
 		>
-			<UserDropdown :isCollapsed="isSidebarCollapsed" />
+			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
 			<div class="flex flex-col" v-if="sidebarSettings.data">
 				<SidebarLink
 					v-for="link in sidebarLinks"
 					:link="link"
-					:isCollapsed="isSidebarCollapsed"
+					:isCollapsed="sidebarStore.isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>
 			</div>
@@ -22,17 +22,17 @@
 			>
 				<div
 					class="flex items-center justify-between pr-2 cursor-pointer"
-					:class="isSidebarCollapsed ? 'pl-3' : 'pl-4'"
-					@click="showWebPages = !showWebPages"
+					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					@click="toggleWebPages"
 				>
 					<div
-						v-if="!isSidebarCollapsed"
-						class="flex items-center text-sm text-gray-600 my-1"
+						v-if="!sidebarStore.isSidebarCollapsed"
+						class="flex items-center text-sm text-ink-gray-5 my-1"
 					>
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
-								class="h-4 w-4 stroke-1.5 text-gray-900 transition-all duration-300 ease-in-out"
-								:class="{ 'rotate-90': showWebPages }"
+								class="h-4 w-4 stroke-1.5 text-ink-gray-9 transition-all duration-300 ease-in-out"
+								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
 							/>
 						</span>
 						<span class="ml-2">
@@ -41,19 +41,19 @@
 					</div>
 					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
 						<template #icon>
-							<Plus class="h-4 w-4 text-gray-700 stroke-1.5" />
+							<Plus class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
 						</template>
 					</Button>
 				</div>
 				<div
 					v-if="sidebarSettings.data?.web_pages?.length"
 					class="flex flex-col transition-all duration-300 ease-in-out"
-					:class="showWebPages ? 'block' : 'hidden'"
+					:class="!sidebarStore.isWebpagesCollapsed ? 'block' : 'hidden'"
 				>
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
 						:link="link"
-						:isCollapsed="isSidebarCollapsed"
+						:isCollapsed="sidebarStore.isSidebarCollapsed"
 						class="mx-2 my-0.5"
 						:showControls="isModerator ? true : false"
 						@openModal="openPageModal"
@@ -62,23 +62,73 @@
 				</div>
 			</div>
 		</div>
-		<SidebarLink
-			:link="{
-				label: isSidebarCollapsed ? 'Expand' : 'Collapse',
-			}"
-			:isCollapsed="isSidebarCollapsed"
-			@click="isSidebarCollapsed = !isSidebarCollapsed"
-			class="m-2"
-		>
-			<template #icon>
-				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-					<CollapseSidebar
-						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
-					/>
-				</span>
-			</template>
-		</SidebarLink>
+		<div class="m-2 flex flex-col gap-1">
+			<TrialBanner
+				v-if="
+					userResource.data?.is_system_manager && userResource.data?.is_fc_site
+				"
+				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
+			/>
+			<GettingStartedBanner
+				v-if="showOnboarding && !isOnboardingStepsCompleted"
+				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
+				appName="learning"
+			/>
+			<SidebarLink
+				v-if="isOnboardingStepsCompleted"
+				:link="{
+					label: __('Help'),
+				}"
+				:isCollapsed="sidebarStore.isSidebarCollapsed"
+				@click="
+					() => {
+						showHelpModal = minimize ? true : !showHelpModal
+						minimize = !showHelpModal
+					}
+				"
+			>
+				<template #icon>
+					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+						<CircleHelp class="h-4 w-4 stroke-1.5" />
+					</span>
+				</template>
+			</SidebarLink>
+			<SidebarLink
+				:link="{
+					label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
+				}"
+				:isCollapsed="sidebarStore.isSidebarCollapsed"
+				@click="toggleSidebar()"
+			>
+				<template #icon>
+					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+						<CollapseSidebar
+							class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
+							:class="{
+								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+							}"
+						/>
+					</span>
+				</template>
+			</SidebarLink>
+		</div>
+		<HelpModal
+			v-if="showOnboarding && showHelpModal"
+			v-model="showHelpModal"
+			v-model:articles="articles"
+			appName="learning"
+			title="Frappe Learning"
+			:logo="LMSLogo"
+			:afterSkip="(step) => capture('onboarding_step_skipped_' + step)"
+			:afterSkipAll="() => capture('onboarding_steps_skipped')"
+			:afterReset="(step) => capture('onboarding_step_reset_' + step)"
+			:afterResetAll="() => capture('onboarding_steps_reset')"
+			docsLink="https://docs.frappe.io/learning"
+		/>
+		<IntermediateStepModal
+			v-model="showIntermediateModal"
+			:currentStep="currentStep"
+		/>
 	</div>
 	<PageModal
 		v-model="showPageModal"
@@ -92,16 +142,42 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
-import { ref, onMounted, inject, watch } from 'vue'
+import { ref, onMounted, inject, watch, reactive, markRaw, h } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
-import { ChevronRight, Plus } from 'lucide-vue-next'
-import { createResource, Button } from 'frappe-ui'
+import { useSidebar } from '@/stores/sidebar'
+import { useSettings } from '@/stores/settings'
+import { Button, createResource } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
+import { capture } from '@/telemetry'
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import { useRouter } from 'vue-router'
+import InviteIcon from './Icons/InviteIcon.vue'
+import {
+	BookOpen,
+	ChevronRight,
+	Plus,
+	CircleHelp,
+	FolderTree,
+	FileText,
+	UserPlus,
+	Users,
+	BookText,
+} from 'lucide-vue-next'
+import {
+	TrialBanner,
+	HelpModal,
+	GettingStartedBanner,
+	useOnboarding,
+	showHelpModal,
+	minimize,
+	IntermediateStepModal,
+} from 'frappe-ui/frappe'
 
 const { user, sidebarSettings } = sessionStore()
 const { userResource } = usersStore()
+let sidebarStore = useSidebar()
 const socket = inject('$socket')
 const unreadCount = ref(0)
 const sidebarLinks = ref(getSidebarLinks())
@@ -109,13 +185,28 @@ const showPageModal = ref(false)
 const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
-const showWebPages = ref(false)
+const settingsStore = useSettings()
+const showOnboarding = ref(false)
+const showIntermediateModal = ref(false)
+const currentStep = ref({})
+const router = useRouter()
+let onboardingDetails
+let isOnboardingStepsCompleted = false
+const iconProps = {
+	strokeWidth: 1.5,
+	width: 16,
+	height: 16,
+}
 
 onMounted(() => {
+	addNotifications()
+	setSidebarLinks()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
-	addNotifications()
+})
+
+const setSidebarLinks = () => {
 	sidebarSettings.reload(
 		{},
 		{
@@ -130,7 +221,7 @@ onMounted(() => {
 			},
 		}
 	)
-})
+}
 
 const unreadNotifications = createResource({
 	cache: 'Unread Notifications Count',
@@ -174,7 +265,59 @@ const addQuizzes = () => {
 			label: 'Quizzes',
 			icon: 'CircleHelp',
 			to: 'Quizzes',
-			activeFor: ['Quizzes', 'QuizForm'],
+			activeFor: [
+				'Quizzes',
+				'QuizForm',
+				'QuizSubmissionList',
+				'QuizSubmission',
+			],
+		})
+	}
+}
+
+const addAssignments = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.push({
+			label: 'Assignments',
+			icon: 'Pencil',
+			to: 'Assignments',
+			activeFor: [
+				'Assignments',
+				'AssignmentForm',
+				'AssignmentSubmissionList',
+				'AssignmentSubmission',
+			],
+		})
+	}
+}
+
+const addPrograms = () => {
+	let activeFor = ['Programs', 'ProgramForm']
+	let index = 1
+	let canAddProgram = false
+
+	if (
+		!isInstructor.value &&
+		!isModerator.value &&
+		settingsStore.learningPaths.data
+	) {
+		sidebarLinks.value = sidebarLinks.value.filter(
+			(link) => link.label !== 'Courses'
+		)
+		activeFor.push('CourseDetail')
+		activeFor.push('Lesson')
+		index = 0
+		canAddProgram = true
+	} else if (isInstructor.value || isModerator.value) {
+		canAddProgram = true
+	}
+
+	if (canAddProgram) {
+		sidebarLinks.value.splice(index, 0, {
+			label: 'Programs',
+			icon: 'Route',
+			to: 'Programs',
+			activeFor: activeFor,
 		})
 	}
 }
@@ -206,13 +349,233 @@ const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)
 }
 
+const toggleSidebar = () => {
+	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
+	localStorage.setItem(
+		'isSidebarCollapsed',
+		JSON.stringify(sidebarStore.isSidebarCollapsed)
+	)
+}
+
+const toggleWebPages = () => {
+	sidebarStore.isWebpagesCollapsed = !sidebarStore.isWebpagesCollapsed
+	localStorage.setItem(
+		'isWebpagesCollapsed',
+		JSON.stringify(sidebarStore.isWebpagesCollapsed)
+	)
+}
+
+const getFirstCourse = async () => {
+	let firstCourse = localStorage.getItem('firstCourse')
+	if (firstCourse) return firstCourse
+	return await call('lms.lms.onboarding.get_first_course')
+}
+
+const getFirstBatch = async () => {
+	let firstBatch = localStorage.getItem('firstBatch')
+	if (firstBatch) return firstBatch
+	return await call('lms.lms.onboarding.get_first_batch')
+}
+
+const steps = reactive([
+	{
+		name: 'create_first_course',
+		title: __('Create your first course'),
+		icon: markRaw(h(BookOpen, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			router.push({
+				name: 'Courses',
+			})
+		},
+	},
+	{
+		name: 'create_first_chapter',
+		title: __('Add your first chapter'),
+		icon: markRaw(h(FolderTree, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let course = await getFirstCourse()
+			if (course) {
+				router.push({ name: 'CourseForm', params: { courseName: course } })
+			} else {
+				router.push({ name: 'CourseForm' })
+			}
+		},
+	},
+	{
+		name: 'create_first_lesson',
+		title: __('Add your first lesson'),
+		icon: markRaw(h(FileText, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let course = await getFirstCourse()
+			if (course) {
+				router.push({
+					name: 'CourseForm',
+					params: { courseName: course },
+				})
+			} else {
+				router.push({ name: 'Courses' })
+			}
+		},
+	},
+	{
+		name: 'create_first_quiz',
+		title: __('Create your first quiz'),
+		icon: markRaw(h(CircleHelp, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			router.push({ name: 'Quizzes' })
+		},
+	},
+	{
+		name: 'invite_students',
+		title: __('Invite your team and students'),
+		icon: markRaw(h(InviteIcon, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			settingsStore.activeTab = 'Members'
+			settingsStore.isSettingsOpen = true
+		},
+	},
+	{
+		name: 'create_first_batch',
+		title: __('Create your first batch'),
+		icon: markRaw(h(Users, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			router.push({ name: 'Batches' })
+		},
+	},
+	{
+		name: 'add_batch_student',
+		title: __('Add students to your batch'),
+		icon: markRaw(h(UserPlus, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let batch = await getFirstBatch()
+			if (batch) {
+				router.push({
+					name: 'Batch',
+					params: {
+						batchName: batch,
+					},
+				})
+			} else {
+				router.push({ name: 'Batch' })
+			}
+		},
+	},
+	{
+		name: 'add_batch_course',
+		title: __('Add courses to your batch'),
+		icon: markRaw(h(BookText, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let batch = await getFirstBatch()
+			if (batch) {
+				router.push({
+					name: 'Batch',
+					params: {
+						batchName: batch,
+					},
+					hash: '#courses',
+				})
+			} else {
+				router.push({ name: 'Batch' })
+			}
+		},
+	},
+])
+
+const articles = ref([
+	{
+		title: __('Introduction'),
+		opened: false,
+		subArticles: [
+			{ name: 'introduction', title: __('Introduction') },
+			{ name: 'setting-up', title: __('Setting up') },
+		],
+	},
+	{
+		title: __('Creating a course'),
+		opened: false,
+		subArticles: [
+			{ name: 'create-a-course', title: __('Create a course') },
+			{ name: 'add-a-chapter', title: __('Add a chapter') },
+			{ name: 'add-a-lesson', title: __('Add a lesson') },
+		],
+	},
+	{
+		title: __('Creating a batch'),
+		opened: false,
+		subArticles: [
+			{ name: 'create-a-batch', title: __('Create a batch') },
+			{ name: 'create-a-live-class', title: __('Create a live class') },
+		],
+	},
+	{
+		title: __('Assessments'),
+		opened: false,
+		subArticles: [
+			{ name: 'quizzes', title: __('Quizzes') },
+			{ name: 'assignments', title: __('Assignments') },
+		],
+	},
+	{
+		title: __('Certification'),
+		opened: false,
+		subArticles: [
+			{ name: 'issue-a-certificate', title: __('Issue a Certificate') },
+			{
+				name: 'custom-certificate-templates',
+				title: __('Custom Certificate Templates'),
+			},
+		],
+	},
+	{
+		title: __('Monetization'),
+		opened: false,
+		subArticles: [
+			{
+				name: 'setting-up-payment-gateway',
+				title: __('Setting up payment gateway'),
+			},
+		],
+	},
+	{
+		title: __('Settings'),
+		opened: false,
+		subArticles: [{ name: 'roles', title: __('Roles') }],
+	},
+])
+
+const setUpOnboarding = () => {
+	if (userResource.data?.is_system_manager) {
+		onboardingDetails = useOnboarding('learning')
+		onboardingDetails.setUp(steps)
+		isOnboardingStepsCompleted = onboardingDetails.isOnboardingStepsCompleted
+		showOnboarding.value = true
+	}
+}
+
 watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
+		addPrograms()
 		addQuizzes()
+		addAssignments()
+		setUpOnboarding()
 	}
 })
-
-let isSidebarCollapsed = ref(getSidebarFromStorage())
 </script>

frontend/src/components/Apps.vue

@@ -3,7 +3,7 @@
 		<template #target="{ togglePopover }">
 			<button
 				:class="[
-					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-8 hover:bg-surface-gray-2',
 				]"
 				@click.prevent="togglePopover()"
 			>
@@ -18,15 +18,15 @@
 		</template>
 		<template #body>
 			<div
-				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
 			>
 				<div v-for="app in apps.data" key="name">
 					<a
 						:href="app.route"
-						class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+						class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-surface-gray-2"
 					>
 						<img class="size-8" :src="app.logo" />
-						<div class="text-sm" @click="app.onClick">
+						<div class="text-sm text-ink-gray-7" @click="app.onClick">
 							{{ app.title }}
 						</div>
 					</a>

frontend/src/components/AssessmentPlugin.vue

@@ -0,0 +1,75 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: 'xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 space-y-4">
+				<div v-if="type == 'quiz'" class="text-lg font-semibold">
+					{{ __('Add a quiz to your lesson') }}
+				</div>
+				<div v-else class="text-lg font-semibold">
+					{{ __('Add an assignment to your lesson') }}
+				</div>
+				<div>
+					<Link
+						v-if="type == 'quiz'"
+						v-model="quiz"
+						doctype="LMS Quiz"
+						:label="__('Select a quiz')"
+						:onCreate="(value, close) => redirectToForm()"
+					/>
+					<Link
+						v-else
+						v-model="assignment"
+						doctype="LMS Assignment"
+						:label="__('Select an assignment')"
+						:onCreate="(value, close) => redirectToForm()"
+					/>
+				</div>
+				<div class="flex justify-end space-x-2">
+					<Button variant="solid" @click="addAssessment()">
+						{{ __('Save') }}
+					</Button>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, Button } from 'frappe-ui'
+import { onMounted, ref, nextTick } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = ref(false)
+const quiz = ref(null)
+const assignment = ref(null)
+
+const props = defineProps({
+	type: {
+		type: String,
+		required: true,
+	},
+	onAddition: {
+		type: Function,
+		required: true,
+	},
+})
+
+onMounted(async () => {
+	await nextTick()
+	show.value = true
+})
+
+const addAssessment = () => {
+	props.onAddition(props.type == 'quiz' ? quiz.value : assignment.value)
+	show.value = false
+}
+
+const redirectToForm = () => {
+	if (props.type == 'quiz') window.open('/lms/quizzes/new', '_blank')
+	else window.open('/lms/assignments/new', '_blank')
+}
+</script>

frontend/src/components/Assessments.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
-		<div class="flex items-center justify-between">
-			<div class="text-lg font-semibold mb-4">
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Assessments') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="showModal = true">
@@ -11,7 +11,7 @@
 				{{ __('Add') }}
 			</Button>
 		</div>
-		<div v-if="assessments.data?.length">
+		<div v-if="assessments.data?.length" class="text-sm">
 			<ListView
 				:columns="getAssessmentColumns()"
 				:rows="assessments.data"
@@ -19,10 +19,11 @@
 				:options="{
 					showTooltip: false,
 					getRowRoute: (row) => getRowRoute(row),
+					selectable: user.data?.is_student ? false : true,
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getAssessmentColumns()">
 						<template #prefix="{ item }">
@@ -38,7 +39,18 @@
 					<ListRow :row="row" v-for="row in assessments.data">
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
-								<div>
+								<div v-if="column.key == 'assessment_type'">
+									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
+								</div>
+								<div v-else-if="column.key == 'title'">
+									{{ row[column.key] }}
+								</div>
+								<div v-else-if="isNaN(row[column.key])">
+									<Badge :theme="getStatusTheme(row[column.key])">
+										{{ row[column.key] }}
+									</Badge>
+								</div>
+								<div v-else>
 									{{ row[column.key] }}
 								</div>
 							</ListRowItem>
@@ -59,7 +71,7 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
-		<div v-else class="text-sm italic text-gray-600">
+		<div v-else class="text-sm italic text-ink-gray-5">
 			{{ __('No Assessments') }}
 		</div>
 	</div>
@@ -80,6 +92,7 @@ import {
 	ListSelectBanner,
 	createResource,
 	Button,
+	Badge,
 } from 'frappe-ui'
 import { inject, ref } from 'vue'
 import AssessmentModal from '@/components/Modals/AssessmentModal.vue'
@@ -145,7 +158,7 @@ const getRowRoute = (row) => {
 			return {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: row.assessment_name,
+					assignmentID: row.assessment_name,
 					submissionName: row.submission.name,
 				},
 			}
@@ -153,7 +166,7 @@ const getRowRoute = (row) => {
 			return {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: row.assessment_name,
+					assignmentID: row.assessment_name,
 					submissionName: 'new',
 				},
 			}
@@ -177,20 +190,33 @@ const getAssessmentColumns = () => {
 		{
 			label: 'Assessment',
 			key: 'title',
+			width: '25rem',
 		},
 		{
 			label: 'Type',
 			key: 'assessment_type',
+			width: '15rem',
 		},
 	]
 
 	if (!user.data?.is_moderator) {
 		columns.push({
-			label: 'Status/Score',
+			label: 'Status/Percentage',
 			key: 'status',
-			align: 'center',
+			align: 'left',
+			width: '10rem',
 		})
 	}
 	return columns
 }
+
+const getStatusTheme = (status) => {
+	if (status === 'Pass') {
+		return 'green'
+	} else if (status === 'Not Graded') {
+		return 'orange'
+	} else {
+		return 'red'
+	}
+}
 </script>

frontend/src/components/Assignment.vue

@@ -0,0 +1,476 @@
+<template>
+	<div
+		v-if="assignment.data"
+		class="grid grid-cols-2 h-full"
+		:class="{ 'border rounded-lg overflow-auto': !showTitle }"
+	>
+		<div
+			class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
+			:class="{ 'h-full': !showTitle }"
+		>
+			<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
+				<div v-if="submissionName === 'new'">
+					{{ __('Submission by') }} {{ user.data?.full_name }}
+				</div>
+				<div v-else>
+					{{ __('Submission by') }} {{ submissionResource.doc?.member_name }}
+				</div>
+			</div>
+			<div class="text-sm text-ink-gray-7 font-medium mb-2">
+				{{ __('Question') }}:
+			</div>
+			<div
+				v-html="assignment.data.question"
+				class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
+			></div>
+		</div>
+
+		<div class="flex flex-col">
+			<div class="p-5">
+				<div class="flex items-center justify-between mb-4">
+					<div class="font-semibold text-ink-gray-9">
+						{{ __('Submission') }}
+					</div>
+					<div class="flex items-center space-x-2">
+						<Badge v-if="isDirty" theme="orange">
+							{{ __('Not Saved') }}
+						</Badge>
+						<Badge
+							v-else-if="submissionResource.doc?.status"
+							:theme="statusTheme"
+							size="lg"
+						>
+							{{ submissionResource.doc?.status }}
+						</Badge>
+						<Button variant="solid" @click="submitAssignment()">
+							{{ __('Save') }}
+						</Button>
+					</div>
+				</div>
+				<div
+					v-if="
+						submissionName != 'new' &&
+						!['Pass', 'Fail'].includes(submissionResource.doc?.status) &&
+						submissionResource.doc?.owner == user.data?.name
+					"
+					class="bg-surface-blue-2 text-ink-blue-2 p-3 rounded-md leading-5 text-sm mb-4"
+				>
+					{{ __("You've successfully submitted the assignment.") }}
+					{{
+						__(
+							"Once the moderator grades your submission, you'll find the details here."
+						)
+					}}
+					{{ __('Feel free to make edits to your submission if needed.') }}
+				</div>
+				<div v-if="showUploader()">
+					<div class="text-xs text-ink-gray-5 mt-1 mb-2">
+						{{ __('Add your assignment as {0}').format(assignment.data.type) }}
+					</div>
+					<FileUploader
+						v-if="!submissionFile"
+						:fileTypes="getType()"
+						:validateFile="validateFile"
+						@success="(file) => saveSubmission(file)"
+					>
+						<template #default="{ uploading, progress, openFileSelector }">
+							<Button @click="openFileSelector" :loading="uploading">
+								{{
+									uploading
+										? __('Uploading {0}%').format(progress)
+										: __('Upload File')
+								}}
+							</Button>
+						</template>
+					</FileUploader>
+					<div v-else>
+						<div class="flex text-ink-gray-7">
+							<div class="border self-start rounded-md p-2 mr-2">
+								<FileText class="h-5 w-5 stroke-1.5" />
+							</div>
+							<a
+								:href="submissionFile.file_url"
+								target="_blank"
+								class="flex flex-col cursor-pointer !no-underline"
+							>
+								<span class="text-sm leading-5">
+									{{ submissionFile.file_name }}
+								</span>
+								<span class="text-sm text-ink-gray-5 mt-1">
+									{{ getFileSize(submissionFile.file_size) }}
+								</span>
+							</a>
+							<X
+								v-if="canModifyAssignment"
+								@click="removeSubmission()"
+								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+							/>
+						</div>
+					</div>
+				</div>
+				<div v-else-if="assignment.data.type == 'URL'">
+					<div class="text-xs text-ink-gray-5 mb-1">
+						{{ __('Enter a URL') }}
+					</div>
+					<FormControl
+						v-model="answer"
+						type="text"
+						:readonly="!canModifyAssignment"
+					/>
+				</div>
+				<div v-else>
+					<div class="text-sm mb-2 text-ink-gray-7">
+						{{ __('Write your answer here') }}
+					</div>
+					<TextEditor
+						:content="answer"
+						@change="(val) => (answer = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+					/>
+				</div>
+
+				<div
+					v-if="
+						user.data?.name == submissionResource.doc?.owner &&
+						submissionResource.doc?.comments
+					"
+					class="mt-8 p-3 bg-surface-blue-2 rounded-md"
+				>
+					<div class="text-sm text-ink-gray-5 font-medium mb-2">
+						{{ __('Comments by Evaluator') }}:
+					</div>
+					<div
+						class="leading-5 text-ink-gray-9"
+						v-html="submissionResource.doc.comments"
+					></div>
+				</div>
+
+				<!-- Grading -->
+				<div v-if="canGradeSubmission" class="mt-8 space-y-4">
+					<div class="font-semibold mb-2 text-ink-gray-9">
+						{{ __('Grading') }}
+					</div>
+					<FormControl
+						v-if="submissionResource.doc"
+						v-model="submissionResource.doc.status"
+						:label="__('Grade')"
+						type="select"
+						:options="submissionStatusOptions"
+					/>
+					<div>
+						<div class="text-sm text-ink-gray-5 mb-1">
+							{{ __('Comments') }}
+						</div>
+						<TextEditor
+							:content="comments"
+							@change="
+								(val) => {
+									comments = val
+									isDirty = true
+								}
+							"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Badge,
+	Button,
+	call,
+	createResource,
+	createDocumentResource,
+	FileUploader,
+	FormControl,
+	TextEditor,
+} from 'frappe-ui'
+import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { FileText, X } from 'lucide-vue-next'
+import { showToast, getFileSize } from '@/utils'
+import { useRouter } from 'vue-router'
+
+const submissionFile = ref(null)
+const answer = ref(null)
+const comments = ref(null)
+const router = useRouter()
+const user = inject('$user')
+const isDirty = ref(false)
+
+const props = defineProps({
+	assignmentID: {
+		type: String,
+		required: true,
+	},
+	submissionName: {
+		type: String,
+		default: 'new',
+	},
+	showTitle: {
+		type: Boolean,
+		default: true,
+	},
+})
+
+onMounted(() => {
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+		submitAssignment()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const assignment = createResource({
+	url: 'frappe.client.get',
+	params: {
+		doctype: 'LMS Assignment',
+		name: props.assignmentID,
+	},
+	auto: true,
+	onSuccess(data) {
+		if (props.submissionName != 'new') {
+			submissionResource.reload()
+		}
+	},
+})
+
+const newSubmission = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		let doc = {
+			doctype: 'LMS Assignment Submission',
+			assignment: props.assignmentID,
+			member: user.data?.name,
+		}
+		if (showUploader()) {
+			doc.assignment_attachment = submissionFile.value.file_url
+		} else {
+			doc.answer = answer.value
+		}
+		return {
+			doc: doc,
+		}
+	},
+})
+
+const imageResource = createResource({
+	url: 'lms.lms.api.get_file_info',
+	makeParams(values) {
+		return {
+			file_url: values.image,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		submissionFile.value = data
+	},
+})
+
+const submissionResource = createDocumentResource({
+	doctype: 'LMS Assignment Submission',
+	name: props.submissionName,
+	onError(err) {
+		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+	},
+	auto: false,
+	cache: [user.data?.name, props.assignmentID],
+})
+
+watch(submissionResource, () => {
+	if (submissionResource.doc) {
+		if (submissionResource.doc.assignment_attachment) {
+			imageResource.reload({
+				image: submissionResource.doc.assignment_attachment,
+			})
+		}
+		if (submissionResource.doc.answer) {
+			answer.value = submissionResource.doc.answer
+		}
+		if (submissionResource.doc.comments) {
+			comments.value = submissionResource.doc.comments
+		}
+		if (submissionResource.isDirty) {
+			isDirty.value = true
+		} else if (showUploader() && !submissionFile.value) {
+			isDirty.value = true
+		} else if (!showUploader() && !answer.value) {
+			isDirty.value = true
+		} else {
+			isDirty.value = false
+		}
+	}
+})
+
+watch(submissionFile, () => {
+	if (props.submissionName == 'new' && submissionFile.value) {
+		isDirty.value = true
+	}
+})
+
+const submitAssignment = () => {
+	if (props.submissionName != 'new') {
+		let evaluator =
+			submissionResource.doc && submissionResource.doc.owner != user.data?.name
+				? user.data?.name
+				: null
+
+		submissionResource.setValue.submit(
+			{
+				...submissionResource.doc,
+				assignment_attachment: submissionFile.value?.file_url,
+				evaluator: evaluator,
+				comments: comments.value,
+				answer: answer.value,
+			},
+			{
+				onSuccess(data) {
+					showToast(__('Success'), __('Changes saved successfully'), 'check')
+				},
+			}
+		)
+	} else {
+		addNewSubmission()
+	}
+}
+
+const addNewSubmission = () => {
+	newSubmission.submit(
+		{},
+		{
+			onSuccess(data) {
+				showToast('Success', 'Assignment submitted successfully.', 'check')
+				if (router.currentRoute.value.name == 'AssignmentSubmission') {
+					router.push({
+						name: 'AssignmentSubmission',
+						params: {
+							assignmentID: props.assignmentID,
+							submissionName: data.name,
+						},
+						query: { fromLesson: router.currentRoute.value.query.fromLesson },
+					})
+				} else {
+					markLessonProgress()
+					router.go()
+				}
+				submissionResource.name = data.name
+				submissionResource.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+const saveSubmission = (file) => {
+	isDirty.value = true
+	submissionFile.value = file
+}
+
+const markLessonProgress = () => {
+	if (router.currentRoute.value.name == 'Lesson') {
+		let courseName = router.currentRoute.value.params.courseName
+		let chapterNumber = router.currentRoute.value.params.chapterNumber
+		let lessonNumber = router.currentRoute.value.params.lessonNumber
+
+		call('lms.lms.api.mark_lesson_progress', {
+			course: courseName,
+			chapter_number: chapterNumber,
+			lesson_number: lessonNumber,
+		})
+	}
+}
+
+const getType = () => {
+	const type = assignment.data?.type
+	if (type == 'Image') {
+		return ['image/*']
+	} else if (type == 'Document') {
+		return [
+			'.doc',
+			'.docx',
+			'.xml',
+			'application/msword',
+			'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+		]
+	} else if (type == 'PDF') {
+		return ['.pdf']
+	}
+}
+
+const validateFile = (file) => {
+	let type = assignment.data?.type
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
+		return 'Only image file is allowed.'
+	} else if (
+		type == 'Document' &&
+		!['doc', 'docx', 'xml'].includes(extension)
+	) {
+		return 'Only document file is allowed.'
+	} else if (type == 'PDF' && !['pdf'].includes(extension)) {
+		return 'Only PDF file is allowed.'
+	}
+}
+
+const removeSubmission = () => {
+	isDirty.value = true
+	submissionFile.value = null
+}
+
+const canGradeSubmission = computed(() => {
+	return (
+		(user.data?.is_moderator ||
+			user.data?.is_evaluator ||
+			user.data?.is_instructor) &&
+		props.submissionName != 'new' &&
+		router.currentRoute.value.name == 'AssignmentSubmission'
+	)
+})
+
+const canModifyAssignment = computed(() => {
+	return (
+		!submissionResource.doc ||
+		(submissionResource.doc?.owner == user.data?.name &&
+			submissionResource.doc?.status == 'Not Graded')
+	)
+})
+
+const submissionStatusOptions = computed(() => {
+	return [
+		{ label: 'Not Graded', value: 'Not Graded' },
+		{ label: 'Pass', value: 'Pass' },
+		{ label: 'Fail', value: 'Fail' },
+	]
+})
+
+const statusTheme = computed(() => {
+	if (!submissionResource.doc) {
+		return 'orange'
+	} else if (submissionResource.doc.status == 'Pass') {
+		return 'green'
+	} else if (submissionResource.doc.status == 'Not Graded') {
+		return 'blue'
+	} else {
+		return 'red'
+	}
+})
+
+const showUploader = () => {
+	return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
+}
+</script>

frontend/src/components/AudioBlock.vue

@@ -9,8 +9,8 @@
 		<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
 			<Button variant="ghost" @click="togglePlay">
 				<template #icon>
-					<Play v-if="!isPlaying" class="w-4 h-4 text-gray-900" />
-					<Pause v-else class="w-4 h-4 text-gray-900" />
+					<Play v-if="!isPlaying" class="w-4 h-4 text-ink-gray-9" />
+					<Pause v-else class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 			<input
@@ -22,13 +22,13 @@
 				@input="changeCurrentTime"
 				class="duration-slider w-full h-1"
 			/>
-			<span class="text-xs text-gray-900 font-medium">
+			<span class="text-xs text-ink-gray-9 font-medium">
 				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
 			</span>
 			<Button variant="ghost" @click="toggleMute">
 				<template #icon>
-					<Volume2 v-if="!isMuted" class="w-4 h-4 text-gray-900" />
-					<VolumeX v-else class="w-4 h-4 text-gray-900" />
+					<Volume2 v-if="!isMuted" class="w-4 h-4 text-ink-gray-9" />
+					<VolumeX v-else class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 		</div>

frontend/src/components/BatchCard.vue

@@ -1,50 +1,52 @@
 <template>
 	<div
-		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
+		class="flex flex-col border-2 hover:bg-surface-gray-2 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
-		<div class="text-lg leading-5 font-semibold mb-2">
+		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
 			{{ batch.title }}
 		</div>
-		<Badge
+		<div
 			v-if="batch.seat_count && batch.seats_left > 0"
-			theme="green"
-			class="self-start mb-2"
+			class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
 		>
 			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">{{ __('Seats Left') }}</span
-			><span v-else-if="batch.seats_left == 1">{{ __('Seat Left') }}</span>
-		</Badge>
-		<Badge
+			<span v-if="batch.seats_left > 1">
+				{{ __('Seats Left') }}
+			</span>
+			<span v-else-if="batch.seats_left == 1">
+				{{ __('Seat Left') }}
+			</span>
+		</div>
+		<div
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			theme="red"
-			class="self-start mb-2"
+			class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
 		>
 			{{ __('Sold Out') }}
-		</Badge>
-		<div class="short-introduction text-sm text-gray-700">
+		</div>
+		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>
-		<div v-if="batch.amount" class="font-semibold mb-4">
+		<div v-if="batch.amount" class="font-semibold text-ink-gray-9 mb-4">
 			{{ batch.price }}
 		</div>
 		<div class="flex flex-col space-y-2 mt-auto">
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
-				class="text-sm text-gray-700"
+				class="text-sm text-ink-gray-7"
 			/>
-			<div class="flex items-center text-sm text-gray-700">
-				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<div class="flex items-center text-sm text-ink-gray-7">
+				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-7" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
 			<div
 				v-if="batch.timezone"
-				class="flex items-center text-sm text-gray-700"
+				class="flex items-center text-sm text-ink-gray-7"
 			>
-				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-5" />
 				<span>
 					{{ batch.timezone }}
 				</span>

frontend/src/components/BatchCourses.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-xl font-semibold">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Courses') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="openCourseModal()">
@@ -18,6 +18,7 @@
 				row-key="batch_course"
 				:options="{
 					showTooltip: false,
+					selectable: user.data?.is_student ? false : true,
 					getRowRoute: (row) => ({
 						name: 'CourseDetail',
 						params: { courseName: row.name },
@@ -25,7 +26,7 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getCoursesColumns()">
 						<template #prefix="{ item }">
@@ -62,6 +63,9 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
+		<div v-else class="text-sm italic text-ink-gray-5">
+			{{ __('No courses added') }}
+		</div>
 		<BatchCourseModal
 			v-model="showCourseModal"
 			:batch="batch"
@@ -118,13 +122,13 @@ const getCoursesColumns = () => {
 		},
 		{
 			label: 'Lessons',
-			key: 'lesson_count',
+			key: 'lessons',
 			align: 'right',
 		},
 		{
 			label: 'Enrollments',
 			align: 'right',
-			key: 'enrollment_count',
+			key: 'enrollments',
 		},
 	]
 }

frontend/src/components/BatchDashboard.vue

@@ -1,17 +1,18 @@
 <template>
-	<div>
+	<div class="space-y-10">
 		<UpcomingEvaluations
 			:batch="batch.data.name"
 			:endDate="batch.data.evaluation_end_date"
 			:courses="batch.data.courses"
-			:isStudent="isStudent"
 		/>
 		<Assessments :batch="batch.data.name" />
+		<StudentHeatmap />
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
+import StudentHeatmap from '@/components/StudentHeatmap.vue'
 
 const props = defineProps({
 	batch: {

frontend/src/components/BatchFeedback.vue

@@ -0,0 +1,245 @@
+<template>
+	<div v-if="user.data?.is_student">
+		<div
+			v-if="feedbackList.data?.length"
+			class="bg-surface-blue-2 text-blue-700 p-2 rounded-md mb-5"
+		>
+			{{ __('Thank you for providing your feedback!') }}
+		</div>
+		<div v-else class="flex justify-between items-center mb-5">
+			<div class="text-lg font-semibold">
+				{{ __('Help Us Improve') }}
+			</div>
+			<Button @click="submitFeedback()">
+				{{ __('Submit') }}
+			</Button>
+		</div>
+		<div class="space-y-8">
+			<div class="flex items-center justify-between">
+				<Rating
+					v-for="key in ratingKeys"
+					v-model="feedback[key]"
+					:label="__(convertToTitleCase(key))"
+					:readonly="readOnly"
+				/>
+			</div>
+			<FormControl
+				v-model="feedback.feedback"
+				type="textarea"
+				:label="__('Feedback')"
+				:rows="7"
+				:readonly="readOnly"
+			/>
+		</div>
+	</div>
+
+	<div v-else-if="feedbackList.data?.length">
+		<div class="text-lg font-semibold mb-5">
+			{{ __('Average of Feedback Received') }}
+		</div>
+
+		<div class="flex items-center justify-between mb-10">
+			<Rating
+				v-for="key in ratingKeys"
+				v-model="average[key]"
+				:label="__(convertToTitleCase(key))"
+				:readonly="true"
+			/>
+		</div>
+
+		<div class="text-lg font-semibold mb-5">
+			{{ __('All Feedback') }}
+		</div>
+		<ListView
+			:columns="feedbackColumns"
+			:rows="feedbackList.data"
+			row-key="name"
+			:options="{
+				showTooltip: false,
+				rowHeight: 'h-16',
+				selectable: false,
+			}"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+			></ListHeader>
+			<ListRows>
+				<ListRow
+					:row="row"
+					v-for="row in feedbackList.data"
+					class="group cursor-pointer feedback-list"
+				>
+					<template #default="{ column, item }">
+						<ListRowItem
+							:item="row[column.key]"
+							:align="column.align"
+							class="text-sm"
+						>
+							<template #prefix>
+								<div v-if="column.key == 'member_name'">
+									<Avatar
+										class="flex"
+										:image="row['member_image']"
+										:label="item"
+										size="sm"
+									/>
+								</div>
+							</template>
+							<div v-if="ratingKeys.includes(column.key)">
+								<Rating v-model="row[column.key]" :readonly="true" />
+							</div>
+							<div v-else class="leading-5">
+								{{ row[column.key] }}
+							</div>
+						</ListRowItem>
+					</template>
+				</ListRow>
+			</ListRows>
+		</ListView>
+	</div>
+	<div v-else class="text-sm italic text-center text-ink-gray-7 mt-5">
+		{{ __('No feedback received yet.') }}
+	</div>
+</template>
+<script setup>
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
+import { convertToTitleCase } from '@/utils'
+import {
+	Avatar,
+	Button,
+	createListResource,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Rating,
+} from 'frappe-ui'
+
+const user = inject('$user')
+const ratingKeys = ['content', 'instructors', 'value']
+const readOnly = ref(false)
+const average = reactive({})
+const feedback = reactive({})
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	let filters = {
+		batch: props.batch,
+	}
+	if (user.data?.is_student) {
+		filters['member'] = user.data?.name
+	}
+	feedbackList.update({
+		filters: filters,
+	})
+	feedbackList.reload()
+})
+
+const feedbackList = createListResource({
+	doctype: 'LMS Batch Feedback',
+	filters: {
+		batch: props.batch,
+	},
+	fields: [
+		'content',
+		'instructors',
+		'value',
+		'feedback',
+		'name',
+		'member',
+		'member_name',
+		'member_image',
+	],
+	cache: ['feedbackList', props.batch, user.data?.name],
+})
+
+watch(
+	() => feedbackList.data,
+	() => {
+		if (feedbackList.data.length) {
+			let data = feedbackList.data
+			readOnly.value = true
+
+			ratingKeys.forEach((key) => {
+				average[key] = 0
+			})
+
+			data.forEach((row) => {
+				Object.keys(row).forEach((key) => {
+					if (ratingKeys.includes(key)) row[key] = row[key] * 5
+					feedback[key] = row[key]
+				})
+				ratingKeys.forEach((key) => {
+					average[key] += row[key]
+				})
+			})
+			Object.keys(average).forEach((key) => {
+				average[key] = average[key] / data.length
+			})
+		}
+	}
+)
+
+const submitFeedback = () => {
+	ratingKeys.forEach((key) => {
+		feedback[key] = feedback[key] / 5
+	})
+	feedbackList.insert.submit(
+		{
+			member: user.data?.name,
+			batch: props.batch,
+			...feedback,
+		},
+		{
+			onSuccess: () => {
+				feedbackList.reload()
+			},
+		}
+	)
+}
+
+const feedbackColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member_name',
+			width: '10rem',
+		},
+		{
+			label: 'Feedback',
+			key: 'feedback',
+			width: '15rem',
+		},
+		{
+			label: 'Content',
+			key: 'content',
+			width: '9rem',
+		},
+		{
+			label: 'Instructors',
+			key: 'instructors',
+			width: '9rem',
+		},
+		{
+			label: 'Value',
+			key: 'value',
+			width: '9rem',
+		},
+	]
+})
+</script>
+<style>
+.feedback-list > button > div {
+	align-items: start;
+	padding: 0.15rem 0;
+}
+</style>

frontend/src/components/BatchOverlay.vue

@@ -1,25 +1,31 @@
 <template>
-	<div v-if="batch.data" class="shadow rounded-md p-5 lg:w-72">
-		<Badge
+	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
+		<div
 			v-if="batch.data.seat_count && seats_left > 0"
-			theme="green"
-			class="self-start mb-2 float-right"
+			class="text-xs bg-green-100 text-green-700 float-right px-2 py-0.5 rounded-md"
 		>
-			{{ seats_left }} <span v-if="seats_left > 1">{{ __('Seats Left') }}</span
-			><span v-else-if="seats_left == 1">{{ __('Seat Left') }}</span>
-		</Badge>
-		<Badge
+			{{ seats_left }}
+			<span v-if="seats_left > 1">
+				{{ __('Seats Left') }}
+			</span>
+			<span v-else-if="seats_left == 1">
+				{{ __('Seat Left') }}
+			</span>
+		</div>
+		<div
 			v-else-if="batch.data.seat_count && seats_left <= 0"
-			theme="red"
-			class="self-start mb-2 float-right"
+			class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
 		>
 			{{ __('Sold Out') }}
-		</Badge>
-		<div v-if="batch.data.amount" class="text-lg font-semibold mb-3">
+		</div>
+		<div
+			v-if="batch.data.amount"
+			class="text-lg font-semibold mb-3 text-ink-gray-9"
+		>
 			{{ formatNumberIntoCurrency(batch.data.amount, batch.data.currency) }}
 		</div>
-		<div class="flex items-center mb-3">
-			<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+		<div class="flex items-center mb-3 text-ink-gray-7">
+			<BookOpen class="h-4 w-4 stroke-1.5 mr-2" />
 			<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 		</div>
 		<DateRange
@@ -27,15 +33,15 @@
 			:endDate="batch.data.end_date"
 			class="mb-3"
 		/>
-		<div class="flex items-center mb-3">
-			<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+		<div class="flex items-center mb-3 text-ink-gray-7">
+			<Clock class="h-4 w-4 stroke-1.5 mr-2" />
 			<span>
 				{{ formatTime(batch.data.start_time) }} -
 				{{ formatTime(batch.data.end_time) }}
 			</span>
 		</div>
-		<div v-if="batch.data.timezone" class="flex items-center">
-			<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+		<div v-if="batch.data.timezone" class="flex items-center text-ink-gray-7">
+			<Globe class="h-4 w-4 stroke-1.5 mr-2" />
 			<span>
 				{{ batch.data.timezone }}
 			</span>
@@ -63,7 +69,11 @@
 					name: batch.data.name,
 				},
 			}"
-			v-else-if="batch.data.paid_batch && batch.data.seats_left"
+			v-else-if="
+				batch.data.paid_batch &&
+				batch.data.seats_left > 0 &&
+				batch.data.accept_enrollments
+			"
 		>
 			<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
 				<span>
@@ -74,7 +84,11 @@
 		<Button
 			variant="solid"
 			class="w-full mt-2"
-			v-else-if="batch.data.allow_self_enrollment && batch.data.seats_left"
+			v-else-if="
+				batch.data.allow_self_enrollment &&
+				batch.data.seats_left &&
+				batch.data.accept_enrollments
+			"
 			@click="enrollInBatch()"
 		>
 			{{ __('Enroll Now') }}
@@ -106,6 +120,7 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const user = inject('$user')
+const dayjs = inject('$dayjs')
 
 const props = defineProps({
 	batch: {

frontend/src/components/BatchStudents.vue

@@ -1,80 +1,221 @@
 <template>
-	<Button class="float-right mb-3" @click="openStudentModal()">
-		<template #prefix>
-			<Plus class="h-4 w-4" />
-		</template>
-		{{ __('Add') }}
-	</Button>
-	<div class="text-lg font-semibold mb-4">
-		{{ __('Students') }}
-	</div>
-	<div v-if="students.data?.length">
-		<ListView
-			:columns="getStudentColumns()"
-			:rows="students.data"
-			row-key="name"
-			:options="{ showTooltip: false }"
-		>
-			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+	<div class="">
+		<div class="w-full flex items-center justify-between pb-4">
+			<div class="font-medium text-ink-gray-7">
+				{{ __('Statistics') }}
+			</div>
+		</div>
+		<div class="grid grid-cols-4 gap-5 mb-8">
+			<div
+				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
 			>
-				<ListHeaderItem :item="item" v-for="item in getStudentColumns()">
-					<template #prefix="{ item }">
-						<component
-							v-if="item.icon"
-							:is="item.icon"
-							class="h-4 w-4 stroke-1.5 ml-4"
-						/>
-					</template>
-				</ListHeaderItem>
-			</ListHeader>
-			<ListRows>
-				<ListRow :row="row" v-for="row in students.data">
-					<template #default="{ column, item }">
-						<ListRowItem :item="row[column.key]" :align="column.align">
-							<template #prefix>
-								<div v-if="column.key == 'full_name'">
-									<Avatar
-										class="flex items-center"
-										:image="row['user_image']"
-										:label="item"
-										size="sm"
-									/>
-								</div>
-							</template>
-							<div>
-								{{ row[column.key] }}
-							</div>
-						</ListRowItem>
-					</template>
-				</ListRow>
-			</ListRows>
-			<ListSelectBanner>
-				<template #actions="{ unselectAll, selections }">
-					<div class="flex gap-2">
-						<Button
-							variant="ghost"
-							@click="removeStudents(selections, unselectAll)"
-						>
-							<Trash2 class="h-4 w-4 stroke-1.5" />
-						</Button>
+				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+					<User class="w-5 h-5 stroke-1.5" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ students.data?.length }}
+					</span>
+					<span class="">
+						{{ __('Students') }}
+					</span>
+				</div>
+			</div>
+
+			<div
+				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+			>
+				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+					<GraduationCap class="w-5 h-5 stroke-1.5" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ certificationCount.data }}
+					</span>
+					<span class="">
+						{{ __('Certified') }}
+					</span>
+				</div>
+			</div>
+
+			<div
+				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+			>
+				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+					<BookOpen class="w-5 h-5 stroke-1.5" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ batch.courses?.length }}
+					</span>
+					<span>
+						{{ __('Courses') }}
+					</span>
+				</div>
+			</div>
+
+			<div
+				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+			>
+				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+					<ShieldCheck class="w-5 h-5 stroke-1.5" />
+				</div>
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
+						{{ assessmentCount }}
+					</span>
+					<span>
+						{{ __('Assessments') }}
+					</span>
+				</div>
+			</div>
+		</div>
+		<div v-if="showProgressChart" class="mb-8">
+			<div class="text-ink-gray-7 font-medium">
+				{{ __('Progress') }}
+			</div>
+			<ApexChart
+				:options="chartOptions"
+				:series="chartData"
+				type="bar"
+				:height="chartData[0].data.length * 30 + 100"
+			/>
+			<div
+				class="flex items-center justify-center text-sm text-ink-gray-7 space-x-4"
+			>
+				<div class="flex items-center space-x-2">
+					<div
+						class="w-3 h-3 rounded-sm"
+						:style="{ 'background-color': theme.colors.green[600] }"
+					></div>
+					<div>
+						{{ __('Courses') }}
 					</div>
+				</div>
+				<div class="flex items-center space-x-2">
+					<div
+						class="w-3 h-3 rounded-sm"
+						:style="{ 'background-color': theme.colors.blue[600] }"
+					></div>
+					<div>
+						{{ __('Assessments') }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-ink-gray-7 font-medium">
+				{{ __('Students') }}
+			</div>
+			<Button @click="openStudentModal()">
+				<template #prefix>
+					<Plus class="h-4 w-4" />
 				</template>
-			</ListSelectBanner>
-		</ListView>
-	</div>
-	<div v-else class="text-sm italic text-gray-600">
-		{{ __('There are no students in this batch.') }}
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div v-if="students.data?.length">
+			<ListView
+				:columns="getStudentColumns()"
+				:rows="students.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem
+						:item="item"
+						v-for="item in getStudentColumns()"
+						:title="item.label"
+					>
+						<template #prefix="{ item }">
+							<FeatherIcon
+								v-if="item.icon"
+								:name="item.icon"
+								class="h-4 w-4 stroke-1.5"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+				<ListRows>
+					<ListRow
+						:row="row"
+						v-for="row in students.data"
+						class="group cursor-pointer"
+						@click="openStudentProgressModal(row)"
+					>
+						<template #default="{ column, item }">
+							<ListRowItem
+								:item="row[column.key]"
+								:align="column.align"
+								class="text-sm"
+							>
+								<template #prefix>
+									<div v-if="column.key == 'full_name'">
+										<Avatar
+											class="flex items-center"
+											:image="row['user_image']"
+											:label="item"
+											size="sm"
+										/>
+									</div>
+								</template>
+								<div
+									v-if="column.key == 'progress'"
+									class="flex items-center space-x-4 w-full"
+								>
+									<ProgressBar :progress="row[column.key]" size="sm" />
+									<div class="text-xs">{{ row[column.key] }}%</div>
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeStudents(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+		<div v-else class="text-sm italic text-ink-gray-5">
+			{{ __('There are no students in this batch.') }}
+		</div>
 	</div>
+
 	<StudentModal
-		:batch="props.batch"
+		:batch="props.batch.name"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
 	/>
+	<BatchStudentProgress
+		:student="selectedStudent"
+		v-model="showStudentProgressModal"
+	/>
 </template>
 <script setup>
 import {
+	Avatar,
+	Button,
 	createResource,
+	FeatherIcon,
 	ListHeader,
 	ListHeaderItem,
 	ListSelectBanner,
@@ -82,65 +223,92 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	Avatar,
-	Button,
 } from 'frappe-ui'
-import { Trash2, Plus } from 'lucide-vue-next'
-import { ref } from 'vue'
+import {
+	BookOpen,
+	GraduationCap,
+	Plus,
+	ShieldCheck,
+	Trash2,
+	User,
+} from 'lucide-vue-next'
+import { ref, watch } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
 import { showToast } from '@/utils'
+import ProgressBar from '@/components/ProgressBar.vue'
+import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue'
+import ApexChart from 'vue3-apexcharts'
+import { theme } from '@/utils/theme'
 
 const showStudentModal = ref(false)
+const showStudentProgressModal = ref(false)
+const selectedStudent = ref(null)
+const chartData = ref(null)
+const chartOptions = ref(null)
+const showProgressChart = ref(false)
+const assessmentCount = ref(0)
 
 const props = defineProps({
 	batch: {
-		type: String,
+		type: Object,
 		default: null,
 	},
 })
 
 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
-	cache: ['students', props.batch],
+	cache: ['students', props.batch.name],
 	params: {
-		batch: props.batch,
+		batch: props.batch?.name,
 	},
 	auto: true,
+	onSuccess(data) {
+		chartData.value = getChartData()
+		showProgressChart.value =
+			data.length && (props.batch?.courses?.length || assessmentCount.value)
+	},
 })
 
 const getStudentColumns = () => {
-	return [
+	let columns = [
 		{
 			label: 'Full Name',
 			key: 'full_name',
-			width: 2,
+			width: '20rem',
+			icon: 'user',
 		},
 		{
-			label: 'Courses Done',
-			key: 'courses_completed',
-			align: 'center',
-		},
-		{
-			label: 'Assessments Done',
-			key: 'assessments_completed',
-			align: 'center',
+			label: 'Progress',
+			key: 'progress',
+			width: '15rem',
+			icon: 'activity',
 		},
 		{
 			label: 'Last Active',
 			key: 'last_active',
+			width: '10rem',
+			align: 'center',
+			icon: 'clock',
 		},
 	]
+
+	return columns
 }
 
 const openStudentModal = () => {
 	showStudentModal.value = true
 }
 
+const openStudentProgressModal = (row) => {
+	showStudentProgressModal.value = true
+	selectedStudent.value = row
+}
+
 const deleteStudents = createResource({
 	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
-			doctype: 'Batch Student',
+			doctype: 'LMS Batch Enrollment',
 			documents: values.students,
 		}
 	},
@@ -160,4 +328,119 @@ const removeStudents = (selections, unselectAll) => {
 		}
 	)
 }
+
+const getChartData = () => {
+	let categories = {}
+
+	if (!students.data?.length) return []
+
+	Object.keys(students.data[0].courses).forEach((course) => {
+		categories[course] = {
+			value: 0,
+			type: 'course',
+			label: course,
+		}
+	})
+
+	Object.keys(students.data?.[0].assessments).forEach((assessment) => {
+		categories[assessment] = {
+			value: 0,
+			type: 'assessment',
+			label: assessment,
+		}
+	})
+
+	students.data.forEach((student) => {
+		Object.keys(student.courses).forEach((course) => {
+			if (student.courses[course] === 100) {
+				categories[course].value += 1
+			}
+		})
+
+		Object.keys(student.assessments).forEach((assessment) => {
+			if (student.assessments[assessment].result === 'Pass') {
+				categories[assessment].value += 1
+			}
+		})
+	})
+
+	chartOptions.value = getChartOptions(categories)
+	return [
+		{
+			name: __('Completed by Students'),
+			data: Object.values(categories).map((item) => item.value),
+		},
+	]
+}
+
+const getChartOptions = (categories) => {
+	const courseColor = theme.colors.green[700]
+	const assessmentColor = theme.colors.blue[700]
+	const maxY =
+		students.data?.length % 5
+			? students.data?.length + (5 - (students.data?.length % 5))
+			: students.data?.length
+
+	return {
+		chart: {
+			type: 'bar',
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			bar: {
+				distributed: true,
+				borderRadius: 3,
+				borderRadiusApplication: 'end',
+				horizontal: true,
+				barHeight: '40%',
+			},
+		},
+		colors: Object.values(categories).map((item) =>
+			item.type === 'course' ? courseColor : assessmentColor
+		),
+		xaxis: {
+			categories: Object.values(categories).map((item) => item.label),
+			labels: {
+				style: {
+					fontSize: '10px',
+				},
+				rotate: 0,
+				formatter: function (value) {
+					return value.length > 30 ? `${value.substring(0, 30)}...` : value
+				},
+			},
+		},
+		yaxis: {
+			max: maxY,
+			min: 0,
+			stepSize: 10,
+			tickAmount: maxY / 5,
+			/* reversed: true */
+		},
+	}
+}
+
+watch(students, () => {
+	if (students.data?.length) {
+		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
+	}
+})
+
+const certificationCount = createResource({
+	url: 'frappe.client.get_count',
+	params: {
+		doctype: 'LMS Certificate',
+		filters: {
+			batch_name: props.batch.name,
+		},
+	},
+	auto: true,
+})
 </script>
+<style>
+.apexcharts-legend {
+	display: none !important;
+}
+</style>

frontend/src/components/BrandSettings.vue

@@ -2,7 +2,7 @@
 	<div class="flex flex-col justify-between min-h-0">
 		<div>
 			<div class="flex items-center justify-between">
-				<div class="font-semibold mb-1">
+				<div class="font-semibold mb-1 text-ink-gray-9">
 					{{ __(label) }}
 				</div>
 				<Badge
@@ -12,7 +12,7 @@
 					theme="orange"
 				/>
 			</div>
-			<div class="text-xs text-gray-600">
+			<div class="text-xs text-ink-gray-5">
 				{{ __(description) }}
 			</div>
 		</div>

frontend/src/components/Categories.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col min-h-0">
 		<div class="flex items-center justify-between">
-			<div class="text-xl font-semibold mb-1">
+			<div class="text-xl font-semibold mb-5 text-ink-gray-9">
 				{{ label }}
 			</div>
 			<Button @click="() => showCategoryForm()">
@@ -28,12 +28,12 @@
 		</div>
 
 		<div class="overflow-y-scroll">
-			<div class="text-base divide-y">
+			<div class="text-base divide-y space-y-2">
 				<FormControl
 					:value="cat.category"
 					type="text"
 					v-for="cat in categories.data"
-					class="form-control"
+					class=""
 					@change.stop="(e) => update(cat.name, e.target.value)"
 				/>
 			</div>
@@ -128,24 +128,3 @@ const update = (name, value) => {
 	)
 }
 </script>
-<style>
-.form-control input {
-	padding: 1.25rem 0;
-	border-color: transparent;
-	background: white;
-}
-
-.form-control input:focus {
-	outline: transparent;
-	background: white;
-	box-shadow: none;
-	border-color: transparent;
-}
-
-.form-control input:hover {
-	outline: transparent;
-	background: white;
-	box-shadow: none;
-	border-color: transparent;
-}
-</style>

frontend/src/components/CertificationLinks.vue

@@ -0,0 +1,85 @@
+<template>
+	<Button
+		v-if="certification.data && certification.data.certificate"
+		@click="downloadCertificate"
+		class=""
+	>
+		<template #prefix>
+			<GraduationCap class="size-4 stroke-1.5" />
+		</template>
+		{{ __('View Certificate') }}
+	</Button>
+	<div
+		v-else-if="
+			certification.data &&
+			certification.data.membership &&
+			certification.data.paid_certificate &&
+			user.data?.is_student
+		"
+	>
+		<router-link
+			v-if="!certification.data.membership.purchased_certificate"
+			:to="{
+				name: 'Billing',
+				params: {
+					type: 'certificate',
+					name: courseName,
+				},
+			}"
+		>
+			<Button class="w-full">
+				<template #prefix>
+					<GraduationCap class="size-4 stroke-1.5" />
+				</template>
+				{{ __('Get Certified') }}
+			</Button>
+		</router-link>
+		<router-link
+			v-else-if="!certification.data.membership.certificate"
+			:to="{
+				name: 'CourseCertification',
+				params: {
+					courseName: courseName,
+				},
+			}"
+		>
+			<Button class="w-full">
+				<template #prefix>
+					<GraduationCap class="size-4 stroke-1.5" />
+				</template>
+				{{ __('Get Certified') }}
+			</Button>
+		</router-link>
+	</div>
+</template>
+<script setup>
+import { Button, createResource } from 'frappe-ui'
+import { inject } from 'vue'
+import { GraduationCap } from 'lucide-vue-next'
+
+const user = inject('$user')
+
+const props = defineProps({
+	courseName: {
+		type: String,
+		required: true,
+	},
+})
+
+const certification = createResource({
+	url: 'lms.lms.api.get_certification_details',
+	params: {
+		course: props.courseName,
+	},
+	auto: user.data ? true : false,
+	cache: ['certificationData', user.data?.name],
+})
+
+const downloadCertificate = () => {
+	window.open(
+		`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+			certification.data.certificate.name
+		}&format=${encodeURIComponent(certification.data.certificate.template)}`
+	)
+}
+</script>

frontend/src/components/Common/DateRange.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="flex items-center">
-		<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+	<div class="flex items-center text-ink-gray-7">
+		<Calendar class="h-4 w-4 stroke-1.5 mr-2" />
 		<span>
 			{{ getFormattedDateRange(props.startDate, props.endDate) }}
 		</span>

frontend/src/components/Controls/Autocomplete.vue

@@ -17,7 +17,7 @@
 								>
 									{{ displayValue(selectedValue) }}
 								</span>
-								<span class="text-base leading-5 text-gray-500" v-else>
+								<span class="text-base leading-5 text-ink-gray-4" v-else>
 									{{ placeholder || '' }}
 								</span>
 							</div>
@@ -28,7 +28,9 @@
 			</template>
 			<template #body="{ isOpen }">
 				<div v-show="isOpen">
-					<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+					<div
+						class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
+					>
 						<div class="relative px-1.5 pt-0.5">
 							<ComboboxInput
 								ref="search"
@@ -62,7 +64,7 @@
 							>
 								<div
 									v-if="group.group && !group.hideLabel"
-									class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
+									class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
 								>
 									{{ group.group }}
 								</div>
@@ -76,7 +78,7 @@
 									<li
 										:class="[
 											'flex items-center rounded px-2.5 py-2 text-base',
-											{ 'bg-gray-100': active },
+											{ 'bg-surface-gray-2': active },
 										]"
 									>
 										<slot
@@ -92,8 +94,8 @@
 													{{ option.label }}
 												</div>
 												<div
-													v-if="option.label != option.description"
-													class="text-xs text-gray-700"
+													v-if="option.description"
+													class="text-xs text-ink-gray-7"
 													v-html="option.description"
 												></div>
 											</div>
@@ -103,7 +105,7 @@
 							</div>
 							<li
 								v-if="groups.length == 0"
-								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
+								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
 							>
 								No results found
 							</li>
@@ -128,7 +130,7 @@ import {
 	ComboboxOptions,
 	ComboboxOption,
 } from '@headlessui/vue'
-import { Popover, Button } from 'frappe-ui'
+import { Popover } from 'frappe-ui'
 import { ChevronDown, X } from 'lucide-vue-next'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 
@@ -243,7 +245,7 @@ watch(showOptions, (val) => {
 })
 
 const textColor = computed(() => {
-	return props.disabled ? 'text-gray-600' : 'text-gray-800'
+	return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
 })
 
 const inputClasses = computed(() => {
@@ -264,12 +266,14 @@ const inputClasses = computed(() => {
 	let variant = props.disabled ? 'disabled' : props.variant
 	let variantClasses = {
 		subtle:
-			'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+			'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		outline:
-			'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+			'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		disabled: [
-			'border bg-gray-50 placeholder-gray-400',
-			props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+			'border bg-surface-menu-bar placeholder-ink-gray-3',
+			props.variant === 'outline'
+				? 'border-outline-gray-2'
+				: 'border-transparent',
 		],
 	}[variant]
 

frontend/src/components/Controls/CodeEditor.vue

@@ -5,7 +5,7 @@
 			height: height,
 		}"
 	>
-		<span class="text-xs" v-if="label">
+		<span class="text-xs text-ink-gray-7" v-if="label">
 			{{ label }}
 		</span>
 		<div
@@ -13,7 +13,7 @@
 			class="h-auto flex-1 overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2 dark:bg-gray-900"
 		/>
 		<span
-			class="mt-1 text-xs text-gray-600"
+			class="mt-1 text-xs text-ink-gray-5"
 			v-show="description"
 			v-html="description"
 		></span>
@@ -27,7 +27,6 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { useDark } from '@vueuse/core'
 import ace from 'ace-builds'
 import 'ace-builds/src-min-noconflict/ext-searchbox'
 import 'ace-builds/src-min-noconflict/theme-chrome'
@@ -35,9 +34,7 @@ import 'ace-builds/src-min-noconflict/theme-twilight'
 import { PropType, onMounted, ref, watch } from 'vue'
 import { Button } from 'frappe-ui'
 
-const isDark = useDark({
-	attribute: 'data-theme',
-})
+const isDark = ref(false)
 
 const props = defineProps({
 	modelValue: {
@@ -82,6 +79,7 @@ const editor = ref<HTMLElement | null>(null)
 let aceEditor = null as ace.Ace.Editor | null
 
 onMounted(() => {
+	isDark.value = localStorage.getItem('theme') === 'dark'
 	setupEditor()
 })
 
@@ -148,6 +146,7 @@ function resetEditor(value: string, resetHistory = false) {
 	value = getModelValue()
 	aceEditor?.setValue(value)
 	aceEditor?.clearSelection()
+	console.log(isDark.value)
 	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
 	props.autofocus && aceEditor?.focus()
 	if (resetHistory) {
@@ -156,6 +155,7 @@ function resetEditor(value: string, resetHistory = false) {
 }
 
 watch(isDark, () => {
+	console.log(isDark.value)
 	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
 })
 
@@ -175,30 +175,3 @@ watch(
 
 defineExpose({ resetEditor })
 </script>
-<style scoped>
-.editor .ace_editor {
-	height: 100%;
-	width: 100%;
-	border-radius: 5px;
-	overscroll-behavior: none;
-}
-.editor :deep(.ace_scrollbar-h) {
-	display: none;
-}
-.editor :deep(.ace_search) {
-	@apply dark:bg-gray-800 dark:text-gray-200;
-	@apply dark:border-gray-800;
-}
-.editor :deep(.ace_searchbtn) {
-	@apply dark:bg-gray-800 dark:text-gray-200;
-	@apply dark:border-gray-800;
-}
-.editor :deep(.ace_button) {
-	@apply dark:bg-gray-800 dark:text-gray-200;
-}
-
-.editor :deep(.ace_search_field) {
-	@apply dark:bg-gray-900 dark:text-gray-200;
-	@apply dark:border-gray-800;
-}
-</style>

frontend/src/components/Controls/IconPicker.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-1.5">
-		<label class="block text-xs text-gray-600">
+		<label class="block text-xs text-ink-gray-5">
 			{{ label }}
 		</label>
 		<div class="w-full">
@@ -8,22 +8,22 @@
 				<template #target="{ togglePopover }">
 					<button
 						@click="openPopover(togglePopover)"
-						class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
+						class="flex w-full items-center space-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
 					>
 						<component
 							v-if="selectedIcon"
-							class="w-4 h-4 text-gray-700 stroke-1.5"
+							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
 							:is="icons[selectedIcon]"
 						/>
 						<component
 							v-else
-							class="w-4 h-4 text-gray-700 stroke-1.5"
+							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
 							:is="icons.Folder"
 						/>
 						<span v-if="selectedIcon">
 							{{ selectedIcon }}
 						</span>
-						<span v-else class="text-gray-600">
+						<span v-else class="text-ink-gray-5">
 							{{ __('Choose an icon') }}
 						</span>
 					</button>
@@ -40,7 +40,7 @@
 							<div v-for="(iconComponent, iconName) in filteredIcons">
 								<component
 									:is="iconComponent"
-									class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
+									class="h-4 w-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
 									@click="setIcon(iconName, close)"
 								/>
 							</div>

frontend/src/components/Controls/Link.vue

@@ -2,6 +2,7 @@
 	<div class="space-y-1.5">
 		<label class="block" :class="labelClasses" v-if="attrs.label">
 			{{ attrs.label }}
+			<span class="text-ink-red-3" v-if="attrs.required">*</span>
 		</label>
 		<Autocomplete
 			ref="autocomplete"
@@ -28,8 +29,8 @@
 				<slot name="item-label" v-bind="{ active, selected, option }" />
 			</template>
 
-			<template v-if="attrs.onCreate" #footer="{ value, close }">
-				<div>
+			<template #footer="{ value, close }">
+				<div v-if="attrs.onCreate">
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
@@ -41,8 +42,21 @@
 						</template>
 					</Button>
 				</div>
+				<div>
+					<Button
+						variant="ghost"
+						class="w-full !justify-start"
+						:label="__('Clear')"
+						@click="() => clearValue(close)"
+					>
+						<template #prefix>
+							<X class="h-4 w-4 stroke-1.5" />
+						</template>
+					</Button>
+				</div>
 			</template>
 		</Autocomplete>
+		<p v-if="description" class="text-sm text-ink-gray-5">{{ description }}</p>
 	</div>
 </template>
 
@@ -50,7 +64,7 @@
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
 import { createResource, Button } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
+import { Plus, X } from 'lucide-vue-next'
 import { useAttrs, computed, ref } from 'vue'
 
 const props = defineProps({
@@ -66,12 +80,14 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	description: {
+		type: String,
+		default: '',
+	},
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])
-
 const attrs = useAttrs()
-
 const valuePropPassed = computed(() => 'value' in attrs)
 
 const value = computed({
@@ -117,7 +133,7 @@ const options = createResource({
 	transform: (data) => {
 		return data.map((option) => {
 			return {
-				label: option.value,
+				label: option.label || option.value,
 				value: option.value,
 				description: option.description,
 			}
@@ -125,7 +141,7 @@ const options = createResource({
 	},
 })
 
-function reload(val) {
+const reload = (val) => {
 	options.update({
 		params: {
 			txt: val,
@@ -136,13 +152,18 @@ function reload(val) {
 	options.reload()
 }
 
+const clearValue = (close) => {
+	emit(valuePropPassed.value ? 'change' : 'update:modelValue', '')
+	close()
+}
+
 const labelClasses = computed(() => {
 	return [
 		{
 			sm: 'text-xs',
 			md: 'text-base',
 		}[attrs.size || 'sm'],
-		'text-gray-600',
+		'text-ink-gray-5',
 	]
 })
 </script>

frontend/src/components/Controls/MultiSelect.vue

@@ -2,6 +2,7 @@
 	<div>
 		<label class="block mb-1" :class="labelClasses" v-if="label">
 			{{ label }}
+			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
 		<div class="grid grid-cols-3 gap-1">
 			<Button
@@ -40,7 +41,9 @@
 						</template>
 						<template #body="{ isOpen }">
 							<div v-show="isOpen">
-								<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+								<div
+									class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
+								>
 									<ComboboxOptions
 										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
 										static
@@ -54,14 +57,14 @@
 											<li
 												:class="[
 													'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-													{ 'bg-gray-100': active },
+													{ 'bg-surface-gray-2': active },
 												]"
 											>
 												<div class="flex flex-col gap-1 p-1">
 													<div class="text-base font-medium">
 														{{ option.description }}
 													</div>
-													<div class="text-sm text-gray-600">
+													<div class="text-sm text-ink-gray-5">
 														{{ option.value }}
 													</div>
 												</div>
@@ -115,6 +118,9 @@ const props = defineProps({
 		type: Function,
 		default: (value) => `${value} is an Invalid value`,
 	},
+	required: {
+		type: Boolean,
+	},
 })
 
 const values = defineModel()
@@ -236,7 +242,7 @@ const labelClasses = computed(() => {
 			sm: 'text-xs',
 			md: 'text-base',
 		}[props.size || 'sm'],
-		'text-gray-600',
+		'text-ink-gray-5',
 	]
 })
 </script>

frontend/src/components/Controls/Rating.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-1">
-		<label class="block text-xs text-gray-600" v-if="props.label">
+		<label class="block text-xs text-ink-gray-5" v-if="props.label">
 			{{ props.label }}
 		</label>
 		<div class="flex text-center">

frontend/src/components/CourseCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md shadow-md text-base overflow-auto"
+		class="flex flex-col h-full rounded-md border-2 overflow-auto"
 		style="min-height: 350px"
 	>
 		<div
@@ -10,19 +10,18 @@
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
 			<div
-				class="flex items-center flex-wrap space-y-1 space-x-1 relative top-4 px-2 w-fit"
+				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
 			>
 				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
-				<Badge
-					variant="outline"
-					theme="gray"
-					size="md"
-					v-for="tag in course.tags"
+				<div
+					v-if="course.tags"
+					v-for="tag in course.tags?.split(', ')"
+					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
 				>
 					{{ tag }}
-				</Badge>
+				</div>
 			</div>
 			<div v-if="!course.image" class="image-placeholder">
 				{{ course.title[0] }}
@@ -30,36 +29,36 @@
 		</div>
 		<div class="flex flex-col flex-auto p-4">
 			<div class="flex items-center justify-between mb-2">
-				<div v-if="course.lesson_count">
+				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
-						<span class="flex items-center">
-							<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.lesson_count }}
+						<span class="flex items-center text-ink-gray-7">
+							<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
+							{{ course.lessons }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.enrollment_count">
+				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
-						<span class="flex items-center">
-							<Users class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.enrollment_count }}
+						<span class="flex items-center text-ink-gray-7">
+							<Users class="h-4 w-4 stroke-1. mr-1" />
+							{{ course.enrollments }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.avg_rating">
+				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
-						<span class="flex items-center">
-							<Star class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.avg_rating }}
+						<span class="flex items-center text-ink-gray-7">
+							<Star class="h-4 w-4 stroke-1.5 mr-1" />
+							{{ course.rating }}
 						</span>
 					</Tooltip>
 				</div>
 
 				<div v-if="course.status != 'Approved'">
 					<Badge
-						variant="solid"
+						variant="subtle"
 						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
 						size="sm"
 					>
@@ -68,11 +67,11 @@
 				</div>
 			</div>
 
-			<div class="text-xl font-semibold leading-6">
+			<div class="text-xl font-semibold leading-6 text-ink-gray-9">
 				{{ course.title }}
 			</div>
 
-			<div class="short-introduction text-gray-700 text-sm">
+			<div class="short-introduction text-ink-gray-7 text-sm">
 				{{ course.short_introduction }}
 			</div>
 
@@ -81,7 +80,10 @@
 				:progress="course.membership.progress"
 			/>
 
-			<div v-if="user && course.membership" class="text-sm mb-4">
+			<div
+				v-if="user && course.membership"
+				class="text-sm text-ink-gray-7 mt-2 mb-4"
+			>
 				{{ Math.ceil(course.membership.progress) }}% completed
 			</div>
 
@@ -99,9 +101,15 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>
 
-				<div class="font-semibold">
+				<div v-if="course.paid_course" class="font-semibold">
 					{{ course.price }}
 				</div>
+				<div
+					v-if="course.paid_certificate || course.enable_certification"
+					class="text-xs text-ink-blue-3 bg-surface-blue-1 py-0.5 px-1 rounded-md"
+				>
+					{{ __('Certification') }}
+				</div>
 			</div>
 		</div>
 	</div>

frontend/src/components/CourseCardOverlay.vue

@@ -1,35 +1,37 @@
 <template>
-	<div class="shadow rounded-md min-w-80">
+	<div class="border-2 rounded-md min-w-80">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
 			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
-			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
+			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
-			<router-link
-				v-if="course.data.membership"
-				:to="{
-					name: 'Lesson',
-					params: {
-						courseName: course.name,
-						chapterNumber: course.data.current_lesson
-							? course.data.current_lesson.split('-')[0]
-							: 1,
-						lessonNumber: course.data.current_lesson
-							? course.data.current_lesson.split('-')[1]
-							: 1,
-					},
-				}"
-			>
-				<Button variant="solid" size="md" class="w-full">
-					<span>
-						{{ __('Continue Learning') }}
-					</span>
-				</Button>
-			</router-link>
+			<div v-if="course.data.membership" class="space-y-2">
+				<router-link
+					:to="{
+						name: 'Lesson',
+						params: {
+							courseName: course.name,
+							chapterNumber: course.data.current_lesson
+								? course.data.current_lesson.split('-')[0]
+								: 1,
+							lessonNumber: course.data.current_lesson
+								? course.data.current_lesson.split('-')[1]
+								: 1,
+						},
+					}"
+				>
+					<Button variant="solid" size="md" class="w-full">
+						<span>
+							{{ __('Continue Learning') }}
+						</span>
+					</Button>
+				</router-link>
+				<CertificationLinks :courseName="course.data.name" class="w-full" />
+			</div>
 			<router-link
 				v-else-if="course.data.paid_course"
 				:to="{
@@ -48,7 +50,7 @@
 			</router-link>
 			<div
 				v-else-if="course.data.disable_self_learning"
-				class="bg-blue-100 text-blue-900 text-sm rounded-md py-1 px-3"
+				class="bg-surface-blue-2 text-blue-900 text-sm rounded-md py-1 px-3"
 			>
 				{{ __('Contact the Administrator to enroll for this course.') }}
 			</div>
@@ -87,38 +89,62 @@
 					</span>
 				</Button>
 			</router-link>
-			<div class="mt-8 mb-4 font-medium">
-				{{ __('This course has:') }}
-			</div>
-			<div class="flex items-center mb-3">
-				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
-				<span class="ml-2">
-					{{ course.data.lesson_count }} {{ __('Lessons') }}
-				</span>
-			</div>
-			<div class="flex items-center mb-3">
-				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
-				<span class="ml-2">
-					{{ course.data.enrollment_count_formatted }}
-					{{ __('Enrolled Students') }}
-				</span>
-			</div>
-			<div class="flex items-center">
-				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
-				<span class="ml-2">
-					{{ course.data.avg_rating }} {{ __('Rating') }}
-				</span>
+			<div class="space-y-4">
+				<div class="mt-8 font-medium text-ink-gray-9">
+					{{ __('This course has:') }}
+				</div>
+				<div class="flex items-center text-ink-gray-9">
+					<BookOpen class="h-4 w-4 stroke-1.5" />
+					<span class="ml-2">
+						{{ course.data.lessons }} {{ __('Lessons') }}
+					</span>
+				</div>
+				<div class="flex items-center text-ink-gray-9">
+					<Users class="h-4 w-4 stroke-1.5" />
+					<span class="ml-2">
+						{{ formatAmount(course.data.enrollments) }}
+						{{ __('Enrolled Students') }}
+					</span>
+				</div>
+				<div
+					v-if="parseInt(course.data.rating) > 0"
+					class="flex items-center text-ink-gray-9"
+				>
+					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
+					<span class="ml-2">
+						{{ course.data.rating }} {{ __('Rating') }}
+					</span>
+				</div>
+				<div
+					v-if="course.data.enable_certification"
+					class="flex items-center font-semibold text-ink-gray-9"
+				>
+					<GraduationCap class="h-4 w-4 stroke-2" />
+					<span class="ml-2">
+						{{ __('Certificate of Completion') }}
+					</span>
+				</div>
+				<div
+					v-if="course.data.paid_certificate"
+					class="flex items-center font-semibold text-ink-gray-9"
+				>
+					<GraduationCap class="h-4 w-4 stroke-2" />
+					<span class="ml-2">
+						{{ __('Paid Certificate after Evaluation') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource } from 'frappe-ui'
-import { showToast } from '@/utils/'
+import { Button, createResource, Tooltip } from 'frappe-ui'
+import { showToast, formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
+import CertificationLinks from '@/components/CertificationLinks.vue'
 
 const router = useRouter()
 const user = inject('$user')
@@ -142,7 +168,7 @@ function enrollStudent() {
 		showToast(
 			__('Please Login'),
 			__('You need to login first to enroll for this course'),
-			'circle-warn'
+			'alert-circle'
 		)
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`

frontend/src/components/CourseInstructors.vue

@@ -1,44 +1,46 @@
 <template>
-	<span v-if="instructors.length == 1">
-		<router-link
-			:to="{
-				name: 'Profile',
-				params: { username: instructors[0].username },
-			}"
-		>
-			{{ instructors[0].full_name }}
-		</router-link>
-	</span>
-	<span v-if="instructors.length == 2">
-		<router-link
-			:to="{
-				name: 'Profile',
-				params: { username: instructors[0].username },
-			}"
-		>
-			{{ instructors[0].first_name }}
-		</router-link>
-		and
-		<router-link
-			:to="{
-				name: 'Profile',
-				params: { username: instructors[1].username },
-			}"
-		>
-			{{ instructors[1].first_name }}
-		</router-link>
-	</span>
-	<span v-if="instructors.length > 2">
-		<router-link
-			:to="{
-				name: 'Profile',
-				params: { username: instructors[0].username },
-			}"
-		>
-			{{ instructors[0].first_name }}
-		</router-link>
-		and {{ instructors.length - 1 }} others
-	</span>
+	<div class="text-ink-gray-7">
+		<span v-if="instructors?.length == 1">
+			<router-link
+				:to="{
+					name: 'Profile',
+					params: { username: instructors[0].username },
+				}"
+			>
+				{{ instructors[0].full_name }}
+			</router-link>
+		</span>
+		<span v-if="instructors?.length == 2">
+			<router-link
+				:to="{
+					name: 'Profile',
+					params: { username: instructors[0].username },
+				}"
+			>
+				{{ instructors[0].first_name }}
+			</router-link>
+			and
+			<router-link
+				:to="{
+					name: 'Profile',
+					params: { username: instructors[1].username },
+				}"
+			>
+				{{ instructors[1].first_name }}
+			</router-link>
+		</span>
+		<span v-if="instructors?.length > 2">
+			<router-link
+				:to="{
+					name: 'Profile',
+					params: { username: instructors[0].username },
+				}"
+			>
+				{{ instructors[0].first_name }}
+			</router-link>
+			and {{ instructors?.length - 1 }} others
+		</span>
+	</div>
 </template>
 <script setup>
 const props = defineProps({

frontend/src/components/CourseOutline.vue

@@ -1,10 +1,17 @@
 <template>
-	<div class="text-base">
+	<div class="h-full">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
-			class="grid grid-cols-[70%,30%] mb-4 px-2"
+			class="flex items-center justify-between space-x-2 mb-4 px-2"
+			:class="{
+				'sticky top-0 z-10 bg-surface-white border-b px-3 py-2.5 sm:px-5':
+					allowEdit,
+			}"
 		>
-			<div class="font-semibold text-lg leading-5">
+			<div
+				class="font-semibold text-lg leading-5 text-ink-gray-9"
+				:class="{ 'font-medium text-p-base': allowEdit }"
+			>
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
@@ -16,7 +23,7 @@
 		</div>
 		<div
 			:class="{
-				'shadow rounded-md pt-2 px-2': showOutline && outline.data?.length,
+				'border-2 rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
 			<Disclosure
@@ -25,21 +32,42 @@
 				:key="chapter.name"
 				:defaultOpen="openChapterDetail(chapter.idx)"
 			>
-				<DisclosureButton ref="" class="flex w-full p-2">
+				<DisclosureButton ref="" class="flex items-center w-full p-2 group">
 					<ChevronRight
 						:class="{
 							'rotate-90 transform duration-200': open,
 							'duration-200': !open,
+							hidden: chapter.is_scorm_package,
 							open: index == 1,
 						}"
-						class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+						class="h-4 w-4 text-ink-gray-9 stroke-1"
 					/>
-					<div class="text-base text-left font-medium leading-5">
+					<div
+						class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
+						@click="redirectToChapter(chapter)"
+					>
 						{{ chapter.title }}
 					</div>
+					<div class="flex ml-auto space-x-4">
+						<Tooltip :text="__('Edit Chapter')" placement="bottom">
+							<FilePenLine
+								v-if="allowEdit"
+								@click.prevent="openChapterModal(chapter)"
+								class="h-4 w-4 text-ink-gray-9 invisible group-hover:visible"
+							/>
+						</Tooltip>
+						<Tooltip :text="__('Delete Chapter')" placement="bottom">
+							<Trash2
+								v-if="allowEdit"
+								@click.prevent="trashChapter(chapter.name)"
+								class="h-4 w-4 text-ink-red-3 invisible group-hover:visible"
+							/>
+						</Tooltip>
+					</div>
 				</DisclosureButton>
-				<DisclosurePanel>
+				<DisclosurePanel v-if="!chapter.is_scorm_package">
 					<Draggable
+						v-if="!chapter.is_scorm_package"
 						:list="chapter.lessons"
 						:disabled="!allowEdit"
 						item-key="name"
@@ -48,7 +76,12 @@
 						:data-chapter="chapter.name"
 					>
 						<template #item="{ element: lesson }">
-							<div class="outline-lesson pl-8 py-2 pr-4">
+							<div
+								class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
+								:class="
+									isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
+								"
+							>
 								<router-link
 									:to="{
 										name: allowEdit ? 'LessonForm' : 'Lesson',
@@ -62,21 +95,21 @@
 									<div class="flex items-center text-sm leading-5 group">
 										<MonitorPlay
 											v-if="lesson.icon === 'icon-youtube'"
-											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+											class="h-4 w-4 stroke-1 mr-2"
 										/>
 										<HelpCircle
 											v-else-if="lesson.icon === 'icon-quiz'"
-											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+											class="h-4 w-4 stroke-1 mr-2"
 										/>
 										<FileText
 											v-else-if="lesson.icon === 'icon-list'"
-											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+											class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
 										/>
 										{{ lesson.title }}
 										<Trash2
 											v-if="allowEdit"
 											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 text-red-500 ml-auto invisible group-hover:visible"
+											class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
 										/>
 										<Check
 											v-if="lesson.is_complete"
@@ -89,6 +122,7 @@
 					</Draggable>
 					<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
 						<router-link
+							v-if="!chapter.is_scorm_package"
 							:to="{
 								name: 'LessonForm',
 								params: {
@@ -102,9 +136,6 @@
 								{{ __('Add Lesson') }}
 							</Button>
 						</router-link>
-						<Button class="ml-2" @click="openChapterModal(chapter)">
-							{{ __('Edit Chapter') }}
-						</Button>
 					</div>
 				</DisclosurePanel>
 			</Disclosure>
@@ -118,24 +149,26 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource } from 'frappe-ui'
-import { ref, getCurrentInstance } from 'vue'
+import { Button, createResource, Tooltip } from 'frappe-ui'
+import { getCurrentInstance, inject, ref } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
-	ChevronRight,
-	MonitorPlay,
-	HelpCircle,
-	FileText,
 	Check,
+	ChevronRight,
+	FileText,
+	FilePenLine,
+	HelpCircle,
+	MonitorPlay,
 	Trash2,
 } from 'lucide-vue-next'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
 import { showToast } from '@/utils'
 
 const route = useRoute()
-const expandAll = ref(true)
+const router = useRouter()
+const user = inject('$user')
 const showChapterModal = ref(false)
 const currentChapter = ref(null)
 const app = getCurrentInstance()
@@ -205,8 +238,10 @@ const updateLessonIndex = createResource({
 
 const trashLesson = (lessonName, chapterName) => {
 	$dialog({
-		title: __('Delete Lesson'),
-		message: __('Are you sure you want to delete this lesson?'),
+		title: __('Delete this lesson?'),
+		message: __(
+			'Deleting this lesson will permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
 		actions: [
 			{
 				label: __('Delete'),
@@ -245,9 +280,66 @@ const updateOutline = (e) => {
 		idx: e.newIndex,
 	})
 }
-</script>
-<style>
-.outline-lesson:has(.router-link-active) {
-	background-color: theme('colors.gray.100');
+
+const deleteChapter = createResource({
+	url: 'lms.lms.api.delete_chapter',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+		}
+	},
+	onSuccess() {
+		outline.reload()
+		showToast('Success', 'Chapter deleted successfully', 'check')
+	},
+})
+
+const trashChapter = (chapterName) => {
+	$dialog({
+		title: __('Delete this chapter?'),
+		message: __(
+			'Deleting this chapter will also delete all its lessons and permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteChapter.submit({ chapter: chapterName })
+					close()
+				},
+			},
+		],
+	})
 }
-</style>
+
+const redirectToChapter = (chapter) => {
+	if (!chapter.is_scorm_package) return
+	event.preventDefault()
+	if (props.allowEdit) return
+	if (!user.data) {
+		showToast(
+			__('You are not enrolled'),
+			__('Please enroll for this course to view this lesson'),
+			'alert-circle'
+		)
+		return
+	}
+
+	router.push({
+		name: 'SCORMChapter',
+		params: {
+			courseName: props.courseName,
+			chapterName: chapter.name,
+		},
+	})
+}
+
+const isActiveLesson = (lessonNumber) => {
+	return (
+		route.params.chapterNumber == lessonNumber.split('.')[0] &&
+		route.params.lessonNumber == lessonNumber.split('.')[1]
+	)
+}
+</script>

frontend/src/components/CourseReviews.vue

@@ -7,7 +7,7 @@
 		>
 			{{ __('Write a Review') }}
 		</Button>
-		<div class="flex items-center font-semibold text-2xl">
+		<div class="flex items-center font-semibold text-2xl text-ink-gray-9">
 			{{ __('Student Reviews') }}
 		</div>
 		<div class="grid gap-8 mt-10">
@@ -28,17 +28,17 @@
 								params: { username: review.owner_details.username },
 							}"
 						>
-							<span class="text-lg font-medium mr-4">
+							<span class="text-lg font-medium mr-4 text-ink-gray-7">
 								{{ review.owner_details.full_name }}
 							</span>
 						</router-link>
-						<span>
+						<span class="text-ink-gray-7">
 							{{ review.creation }}
 						</span>
 						<div class="flex mt-2">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
+								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
 								:class="
 									index <= Math.ceil(review.rating)
 										? 'fill-orange-500'
@@ -48,7 +48,7 @@
 						</div>
 					</div>
 				</div>
-				<div v-if="review.review" class="mt-4 leading-5">
+				<div v-if="review.review" class="mt-4 leading-5 text-ink-gray-7">
 					{{ review.review }}
 				</div>
 			</div>
@@ -76,7 +76,7 @@ const props = defineProps({
 		required: true,
 	},
 	avg_rating: {
-		type: Number,
+		type: String,
 		required: true,
 	},
 	membership: {

frontend/src/components/CreateOutline.vue

@@ -6,7 +6,7 @@
 		<div v-if="course.chapters.length">
 			{{ course.chapters }}
 		</div>
-		<div v-else class="border bg-white rounded-md p-5 text-center mt-4">
+		<div v-else class="border bg-surface-white rounded-md p-5 text-center mt-4">
 			<div>
 				{{
 					__(

frontend/src/components/DesktopLayout.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="relative flex h-full flex-col">
 		<div class="h-full flex-1">
-			<div class="flex h-screen text-base">
+			<div class="flex h-screen text-base bg-surface-white">
 				<div
 					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
 				>

frontend/src/components/DiscussionReplies.vue

@@ -3,10 +3,10 @@
 		<div v-if="!singleThread" class="flex items-center mb-5">
 			<Button variant="outline" @click="showTopics = true">
 				<template #icon>
-					<ChevronLeft class="w-5 h-5 stroke-1.5 text-gray-700" />
+					<ChevronLeft class="w-5 h-5 stroke-1.5 text-ink-gray-7" />
 				</template>
 			</Button>
-			<span class="text-lg font-semibold ml-2">
+			<span class="text-lg font-semibold ml-2 text-ink-gray-9">
 				{{ topic.title }}
 			</span>
 		</div>
@@ -17,7 +17,7 @@
 				:class="{ 'border-b': index + 1 != replies.data.length }"
 			>
 				<div class="flex items-center justify-between mb-2">
-					<div class="flex items-center">
+					<div class="flex items-center text-ink-gray-5">
 						<UserAvatar :user="reply.user" class="mr-2" />
 						<span>
 							{{ reply.user.full_name }}
@@ -63,7 +63,7 @@
 					:fixedMenu="reply.editable || false"
 					:editorClass="
 						reply.editable
-							? 'ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none'
+							? 'ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none'
 							: 'prose-sm'
 					"
 				/>
@@ -71,13 +71,14 @@
 		</div>
 
 		<TextEditor
+			v-if="renderEditor"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
 			@change="(val) => (newReply = val)"
 			placeholder="Type your reply here..."
 			:fixedMenu="true"
-			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none border border-gray-300 rounded-b-md min-h-[7rem] py-1 px-2"
+			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none border border-outline-gray-2 rounded-b-md min-h-[7rem] py-1 px-2"
 		/>
 		<div class="flex justify-between mt-2">
 			<span> </span>
@@ -94,7 +95,7 @@ import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted, computed } from 'vue'
+import { ref, inject, onMounted } from 'vue'
 import { createToast } from '../utils'
 
 const showTopics = defineModel('showTopics')
@@ -102,6 +103,8 @@ const newReply = ref('')
 const socket = inject('$socket')
 const user = inject('$user')
 const allUsers = inject('$allUsers')
+const mentionUsers = ref([])
+const renderEditor = ref(false)
 
 const props = defineProps({
 	topic: {
@@ -124,6 +127,7 @@ onMounted(() => {
 	socket.on('delete_message', (data) => {
 		replies.reload()
 	})
+	fetchMentionUsers()
 })
 
 const replies = createResource({
@@ -150,15 +154,26 @@ const newReplyResource = createResource({
 	},
 })
 
-const mentionUsers = computed(() => {
-	let users = Object.values(allUsers.data).map((user) => {
-		return {
-			value: user.name,
-			label: user.full_name,
-		}
-	})
-	return users
-})
+const fetchMentionUsers = () => {
+	if (user.data?.is_student) {
+		renderEditor.value = true
+	} else {
+		allUsers.reload(
+			{},
+			{
+				onSuccess(data) {
+					mentionUsers.value = Object.values(data).map((user) => {
+						return {
+							value: user.name,
+							label: user.full_name,
+						}
+					})
+					renderEditor.value = true
+				},
+			}
+		)
+	}
+}
 
 const postReply = () => {
 	newReplyResource.submit(
@@ -178,7 +193,7 @@ const postReply = () => {
 					title: 'Error',
 					text: err.messages?.[0] || err,
 					icon: 'x',
-					iconClasses: 'bg-red-600 text-white rounded-md p-px',
+					iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
 					position: 'top-center',
 					timeout: 10,
 				})

frontend/src/components/Discussions.vue

@@ -3,7 +3,7 @@
 		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
 			{{ __('New {0}').format(singularize(title)) }}
 		</Button>
-		<div class="text-xl font-semibold">
+		<div class="text-xl font-semibold text-ink-gray-9">
 			{{ __(title) }}
 		</div>
 	</div>
@@ -16,10 +16,10 @@
 			>
 				<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
 				<div>
-					<div class="text-lg font-semibold mb-1">
+					<div class="text-lg font-semibold mb-1 text-ink-gray-7">
 						{{ topic.title }}
 					</div>
-					<div class="flex items-center">
+					<div class="flex items-center text-ink-gray-5">
 						<span>
 							{{ topic.user.full_name }}
 						</span>
@@ -44,12 +44,12 @@
 		v-else
 		class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
 	>
-		<MessageSquareText class="w-7 h-7 text-gray-500 stroke-1.5 mr-2" />
+		<MessageSquareText class="w-7 h-7 text-ink-gray-4 stroke-1.5 mr-2" />
 		<div class="">
 			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
 			</div>
-			<div class="text-gray-600">
+			<div class="text-ink-gray-5">
 				{{ __(emptyStateText) }}
 			</div>
 		</div>

frontend/src/components/Evaluators.vue

@@ -0,0 +1,129 @@
+<template>
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div>
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+					{{ __(label) }}
+				</div>
+				<!-- <div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div> -->
+			</div>
+			<div class="flex item-center space-x-2">
+				<FormControl
+					v-model="search"
+					:placeholder="__('Search')"
+					type="text"
+					:debounce="300"
+				/>
+				<Button @click="() => (showForm = !showForm)">
+					<template #icon>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
+					</template>
+				</Button>
+			</div>
+		</div>
+
+		<!-- Form to add new member -->
+		<div v-if="showForm" class="flex items-center space-x-2 my-4">
+			<FormControl
+				v-model="email"
+				:placeholder="__('Email')"
+				type="email"
+				class="w-full"
+			/>
+			<Button @click="addEvaluator()" variant="subtle">
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div class="divide-y">
+			<div
+				v-for="evaluator in evaluators.data"
+				@click="openProfile(evaluator.username)"
+				class="cursor-pointer"
+			>
+				<div class="flex items-center justify-between py-3">
+					<div class="flex items-center space-x-3">
+						<Avatar
+							:image="evaluator.user_image"
+							:label="evaluator.full_name"
+							size="lg"
+						/>
+						<div>
+							<div class="text-base font-semibold text-ink-gray-9">
+								{{ evaluator.full_name }}
+							</div>
+							<div class="text-xs text-ink-gray-5">
+								{{ evaluator.evaluator }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { createResource, Button, FormControl, call, Avatar } from 'frappe-ui'
+import { ref, watch } from 'vue'
+import { Plus, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const show = defineModel('show')
+const search = ref('')
+const showForm = ref(false)
+const email = ref('')
+const router = useRouter()
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	show: {
+		type: Boolean,
+	},
+})
+
+const evaluators = createResource({
+	url: 'frappe.client.get_list',
+	makeParams: () => {
+		return {
+			doctype: 'Course Evaluator',
+			fields: ['evaluator', 'full_name', 'user_image', 'username'],
+			filters: search.value ? [['evaluator', 'like', search.value]] : [],
+		}
+	},
+	auto: true,
+})
+
+const addEvaluator = () => {
+	call('lms.lms.api.add_an_evaluator', {
+		email: email.value,
+	}).then((data) => {
+		showForm.value = false
+		email.value = ''
+		evaluators.reload()
+	})
+}
+
+watch(search, () => {
+	evaluators.reload()
+})
+
+const openProfile = (username) => {
+	show.value = false
+	router.push({
+		name: 'Profile',
+		params: {
+			username: username,
+		},
+	})
+}
+</script>

frontend/src/components/Icons/BatchIcon.vue

@@ -1,23 +0,0 @@
-<template>
-	<svg
-		width="18"
-		height="18"
-		viewBox="0 0 18 18"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<g clip-path="url(#clip0_1584_1676)">
-			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-				d="M3.17474 0.625C2.34632 0.625 1.67474 1.29657 1.67474 2.125V7.475C1.67474 8.30343 2.34632 8.975 3.17474 8.975H14.8247C15.6532 8.975 16.3247 8.30343 16.3247 7.475V2.125C16.3247 1.29657 15.6532 0.625 14.8247 0.625H3.17474ZM2.67474 2.125C2.67474 1.84886 2.8986 1.625 3.17474 1.625H14.8247C15.1009 1.625 15.3247 1.84886 15.3247 2.125V7.475C15.3247 7.75114 15.1009 7.975 14.8247 7.975H3.17474C2.8986 7.975 2.67474 7.75114 2.67474 7.475V2.125ZM4.27478 10.0749C3.99864 10.0749 3.77478 10.2987 3.77478 10.5749V12.6749C3.77478 12.951 3.99864 13.1749 4.27478 13.1749C4.55092 13.1749 4.77478 12.951 4.77478 12.6749V11.0749H6.92478V12.6749C6.92478 12.951 7.14864 13.1749 7.42478 13.1749C7.70092 13.1749 7.92478 12.951 7.92478 12.6749V10.5749C7.92478 10.2987 7.70092 10.0749 7.42478 10.0749H4.27478ZM10.0749 10.5749C10.0749 10.2987 10.2987 10.0749 10.5749 10.0749H13.7249C14.001 10.0749 14.2249 10.2987 14.2249 10.5749V12.6749C14.2249 12.951 14.001 13.1749 13.7249 13.1749C13.4487 13.1749 13.2249 12.951 13.2249 12.6749V11.0749H11.0749V12.6749C11.0749 12.951 10.851 13.1749 10.5749 13.1749C10.2987 13.1749 10.0749 12.951 10.0749 12.6749V10.5749ZM1.125 14.275C0.848858 14.275 0.625 14.4988 0.625 14.775V16.875C0.625 17.1511 0.848858 17.375 1.125 17.375C1.40114 17.375 1.625 17.1511 1.625 16.875V15.275H3.775V16.875C3.775 17.1511 3.99886 17.375 4.275 17.375C4.55114 17.375 4.775 17.1511 4.775 16.875V14.775C4.775 14.4988 4.55114 14.275 4.275 14.275H1.125ZM13.2252 14.775C13.2252 14.4988 13.4491 14.275 13.7252 14.275H16.8752C17.1514 14.275 17.3752 14.4988 17.3752 14.775V16.875C17.3752 17.1511 17.1514 17.375 16.8752 17.375C16.5991 17.375 16.3752 17.1511 16.3752 16.875V15.275H14.2252V16.875C14.2252 17.1511 14.0014 17.375 13.7252 17.375C13.4491 17.375 13.2252 17.1511 13.2252 16.875V14.775ZM7.42511 14.275C7.14897 14.275 6.92511 14.4988 6.92511 14.775V16.875C6.92511 17.1511 7.14897 17.375 7.42511 17.375C7.70125 17.375 7.92511 17.1511 7.92511 16.875V15.275H10.0751V16.875C10.0751 17.1511 10.299 17.375 10.5751 17.375C10.8513 17.375 11.0751 17.1511 11.0751 16.875V14.775C11.0751 14.4988 10.8513 14.275 10.5751 14.275H7.42511Z"
-				fill="#525252"
-			/>
-		</g>
-		<defs>
-			<clipPath id="clip0_1584_1676">
-				<rect width="18" height="18" fill="white" />
-			</clipPath>
-		</defs>
-	</svg>
-</template>

frontend/src/components/Icons/FrappeCloudIcon.vue

@@ -0,0 +1,23 @@
+<template>
+	<svg
+		width="32"
+		height="32"
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect
+			x="0.75"
+			y="0.75"
+			width="30.5"
+			height="30.5"
+			rx="6.25"
+			stroke="currentColor"
+			stroke-width="1.5"
+		/>
+		<path
+			d="M24.5011 14.1124C23.3954 12.4873 21.532 11.5477 19.594 11.6747C18.7616 10.1384 17.2211 9.12267 15.4198 9.0084C14.1651 8.93222 12.8979 9.3766 11.9165 10.24C11.2456 10.8367 10.7611 11.5223 10.463 12.2968C10.289 12.7539 9.89151 13.0459 9.46912 13.0459H6.5V15.5852H9.46912C10.9226 15.5852 12.2271 14.6584 12.7737 13.2237C12.9227 12.8301 13.1712 12.4873 13.5439 12.1571C14.0284 11.7255 14.662 11.4969 15.2583 11.535C16.1528 11.5985 16.7863 12.0175 17.1839 12.538C17.6063 13.0205 17.8423 13.7696 17.979 14.5187C18.774 14.2902 19.6437 14.0997 20.476 14.2394C21.1593 14.3536 21.7929 14.7218 22.2525 15.2678C22.327 15.3567 22.4016 15.4456 22.4637 15.5471C23.06 16.4232 23.1718 17.5024 22.7743 18.5689C22.414 19.5592 21.0847 20.4607 19.9791 20.4607H11.3326C10.1524 20.4607 9.18339 19.5592 9.03432 18.4038H6.54969C6.71119 20.9686 8.78585 23 11.3326 23H19.9915C22.1283 23 24.3769 21.451 25.1098 19.4704C25.7931 17.6167 25.5695 15.6614 24.5135 14.0997L24.5011 14.1124Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

frontend/src/components/Icons/InviteIcon.vue

@@ -0,0 +1,16 @@
+<template>
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M13.5 0C13.7761 0 14 0.223858 14 0.5V2H15.5C15.7761 2 16 2.22386 16 2.5C16 2.77614 15.7761 3 15.5 3H14V4.5C14 4.77614 13.7761 5 13.5 5C13.2239 5 13 4.77614 13 4.5V3H11.5C11.2239 3 11 2.77614 11 2.5C11 2.22386 11.2239 2 11.5 2H13V0.5C13 0.223858 13.2239 0 13.5 0ZM7.9998 2C4.6862 2 2 4.6862 2 7.9998C2 9.49431 2.54643 10.8612 3.45041 11.9116C4.18218 10.8499 5.63104 9.51974 7.99595 9.50011L8.0001 9.50008C9.89267 9.50009 11.5613 10.456 12.5506 11.91C13.4537 10.8598 13.9996 9.49355 13.9996 7.9998C13.9996 7.72366 14.2235 7.4998 14.4996 7.4998C14.7757 7.4998 14.9996 7.72366 14.9996 7.9998C14.9996 11.8657 11.8657 14.9996 7.9998 14.9996C4.13392 14.9996 1 11.8657 1 7.9998C1 4.13392 4.13392 1 7.9998 1C8.27594 1 8.4998 1.22386 8.4998 1.5C8.4998 1.77614 8.27594 2 7.9998 2ZM11.8227 12.6242C11.0281 11.3487 9.61378 10.5008 8.00216 10.5001C5.94811 10.518 4.73746 11.7366 4.17676 12.6241C5.21484 13.4833 6.54702 13.9996 7.9998 13.9996C9.45251 13.9996 10.7846 13.4833 11.8227 12.6242ZM8 4.5C7.0335 4.5 6.25 5.2835 6.25 6.25C6.25 7.2165 7.0335 8 8 8C8.9665 8 9.75 7.2165 9.75 6.25C9.75 5.2835 8.9665 4.5 8 4.5ZM5.25 6.25C5.25 4.73122 6.48122 3.5 8 3.5C9.51878 3.5 10.75 4.73122 10.75 6.25C10.75 7.76878 9.51878 9 8 9C6.48122 9 5.25 7.76878 5.25 6.25Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

frontend/src/components/JobCard.vue

@@ -1,71 +1,41 @@
 <template>
-	<div class="flex rounded p-1 lg:px-2 lg:py-2.5 hover:bg-gray-100">
-		<div class="flex w-3/5 md:w-2/5">
-			<img
-				:src="job.company_logo"
-				class="w-12 h-12 rounded-lg object-contain mr-4"
-				:alt="job.company_name"
-			/>
-			<div>
-				<div class="font-medium mb-1">
+	<div class="flex space-x-4 border rounded-md p-2">
+		<img :src="job.company_logo" class="size-10 rounded-full object-contain" />
+		<div class="flex flex-col space-y-2 flex-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-ink-gray-9">
 					{{ job.job_title }}
-				</div>
-				<div class="text-gray-700">
-					{{ job.company_name }}
-				</div>
-			</div>
-		</div>
-		<div class="flex justify-end w-1/5 text-gray-700">
-			{{ job.location.replace(',', '').split(' ')[0] }}
-		</div>
-		<div
-			class="flex justify-end w-1/5 text-gray-700 text-right hidden md:block"
-		>
-			{{ job.type }}
-		</div>
-		<div class="flex justify-end w-1/5 text-sm text-gray-700 text-right">
-			{{ dayjs(job.creation).format('DD MMM YYYY') }}
-		</div>
-	</div>
-	<!-- <div class="flex flex-col shadow rounded-md p-4 h-full">
-		<div class="flex justify-between">
-			<div>
-				<div class="text-xl font-semibold mb-2">
-					{{ job.job_title }}
-				</div>
-				<div>
-					{{ __("posted by") }}
-					<span class="font-medium">
-						{{ job.company_name }}
-					</span>
-				</div>
-			</div>
-			<img
-				:src="job.company_logo"
-				class="w-12 h-12 rounded-lg object-contain"
-			/>
-		</div>
-		<div class="flex justify-between mt-8">
-			<div class="flex items-center">
-				<Badge :label="job.type" theme="green" size="lg" class="mr-4"/>
-				<Badge :label="job.location" theme="gray" size="lg">
-					<template #prefix>
-						<MapPin class="h-4 w-4 stroke-1.5" />
-					</template>
-				</Badge>
-			</div>
-			<div>
-				<span class="font-medium">
-					{{ dayjs(job.creation).format('DD MMM YYYY') }}
 				</span>
 			</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
+				<Building2 class="w-4 h-4 stroke-1.5" />
+				<span>
+					{{ job.company_name }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
+				<MapPin class="w-4 h-4 stroke-1.5" />
+				<span>
+					{{ job.location }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
+				<Shapes class="w-4 h-4 stroke-1.5" />
+				<span>
+					{{ job.type }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
+				<Calendar class="w-4 h-4 stroke-1.5" />
+				<span> {{ __('posted') }} {{ dayjs(job.creation).fromNow() }} </span>
+			</div>
 		</div>
-	</div> -->
+	</div>
 </template>
 <script setup>
-import { MapPin } from 'lucide-vue-next'
-import { Badge } from 'frappe-ui'
+import { Building2, Calendar, MapPin, Shapes } from 'lucide-vue-next'
 import { inject } from 'vue'
+import { Avatar } from 'frappe-ui'
 
 const dayjs = inject('$dayjs')
 const props = defineProps({

frontend/src/components/LessonContent.vue

@@ -4,18 +4,18 @@
 			class="youtube-video"
 			:src="getYouTubeVideoSource(youtube.split('/').pop())"
 			width="100%"
-			height="400"
+			:height="screenSize.width < 640 ? 200 : 400"
 			frameborder="0"
 			allowfullscreen
 		></iframe>
 	</div>
-	<div v-for="block in content.split('\n\n')">
+	<div v-for="block in content?.split('\n\n')">
 		<div v-if="block.includes('{{ YouTubeVideo')">
 			<iframe
 				class="youtube-video"
 				:src="getYouTubeVideoSource(block)"
 				width="100%"
-				height="400"
+				:height="screenSize.width < 640 ? 200 : 400"
 				frameborder="0"
 				allowfullscreen
 			></iframe>
@@ -66,6 +66,9 @@
 <script setup>
 import Quiz from '@/components/QuizBlock.vue'
 import MarkdownIt from 'markdown-it'
+import { useScreenSize } from '@/utils/composables'
+
+const screenSize = useScreenSize()
 
 const markdown = new MarkdownIt({
 	html: true,

frontend/src/components/LessonHelp.vue

@@ -1,5 +1,20 @@
 <template>
-	<div class="space-y-5">
+	<div class="space-y-5 text-ink-gray-9">
+		<div class="space-y-2">
+			<div class="flex items-center text-sm font-medium space-x-2">
+				<span>
+					{{ __('What does include in preview mean?') }}
+				</span>
+			</div>
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
+				{{
+					__(
+						'If Include in Preview is enabled for a lesson then the lesson will also be accessible to non logged in users.'
+					)
+				}}
+			</div>
+		</div>
+
 		<div class="space-y-2">
 			<div
 				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
@@ -8,9 +23,9 @@
 				<span>
 					{{ __('How to add a Quiz?') }}
 				</span>
-				<Info class="w-3 h-3 text-gray-700" />
+				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
-			<div class="text-xs text-gray-600 mb-1 leading-5">
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.'
@@ -21,15 +36,15 @@
 
 		<div class="space-y-2">
 			<div
-				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
+				class="flex text-sm font-medium space-x-2 cursor-pointer"
 				@click="openHelpDialog('upload')"
 			>
 				<span class="leading-5">
-					{{ __('How to upload content from your system?') }}
+					{{ __(contentMap['upload']) }}
 				</span>
-				<Info class="w-3 h-3 text-gray-700" />
+				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
-			<div class="text-xs text-gray-600 mb-1 leading-5">
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.'
@@ -44,11 +59,11 @@
 				@click="openHelpDialog('youtube')"
 			>
 				<span>
-					{{ __('How to add a YouTube Video?') }}
+					{{ __(contentMap['youtube']) }}
 				</span>
-				<Info class="w-3 h-3 text-gray-700" />
+				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
-			<div class="text-xs text-gray-600 mb-1 leading-5">
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'Copy the URL of the video from YouTube and paste it in the editor.'
@@ -57,7 +72,7 @@
 			</div>
 		</div>
 	</div>
-	<ExplanationVideos v-model="showExplanation" :type="type" />
+	<ExplanationVideos v-model="showExplanation" :title="title" :type="type" />
 </template>
 <script setup>
 import { Info } from 'lucide-vue-next'
@@ -66,9 +81,16 @@ import ExplanationVideos from '@/components/Modals/ExplanationVideos.vue'
 
 const showExplanation = ref(false)
 const type = ref(null)
+const title = ref(null)
+const contentMap = {
+	quiz: 'How to add a Quiz?',
+	upload: 'How to upload content from your system?',
+	youtube: 'How to add a YouTube Video?',
+}
 
 const openHelpDialog = (contentType) => {
 	type.value = contentType
+	title.value = contentMap[contentType]
 	showExplanation.value = true
 }
 </script>

frontend/src/components/LiveClass.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex items-center justify-between mb-5">
-		<div class="text-lg font-semibold">
+		<div class="text-lg font-semibold text-ink-gray-9">
 			{{ __('Live Class') }}
 		</div>
 		<Button v-if="user.data.is_moderator" @click="openLiveClassModal">
@@ -15,48 +15,59 @@
 	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
 		<div
 			v-for="cls in liveClasses.data"
-			class="flex flex-col border rounded-md h-full text-sm text-gray-700 p-3"
+			class="flex flex-col border rounded-md h-full text-ink-gray-7 p-3"
 		>
-			<div class="font-semibold text-gray-900 text-lg mb-4">
+			<div class="font-semibold text-ink-gray-9 text-lg mb-1">
 				{{ cls.title }}
 			</div>
-			<div class="leading-5 text-gray-700 text-sm mb-4">
+			<div class="short-introduction">
 				{{ cls.description }}
 			</div>
-			<div class="flex items-center mb-2">
-				<Calendar class="w-4 h-4 stroke-1.5 text-gray-700" />
-				<span class="ml-2">
-					{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-				</span>
-			</div>
-			<div class="flex items-center mb-5">
-				<Clock class="w-4 h-4 stroke-1.5" />
-				<span class="ml-2">
-					{{ formatTime(cls.time) }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-gray-900 mt-auto">
-				<a
-					v-if="user.data?.is_moderator || user.data?.is_evaluator"
-					:href="cls.start_url"
-					target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+			<div class="space-y-3">
+				<div class="flex items-center space-x-2">
+					<Calendar class="w-4 h-4 stroke-1.5" />
+					<span>
+						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
+					</span>
+				</div>
+				<div class="flex items-center space-x-2">
+					<Clock class="w-4 h-4 stroke-1.5" />
+					<span>
+						{{ formatTime(cls.time) }}
+					</span>
+				</div>
+				<div
+					v-if="cls.date >= dayjs().format('YYYY-MM-DD')"
+					class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
 				>
-					<Monitor class="h-4 w-4 stroke-1.5" />
-					{{ __('Start') }}
-				</a>
-				<a
-					:href="cls.join_url"
-					target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
-				>
-					<Video class="h-4 w-4 stroke-1.5" />
-					{{ __('Join') }}
-				</a>
+					<a
+						v-if="user.data?.is_moderator || user.data?.is_evaluator"
+						:href="cls.start_url"
+						target="_blank"
+						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
+					>
+						<Monitor class="h-4 w-4 stroke-1.5" />
+						{{ __('Start') }}
+					</a>
+					<a
+						:href="cls.join_url"
+						target="_blank"
+						class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
+					>
+						<Video class="h-4 w-4 stroke-1.5" />
+						{{ __('Join') }}
+					</a>
+				</div>
+				<div v-else class="flex items-center space-x-2 text-yellow-700">
+					<Info class="w-4 h-4 stroke-1.5" />
+					<span>
+						{{ __('This class has ended') }}
+					</span>
+				</div>
 			</div>
 		</div>
 	</div>
-	<div v-else class="text-sm italic text-gray-600">
+	<div v-else class="text-sm italic text-ink-gray-5">
 		{{ __('No live classes scheduled') }}
 	</div>
 	<LiveClassModal
@@ -67,7 +78,7 @@
 </template>
 <script setup>
 import { createListResource, Button } from 'frappe-ui'
-import { Plus, Clock, Calendar, Video, Monitor } from 'lucide-vue-next'
+import { Plus, Clock, Calendar, Video, Monitor, Info } from 'lucide-vue-next'
 import { inject } from 'vue'
 import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
 import { ref } from 'vue'
@@ -106,3 +117,15 @@ const openLiveClassModal = () => {
 	showLiveClassModal.value = true
 }
 </script>
+<style>
+.short-introduction {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+	margin: 0.25rem 0 1.5rem;
+	line-height: 1.5;
+}
+</style>

frontend/src/components/Members.vue

@@ -2,10 +2,10 @@
 	<div class="flex min-h-0 flex-col text-base">
 		<div class="flex items-center justify-between">
 			<div>
-				<div class="text-xl font-semibold mb-1">
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
 					{{ __(label) }}
 				</div>
-				<!-- <div class="text-xs text-gray-600">
+				<!-- <div class="text-xs text-ink-gray-5">
 					{{ __(description) }}
 				</div> -->
 			</div>
@@ -36,7 +36,7 @@
 			<FormControl
 				v-model="member.first_name"
 				:placeholder="__('First Name')"
-				type="test"
+				type="text"
 				class="w-full"
 			/>
 			<Button @click="addMember()" variant="subtle">
@@ -63,19 +63,32 @@
 							/>
 							<div class="space-y-1">
 								<div class="flex">
-									<div class="text-gray-900">
+									<div class="text-ink-gray-9">
 										{{ member.full_name }}
 									</div>
-									<div v-if="getRole(member)">
-										{{ getRole(member) }}
+									<div
+										class="px-1"
+										v-if="member.role && getRole(member.role) !== 'Student'"
+									>
+										<Badge
+											:variant="'subtle'"
+											:ref_for="true"
+											theme="blue"
+											size="sm"
+											label="Badge"
+										>
+											{{ getRole(member.role) }}
+										</Badge>
 									</div>
 								</div>
-								<div class="text-sm text-gray-700">
+								<div class="text-sm text-ink-gray-7">
 									{{ member.name }}
 								</div>
 							</div>
 						</div>
-						<div class="flex items-center justify-center text-gray-700 text-sm">
+						<div
+							class="flex items-center justify-center text-ink-gray-7 text-sm"
+						>
 							<div v-if="member.last_active">
 								{{ dayjs(member.last_active).format('DD MMM, YYYY HH:mm a') }}
 							</div>
@@ -99,10 +112,11 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { createResource, Avatar, Button, FormControl } from 'frappe-ui'
+import { createResource, Avatar, Button, FormControl, Badge } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, watch, reactive, inject } from 'vue'
 import { RefreshCw, Plus, X } from 'lucide-vue-next'
+import { useOnboarding } from 'frappe-ui/frappe'
 
 const router = useRouter()
 const show = defineModel('show')
@@ -112,6 +126,7 @@ const memberList = ref([])
 const hasNextPage = ref(false)
 const showForm = ref(false)
 const dayjs = inject('$dayjs')
+const { updateOnboardingStep } = useOnboarding('learning')
 
 const member = reactive({
 	email: '',
@@ -172,6 +187,7 @@ const newMember = createResource({
 	auto: false,
 	onSuccess(data) {
 		show.value = false
+		updateOnboardingStep('invite_students')
 		router.push({
 			name: 'Profile',
 			params: {

frontend/src/components/MobileLayout.vue

@@ -5,7 +5,7 @@
 		</div>
 		<div
 			v-if="sidebarSettings.data"
-			class="fixed flex items-center justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
+			class="fixed flex items-center justify-around border-t border-outline-gray-2 bottom-0 z-10 w-full bg-surface-white standalone:pb-4"
 			:style="{
 				gridTemplateColumns: `repeat(${
 					sidebarLinks.length + 1
@@ -22,7 +22,7 @@
 				<component
 					:is="icons[tab.icon]"
 					class="h-6 w-6 stroke-1.5"
-					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
+					:class="[isActive(tab) ? 'text-ink-gray-9' : 'text-ink-gray-5']"
 				/>
 			</button>
 			<Popover
@@ -33,7 +33,7 @@
 				<template #target>
 					<component
 						:is="icons['List']"
-						class="h-6 w-6 stroke-1.5 text-gray-600"
+						class="h-6 w-6 stroke-1.5 text-ink-gray-5"
 					/>
 				</template>
 				<template #body-main>
@@ -46,7 +46,7 @@
 						>
 							<component
 								:is="icons[link.icon]"
-								class="h-4 w-4 stroke-1.5 text-gray-600"
+								class="h-4 w-4 stroke-1.5 text-ink-gray-5"
 							/>
 							<div>
 								{{ link.label }}