refactor(sidebar): remove external URLs from hardcoded items

External web pages (chatgpt-schoolchild, ai-teachers, my-child)
removed from addEnlightCustomItems() — they should be managed
via the new "More +" sidebar page manager in v2.46.0.

Only Vue-router pages remain hardcoded:
- LeaderBoard (/leaderboard)
- MyPoints (/mypoints)
- Role-based profiles (StudentProfile, SchoolchildrenProfile,
  CourseCreatorProfile, ParentProfile)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.github/workflows/ci.yml

@@ -3,10 +3,15 @@ on:
   push:
     branches:
       - main
+      - develop
+      - main-hotfix
   pull_request: {}
 jobs:
   tests:
+    name: Server Tests
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
     services:
       redis-cache:
         image: redis:alpine
@@ -30,13 +35,13 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - name: setup python
-      uses: actions/setup-python@v2
+      uses: actions/setup-python@v6
       with:
-        python-version: '3.10'
+        python-version: '3.14'
     - name: setup node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v6
       with:
-        node-version: '18'
+        node-version: '24'
         check-latest: true
     - name: setup cache for bench
       uses: actions/cache@v4
@@ -69,6 +74,9 @@ jobs:
     - name: setup requirements
       working-directory: /home/runner/frappe-bench
       run: bench setup requirements --dev
+    - name: block endpoints
+      working-directory: /home/runner/frappe-bench
+      run: bench --site frappe.local set-config block_endpoints 1
     - name: allow tests
       working-directory: /home/runner/frappe-bench
       run: bench --site frappe.local set-config allow_tests true
@@ -77,4 +85,27 @@ jobs:
       run: bench --site frappe.local build
     - name: run tests
       working-directory: /home/runner/frappe-bench
-      run: bench --site frappe.local run-tests --app lms
+      run: bench --site frappe.local run-tests --app lms --coverage
+    - name: Upload coverage data
+      uses: actions/upload-artifact@v4
+      with:
+        path: /home/runner/frappe-bench/sites/coverage.xml
+
+  coverage:
+    name: Coverage Wrap Up
+    needs: tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone
+        uses: actions/checkout@v3
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+
+      - name: Upload coverage data
+        uses: codecov/codecov-action@v5
+        with:
+          name: Server
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true
+          verbose: true

.github/workflows/generate-pot-file.yml

@@ -22,9 +22,14 @@ jobs:
             ref: ${{ matrix.branch }}
 
         - name: Setup Python
-          uses: actions/setup-python@v5
+          uses: actions/setup-python@v6
           with:
-            python-version: "3.12"
+            python-version: "3.14"
+
+        - name: Setup Node.js
+          uses: actions/setup-node@v6
+          with:
+            node-version: 24
 
         - name: Run script to update POT file
           run: |

.github/workflows/linters.yml

@@ -16,9 +16,9 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 200
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 24
           check-latest: true
 
       - name: Check commit titles
@@ -35,9 +35,9 @@ jobs:
       - uses: actions/checkout@v3
 
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v6
         with:
-          python-version: '3.10'
+          python-version: '3.14'
 
       - name: Cache pip
         uses: actions/cache@v4

.github/workflows/make_release_pr.yml

@@ -18,9 +18,9 @@ jobs:
           owner: frappe
           repo: lms
           title: |-
-            "chore: merge 'develop' into 'main'"
+            "chore: merge 'main-hotfix' into 'main'"
           body: "Automated weekly release"
           base: main
-          head: develop
+          head: main-hotfix
         env:
           GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}

.github/workflows/on_release.yml

@@ -15,9 +15,9 @@ jobs:
           fetch-depth: 0
           persist-credentials: false
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 24
       - name: Setup dependencies
         run: |
           npm install @semantic-release/git @semantic-release/exec --no-save

.github/workflows/ui-tests.yml

@@ -4,7 +4,10 @@ on:
   pull_request:
   workflow_dispatch:
   push:
-    branches: [ main ]
+    branches: 
+      - main
+      - develop
+      - main-hotfix
 
 permissions:
   # Do not change this as GITHUB_TOKEN is being used by roulette
@@ -36,9 +39,9 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v6
         with:
-          python-version: '3.11'
+          python-version: '3.14'
 
       - name: Check for valid Python & Merge Conflicts
         run: |
@@ -48,9 +51,9 @@ jobs:
               exit 1
           fi
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version: 24
           check-latest: true
 
       - name: Add to Hosts

.gitignore

@@ -12,4 +12,6 @@ node_modules
 package-lock.json
 lms/public/frontend
 lms/www/lms.html
-frappe-ui
+lms/www/_lms.html
+frappe-ui
+frappe-semgrep-rules

.mergify.yml

@@ -0,0 +1,30 @@
+pull_request_rules:
+    - name: backport to develop
+      conditions:
+          - label="backport develop"
+      actions:
+          backport:
+              branches:
+                  - develop
+              assignees:
+                  - "{{ author }}"
+
+    - name: backport to main-hotfix
+      conditions:
+          - label="backport main-hotfix"
+      actions:
+          backport:
+              branches:
+                  - main-hotfix
+              assignees:
+                  - "{{ author }}"
+
+    - name: backport to main
+      conditions:
+          - label="backport main"
+      actions:
+          backport:
+              branches:
+                  - main
+              assignees:
+                  - "{{ author }}"

.releaserc

@@ -1,5 +1,5 @@
 {
-	"branches": ["develop"],
+	"branches": ["main"],
 	"plugins": [
 		"@semantic-release/commit-analyzer", {
 			"preset": "angular"

README.md

@@ -1,178 +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.
-
-**Note:** To avoid a `404 Page Not Found` error:
-- If hosting on a **public server**, make sure your DNS **A record** points to your server's IP.
-- If hosting **locally**, map your domain to `127.0.0.1` in your `/etc/hosts` file:
-
-## 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>

codecov.yml

@@ -0,0 +1,2 @@
+ignore:
+  - "**/test_helper.py"

cypress/e2e/batch_creation.cy.js

@@ -27,6 +27,10 @@ describe("Batch Creation", () => {
 		cy.get("input[placeholder='Jane']").type(randomName);
 		cy.get("button").contains("Add").click();
 
+		// Open Settings
+		cy.get("span").contains("Learning").click();
+		cy.get("span").contains("Settings").click();
+
 		// Add evaluator
 		cy.get("[data-dismissable-layer]")
 			.find("span")
@@ -48,26 +52,23 @@ describe("Batch Creation", () => {
 
 		// Create a batch
 		cy.get("button").contains("Create").click();
+		cy.get("span").contains("New Batch").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")
+			.contains("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")
@@ -85,13 +86,14 @@ describe("Batch Creation", () => {
 					cy.get("[id^=headlessui-combobox-option-").first().click();
 				});
 		});
-
+		cy.button("Save").click();
+		cy.get("label").contains("Published").click();
 		cy.button("Save").click();
 		cy.wait(1000);
 		let batchName;
 		cy.url().then((url) => {
 			console.log(url);
-			batchName = url.split("/").pop();
+			batchName = url.split("/").pop().split("#")[0];
 			cy.wrap(batchName).as("batchName");
 		});
 		cy.wait(500);
@@ -110,7 +112,7 @@ describe("Batch Creation", () => {
 			.click();
 
 		cy.get("@batchName").then((batchName) => {
-			cy.get(`a[href='/lms/batches/details/${batchName}'`).within(() => {
+			cy.get(`a[href='/lms/batches/${batchName}'`).within(() => {
 				cy.get("div").contains("Test Batch").should("be.visible");
 				cy.get("div")
 					.contains("Test Batch Short Description to test the UI")
@@ -123,14 +125,11 @@ describe("Batch Creation", () => {
 					.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.contains("div:visible", "10 Seats Left").should(
+					"be.visible"
+				);
 			});
-			cy.get(`a[href='/lms/batches/details/${batchName}'`).click();
+			cy.get(`a[href='/lms/batches/${batchName}'`).click();
 		});
 
 		cy.get("div").contains("Test Batch").should("be.visible");
@@ -152,17 +151,22 @@ describe("Batch Creation", () => {
 				"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();
+		cy.get("button:visible").contains("Dashboard").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("button").contains("Enroll").click();
+		cy.get('div[role="dialog"]')
+			.first()
+			.find("div[label='Student']")
+			.find("div")
+			.first()
+			.click();
+		cy.get("input[placeholder='Search']").type(randomEmail);
 		cy.get("div").contains(randomEmail).click();
 		cy.get("button").contains("Submit").click();
 
 		// Verify Seat Count
-		cy.get("span").contains("Details").click();
+		cy.get("button:visible").contains("Overview").click();
 		cy.contains("div:visible", "9 Seats Left").should("be.visible");
 	});
 });

cypress/e2e/course_creation.cy.js

@@ -9,8 +9,8 @@ describe("Course Creation", () => {
 
 		// Create a course
 		cy.get("button").contains("Create").click();
+		cy.get("span").contains("New Course").click();
 		cy.wait(500);
-		cy.url().should("include", "/courses/new/edit");
 
 		cy.get("label").contains("Title").type("Test Course");
 		cy.get("label")
@@ -34,27 +34,13 @@ describe("Course Creation", () => {
 				});
 		});
 
-		cy.get("label")
-			.contains("Preview Video")
-			.type("https://www.youtube.com/embed/-LPmw2Znl2c");
-		cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
-		cy.get("label")
-			.contains("Category")
-			.parent()
-			.within(() => {
-				cy.get("button").click();
-			});
-		cy.get("[id^=headlessui-combobox-option-")
-			.should("be.visible")
-			.first()
-			.click();
-
 		/* Instructor */
 		cy.get("label")
 			.contains("Instructors")
 			.parent()
 			.within(() => {
 				cy.get("input").click().type("frappe");
+				cy.wait(500);
 				cy.get("input")
 					.invoke("attr", "aria-controls")
 					.as("instructor_list_id");
@@ -67,13 +53,29 @@ describe("Course Creation", () => {
 				});
 		});
 
+		cy.button("Save").last().click();
+
+		// Edit Course Details
+		cy.wait(500);
+		cy.get("label")
+			.contains("Preview Video")
+			.type("https://www.youtube.com/embed/-LPmw2Znl2c");
+		cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
+		cy.get("label")
+			.contains("Category")
+			.parent()
+			.within(() => {
+				cy.get("button").click();
+			});
+		cy.get("div").contains("Business").click();
+
 		cy.get("label").contains("Published").click();
 		cy.get("label").contains("Published On").type("2021-01-01");
 		cy.button("Save").click();
 
 		// Add Chapter
 		cy.wait(1000);
-		cy.button("Add Chapter").click();
+		cy.button("Add").click();
 
 		cy.wait(1000);
 		cy.get("[data-dismissable-layer]")

frontend/auto-imports.d.ts

@@ -6,5 +6,7 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-
+  const LucideGithub: typeof import('~icons/lucide/github').default
+  const LucideLinkedin: typeof import('~icons/lucide/linkedin').default
+  const LucideTwitter: typeof import('~icons/lucide/twitter').default
 }

frontend/components.d.ts

@@ -8,14 +8,10 @@ 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']
-    AppHeader: typeof import('./src/components/AppHeader.vue')['default']
-    Apps: typeof import('./src/components/Apps.vue')['default']
-    AppSidebar: typeof import('./src/components/AppSidebar.vue')['default']
+    Apps: typeof import('./src/components/Sidebar/Apps.vue')['default']
+    AppSidebar: typeof import('./src/components/Sidebar/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']
@@ -24,16 +20,8 @@ declare module 'vue' {
     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']
@@ -42,12 +30,18 @@ declare module 'vue' {
     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']
+    CommandPalette: typeof import('./src/components/CommandPalette/CommandPalette.vue')['default']
+    CommandPaletteGroup: typeof import('./src/components/CommandPalette/CommandPaletteGroup.vue')['default']
+    Configuration: typeof import('./src/components/Sidebar/Configuration.vue')['default']
     ContactUsEmail: typeof import('./src/components/ContactUsEmail.vue')['default']
+    CouponDetails: typeof import('./src/components/Settings/Coupons/CouponDetails.vue')['default']
+    CouponItems: typeof import('./src/components/Settings/Coupons/CouponItems.vue')['default']
+    CouponList: typeof import('./src/components/Settings/Coupons/CouponList.vue')['default']
+    Coupons: typeof import('./src/components/Settings/Coupons/Coupons.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']
@@ -73,11 +67,9 @@ declare module 'vue' {
     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']
-    LayoutHeader: typeof import('./src/components/LayoutHeader.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']
@@ -88,6 +80,7 @@ declare module 'vue' {
     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']
+    NumberChartGraph: typeof import('./src/components/NumberChartGraph.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']
@@ -105,18 +98,19 @@ declare module 'vue' {
     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']
+    SidebarLink: typeof import('./src/components/Sidebar/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']
+    TransactionDetails: typeof import('./src/components/Settings/Transactions/TransactionDetails.vue')['default']
+    TransactionList: typeof import('./src/components/Settings/Transactions/TransactionList.vue')['default']
+    Transactions: typeof import('./src/components/Settings/Transactions/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']
+    UserDropdown: typeof import('./src/components/Sidebar/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']

frontend/package.json

@@ -6,55 +6,57 @@
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
-    "build": "vite build --base=/assets/lms/frontend/ && yarn copy-html-entry",
-    "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
+    "build": "vite build --base=/assets/lms/frontend/ && yarn copy-html-entry && yarn copy-colors-json",
+    "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/_lms.html",
+    "copy-colors-json": "cp node_modules/frappe-ui/tailwind/colors.json src/utils/frappe-ui-colors.json"
   },
   "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",
-    "@editorjs/embed": "^2.7.0",
-    "@editorjs/header": "^2.8.1",
-    "@editorjs/inline-code": "^1.5.0",
-    "@editorjs/nested-list": "^1.4.2",
-    "@editorjs/paragraph": "^2.11.3",
-    "@editorjs/simple-image": "^1.6.0",
-    "@editorjs/table": "^2.4.2",
-    "@vueuse/router": "^12.7.0",
-    "ace-builds": "^1.36.2",
-    "apexcharts": "^4.3.0",
-    "chart.js": "^4.4.1",
-    "codemirror": "^6.0.1",
-    "dayjs": "^1.11.6",
-    "dompurify": "^3.2.6",
-    "feather-icons": "^4.28.0",
-    "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.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",
+    "@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",
+    "@editorjs/embed": "2.7.0",
+    "@editorjs/header": "2.8.1",
+    "@editorjs/inline-code": "1.5.0",
+    "@editorjs/nested-list": "1.4.2",
+    "@editorjs/paragraph": "2.11.3",
+    "@editorjs/simple-image": "1.6.0",
+    "@editorjs/table": "2.4.2",
+    "@vueuse/core": "^14.1.0",
+    "ace-builds": "1.36.2",
+    "apexcharts": "4.3.0",
+    "chart.js": "4.4.1",
+    "codemirror": "6.0.1",
+    "dayjs": "1.11.10",
+    "dompurify": "3.2.6",
+    "feather-icons": "4.28.0",
+    "frappe-ui": "^0.1.261",
+    "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",
+    "thememirror": "2.0.1",
+    "typescript": "5.7.2",
+    "vue": "^3.5.27",
+    "vue-chartjs": "5.3.0",
+    "vue-codemirror": "6.1.1",
+    "vue-draggable-next": "2.2.1",
+    "vue-router": "^4.6.4",
+    "vue3-apexcharts": "1.8.0",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.3",
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.5",
-    "vite": "^5.0.11",
-    "vite-plugin-pwa": "^1.0.2"
+     "@vitejs/plugin-vue": "5.0.3",
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.5",
+    "tailwindcss": "^3.4.15",
+    "unplugin-auto-import": "^20.3.0",
+    "vite": "5.0.11",
+    "vite-plugin-pwa": "^1.2.0"
   }
 }

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/src/App.vue

@@ -3,18 +3,17 @@
 		<Layout class="isolate text-base">
 			<router-view />
 		</Layout>
-		<InstallPrompt v-if="isMobile" />
+		<InstallPrompt v-if="isMobile && !settings.data?.disable_pwa" />
 		<Dialogs />
 	</FrappeUIProvider>
 </template>
 <script setup>
 import { FrappeUIProvider } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
-import { usersStore } from '@/stores/user'
+import { useSettings } from '@/stores/settings'
 import { useRouter } from 'vue-router'
-import { posthogSettings } from '@/telemetry'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
 import NoSidebarLayout from './components/NoSidebarLayout.vue'
@@ -23,7 +22,7 @@ import InstallPrompt from './components/InstallPrompt.vue'
 const { isMobile } = useScreenSize()
 const router = useRouter()
 const noSidebar = ref(false)
-const { userResource } = usersStore()
+const { settings } = useSettings()
 
 router.beforeEach((to, from, next) => {
 	if (to.query.fromLesson || to.path === '/persona') {
@@ -47,10 +46,4 @@ const Layout = computed(() => {
 onUnmounted(() => {
 	noSidebar.value = false
 })
-
-watch(userResource, () => {
-	if (userResource.data) {
-		posthogSettings.reload()
-	}
-})
 </script>

frontend/src/assets/Inter/inter.css

@@ -1,152 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.12") format("woff2"),
-       url("Inter-Thin.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light.woff2?v=3.12") format("woff2"),
-       url("Inter-Light.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Regular.woff2?v=3.12") format("woff2"),
-       url("Inter-Regular.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Italic.woff2?v=3.12") format("woff2"),
-       url("Inter-Italic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.12") format("woff2"),
-       url("Inter-Medium.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBold.woff2?v=3.12") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-Bold.woff2?v=3.12") format("woff2"),
-       url("Inter-Bold.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2?v=3.12") format("woff2"),
-       url("Inter-Black.woff?v=3.12") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.12") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.12") format("woff");
-}

frontend/src/components/Annoucements.vue

@@ -1,53 +0,0 @@
-<template>
-	<div v-if="communications.data?.length">
-		<div v-for="comm in communications.data">
-			<div class="mb-8">
-				<div class="flex items-center justify-between mb-2">
-					<div class="flex items-center">
-						<Avatar :label="comm.sender_full_name" size="lg" />
-						<div class="ml-2 text-ink-gray-7">
-							{{ comm.sender_full_name }}
-						</div>
-					</div>
-					<div class="text-sm">
-						{{ timeAgo(comm.communication_date) }}
-					</div>
-				</div>
-				<div
-					class="prose prose-sm bg-surface-menu-bar !min-w-full px-4 py-2 rounded-md"
-					v-html="comm.content"
-				></div>
-			</div>
-		</div>
-	</div>
-	<div v-else class="text-sm italic text-ink-gray-5">
-		{{ __('No announcements') }}
-	</div>
-</template>
-<script setup>
-import { createResource, Avatar } from 'frappe-ui'
-import { timeAgo } from '@/utils'
-
-const props = defineProps({
-	batch: {
-		type: String,
-		required: true,
-	},
-})
-
-const communications = createResource({
-	url: 'lms.lms.api.get_announcements',
-	makeParams(value) {
-		return {
-			batch: props.batch,
-		}
-	},
-	auto: true,
-	cache: ['announcement', props.batch],
-})
-</script>
-<style>
-.prose-sm p {
-	margin: 0 0 0.5rem;
-}
-</style>

frontend/src/components/AssessmentPlugin.vue

@@ -26,28 +26,52 @@
 						v-model="quiz"
 						doctype="LMS Quiz"
 						:label="__('Select a quiz')"
+						placeholder=" "
 						:onCreate="(value, close) => redirectToForm()"
 					/>
-					<Link
-						v-else
-						v-model="assignment"
-						doctype="LMS Assignment"
-						:label="__('Select an assignment')"
-						:onCreate="(value, close) => redirectToForm()"
-					/>
+					<div v-else class="space-y-4">
+						<Link
+							v-if="filterAssignmentsByCourse"
+							v-model="assignment"
+							doctype="LMS Assignment"
+							:filters="{
+								course: route.params.courseName,
+							}"
+							placeholder=" "
+							:label="__('Select an Assignment')"
+							:onCreate="(value, close) => redirectToForm()"
+						/>
+						<Link
+							v-else
+							v-model="assignment"
+							doctype="LMS Assignment"
+							placeholder=" "
+							:label="__('Select an Assignment')"
+							:onCreate="(value, close) => redirectToForm()"
+						/>
+						<FormControl
+							type="checkbox"
+							:label="__('Filter assignments by course')"
+							v-model="filterAssignmentsByCourse"
+						/>
+					</div>
 				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog } from 'frappe-ui'
-import { onMounted, ref, nextTick } from 'vue'
+import { Dialog, FormControl } from 'frappe-ui'
+import { nextTick, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { getLmsRoute } from '@/utils/basePath'
 import Link from '@/components/Controls/Link.vue'
 
 const show = ref(false)
 const quiz = ref(null)
 const assignment = ref(null)
+const filterAssignmentsByCourse = ref(false)
+const route = useRoute()
 
 const props = defineProps({
 	type: {
@@ -71,7 +95,10 @@ const addAssessment = () => {
 }
 
 const redirectToForm = () => {
-	if (props.type == 'quiz') window.open('/lms/quizzes/new', '_blank')
-	else window.open('/lms/assignments/new', '_blank')
+	if (props.type == 'quiz') {
+		window.open(getLmsRoute('quizzes?new=true'), '_blank')
+	} else {
+		window.open(getLmsRoute('assignments?new=true'), '_blank')
+	}
 }
 </script>

frontend/src/components/Assignment.vue

@@ -16,8 +16,8 @@
 					{{ __('Submission by') }} {{ submissionResource.doc?.member_name }}
 				</div>
 			</div>
-			<div class="text-sm text-ink-gray-7 font-medium mb-2">
-				{{ __('Question') }}:
+			<div class="text-ink-gray-9 font-semibold mb-5">
+				{{ __('Assignment Question') }}
 			</div>
 			<div
 				v-html="assignment.data.question"
@@ -25,9 +25,9 @@
 			></div>
 		</div>
 
-		<div class="flex flex-col">
-			<div class="p-5">
-				<div class="flex items-center justify-between mb-4">
+		<div class="flex flex-col overflow-y-auto">
+			<div class="p-5 space-y-5">
+				<div class="flex items-center justify-between">
 					<div class="font-semibold text-ink-gray-9">
 						{{ __('Submission') }}
 					</div>
@@ -42,7 +42,11 @@
 						>
 							{{ submissionResource.doc?.status }}
 						</Badge>
-						<Button variant="solid" @click="submitAssignment()">
+						<Button
+							v-if="canModifyAssignment"
+							variant="solid"
+							@click="submitAssignment()"
+						>
 							{{ __('Save') }}
 						</Button>
 					</div>
@@ -53,7 +57,7 @@
 						!['Pass', 'Fail'].includes(submissionResource.doc?.status) &&
 						submissionResource.doc?.owner == user.data?.name
 					"
-					class="bg-surface-blue-2 text-ink-blue-2 p-3 rounded-md leading-5 text-sm mb-4"
+					class="bg-surface-blue-2 text-ink-blue-2 p-3 rounded-md leading-5 text-sm"
 				>
 					{{ __("You've successfully submitted the assignment.") }}
 					{{
@@ -63,17 +67,24 @@
 					}}
 					{{ __('Feel free to make edits to your submission if needed.') }}
 				</div>
-				<div v-if="showUploader()">
-					<div class="text-xs text-ink-gray-5 mt-1 mb-2">
-						{{ __('Add your assignment as {0}').format(assignment.data.type) }}
+				<div v-if="showUploader()" class="border rounded-lg p-3">
+					<div class="font-semibold mb-2">
+						{{ __('Upload Assignment') }}
+					</div>
+					<div class="text-ink-gray-5 text-sm mt-1 mb-4">
+						{{
+							__('You can only upload {0} files').format(assignment.data.type)
+						}}
 					</div>
 					<FileUploader
-						v-if="!submissionFile"
+						v-if="!attachment"
 						:fileTypes="getType()"
 						:uploadArgs="{
 							private: true,
 						}"
-						:validateFile="validateFile"
+						:validateFile="
+							(file) => validateFile(file, assignment.data.type.toLowerCase())
+						"
 						@success="(file) => saveSubmission(file)"
 					>
 						<template #default="{ uploading, progress, openFileSelector }">
@@ -87,21 +98,20 @@
 						</template>
 					</FileUploader>
 					<div v-else>
-						<div class="flex text-ink-gray-7">
-							<div class="border self-start rounded-md p-2 mr-2">
-								<FileText class="h-5 w-5 stroke-1.5" />
-							</div>
+						<div class="flex items-center text-ink-gray-7">
 							<a
-								:href="submissionFile.file_url"
+								:href="attachment"
 								target="_blank"
-								class="flex flex-col cursor-pointer !no-underline"
+								class="cursor-pointer !no-underline text-sm leading-5"
 							>
-								<span class="text-sm leading-5">
-									{{ submissionFile.file_name }}
-								</span>
-								<span class="text-sm text-ink-gray-5 mt-1">
-									{{ getFileSize(submissionFile.file_size) }}
-								</span>
+								<div class="flex items-center">
+									<div class="border rounded-md p-2 mr-2">
+										<FileText class="h-5 w-5 stroke-1.5" />
+									</div>
+									<span>
+										{{ attachment.split('/').pop() }}
+									</span>
+								</div>
 							</a>
 							<X
 								v-if="canModifyAssignment"
@@ -130,10 +140,11 @@
 						@change="(val) => (answer = val)"
 						:editable="true"
 						:fixedMenu="true"
+						:readonly="!canModifyAssignment"
 						: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]"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
 				</div>
 
@@ -142,13 +153,13 @@
 						user.data?.name == submissionResource.doc?.owner &&
 						submissionResource.doc?.comments
 					"
-					class="mt-8 p-3 bg-surface-blue-2 rounded-md"
+					class="mt-8 p-3 border rounded-lg bg-surface-gray-2"
 				>
-					<div class="text-sm text-ink-gray-5 font-medium mb-2">
-						{{ __('Comments by Evaluator') }}:
+					<div class="text-ink-gray-5 mb-4">
+						{{ __('Comments by Evaluator') }}
 					</div>
 					<div
-						class="leading-5 text-ink-gray-9"
+						class="leading-6 text-ink-gray-9"
 						v-html="submissionResource.doc.comments"
 					></div>
 				</div>
@@ -179,7 +190,10 @@
 							"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+							:uploadArgs="{
+								private: true,
+							}"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
 				</div>
@@ -201,11 +215,11 @@ import {
 } from 'frappe-ui'
 import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { getFileSize } from '@/utils'
 import { useRouter } from 'vue-router'
+import { validateFile } from '@/utils'
 
-const submissionFile = ref(null)
 const answer = ref(null)
+const attachment = ref(null)
 const comments = ref(null)
 const router = useRouter()
 const user = inject('$user')
@@ -255,129 +269,98 @@ const assignment = createResource({
 	},
 })
 
-const newSubmission = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		let doc = {
-			doctype: 'LMS Assignment Submission',
-			assignment: props.assignmentID,
-			member: user.data?.name,
-		}
-		if (showUploader()) {
-			doc.assignment_attachment = submissionFile.value.file_url
-		} else {
-			doc.answer = answer.value
-		}
-		return {
-			doc: doc,
-		}
-	},
-})
-
-const imageResource = createResource({
-	url: 'lms.lms.api.get_file_info',
-	makeParams(values) {
-		return {
-			file_url: values.image,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		submissionFile.value = data
-	},
-})
-
 const submissionResource = createDocumentResource({
 	doctype: 'LMS Assignment Submission',
 	name: props.submissionName,
+	auto: false,
 	onError(err) {
 		toast.error(err.messages?.[0] || err)
 	},
-	auto: false,
-	cache: [user.data?.name, props.assignmentID],
 })
 
 watch(submissionResource, () => {
-	if (submissionResource.doc) {
-		if (submissionResource.doc.assignment_attachment) {
-			imageResource.reload({
-				image: submissionResource.doc.assignment_attachment,
-			})
-		}
-		if (submissionResource.doc.answer) {
-			answer.value = submissionResource.doc.answer
-		}
-		if (submissionResource.doc.comments) {
-			comments.value = submissionResource.doc.comments
-		}
-		if (submissionResource.isDirty) {
-			isDirty.value = true
-		} else if (showUploader() && !submissionFile.value) {
-			isDirty.value = true
-		} else if (!showUploader() && !answer.value) {
-			isDirty.value = true
-		} else {
-			isDirty.value = false
-		}
+	if (!submissionResource.doc) return
+	console.log(submissionResource.doc)
+	if (submissionResource.doc.answer) {
+		answer.value = submissionResource.doc.answer
 	}
-})
-
-watch(submissionFile, () => {
-	if (props.submissionName == 'new' && submissionFile.value) {
-		isDirty.value = true
+	if (submissionResource.doc.assignment_attachment) {
+		attachment.value = submissionResource.doc.assignment_attachment
+	}
+	if (submissionResource.doc.comments) {
+		comments.value = submissionResource.doc.comments
 	}
 })
 
 const submitAssignment = () => {
 	if (props.submissionName != 'new') {
-		let evaluator =
-			submissionResource.doc && submissionResource.doc.owner != user.data?.name
-				? user.data?.name
-				: null
-
-		submissionResource.setValue.submit(
-			{
-				...submissionResource.doc,
-				assignment_attachment: submissionFile.value?.file_url,
-				evaluator: evaluator,
-				comments: comments.value,
-				answer: answer.value,
-			},
-			{
-				onSuccess(data) {
-					toast.success(__('Changes saved successfully'))
-				},
-			}
-		)
+		updateSubmission()
 	} else {
 		addNewSubmission()
 	}
 }
 
 const addNewSubmission = () => {
-	newSubmission.submit(
-		{},
+	let doc = {
+		doctype: 'LMS Assignment Submission',
+		assignment: props.assignmentID,
+		member: user.data?.name,
+	}
+	if (!showUploader()) {
+		doc.answer = answer.value
+	} else {
+		doc.assignment_attachment = attachment.value
+	}
+	call('frappe.client.insert', {
+		doc: doc,
+	})
+		.then((data) => {
+			toast.success(__('Assignment submitted successfully'))
+			if (router.currentRoute.value.name == 'AssignmentSubmission') {
+				router.push({
+					name: 'AssignmentSubmission',
+					params: {
+						assignmentID: props.assignmentID,
+						submissionName: data.name,
+					},
+					query: { fromLesson: router.currentRoute.value.query.fromLesson },
+				})
+			} else {
+				markLessonProgress()
+				router.go()
+			}
+			isDirty.value = false
+			submissionResource.name = data.name
+			submissionResource.reload()
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
+}
+
+const updateSubmission = () => {
+	let evaluator =
+		submissionResource.doc && submissionResource.doc.owner != user.data?.name
+			? user.data?.name
+			: null
+
+	submissionResource.setValue.submit(
+		{
+			...submissionResource.doc,
+			evaluator: evaluator,
+			comments: comments.value,
+			answer: answer.value,
+			assignment_attachment: attachment.value,
+		},
 		{
 			onSuccess(data) {
-				toast.success(__('Assignment submitted successfully'))
-				if (router.currentRoute.value.name == 'AssignmentSubmission') {
-					router.push({
-						name: 'AssignmentSubmission',
-						params: {
-							assignmentID: props.assignmentID,
-							submissionName: data.name,
-						},
-						query: { fromLesson: router.currentRoute.value.query.fromLesson },
-					})
-				} else {
-					markLessonProgress()
-					router.go()
-				}
-				submissionResource.name = data.name
-				submissionResource.reload()
+				isDirty.value = false
+				toast.success(__('Changes saved successfully'))
 			},
 			onError(err) {
 				toast.error(err.messages?.[0] || err)
+				console.error(err)
 			},
 		}
 	)
@@ -385,7 +368,7 @@ const addNewSubmission = () => {
 
 const saveSubmission = (file) => {
 	isDirty.value = true
-	submissionFile.value = file
+	attachment.value = file.file_url
 }
 
 const markLessonProgress = () => {
@@ -419,24 +402,9 @@ const getType = () => {
 	}
 }
 
-const validateFile = (file) => {
-	let type = assignment.data?.type
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	} else if (
-		type == 'Document' &&
-		!['doc', 'docx', 'xml'].includes(extension)
-	) {
-		return 'Only document file is allowed.'
-	} else if (type == 'PDF' && !['pdf'].includes(extension)) {
-		return 'Only PDF file is allowed.'
-	}
-}
-
 const removeSubmission = () => {
 	isDirty.value = true
-	submissionFile.value = null
+	submissionResource.doc.assignment_attachment = ''
 }
 
 const canGradeSubmission = computed(() => {

frontend/src/components/BatchDashboard.vue

@@ -1,26 +0,0 @@
-<template>
-	<div class="space-y-10">
-		<UpcomingEvaluations
-			:batch="batch.data.name"
-			:endDate="batch.data.evaluation_end_date"
-			:courses="batch.data.courses"
-		/>
-		<Assessments :batch="batch.data.name" />
-		<!-- <StudentHeatmap /> -->
-	</div>
-</template>
-<script setup>
-import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
-import Assessments from '@/components/Assessments.vue'
-
-const props = defineProps({
-	batch: {
-		type: Object,
-		default: null,
-	},
-	isStudent: {
-		type: Boolean,
-		default: false,
-	},
-})
-</script>

frontend/src/components/BatchStudents.vue

@@ -1,354 +0,0 @@
-<template>
-	<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-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>
-
-		<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>
-		<div class="flex items-center justify-between mb-4">
-			<div class="text-ink-gray-7 font-medium">
-				{{ __('Students') }}
-			</div>
-			<Button v-if="!readOnlyMode" @click="openStudentModal()">
-				<template #prefix>
-					<Plus class="h-4 w-4" />
-				</template>
-				{{ __('Add') }}
-			</Button>
-		</div>
-
-		<div v-if="students.data?.length">
-			<ListView
-				:columns="getStudentColumns()"
-				:rows="students.data"
-				row-key="name"
-				:options="{
-					showTooltip: false,
-				}"
-			>
-				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
-				>
-					<ListHeaderItem
-						:item="item"
-						v-for="item in getStudentColumns()"
-						:title="item.label"
-					>
-						<template #prefix="{ item }">
-							<FeatherIcon
-								v-if="item.icon"
-								:name="item.icon"
-								class="h-4 w-4 stroke-1.5"
-							/>
-						</template>
-					</ListHeaderItem>
-				</ListHeader>
-				<ListRows>
-					<ListRow
-						:row="row"
-						v-for="row in students.data"
-						class="group cursor-pointer"
-						@click="openStudentProgressModal(row)"
-					>
-						<template #default="{ column, item }">
-							<ListRowItem
-								:item="row[column.key]"
-								:align="column.align"
-								class="text-sm"
-							>
-								<template #prefix>
-									<div v-if="column.key == 'full_name'">
-										<Avatar
-											class="flex items-center"
-											:image="row['user_image']"
-											:label="item"
-											size="sm"
-										/>
-									</div>
-								</template>
-								<div
-									v-if="column.key == 'progress'"
-									class="flex items-center space-x-4 w-full"
-								>
-									<ProgressBar :progress="row[column.key]" size="sm" />
-									<div class="text-xs">{{ row[column.key] }}%</div>
-								</div>
-								<div v-else>
-									{{ row[column.key] }}
-								</div>
-							</ListRowItem>
-						</template>
-					</ListRow>
-				</ListRows>
-				<ListSelectBanner>
-					<template #actions="{ unselectAll, selections }">
-						<div class="flex gap-2">
-							<Button
-								variant="ghost"
-								@click="removeStudents(selections, unselectAll)"
-							>
-								<Trash2 class="h-4 w-4 stroke-1.5" />
-							</Button>
-						</div>
-					</template>
-				</ListSelectBanner>
-			</ListView>
-		</div>
-		<div v-else class="text-sm italic text-ink-gray-5">
-			{{ __('There are no students in this batch.') }}
-		</div>
-	</div>
-
-	<StudentModal
-		:batch="props.batch.data.name"
-		v-model="showStudentModal"
-		v-model:reloadStudents="students"
-		v-model:batchModal="props.batch"
-	/>
-	<BatchStudentProgress
-		:student="selectedStudent"
-		v-model="showStudentProgressModal"
-	/>
-</template>
-<script setup>
-import {
-	Avatar,
-	AxisChart,
-	Button,
-	createResource,
-	FeatherIcon,
-	ListHeader,
-	ListHeaderItem,
-	ListSelectBanner,
-	ListRow,
-	ListRows,
-	ListView,
-	ListRowItem,
-	NumberChart,
-	toast,
-} from 'frappe-ui'
-import {
-	BookOpen,
-	GraduationCap,
-	Plus,
-	ShieldCheck,
-	Trash2,
-	User,
-} from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-import StudentModal from '@/components/Modals/StudentModal.vue'
-import ProgressBar from '@/components/ProgressBar.vue'
-import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue'
-import ApexChart from 'vue3-apexcharts'
-import { theme } from '@/utils/theme'
-
-const showStudentModal = ref(false)
-const showStudentProgressModal = ref(false)
-const selectedStudent = ref(null)
-const chartData = ref(null)
-const showProgressChart = ref(false)
-const assessmentCount = ref(0)
-const readOnlyMode = window.read_only_mode
-
-const props = defineProps({
-	batch: {
-		type: Object,
-		default: null,
-	},
-})
-
-const students = createResource({
-	url: 'lms.lms.utils.get_batch_students',
-	params: {
-		batch: props.batch?.data?.name,
-	},
-	auto: true,
-	onSuccess(data) {
-		chartData.value = getChartData()
-		showProgressChart.value =
-			data.length &&
-			(props.batch?.data?.courses?.length || assessmentCount.value)
-	},
-})
-
-const getStudentColumns = () => {
-	let columns = [
-		{
-			label: 'Full Name',
-			key: 'full_name',
-			width: '20rem',
-			icon: 'user',
-		},
-		{
-			label: 'Progress',
-			key: 'progress',
-			width: '15rem',
-			icon: 'activity',
-		},
-		{
-			label: 'Last Active',
-			key: 'last_active',
-			width: '10rem',
-			align: 'center',
-			icon: 'clock',
-		},
-	]
-
-	return columns
-}
-
-const openStudentModal = () => {
-	showStudentModal.value = true
-}
-
-const openStudentProgressModal = (row) => {
-	showStudentProgressModal.value = true
-	selectedStudent.value = row
-}
-
-const deleteStudents = createResource({
-	url: 'lms.lms.api.delete_documents',
-	makeParams(values) {
-		return {
-			doctype: 'LMS Batch Enrollment',
-			documents: values.students,
-		}
-	},
-})
-
-const removeStudents = (selections, unselectAll) => {
-	deleteStudents.submit(
-		{
-			students: Array.from(selections),
-		},
-		{
-			onSuccess(data) {
-				students.reload()
-				props.batch.reload()
-				toast.success(__('Students deleted successfully'))
-				unselectAll()
-			},
-		}
-	)
-}
-
-const getChartData = () => {
-	let tasks = []
-	let data = []
-
-	students.data.forEach((row) => {
-		tasks = countAssessments(row, tasks)
-		tasks = countCourses(row, tasks)
-	})
-
-	tasks.forEach((task) => {
-		data.push({
-			task: task.label,
-			value: task.value,
-		})
-	})
-	return data
-}
-
-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
-}
-
-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, () => {
-	if (students.data?.length) {
-		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
-	}
-})
-
-const certificationCount = createResource({
-	url: 'frappe.client.get_count',
-	params: {
-		doctype: 'LMS Certificate',
-		filters: {
-			batch_name: props.batch?.data?.name,
-		},
-	},
-	auto: true,
-})
-</script>

frontend/src/components/CertificationLinks.vue

@@ -68,11 +68,12 @@ const props = defineProps({
 
 const certification = createResource({
 	url: 'lms.lms.api.get_certification_details',
-	params: {
-		course: props.courseName,
+	makeParams(values) {
+		return {
+			course: props.courseName,
+		}
 	},
 	auto: user.data ? true : false,
-	cache: ['certificationData', user.data?.name],
 })
 
 const downloadCertificate = () => {

frontend/src/components/CommandPalette/CommandPalette.vue

@@ -0,0 +1,272 @@
+<template>
+	<Dialog v-model="show" :options="{ size: '2xl' }">
+		<template #body>
+			<div class="text-base">
+				<div class="flex items-center space-x-2 pl-4.5 border-b">
+					<Search class="size-4 text-ink-gray-4" />
+					<input
+						ref="inputRef"
+						type="text"
+						placeholder="Search"
+						class="w-full border-none bg-transparent py-3 !pl-2 pr-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
+						@input="onInput"
+						v-model="query"
+						autocomplete="off"
+					/>
+				</div>
+
+				<div class="max-h-96 overflow-auto mb-2">
+					<div v-if="query.length" class="mt-5 space-y-5">
+						<CommandPaletteGroup
+							:list="searchResults"
+							@navigateTo="navigateTo"
+						/>
+					</div>
+
+					<div v-else class="mt-5 space-y-5">
+						<CommandPaletteGroup
+							:list="jumpToOptions"
+							@navigateTo="navigateTo"
+						/>
+					</div>
+				</div>
+
+				<div
+					class="flex items-center space-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
+				>
+					<div class="flex items-center space-x-2">
+						<MoveUp
+							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
+						/>
+						<MoveDown
+							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
+						/>
+						<span>
+							{{ __('to navigate') }}
+						</span>
+					</div>
+					<div class="flex items-center space-x-2">
+						<CornerDownLeft
+							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
+						/>
+						<span>
+							{{ __('to select') }}
+						</span>
+					</div>
+					<div class="flex items-center space-x-2">
+						<span class="bg-surface-gray-2 p-1 rounded-sm"> esc </span>
+						<span>
+							{{ __('to close') }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { createResource, debounce, Dialog } from 'frappe-ui'
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+	BookOpen,
+	Briefcase,
+	CornerDownLeft,
+	FileSearch,
+	MoveUp,
+	MoveDown,
+	Search,
+	Users,
+} from 'lucide-vue-next'
+import CommandPaletteGroup from './CommandPaletteGroup.vue'
+
+const show = defineModel<boolean>({ required: true, default: false })
+const router = useRouter()
+const query = ref<string>('')
+const searchResults = ref<Array<any>>([])
+
+const search = createResource({
+	url: 'lms.command_palette.search_sqlite',
+	makeParams: () => ({
+		query: query.value,
+	}),
+	onSuccess() {
+		generateSearchResults()
+	},
+})
+
+const debouncedSearch = debounce(() => {
+	if (query.value.length > 2) {
+		search.reload()
+	}
+}, 500)
+
+const onInput = () => {
+	debouncedSearch()
+}
+
+const generateSearchResults = () => {
+	search.data?.forEach((type: any) => {
+		let result: { title: string; items: any[] } = { title: '', items: [] }
+		result.title = type.title
+		type.items.forEach((item: any) => {
+			let paramName = item.doctype === 'LMS Course' ? 'courseName' : 'batchName'
+			item.route = {
+				name: item.doctype === 'LMS Course' ? 'CourseDetail' : 'BatchDetail',
+				params: {
+					[paramName]: item.name,
+				},
+			}
+			item.isActive = false
+		})
+		result.items = type.items
+		searchResults.value.push(result)
+	})
+}
+
+const appendSearchPage = () => {
+	let searchPage: { title: string; items: Array<any> } = {
+		title: '',
+		items: [],
+	}
+	searchPage.title = __('Jump to')
+	searchPage.items = [
+		{
+			title: __('Search for ') + `"${query.value}"`,
+			route: {
+				name: 'Search',
+				query: {
+					q: query.value,
+				},
+			},
+			icon: FileSearch,
+			isActive: true,
+		},
+	]
+	searchResults.value = [searchPage]
+}
+
+watch(
+	query,
+	() => {
+		appendSearchPage()
+	},
+	{ immediate: true }
+)
+
+watch(show, () => {
+	if (!show.value) {
+		query.value = ''
+		searchResults.value = []
+	}
+})
+
+onMounted(() => {
+	addKeyboardShortcuts()
+})
+
+const addKeyboardShortcuts = () => {
+	window.addEventListener('keydown', (e: KeyboardEvent) => {
+		if (e.key === 'ArrowUp' && show.value) {
+			e.preventDefault()
+			shortcutForArrowKey(-1)
+		} else if (e.key === 'ArrowDown' && show.value) {
+			shortcutForArrowKey(1)
+		} else if (e.key === 'Enter' && show.value) {
+			shortcutForEnter()
+		} else if (e.key === 'Escape' && show.value) {
+			show.value = false
+		}
+	})
+}
+
+const shortcutForArrowKey = (direction: number) => {
+	let currentList = query.value.length
+		? searchResults.value
+		: jumpToOptions.value
+	let allItems = currentList.flatMap((result: any) => result.items)
+	let indexOfActive = allItems.findIndex((option: any) => option.isActive)
+	let newIndex = indexOfActive + direction
+	if (newIndex < 0) newIndex = allItems.length - 1
+	if (newIndex >= allItems.length) newIndex = 0
+	allItems[indexOfActive].isActive = false
+	allItems[newIndex].isActive = true
+	nextTick(scrollActiveItemIntoView)
+}
+
+const scrollActiveItemIntoView = () => {
+	const activeItem = document.querySelector(
+		'.hover\\:bg-surface-gray-2.bg-surface-gray-2'
+	) as HTMLElement
+	if (activeItem) {
+		activeItem.scrollIntoView({ block: 'nearest' })
+	}
+}
+
+const shortcutForEnter = () => {
+	let currentList = query.value.length
+		? searchResults.value
+		: jumpToOptions.value
+	let allItems = currentList.flatMap((result: any) => result.items)
+	let activeOption = allItems.find((option) => option.isActive)
+	if (activeOption) {
+		navigateTo(activeOption.route)
+	}
+}
+
+const navigateTo = (route: {
+	name: string
+	params?: Record<string, any>
+	query?: Record<string, any>
+}) => {
+	show.value = false
+	query.value = ''
+	router.replace({ name: route.name, params: route.params, query: route.query })
+}
+
+const jumpToOptions = ref([
+	{
+		title: __('Jump to'),
+		items: [
+			{
+				title: 'Advanced Search',
+				icon: Search,
+				route: {
+					name: 'Search',
+				},
+				isActive: true,
+			},
+			{
+				title: 'Courses',
+				icon: BookOpen,
+				route: {
+					name: 'Courses',
+				},
+				isActive: false,
+			},
+			{
+				title: 'Batches',
+				icon: Users,
+				route: {
+					name: 'Batches',
+				},
+				isActive: false,
+			},
+			{
+				title: 'Jobs',
+				icon: Briefcase,
+				route: {
+					name: 'Jobs',
+				},
+				isActive: false,
+			},
+		],
+	},
+])
+</script>
+<style>
+mark {
+	background-color: theme('colors.amber.100');
+	font-weight: 500;
+}
+</style>

frontend/src/components/CommandPalette/CommandPaletteGroup.vue

@@ -0,0 +1,45 @@
+<template>
+	<div v-for="result in list" class="px-2.5 space-y-2">
+		<div class="text-ink-gray-5 px-2">
+			{{ result.title }}
+		</div>
+		<div class="">
+			<div
+				v-for="item in result.items"
+				class="flex items-center justify-between p-2 rounded hover:bg-surface-gray-2 cursor-pointer"
+				:class="{ 'bg-surface-gray-2': item.isActive }"
+				@click="emit('navigateTo', item.route)"
+			>
+				<div class="flex items-center space-x-3">
+					<component
+						v-if="item.icon"
+						:is="item.icon"
+						class="size-4 stroke-1.5 text-ink-gray-6"
+					/>
+					<div v-html="item.title"></div>
+				</div>
+				<div v-if="item.modified" class="text-ink-gray-5">
+					{{ dayjs.unix(item.modified).fromNow(true) }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+const dayjs = inject<any>('$dayjs')
+const emit = defineEmits(['navigateTo'])
+
+const props = defineProps<{
+	list: Array<{
+		title: string
+		items: Array<{
+			title: string
+			icon?: any
+			isActive?: boolean
+			modified?: string
+		}>
+	}>
+}>()
+</script>

frontend/src/components/ContactUsEmail.vue

@@ -48,7 +48,7 @@ const settingsStore = useSettings()
 
 const sendMail = (close: Function) => {
 	call('frappe.core.doctype.communication.email.make', {
-		recipients: settingsStore.contactUsEmail?.data,
+		recipients: settingsStore.settings?.data?.contact_us_email,
 		subject: subject.value,
 		content: message.value,
 		send_email: true,

frontend/src/components/Controls/Autocomplete.vue

@@ -16,13 +16,18 @@
 							<button
 								class="flex w-full items-center justify-between focus:outline-none"
 								:class="inputClasses"
-								@click="() => togglePopover()"
+								@click="
+									() => {
+										showOptions = !showOptions
+										togglePopover()
+									}
+								"
 								:disabled="attrs.readonly"
 							>
-								<div class="flex items-center">
+								<div class="flex items-center w-[90%]">
 									<slot name="prefix" />
 									<span
-										class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+										class="block truncate text-base leading-5"
 										v-if="selectedValue"
 									>
 										{{ displayValue(selectedValue) }}
@@ -99,18 +104,17 @@
 												name="item-label"
 												v-bind="{ active, selected, option }"
 											>
-												<div class="flex flex-col space-y-1 text-ink-gray-8">
-													<div>
-														{{ option.label }}
+												<div class="flex flex-col gap-1 p-1">
+													<div class="text-base font-medium text-ink-gray-8">
+														{{
+															option.value == option.label && option.description
+																? option.description
+																: option.label
+														}}
+													</div>
+													<div class="text-sm text-ink-gray-5">
+														{{ option.value }}
 													</div>
-													<div
-														v-if="
-															option.description &&
-															option.description != option.label
-														"
-														class="text-xs text-ink-gray-7"
-														v-html="option.description"
-													></div>
 												</div>
 											</slot>
 										</li>
@@ -120,7 +124,7 @@
 									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
+									{{ __('No results found') }}
 								</li>
 							</ComboboxOptions>
 							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
@@ -284,7 +288,7 @@ const inputClasses = computed(() => {
 	let variant = props.disabled ? 'disabled' : props.variant
 	let variantClasses = {
 		subtle:
-			'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+			'border border-outline-gray-modals bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		outline:
 			'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		disabled: [

frontend/src/components/Controls/ChildTable.vue

@@ -3,59 +3,67 @@
 		<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 class="overflow-visible border border-outline-gray-modals rounded-md">
+			<div class="overflow-x-auto">
 				<div
-					v-for="(column, index) in columns"
-					:key="index"
-					class="text-sm text-ink-gray-5"
+					class="grid items-center space-x-4 p-2 border-b border-outline-gray-modals"
+					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
-					{{ 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"
+						v-for="(column, index) in columns"
+						:key="index"
+						class="text-sm text-ink-gray-5"
 					>
-						<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"
+						{{ 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 w-full border-none bg-transparent text-ink-gray-8 focus:ring-0 focus:border focus:border-outline-gray-3 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
+						/>
+					</template>
+
+					<div class="relative">
+						<Button
+							variant="ghost"
+							@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
 						>
-							<Trash2 class="size-4 stroke-1.5" />
-							<span>
-								{{ __('Delete') }}
-							</span>
-						</button>
+							<template #icon>
+								<Ellipsis
+									class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+								/>
+							</template>
+						</Button>
+
+						<div
+							v-if="menuOpenIndex === rowIndex"
+							ref="menuRef"
+							class="absolute right-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
+							:class="
+								rowIndex == (rows?.length ?? 0) - 1
+									? 'bottom-full mb-1'
+									: 'top-full mt-1'
+							"
+						>
+							<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>
@@ -73,17 +81,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { nextTick, 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 rows = defineModel<Record<string, string>[]>()
 const menuRef = ref(null)
 const menuOpenIndex = ref<number | null>(null)
 const menuTopPosition = ref<string>('')
+const menuLeftPosition = ref('0px')
+
 const emit = defineEmits<{
-	(e: 'update:modelValue', value: Cell[][]): void
+	(e: 'update:modelValue', value: Record<string, string>[]): void
 }>()
 
 type Cell = {
@@ -93,19 +103,19 @@ type Cell = {
 
 const props = withDefaults(
 	defineProps<{
-		modelValue?: Cell[][]
+		modelValue?: Record<string, string>[]
 		columns?: string[]
 		label?: string
 	}>(),
 	{
-		columns: [],
+		columns: () => [] as string[],
 	}
 )
 
 const columns = ref(props.columns)
 
 watch(rows, () => {
-	if (rows.value?.length < 1) {
+	if (rows.value && rows.value.length < 1) {
 		addRow()
 	}
 })
@@ -119,12 +129,25 @@ const addRow = () => {
 		newRow[column.toLowerCase().split(' ').join('_')] = ''
 	})
 	rows.value.push(newRow)
+	focusNewRowInput()
 	emit('update:modelValue', rows.value)
 }
 
+const focusNewRowInput = () => {
+	nextTick(() => {
+		const rowElements = document.querySelectorAll('.overflow-x-auto .grid')[
+			rows.value!.length
+		]
+		const firstInput = rowElements.querySelector('input')
+		if (firstInput) {
+			;(firstInput as HTMLInputElement).focus()
+		}
+	})
+}
+
 const deleteRow = (index: number) => {
-	rows.value.splice(index, 1)
-	emit('update:modelValue', rows.value)
+	rows.value?.splice(index, 1)
+	emit('update:modelValue', rows.value ?? [])
 }
 
 const getGridTemplateColumns = () => {
@@ -133,7 +156,6 @@ const getGridTemplateColumns = () => {
 
 const toggleMenu = (index: number, event: MouseEvent) => {
 	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
-	menuTopPosition.value = `${event.clientY + 10}px`
 }
 
 onClickOutside(menuRef, () => {

frontend/src/components/Controls/Code.vue

@@ -107,7 +107,7 @@ async function setLanguageExtension() {
 	if (!languageImport) return
 
 	const module = await languageImport()
-	languageExtension.value = (module as any)[props.language]()
+	languageExtension.value = (module as any)[props.language]?.()
 
 	if (props.completions) {
 		const languageData = (module as any)[`${props.language}Language`]

frontend/src/components/Controls/ColorSwatches.vue

@@ -21,8 +21,10 @@
 								:style="
 									modelValue
 										? {
-												backgroundColor:
-													theme.backgroundColor[modelValue.toLowerCase()][400],
+												backgroundColor: getColor(
+													modelValue.toLowerCase(),
+													400
+												),
 										  }
 										: {}
 								"
@@ -55,8 +57,7 @@
 							:key="color"
 							class="size-5 rounded-full cursor-pointer"
 							:style="{
-								backgroundColor:
-									theme.backgroundColor[color.toLowerCase()][400],
+								backgroundColor: getColor(color.toLowerCase(), 400),
 							}"
 							@click="
 								(e) => {
@@ -79,7 +80,7 @@
 import { Button, FormControl, Popover } from 'frappe-ui'
 import { computed } from 'vue'
 import { Palette, X } from 'lucide-vue-next'
-import { theme } from '@/utils/theme'
+import { getColor } from '@/utils'
 
 const emit = defineEmits(['update:modelValue', 'change'])
 

frontend/src/components/Controls/IconPicker.vue

@@ -20,7 +20,7 @@
 							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
 							:is="icons.Folder"
 						/>
-						<span v-if="selectedIcon">
+						<span v-if="selectedIcon" class="text-ink-gray-7">
 							{{ selectedIcon }}
 						</span>
 						<span v-else class="text-ink-gray-5">

frontend/src/components/Controls/Link.vue

@@ -11,7 +11,6 @@
 			:size="attrs.size || 'sm'"
 			:variant="attrs.variant"
 			:placeholder="attrs.placeholder"
-			:filterable="false"
 			:readonly="attrs.readonly"
 		>
 			<template #target="{ open, togglePopover }">
@@ -67,6 +66,7 @@ import { watchDebounced } from '@vueuse/core'
 import { createResource, Button } from 'frappe-ui'
 import { Plus, X } from 'lucide-vue-next'
 import { useAttrs, computed, ref } from 'vue'
+import { useSettings } from '@/stores/settings'
 
 const props = defineProps({
 	doctype: {
@@ -96,13 +96,14 @@ const value = computed({
 	set: (val) => {
 		return (
 			val?.value &&
-			emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
+			emit(valuePropPassed.value ? 'change' : 'update:modelValue', val.value)
 		)
 	},
 })
 
 const autocomplete = ref(null)
 const text = ref('')
+const settingsStore = useSettings()
 
 watchDebounced(
 	() => autocomplete.value?.query,
@@ -121,6 +122,16 @@ watchDebounced(
 	{ debounce: 300, immediate: true }
 )
 
+watchDebounced(
+	() => settingsStore.isSettingsOpen,
+	(isOpen, wasOpen) => {
+		if (wasOpen && !isOpen) {
+			reload('')
+		}
+	},
+	{ debounce: 200 }
+)
+
 const options = createResource({
 	url: 'frappe.desk.search.search_link',
 	cache: [props.doctype, text.value],

frontend/src/components/Controls/MultiSelect.vue

@@ -1,160 +1,145 @@
 <template>
 	<div>
-		<label class="block mb-1" :class="labelClasses" v-if="label">
+		<label v-if="label" class="block mb-1" :class="labelClasses">
 			{{ label }}
-			<span class="text-ink-red-3" v-if="required">*</span>
+			<span v-if="required" class="text-ink-red-3">*</span>
 		</label>
-		<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"
+		<Combobox v-model="selectedValue" nullable v-slot="{ open }">
+			<div class="relative w-full">
+				<ComboboxInput
+					ref="search"
+					class="form-input w-full focus-visible:!ring-0"
+					type="text"
+					@change="
+						(e) => {
+							query = e.target.value
+						}
+					"
+					autocomplete="off"
+					@focus="onFocus"
+				/>
+				<ComboboxButton ref="trigger" class="hidden" />
+				<ComboboxOptions
+					v-show="open"
+					static
+					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal border-2 border-outline-gray-modals max-h-[13rem] flex flex-col"
+				>
+					<div
+						class="flex-1 my-1 overflow-y-auto px-1.5"
+						:class="options.length ? 'min-h-[6rem]' : 'min-h-[3.8rem]'"
+					>
+						<template v-if="options.length">
+							<ComboboxOption
+								v-for="option in options"
+								:key="option.value"
+								:value="option"
+								v-slot="{ active }"
 							>
-								<ComboboxOptions
-									class="my-1 min-h-[6rem] max-h-[12rem] overflow-y-auto px-1.5"
-									static
+								<li
+									:class="[
+										'flex cursor-pointer items-center rounded px-2 py-1 text-base',
+										{ 'bg-surface-gray-2': 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 },
-											]"
-										>
-											<div class="flex flex-col gap-1 p-1">
-												<div class="text-base font-medium text-ink-gray-8">
-													{{ option.description }}
-												</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 class="flex flex-col gap-1 p-1">
+										<div class="text-base font-medium text-ink-gray-8">
+											{{
+												option.value === option.label
+													? option.description
+													: option.label
+											}}
+										</div>
+										<div class="text-sm text-ink-gray-5">
+											{{ option.value }}
+										</div>
 									</div>
-								</ComboboxOptions>
-							</div>
+								</li>
+							</ComboboxOption>
+						</template>
+
+						<div v-else class="text-ink-gray-7 px-4 py-2">
+							{{ __('No results found') }}
 						</div>
-					</template>
-				</Popover>
-			</Combobox>
-		</div>
-		<div v-if="values.length" class="grid grid-cols-2 gap-2 mt-1">
+					</div>
+
+					<div
+						v-if="attrs.onCreate"
+						class="p-1 bg-surface-white border-t rounded-b-lg"
+					>
+						<Button
+							variant="ghost"
+							class="w-full !justify-start"
+							:label="__('Create New')"
+							@click="attrs.onCreate()"
+						>
+							<template #prefix>
+								<Plus class="h-4 w-4 stroke-1.5" />
+							</template>
+						</Button>
+					</div>
+				</ComboboxOptions>
+			</div>
+		</Combobox>
+
+		<!-- Selected values -->
+		<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"
+				:key="value"
+				class="flex items-center justify-between break-all bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md"
 			>
-				<span class="break-all">
-					{{ value }}
-				</span>
+				<span>{{ 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" /> -->
 	</div>
 </template>
 
 <script setup>
 import {
 	Combobox,
+	ComboboxButton,
 	ComboboxInput,
 	ComboboxOptions,
 	ComboboxOption,
 } from '@headlessui/vue'
-import { createResource, Popover, Button } from 'frappe-ui'
-import { ref, computed, nextTick, useAttrs } from 'vue'
+import { createResource, Button } from 'frappe-ui'
+import { ref, computed, useAttrs, watch } from 'vue'
 import { watchDebounced } from '@vueuse/core'
 import { X, Plus } from 'lucide-vue-next'
 
 const props = defineProps({
-	label: {
-		type: String,
-	},
-	size: {
-		type: String,
-		default: 'sm',
-	},
-	doctype: {
-		type: String,
-		required: true,
-	},
-	filters: {
-		type: Object,
-		default: () => ({}),
-	},
-	validate: {
-		type: Function,
-		default: null,
-	},
+	label: String,
+	size: { type: String, default: 'sm' },
+	doctype: { type: String, required: true },
+	filters: { type: Object, default: () => ({}) },
+	validate: Function,
 	errorMessage: {
 		type: Function,
 		default: (value) => `${value} is an Invalid value`,
 	},
-	required: {
-		type: Boolean,
-	},
+	required: Boolean,
 })
 
 const values = defineModel()
 const attrs = useAttrs()
-const emails = ref([])
-const search = ref(null)
-const error = ref(null)
+const trigger = ref(null)
 const query = ref('')
 const text = ref('')
-const showOptions = ref(false)
+const selectedValue = ref(null)
+const error = ref(null)
 
-const selectedValue = computed({
-	get: () => query.value || '',
-	set: (val) => {
-		query.value = ''
-		if (val) {
-			showOptions.value = false
-		}
-		val?.value && addValue(val.value)
-	},
+const emit = defineEmits(['update:modelValue'])
+
+watch(selectedValue, (val) => {
+	if (!val?.value) return
+	query.value = ''
+	addValue(val.value)
+	selectedValue.value = null
+	emit('update:modelValue', values.value)
 })
 
 watchDebounced(
@@ -171,7 +156,6 @@ watchDebounced(
 const filterOptions = createResource({
 	url: 'frappe.desk.search.search_link',
 	method: 'POST',
-	cache: [text.value, props.doctype],
 	auto: true,
 	params: {
 		txt: text.value,
@@ -180,7 +164,8 @@ const filterOptions = createResource({
 })
 
 const options = computed(() => {
-	return filterOptions.data || []
+	const allOptions = filterOptions.data || []
+	return allOptions.filter((option) => !values.value?.includes(option.value))
 })
 
 function reload(val) {
@@ -193,70 +178,46 @@ function reload(val) {
 	filterOptions.reload()
 }
 
-const addValue = (value) => {
+function onFocus() {
+	if (!filterOptions.data?.length) {
+		reload('')
+	}
+	trigger.value?.$el.click()
+}
+
+function addValue(value) {
 	error.value = null
-	if (value) {
-		const splitValues = value.split(',')
-		splitValues.forEach((value) => {
-			value = value.trim()
-			if (value) {
-				// check if value is not already in the values array
-				if (!values.value?.includes(value)) {
-					// check if value is valid
-					if (value && props.validate && !props.validate(value)) {
-						error.value = props.errorMessage(value)
-						return
-					}
-					// add value to values array
-					if (!values.value) {
-						values.value = [value]
-					} else {
-						values.value.push(value)
-					}
-					value = value.replace(value, '')
-				}
-			}
-		})
-		!error.value && (value = '')
+
+	if (!value) return
+
+	const splitValues = value.split(',')
+
+	splitValues.forEach((val) => {
+		val = val.trim()
+
+		if (!val) return
+		if (values.value?.includes(val)) return
+
+		if (props.validate && !props.validate(val)) {
+			error.value = props.errorMessage(val)
+			return
+		}
+
+		if (!values.value) values.value = [val]
+		else values.value.push(val)
+	})
+}
+
+function removeValue(value) {
+	let indexToRemove = values.value.indexOf(value)
+	if (indexToRemove > -1) {
+		values.value.splice(indexToRemove, 1)
 	}
+	emit('update:modelValue', values.value)
 }
 
-const removeValue = (value) => {
-	values.value = values.value.filter((v) => v !== value)
-}
-
-const removeLastValue = () => {
-	if (query.value) return
-
-	let emailRef = emails.value[emails.value.length - 1]?.$el
-	if (document.activeElement === emailRef) {
-		values.value.pop()
-		nextTick(() => {
-			if (values.value.length) {
-				emailRef = emails.value[emails.value.length - 1].$el
-				emailRef?.focus()
-			} else {
-				setFocus()
-			}
-		})
-	} else {
-		emailRef?.focus()
-	}
-}
-
-function setFocus() {
-	search.value.$el.focus()
-}
-
-defineExpose({ setFocus })
-
-const labelClasses = computed(() => {
-	return [
-		{
-			sm: 'text-xs',
-			md: 'text-base',
-		}[props.size || 'sm'],
-		'text-ink-gray-5',
-	]
-})
+const labelClasses = computed(() => [
+	{ sm: 'text-xs', md: 'text-base' }[props.size || 'sm'],
+	'text-ink-gray-5',
+])
 </script>

frontend/src/components/Controls/Uploader.vue

@@ -2,18 +2,21 @@
 	<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>
+			<span v-if="required" class="text-ink-red-3">*</span>
 		</div>
 		<FileUploader
 			v-if="!modelValue"
-			:fileTypes="['image/*']"
-			:validateFile="validateFile"
-			@success="(file: File) => saveImage(file)"
+			:fileTypes="[fileType]"
+			:validateFile="(file: File) => validateFile(file, true, type)"
+			@success="(file: File) => saveFile(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" />
+						<component
+							:is="props.type === 'image' ? Image : Video"
+							class="size-5 stroke-1 text-ink-gray-7"
+						/>
 					</div>
 					<div class="ml-4">
 						<Button @click="openFileSelector">
@@ -28,7 +31,20 @@
 		</FileUploader>
 		<div v-else class="mb-4">
 			<div class="flex items-center">
-				<img :src="modelValue" class="border rounded-md w-44 h-auto" />
+				<img
+					v-if="type == 'image'"
+					:src="modelValue"
+					:class="[
+						'border object-cover',
+						shape === 'circle'
+							? 'w-20 h-20 rounded-full'
+							: 'w-44 h-auto min-h-20 max-h-32 rounded-md',
+					]"
+				/>
+				<video v-else controls class="border rounded-md w-44 h-auto">
+					<source :src="modelValue" />
+					{{ __('Your browser does not support the video tag.') }}
+				</video>
 				<div class="ml-4">
 					<Button @click="removeImage()">
 						{{ __('Remove') }}
@@ -47,7 +63,8 @@
 <script setup lang="ts">
 import { validateFile } from '@/utils'
 import { Button, FileUploader } from 'frappe-ui'
-import { Image } from 'lucide-vue-next'
+import { Image, Video } from 'lucide-vue-next'
+import { computed } from 'vue'
 
 const emit = defineEmits<{
 	(e: 'update:modelValue', value: string): void
@@ -55,18 +72,28 @@ const emit = defineEmits<{
 
 const props = withDefaults(
 	defineProps<{
-		modelValue: string
+		modelValue: string | null
 		label?: string
 		description?: string
+		type?: 'image' | 'video'
+		required?: boolean
+		shape?: 'square' | 'circle'
 	}>(),
 	{
 		modelValue: '',
 		label: '',
 		description: '',
+		type: 'image',
+		required: true,
+		shape: 'square',
 	}
 )
 
-const saveImage = (file: any) => {
+const fileType = computed(() => {
+	return props.type === 'image' ? 'image/*' : 'video/*'
+})
+
+const saveFile = (file: any) => {
 	emit('update:modelValue', file.file_url)
 }
 

frontend/src/components/CourseCard.vue

@@ -136,11 +136,11 @@
 import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 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'
+import colors from '@/utils/frappe-ui-colors.json'
 
 const { user } = sessionStore()
 
@@ -152,19 +152,10 @@ const props = defineProps({
 })
 
 const getGradientColor = () => {
+	let theme = localStorage.getItem('theme') == 'dark' ? 'darkMode' : 'lightMode'
 	let color = props.course.card_gradient?.toLowerCase() || 'blue'
-	let colorMap = theme.backgroundColor[color]
+	let colorMap = colors[theme][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>

frontend/src/components/CourseCardOverlay.vue

@@ -37,7 +37,7 @@
 					<CertificationLinks :courseName="course.data.name" class="w-full" />
 				</div>
 				<router-link
-					v-else-if="course.data.paid_course"
+					v-else-if="course.data.paid_course && !isAdmin"
 					:to="{
 						name: 'Billing',
 						params: {
@@ -56,14 +56,15 @@
 					</Button>
 				</router-link>
 				<Badge
-					v-else-if="course.data.disable_self_learning"
+					v-else-if="course.data.disable_self_learning && !isAdmin"
 					theme="blue"
 					size="lg"
+					class="mb-4"
 				>
-					{{ __('Contact the Administrator to enroll for this course.') }}
+					{{ __('Contact the Administrator to enroll for this course') }}
 				</Badge>
 				<Button
-					v-else-if="!user.data?.is_moderator && !is_instructor()"
+					v-else-if="!isAdmin"
 					@click="enrollStudent()"
 					variant="solid"
 					class="w-full"
@@ -88,35 +89,6 @@
 					</template>
 					{{ __('Get Certificate') }}
 				</Button>
-				<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
@@ -168,12 +140,6 @@
 			</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 {
@@ -189,15 +155,14 @@ import {
 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'
+import { useTelemetry } from 'frappe-ui/frappe'
 
 const router = useRouter()
 const user = inject('$user')
-const showProgressModal = ref(false)
 const readOnlyMode = window.read_only_mode
+const { capture } = useTelemetry()
 
 const props = defineProps({
 	course: {
@@ -215,13 +180,17 @@ const video_link = computed(() => {
 
 function enrollStudent() {
 	if (!user.data) {
-		toast.success(__('You need to login first to enroll for this course'))
+		toast.warning(__('You need to login first to enroll for this course'))
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
 		}, 500)
 	} else {
-		call('lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership', {
-			course: props.course.data.name,
+		call('frappe.client.insert', {
+			doc: {
+				doctype: 'LMS Enrollment',
+				course: props.course.data.name,
+				member: user.data.name,
+			},
 		})
 			.then(() => {
 				capture('enrolled_in_course', {
@@ -290,7 +259,7 @@ const fetchCertificate = () => {
 	})
 }
 
-const showProgressSummary = () => {
-	showProgressModal.value = true
-}
+const isAdmin = computed(() => {
+	return user.data?.is_moderator || is_instructor()
+})
 </script>

frontend/src/components/CourseOutline.vue

@@ -15,7 +15,10 @@
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
-				{{ __('Add Chapter') }}
+				<template #prefix>
+					<Plus class="size-4 stroke-1.5" />
+				</template>
+				{{ __('Add') }}
 			</Button>
 		</div>
 		<div
@@ -95,8 +98,8 @@
 													name: allowEdit ? 'LessonForm' : 'Lesson',
 													params: {
 														courseName: courseName,
-														chapterNumber: lesson.number.split('.')[0],
-														lessonNumber: lesson.number.split('.')[1],
+														chapterNumber: lesson.number.split('-')[0],
+														lessonNumber: lesson.number.split('-')[1],
 													},
 												}"
 											>
@@ -109,6 +112,14 @@
 														v-else-if="lesson.icon === 'icon-quiz'"
 														class="h-4 w-4 stroke-1 mr-2"
 													/>
+													<NotebookPen
+														v-else-if="lesson.icon === 'icon-assignment'"
+														class="h-4 w-4 stroke-1 mr-2"
+													/>
+													<SquareCode
+														v-else-if="lesson.icon === 'icon-code'"
+														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"
@@ -174,7 +185,11 @@ import {
 	FilePenLine,
 	HelpCircle,
 	MonitorPlay,
+	NotebookPen,
+	Plus,
+	SquareCode,
 	Trash2,
+	Notebook,
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
@@ -389,8 +404,8 @@ const redirectToChapter = (chapter) => {
 
 const isActiveLesson = (lessonNumber) => {
 	return (
-		route.params.chapterNumber == lessonNumber.split('.')[0] &&
-		route.params.lessonNumber == lessonNumber.split('.')[1]
+		route.params.chapterNumber == lessonNumber.split('-')[0] &&
+		route.params.lessonNumber == lessonNumber.split('-')[1]
 	)
 }
 </script>

frontend/src/components/CourseReviews.vue

@@ -12,7 +12,7 @@
 		</div>
 		<div class="grid gap-8 mt-10">
 			<div v-for="(review, index) in reviews.data">
-				<div class="flex items-center">
+				<div class="flex">
 					<router-link
 						:to="{
 							name: 'Profile',
@@ -46,11 +46,11 @@
 								"
 							/>
 						</div>
+						<div v-if="review.review" class="mt-4 leading-5 text-ink-gray-7">
+							{{ review.review }}
+						</div>
 					</div>
 				</div>
-				<div v-if="review.review" class="mt-4 leading-5 text-ink-gray-7">
-					{{ review.review }}
-				</div>
 			</div>
 		</div>
 	</div>
@@ -80,7 +80,7 @@ const props = defineProps({
 		required: true,
 	},
 	membership: {
-		type: Object,
+		type: Object || null,
 		required: false,
 	},
 })

frontend/src/components/DesktopLayout.vue

@@ -9,5 +9,5 @@
 	</div>
 </template>
 <script setup>
-import AppSidebar from './AppSidebar.vue'
+import AppSidebar from '@/components/Sidebar/AppSidebar.vue'
 </script>

frontend/src/components/DiscussionReplies.vue

@@ -93,11 +93,19 @@
 	</div>
 </template>
 <script setup>
-import { createResource, TextEditor, Button, Dropdown, toast } from 'frappe-ui'
+import {
+	call,
+	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, onUnmounted } from 'vue'
+import { useTelemetry } from 'frappe-ui/frappe'
 
 const showTopics = defineModel('showTopics')
 const newReply = ref('')
@@ -107,6 +115,7 @@ const allUsers = inject('$allUsers')
 const mentionUsers = ref([])
 const renderEditor = ref(false)
 const readOnlyMode = window.read_only_mode
+const { capture } = useTelemetry()
 
 const props = defineProps({
 	topic: {
@@ -143,19 +152,6 @@ const replies = createResource({
 	auto: true,
 })
 
-const newReplyResource = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'Discussion Reply',
-				reply: newReply.value,
-				topic: props.topic.name,
-			},
-		}
-	},
-})
-
 const fetchMentionUsers = () => {
 	if (user.data?.is_student) {
 		renderEditor.value = true
@@ -178,78 +174,61 @@ const fetchMentionUsers = () => {
 }
 
 const postReply = () => {
-	newReplyResource.submit(
-		{},
-		{
-			validate() {
-				if (!newReply.value) {
-					return 'Reply cannot be empty'
-				}
-			},
-			onSuccess() {
-				newReply.value = ''
-				replies.reload()
-			},
-			onError(err) {
-				toast.error(err.messages?.[0] || err)
-			},
-		}
-	)
-}
-
-const editReplyResource = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		return {
+	if (!newReply.value) {
+		toast.error(__('Reply cannot be empty.'))
+		return
+	}
+	call('frappe.client.insert', {
+		doc: {
 			doctype: 'Discussion Reply',
-			name: values.name,
-			fieldname: 'reply',
-			value: values.reply,
-		}
-	},
-})
+			reply: newReply.value,
+			topic: props.topic.name,
+		},
+	})
+		.then((data) => {
+			newReply.value = ''
+			replies.reload()
+			capture('discussion_reply_created')
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
+}
 
 const postEdited = (reply) => {
-	editReplyResource.submit(
-		{
-			name: reply.name,
-			reply: reply.reply,
-		},
-		{
-			validate() {
-				if (!reply.reply) {
-					return 'Reply cannot be empty'
-				}
-			},
-			onSuccess() {
-				reply.editable = false
-				replies.reload()
-			},
-		}
-	)
+	if (!reply.reply) {
+		toast.error(__('Reply cannot be empty.'))
+		return
+	}
+	call('frappe.client.set_value', {
+		doctype: 'Discussion Reply',
+		name: reply.name,
+		fieldname: 'reply',
+		value: reply.reply,
+	})
+		.then(() => {
+			reply.editable = false
+			replies.reload()
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
 }
 
-const deleteReplyResource = createResource({
-	url: 'frappe.client.delete',
-	makeParams(values) {
-		return {
-			doctype: 'Discussion Reply',
-			name: values.name,
-		}
-	},
-})
-
 const deleteReply = (reply) => {
-	deleteReplyResource.submit(
-		{
-			name: reply.name,
-		},
-		{
-			onSuccess() {
-				replies.reload()
-			},
-		}
-	)
+	call('frappe.client.delete', {
+		doctype: 'Discussion Reply',
+		name: reply.name,
+	})
+		.then(() => {
+			replies.reload()
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
 }
 
 onUnmounted(() => {

frontend/src/components/InstallPrompt.vue

@@ -20,10 +20,10 @@
 		</template>
 	</Dialog>
 
-	<Popover :show="iosInstallMessage" placement="top">
+	<Popover :show="iosInstallMessage" placement="top-start">
 		<template #body>
 			<div
-				class="fixed bottom-[4rem] left-1/2 -translate-x-1/2 z-20 w-[90%] flex flex-col gap-3 rounded bg-blue-100 py-5 drop-shadow-xl"
+				class="fixed top-[20rem] translate-x-1/3 z-20 flex flex-col gap-3 rounded bg-surface-white py-5 drop-shadow-xl"
 			>
 				<div
 					class="mb-1 flex flex-row items-center justify-between px-3 text-center"
@@ -41,7 +41,7 @@
 				</div>
 				<div class="px-3 text-xs text-gray-800">
 					<span class="flex flex-col gap-2">
-						<span>
+						<span class="leading-5">
 							{{
 								__(
 									'Get the app on your iPhone for easy access & a better experience'
@@ -76,7 +76,14 @@ const isIos = () => {
 const isInStandaloneMode = () =>
 	'standalone' in window.navigator && window.navigator.standalone
 
-if (isIos() && !isInStandaloneMode()) iosInstallMessage.value = true
+if (
+	isIos() &&
+	!isInStandaloneMode() &&
+	localStorage.getItem('learningIosInstallPromptShown') !== 'true'
+) {
+	iosInstallMessage.value = true
+	localStorage.setItem('learningIosInstallPromptShown', 'true')
+}
 
 window.addEventListener('beforeinstallprompt', (e) => {
 	e.preventDefault()

frontend/src/components/LessonContent.vue

@@ -9,6 +9,16 @@
 			allowfullscreen
 		></iframe>
 	</div>
+	<div v-if="rutube">
+		<iframe
+			class="rutube-video"
+			:src="getRutubeVideoSource(rutube.split('/').pop())"
+			width="100%"
+			:height="screenSize.width < 640 ? 200 : 400"
+			frameborder="0"
+			allowfullscreen
+		></iframe>
+	</div>
 	<div v-for="block in content?.split('\n\n')">
 		<div v-if="block.includes('{{ YouTubeVideo')">
 			<iframe
@@ -20,6 +30,16 @@
 				allowfullscreen
 			></iframe>
 		</div>
+		<div v-else-if="block.includes('{{ RutubeVideo')">
+			<iframe
+				class="rutube-video"
+				:src="getRutubeVideoSource(block)"
+				width="100%"
+				:height="screenSize.width < 640 ? 200 : 400"
+				frameborder="0"
+				allowfullscreen
+			></iframe>
+		</div>
 		<div v-else-if="block.includes('{{ Quiz')">
 			<Quiz :quiz="getId(block)" />
 		</div>
@@ -97,6 +117,13 @@ const getYouTubeVideoSource = (block) => {
 	return `https://www.youtube.com/embed/${block}`
 }
 
+const getRutubeVideoSource = (block) => {
+	if (block.includes('{{')) {
+		block = getId(block)
+	}
+	return `https://rutube.ru/play/embed/${block}`
+}
+
 const getPDFSource = (block) => {
 	return `${getId(block)}#toolbar=0`
 }
@@ -105,3 +132,11 @@ const getId = (block) => {
 	return block.match(/\(["']([^"']+?)["']\)/)[1]
 }
 </script>
+
+<style scoped>
+.youtube-video,
+.rutube-video {
+	display: block;
+	margin: 0 auto;
+}
+</style>

frontend/src/components/LessonHelp.vue

@@ -52,9 +52,9 @@ const contentMap = {
 			'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.',
 	},
 	youtube: {
-		title: 'How to add a YouTube Video?',
+		title: 'How to add a YouTube Video/RuTube?',
 		description:
-			'Copy the URL of the video from YouTube and paste it in the editor.',
+			'Copy the URL of the video from YouTube/RuTube and paste it in the editor.',
 	},
 	remove: {
 		title: 'How to remove an embed?',

frontend/src/components/LiveClass.vue

@@ -1,217 +0,0 @@
-<template>
-	<div
-		v-if="hasPermission() && !props.zoomAccount"
-		class="flex items-center space-x-2 mb-5 bg-surface-amber-1 py-1 px-2 rounded-md text-ink-amber-3"
-	>
-		<AlertCircle class="size-4 stroke-1.5" />
-		<span>
-			{{ __('Please add a zoom account to the batch to create live classes.') }}
-		</span>
-	</div>
-
-	<div class="flex items-center justify-between">
-		<div class="text-lg font-semibold text-ink-gray-9">
-			{{ __('Live Class') }}
-		</div>
-		<Button v-if="canCreateClass()" @click="openLiveClassModal">
-			<template #prefix>
-				<Plus class="h-4 w-4" />
-			</template>
-			<span>
-				{{ __('Add') }}
-			</span>
-		</Button>
-	</div>
-	<div
-		v-if="liveClasses.data?.length"
-		class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-5"
-	>
-		<div
-			v-for="cls in liveClasses.data"
-			class="flex flex-col border rounded-md h-full text-ink-gray-7 hover:border-outline-gray-3 p-3"
-			:class="{
-				'cursor-pointer': hasPermission() && cls.attendees > 0,
-			}"
-			@click="
-				() => {
-					openAttendanceModal(cls)
-				}
-			"
-		>
-			<div class="font-semibold text-ink-gray-9 text-lg mb-1">
-				{{ cls.title }}
-			</div>
-			<div class="short-introduction">
-				{{ cls.description }}
-			</div>
-			<div class="mt-auto space-y-3">
-				<div class="flex items-center space-x-2">
-					<Calendar class="w-4 h-4 stroke-1.5" />
-					<span>
-						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-					</span>
-				</div>
-				<div class="flex items-center space-x-2">
-					<Clock class="w-4 h-4 stroke-1.5" />
-					<span>
-						{{ dayjs(getClassStart(cls)).format('hh:mm A') }} -
-						{{ dayjs(getClassEnd(cls)).format('hh:mm A') }}
-					</span>
-				</div>
-				<div
-					v-if="canAccessClass(cls)"
-					class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
-				>
-					<a
-						v-if="user.data?.is_moderator || user.data?.is_evaluator"
-						:href="cls.start_url"
-						target="_blank"
-						class="cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
-						:class="cls.join_url ? 'w-full' : 'w-1/2'"
-					>
-						<Monitor class="h-4 w-4 stroke-1.5" />
-						{{ __('Start') }}
-					</a>
-					<a
-						:href="cls.join_url"
-						target="_blank"
-						class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
-					>
-						<Video class="h-4 w-4 stroke-1.5" />
-						{{ __('Join') }}
-					</a>
-				</div>
-				<Tooltip
-					v-else-if="hasClassEnded(cls)"
-					:text="__('This class has ended')"
-					placement="right"
-				>
-					<div class="flex items-center space-x-2 text-ink-amber-3 w-fit">
-						<Info class="w-4 h-4 stroke-1.5" />
-						<span>
-							{{ __('Ended') }}
-						</span>
-					</div>
-				</Tooltip>
-			</div>
-		</div>
-	</div>
-	<div v-else class="text-sm italic text-ink-gray-5 mt-2">
-		{{ __('No live classes scheduled') }}
-	</div>
-
-	<LiveClassModal
-		:batch="props.batch"
-		:zoomAccount="props.zoomAccount"
-		v-model="showLiveClassModal"
-		v-model:reloadLiveClasses="liveClasses"
-	/>
-
-	<LiveClassAttendance v-model="showAttendance" :live_class="attendanceFor" />
-</template>
-<script setup>
-import { createListResource, Button, Tooltip } from 'frappe-ui'
-import {
-	Plus,
-	Clock,
-	Calendar,
-	Video,
-	Monitor,
-	Info,
-	AlertCircle,
-} from 'lucide-vue-next'
-import { inject, ref } from 'vue'
-import { formatTime } from '@/utils/'
-import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
-import LiveClassAttendance from '@/components/Modals/LiveClassAttendance.vue'
-
-const user = inject('$user')
-const showLiveClassModal = ref(false)
-const dayjs = inject('$dayjs')
-const readOnlyMode = window.read_only_mode
-const showAttendance = ref(false)
-const attendanceFor = ref(null)
-
-const props = defineProps({
-	batch: {
-		type: String,
-		required: true,
-	},
-	zoomAccount: String,
-})
-
-const liveClasses = createListResource({
-	doctype: 'LMS Live Class',
-	filters: {
-		batch_name: props.batch,
-	},
-	fields: [
-		'title',
-		'description',
-		'time',
-		'date',
-		'duration',
-		'attendees',
-		'start_url',
-		'join_url',
-		'owner',
-	],
-	orderBy: 'date',
-	auto: true,
-})
-
-const openLiveClassModal = () => {
-	showLiveClassModal.value = true
-}
-
-const canCreateClass = () => {
-	if (readOnlyMode) return false
-	if (!props.zoomAccount) return false
-	return hasPermission()
-}
-
-const hasPermission = () => {
-	return user.data?.is_moderator || user.data?.is_evaluator
-}
-
-const canAccessClass = (cls) => {
-	if (cls.date < dayjs().format('YYYY-MM-DD')) return false
-	if (cls.date > dayjs().format('YYYY-MM-DD')) return false
-	if (hasClassEnded(cls)) return false
-	return true
-}
-
-const getClassStart = (cls) => {
-	return new Date(`${cls.date}T${cls.time}`)
-}
-
-const getClassEnd = (cls) => {
-	const classStart = getClassStart(cls)
-	return new Date(classStart.getTime() + cls.duration * 60000)
-}
-
-const hasClassEnded = (cls) => {
-	const classEnd = getClassEnd(cls)
-	const now = new Date()
-	return now > classEnd
-}
-
-const openAttendanceModal = (cls) => {
-	if (!hasPermission()) return
-	if (cls.attendees <= 0) return
-	showAttendance.value = true
-	attendanceFor.value = cls
-}
-</script>
-<style>
-.short-introduction {
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	text-overflow: ellipsis;
-	width: 100%;
-	overflow: hidden;
-	margin: 0.25rem 0 1.5rem;
-	line-height: 1.5;
-}
-</style>

frontend/src/components/MobileLayout.vue

@@ -80,6 +80,11 @@ onMounted(() => {
 		{},
 		{
 			onSuccess(data) {
+				if (userResource.data) {
+					addSideBar()
+				} else {
+					destructureSidebarLinks()
+				}
 				filterLinksToShow(data)
 				addOtherLinks()
 			},
@@ -103,6 +108,16 @@ watch(showMenu, (val) => {
 	}
 })
 
+const destructureSidebarLinks = () => {
+	let links = []
+	sidebarLinks.value.forEach((link) => {
+		link.items?.forEach((item) => {
+			links.push(item)
+		})
+	})
+	sidebarLinks.value = links
+}
+
 const filterLinksToShow = (data) => {
 	Object.keys(data).forEach((key) => {
 		if (!parseInt(data[key])) {
@@ -113,24 +128,184 @@ const filterLinksToShow = (data) => {
 	})
 }
 
+const addSideBar = () => {
+	sidebarLinks.value = [] // Очищаем, чтобы избежать дублирования
+
+	// Проверяем роли пользователя
+	const roles = userResource.data?.roles || []
+
+	sidebarLinks.value.push({
+		label: __('Courses'),
+		icon: 'BookOpen',
+		to: 'Courses',
+		activeFor: [
+			'Courses',
+			'CourseDetail',
+			'Lesson',
+			'CourseForm',
+			'LessonForm',
+		],
+	})
+
+	sidebarLinks.value.push({
+		label: __('Leader Board'),
+		icon: 'Trophy',
+		to: 'LeaderBoard',
+		activeFor: [],
+	})
+
+	if (roles.includes('LMS Student') || roles.includes('LMS Schoolchild')) {
+		otherLinks.value.push({
+			label: __('My points'),
+			icon: 'Award',
+			to: 'MyPoints',
+			activeFor: [],
+		})
+	}
+
+	if (roles.includes('Parent')) {
+		otherLinks.value.push({
+			label: __('My Child'),
+			icon: 'User',
+			to: 'my-child',
+			external: true,
+			activeFor: [],
+		})
+	}
+
+	let chatGPTURL = ''
+	let chatGPTLabel = ''
+
+	if (roles.includes('LMS Schoolchild')) {
+		chatGPTURL = 'chatgpt-schoolchild'
+		chatGPTLabel = __('ChatGPT for Schoolers')
+	} else if (roles.includes('LMS Student')) {
+		chatGPTURL = 'chatgpt-schoolchild'
+		chatGPTLabel = __('ChatGPT for Students')
+	} else if (roles.includes('Course Creator')) {
+		chatGPTURL = 'ai-teachers'
+		chatGPTLabel = __('ChatGPT for Teachers')
+	}
+
+	if (chatGPTURL) {
+		sidebarLinks.value.push({
+			label: chatGPTLabel,
+			icon: 'Cpu',
+			to: chatGPTURL,
+			external: true,
+			activeFor: [],
+		})
+	}
+}
 const addOtherLinks = () => {
+	otherLinks.value = []
+
 	if (user) {
+		const roles = userResource.data?.roles || []
+
+		if (!userResource.data?.is_instructor && !userResource.data?.is_moderator) {
+			otherLinks.value.push({
+				label: __('Programs'),
+				icon: 'Route',
+				to: 'Programs',
+				activeFor: ['Programs', 'ProgramForm', 'CourseDetail', 'Lesson'],
+			})
+		} else if (userResource.data?.is_instructor || userResource.data?.is_moderator) {
+			otherLinks.value.push({
+				label: __('Programs'),
+				icon: 'Route',
+				to: 'Programs',
+				activeFor: ['Programs', 'ProgramForm'],
+			})
+		}
+
+		if (userResource.data?.is_moderator || userResource.data?.is_instructor) {
+			otherLinks.value.push({
+				label: __('Quizzes'),
+				icon: 'CircleHelp',
+				to: 'Quizzes',
+				activeFor: [
+					'Quizzes',
+					'QuizForm',
+					'QuizSubmissionList',
+					'QuizSubmission',
+				],
+			})
+
+			otherLinks.value.push({
+				label: __('Assignments'),
+				icon: 'Pencil',
+				to: 'Assignments',
+				activeFor: [
+					'Assignments',
+					'AssignmentForm',
+					'AssignmentSubmissionList',
+					'AssignmentSubmission',
+				],
+			}),
+			otherLinks.value.push({
+				label: 'Programming Exercises',
+				icon: 'Code',
+				to: 'ProgrammingExercises',
+			})
+		}
+
+		if (roles.includes('LMS Student') || roles.includes('LMS Schoolchild')) {
+			otherLinks.value.push({
+				label: __('My points'),
+				icon: 'Award',
+				to: 'my_points',
+				external: true,
+				activeFor: [],
+			})
+		}
+
+		let chatGPTURL = ''
+		let chatGPTLabel = ''
+
+		if (roles.includes('LMS Schoolchild')) {
+			chatGPTURL = 'chatgpt-schoolchild'
+			chatGPTLabel = __('ChatGPT for Schoolers')
+		} else if (roles.includes('LMS Student')) {
+			chatGPTURL = 'chatgpt-schoolchild'
+			chatGPTLabel = __('ChatGPT for Students')
+		} else if (roles.includes('Course Creator')) {
+			chatGPTURL = 'ai-teachers'
+			chatGPTLabel = __('ChatGPT for Teachers')
+		}
+
+		if (chatGPTURL) {
+			otherLinks.value.push({
+				label: chatGPTLabel,
+				icon: 'Cpu',
+				to: chatGPTURL,
+				external: true,
+				activeFor: [],
+			})
+		}
+
 		otherLinks.value.push({
-			label: 'Notifications',
-			icon: 'Bell',
-			to: 'Notifications',
+			label: __('Leader Board'),
+			icon: 'Trophy',
+			to: 'leaderboardsample',
+			external: true,
+			activeFor: [],
 		})
+
 		otherLinks.value.push({
-			label: 'Profile',
+			label: __('Profile'),
 			icon: 'UserRound',
+			to: 'Profile',
+			params: { username: userResource.data?.username },
 		})
+
 		otherLinks.value.push({
-			label: 'Log out',
+			label: __('Log out'),
 			icon: 'LogOut',
 		})
 	} else {
 		otherLinks.value.push({
-			label: 'Log in',
+			label: __('Log in'),
 			icon: 'LogIn',
 		})
 	}
@@ -138,63 +313,11 @@ const addOtherLinks = () => {
 
 watch(userResource, () => {
 	if (userResource.data) {
-		isModerator.value = userResource.data.is_moderator
-		isInstructor.value = userResource.data.is_instructor
-		addPrograms()
-		if (isModerator.value || isInstructor.value) {
-			addProgrammingExercises()
-			addQuizzes()
-			addAssignments()
-		}
+		addSideBar() // Обновляем sidebarLinks при изменении userResource
+		addOtherLinks() // Обновляем otherLinks
 	}
 })
 
-const addQuizzes = () => {
-	otherLinks.value.push({
-		label: 'Quizzes',
-		icon: 'CircleHelp',
-		to: 'Quizzes',
-	})
-}
-
-const addAssignments = () => {
-	otherLinks.value.push({
-		label: 'Assignments',
-		icon: 'Pencil',
-		to: 'Assignments',
-	})
-}
-
-const addProgrammingExercises = () => {
-	otherLinks.value.push({
-		label: 'Programming Exercises',
-		icon: 'Code',
-		to: 'ProgrammingExercises',
-	})
-}
-
-const addPrograms = async () => {
-	let canAddProgram = await checkIfCanAddProgram()
-	if (!canAddProgram) return
-	let activeFor = ['Programs', 'ProgramDetail']
-	let index = 1
-
-	sidebarLinks.value.splice(index, 0, {
-		label: 'Programs',
-		icon: 'Route',
-		to: 'Programs',
-		activeFor: activeFor,
-	})
-}
-
-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
-}
-
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)
 }
@@ -212,6 +335,7 @@ const handleClick = (tab) => {
 				username: userResource.data?.username,
 			},
 		})
+	else if (tab.external) window.location.href = `/${tab.to}`
 	else router.push({ name: tab.to })
 }
 

frontend/src/components/Modals/AssessmentModal.vue

@@ -20,11 +20,15 @@
 					:options="assessmentTypes"
 					v-model="assessmentType"
 					:label="__('Type')"
+					placeholder=" "
+					@update:modelValue="() => (assessment = null)"
 				/>
 				<Link
+					v-if="assessmentType"
 					v-model="assessment"
 					:doctype="assessmentType"
 					:label="__('Assessment')"
+					placeholder=" "
 					:onCreate="
 						(value, close) => {
 							close()
@@ -49,7 +53,7 @@
 </template>
 <script setup>
 import { Dialog, FormControl, createResource, toast } from 'frappe-ui'
-import Link from '@/components/Controls/Link.vue'
+import { Link } from 'frappe-ui/frappe'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 

frontend/src/components/Modals/AssignmentForm.vue

@@ -27,6 +27,12 @@
 						:label="__('Submission Type')"
 						:required="true"
 					/>
+					<Link
+						v-model="assignment.course"
+						:label="__('Course')"
+						doctype="LMS Course"
+						placeholder=" "
+					/>
 					<div>
 						<div class="text-xs text-ink-gray-5 mb-2">
 							{{ __('Question') }}
@@ -37,7 +43,7 @@
 							@change="(val) => (assignment.question = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
 						/>
 					</div>
 				</div>
@@ -66,6 +72,8 @@
 <script setup lang="ts">
 import { Button, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
 import { computed, reactive, watch } from 'vue'
+import { escapeHTML, sanitizeHTML } from '@/utils'
+import { Link } from 'frappe-ui/frappe'
 
 const show = defineModel()
 const assignments = defineModel<Assignments>('assignments')
@@ -74,6 +82,7 @@ interface Assignment {
 	title: string
 	type: string
 	question: string
+	course?: string
 }
 
 interface Assignments {
@@ -88,6 +97,7 @@ const assignment = reactive({
 	title: '',
 	type: '',
 	question: '',
+	course: '',
 })
 
 const props = defineProps({
@@ -106,6 +116,7 @@ watch(
 					assignment.title = row.title
 					assignment.type = row.type
 					assignment.question = row.question
+					assignment.course = row.course || ''
 				}
 			})
 		}
@@ -113,33 +124,55 @@ watch(
 	{ flush: 'post' }
 )
 
-const saveAssignment = () => {
-	if (props.assignmentID == 'new') {
-		assignments.value.insert.submit(
-			{
-				...assignment,
-			},
-			{
-				onSuccess() {
-					show.value = false
-					toast.success(__('Assignment created successfully'))
-				},
-			}
-		)
-	} else {
-		assignments.value.setValue.submit(
-			{
-				...assignment,
-				name: props.assignmentID,
-			},
-			{
-				onSuccess() {
-					show.value = false
-					toast.success(__('Assignment updated successfully'))
-				},
-			}
-		)
+watch(show, (newVal) => {
+	if (newVal && props.assignmentID === 'new') {
+		assignment.title = ''
+		assignment.type = ''
+		assignment.question = ''
 	}
+})
+
+const validateFields = () => {
+	assignment.title = escapeHTML(assignment.title.trim())
+	assignment.question = sanitizeHTML(assignment.question)
+}
+
+const saveAssignment = () => {
+	validateFields()
+	if (props.assignmentID == 'new') {
+		createAssignment()
+	} else {
+		updateAssignment()
+	}
+}
+
+const createAssignment = () => {
+	assignments.value.insert.submit(
+		{
+			...assignment,
+		},
+		{
+			onSuccess() {
+				show.value = false
+				toast.success(__('Assignment created successfully'))
+			},
+		}
+	)
+}
+
+const updateAssignment = () => {
+	assignments.value.setValue.submit(
+		{
+			...assignment,
+			name: props.assignmentID,
+		},
+		{
+			onSuccess() {
+				show.value = false
+				toast.success(__('Assignment updated successfully'))
+			},
+		}
+	)
 }
 
 const assignmentOptions = computed(() => {

frontend/src/components/Modals/BatchCourseModal.vue

@@ -2,8 +2,8 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Add a course'),
-			size: 'sm',
+			title: __('Add a course to the batch'),
+			size: 'lg',
 			actions: [
 				{
 					label: __('Submit'),
@@ -19,14 +19,13 @@
 				v-model="course"
 				:label="__('Course')"
 				:required="true"
+				:filters="{ published: 1 }"
 				:onCreate="
 					(value, close) => {
 						close()
 						router.push({
-							name: 'CourseForm',
-							params: {
-								courseName: 'new',
-							},
+							name: 'Courses',
+							query: { newCourse: '1' },
 						})
 					}
 				"
@@ -42,7 +41,7 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, toast } from 'frappe-ui'
+import { Dialog, toast } from 'frappe-ui'
 import { ref, inject } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import { useOnboarding } from 'frappe-ui/frappe'
@@ -64,37 +63,28 @@ const props = defineProps({
 	},
 })
 
-const createBatchCourse = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'Batch Course',
-				parent: props.batch,
-				parenttype: 'LMS Batch',
-				parentfield: 'courses',
-				course: course.value,
-				evaluator: evaluator.value,
-			},
-		}
-	},
-})
-
 const addCourse = (close) => {
-	createBatchCourse.submit(
-		{},
+	courses.value.insert.submit(
+		{
+			course: course.value,
+			evaluator: evaluator.value,
+			parent: props.batch,
+			parenttype: 'LMS Batch',
+			parentfield: 'courses',
+		},
 		{
 			onSuccess() {
 				if (user.data?.is_system_manager)
 					updateOnboardingStep('add_batch_course')
 
 				close()
-				courses.value.reload()
 				course.value = null
 				evaluator.value = null
+				toast.success(__('Course added to batch successfully'))
 			},
 			onError(err) {
 				toast.error(err.messages?.[0] || err)
+				console.log(err)
 			},
 		}
 	)

frontend/src/components/Modals/BatchStudentProgress.vue

@@ -1,142 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			size: 'xl',
-		}"
-	>
-		<template #body>
-			<div class="p-5 space-y-10 text-base">
-				<div class="flex items-center space-x-2">
-					<Avatar :image="student.user_image" size="3xl" />
-					<div class="space-y-1">
-						<div class="flex items-center space-x-2">
-							<div class="text-xl font-semibold">
-								{{ student.full_name }}
-							</div>
-							<Badge
-								v-if="
-									Object.keys(student.assessments).length ||
-									Object.keys(student.courses).length
-								"
-								:theme="student.progress === 100 ? 'green' : 'red'"
-							>
-								{{ student.progress }}% {{ __('Complete') }}
-							</Badge>
-						</div>
-						<div class="text-sm text-ink-gray-7">
-							{{ student.email }}
-						</div>
-					</div>
-				</div>
-
-				<div class="space-y-8">
-					<!-- Assessments -->
-					<div
-						v-if="Object.keys(student.assessments).length"
-						class="space-y-2 text-sm"
-					>
-						<div class="flex items-center border-b pb-1 font-medium">
-							<span class="flex-1">
-								{{ __('Assessment') }}
-							</span>
-							<span>
-								{{ __('Percentage/Status') }}
-							</span>
-						</div>
-						<router-link
-							v-for="assessment in Object.keys(student.assessments)"
-							class="flex items-center text-ink-gray-7 font-medium"
-							:to="{
-								name:
-									student.assessments[assessment].type == 'LMS Assignment'
-										? 'AssignmentSubmission'
-										: '',
-								params:
-									student.assessments[assessment].type == 'LMS Assignment'
-										? {
-												assignmentID:
-													student.assessments[assessment].assessment,
-												submissionName:
-													student.assessments[assessment].submission,
-										  }
-										: {},
-							}"
-						>
-							<span class="flex-1">
-								{{ assessment }}
-							</span>
-							<span v-if="isAssignment(student.assessments[assessment].status)">
-								<Badge
-									:theme="
-										getStatusTheme(student.assessments[assessment].status)
-									"
-								>
-									{{ student.assessments[assessment].status }}
-								</Badge>
-							</span>
-							<span v-else>
-								{{ student.assessments[assessment].status }}
-							</span>
-						</router-link>
-					</div>
-
-					<!-- Courses -->
-					<div
-						v-if="Object.keys(student.courses).length"
-						class="space-y-2 text-sm"
-					>
-						<div class="flex items-center border-b pb-1 font-medium">
-							<span class="flex-1">
-								{{ __('Courses') }}
-							</span>
-							<span>
-								{{ __('Progress') }}
-							</span>
-						</div>
-						<div
-							v-for="course in Object.keys(student.courses)"
-							class="flex items-center text-ink-gray-7 font-medium"
-						>
-							<span class="flex-1">
-								{{ course }}
-							</span>
-							<span>
-								{{ Math.floor(student.courses[course]) }}
-							</span>
-						</div>
-					</div>
-				</div>
-
-				<!-- Heatmap -->
-				<StudentHeatmap :member="student.email" :days="120" />
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup>
-import { Avatar, Badge, Dialog } from 'frappe-ui'
-import StudentHeatmap from '@/components/StudentHeatmap.vue'
-
-const show = defineModel()
-const props = defineProps({
-	student: {
-		type: Object,
-		default: null,
-	},
-})
-
-const isAssignment = (value) => {
-	return isNaN(value)
-}
-
-const getStatusTheme = (status) => {
-	if (status === 'Pass') {
-		return 'green'
-	} else if (status == 'Not Graded') {
-		return 'orange'
-	} else {
-		return 'red'
-	}
-}
-</script>

frontend/src/components/Modals/ChapterModal.vue

@@ -80,13 +80,13 @@ import {
 } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
 import { getFileSize } from '@/utils/'
-import { capture } from '@/telemetry'
 import { FileText, X } from 'lucide-vue-next'
-import { useOnboarding } from 'frappe-ui/frappe'
+import { useOnboarding, useTelemetry } from 'frappe-ui/frappe'
 
 const show = defineModel()
 const outline = defineModel('outline')
 const user = inject('$user')
+const { capture } = useTelemetry()
 const { updateOnboardingStep } = useOnboarding('learning')
 
 const props = defineProps({

frontend/src/components/Modals/CourseProgressSummary.vue

@@ -1,231 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			title: __('Course Progress Summary'),
-			size: '5xl',
-		}"
-	>
-		<template #body-content>
-			<div
-				class="flex flex-col-reverse md:flex-row justify-between md:space-x-10 text-base mt-10"
-			>
-				<div class="w-full">
-					<div class="flex items-center justify-between space-x-5 mb-4">
-						<FormControl
-							v-model="searchFilter"
-							:placeholder="__('Search by Member')"
-							type="text"
-							class="w-full"
-						/>
-					</div>
-					<div class="max-h-[70vh] overflow-y-auto">
-						<ListView
-							v-if="progressList.loading || progressList.data?.length"
-							:columns="progressColumns"
-							:rows="progressList.data"
-							rowKey="name"
-							:options="{
-								selectable: false,
-								showTooltip: false,
-							}"
-						>
-							<ListHeader
-								class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
-							>
-								<ListHeaderItem
-									:item="item"
-									v-for="item in progressColumns"
-									:key="item.key"
-								>
-									<template #prefix="{ item }">
-										<FeatherIcon
-											:name="item.icon?.toString()"
-											class="h-4 w-4"
-										/>
-									</template>
-								</ListHeaderItem>
-							</ListHeader>
-							<ListRows v-for="row in progressList.data">
-								<router-link
-									:to="{
-										name: 'Profile',
-										params: { username: row.member_username },
-									}"
-								>
-									<ListRow :row="row">
-										<template #default="{ column, item }">
-											<ListRowItem
-												:item="row[column.key]"
-												:align="column.align"
-											>
-												<template #prefix>
-													<div v-if="column.key == 'member_name'">
-														<Avatar
-															class="flex items-center"
-															:image="row['member_image']"
-															:label="item"
-															size="sm"
-														/>
-													</div>
-												</template>
-												<div>
-													{{ row[column.key].toString() }}
-												</div>
-											</ListRowItem>
-										</template>
-									</ListRow>
-								</router-link>
-							</ListRows>
-						</ListView>
-						<div
-							v-if="progressList.data && progressList.hasNextPage"
-							class="flex justify-center my-5"
-						>
-							<Button @click="progressList.next()">
-								{{ __('Load More') }}
-							</Button>
-						</div>
-					</div>
-				</div>
-				<div class="mb-4 self-start w-full space-y-5">
-					<div
-						class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4"
-					>
-						<NumberChart
-							class="border rounded-md w-full"
-							:config="{
-								title: __('Enrollments'),
-								value: memberCount || 0,
-							}"
-						/>
-						<NumberChart
-							class="border rounded-md w-full"
-							:config="{
-								title: __('Average Progress %'),
-								value: chartDetails.data?.average_progress || 0,
-							}"
-						/>
-					</div>
-					<DonutChart
-						:config="{
-							data: chartDetails.data?.progress_distribution || [],
-							title: __('Progress Distribution'),
-							categoryColumn: 'category',
-							valueColumn: 'count',
-							colors: [
-								theme.colors.red['400'],
-								theme.colors.amber['400'],
-								theme.colors.pink['400'],
-								theme.colors.blue['400'],
-								theme.colors.green['400'],
-							],
-						}"
-					/>
-				</div>
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup lang="ts">
-import {
-	Avatar,
-	Button,
-	createListResource,
-	createResource,
-	Dialog,
-	DonutChart,
-	FeatherIcon,
-	FormControl,
-	ListView,
-	ListHeader,
-	ListHeaderItem,
-	ListRows,
-	ListRow,
-	ListRowItem,
-	NumberChart,
-} from 'frappe-ui'
-import { computed, ref, watch } from 'vue'
-import { theme } from '@/utils/theme'
-
-const show = defineModel<boolean>({ default: false })
-const searchFilter = ref<string | null>(null)
-type Filters = {
-	course: string | undefined
-
-	member_name?: string[]
-}
-
-const props = defineProps<{
-	courseName?: string
-	enrollments?: number
-}>()
-
-const memberCount = ref<number>(props.enrollments || 0)
-
-const chartDetails = createResource({
-	url: 'lms.lms.api.get_course_progress_distribution',
-	params: {
-		course: props.courseName,
-	},
-	auto: true,
-})
-
-const progressList = createListResource({
-	doctype: 'LMS Enrollment',
-	filters: {
-		course: props.courseName,
-	},
-	fields: [
-		'name',
-		'member',
-		'member_name',
-		'member_image',
-		'member_username',
-		'progress',
-	],
-	pageLength: 50,
-	auto: true,
-})
-
-watch([searchFilter], () => {
-	let filterApplied = false
-	let filters: Filters = {
-		course: props.courseName,
-	}
-
-	if (searchFilter.value) {
-		filters.member_name = ['like', `%${searchFilter.value}%`]
-		filterApplied = true
-	}
-
-	progressList.update({
-		filters: filters,
-	})
-	progressList.reload(
-		{},
-		{
-			onSuccess(data: any[]) {
-				memberCount.value = filterApplied ? data.length : props.enrollments || 0
-			},
-		}
-	)
-})
-
-const progressColumns = computed(() => {
-	return [
-		{
-			label: __('Member'),
-			key: 'member_name',
-			width: '60%',
-			icon: 'user',
-		},
-		{
-			label: __('Progress'),
-			key: 'progress',
-			align: 'right',
-			icon: 'trending-up',
-		},
-	]
-})
-</script>

frontend/src/components/Modals/DiscussionModal.vue

@@ -26,7 +26,7 @@
 						@change="(val) => (topic.reply = val)"
 						:editable="true"
 						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
 				</div>
 			</div>
@@ -34,17 +34,13 @@
 	</Dialog>
 </template>
 <script setup>
-import {
-	Dialog,
-	FormControl,
-	TextEditor,
-	createResource,
-	toast,
-} from 'frappe-ui'
+import { call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
 import { reactive } from 'vue'
 import { singularize } from '@/utils'
+import { useTelemetry } from 'frappe-ui/frappe'
 
 const topics = defineModel('reloadTopics')
+const { capture } = useTelemetry()
 
 const props = defineProps({
 	title: {
@@ -66,64 +62,50 @@ const topic = reactive({
 	reply: '',
 })
 
-const topicResource = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'Discussion Topic',
-				reference_doctype: props.doctype,
-				reference_docname: props.docname,
-				title: topic.title,
-			},
-		}
-	},
-})
-
-const replyResource = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'Discussion Reply',
-				topic: values.topic,
-				reply: topic.reply,
-			},
-		}
-	},
-})
-
 const submitTopic = (close) => {
-	topicResource.submit(
-		{},
-		{
-			validate() {
-				if (!topic.title) {
-					return 'Title cannot be empty.'
-				}
-				if (!topic.reply) {
-					return 'Reply cannot be empty.'
-				}
-			},
-			onSuccess(data) {
-				replyResource.submit(
-					{
-						topic: data.name,
-					},
-					{
-						onSuccess() {
-							topic.title = ''
-							topic.reply = ''
-							topics.value.reload()
-							close()
-						},
-					}
-				)
-			},
-			onError(err) {
-				toast.error(err.messages?.[0] || err)
-			},
-		}
-	)
+	if (!topic.title) {
+		toast.error(__('Title cannot be empty.'))
+		return
+	}
+	if (!topic.reply) {
+		toast.error(__('Details cannot be empty.'))
+		return
+	}
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'Discussion Topic',
+			reference_doctype: props.doctype,
+			reference_docname: props.docname,
+			title: topic.title,
+		},
+	})
+		.then((data) => {
+			createReply(data.name, close)
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
+}
+
+const createReply = (topicName, close) => {
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'Discussion Reply',
+			topic: topicName,
+			reply: topic.reply,
+		},
+	})
+		.then((data) => {
+			topic.title = ''
+			topic.reply = ''
+			topics.value.reload()
+			capture('discussion_topic_created')
+			close()
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
 }
 </script>

frontend/src/components/Modals/EditProfile.vue

@@ -1,91 +1,85 @@
 <template>
 	<Dialog
+		v-model="show"
 		:options="{
-			title: 'Edit your profile',
 			size: '3xl',
-			actions: [
-				{
-					label: 'Save',
-					variant: 'solid',
-					onClick: (close) => saveProfile(close),
-				},
-			],
 		}"
 	>
+		<template #body-header>
+			<div class="flex items-center justify-between mb-5">
+				<div class="text-2xl font-semibold leading-6 text-ink-gray-9">
+					{{ __('Edit Profile') }}
+				</div>
+				<div class="space-x-2">
+					<Badge v-if="isDirty" theme="orange">
+						{{ __('Not Saved') }}
+					</Badge>
+					<div class="pb-5 float-right">
+						<Button variant="solid" @click="saveProfile()">
+							{{ __('Save') }}
+						</Button>
+					</div>
+				</div>
+			</div>
+		</template>
 		<template #body-content>
-			<div class="grid grid-cols-2 gap-5">
-				<div class="space-y-4">
-					<!-- <Uploader
-						v-model="profile.image.file_url"
-						label="Profile Image"
-						description="Your profile image to help others recognize you."
-					/> -->
-					<div>
-						<div class="text-xs text-ink-gray-5 mb-1">
-							{{ __('Profile Image') }}
-						</div>
-						<FileUploader
-							v-if="!profile.image"
-							:fileTypes="['image/*']"
-							:validateFile="validateFile"
-							@success="(file) => saveImage(file)"
-						>
-							<template
-								v-slot="{ file, progress, uploading, openFileSelector }"
-							>
-								<div class="mb-4">
-									<Button @click="openFileSelector" :loading="uploading">
-										{{
-											uploading
-												? `Uploading ${progress}%`
-												: 'Upload a profile image'
-										}}
-									</Button>
-								</div>
-							</template>
-						</FileUploader>
-						<div v-else class="mb-4">
-							<div class="flex items-center">
-								<img
-									:src="profile.image.file_url"
-									class="object-cover h-[50px] w-[50px] rounded-full border-4 border-white object-cover"
-								/>
+			<div class="text-base">
+				<div class="grid grid-cols-2 gap-10">
+					<div class="space-y-4">
+						<div class="space-y-4">
+							<Uploader
+								v-model="profile.image"
+								:label="__('Profile Image')"
+								:required="true"
+								shape="circle"
+							/>
 
-								<div class="text-base flex flex-col ml-2">
-									<span>
-										{{ profile.image.file_name }}
-									</span>
-									<span class="text-sm text-ink-gray-4 mt-1">
-										{{ getFileSize(profile.image.file_size) }}
-									</span>
-								</div>
-								<X
-									@click="removeImage()"
-									class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-								/>
-							</div>
+							<FormControl
+								v-model="profile.first_name"
+								:label="__('First Name')"
+							/>
+							<FormControl
+								v-model="profile.last_name"
+								:label="__('Last Name')"
+							/>
+							<FormControl v-model="profile.headline" :label="__('Headline')" />
+
+							<FormControl
+								v-model="profile.linkedin"
+								:label="__('LinkedIn ID')"
+							/>
+							<FormControl v-model="profile.github" :label="__('GitHub ID')" />
+							<FormControl
+								v-model="profile.twitter"
+								:label="__('Twitter ID')"
+							/>
 						</div>
 					</div>
-					<FormControl v-model="profile.first_name" :label="__('First Name')" />
-					<FormControl v-model="profile.last_name" :label="__('Last Name')" />
-					<FormControl v-model="profile.headline" :label="__('Headline')" />
-					<Link
-						:label="__('Language')"
-						v-model="profile.language"
-						doctype="Language"
-					/>
-				</div>
-				<div>
-					<div class="mb-4">
-						<div class="mb-1.5 text-sm text-ink-gray-5">
-							{{ __('Bio') }}
-						</div>
-						<TextEditor
-							:fixedMenu="true"
-							@change="(val) => (profile.bio = val)"
-							:content="profile.bio"
-							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 class="space-y-4">
+						<FormControl
+							v-model="profile.open_to"
+							type="select"
+							:options="[' ', 'Work', 'Hiring']"
+							:label="__('Open to')"
+							:placeholder="__('Looking for new work or hiring talent?')"
 						/>
+						<Link
+							:label="__('Language')"
+							v-model="profile.language"
+							doctype="Language"
+						/>
+						<div>
+							<div class="mb-1.5 text-sm text-ink-gray-5">
+								{{ __('Bio') }}
+							</div>
+							<TextEditor
+								:fixedMenu="true"
+								@change="(val) => (profile.bio = val)"
+								:content="profile.bio"
+								:rows="15"
+								editorClass="prose-sm py-2 px-2 min-h-[280px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -94,22 +88,22 @@
 </template>
 <script setup>
 import {
-	Dialog,
-	FormControl,
-	FileUploader,
+	Badge,
 	Button,
 	createResource,
+	Dialog,
+	FormControl,
 	TextEditor,
 	toast,
 } from 'frappe-ui'
 import { ref, reactive, watch } from 'vue'
-import { X } from 'lucide-vue-next'
-import { getFileSize, decodeEntities } from '@/utils'
+import { sanitizeHTML } from '@/utils'
 import Link from '@/components/Controls/Link.vue'
-import DOMPurify from 'dompurify'
 
+const show = defineModel()
 const reloadProfile = defineModel('reloadProfile')
 const hasLanguageChanged = ref(false)
+const isDirty = ref(false)
 
 const props = defineProps({
 	profile: {
@@ -124,19 +118,10 @@ const profile = reactive({
 	headline: '',
 	bio: '',
 	image: '',
-})
-
-const imageResource = createResource({
-	url: 'lms.lms.api.get_file_info',
-	makeParams(values) {
-		return {
-			file_url: values.image,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		profile.image = data
-	},
+	open_to: '',
+	linkedin: '',
+	github: '',
+	twitter: '',
 })
 
 const updateProfile = createResource({
@@ -146,7 +131,7 @@ const updateProfile = createResource({
 			doctype: 'User',
 			name: props.profile.data.name,
 			fieldname: {
-				user_image: profile.image.file_url,
+				user_image: profile.image || null,
 				...profile,
 			},
 		}
@@ -156,28 +141,13 @@ const updateProfile = createResource({
 	},
 })
 
-const saveProfile = (close) => {
-	profile.bio = DOMPurify.sanitize(decodeEntities(profile.bio), {
-		ALLOWED_TAGS: [
-			'b',
-			'i',
-			'em',
-			'strong',
-			'a',
-			'p',
-			'br',
-			'ul',
-			'ol',
-			'li',
-			'img',
-		],
-		ALLOWED_ATTR: ['href', 'target', 'src'],
-	})
+const saveProfile = () => {
+	profile.bio = sanitizeHTML(profile.bio)
 	updateProfile.submit(
 		{},
 		{
 			onSuccess() {
-				close()
+				show.value = false
 				reloadProfile.value.reload()
 				if (hasLanguageChanged.value) {
 					hasLanguageChanged.value = false
@@ -191,20 +161,26 @@ const saveProfile = (close) => {
 	)
 }
 
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	}
-}
-
-const saveImage = (file) => {
-	profile.image = file
-}
-
-const removeImage = () => {
-	profile.image = null
-}
+watch(
+	() => profile,
+	(newVal) => {
+		if (!props.profile.data) return
+		let keys = Object.keys(newVal)
+		keys.splice(keys.indexOf('image'), 1)
+		for (let key of keys) {
+			if (newVal[key] !== props.profile.data[key]) {
+				isDirty.value = true
+				return
+			}
+		}
+		if (profile.image !== props.profile.data.user_image) {
+			isDirty.value = true
+			return
+		}
+		isDirty.value = false
+	},
+	{ deep: true }
+)
 
 watch(
 	() => props.profile.data,
@@ -215,15 +191,20 @@ watch(
 			profile.headline = newVal.headline
 			profile.language = newVal.language
 			profile.bio = newVal.bio
-			if (newVal.user_image) imageResource.submit({ image: newVal.user_image })
+			profile.open_to = newVal.open_to
+			profile.linkedin = newVal.linkedin
+			profile.github = newVal.github
+			profile.twitter = newVal.twitter
+			profile.image = newVal.user_image
+			isDirty.value = false
 		}
 	}
 )
 
 watch(
 	() => profile.language,
-	(newVal, oldVal) => {
-		if (newVal !== oldVal) {
+	() => {
+		if (profile.language !== props.profile.data.language) {
 			hasLanguageChanged.value = true
 		}
 	}

frontend/src/components/Modals/EmailTemplateModal.vue

@@ -67,7 +67,7 @@
 								'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
 							)
 						"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
 					/>
 				</div>
 			</div>