Merge branch 'develop' of https://git.nefor.net/MIDNIGHT/enlight-lms into develop

- add links in Mobile
- switch off InstalPromt

.eslintrc

@@ -0,0 +1,124 @@
+{
+	"env": {
+		"browser": true,
+		"node": true,
+		"es2022": true
+	},
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"extends": "eslint:recommended",
+	"rules": {
+		"indent": "off",
+		"brace-style": "off",
+		"no-mixed-spaces-and-tabs": "off",
+		"no-useless-escape": "off",
+		"space-unary-ops": ["error", { "words": true }],
+		"linebreak-style": "off",
+		"quotes": ["off"],
+		"semi": "off",
+		"camelcase": "off",
+		"no-unused-vars": "off",
+		"no-console": ["warn"],
+		"no-extra-boolean-cast": ["off"],
+		"no-control-regex": ["off"],
+	},
+	"root": true,
+	"globals": {
+		"frappe": true,
+		"Vue": true,
+		"SetVueGlobals": true,
+		"__": true,
+		"repl": true,
+		"Class": true,
+		"locals": true,
+		"cint": true,
+		"cstr": true,
+		"cur_frm": true,
+		"cur_dialog": true,
+		"cur_page": true,
+		"cur_list": true,
+		"cur_tree": true,
+		"msg_dialog": true,
+		"is_null": true,
+		"in_list": true,
+		"has_common": true,
+		"posthog": true,
+		"has_words": true,
+		"validate_email": true,
+		"open_web_template_values_editor": true,
+		"validate_name": true,
+		"validate_phone": true,
+		"validate_url": true,
+		"get_number_format": true,
+		"format_number": true,
+		"format_currency": true,
+		"comment_when": true,
+		"open_url_post": true,
+		"toTitle": true,
+		"lstrip": true,
+		"rstrip": true,
+		"strip": true,
+		"strip_html": true,
+		"replace_all": true,
+		"flt": true,
+		"precision": true,
+		"CREATE": true,
+		"AMEND": true,
+		"CANCEL": true,
+		"copy_dict": true,
+		"get_number_format_info": true,
+		"strip_number_groups": true,
+		"print_table": true,
+		"Layout": true,
+		"web_form_settings": true,
+		"$c": true,
+		"$a": true,
+		"$i": true,
+		"$bg": true,
+		"$y": true,
+		"$c_obj": true,
+		"refresh_many": true,
+		"refresh_field": true,
+		"toggle_field": true,
+		"get_field_obj": true,
+		"get_query_params": true,
+		"unhide_field": true,
+		"hide_field": true,
+		"set_field_options": true,
+		"getCookie": true,
+		"getCookies": true,
+		"get_url_arg": true,
+		"md5": true,
+		"$": true,
+		"jQuery": true,
+		"moment": true,
+		"hljs": true,
+		"Awesomplete": true,
+		"Sortable": true,
+		"Showdown": true,
+		"Taggle": true,
+		"Gantt": true,
+		"Slick": true,
+		"Webcam": true,
+		"PhotoSwipe": true,
+		"PhotoSwipeUI_Default": true,
+		"io": true,
+		"JsBarcode": true,
+		"L": true,
+		"Chart": true,
+		"DataTable": true,
+		"Cypress": true,
+		"cy": true,
+		"it": true,
+		"describe": true,
+		"expect": true,
+		"context": true,
+		"before": true,
+		"beforeEach": true,
+		"after": true,
+		"qz": true,
+		"localforage": true,
+		"extend_cscript": true
+	}
+}

.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-get install libcups2-dev redis-server mariadb-client
+sudo apt-get install libcups2-dev redis-server mariadb-client libmariadb-dev
 
 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/linters.yml

@@ -7,8 +7,27 @@ on:
     branches: [ main ]
 
 jobs:
+  commit-lint:
+    name: 'Semantic Commits'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 200
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          check-latest: true
+
+      - name: Check commit titles
+        run: |
+          npm install @commitlint/cli @commitlint/config-conventional
+          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
+
   linters:
-    name: Semantic Commits
+    name: Semgrep Rules
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
 
@@ -20,8 +39,17 @@ jobs:
         with:
           python-version: '3.10'
 
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
       - name: Install and Run Pre-commit
-        uses: pre-commit/action@v2.0.3
+        uses: pre-commit/action@v3.0.1
 
       - name: Download Semgrep rules
         run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules

.github/workflows/make_release_pr.yml

@@ -1,8 +1,7 @@
 name: Create weekly release
 on:
   schedule:
-    # 13:00 UTC -> 7pm IST on every Wednesday
-    - cron: '30 4 * * 3'
+    - cron: '30 3 * * 3'
   workflow_dispatch:
 
 jobs:

.github/workflows/ui-tests.yml

@@ -70,7 +70,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -79,7 +79,7 @@ jobs:
             ${{ runner.os }}-yarn-ui-
 
       - name: Cache cypress binary
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/Cypress
           key: ${{ runner.os }}-cypress
@@ -100,11 +100,12 @@ jobs:
           bench --site lms.test execute frappe.utils.install.complete_setup_wizard
           bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
           bench --site lms.test set-password frappe@example.com admin
+          bench --site lms.test execute lms.lms.utils.persona_captured
 
       - name: cypress pre-requisites
         run: |
           cd ~/frappe-bench/apps/lms
-          yarn add cypress@^10 --no-lockfile
+          yarn add cypress@^10 --no-lockfile -W
 
       - name: UI Tests
         run: cd ~/frappe-bench/ && bench --site lms.test run-ui-tests lms --headless

.pre-commit-config.yaml

@@ -1,10 +1,10 @@
 exclude: 'node_modules|.git'
-default_stages: [commit]
+default_stages: [pre-commit]
 fail_fast: false
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.3.0
+    rev: v5.0.0
     hooks:
       - id: trailing-whitespace
         files: "lms.*"
@@ -16,17 +16,16 @@ repos:
       - id: check-toml
       - id: debug-statements
 
-  - repo: https://github.com/asottile/pyupgrade
-    rev: v2.34.0
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.8.1
     hooks:
-      - id: pyupgrade
-        args: ['--py310-plus']
-
-  - repo: https://github.com/adityahase/black
-    rev: 9cb0a69f4d0030cdf687eddf314468b39ed54119
-    hooks:
-      - id: black
-        additional_dependencies: ['click==8.0.4']
+      - id: ruff
+        name: "Run ruff import sorter"
+        args: ["--select=I", "--fix"]
+      - id: ruff
+        name: "Run ruff linter"
+      - id: ruff-format
+        name: "Run ruff formatter"
 
   - repo: https://github.com/pre-commit/mirrors-prettier
     rev: v2.7.1
@@ -44,12 +43,22 @@ repos:
                 lms/public/js/lib/.*
             )$
 
-  - repo: https://github.com/PyCQA/flake8
-    rev: 5.0.4
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.44.0
     hooks:
-      - id: flake8
-        additional_dependencies: ['flake8-bugbear',]
-        args: ['--config', '.github/helper/flake8.conf']
+      - id: eslint
+        types_or: [javascript]
+        args: ['--quiet']
+        exclude: |
+            (?x)^(
+                lms/public/dist/.*|
+                cypress/.*|
+                .*node_modules.*|
+                .*boilerplate.*|
+                lms/www/website_script.js|
+                lms/templates/includes/.*|
+                lms/public/js/lib/.*
+            )$
 
 ci:
     autoupdate_schedule: weekly

README.md

@@ -1,174 +0,0 @@
-<div align="center" markdown="1">
-
-<img src=".github/lms-logo.png" alt="Frappe Learning logo" width="80" height="80"/>
-<h1>Frappe Learning</h1>
-
-**Easy to use, open source, Learning Management System**
-
-![Tests](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress)
-
-</div>
-
-
-<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>
-
-## 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>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>
-
-
-### Under the Hood
-
-- [**Frappe Framework**](https://github.com/frappe/frappe): A full-stack web application framework.
-
-- [**Frappe UI**](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.
-
-## Production Setup
-
-### Managed Hosting
-
-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.
-
-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.
-
-<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>

commitlint.config.js

@@ -0,0 +1,26 @@
+export default {
+	parserPreset: "conventional-changelog-conventionalcommits",
+	rules: {
+		"subject-empty": [2, "never"],
+		"type-case": [2, "always", "lower-case"],
+		"type-empty": [2, "never"],
+		"type-enum": [
+			2,
+			"always",
+			[
+				"build",
+				"chore",
+				"ci",
+				"docs",
+				"feat",
+				"fix",
+				"perf",
+				"refactor",
+				"revert",
+				"style",
+				"test",
+				"deprecate", // deprecation decision
+			],
+		],
+	},
+};

cypress.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from "cypress";
 
-module.exports = defineConfig({
+export default defineConfig({
 	projectId: "vandxn",
 	adminPassword: "admin",
 	testUser: "frappe@example.com",
@@ -13,6 +13,6 @@ module.exports = defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://testui:8000",
+		baseUrl: "http://pertest:8000",
 	},
 });

cypress/e2e/batch_creation.cy.js

@@ -0,0 +1,168 @@
+describe("Batch Creation", () => {
+	it("creates a new batch", () => {
+		cy.login();
+		cy.wait(500);
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		// Open Settings
+		cy.get("span").contains("Learning").click();
+		cy.get("span").contains("Settings").click();
+
+		// Add a new member
+		cy.get("[data-dismissable-layer]")
+			.find("span")
+			.contains(/^Members$/)
+			.click();
+		cy.get("[data-dismissable-layer]")
+			.find("button")
+			.contains("New")
+			.click();
+
+		const dateNow = Date.now();
+		const randomEmail = `testuser_${dateNow}@example.com`;
+		const randomName = `Test User ${dateNow}`;
+
+		cy.get("input[placeholder='jane@doe.com']").type(randomEmail);
+		cy.get("input[placeholder='Jane']").type(randomName);
+		cy.get("button").contains("Add").click();
+
+		// Add evaluator
+		cy.get("[data-dismissable-layer]")
+			.find("span")
+			.contains(/^Evaluators$/)
+			.click();
+
+		cy.get("[data-dismissable-layer]")
+			.find("button")
+			.contains("New")
+			.click();
+		const randomEvaluator = `evaluator${dateNow}@example.com`;
+
+		cy.get("input[placeholder='jane@doe.com']").type(randomEvaluator);
+		cy.get("button").contains("Add").click();
+		cy.get("div").contains(randomEvaluator).should("be.visible").click();
+
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		// Create a batch
+		cy.get("button").contains("Create").click();
+		cy.wait(500);
+		cy.url().should("include", "/batches/new/edit");
+		cy.get("label").contains("Title").type("Test Batch");
+
+		cy.get("label").contains("Start Date").type("2030-10-01");
+		cy.get("label").contains("End Date").type("2030-10-31");
+		cy.get("label").contains("Start Time").type("10:00");
+		cy.get("label").contains("End Time").type("11:00");
+		cy.get("label").contains("Timezone").type("IST");
+		cy.get("label").contains("Seat Count").type("10");
+		cy.get("label").contains("Published").click();
+
+		cy.get("label")
+			.contains("Short Description")
+			.type("Test Batch Short Description to test the UI");
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"Test Batch Description. I need a very big description to test the UI. This is a very big description. 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."
+		);
+
+		/* Instructor */
+		cy.get("label")
+			.contains("Instructors")
+			.parent()
+			.within(() => {
+				cy.get("input").click().type("evaluator");
+				cy.get("input")
+					.invoke("attr", "aria-controls")
+					.as("instructor_list_id");
+			});
+		cy.get("@instructor_list_id").then((instructor_list_id) => {
+			cy.get(`[id^=${instructor_list_id}`)
+				.should("be.visible")
+				.within(() => {
+					cy.get("[id^=headlessui-combobox-option-").first().click();
+				});
+		});
+
+		cy.button("Save").click();
+		cy.wait(1000);
+		let batchName;
+		cy.url().then((url) => {
+			console.log(url);
+			batchName = url.split("/").pop();
+			cy.wrap(batchName).as("batchName");
+		});
+		cy.wait(500);
+
+		// View Batch
+		cy.wait(1000);
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		cy.url().should("include", "/lms/batches");
+
+		cy.get('[id^="headlessui-radiogroup-v-"]')
+			.find("span")
+			.contains("Upcoming")
+			.should("be.visible")
+			.click();
+
+		cy.get("@batchName").then((batchName) => {
+			cy.get(`a[href='/lms/batches/details/${batchName}'`).within(() => {
+				cy.get("div").contains("Test Batch").should("be.visible");
+				cy.get("div")
+					.contains("Test Batch Short Description to test the UI")
+					.should("be.visible");
+				cy.get("span")
+					.contains("01 Oct 2030 - 31 Oct 2030")
+					.should("be.visible");
+				cy.get("span")
+					.contains("10:00 AM - 11:00 AM")
+					.should("be.visible");
+				cy.get("span").contains("IST").should("be.visible");
+				cy.get("a").contains("Evaluator").should("be.visible");
+				cy.get("div")
+					.contains("10")
+					.should("be.visible")
+					.get("span")
+					.contains("Seats Left")
+					.should("be.visible");
+			});
+			cy.get(`a[href='/lms/batches/details/${batchName}'`).click();
+		});
+
+		cy.get("div").contains("Test Batch").should("be.visible");
+		cy.get("div")
+			.contains("Test Batch Short Description to test the UI")
+			.should("be.visible");
+		cy.get("a").contains("Evaluator").should("be.visible");
+		cy.get("span:visible")
+			.contains("01 Oct 2030 - 31 Oct 2030")
+			.should("be.visible");
+		cy.get("span:visible")
+			.contains("10:00 AM - 11:00 AM")
+			.should("be.visible");
+		cy.get("span:visible").contains("IST").should("be.visible");
+		cy.contains("div:visible", "10 Seats Left").should("be.visible");
+
+		cy.get("p")
+			.contains(
+				"Test Batch Description. I need a very big description to test the UI. This is a very big description. 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."
+			)
+			.should("be.visible");
+		cy.get("button:visible").contains("Manage Batch").click();
+
+		/* Add student to batch */
+		cy.get("button").contains("Add").click();
+		cy.get('div[role="dialog"]').first().find("button").eq(1).click();
+		cy.get("input[id^='headlessui-combobox-input-v-']").type(randomEmail);
+		cy.get("div").contains(randomEmail).click();
+		cy.get("button").contains("Submit").click();
+
+		// Verify Seat Count
+		cy.get("span").contains("Details").click();
+		cy.contains("div:visible", "9 Seats Left").should("be.visible");
+	});
+});

cypress/e2e/course_creation.cy.js

@@ -1,12 +1,15 @@
 describe("Course Creation", () => {
 	it("creates a new course", () => {
 		cy.login();
-		cy.wait(1000);
+		cy.wait(500);
 		cy.visit("/lms/courses");
 
+		// Close onboarding modal
+		cy.closeOnboardingModal();
+
 		// Create a course
-		cy.get("button").contains("New").click();
-		cy.wait(1000);
+		cy.get("button").contains("Create").click();
+		cy.wait(500);
 		cy.url().should("include", "/courses/new/edit");
 
 		cy.get("label").contains("Title").type("Test Course");
@@ -19,12 +22,16 @@ describe("Course Creation", () => {
 		);
 
 		cy.fixture("profile.png", "base64").then((fileContent) => {
-			cy.get('input[type="file"]').attachFile({
-				fileContent,
-				fileName: "profile.png",
-				mimeType: "image/png",
-				encoding: "base64",
-			});
+			cy.get("div")
+				.contains("Course Image")
+				.siblings("div")
+				.children('input[type="file"]')
+				.attachFile({
+					fileContent,
+					fileName: "profile.png",
+					mimeType: "image/png",
+					encoding: "base64",
+				});
 		});
 
 		cy.get("label")
@@ -69,7 +76,7 @@ describe("Course Creation", () => {
 		cy.button("Add Chapter").click();
 
 		cy.wait(1000);
-		cy.get("[id^=headlessui-dialog-panel-")
+		cy.get("[data-dismissable-layer]")
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
@@ -91,15 +98,16 @@ describe("Course Creation", () => {
 
 		// View Course
 		cy.wait(1000);
-		cy.visit("/lms");
-		cy.wait(500);
+		cy.visit("/lms/courses");
+		cy.closeOnboardingModal();
+
 		cy.url().should("include", "/lms/courses");
 		cy.get(".grid a:first").within(() => {
 			cy.get("div").contains("Test Course");
 			cy.get("div").contains(
 				"Test Course Short Introduction to test the UI"
 			);
-			cy.get(".course-image")
+			cy.get(".bg-cover")
 				.invoke("css", "background-image")
 				.should("include", "/files/profile");
 		});
@@ -132,9 +140,10 @@ describe("Course Creation", () => {
 		);
 
 		// Add Discussion
+		cy.get("span").contains("Community").click();
 		cy.button("New Question").click();
 		cy.wait(500);
-		cy.get("[id^=headlessui-dialog-panel-").within(() => {
+		cy.get("[data-dismissable-layer]").within(() => {
 			cy.get("label").contains("Title").type("Test Discussion");
 			cy.get("div[contenteditable=true]").invoke(
 				"text",

cypress/support/commands.js

@@ -25,6 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 import "cypress-file-upload";
+import "cypress-real-events";
 
 Cypress.Commands.add("login", (email, password) => {
 	if (!email) {
@@ -38,6 +39,8 @@ Cypress.Commands.add("login", (email, password) => {
 		method: "POST",
 		body: { usr: email, pwd: password },
 		timeout: 60000,
+		retryOnStatusCodeFailure: true,
+		retryOnNetworkFailure: true,
 	});
 });
 
@@ -66,3 +69,18 @@ Cypress.Commands.add("paste", { prevSubject: true }, (subject, text) => {
 		element.dispatchEvent(event);
 	});
 });
+
+Cypress.Commands.add("closeOnboardingModal", () => {
+	cy.wait(500);
+	cy.get("body").then(($body) => {
+		// Check if any element with class including 'z-50' exists
+		if ($body.find('[class*="z-50"]').length > 0) {
+			cy.get('[class*="z-50"]')
+				.find('button:has(svg[class*="feather-x"])')
+				.realClick();
+			cy.wait(1000);
+		} else {
+			cy.log("Onboarding modal not found, skipping close.");
+		}
+	});
+});

docker/init.sh

@@ -16,9 +16,9 @@ cd frappe-bench
 
 # Use containers instead of localhost
 bench set-mariadb-host mariadb
-bench set-redis-cache-host redis:6379
-bench set-redis-queue-host redis:6379
-bench set-redis-socketio-host redis:6379
+bench set-redis-cache-host redis://redis:6379
+bench set-redis-queue-host redis://redis:6379
+bench set-redis-socketio-host redis://redis:6379
 
 # Remove redis, watch from Procfile
 sed -i '/redis/d' ./Procfile

frontend/.gitignore

@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+dev-dist
 *.local

frontend/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

frontend/components.d.ts

@@ -0,0 +1,123 @@
+/* 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']
+    AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
+    AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
+    Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
+    BadgeAssignmentForm: typeof import('./src/components/Settings/BadgeAssignmentForm.vue')['default']
+    BadgeAssignments: typeof import('./src/components/Settings/BadgeAssignments.vue')['default']
+    BadgeForm: typeof import('./src/components/Settings/BadgeForm.vue')['default']
+    Badges: typeof import('./src/components/Settings/Badges.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/Settings/BrandSettings.vue')['default']
+    BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
+    Categories: typeof import('./src/components/Settings/Categories.vue')['default']
+    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
+    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    ChildTable: typeof import('./src/components/Controls/ChildTable.vue')['default']
+    Code: typeof import('./src/components/Controls/Code.vue')['default']
+    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
+    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
+    ColorSwatches: typeof import('./src/components/Controls/ColorSwatches.vue')['default']
+    ContactUsEmail: typeof import('./src/components/ContactUsEmail.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']
+    CourseProgressSummary: typeof import('./src/components/Modals/CourseProgressSummary.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']
+    EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
+    EmailTemplates: typeof import('./src/components/Settings/EmailTemplates.vue')['default']
+    EmptyState: typeof import('./src/components/EmptyState.vue')['default']
+    EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
+    Evaluators: typeof import('./src/components/Settings/Evaluators.vue')['default']
+    Event: typeof import('./src/components/Modals/Event.vue')['default']
+    ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
+    FeedbackModal: typeof import('./src/components/Modals/FeedbackModal.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']
+    InlineLessonMenu: typeof import('./src/components/Notes/InlineLessonMenu.vue')['default']
+    InstallPrompt: typeof import('./src/components/InstallPrompt.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']
+    LiveClassAttendance: typeof import('./src/components/Modals/LiveClassAttendance.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/Settings/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']
+    Notes: typeof import('./src/components/Notes/Notes.vue')['default']
+    NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
+    PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
+    PaymentGatewayDetails: typeof import('./src/components/Settings/PaymentGatewayDetails.vue')['default']
+    PaymentGateways: typeof import('./src/components/Settings/PaymentGateways.vue')['default']
+    Play: typeof import('./src/components/Icons/Play.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']
+    QuizInVideo: typeof import('./src/components/Modals/QuizInVideo.vue')['default']
+    Rating: typeof import('./src/components/Controls/Rating.vue')['default']
+    RelatedCourses: typeof import('./src/components/RelatedCourses.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/Settings/SettingDetails.vue')['default']
+    SettingFields: typeof import('./src/components/Settings/SettingFields.vue')['default']
+    Settings: typeof import('./src/components/Settings/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']
+    TransactionDetails: typeof import('./src/components/Settings/TransactionDetails.vue')['default']
+    Transactions: typeof import('./src/components/Settings/Transactions.vue')['default']
+    UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
+    UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
+    Uploader: typeof import('./src/components/Controls/Uploader.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']
+    VideoStatistics: typeof import('./src/components/Modals/VideoStatistics.vue')['default']
+    ZoomAccountModal: typeof import('./src/components/Modals/ZoomAccountModal.vue')['default']
+    ZoomSettings: typeof import('./src/components/Settings/ZoomSettings.vue')['default']
+  }
+}

frontend/index.html

@@ -2,9 +2,206 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="{{ favicon or '/assets/lms/frontend/favicon.png' }}" />
+		<link rel="icon" href="{{ favicon }}" />
+		<link rel="manifest" href="/api/method/lms.lms.api.get_pwa_manifest" />
+		<link rel="apple-touch-icon" href="public/manifest/apple-icon-180.png" />
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
+		<meta name="theme-color" content="#0F0F0F" media="(prefers-color-scheme: dark)" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+		<meta name="msapplication-navbutton-color" content="#ffffff" />
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2048-2732.jpg"
+			media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2732-2048.jpg"
+			media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1668-2388.jpg"
+			media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2388-1668.jpg"
+			media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1536-2048.jpg"
+			media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2048-1536.jpg"
+			media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1640-2360.jpg"
+			media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2360-1640.jpg"
+			media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1668-2224.jpg"
+			media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2224-1668.jpg"
+			media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1620-2160.jpg"
+			media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2160-1620.jpg"
+			media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1488-2266.jpg"
+			media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2266-1488.jpg"
+			media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1320-2868.jpg"
+			media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2868-1320.jpg"
+			media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1206-2622.jpg"
+			media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2622-1206.jpg"
+			media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1290-2796.jpg"
+			media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2796-1290.jpg"
+			media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1179-2556.jpg"
+			media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2556-1179.jpg"
+			media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1170-2532.jpg"
+			media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2532-1170.jpg"
+			media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1284-2778.jpg"
+			media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2778-1284.jpg"
+			media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1125-2436.jpg"
+			media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2436-1125.jpg"
+			media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1242-2688.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2688-1242.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-828-1792.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1792-828.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1242-2208.jpg"
+			media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2208-1242.jpg"
+			media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-750-1334.jpg"
+			media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1334-750.jpg"
+			media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-640-1136.jpg"
+			media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1136-640.jpg"
+			media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Frappe Learning</title>
+		<title>{{ title }}</title>
 		<meta name="title" content="{{ meta.title }}" />
 		<meta name="image" content="{{ meta.image }}" />
 		<meta name="description" content="{{ meta.description }}" />
@@ -16,33 +213,17 @@
 		<meta name="twitter:image" content="{{ meta.image }}" />
 		<meta name="twitter:description" content="{{ meta.description }}" />
 	</head>
-	<body>
+	<body class="sm:overscroll-y-none no-scrollbar">
 		<div id="app">
 			<div id="seo-content">
 				<h1>{{ meta.title }}</h1>
 				<p>
 					{{ meta.description }}
 				</p>
-				<p>
-					The content here is just for seo purposes. The actual content will be loaded in a few seconds.
-				</p>
-				<p>
-					Seo checks if a page has more than 300 words. So, here are some more words to make it more than 300 words.
-					Page descriptions are the HTML meta tags that provide a brief summary of a web page.
-					Search engines use meta descriptions to help identify the page's topic - they don't use them to rank the page, but they do use them to determine whether or not to display the page in search results.
-					Meta descriptions are important because they're often the first thing people see when they're deciding which search result to click on.
-					They're also important because they can help improve your click-through rate (CTR) from search results.
-					A good meta description can entice people to click on your page instead of someone else's.
-				</p>
 				<a href="{{ meta.link }}">Know More</a>
 			</div>
 		</div>
-		<div id="modals"></div>
-		<div id="popovers"></div>
-
 		<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

@@ -2,6 +2,7 @@
   "name": "frappe-ui-frontend",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -9,6 +10,10 @@
     "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.2.1",
     "@editorjs/checklist": "^1.6.0",
     "@editorjs/code": "^2.9.0",
     "@editorjs/editorjs": "^2.29.0",
@@ -23,18 +28,23 @@
     "ace-builds": "^1.36.2",
     "apexcharts": "^4.3.0",
     "chart.js": "^4.4.1",
-    "codemirror-editor-vue3": "^2.8.0",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.11.6",
+    "dompurify": "^3.2.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.112",
+    "frappe-ui": "^0.1.201",
+    "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
+    "plyr": "^3.7.8",
     "socket.io-client": "^4.7.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.4.15",
+    "thememirror": "^2.0.1",
     "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
+    "vue-codemirror": "^6.1.1",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.0.12",
     "vue3-apexcharts": "^1.8.0",
@@ -44,6 +54,7 @@
     "@vitejs/plugin-vue": "^5.0.3",
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.5",
-    "vite": "^5.0.11"
+    "vite": "^5.0.11",
+    "vite-plugin-pwa": "^1.0.2"
   }
 }

frontend/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},

frontend/public/leaderboard/dart-board.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512.001 512.001" xml:space="preserve">
+<g>
+	<path style="fill:#A67C52;" d="M84.096,436.178l-49.312,37.686c-7.54,5.762-8.981,16.547-3.219,24.087
+		c3.383,4.425,8.494,6.751,13.666,6.751c3.638,0,7.306-1.151,10.421-3.532l49.312-37.686c7.54-5.762,8.981-16.547,3.219-24.087
+		C102.421,431.858,91.637,430.416,84.096,436.178z"/>
+	<path style="fill:#A67C52;" d="M441.194,473.864l-49.312-37.686c-7.541-5.762-18.325-4.32-24.087,3.219
+		c-5.762,7.541-4.321,18.325,3.219,24.087l49.312,37.686c3.115,2.38,6.782,3.532,10.421,3.532c5.171,0,10.284-2.326,13.665-6.751
+		C450.175,490.411,448.734,479.627,441.194,473.864z"/>
+</g>
+<path style="fill:#DBAD75;" d="M237.989,36.024c-131.227,0-237.989,106.761-237.989,237.989s106.761,237.989,237.989,237.989
+	S475.978,405.24,475.978,274.012S369.216,36.024,237.989,36.024z"/>
+<path style="fill:#EABD81;" d="M237.989,36.024c-131.227,0-237.989,106.761-237.989,237.989s106.761,237.989,237.989,237.989V36.024
+	z"/>
+<path style="fill:#BC2A46;" d="M237.989,80.411c-106.752,0-193.601,86.849-193.601,193.601s86.849,193.601,193.601,193.601
+	s193.601-86.849,193.601-193.601S344.742,80.411,237.989,80.411z"/>
+<path style="fill:#D62D46;" d="M237.989,80.411c-106.752,0-193.601,86.849-193.601,193.601s86.849,193.601,193.601,193.601V80.411z"
+	/>
+<path style="fill:#DBAD75;" d="M237.989,142.771c-72.367,0-131.241,58.874-131.241,131.241s58.874,131.241,131.241,131.241
+	S369.23,346.379,369.23,274.012S310.355,142.771,237.989,142.771z"/>
+<path style="fill:#EABD81;" d="M237.989,142.771c-72.367,0-131.241,58.874-131.241,131.241s58.874,131.241,131.241,131.241V142.771z
+	"/>
+<path style="fill:#BC2A46;" d="M237.989,209.763c-35.427,0-64.248,28.821-64.248,64.248s28.821,64.248,64.248,64.248
+	s64.248-28.821,64.248-64.248S273.416,209.763,237.989,209.763z"/>
+<path style="fill:#D62D46;" d="M237.989,209.763c-35.427,0-64.248,28.821-64.248,64.248s28.821,64.248,64.248,64.248V209.763z"/>
+<path style="fill:#CFCDD6;" d="M237.989,291.196c-4.398,0-8.796-1.677-12.15-5.034c-6.711-6.711-6.711-17.59,0-24.301
+	L448.687,39.014c6.71-6.711,17.59-6.711,24.301,0s6.711,17.59,0,24.301L250.14,286.162
+	C246.784,289.519,242.386,291.196,237.989,291.196z"/>
+<path style="fill:#DEE1E7;" d="M237.989,291.196c-4.398,0-8.796-1.677-12.15-5.034c-6.711-6.711-6.711-17.59,0-24.301
+	l106.576-106.576l24.301,24.301L250.14,286.162C246.784,289.519,242.386,291.196,237.989,291.196z"/>
+<path style="fill:#39B7B6;" d="M457.533,105.266h-33.615c-9.49,0-17.184-7.694-17.184-17.184V54.467
+	c0-9.49,7.694-17.184,17.184-17.184s17.184,7.694,17.184,17.184v16.432h16.431c9.49,0,17.184,7.694,17.184,17.184
+	S467.023,105.266,457.533,105.266z"/>
+<path style="fill:#FBB03B;" d="M476.175,86.623h-33.614c-9.49,0-17.184-7.694-17.184-17.184V35.825
+	c0-9.49,7.694-17.184,17.184-17.184s17.184,7.694,17.184,17.184v16.431h16.431c9.49,0,17.184,7.694,17.184,17.184
+	S485.665,86.623,476.175,86.623z"/>
+<path style="fill:#39B7B6;" d="M494.817,67.982h-33.614c-9.49,0-17.184-7.694-17.184-17.184V17.184
+	c0-9.49,7.694-17.184,17.184-17.184s17.184,7.694,17.184,17.184v16.431h16.431c9.49,0,17.184,7.694,17.184,17.184
+	S504.308,67.982,494.817,67.982z"/>
+</svg>

frontend/public/leaderboard/star.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet"><path d="M68.05 7.23l13.46 30.7a7.047 7.047 0 0 0 5.82 4.19l32.79 2.94c3.71.54 5.19 5.09 2.5 7.71l-24.7 20.75c-2 1.68-2.91 4.32-2.36 6.87l7.18 33.61c.63 3.69-3.24 6.51-6.56 4.76L67.56 102a7.033 7.033 0 0 0-7.12 0l-28.62 16.75c-3.31 1.74-7.19-1.07-6.56-4.76l7.18-33.61c.54-2.55-.36-5.19-2.36-6.87L5.37 52.78c-2.68-2.61-1.2-7.17 2.5-7.71l32.79-2.94a7.047 7.047 0 0 0 5.82-4.19l13.46-30.7c1.67-3.36 6.45-3.36 8.11-.01z" fill="#fdd835"></path><path d="M67.07 39.77l-2.28-22.62c-.09-1.26-.35-3.42 1.67-3.42c1.6 0 2.47 3.33 2.47 3.33l6.84 18.16c2.58 6.91 1.52 9.28-.97 10.68c-2.86 1.6-7.08.35-7.73-6.13z" fill="#ffff8d"></path><path d="M95.28 71.51L114.9 56.2c.97-.81 2.72-2.1 1.32-3.57c-1.11-1.16-4.11.51-4.11.51l-17.17 6.71c-5.12 1.77-8.52 4.39-8.82 7.69c-.39 4.4 3.56 7.79 9.16 3.97z" fill="#f4b400"></path></svg>

frontend/public/learning.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z" fill="#0E7159"/>
+<path d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z" fill="white"/>
+</svg>

frontend/src/App.vue

@@ -1,38 +1,56 @@
 <template>
-	<Layout>
-		<router-view />
-	</Layout>
-	<Dialogs />
-	<Toasts />
+	<FrappeUIProvider>
+		<Layout class="isolate text-base">
+			<router-view />
+		</Layout>
+		<!--<InstallPrompt v-if="isMobile" />-->
+		<Dialogs />
+	</FrappeUIProvider>
 </template>
 <script setup>
-import { Toasts } from 'frappe-ui'
+import { FrappeUIProvider } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useScreenSize } from './utils/composables'
+import { usersStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
+import { posthogSettings } from '@/telemetry'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
-import { stopSession } from '@/telemetry'
-import { init as initTelemetry } from '@/telemetry'
-import { usersStore } from '@/stores/user'
+import NoSidebarLayout from './components/NoSidebarLayout.vue'
+import InstallPrompt from './components/InstallPrompt.vue'
 
-const screenSize = useScreenSize()
-let { userResource } = usersStore()
+const { isMobile } = useScreenSize()
+const router = useRouter()
+const noSidebar = ref(false)
+const { userResource } = usersStore()
 
-const Layout = computed(() => {
-	if (screenSize.width < 640) {
-		return MobileLayout
+router.beforeEach((to, from, next) => {
+	if (to.query.fromLesson || to.path === '/persona') {
+		noSidebar.value = true
 	} else {
-		return DesktopLayout
+		noSidebar.value = false
 	}
+	next()
 })
 
-onMounted(async () => {
-	if (!userResource.data) return
-	await initTelemetry()
+const Layout = computed(() => {
+	if (noSidebar.value) {
+		return NoSidebarLayout
+	}
+	if (isMobile.value) {
+		return MobileLayout
+	}
+	return DesktopLayout
 })
 
 onUnmounted(() => {
-	stopSession()
+	noSidebar.value = false
+})
+
+watch(userResource, () => {
+	if (userResource.data) {
+		posthogSettings.reload()
+	}
 })
 </script>

frontend/src/components/AppSidebar.vue

@@ -9,12 +9,12 @@
 		>
 			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
 			<div class="flex flex-col" v-if="sidebarSettings.data">
-				<SidebarLink
-					v-for="link in sidebarLinks"
-					:link="link"
-					:isCollapsed="sidebarStore.isSidebarCollapsed"
-					class="mx-2 my-0.5"
-				/>
+				<div v-for="link in sidebarLinks" class="mx-2 my-0.5">
+					<SidebarLink
+						:link="link"
+						:isCollapsed="sidebarStore.isSidebarCollapsed"
+					/>
+				</div>
 			</div>
 			<div
 				v-if="sidebarSettings.data?.web_pages?.length || isModerator"
@@ -39,7 +39,11 @@
 							{{ __('More') }}
 						</span>
 					</div>
-					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
+					<Button
+						v-if="isModerator && !readOnlyMode"
+						variant="ghost"
+						@click="openPageModal()"
+					>
 						<template #icon>
 							<Plus class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
 						</template>
@@ -50,45 +54,124 @@
 					class="flex flex-col transition-all duration-300 ease-in-out"
 					:class="!sidebarStore.isWebpagesCollapsed ? 'block' : 'hidden'"
 				>
-					<SidebarLink
+					<div
 						v-for="link in sidebarSettings.data.web_pages"
-						:link="link"
-						:isCollapsed="sidebarStore.isSidebarCollapsed"
 						class="mx-2 my-0.5"
-						:showControls="isModerator ? true : false"
-						@openModal="openPageModal"
-						@deletePage="deletePage"
-					/>
+					>
+						<SidebarLink
+							:link="link"
+							:isCollapsed="sidebarStore.isSidebarCollapsed"
+							:showControls="isModerator ? true : false"
+							@openModal="openPageModal"
+							@deletePage="deletePage"
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
-		<div>
+		<div class="m-2 flex flex-col gap-1">
+			<div
+				v-if="readOnlyMode && !sidebarStore.isSidebarCollapsed"
+				class="z-10 m-2 bg-surface-modal py-2.5 px-3 text-xs text-ink-gray-7 leading-5 rounded-md"
+			>
+				{{
+					__(
+						'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
+					)
+				}}
+			</div>
 			<TrialBanner
 				v-if="
 					userResource.data?.is_system_manager && userResource.data?.is_fc_site
 				"
 				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
 			/>
-			<SidebarLink
-				:link="{
-					label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
-				}"
-				:isCollapsed="sidebarStore.isSidebarCollapsed"
-				@click="toggleSidebar()"
-				class="m-2"
+			<GettingStartedBanner
+				v-if="showOnboarding && !isOnboardingStepsCompleted"
+				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
+				appName="learning"
+			/>
+
+			<div
+				class="flex items-center mt-4"
+				:class="
+					sidebarStore.isSidebarCollapsed ? 'flex-col space-y-3' : 'flex-row'
+				"
 			>
-				<template #icon>
-					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-						<CollapseSidebar
-							class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
-							:class="{
-								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
-							}"
+				<div
+					class="flex items-center flex-1"
+					:class="
+						sidebarStore.isSidebarCollapsed
+							? 'flex-col space-y-3'
+							: 'flex-row space-x-3'
+					"
+				>
+					<Tooltip v-if="readOnlyMode && sidebarStore.isSidebarCollapsed">
+						<CircleAlert
+							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
 						/>
-					</span>
-				</template>
-			</SidebarLink>
+						<template #body>
+							<div
+								class="max-w-[30ch] rounded bg-surface-gray-7 px-2 py-1 text-center text-p-xs text-ink-white shadow-xl"
+							>
+								{{
+									__(
+										'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
+									)
+								}}
+							</div>
+						</template>
+					</Tooltip>
+					<Tooltip :text="__('Powered by Learning')">
+						<Zap
+							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
+							@click="redirectToWebsite()"
+						/>
+					</Tooltip>
+					<Tooltip v-if="showOnboarding" :text="__('Help')">
+						<CircleHelp
+							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
+							@click="
+								() => {
+									showHelpModal = minimize ? true : !showHelpModal
+									minimize = !showHelpModal
+								}
+							"
+						/>
+					</Tooltip>
+				</div>
+				<Tooltip
+					:text="
+						sidebarStore.isSidebarCollapsed ? __('Expand') : __('Collapse')
+					"
+				>
+					<CollapseSidebar
+						class="size-4 text-ink-gray-7 duration-300 stroke-1.5 ease-in-out cursor-pointer"
+						:class="{
+							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+						}"
+						@click="toggleSidebar()"
+					/>
+				</Tooltip>
+			</div>
 		</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"
@@ -101,18 +184,52 @@
 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 { getSidebarLinks } from '../utils'
+import {
+	ref,
+	onMounted,
+	inject,
+	watch,
+	reactive,
+	markRaw,
+	h,
+	onUnmounted,
+} from 'vue'
+import { getSidebarLinks } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
-import { ChevronRight, Plus } from 'lucide-vue-next'
-import { Button, createResource, TrialBanner } from 'frappe-ui'
+import { Button, call, createResource, Tooltip } 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,
+	CircleAlert,
+	ChevronRight,
+	Plus,
+	CircleHelp,
+	FolderTree,
+	FileText,
+	UserPlus,
+	Users,
+	BookText,
+	Zap,
+	Check,
+} from 'lucide-vue-next'
+import {
+	TrialBanner,
+	HelpModal,
+	GettingStartedBanner,
+	useOnboarding,
+	showHelpModal,
+	minimize,
+	IntermediateStepModal,
+} from 'frappe-ui/frappe'
 
-const { user, sidebarSettings } = sessionStore()
+const { user } = sessionStore()
 const { userResource } = usersStore()
 let sidebarStore = useSidebar()
 const socket = inject('$socket')
@@ -123,12 +240,30 @@ const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
 const settingsStore = useSettings()
+const { sidebarSettings } = settingsStore
+const showOnboarding = ref(false)
+const showIntermediateModal = ref(false)
+const currentStep = ref({})
+const router = useRouter()
+let onboardingDetails
+let isOnboardingStepsCompleted = false
+const readOnlyMode = window.read_only_mode
+const iconProps = {
+	strokeWidth: 1.5,
+	width: 16,
+	height: 16,
+}
 
 onMounted(() => {
+	addNotifications()
+	setSidebarLinks()
+	setUpOnboarding()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
-	addNotifications()
+})
+
+const setSidebarLinks = () => {
 	sidebarSettings.reload(
 		{},
 		{
@@ -143,7 +278,7 @@ onMounted(() => {
 			},
 		}
 	)
-})
+}
 
 const unreadNotifications = createResource({
 	cache: 'Unread Notifications Count',
@@ -183,57 +318,95 @@ const addNotifications = () => {
 
 const addQuizzes = () => {
 	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.push({
+		sidebarLinks.value.splice(4, 0, {
 			label: 'Quizzes',
 			icon: 'CircleHelp',
 			to: 'Quizzes',
-			activeFor: ['Quizzes', 'QuizForm'],
+			activeFor: [
+				'Quizzes',
+				'QuizForm',
+				'QuizSubmissionList',
+				'QuizSubmission',
+			],
 		})
 	}
 }
 
 const addAssignments = () => {
 	if (isInstructor.value || isModerator.value) {
-		sidebarLinks.value.push({
+		sidebarLinks.value.splice(5, 0, {
 			label: 'Assignments',
 			icon: 'Pencil',
 			to: 'Assignments',
-			activeFor: ['Assignments', 'AssignmentForm'],
+			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,
+const addProgrammingExercises = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.splice(3, 0, {
+			label: 'Programming Exercises',
+			icon: 'Code',
+			to: 'ProgrammingExercises',
+			activeFor: [
+				'ProgrammingExercises',
+				'ProgrammingExerciseForm',
+				'ProgrammingExerciseSubmissions',
+				'ProgrammingExerciseSubmission',
+			],
 		})
 	}
 }
 
+const addPrograms = async () => {
+	let canAddProgram = await checkIfCanAddProgram()
+	if (!canAddProgram) return
+	let activeFor = ['Programs', 'ProgramDetail']
+	let index = 2
+
+	sidebarLinks.value.splice(index, 0, {
+		label: 'Programs',
+		icon: 'Route',
+		to: 'Programs',
+		activeFor: activeFor,
+	})
+}
+
+const addContactUsDetails = () => {
+	if (settingsStore.contactUsEmail?.data || settingsStore.contactUsURL?.data) {
+		sidebarLinks.value.push({
+			label: 'Contact Us',
+			icon: settingsStore.contactUsURL?.data ? 'Headset' : 'Mail',
+			to: settingsStore.contactUsURL?.data
+				? settingsStore.contactUsURL.data
+				: settingsStore.contactUsEmail?.data,
+		})
+	}
+}
+
+const checkIfCanAddProgram = async () => {
+	if (isModerator.value || isInstructor.value) {
+		return true
+	}
+	const programs = await call('lms.lms.utils.get_programs')
+	return programs.enrolled.length > 0 || programs.published.length > 0
+}
+
+const addHome = () => {
+	sidebarLinks.value.unshift({
+		label: 'Home',
+		icon: 'Home',
+		to: 'Home',
+		activeFor: ['Home'],
+	})
+}
+
 const openPageModal = (link) => {
 	showPageModal.value = true
 	pageToEdit.value = link
@@ -257,20 +430,6 @@ const deletePage = (link) => {
 	)
 }
 
-const getSidebarFromStorage = () => {
-	return useStorage('sidebar_is_collapsed', false)
-}
-
-watch(userResource, () => {
-	if (userResource.data) {
-		isModerator.value = userResource.data.is_moderator
-		isInstructor.value = userResource.data.is_instructor
-		addPrograms()
-		addQuizzes()
-		addAssignments()
-	}
-})
-
 const toggleSidebar = () => {
 	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
 	localStorage.setItem(
@@ -286,4 +445,343 @@ const toggleWebPages = () => {
 		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,
+		dependsOn: 'create_first_course',
+		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,
+		dependsOn: 'create_first_chapter',
+		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,
+		dependsOn: 'create_first_course',
+		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,
+		dependsOn: 'create_first_batch',
+		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,
+		dependsOn: 'create_first_batch',
+		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: __('Learning Paths'),
+		opened: false,
+		subArticles: [{ name: 'add-a-program', title: __('Add a program') }],
+	},
+	{
+		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
+	}
+}
+
+const addMyPoints = () => {
+	const roles = userResource.data?.roles || []
+	if (roles.includes('LMS Student') || roles.includes('LMS Schoolchild')) {
+		sidebarLinks.value.push({
+			label: __('My points'),
+			icon: 'Award',
+			to: 'MyPoints',
+			activeFor: [],
+		})
+	}
+}
+
+const addLeaderBoard = () => {
+ 	if (user) {
+ 		sidebarLinks.value.push({
+ 			label: __('Leader Board'),
+ 			icon: 'Trophy',
+ 			to: 'LeaderBoard',
+ 			activeFor: [],
+ 		})
+ 	}
+}
+
+const addChatGPT = () => {
+	const roles = userResource.data?.roles || []
+	let URL = ''
+	let nameLabel = ''
+	if (roles.includes('LMS Schoolchild') || roles.includes('LMS Student') || roles.includes('Course Creator')) {
+		if (roles.includes('LMS Schoolchild')) {
+			URL = 'chatgpt-schoolchild'
+			nameLabel = __('ChatGPT for Schoolers')
+		} else if (roles.includes('LMS Student')) {
+			URL = 'chatgpt-schoolchild'
+			nameLabel = __('ChatGPT for Students')
+		} else if (roles.includes('Course Creator')) {
+			URL = 'ai-teachers'
+			nameLabel = __('ChatGPT for Teachers')
+		}
+
+		sidebarLinks.value.push({
+			label: nameLabel,
+			icon: 'Cpu',
+			to: URL,
+			external: true,
+			activeFor: [],
+		})
+ 	}
+}
+
+const addMyChild = () => {
+	const roles = userResource.data?.roles || []
+	if (roles.includes('Parent')) {
+		sidebarLinks.value.push({
+			label: __('My Child'),
+			icon: 'User',
+			to: 'my-child',
+			activeFor: [],
+			external: true,
+		})
+	}
+
+}
+
+//test of new page
+const addProfile = () => {
+	const roles = userResource.data?.roles || []
+	if (roles.includes('LMS Student')) {
+		sidebarLinks.value.push({
+			label: __('Student Profile'),
+			icon: 'Home',
+			to: 'StudentProfile',
+			activeFor: [],
+		})
+	} else if (roles.includes('LMS Schoolchild')) {
+		sidebarLinks.value.push({
+			label: __('Schoolchildren Profile'),
+			icon: 'Home',
+			to: 'SchoolchildrenProfile',
+			activeFor: [],
+		})
+	} else if (roles.includes('Course Creator')) {
+		sidebarLinks.value.push({
+			label: __('Course Creator Profile'),
+			icon: 'Home',
+			to: 'CourseCreatorProfile',
+			activeFor: [],
+		})
+	} else {
+		sidebarLinks.value.push({
+			label: __('Parent Profile'),
+			icon: 'Home',
+			to: 'ParentProfile',
+			activeFor: [],
+		})
+	}
+
+}
+
+watch(userResource, () => {
+	addContactUsDetails()
+	if (userResource.data) {
+		isModerator.value = userResource.data.is_moderator
+		isInstructor.value = userResource.data.is_instructor
+		addHome()
+		addPrograms()
+		addProgrammingExercises()
+		addQuizzes()
+		addAssignments()
+		setUpOnboarding()
+
+		addMyPoints()
+ 		addLeaderBoard()
+ 		addChatGPT()
+		addMyChild()
+		addProfile()
+	}
+})
+
+const redirectToWebsite = () => {
+	window.open('https://frappe.io/learning', '_blank')
+}
+
+onUnmounted(() => {
+	socket.off('publish_lms_notifications')
+})
 </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-ink-gray-8 hover:bg-surface-gray-2',
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
 				]"
 				@click.prevent="togglePopover()"
 			>

frontend/src/components/AssessmentPlugin.vue

@@ -2,17 +2,24 @@
 	<Dialog
 		v-model="show"
 		:options="{
+			title:
+				type == 'quiz'
+					? __('Add a quiz to your lesson')
+					: __('Add an assignment to your lesson'),
 			size: 'xl',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: () => {
+						addAssessment()
+					},
+				},
+			],
 		}"
 	>
-		<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>
+		<template #body-content>
+			<div class="">
 				<div>
 					<Link
 						v-if="type == 'quiz'"
@@ -29,17 +36,12 @@
 						: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 { Dialog } from 'frappe-ui'
 import { onMounted, ref, nextTick } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 

frontend/src/components/Assessments.vue

@@ -4,7 +4,7 @@
 			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Assessments') }}
 			</div>
-			<Button v-if="canSeeAddButton()" @click="showModal = true">
+			<Button v-if="canAddAssessments()" @click="showModal = true">
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
@@ -40,7 +40,7 @@
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
 								<div v-if="column.key == 'assessment_type'">
-									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
+									{{ getAssessmentTypeLabel(row[column.key]) }}
 								</div>
 								<div v-else-if="column.key == 'title'">
 									{{ row[column.key] }}
@@ -100,6 +100,7 @@ import { Plus, Trash2 } from 'lucide-vue-next'
 
 const user = inject('$user')
 const showModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -171,6 +172,24 @@ const getRowRoute = (row) => {
 				},
 			}
 		}
+	} else if (row.assessment_type == 'LMS Programming Exercise') {
+		if (row.submission) {
+			return {
+				name: 'ProgrammingExerciseSubmission',
+				params: {
+					exerciseID: row.assessment_name,
+					submissionID: row.submission.name,
+				},
+			}
+		} else {
+			return {
+				name: 'ProgrammingExerciseSubmission',
+				params: {
+					exerciseID: row.assessment_name,
+					submissionID: 'new',
+				},
+			}
+		}
 	} else {
 		return {
 			name: 'QuizPage',
@@ -181,7 +200,8 @@ const getRowRoute = (row) => {
 	}
 }
 
-const canSeeAddButton = () => {
+const canAddAssessments = () => {
+	if (readOnlyMode) return false
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
 
@@ -211,7 +231,7 @@ const getAssessmentColumns = () => {
 }
 
 const getStatusTheme = (status) => {
-	if (status === 'Pass') {
+	if (status === 'Pass' || status === 'Passed') {
 		return 'green'
 	} else if (status === 'Not Graded') {
 		return 'orange'
@@ -219,4 +239,14 @@ const getStatusTheme = (status) => {
 		return 'red'
 	}
 }
+
+const getAssessmentTypeLabel = (type) => {
+	if (type == 'LMS Assignment') {
+		return __('Assignment')
+	} else if (type == 'LMS Quiz') {
+		return __('Quiz')
+	} else if (type == 'LMS Programming Exercise') {
+		return __('Programming Exercise')
+	}
+}
 </script>

frontend/src/components/Assignment.vue

@@ -1,10 +1,13 @@
 <template>
 	<div
 		v-if="assignment.data"
-		class="grid grid-cols-[65%,35%] h-full"
-		:class="{ 'border rounded-lg': !showTitle }"
+		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)]">
+		<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 }}
@@ -50,7 +53,7 @@
 						!['Pass', 'Fail'].includes(submissionResource.doc?.status) &&
 						submissionResource.doc?.owner == user.data?.name
 					"
-					class="bg-surface-blue-2 p-3 rounded-md leading-5 text-sm mb-4"
+					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.") }}
 					{{
@@ -67,6 +70,9 @@
 					<FileUploader
 						v-if="!submissionFile"
 						:fileTypes="getType()"
+						:uploadArgs="{
+							private: true,
+						}"
 						:validateFile="validateFile"
 						@success="(file) => saveSubmission(file)"
 					>
@@ -116,7 +122,7 @@
 					/>
 				</div>
 				<div v-else>
-					<div class="text-sm mb-4">
+					<div class="text-sm mb-2 text-ink-gray-7">
 						{{ __('Write your answer here') }}
 					</div>
 					<TextEditor
@@ -124,6 +130,9 @@
 						@change="(val) => (answer = val)"
 						:editable="true"
 						:fixedMenu="true"
+						:uploadArgs="{
+							private: 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>
@@ -138,9 +147,10 @@
 					<div class="text-sm text-ink-gray-5 font-medium mb-2">
 						{{ __('Comments by Evaluator') }}:
 					</div>
-					<div class="leading-5">
-						{{ submissionResource.doc.comments }}
-					</div>
+					<div
+						class="leading-5 text-ink-gray-9"
+						v-html="submissionResource.doc.comments"
+					></div>
 				</div>
 
 				<!-- Grading -->
@@ -187,10 +197,11 @@ import {
 	FileUploader,
 	FormControl,
 	TextEditor,
+	toast,
 } 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 { getFileSize } from '@/utils'
 import { useRouter } from 'vue-router'
 
 const submissionFile = ref(null)
@@ -198,7 +209,6 @@ const answer = ref(null)
 const comments = ref(null)
 const router = useRouter()
 const user = inject('$user')
-const showTitle = router.currentRoute.value.name == 'AssignmentSubmission'
 const isDirty = ref(false)
 
 const props = defineProps({
@@ -210,6 +220,10 @@ const props = defineProps({
 		type: String,
 		default: 'new',
 	},
+	showTitle: {
+		type: Boolean,
+		default: true,
+	},
 })
 
 onMounted(() => {
@@ -277,7 +291,7 @@ const submissionResource = createDocumentResource({
 	doctype: 'LMS Assignment Submission',
 	name: props.submissionName,
 	onError(err) {
-		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 	auto: false,
 	cache: [user.data?.name, props.assignmentID],
@@ -331,7 +345,7 @@ const submitAssignment = () => {
 			},
 			{
 				onSuccess(data) {
-					showToast(__('Success'), __('Changes saved successfully'), 'check')
+					toast.success(__('Changes saved successfully'))
 				},
 			}
 		)
@@ -345,7 +359,7 @@ const addNewSubmission = () => {
 		{},
 		{
 			onSuccess(data) {
-				showToast('Success', 'Assignment submitted successfully.', 'check')
+				toast.success(__('Assignment submitted successfully'))
 				if (router.currentRoute.value.name == 'AssignmentSubmission') {
 					router.push({
 						name: 'AssignmentSubmission',
@@ -353,6 +367,7 @@ const addNewSubmission = () => {
 							assignmentID: props.assignmentID,
 							submissionName: data.name,
 						},
+						query: { fromLesson: router.currentRoute.value.query.fromLesson },
 					})
 				} else {
 					markLessonProgress()
@@ -362,7 +377,7 @@ const addNewSubmission = () => {
 				submissionResource.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/AssignmentBlock.vue

@@ -1,46 +0,0 @@
-<template>
-	<Assignment
-		v-if="user.data && submission.data"
-		:assignmentID="assignmentID"
-		:submissionName="submission.data?.name || 'new'"
-	/>
-	<div v-else class="border rounded-md text-center py-20">
-		<div>
-			{{ __('Please login to access the assignment.') }}
-		</div>
-		<Button @click="redirectToLogin()" class="mt-2">
-			<span>
-				{{ __('Login') }}
-			</span>
-		</Button>
-	</div>
-</template>
-<script setup>
-import { inject, watch } from 'vue'
-import { Button, createResource } from 'frappe-ui'
-import Assignment from '@/components/Assignment.vue'
-
-const user = inject('$user')
-
-const props = defineProps({
-	assignmentID: {
-		type: String,
-		required: true,
-	},
-})
-
-const submission = createResource({
-	url: 'frappe.client.get_value',
-	makeParams(values) {
-		return {
-			doctype: 'LMS Assignment Submission',
-			fieldname: 'name',
-			filters: {
-				assignment: props.assignmentID,
-				member: user.data?.name,
-			},
-		}
-	},
-	auto: true,
-})
-</script>

frontend/src/components/BatchCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col border-2 hover:bg-surface-gray-2 rounded-md p-4 h-full"
+		class="flex flex-col border hover:border-outline-gray-3 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
@@ -70,9 +70,8 @@
 	</div>
 </template>
 <script setup>
-import { Badge } from 'frappe-ui'
-import { formatTime } from '../utils'
-import { Clock, BookOpen, Globe } from 'lucide-vue-next'
+import { formatTime } from '@/utils'
+import { Clock, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 import UserAvatar from '@/components/UserAvatar.vue'

frontend/src/components/BatchCourses.vue

@@ -63,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"
@@ -83,9 +86,10 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
+	toast,
 } from 'frappe-ui'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { showToast } from '@/utils'
+const readOnlyMode = window.read_only_mode
 
 const showCourseModal = ref(false)
 const user = inject('$user')
@@ -102,7 +106,6 @@ const courses = createResource({
 	params: {
 		batch: props.batch,
 	},
-	cache: ['batchCourses', props.batchName],
 	auto: true,
 })
 
@@ -148,7 +151,7 @@ const removeCourses = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				courses.reload()
-				showToast(__('Success'), __('Courses deleted successfully'), 'check')
+				toast.success(__('Courses deleted successfully'))
 				unselectAll()
 			},
 		}
@@ -156,6 +159,9 @@ const removeCourses = (selections, unselectAll) => {
 }
 
 const canSeeAddButton = () => {
+	if (readOnlyMode) {
+		return false
+	}
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
 </script>

frontend/src/components/BatchDashboard.vue

@@ -6,13 +6,12 @@
 			:courses="batch.data.courses"
 		/>
 		<Assessments :batch="batch.data.name" />
-		<StudentHeatmap />
+		<!-- <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

@@ -1,44 +1,49 @@
 <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>
+			<div class="leading-5 mb-4">
+				<div v-if="readOnly">
+					{{ __('Thank you for providing your feedback.') }}
+					<span
+						@click="showFeedbackForm = !showFeedbackForm"
+						class="underline cursor-pointer"
+						>{{ __('Click here') }}</span
+					>
+					{{ __('to view your feedback.') }}
+				</div>
+				<div v-else>
+					{{ __('Help us improve by providing your feedback.') }}
+				</div>
 			</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))"
+			<div class="space-y-4" :class="showFeedbackForm ? 'block' : 'hidden'">
+				<div class="space-y-4">
+					<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="9"
 					:readonly="readOnly"
 				/>
+				<Button v-if="!readOnly" @click="submitFeedback">
+					{{ __('Submit Feedback') }}
+				</Button>
 			</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 class="leading-5 text-sm mb-2 mt-5">
+			{{ __('Average Feedback Received') }}
 		</div>
 
-		<div class="flex items-center justify-between mb-10">
+		<div class="space-y-4">
 			<Rating
 				v-for="key in ratingKeys"
 				v-model="average[key]"
@@ -47,82 +52,32 @@
 			/>
 		</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>
+		<Button variant="outline" class="mt-5" @click="showAllFeedback = true">
+			{{ __('View all feedback') }}
+		</Button>
 	</div>
-	<div v-else class="text-sm italic text-center text-ink-gray-7 mt-5">
+	<div v-else class="text-ink-gray-7 mt-5 leading-5">
 		{{ __('No feedback received yet.') }}
 	</div>
+	<FeedbackModal
+		v-if="feedbackList.data?.length"
+		v-model="showAllFeedback"
+		:feedbackList="feedbackList.data"
+	/>
 </template>
 <script setup>
-import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
+import { 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'
+import { Button, createListResource, FormControl, Rating } from 'frappe-ui'
+import FeedbackModal from '@/components/Modals/FeedbackModal.vue'
 
 const user = inject('$user')
 const ratingKeys = ['content', 'instructors', 'value']
 const readOnly = ref(false)
 const average = reactive({})
 const feedback = reactive({})
+const showFeedbackForm = ref(true)
+const showAllFeedback = ref(false)
 
 const props = defineProps({
 	batch: {
@@ -168,6 +123,7 @@ watch(
 		if (feedbackList.data.length) {
 			let data = feedbackList.data
 			readOnly.value = true
+			showFeedbackForm.value = false
 
 			ratingKeys.forEach((key) => {
 				average[key] = 0
@@ -202,40 +158,11 @@ const submitFeedback = () => {
 		{
 			onSuccess: () => {
 				feedbackList.reload()
+				showFeedbackForm.value = false
 			},
 		}
 	)
 }
-
-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 {

frontend/src/components/BatchOverlay.vue

@@ -2,7 +2,12 @@
 	<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"
-			class="text-xs bg-green-100 text-green-700 float-right px-2 py-0.5 rounded-md"
+			class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
+			:class="
+				batch.data.amount || batch.data.courses.length
+					? 'float-right'
+					: 'w-fit mb-4'
+			"
 		>
 			{{ seats_left }}
 			<span v-if="seats_left > 1">
@@ -24,7 +29,10 @@
 		>
 			{{ formatNumberIntoCurrency(batch.data.amount, batch.data.currency) }}
 		</div>
-		<div class="flex items-center mb-3 text-ink-gray-7">
+		<div
+			v-if="batch.data.courses.length"
+			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>
@@ -46,81 +54,105 @@
 				{{ batch.data.timezone }}
 			</span>
 		</div>
-		<router-link
-			v-if="isModerator || isStudent"
-			:to="{
-				name: 'Batch',
-				params: {
-					batchName: batch.data.name,
-				},
-			}"
-		>
-			<Button variant="solid" class="w-full mt-4">
-				<span>
-					{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
-				</span>
+		<div v-if="!readOnlyMode">
+			<router-link
+				v-if="canAccessBatch"
+				:to="{
+					name: 'Batch',
+					params: {
+						batchName: batch.data.name,
+					},
+				}"
+			>
+				<Button variant="solid" class="w-full mt-4">
+					<template #prefix>
+						<LogIn v-if="isStudent" class="size-4 stroke-1.5" />
+						<Settings v-else class="size-4 stroke-1.5" />
+					</template>
+					<span>
+						{{ isStudent ? __('Visit Batch') : __('Manage Batch') }}
+					</span>
+				</Button>
+			</router-link>
+			<router-link
+				:to="{
+					name: 'Billing',
+					params: {
+						type: 'batch',
+						name: batch.data.name,
+					},
+				}"
+				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">
+					<template #prefix>
+						<CreditCard class="size-4 stroke-1.5" />
+					</template>
+					<span>
+						{{ __('Register Now') }}
+					</span>
+				</Button>
+			</router-link>
+			<Button
+				variant="solid"
+				class="w-full mt-2"
+				v-else-if="
+					batch.data.allow_self_enrollment &&
+					batch.data.seats_left &&
+					batch.data.accept_enrollments
+				"
+				@click="enrollInBatch()"
+			>
+				<template #prefix>
+					<GraduationCap class="size-4 stroke-1.5" />
+				</template>
+				{{ __('Enroll Now') }}
 			</Button>
-		</router-link>
-		<router-link
-			:to="{
-				name: 'Billing',
-				params: {
-					type: 'batch',
-					name: batch.data.name,
-				},
-			}"
-			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>
-					{{ __('Register Now') }}
-				</span>
-			</Button>
-		</router-link>
-		<Button
-			variant="solid"
-			class="w-full mt-2"
-			v-else-if="
-				batch.data.allow_self_enrollment &&
-				batch.data.seats_left &&
-				batch.data.accept_enrollments
-			"
-			@click="enrollInBatch()"
-		>
-			{{ __('Enroll Now') }}
-		</Button>
-		<router-link
-			v-if="isModerator"
-			:to="{
-				name: 'BatchForm',
-				params: {
-					batchName: batch.data.name,
-				},
-			}"
-		>
-			<Button class="w-full mt-2">
-				<span>
-					{{ __('Edit') }}
-				</span>
-			</Button>
-		</router-link>
+			<router-link
+				v-if="isModerator"
+				:to="{
+					name: 'BatchForm',
+					params: {
+						batchName: batch.data.name,
+					},
+				}"
+			>
+				<Button class="w-full mt-2">
+					<template #prefix>
+						<Pencil class="size-4 stroke-1.5" />
+					</template>
+					<span>
+						{{ __('Edit') }}
+					</span>
+				</Button>
+			</router-link>
+		</div>
 	</div>
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Badge, Button, createResource } from 'frappe-ui'
-import { BookOpen, Clock, Globe } from 'lucide-vue-next'
-import { formatNumberIntoCurrency, formatTime, showToast } from '@/utils'
+import { Button, createResource, toast } from 'frappe-ui'
+import {
+	BookOpen,
+	Clock,
+	CreditCard,
+	Globe,
+	GraduationCap,
+	LogIn,
+	Pencil,
+	Settings,
+} from 'lucide-vue-next'
+import { formatNumberIntoCurrency, formatTime } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const user = inject('$user')
-const dayjs = inject('$dayjs')
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -146,11 +178,7 @@ const enrollInBatch = () => {
 		{},
 		{
 			onSuccess(data) {
-				showToast(
-					__('Success'),
-					__('You have been enrolled in this batch'),
-					'check'
-				)
+				toast.success(__('You have been enrolled in this batch'))
 				router.push({
 					name: 'Batch',
 					params: {
@@ -176,4 +204,12 @@ const isStudent = computed(() => {
 const isModerator = computed(() => {
 	return user.data?.is_moderator
 })
+
+const isEvaluator = computed(() => {
+	return user.data?.is_evaluator
+})
+
+const canAccessBatch = computed(() => {
+	return isModerator.value || isStudent.value || isEvaluator.value
+})
 </script>

frontend/src/components/BatchStudents.vue

@@ -1,108 +1,64 @@
 <template>
-	<div class="">
+	<div v-if="batch.data" 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"
-			>
-				<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="grid grid-cols-2 md:grid-cols-4 gap-5 mb-8">
+			<NumberChart
+				class="border rounded-md"
+				:config="{ title: __('Students'), value: students.data?.length || 0 }"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{
+					title: __('Certified'),
+					value: certificationCount.data || 0,
+				}"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{
+					title: __('Courses'),
+					value: batch.data.courses?.length || 0,
+				}"
+			/>
+
+			<NumberChart
+				class="border rounded-md"
+				:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
 			/>
-			<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>
+
+		<AxisChart
+			v-if="showProgressChart"
+			:config="{
+				data: chartData,
+				title: __('Batch Summary'),
+				subtitle: __('Progress of students in courses and assessments'),
+				xAxis: {
+					key: 'task',
+					title: 'Tasks',
+					type: 'category',
+				},
+				yAxis: {
+					title: __('Number of Students'),
+					echartOptions: {
+						minInterval: 1,
+					},
+				},
+				swapXY: true,
+				series: [
+					{
+						name: 'value',
+						type: 'bar',
+					},
+				],
+			}"
+		/>
 	</div>
 
 	<div>
@@ -110,7 +66,7 @@
 			<div class="text-ink-gray-7 font-medium">
 				{{ __('Students') }}
 			</div>
-			<Button @click="openStudentModal()">
+			<Button v-if="!readOnlyMode" @click="openStudentModal()">
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
@@ -201,9 +157,10 @@
 	</div>
 
 	<StudentModal
-		:batch="props.batch.name"
+		:batch="props.batch.data.name"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
+		v-model:batchModal="props.batch"
 	/>
 	<BatchStudentProgress
 		:student="selectedStudent"
@@ -213,6 +170,7 @@
 <script setup>
 import {
 	Avatar,
+	AxisChart,
 	Button,
 	createResource,
 	FeatherIcon,
@@ -223,6 +181,8 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
+	NumberChart,
+	toast,
 } from 'frappe-ui'
 import {
 	BookOpen,
@@ -234,7 +194,6 @@ import {
 } 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'
@@ -244,9 +203,9 @@ 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 readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -257,14 +216,15 @@ const props = defineProps({
 
 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
-	cache: ['students', props.batch.name],
 	params: {
-		batch: props.batch?.name,
+		batch: props.batch?.data?.name,
 	},
 	auto: true,
 	onSuccess(data) {
 		chartData.value = getChartData()
-		showProgressChart.value = data.length && true
+		showProgressChart.value =
+			data.length &&
+			(props.batch?.data?.courses?.length || assessmentCount.value)
 	},
 })
 
@@ -321,7 +281,8 @@ const removeStudents = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				students.reload()
-				showToast(__('Success'), __('Students deleted successfully'), 'check')
+				props.batch.reload()
+				toast.success(__('Students deleted successfully'))
 				unselectAll()
 			},
 		}
@@ -329,96 +290,49 @@ const removeStudents = (selections, unselectAll) => {
 }
 
 const getChartData = () => {
-	let categories = {}
+	let tasks = []
+	let data = []
 
-	if (!students.data?.length) return []
-
-	Object.keys(students.data[0].courses).forEach((course) => {
-		categories[course] = {
-			value: 0,
-			type: 'course',
-			label: course,
-		}
+	students.data.forEach((row) => {
+		tasks = countAssessments(row, tasks)
+		tasks = countCourses(row, tasks)
 	})
 
-	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
-			}
+	tasks.forEach((task) => {
+		data.push({
+			task: task.label,
+			value: task.value,
 		})
 	})
-
-	chartOptions.value = getChartOptions(categories)
-	return [
-		{
-			name: __('Completed by Students'),
-			data: Object.values(categories).map((item) => item.value),
-		},
-	]
+	return data
 }
 
-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
+const countAssessments = (row, tasks) => {
+	Object.keys(row.assessments).forEach((assessment) => {
+		if (row.assessments[assessment].result === 'Pass') {
+			tasks.filter((task) => task.label === assessment).length
+				? tasks.filter((task) => task.label === assessment)[0].value++
+				: tasks.push({
+						value: 1,
+						label: assessment,
+				  })
+		}
+	})
+	return tasks
+}
 
-	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 */
-		},
-	}
+const countCourses = (row, tasks) => {
+	Object.keys(row.courses).forEach((course) => {
+		if (row.courses[course] === 100) {
+			tasks.filter((task) => task.label === course).length
+				? tasks.filter((task) => task.label === course)[0].value++
+				: tasks.push({
+						value: 1,
+						label: course,
+				  })
+		}
+	})
+	return tasks
 }
 
 watch(students, () => {
@@ -432,14 +346,9 @@ const certificationCount = createResource({
 	params: {
 		doctype: 'LMS Certificate',
 		filters: {
-			batch_name: props.batch.name,
+			batch_name: props.batch?.data?.name,
 		},
 	},
 	auto: true,
 })
 </script>
-<style>
-.apexcharts-legend {
-	display: none !important;
-}
-</style>

frontend/src/components/BrandSettings.vue

@@ -1,92 +0,0 @@
-<template>
-	<div class="flex flex-col justify-between min-h-0">
-		<div>
-			<div class="flex items-center justify-between">
-				<div class="font-semibold mb-1 text-ink-gray-9">
-					{{ __(label) }}
-				</div>
-				<Badge
-					v-if="isDirty"
-					:label="__('Not Saved')"
-					variant="subtle"
-					theme="orange"
-				/>
-			</div>
-			<div class="text-xs text-ink-gray-5">
-				{{ __(description) }}
-			</div>
-		</div>
-		<div class="overflow-y-auto">
-			<SettingFields :fields="fields" :data="data.data" />
-			<div class="flex flex-row-reverse mt-auto">
-				<Button variant="solid" :loading="saveSettings.loading" @click="update">
-					{{ __('Update') }}
-				</Button>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import { createResource, Button, Badge } from 'frappe-ui'
-import SettingFields from '@/components/SettingFields.vue'
-import { watch, ref } from 'vue'
-
-const isDirty = ref(false)
-
-const props = defineProps({
-	fields: {
-		type: Array,
-		required: true,
-	},
-	data: {
-		type: Object,
-		required: true,
-	},
-	label: {
-		type: String,
-		required: true,
-	},
-	description: {
-		type: String,
-	},
-})
-
-const saveSettings = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		return {
-			doctype: 'Website Settings',
-			name: 'Website Settings',
-			fieldname: values.fields,
-		}
-	},
-})
-
-const update = () => {
-	let fieldsToSave = {}
-	let imageFields = ['favicon', 'banner_image', 'footer_logo']
-	props.fields.forEach((f) => {
-		if (imageFields.includes(f.name)) {
-			fieldsToSave[f.name] = f.value ? f.value.file_url : null
-		} else {
-			fieldsToSave[f.name] = f.value
-		}
-	})
-	saveSettings.submit(
-		{
-			fields: fieldsToSave,
-		},
-		{
-			onSuccess(data) {
-				isDirty.value = false
-			},
-		}
-	)
-}
-
-watch(props.data, (newData) => {
-	if (newData && !isDirty.value) {
-		isDirty.value = true
-	}
-})
-</script>

frontend/src/components/Categories.vue

@@ -1,130 +0,0 @@
-<template>
-	<div class="flex flex-col min-h-0">
-		<div class="flex items-center justify-between">
-			<div class="text-xl font-semibold mb-5 text-ink-gray-9">
-				{{ label }}
-			</div>
-			<Button @click="() => showCategoryForm()">
-				<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
-			v-if="showForm"
-			class="flex items-center justify-between my-4 space-x-2"
-		>
-			<FormControl
-				ref="categoryInput"
-				v-model="category"
-				:placeholder="__('Category Name')"
-				class="flex-1"
-			/>
-			<Button @click="addCategory()" variant="subtle">
-				{{ __('Add') }}
-			</Button>
-		</div>
-
-		<div class="overflow-y-scroll">
-			<div class="text-base divide-y space-y-2">
-				<FormControl
-					:value="cat.category"
-					type="text"
-					v-for="cat in categories.data"
-					class=""
-					@change.stop="(e) => update(cat.name, e.target.value)"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import {
-	Button,
-	FormControl,
-	createListResource,
-	createResource,
-	debounce,
-} from 'frappe-ui'
-import { Plus, X } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const showForm = ref(false)
-const category = ref(null)
-const categoryInput = ref(null)
-
-const props = defineProps({
-	label: {
-		type: String,
-		required: true,
-	},
-	description: {
-		type: String,
-		default: '',
-	},
-})
-
-const categories = createListResource({
-	doctype: 'LMS Category',
-	fields: ['name', 'category'],
-	auto: true,
-})
-
-const newCategory = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Category',
-				category: category.value,
-			},
-		}
-	},
-})
-
-const addCategory = () => {
-	newCategory.submit(
-		{},
-		{
-			onSuccess(data) {
-				categories.reload()
-				category.value = null
-			},
-		}
-	)
-}
-
-const showCategoryForm = () => {
-	showForm.value = !showForm.value
-	setTimeout(() => {
-		categoryInput.value.$el.querySelector('input').focus()
-	}, 0)
-}
-
-const updateCategory = createResource({
-	url: 'frappe.client.rename_doc',
-	makeParams(values) {
-		return {
-			doctype: 'LMS Category',
-			old_name: values.name,
-			new_name: values.category,
-		}
-	},
-})
-
-const update = (name, value) => {
-	updateCategory.submit(
-		{
-			name: name,
-			category: value,
-		},
-		{
-			onSuccess() {
-				categories.reload()
-			},
-		}
-	)
-}
-</script>

frontend/src/components/CertificationLinks.vue

@@ -1,6 +1,16 @@
 <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-if="
+		v-else-if="
 			certification.data &&
 			certification.data.membership &&
 			certification.data.paid_certificate &&
@@ -25,7 +35,7 @@
 			</Button>
 		</router-link>
 		<router-link
-			v-else-if="!certification.data.membership.certficate"
+			v-else-if="!certification.data.membership.certificate"
 			:to="{
 				name: 'CourseCertification',
 				params: {
@@ -61,7 +71,15 @@ const certification = createResource({
 	params: {
 		course: props.courseName,
 	},
-	auto: true,
+	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/ContactUsEmail.vue

@@ -0,0 +1,67 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Contact Us'),
+			size: 'md',
+		}"
+	>
+		<template #body-content>
+			<div class="flex flex-col gap-4">
+				<FormControl
+					v-model="subject"
+					:label="__('Subject')"
+					type="text"
+					:required="true"
+				/>
+				<div>
+					<div class="mb-1.5 text-sm text-ink-gray-5">
+						{{ __('Message') }}
+						<span class="text-ink-red-3">*</span>
+					</div>
+					<TextEditor
+						:fixedMenu="true"
+						@change="(val) => (message = val)"
+						editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="pb-5 float-right">
+				<Button variant="solid" @click="sendMail(close)">
+					{{ __('Send') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Button, call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { ref } from 'vue'
+import { useSettings } from '@/stores/settings'
+
+const show = defineModel<boolean>({ required: true, default: false })
+const subject = ref('')
+const message = ref('')
+const settingsStore = useSettings()
+
+const sendMail = (close: Function) => {
+	call('frappe.core.doctype.communication.email.make', {
+		recipients: settingsStore.contactUsEmail?.data,
+		subject: subject.value,
+		content: message.value,
+		send_email: true,
+	})
+		.then(() => {
+			toast.success(__('Email sent successfully'))
+			close()
+			subject.value = ''
+			message.value = ''
+		})
+		.catch(() => {
+			toast.error(__('Failed to send email'))
+			close()
+		})
+}
+</script>

frontend/src/components/Controls/Autocomplete.vue

@@ -1,126 +1,140 @@
 <template>
-	<Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
-		<Popover class="w-full" v-model:show="showOptions">
-			<template #target="{ open: openPopover, togglePopover }">
-				<slot name="target" v-bind="{ open: openPopover, togglePopover }">
-					<div class="w-full">
-						<button
-							class="flex w-full items-center justify-between focus:outline-none"
-							:class="inputClasses"
-							@click="() => togglePopover()"
-						>
-							<div class="flex items-center">
-								<slot name="prefix" />
-								<span
-									class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-									v-if="selectedValue"
-								>
-									{{ displayValue(selectedValue) }}
-								</span>
-								<span class="text-base leading-5 text-ink-gray-4" v-else>
-									{{ placeholder || '' }}
-								</span>
-							</div>
-							<ChevronDown class="h-4 w-4 stroke-1.5" />
-						</button>
-					</div>
-				</slot>
-			</template>
-			<template #body="{ isOpen }">
-				<div v-show="isOpen">
-					<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"
-								class="form-input w-full"
-								type="text"
-								@change="
-									(e) => {
-										query = e.target.value
-									}
-								"
-								:value="query"
-								autocomplete="off"
-								placeholder="Search"
-							/>
+	<div>
+		<div v-if="label" class="text-xs text-ink-gray-5 mb-1">
+			{{ __(label) }}
+			<span class="text-ink-red-3" v-if="attrs.required">*</span>
+		</div>
+		<Combobox
+			v-model="selectedValue"
+			nullable
+			v-slot="{ open: isComboboxOpen }"
+		>
+			<Popover class="w-full" v-model:show="showOptions">
+				<template #target="{ open: openPopover, togglePopover }">
+					<slot name="target" v-bind="{ open: openPopover, togglePopover }">
+						<div class="w-full">
 							<button
-								class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
-								@click="selectedValue = null"
+								class="flex w-full items-center justify-between focus:outline-none"
+								:class="inputClasses"
+								@click="() => togglePopover()"
+								:disabled="attrs.readonly"
 							>
-								<X class="h-4 w-4 stroke-1.5" />
+								<div class="flex items-center">
+									<slot name="prefix" />
+									<span
+										class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+										v-if="selectedValue"
+									>
+										{{ displayValue(selectedValue) }}
+									</span>
+									<span class="text-base leading-5 text-ink-gray-4" v-else>
+										{{ placeholder || '' }}
+									</span>
+								</div>
+								<ChevronDown class="h-4 w-4 stroke-1.5" />
 							</button>
 						</div>
-						<ComboboxOptions
-							class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-							static
+					</slot>
+				</template>
+				<template #body="{ isOpen }">
+					<div v-show="isOpen" class="">
+						<div
+							class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
 						>
-							<div
-								class="mt-1.5"
-								v-for="group in groups"
-								:key="group.key"
-								v-show="group.items.length > 0"
+							<div class="relative px-1.5 pt-0.5">
+								<ComboboxInput
+									ref="search"
+									class="form-input w-full"
+									type="text"
+									@change="
+										(e) => {
+											query = e.target.value
+										}
+									"
+									:value="query"
+									autocomplete="off"
+									placeholder="Search"
+								/>
+								<button
+									class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
+									@click="selectedValue = null"
+								>
+									<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
+								</button>
+							</div>
+							<ComboboxOptions
+								class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+								static
 							>
 								<div
-									v-if="group.group && !group.hideLabel"
-									class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
+									class="mt-1.5"
+									v-for="group in groups"
+									:key="group.key"
+									v-show="group.items.length > 0"
 								>
-									{{ group.group }}
-								</div>
-								<ComboboxOption
-									as="template"
-									v-for="option in group.items"
-									:key="option.value"
-									:value="option"
-									v-slot="{ active, selected }"
-								>
-									<li
-										:class="[
-											'flex items-center rounded px-2.5 py-2 text-base',
-											{ 'bg-surface-gray-2': active },
-										]"
+									<div
+										v-if="group.group && !group.hideLabel"
+										class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
 									>
-										<slot
-											name="item-prefix"
-											v-bind="{ active, selected, option }"
-										/>
-										<slot
-											name="item-label"
-											v-bind="{ active, selected, option }"
+										{{ group.group }}
+									</div>
+									<ComboboxOption
+										as="template"
+										v-for="option in group.items"
+										:key="option.value"
+										:value="option"
+										v-slot="{ active, selected }"
+									>
+										<li
+											:class="[
+												'flex items-center rounded px-2.5 py-2 text-base',
+												{ 'bg-surface-gray-2': active },
+											]"
 										>
-											<div class="flex flex-col space-y-1">
-												<div>
-													{{ option.label }}
+											<slot
+												name="item-prefix"
+												v-bind="{ active, selected, option }"
+											/>
+											<slot
+												name="item-label"
+												v-bind="{ active, selected, option }"
+											>
+												<div class="flex flex-col space-y-1 text-ink-gray-8">
+													<div>
+														{{ option.label }}
+													</div>
+													<div
+														v-if="
+															option.description &&
+															option.description != option.label
+														"
+														class="text-xs text-ink-gray-7"
+														v-html="option.description"
+													></div>
 												</div>
-												<div
-													v-if="option.description"
-													class="text-xs text-ink-gray-7"
-													v-html="option.description"
-												></div>
-											</div>
-										</slot>
-									</li>
-								</ComboboxOption>
+											</slot>
+										</li>
+									</ComboboxOption>
+								</div>
+								<li
+									v-if="groups.length == 0"
+									class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
+								>
+									No results found
+								</li>
+							</ComboboxOptions>
+							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+								<slot
+									name="footer"
+									v-bind="{ value: search?.el._value, close }"
+								></slot>
 							</div>
-							<li
-								v-if="groups.length == 0"
-								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
-							>
-								No results found
-							</li>
-						</ComboboxOptions>
-						<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
-							<slot
-								name="footer"
-								v-bind="{ value: search?.el._value, close }"
-							></slot>
 						</div>
 					</div>
-				</div>
-			</template>
-		</Popover>
-	</Combobox>
+				</template>
+			</Popover>
+		</Combobox>
+	</div>
 </template>
 
 <script setup>
@@ -147,6 +161,10 @@ const props = defineProps({
 		type: String,
 		default: 'md',
 	},
+	label: {
+		type: String,
+		default: '',
+	},
 	variant: {
 		type: String,
 		default: 'subtle',

frontend/src/components/Controls/ChildTable.vue

@@ -0,0 +1,149 @@
+<template>
+	<div>
+		<div class="text-xs text-ink-gray-5 mb-2">
+			{{ label }}
+		</div>
+		<div class="overflow-x-auto border rounded-md">
+			<div
+				class="grid items-center space-x-4 p-2 border-b"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<div
+					v-for="(column, index) in columns"
+					:key="index"
+					class="text-sm text-ink-gray-5"
+				>
+					{{ column }}
+				</div>
+				<div></div>
+			</div>
+			<div
+				v-for="(row, rowIndex) in rows"
+				:key="rowIndex"
+				class="grid items-center space-x-4 p-2"
+				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+			>
+				<template v-for="key in Object.keys(row)" :key="key">
+					<input
+						v-if="showKey(key)"
+						v-model="row[key]"
+						class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-sm text-sm focus:outline-none"
+					/>
+				</template>
+
+				<div class="relative" ref="menuRef">
+					<Button
+						variant="ghost"
+						@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+					>
+						<template #icon>
+							<Ellipsis
+								class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+							/>
+						</template>
+					</Button>
+
+					<div
+						v-if="menuOpenIndex === rowIndex"
+						class="absolute right-[30px] top-5 mt-1 w-32 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+					>
+						<button
+							@click="deleteRow(rowIndex)"
+							class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
+						>
+							<Trash2 class="size-4 stroke-1.5" />
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="mt-2">
+			<Button @click="addRow">
+				<template #prefix>
+					<Plus class="size-4 text-ink-gray-7" />
+				</template>
+				{{ __('Add Row') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Button } from 'frappe-ui'
+import { Ellipsis, Plus, Trash2 } from 'lucide-vue-next'
+import { onClickOutside } from '@vueuse/core'
+
+const rows = defineModel<Cell[][]>()
+const menuRef = ref(null)
+const menuOpenIndex = ref<number | null>(null)
+const menuTopPosition = ref<string>('')
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: Cell[][]): void
+}>()
+
+type Cell = {
+	value: string
+	editable?: boolean
+}
+
+const props = withDefaults(
+	defineProps<{
+		modelValue?: Cell[][]
+		columns?: string[]
+		label?: string
+	}>(),
+	{
+		columns: [],
+	}
+)
+
+const columns = ref(props.columns)
+
+watch(rows, () => {
+	if (rows.value?.length < 1) {
+		addRow()
+	}
+})
+
+const addRow = () => {
+	if (!rows.value) {
+		rows.value = []
+	}
+	let newRow: { [key: string]: string } = {}
+	columns.value.forEach((column: any) => {
+		newRow[column.toLowerCase().split(' ').join('_')] = ''
+	})
+	rows.value.push(newRow)
+	emit('update:modelValue', rows.value)
+}
+
+const deleteRow = (index: number) => {
+	rows.value.splice(index, 1)
+	emit('update:modelValue', rows.value)
+}
+
+const getGridTemplateColumns = () => {
+	return [...Array(columns.value.length).fill('1fr'), '0.25fr'].join(' ')
+}
+
+const toggleMenu = (index: number, event: MouseEvent) => {
+	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
+	menuTopPosition.value = `${event.clientY + 10}px`
+}
+
+onClickOutside(menuRef, () => {
+	menuOpenIndex.value = null
+})
+
+const showKey = (key: string) => {
+	let columnsLower = columns.value.map((col) =>
+		col.toLowerCase().split(' ').join('_')
+	)
+	return columnsLower.includes(key)
+}
+</script>

frontend/src/components/Controls/Code.vue

@@ -0,0 +1,162 @@
+<template>
+	<div class="flex w-full flex-col gap-1.5">
+		<div v-if="label" class="text-xs text-ink-gray-5">
+			{{ __(label) }}
+		</div>
+		<codemirror
+			v-model="code"
+			:extensions="extensions"
+			:tab-size="2"
+			:autofocus="autofocus"
+			:indent-with-tab="true"
+			:style="{ height: height, maxHeight: maxHeight }"
+			:disabled="readonly"
+			@blur="emitEditorValue"
+			:class="{
+				'border border-outline-gray-1': showBorder,
+			}"
+		/>
+		<Button
+			v-if="showSaveButton"
+			@click="emit('save', code)"
+			class="mt-3 w-full text-base"
+		>
+			{{ __('Save') }}
+		</Button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, computed, watch } from 'vue'
+import { Button } from 'frappe-ui'
+import { Codemirror } from 'vue-codemirror'
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
+import { LanguageSupport } from '@codemirror/language'
+import { EditorView } from '@codemirror/view'
+import { tomorrow } from 'thememirror'
+
+const props = withDefaults(
+	defineProps<{
+		language: 'json' | 'javascript' | 'html' | 'css' | 'python'
+		modelValue: string | object | Array<string | object> | null
+		height?: string
+		maxHeight?: string
+		autofocus?: boolean
+		showSaveButton?: boolean
+		showLineNumbers?: boolean
+		completions?: Function | null
+		label?: string
+		showBorder?: boolean
+		required?: boolean
+		readonly?: boolean
+	}>(),
+	{
+		language: 'javascript',
+		modelValue: null,
+		height: 'auto',
+		maxHeight: '250px',
+		showLineNumbers: true,
+		completions: null,
+	}
+)
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const code = ref<string>('')
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		code.value =
+			typeof newVal === 'string' ? newVal : JSON.stringify(newVal, null, 2)
+	},
+	{ immediate: true }
+)
+
+watch(code, (val) => {
+	emit('update:modelValue', val)
+})
+
+const errorMessage = ref('')
+const emitEditorValue = () => {
+	try {
+		errorMessage.value = ''
+		let value = code.value || ''
+
+		if (!props.showSaveButton && !props.readonly) {
+			emit('update:modelValue', value)
+		}
+	} catch (e) {
+		console.error('Error while parsing JSON for editor', e)
+		errorMessage.value = `Invalid object/JSON: ${e.message}`
+	}
+}
+
+const languageExtension = ref<LanguageSupport>()
+const autocompleteExtension = ref()
+
+async function setLanguageExtension() {
+	const importMap = {
+		json: () => import('@codemirror/lang-json'),
+		javascript: () => import('@codemirror/lang-javascript'),
+		html: () => import('@codemirror/lang-html'),
+		css: () => import('@codemirror/lang-css'),
+		python: () => import('@codemirror/lang-python'),
+	}
+
+	const languageImport = importMap[props.language]
+	if (!languageImport) return
+
+	const module = await languageImport()
+	languageExtension.value = (module as any)[props.language]()
+
+	if (props.completions) {
+		const languageData = (module as any)[`${props.language}Language`]
+		autocompleteExtension.value = languageData.data.of({
+			autocomplete: props.completions,
+		})
+	}
+}
+
+onMounted(async () => {
+	await setLanguageExtension()
+})
+
+watch(
+	() => props.language,
+	async () => {
+		await setLanguageExtension()
+	},
+	{ immediate: true }
+)
+
+const extensions = computed(() => {
+	const baseExtensions = [
+		closeBrackets(),
+		tomorrow,
+		EditorView.theme({
+			'&': {
+				fontFamily: 'monospace',
+				fontSize: '12px',
+			},
+			'.cm-gutters': {
+				display: props.showLineNumbers ? 'flex' : 'none',
+			},
+		}),
+	]
+	if (languageExtension.value) {
+		baseExtensions.push(languageExtension.value)
+	}
+	if (autocompleteExtension.value) {
+		baseExtensions.push(autocompleteExtension.value)
+	}
+	const autocompletionOptions = {
+		activateOnTyping: true,
+		maxRenderedOptions: 10,
+		closeOnBlur: false,
+		icons: false,
+		optionClass: () => 'flex h-7 !px-2 items-center rounded !text-gray-600',
+	}
+	baseExtensions.push(autocompletion(autocompletionOptions))
+	return baseExtensions
+})
+</script>

frontend/src/components/Controls/CodeEditor.vue

@@ -5,7 +5,7 @@
 			height: height,
 		}"
 	>
-		<span class="text-xs text-ink-gray-7" v-if="label">
+		<span class="text-xs text-ink-gray-7 mb-1" v-if="label">
 			{{ label }}
 		</span>
 		<div
@@ -146,7 +146,6 @@ 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) {

frontend/src/components/Controls/ColorSwatches.vue

@@ -0,0 +1,108 @@
+<template>
+	<div>
+		<div class="text-xs text-ink-gray-5 mb-1">
+			{{ __(label) }}
+		</div>
+		<Popover placement="bottom" class="!block">
+			<template #target="{ togglePopover, isOpen }">
+				<div class="space-y-2">
+					<FormControl
+						type="text"
+						autocomplete="off"
+						class="w-full"
+						:placeholder="__('Set Color')"
+						@focus="togglePopover"
+						:modelValue="modelValue"
+						@update:modelValue="(val: string) => emit('update:modelValue', val)"
+					>
+						<template #prefix>
+							<div
+								class="size-4 rounded-full"
+								:style="
+									modelValue
+										? {
+												backgroundColor:
+													theme.backgroundColor[modelValue.toLowerCase()][400],
+										  }
+										: {}
+								"
+							>
+								<Palette
+									v-if="!modelValue"
+									class="size-4 stroke-1.5 text-ink-gray-5"
+								/>
+							</div>
+						</template>
+						<template #suffix>
+							<Button variant="ghost">
+								<X
+									class="size-3 text-ink-gray-5"
+									@click="emit('update:modelValue', null)"
+								/>
+							</Button>
+						</template>
+					</FormControl>
+				</div>
+			</template>
+			<template #body="{ close }">
+				<div class="rounded-lg bg-surface-white p-3 border w-fit mt-2">
+					<div class="text-xs text-ink-gray-5 mb-1.5">
+						{{ __('Swatches') }}
+					</div>
+					<div class="grid grid-cols-7 gap-2">
+						<div
+							v-for="color in colors"
+							:key="color"
+							class="size-5 rounded-full cursor-pointer"
+							:style="{
+								backgroundColor:
+									theme.backgroundColor[color.toLowerCase()][400],
+							}"
+							@click="
+								(e) => {
+									emit('update:modelValue', color)
+									close()
+									emit('change', color)
+								}
+							"
+						></div>
+					</div>
+				</div>
+			</template>
+		</Popover>
+		<div class="text-sm text-ink-gray-5 mt-2">
+			{{ description }}
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { Button, FormControl, Popover } from 'frappe-ui'
+import { computed } from 'vue'
+import { Palette, X } from 'lucide-vue-next'
+import { theme } from '@/utils/theme'
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const props = defineProps<{
+	modelValue: string
+	label: string
+	description?: string
+}>()
+
+const colors = computed(() => {
+	return [
+		'Red',
+		'Blue',
+		'Green',
+		'Amber',
+		'Purple',
+		'Cyan',
+		'Orange',
+		'Violet',
+		'Pink',
+		'Teal',
+		'Gray',
+		'Yellow',
+	]
+})
+</script>

frontend/src/components/Controls/Link.vue

@@ -12,6 +12,7 @@
 			:variant="attrs.variant"
 			:placeholder="attrs.placeholder"
 			:filterable="false"
+			:readonly="attrs.readonly"
 		>
 			<template #target="{ open, togglePopover }">
 				<slot name="target" v-bind="{ open, togglePopover }" />
@@ -34,7 +35,7 @@
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
-						label="Create New"
+						:label="__('Create New')"
 						@click="attrs.onCreate(value, close)"
 					>
 						<template #prefix>

frontend/src/components/Controls/MultiSelect.vue

@@ -4,78 +4,92 @@
 			{{ label }}
 			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
-		<div class="grid grid-cols-3 gap-1">
-			<Button
-				ref="emails"
-				v-for="value in values"
-				:key="value"
-				:label="value"
-				theme="gray"
-				variant="subtle"
-				class="rounded-md"
-				@keydown.delete.capture.stop="removeLastValue"
-			>
-				<template #suffix>
-					<X @click="removeValue(value)" class="h-4 w-4 stroke-1.5" />
-				</template>
-			</Button>
-			<div class="">
-				<Combobox v-model="selectedValue" nullable>
-					<Popover class="w-full" v-model:show="showOptions">
-						<template #target="{ togglePopover }">
-							<ComboboxInput
-								ref="search"
-								class="search-input form-input w-full focus-visible:!ring-0"
-								type="text"
-								:value="query"
-								@change="
-									(e) => {
-										query = e.target.value
-										showOptions = true
-									}
-								"
-								autocomplete="off"
-								@focus="() => togglePopover()"
-								@keydown.delete.capture.stop="removeLastValue"
-							/>
-						</template>
-						<template #body="{ isOpen }">
-							<div v-show="isOpen">
-								<div
-									class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
+		<div class="w-full">
+			<Combobox v-model="selectedValue" nullable>
+				<Popover class="w-full" v-model:show="showOptions">
+					<template #target="{ togglePopover }">
+						<ComboboxInput
+							ref="search"
+							class="search-input form-input w-full focus-visible:!ring-0"
+							type="text"
+							:value="query"
+							@change="
+								(e) => {
+									query = e.target.value
+									showOptions = true
+								}
+							"
+							autocomplete="off"
+							@focus="() => togglePopover()"
+							@keydown.delete.capture.stop="removeLastValue"
+						/>
+					</template>
+					<template #body="{ isOpen, close }">
+						<div v-show="isOpen">
+							<div
+								class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
+							>
+								<ComboboxOptions
+									class="my-1 min-h-[6rem] max-h-[12rem] overflow-y-auto px-1.5"
+									static
 								>
-									<ComboboxOptions
-										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-										static
+									<ComboboxOption
+										v-for="option in options"
+										:key="option.value"
+										:value="option"
+										v-slot="{ active }"
 									>
-										<ComboboxOption
-											v-for="option in options"
-											:key="option.value"
-											:value="option"
-											v-slot="{ active }"
+										<li
+											:class="[
+												'flex cursor-pointer items-center rounded px-2 py-1 text-base',
+												{ 'bg-surface-gray-2': active },
+											]"
 										>
-											<li
-												:class="[
-													'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-													{ '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-ink-gray-5">
-														{{ option.value }}
-													</div>
+											<div class="flex flex-col gap-1 p-1">
+												<div class="text-base font-medium text-ink-gray-8">
+													{{ option.description }}
 												</div>
-											</li>
-										</ComboboxOption>
-									</ComboboxOptions>
-								</div>
+												<div class="text-sm text-ink-gray-5">
+													{{ option.value }}
+												</div>
+											</div>
+										</li>
+									</ComboboxOption>
+									<div class="h-10"></div>
+									<div
+										v-if="attrs.onCreate"
+										class="absolute bottom-2 left-1 w-[99%] pt-2 bg-white border-t"
+									>
+										<Button
+											variant="ghost"
+											class="w-full !justify-start"
+											:label="__('Create New')"
+											@click="attrs.onCreate(close)"
+										>
+											<template #prefix>
+												<Plus class="h-4 w-4 stroke-1.5" />
+											</template>
+										</Button>
+									</div>
+								</ComboboxOptions>
 							</div>
-						</template>
-					</Popover>
-				</Combobox>
+						</div>
+					</template>
+				</Popover>
+			</Combobox>
+		</div>
+		<div v-if="values.length" class="grid grid-cols-2 gap-2 mt-1">
+			<div
+				v-for="value in values"
+				class="flex items-center justify-between break-all bg-surface-gray-2 text-ink-gray-7 word-wrap p-2 rounded-md mr-2"
+			>
+				<span class="break-all">
+					{{ value }}
+				</span>
+				<X
+					class="size-4 stroke-1.5 cursor-pointer"
+					@click="removeValue(value)"
+				/>
 			</div>
 		</div>
 		<!-- <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" /> -->
@@ -90,9 +104,9 @@ import {
 	ComboboxOption,
 } from '@headlessui/vue'
 import { createResource, Popover, Button } from 'frappe-ui'
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, useAttrs } from 'vue'
 import { watchDebounced } from '@vueuse/core'
-import { X } from 'lucide-vue-next'
+import { X, Plus } from 'lucide-vue-next'
 
 const props = defineProps({
 	label: {
@@ -124,7 +138,7 @@ const props = defineProps({
 })
 
 const values = defineModel()
-
+const attrs = useAttrs()
 const emails = ref([])
 const search = ref(null)
 const error = ref(null)

frontend/src/components/Controls/Uploader.vue

@@ -0,0 +1,76 @@
+<template>
+	<div class="mb-4">
+		<div v-if="label" class="text-xs text-ink-gray-5 mb-2">
+			{{ __(label) }}
+			<span class="text-ink-red-3">*</span>
+		</div>
+		<FileUploader
+			v-if="!modelValue"
+			:fileTypes="['image/*']"
+			:validateFile="validateFile"
+			@success="(file: File) => saveImage(file)"
+		>
+			<template v-slot="{ file, progress, uploading, openFileSelector }">
+				<div class="flex items-center">
+					<div class="border rounded-md w-fit py-7 px-20">
+						<Image class="size-5 stroke-1 text-ink-gray-7" />
+					</div>
+					<div class="ml-4">
+						<Button @click="openFileSelector">
+							{{ __('Upload') }}
+						</Button>
+						<div class="mt-1 text-ink-gray-5 text-sm leading-5">
+							{{ __(description) }}
+						</div>
+					</div>
+				</div>
+			</template>
+		</FileUploader>
+		<div v-else class="mb-4">
+			<div class="flex items-center">
+				<img :src="modelValue" class="border rounded-md w-44 h-auto" />
+				<div class="ml-4">
+					<Button @click="removeImage()">
+						{{ __('Remove') }}
+					</Button>
+					<div
+						v-if="description"
+						class="mt-2 text-ink-gray-5 text-sm leading-5"
+					>
+						{{ __(description) }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { validateFile } from '@/utils'
+import { Button, FileUploader } from 'frappe-ui'
+import { Image } from 'lucide-vue-next'
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: string): void
+}>()
+
+const props = withDefaults(
+	defineProps<{
+		modelValue: string
+		label?: string
+		description?: string
+	}>(),
+	{
+		modelValue: '',
+		label: '',
+		description: '',
+	}
+)
+
+const saveImage = (file: any) => {
+	emit('update:modelValue', file.file_url)
+}
+
+const removeImage = () => {
+	emit('update:modelValue', '')
+}
+</script>

frontend/src/components/CourseCard.vue

@@ -1,37 +1,57 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md border-2 overflow-auto"
+		class="flex flex-col h-full rounded-md overflow-auto text-ink-gray-9"
 		style="min-height: 350px"
 	>
 		<div
-			class="course-image"
-			:class="{ 'default-image': !course.image }"
-			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
+			class="w-[100%] h-[168px] bg-cover bg-center bg-no-repeat border-t border-x rounded-t-md"
+			:style="
+				course.image
+					? { backgroundImage: `url('${encodeURI(course.image)}')` }
+					: {
+							backgroundImage: getGradientColor(),
+							backgroundBlendMode: 'screen',
+					  }
+			"
 		>
-			<div
-				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>
+			<!-- <div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
+				<div
+					v-if="course.featured"
+					class="flex items-center space-x-1 text-xs text-ink-amber-3 bg-surface-white border border-outline-amber-1 px-2 py-0.5 rounded-md mr-1 mb-1"
+				>
+					<Star class="size-3 stroke-2" />
+					<span>
+						{{ __('Featured') }}
+					</span>
+				</div>
 				<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"
+					class="text-xs border bg-surface-white text-ink-gray-9 px-2 py-0.5 rounded-md mb-1 mr-1"
 				>
 					{{ tag }}
 				</div>
-			</div>
-			<div v-if="!course.image" class="image-placeholder">
-				{{ course.title[0] }}
+			</div> -->
+			<div
+				v-if="!course.image"
+				class="flex items-center justify-center text-white flex-1 font-extrabold my-auto px-5 text-center leading-6 h-full"
+				:class="
+					course.title.length > 32
+						? 'text-lg'
+						: course.title.length > 20
+						? 'text-xl'
+						: 'text-2xl'
+				"
+			>
+				{{ course.title }}
 			</div>
 		</div>
-		<div class="flex flex-col flex-auto p-4">
+		<div class="flex flex-col flex-auto p-4 border-x-2 border-b-2 rounded-b-md">
 			<div class="flex items-center justify-between mb-2">
 				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
-						<span class="flex items-center text-ink-gray-7">
+						<span class="flex items-center">
 							<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.lessons }}
 						</span>
@@ -40,38 +60,36 @@
 
 				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
-						<span class="flex items-center text-ink-gray-7">
-							<Users class="h-4 w-4 stroke-1. mr-1" />
-							{{ course.enrollments }}
+						<span class="flex items-center">
+							<Users class="h-4 w-4 stroke-1.5 mr-1" />
+							{{ formatAmount(course.enrollments) }}
 						</span>
 					</Tooltip>
 				</div>
 
 				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
-						<span class="flex items-center text-ink-gray-7">
+						<span class="flex items-center">
 							<Star class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.rating }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.status != 'Approved'">
-					<Badge
-						variant="subtle"
-						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
-						size="sm"
-					>
-						{{ course.status }}
-					</Badge>
-				</div>
+				<Tooltip v-if="course.featured" :text="__('Featured')">
+					<Award class="size-4 stroke-2 text-ink-amber-3" />
+				</Tooltip>
 			</div>
 
-			<div class="text-xl font-semibold leading-6 text-ink-gray-9">
+			<div
+				v-if="course.image"
+				class="font-semibold leading-6"
+				:class="course.title.length > 32 ? 'text-lg' : 'text-xl'"
+			>
 				{{ course.title }}
 			</div>
 
-			<div class="short-introduction text-ink-gray-7 text-sm">
+			<div class="short-introduction text-sm">
 				{{ course.short_introduction }}
 			</div>
 
@@ -80,11 +98,8 @@
 				:progress="course.membership.progress"
 			/>
 
-			<div
-				v-if="user && course.membership"
-				class="text-sm text-ink-gray-7 mt-2 mb-4"
-			>
-				{{ Math.ceil(course.membership.progress) }}% completed
+			<div v-if="user && course.membership" class="text-sm mt-2 mb-4">
+				{{ Math.ceil(course.membership.progress) }}% {{ __('completed') }}
 			</div>
 
 			<div class="flex items-center justify-between mt-auto">
@@ -101,25 +116,30 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>
 
-				<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 class="flex items-center space-x-2">
+					<div v-if="course.paid_course" class="font-semibold">
+						{{ course.price }}
+					</div>
+
+					<Tooltip
+						v-if="course.paid_certificate || course.enable_certification"
+						:text="__('Get Certified')"
+					>
+						<GraduationCap class="size-5 stroke-1.5 text-ink-gray-7" />
+					</Tooltip>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { BookOpen, Users, Star } from 'lucide-vue-next'
-import UserAvatar from '@/components/UserAvatar.vue'
+import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
-import { Badge, Tooltip } from 'frappe-ui'
+import { Tooltip } from 'frappe-ui'
+import { theme } from '@/utils/theme'
+import { formatAmount } from '@/utils'
 import CourseInstructors from '@/components/CourseInstructors.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 
 const { user } = sessionStore()
@@ -130,16 +150,24 @@ const props = defineProps({
 		default: null,
 	},
 })
+
+const getGradientColor = () => {
+	let color = props.course.card_gradient?.toLowerCase() || 'blue'
+	let colorMap = theme.backgroundColor[color]
+	return `linear-gradient(to top right, black, ${colorMap[400]})`
+	/* return `bg-gradient-to-br from-${color}-100 via-${color}-200 to-${color}-400` */
+	/* return `linear-gradient(to bottom right, ${colorMap[100]}, ${colorMap[400]})` */
+	/* return `radial-gradient(ellipse at 80% 20%, black 20%, ${colorMap[500]} 100%)` */
+	/* return `radial-gradient(ellipse at 30% 70%, black 50%, ${colorMap[500]} 100%)` */
+	/* return `radial-gradient(ellipse at 80% 20%, ${colorMap[100]} 0%, ${colorMap[300]} 50%, ${colorMap[500]} 100%)` */
+	/* return `conic-gradient(from 180deg at 50% 50%, ${colorMap[100]} 0%, ${colorMap[200]} 50%, ${colorMap[400]} 100%)` */
+	/* return `linear-gradient(135deg, ${colorMap[100]}, ${colorMap[300]}), linear-gradient(120deg, rgba(255,255,255,0.4) 0%, transparent 60%) ` */
+	/* return `radial-gradient(circle at 20% 30%, ${colorMap[100]} 0%, transparent 40%),
+		radial-gradient(circle at 80% 40%, ${colorMap[200]} 0%, transparent 50%),
+		linear-gradient(135deg, ${colorMap[300]} 0%, ${colorMap[400]} 100%);` */
+}
 </script>
 <style>
-.course-image {
-	height: 168px;
-	width: 100%;
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
 .course-card-pills {
 	background: #ffffff;
 	margin-left: 0;
@@ -153,14 +181,6 @@ const props = defineProps({
 	width: fit-content;
 }
 
-.default-image {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	background-color: theme('colors.green.100');
-	color: theme('colors.green.600');
-}
-
 .avatar-group {
 	display: inline-flex;
 	align-items: center;
@@ -169,14 +189,7 @@ const props = defineProps({
 .avatar-group .avatar {
 	transition: margin 0.1s ease-in-out;
 }
-.image-placeholder {
-	display: flex;
-	align-items: center;
-	flex: 1;
-	font-size: 5rem;
-	color: theme('colors.gray.700');
-	font-weight: 600;
-}
+
 .avatar-group.overlap .avatar + .avatar {
 	margin-left: calc(-8px);
 }

frontend/src/components/CourseCardOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="border-2 rounded-md min-w-80">
+	<div class="border-2 rounded-md min-w-80 max-w-sm">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
@@ -9,88 +9,120 @@
 			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
-			<div v-if="course.data.membership" class="space-y-2">
+			<div v-if="!readOnlyMode">
+				<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">
+							<template #prefix>
+								<BookText class="size-4 stroke-1.5" />
+							</template>
+							<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="{
-						name: 'Lesson',
+						name: 'Billing',
 						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,
+							type: 'course',
+							name: course.data.name,
 						},
 					}"
 				>
 					<Button variant="solid" size="md" class="w-full">
+						<template #prefix>
+							<CreditCard class="size-4 stroke-1.5" />
+						</template>
 						<span>
-							{{ __('Continue Learning') }}
+							{{ __('Buy this course') }}
 						</span>
 					</Button>
 				</router-link>
-				<CertificationLinks :courseName="course.data.name" />
-			</div>
-			<router-link
-				v-else-if="course.data.paid_course"
-				:to="{
-					name: 'Billing',
-					params: {
-						type: 'course',
-						name: course.data.name,
-					},
-				}"
-			>
-				<Button variant="solid" size="md" class="w-full">
+				<Badge
+					v-else-if="course.data.disable_self_learning"
+					theme="blue"
+					size="lg"
+				>
+					{{ __('Contact the Administrator to enroll for this course.') }}
+				</Badge>
+				<Button
+					v-else-if="!user.data?.is_moderator && !is_instructor()"
+					@click="enrollStudent()"
+					variant="solid"
+					class="w-full"
+					size="md"
+				>
+					<template #prefix>
+						<BookText class="size-4 stroke-1.5" />
+					</template>
 					<span>
-						{{ __('Buy this course') }}
+						{{ __('Start Learning') }}
 					</span>
 				</Button>
-			</router-link>
-			<div
-				v-else-if="course.data.disable_self_learning"
-				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>
-			<Button
-				v-else
-				@click="enrollStudent()"
-				variant="solid"
-				class="w-full"
-				size="md"
-			>
-				<span>
-					{{ __('Start Learning') }}
-				</span>
-			</Button>
-			<Button
-				v-if="canGetCertificate"
-				@click="fetchCertificate()"
-				variant="subtle"
-				class="w-full mt-2"
-				size="md"
-			>
-				{{ __('Get Certificate') }}
-			</Button>
-			<router-link
-				v-if="user?.data?.is_moderator || is_instructor()"
-				:to="{
-					name: 'CourseForm',
-					params: {
-						courseName: course.data.name,
-					},
-				}"
-			>
-				<Button variant="subtle" class="w-full mt-2" size="md">
-					<span>
-						{{ __('Edit') }}
-					</span>
+				<Button
+					v-if="canGetCertificate"
+					@click="fetchCertificate()"
+					variant="subtle"
+					class="w-full mt-2"
+					size="md"
+				>
+					<template #prefix>
+						<GraduationCap class="size-4 stroke-1.5" />
+					</template>
+					{{ __('Get Certificate') }}
 				</Button>
-			</router-link>
+				<Button
+					v-if="user.data?.is_moderator || is_instructor()"
+					class="w-full mt-2"
+					size="md"
+					@click="showProgressSummary"
+				>
+					<template #prefix>
+						<TrendingUp class="size-4 stroke-1.5" />
+						{{ __('Progress Summary') }}
+					</template>
+				</Button>
+				<router-link
+					v-if="user?.data?.is_moderator || is_instructor()"
+					:to="{
+						name: 'CourseForm',
+						params: {
+							courseName: course.data.name,
+						},
+					}"
+				>
+					<Button variant="subtle" class="w-full mt-2" size="md">
+						<template #prefix>
+							<Pencil class="size-4 stroke-1.5" />
+						</template>
+						<span>
+							{{ __('Edit') }}
+						</span>
+					</Button>
+				</router-link>
+			</div>
 			<div class="space-y-4">
-				<div class="mt-8 font-medium text-ink-gray-9">
+				<div
+					class="font-medium text-ink-gray-9"
+					:class="{ 'mt-8': !readOnlyMode }"
+				>
 					{{ __('This course has:') }}
 				</div>
 				<div class="flex items-center text-ink-gray-9">
@@ -110,7 +142,7 @@
 					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" />
+					<Star class="size-4 stroke-1.5 fill-yellow-500 text-transparent" />
 					<span class="ml-2">
 						{{ course.data.rating }} {{ __('Rating') }}
 					</span>
@@ -136,18 +168,36 @@
 			</div>
 		</div>
 	</div>
+	<CourseProgressSummary
+		v-if="user.data?.is_moderator || is_instructor()"
+		v-model="showProgressModal"
+		:courseName="course.data.name"
+		:enrollments="course.data.enrollments"
+	/>
 </template>
 <script setup>
-import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
-import { computed, inject } from 'vue'
-import { Button, createResource, Tooltip } from 'frappe-ui'
-import { showToast, formatAmount } from '@/utils/'
+import {
+	BookOpen,
+	BookText,
+	CreditCard,
+	GraduationCap,
+	Pencil,
+	Star,
+	TrendingUp,
+	Users,
+} from 'lucide-vue-next'
+import { computed, inject, ref } from 'vue'
+import { Badge, Button, call, createResource, toast } from 'frappe-ui'
+import { formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 import CertificationLinks from '@/components/CertificationLinks.vue'
+import CourseProgressSummary from '@/components/Modals/CourseProgressSummary.vue'
 
 const router = useRouter()
 const user = inject('$user')
+const showProgressModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	course: {
@@ -165,31 +215,19 @@ const video_link = computed(() => {
 
 function enrollStudent() {
 	if (!user.data) {
-		showToast(
-			__('Please Login'),
-			__('You need to login first to enroll for this course'),
-			'alert-circle'
-		)
+		toast.success(__('You need to login first to enroll for this course'))
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
-		}, 2000)
+		}, 500)
 	} else {
-		const enrollStudentResource = createResource({
-			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
+		call('lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership', {
+			course: props.course.data.name,
 		})
-		enrollStudentResource
-			.submit({
-				course: props.course.data.name,
-			})
 			.then(() => {
 				capture('enrolled_in_course', {
 					course: props.course.data.name,
 				})
-				showToast(
-					__('Success'),
-					__('You have been enrolled in this course'),
-					'check'
-				)
+				toast.success(__('You have been enrolled in this course'))
 				setTimeout(() => {
 					router.push({
 						name: 'Lesson',
@@ -199,7 +237,11 @@ function enrollStudent() {
 							lessonNumber: 1,
 						},
 					})
-				}, 2000)
+				}, 1000)
+			})
+			.catch((err) => {
+				toast.warning(__(err.messages?.[0] || err))
+				console.error(err)
 			})
 	}
 }
@@ -247,4 +289,8 @@ const fetchCertificate = () => {
 		member: user.data?.name,
 	})
 }
+
+const showProgressSummary = () => {
+	showProgressModal.value = true
+}
 </script>

frontend/src/components/CourseInstructors.vue

@@ -6,6 +6,7 @@
 					name: 'Profile',
 					params: { username: instructors[0].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[0].full_name }}
 			</router-link>
@@ -16,15 +17,17 @@
 					name: 'Profile',
 					params: { username: instructors[0].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[0].first_name }}
 			</router-link>
-			and
+			{{ __('and') }}
 			<router-link
 				:to="{
 					name: 'Profile',
 					params: { username: instructors[1].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[1].first_name }}
 			</router-link>
@@ -35,10 +38,11 @@
 					name: 'Profile',
 					params: { username: instructors[0].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[0].first_name }}
 			</router-link>
-			and {{ instructors?.length - 1 }} others
+			{{ __('and') }} {{ instructors?.length - 1 }} {{ __('others') }}
 		</span>
 	</div>
 </template>

frontend/src/components/CourseOutline.vue

@@ -1,140 +1,161 @@
 <template>
-	<div class="text-base">
+	<div class="">
 		<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 text-ink-gray-9">
+			<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()">
 				{{ __('Add Chapter') }}
 			</Button>
-			<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">
-				{{ expandAll ? __("Collapse all chapters") : __("Expand all chapters") }}
-			</span> -->
 		</div>
 		<div
 			:class="{
 				'border-2 rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
-			<Disclosure
-				v-slot="{ open }"
-				v-for="(chapter, index) in outline.data"
-				:key="chapter.name"
-				:defaultOpen="openChapterDetail(chapter.idx)"
+			<Draggable
+				:list="outline.data"
+				:disabled="!allowEdit"
+				item-key="name"
+				group="chapters"
+				@end="updateChapterOrder"
 			>
-				<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-ink-gray-9 stroke-1"
-					/>
-					<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 v-if="!chapter.is_scorm_package">
-					<Draggable
-						v-if="!chapter.is_scorm_package"
-						:list="chapter.lessons"
-						:disabled="!allowEdit"
-						item-key="name"
-						group="items"
-						@end="updateOutline"
-						:data-chapter="chapter.name"
-					>
-						<template #item="{ element: lesson }">
-							<div
-								class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
-								:class="
-									isActiveLesson(lesson.number) ? 'bg-surface-selected' : ''
-								"
+				<template #item="{ element: chapter, index }">
+					<div class="chapter-item">
+						<Disclosure
+							v-slot="{ open }"
+							:key="chapter.name"
+							:defaultOpen="openChapterDetail(chapter.idx)"
+						>
+							<DisclosureButton
+								ref=""
+								class="flex items-center w-full p-2 group"
 							>
-								<router-link
-									:to="{
-										name: allowEdit ? 'LessonForm' : 'Lesson',
-										params: {
-											courseName: courseName,
-											chapterNumber: lesson.number.split('.')[0],
-											lessonNumber: lesson.number.split('.')[1],
-										},
+								<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-ink-gray-9 stroke-1"
+								/>
+								<div
+									class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
+									@click="redirectToChapter(chapter)"
 								>
-									<div class="flex items-center text-sm leading-5 group">
-										<MonitorPlay
-											v-if="lesson.icon === 'icon-youtube'"
-											class="h-4 w-4 stroke-1 mr-2"
+									{{ 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"
 										/>
-										<HelpCircle
-											v-else-if="lesson.icon === 'icon-quiz'"
-											class="h-4 w-4 stroke-1 mr-2"
-										/>
-										<FileText
-											v-else-if="lesson.icon === 'icon-list'"
-											class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
-										/>
-										{{ lesson.title }}
+									</Tooltip>
+									<Tooltip :text="__('Delete Chapter')" placement="bottom">
 										<Trash2
 											v-if="allowEdit"
-											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
+											@click.prevent="trashChapter(chapter.name)"
+											class="h-4 w-4 text-ink-red-3 invisible group-hover:visible"
 										/>
-										<Check
-											v-if="lesson.is_complete"
-											class="h-4 w-4 text-green-700 ml-2"
-										/>
-									</div>
-								</router-link>
-							</div>
-						</template>
-					</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: {
-									courseName: courseName,
-									chapterNumber: chapter.idx,
-									lessonNumber: chapter.lessons.length + 1,
-								},
-							}"
-						>
-							<Button>
-								{{ __('Add Lesson') }}
-							</Button>
-						</router-link>
+									</Tooltip>
+								</div>
+							</DisclosureButton>
+							<DisclosurePanel v-if="!chapter.is_scorm_package">
+								<Draggable
+									v-if="!chapter.is_scorm_package"
+									:list="chapter.lessons"
+									:disabled="!allowEdit"
+									item-key="name"
+									group="items"
+									@end="updateOutline"
+									:data-chapter="chapter.name"
+								>
+									<template #item="{ element: lesson }">
+										<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',
+													params: {
+														courseName: courseName,
+														chapterNumber: lesson.number.split('.')[0],
+														lessonNumber: lesson.number.split('.')[1],
+													},
+												}"
+											>
+												<div class="flex items-center text-sm leading-5 group">
+													<MonitorPlay
+														v-if="lesson.icon === 'icon-youtube'"
+														class="h-4 w-4 stroke-1 mr-2"
+													/>
+													<HelpCircle
+														v-else-if="lesson.icon === 'icon-quiz'"
+														class="h-4 w-4 stroke-1 mr-2"
+													/>
+													<FileText
+														v-else-if="lesson.icon === 'icon-list'"
+														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-ink-red-3 ml-auto invisible group-hover:visible"
+													/>
+													<Check
+														v-if="lesson.is_complete"
+														class="h-4 w-4 text-green-700 ml-2"
+													/>
+												</div>
+											</router-link>
+										</div>
+									</template>
+								</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: {
+												courseName: courseName,
+												chapterNumber: chapter.idx,
+												lessonNumber: chapter.lessons.length + 1,
+											},
+										}"
+									>
+										<Button>
+											{{ __('Add Lesson') }}
+										</Button>
+									</router-link>
+								</div>
+							</DisclosurePanel>
+						</Disclosure>
 					</div>
-				</DisclosurePanel>
-			</Disclosure>
+				</template>
+			</Draggable>
 		</div>
 	</div>
 	<ChapterModal
+		v-if="user.data"
 		v-model="showChapterModal"
 		v-model:outline="outline"
 		:course="courseName"
@@ -142,8 +163,8 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource, Tooltip } from 'frappe-ui'
-import { getCurrentInstance, inject, ref } from 'vue'
+import { Button, createResource, Tooltip, toast } from 'frappe-ui'
+import { getCurrentInstance, inject, ref, watch } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
@@ -157,7 +178,6 @@ import {
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
-import { showToast } from '@/utils'
 
 const route = useRoute()
 const router = useRouter()
@@ -188,18 +208,38 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	lessonProgress: {
+		type: Number,
+		default: 0,
+	},
 })
 
 const outline = createResource({
 	url: 'lms.lms.utils.get_course_outline',
 	cache: ['course_outline', props.courseName],
-	params: {
-		course: props.courseName,
-		progress: props.getProgress,
+	makeParams() {
+		return {
+			course: props.courseName,
+			progress: props.getProgress,
+		}
 	},
 	auto: true,
 })
 
+watch(
+	() => props.courseName,
+	() => {
+		outline.reload()
+	}
+)
+
+watch(
+	() => props.lessonProgress,
+	() => {
+		outline.reload()
+	}
+)
+
 const deleteLesson = createResource({
 	url: 'lms.lms.api.delete_lesson',
 	makeParams(values) {
@@ -210,7 +250,7 @@ const deleteLesson = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		showToast('Success', 'Lesson deleted successfully', 'check')
+		toast.success(__('Lesson deleted successfully'))
 	},
 })
 
@@ -225,7 +265,21 @@ const updateLessonIndex = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Lesson moved successfully', 'check')
+		toast.success(__('Lesson moved successfully'))
+	},
+})
+
+const updateChapterIndex = createResource({
+	url: 'lms.lms.api.update_chapter_index',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+			course: values.course,
+			idx: values.idx,
+		}
+	},
+	onSuccess() {
+		toast.success(__('Chapter moved successfully'))
 	},
 })
 
@@ -274,6 +328,14 @@ const updateOutline = (e) => {
 	})
 }
 
+const updateChapterOrder = (e) => {
+	updateChapterIndex.submit({
+		chapter: e.item.__draggable_context.element.name,
+		course: props.courseName,
+		idx: e.newIndex,
+	})
+}
+
 const deleteChapter = createResource({
 	url: 'lms.lms.api.delete_chapter',
 	makeParams(values) {
@@ -283,7 +345,7 @@ const deleteChapter = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		showToast('Success', 'Chapter deleted successfully', 'check')
+		toast.success(__('Chapter deleted successfully'))
 	},
 })
 
@@ -312,11 +374,7 @@ const redirectToChapter = (chapter) => {
 	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'
-		)
+		toast.success(__('Please enroll for this course to view this lesson'))
 		return
 	}
 

frontend/src/components/CourseReviews.vue

@@ -35,14 +35,14 @@
 						<span class="text-ink-gray-7">
 							{{ review.creation }}
 						</span>
-						<div class="flex mt-2">
+						<div class="flex mt-2 space-x-1">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
+								class="size-4 text-transparent rounded-sm"
 								:class="
 									index <= Math.ceil(review.rating)
-										? 'fill-orange-500'
-										: 'fill-gray-600'
+										? 'fill-yellow-500'
+										: 'fill-gray-300'
 								"
 							/>
 						</div>
@@ -64,7 +64,7 @@
 <script setup>
 import { Star } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
-import { computed, ref, inject } from 'vue'
+import { watch, ref, inject } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ReviewModal from '@/components/Modals/ReviewModal.vue'
 
@@ -101,12 +101,21 @@ const hasReviewed = createResource({
 const reviews = createResource({
 	url: 'lms.lms.utils.get_reviews',
 	cache: ['course_reviews', props.courseName],
-	params: {
-		course: props.courseName,
+	makeParams() {
+		return {
+			course: props.courseName,
+		}
 	},
 	auto: true,
 })
 
+watch(
+	() => props.courseName,
+	() => {
+		reviews.reload()
+	}
+)
+
 const showReviewModal = ref(false)
 
 function openReviewModal() {

frontend/src/components/DesktopLayout.vue

@@ -1,16 +1,10 @@
 <template>
-	<div class="relative flex h-full flex-col">
-		<div class="h-full flex-1">
-			<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"
-				>
-					<AppSidebar />
-				</div>
-				<div class="w-full overflow-auto" id="scrollContainer">
-					<slot />
-				</div>
-			</div>
+	<div class="flex h-screen w-screen">
+		<div class="h-full border-r bg-surface-menu-bar">
+			<AppSidebar />
+		</div>
+		<div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
+			<slot />
 		</div>
 	</div>
 </template>

frontend/src/components/DiscussionReplies.vue

@@ -27,16 +27,18 @@
 						</span>
 					</div>
 					<Dropdown
-						v-if="user.data.name == reply.owner && !reply.editable"
+						v-if="
+							user.data.name == reply.owner && !reply.editable && !readOnlyMode
+						"
 						:options="[
 							{
-								label: 'Edit',
+								label: __('Edit'),
 								onClick() {
 									reply.editable = true
 								},
 							},
 							{
-								label: 'Delete',
+								label: __('Delete'),
 								onClick() {
 									deleteReply(reply)
 								},
@@ -71,7 +73,7 @@
 		</div>
 
 		<TextEditor
-			v-if="renderEditor"
+			v-if="renderEditor && !readOnlyMode"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
@@ -80,7 +82,7 @@
 			: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-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">
+		<div v-if="!readOnlyMode" class="flex justify-between mt-2">
 			<span> </span>
 			<Button @click="postReply()">
 				<span>
@@ -91,12 +93,11 @@
 	</div>
 </template>
 <script setup>
-import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
-import { timeAgo } from '../utils'
+import { createResource, TextEditor, Button, Dropdown, toast } from 'frappe-ui'
+import { timeAgo } from '@/utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted } from 'vue'
-import { createToast } from '../utils'
+import { ref, inject, onMounted, onUnmounted } from 'vue'
 
 const showTopics = defineModel('showTopics')
 const newReply = ref('')
@@ -105,6 +106,7 @@ const user = inject('$user')
 const allUsers = inject('$allUsers')
 const mentionUsers = ref([])
 const renderEditor = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	topic: {
@@ -189,14 +191,7 @@ const postReply = () => {
 				replies.reload()
 			},
 			onError(err) {
-				createToast({
-					title: 'Error',
-					text: err.messages?.[0] || err,
-					icon: 'x',
-					iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-					position: 'top-center',
-					timeout: 10,
-				})
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -256,4 +251,10 @@ const deleteReply = (reply) => {
 		}
 	)
 }
+
+onUnmounted(() => {
+	socket.off('publish_message')
+	socket.off('update_message')
+	socket.off('delete_message')
+})
 </script>