chore(release): Bumped to Version 2.45.2

fix: permission issue during quiz submission (backport #2126)

.github/workflows/ci.yml

@@ -3,10 +3,14 @@ on:
   push:
     branches:
       - main
+      - develop
+      - main-hotfix
   pull_request: {}
 jobs:
   tests:
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
     services:
       redis-cache:
         image: redis:alpine
@@ -30,13 +34,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 +73,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 +84,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"

codecov.yml

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

cypress/e2e/batch_creation.cy.js

@@ -10,11 +10,11 @@ describe("Batch Creation", () => {
 		cy.get("span").contains("Settings").click();
 
 		// Add a new member
-		cy.get('[id^="headlessui-dialog-panel-v-"]')
+		cy.get("[data-dismissable-layer]")
 			.find("span")
 			.contains(/^Members$/)
 			.click();
-		cy.get('[id^="headlessui-dialog-panel-v-"]')
+		cy.get("[data-dismissable-layer]")
 			.find("button")
 			.contains("New")
 			.click();
@@ -27,13 +27,17 @@ 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('[id^="headlessui-dialog-panel-v-"]')
+		cy.get("[data-dismissable-layer]")
 			.find("span")
 			.contains(/^Evaluators$/)
 			.click();
 
-		cy.get('[id^="headlessui-dialog-panel-v-"]')
+		cy.get("[data-dismissable-layer]")
 			.find("button")
 			.contains("New")
 			.click();
@@ -48,6 +52,7 @@ 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");
@@ -123,12 +128,9 @@ 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();
 		});
@@ -155,13 +157,14 @@ describe("Batch Creation", () => {
 		cy.get("button:visible").contains("Manage Batch").click();
 
 		/* Add student to batch */
+		cy.get("button").contains("Students").click();
 		cy.get("button").contains("Add").click();
-		cy.get('div[id^="headlessui-dialog-panel-v-"]')
+		cy.get('div[role="dialog"]')
+			.first()
+			.find("input[id^='headlessui-combobox-input-v-']")
 			.first()
-			.find("button")
-			.eq(1)
 			.click();
-		cy.get("input[id^='headlessui-combobox-input-v-']").type(randomEmail);
+		cy.get("input[placeholder='Search']").type(randomEmail);
 		cy.get("div").contains(randomEmail).click();
 		cy.get("button").contains("Submit").click();
 

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,16 +53,35 @@ describe("Course Creation", () => {
 				});
 		});
 
+		cy.button("Create").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("input").click();
+			});
+		cy.get("[id^=headlessui-combobox-option-")
+			.should("be.visible")
+			.first()
+			.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("[id^=headlessui-dialog-panel-")
+		cy.get("[data-dismissable-layer]")
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
@@ -143,7 +148,7 @@ describe("Course Creation", () => {
 		cy.get("span").contains("Community").click();
 		cy.button("New Question").click();
 		cy.wait(500);
-		cy.get("[id^=headlessui-dialog-panel-").within(() => {
+		cy.get("[data-dismissable-layer]").within(() => {
 			cy.get("label").contains("Title").type("Test Discussion");
 			cy.get("div[contenteditable=true]").invoke(
 				"text",

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,10 +8,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AdminBatchDashboard: typeof import('./src/components/AdminBatchDashboard.vue')['default']
     Annoucements: typeof import('./src/components/Annoucements.vue')['default']
     AnnouncementModal: typeof import('./src/components/Modals/AnnouncementModal.vue')['default']
-    Apps: typeof import('./src/components/Apps.vue')['default']
-    AppSidebar: typeof import('./src/components/AppSidebar.vue')['default']
+    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']
@@ -41,11 +42,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']
@@ -85,8 +93,10 @@ 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']
-    PaymentSettings: typeof import('./src/components/Settings/PaymentSettings.vue')['default']
+    PaymentGatewayDetails: typeof import('./src/components/Settings/PaymentGatewayDetails.vue')['default']
+    PaymentGateways: typeof import('./src/components/Settings/PaymentGateways.vue')['default']
     Play: typeof import('./src/components/Icons/Play.vue')['default']
     ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
     Question: typeof import('./src/components/Modals/Question.vue')['default']
@@ -101,16 +111,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/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/index.html

@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" href="{{ favicon }}" />
+		<link rel="manifest" href="/api/method/lms.lms.api.get_pwa_manifest" />
 		<link rel="apple-touch-icon" href="public/manifest/apple-icon-180.png" />
 		<meta name="mobile-web-app-capable" content="yes" />
 		<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
@@ -212,7 +213,7 @@
 		<meta name="twitter:image" content="{{ meta.image }}" />
 		<meta name="twitter:description" content="{{ meta.description }}" />
 	</head>
-	<body>
+	<body class="sm:overscroll-y-none no-scrollbar">
 		<div id="app">
 			<div id="seo-content">
 				<h1>{{ meta.title }}</h1>

frontend/package.json

@@ -6,54 +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.173",
-    "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"
+    "@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": "0.15.0"
   }
 }

frontend/src/App.vue

@@ -1,22 +1,19 @@
 <template>
 	<FrappeUIProvider>
-		<Layout>
-			<div class="text-base">
-				<router-view />
-			</div>
+		<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'
@@ -25,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') {
@@ -49,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/AdminBatchDashboard.vue

@@ -0,0 +1,118 @@
+<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: studentCount.data || 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.data || 0 }"
+			/>
+		</div>
+
+		<AxisChart
+			v-if="showProgressChart"
+			class="border rounded-lg p-3 min-h-[300px]"
+			:config="{
+				data: filteredChartData,
+				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>
+</template>
+<script setup lang="ts">
+import { AxisChart, createResource, NumberChart } from 'frappe-ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	batch: { [key: string]: any } | null
+}>()
+
+const studentCount = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['batch_student_count', props.batch?.data?.name],
+	params: {
+		doctype: 'LMS Batch Enrollment',
+		filters: { batch: props.batch?.data?.name },
+	},
+	auto: true,
+})
+
+const assessmentCount = createResource({
+	url: 'lms.lms.utils.get_batch_assessment_count',
+	cache: ['batch_assessment_count', props.batch?.data?.name],
+	params: {
+		batch: props.batch?.data?.name,
+	},
+	auto: true,
+})
+
+const chartData = createResource({
+	url: 'lms.lms.utils.get_batch_chart_data',
+	cache: ['batch_chart_data', props.batch?.data?.name],
+	params: { batch: props.batch?.data?.name },
+	auto: true,
+})
+
+const certificationCount = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['batch_certificate_count', props.batch?.data?.name],
+	params: {
+		doctype: 'LMS Certificate',
+		filters: { batch_name: props.batch?.data?.name },
+	},
+	auto: true,
+})
+
+const filteredChartData = computed(() =>
+	(chartData.data || []).filter((item: { value: number }) => item.value > 0)
+)
+
+const showProgressChart = computed(
+	() =>
+		studentCount.data &&
+		(props.batch?.data?.courses?.length || assessmentCount.data)
+)
+</script>

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 Link from '@/components/Controls/Link.vue'
+import { Dialog, FormControl } from 'frappe-ui'
+import { nextTick, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { Link } from 'frappe-ui/frappe'
+import { getLmsRoute } from '@/utils/basePath'
 
 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/Assessments.vue

@@ -208,12 +208,12 @@ const canAddAssessments = () => {
 const getAssessmentColumns = () => {
 	let columns = [
 		{
-			label: 'Assessment',
+			label: __('Assessment'),
 			key: 'title',
 			width: '25rem',
 		},
 		{
-			label: 'Type',
+			label: __('Type'),
 			key: 'assessment_type',
 			width: '15rem',
 		},
@@ -221,7 +221,7 @@ const getAssessmentColumns = () => {
 
 	if (!user.data?.is_moderator) {
 		columns.push({
-			label: 'Status/Percentage',
+			label: __('Status/Percentage'),
 			key: 'status',
 			align: 'left',
 			width: '10rem',

frontend/src/components/Assignment.vue

@@ -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>
@@ -53,7 +53,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,13 +63,21 @@
 					}}
 					{{ __('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="!submissionResource.doc?.assignment_attachment"
 						:fileTypes="getType()"
+						:uploadArgs="{
+							private: true,
+						}"
 						:validateFile="validateFile"
 						@success="(file) => saveSubmission(file)"
 					>
@@ -84,21 +92,24 @@
 						</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="submissionResource.doc.assignment_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>
+										{{
+											submissionResource.doc.assignment_attachment
+												.split('/')
+												.pop()
+										}}
+									</span>
+								</div>
 							</a>
 							<X
 								v-if="canModifyAssignment"
@@ -127,7 +138,10 @@
 						@change="(val) => (answer = val)"
 						:editable="true"
 						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+						: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>
 
@@ -136,13 +150,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"
 				>
-					<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>
@@ -173,7 +187,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>
@@ -195,10 +212,8 @@ 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'
 
-const submissionFile = ref(null)
 const answer = ref(null)
 const comments = ref(null)
 const router = useRouter()
@@ -257,9 +272,7 @@ const newSubmission = createResource({
 			assignment: props.assignmentID,
 			member: user.data?.name,
 		}
-		if (showUploader()) {
-			doc.assignment_attachment = submissionFile.value.file_url
-		} else {
+		if (!showUploader()) {
 			doc.answer = answer.value
 		}
 		return {
@@ -268,19 +281,6 @@ const newSubmission = createResource({
 	},
 })
 
-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,
@@ -293,11 +293,6 @@ const submissionResource = createDocumentResource({
 
 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
 		}
@@ -306,7 +301,10 @@ watch(submissionResource, () => {
 		}
 		if (submissionResource.isDirty) {
 			isDirty.value = true
-		} else if (showUploader() && !submissionFile.value) {
+		} else if (
+			showUploader() &&
+			!submissionResource.doc.assignment_attachment
+		) {
 			isDirty.value = true
 		} else if (!showUploader() && !answer.value) {
 			isDirty.value = true
@@ -316,11 +314,17 @@ watch(submissionResource, () => {
 	}
 })
 
-watch(submissionFile, () => {
-	if (props.submissionName == 'new' && submissionFile.value) {
-		isDirty.value = true
+watch(
+	() => submissionResource.doc,
+	() => {
+		if (
+			props.submissionName == 'new' &&
+			submissionResource.doc?.assignment_attachment
+		) {
+			isDirty.value = true
+		}
 	}
-})
+)
 
 const submitAssignment = () => {
 	if (props.submissionName != 'new') {
@@ -332,13 +336,13 @@ const submitAssignment = () => {
 		submissionResource.setValue.submit(
 			{
 				...submissionResource.doc,
-				assignment_attachment: submissionFile.value?.file_url,
 				evaluator: evaluator,
 				comments: comments.value,
 				answer: answer.value,
 			},
 			{
 				onSuccess(data) {
+					isDirty.value = false
 					toast.success(__('Changes saved successfully'))
 				},
 			}
@@ -379,7 +383,7 @@ const addNewSubmission = () => {
 
 const saveSubmission = (file) => {
 	isDirty.value = true
-	submissionFile.value = file
+	submissionResource.doc.assignment_attachment = file.file_url
 }
 
 const markLessonProgress = () => {
@@ -430,7 +434,7 @@ const validateFile = (file) => {
 
 const removeSubmission = () => {
 	isDirty.value = true
-	submissionFile.value = null
+	submissionResource.doc.assignment_attachment = ''
 }
 
 const canGradeSubmission = computed(() => {

frontend/src/components/BatchCard.vue

@@ -6,24 +6,26 @@
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
 			{{ batch.title }}
 		</div>
-		<div
+		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
-			class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
-		>
-			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">
-				{{ __('Seats Left') }}
-			</span>
-			<span v-else-if="batch.seats_left == 1">
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
+			variant="subtle"
+			theme="green"
+			size="md"
+			class="self-start"
+			:label="
+				batch.seats_left +
+				' ' +
+				(batch.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
+			"
+		/>
+		<Badge
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
-		>
-			{{ __('Sold Out') }}
-		</div>
+			variant="subtle"
+			theme="red"
+			size="md"
+			class="self-start"
+			:label="__('Sold Out')"
+		/>
 		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>
@@ -70,6 +72,7 @@
 	</div>
 </template>
 <script setup>
+import { Badge } from 'frappe-ui'
 import { formatTime } from '@/utils'
 import { Clock, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'

frontend/src/components/BatchCourses.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold text-ink-gray-9">
+			<div class="font-medium text-ink-gray-9">
 				{{ __('Courses') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="openCourseModal()">

frontend/src/components/BatchFeedback.vue

@@ -1,7 +1,7 @@
 <template>
 	<div v-if="user.data?.is_student">
 		<div>
-			<div class="leading-5 mb-4">
+			<div class="leading-5 mb-4 text-ink-gray-7">
 				<div v-if="readOnly">
 					{{ __('Thank you for providing your feedback.') }}
 					<span

frontend/src/components/BatchOverlay.vue

@@ -1,28 +1,29 @@
 <template>
 	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
-		<div
-			v-if="batch.data.seat_count && seats_left > 0"
-			class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
+		<Badge
+			v-if="batch.data.seat_count && batch.data.seats_left > 0"
+			variant="subtle"
+			theme="green"
+			size="md"
 			:class="
 				batch.data.amount || batch.data.courses.length
 					? 'float-right'
 					: 'w-fit mb-4'
 			"
-		>
-			{{ seats_left }}
-			<span v-if="seats_left > 1">
-				{{ __('Seats Left') }}
-			</span>
-			<span v-else-if="seats_left == 1">
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
-			v-else-if="batch.data.seat_count && seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
-		>
-			{{ __('Sold Out') }}
-		</div>
+			:label="
+				batch.data.seats_left +
+				' ' +
+				(batch.data.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
+			"
+		/>
+		<Badge
+			v-else-if="batch.data.seat_count && batch.data.seats_left <= 0"
+			variant="subtle"
+			theme="red"
+			size="md"
+			class="float-right"
+			:label="__('Sold Out')"
+		/>
 		<div
 			v-if="batch.data.amount"
 			class="text-lg font-semibold mb-3 text-ink-gray-9"
@@ -54,6 +55,7 @@
 				{{ batch.data.timezone }}
 			</span>
 		</div>
+
 		<div v-if="!readOnlyMode">
 			<router-link
 				v-if="canAccessBatch"
@@ -113,7 +115,7 @@
 				{{ __('Enroll Now') }}
 			</Button>
 			<router-link
-				v-if="isModerator"
+				v-if="canEditBatch"
 				:to="{
 					name: 'BatchForm',
 					params: {
@@ -135,7 +137,7 @@
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Button, createResource, toast } from 'frappe-ui'
+import { Badge, Button, createResource, toast } from 'frappe-ui'
 import {
 	BookOpen,
 	Clock,
@@ -190,15 +192,10 @@ const enrollInBatch = () => {
 	)
 }
 
-const seats_left = computed(() => {
-	if (props.batch.data?.seat_count) {
-		return props.batch.data?.seat_count - props.batch.data?.students?.length
-	}
-	return null
-})
-
 const isStudent = computed(() => {
-	return props.batch.data?.students?.includes(user.data?.name)
+	return user.data
+		? props.batch.data?.students?.includes(user.data?.name)
+		: false
 })
 
 const isModerator = computed(() => {
@@ -209,7 +206,22 @@ const isEvaluator = computed(() => {
 	return user.data?.is_evaluator
 })
 
+const isInstructor = computed(() => {
+	return (
+		props.batch.data?.instructors?.filter(
+			(instructor) => instructor.name === user.data?.name
+		).length > 0
+	)
+})
+
 const canAccessBatch = computed(() => {
+	if (!user.data) {
+		return false
+	}
 	return isModerator.value || isStudent.value || isEvaluator.value
 })
+
+const canEditBatch = computed(() => {
+	return isModerator.value || isInstructor.value
+})
 </script>

frontend/src/components/BatchStudents.vue

@@ -1,70 +1,8 @@
 <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 class="text-ink-gray-9 font-medium">
+				{{ studentCount.data ?? 0 }} {{ __('Students') }}
 			</div>
 			<Button v-if="!readOnlyMode" @click="openStudentModal()">
 				<template #prefix>
@@ -76,7 +14,8 @@
 
 		<div v-if="students.data?.length">
 			<ListView
-				:columns="getStudentColumns()"
+				class="max-h-[75vh]"
+				:columns="studentColumns"
 				:rows="students.data"
 				row-key="name"
 				:options="{
@@ -88,7 +27,7 @@
 				>
 					<ListHeaderItem
 						:item="item"
-						v-for="item in getStudentColumns()"
+						v-for="item in studentColumns"
 						:title="item.label"
 					>
 						<template #prefix="{ item }">
@@ -104,7 +43,7 @@
 					<ListRow
 						:row="row"
 						v-for="row in students.data"
-						class="group cursor-pointer"
+						class="group cursor-pointer hover:bg-surface-gray-2 rounded"
 						@click="openStudentProgressModal(row)"
 					>
 						<template #default="{ column, item }">
@@ -149,9 +88,14 @@
 						</div>
 					</template>
 				</ListSelectBanner>
+				<div class="mt-4 flex justify-center" v-if="students.hasNextPage">
+					<Button @click="students.next()">
+						{{ __('Load More') }}
+					</Button>
+				</div>
 			</ListView>
 		</div>
-		<div v-else class="text-sm italic text-ink-gray-5">
+		<div v-else-if="!students.loading" class="text-sm italic text-ink-gray-5">
 			{{ __('There are no students in this batch.') }}
 		</div>
 	</div>
@@ -170,8 +114,8 @@
 <script setup>
 import {
 	Avatar,
-	AxisChart,
 	Button,
+	createListResource,
 	createResource,
 	FeatherIcon,
 	ListHeader,
@@ -181,30 +125,17 @@ import {
 	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 { Plus, Trash2 } from 'lucide-vue-next'
+import { ref } 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({
@@ -214,45 +145,48 @@ const props = defineProps({
 	},
 })
 
-const students = createResource({
-	url: 'lms.lms.utils.get_batch_students',
+const studentCount = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['batch_student_count', props.batch?.data?.name],
 	params: {
+		doctype: 'LMS Batch Enrollment',
+		filters: { batch: props.batch?.data?.name },
+	},
+	auto: true,
+})
+
+const students = createListResource({
+	doctype: 'LMS Batch Enrollment',
+	url: 'lms.lms.utils.get_batch_students',
+	cache: ['batch_students', props.batch?.data?.name],
+	pageLength: 50,
+	filters: {
 		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 studentColumns = [
+	{
+		label: 'Full Name',
+		key: 'full_name',
+		width: '25rem',
+		icon: 'user',
+	},
+	{
+		label: 'Progress',
+		key: 'progress',
+		width: '15rem',
+		icon: 'activity',
+	},
+	{
+		label: 'Last Active',
+		key: 'last_active',
+		width: '10rem',
+		align: 'center',
+		icon: 'clock',
+	},
+]
 
 const openStudentModal = () => {
 	showStudentModal.value = true
@@ -281,6 +215,7 @@ const removeStudents = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				students.reload()
+				studentCount.reload()
 				props.batch.reload()
 				toast.success(__('Students deleted successfully'))
 				unselectAll()
@@ -288,67 +223,4 @@ const removeStudents = (selections, 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

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

frontend/src/components/Controls/Autocomplete.vue

@@ -1,138 +1,95 @@
 <template>
 	<div>
+		<!-- Label -->
 		<div v-if="label" class="text-xs text-ink-gray-5 mb-1">
 			{{ __(label) }}
 			<span class="text-ink-red-3" v-if="attrs.required">*</span>
 		</div>
-		<Combobox
-			v-model="selectedValue"
-			nullable
-			v-slot="{ open: isComboboxOpen }"
-		>
-			<Popover class="w-full" v-model:show="showOptions">
-				<template #target="{ open: openPopover, togglePopover }">
-					<slot name="target" v-bind="{ open: openPopover, togglePopover }">
-						<div class="w-full">
-							<button
-								class="flex w-full items-center justify-between focus:outline-none"
-								:class="inputClasses"
-								@click="() => togglePopover()"
-								:disabled="attrs.readonly"
+		<Combobox v-model="selectedValue" nullable v-slot="{ open }">
+			<div class="relative w-full">
+				<ComboboxInput
+					class="form-input w-full"
+					:class="inputClasses"
+					type="text"
+					:value="selectedValue"
+					autocomplete="off"
+					@click="onFocus"
+				/>
+				<ComboboxButton ref="trigger" class="hidden" />
+
+				<!-- Dropdown -->
+				<ComboboxOptions
+					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal py-1 text-base border-2 border-outline-gray-modals shadow-lg"
+				>
+					<input
+						ref="search"
+						v-model="query"
+						class="form-input w-[98%] rounded-tl-lg rounded-tr-lg mb-1 mx-1"
+						type="text"
+						placeholder="Search"
+						autocomplete="off"
+					/>
+					<!-- Options -->
+					<div class="my-1 max-h-[12rem] overflow-y-auto px-1.5">
+						<template v-for="group in groups" :key="group.key">
+							<div
+								v-if="group.group && !group.hideLabel"
+								class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
 							>
-								<div class="flex items-center">
-									<slot name="prefix" />
-									<span
-										class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-										v-if="selectedValue"
-									>
-										{{ displayValue(selectedValue) }}
-									</span>
-									<span class="text-base leading-5 text-ink-gray-4" v-else>
-										{{ placeholder || '' }}
-									</span>
-								</div>
-								<ChevronDown class="h-4 w-4 stroke-1.5" />
-							</button>
-						</div>
-					</slot>
-				</template>
-				<template #body="{ isOpen }">
-					<div v-show="isOpen">
-						<div
-							class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
-						>
-							<div class="relative px-1.5 pt-0.5">
-								<ComboboxInput
-									ref="search"
-									class="form-input w-full"
-									type="text"
-									@change="
-										(e) => {
-											query = e.target.value
-										}
-									"
-									:value="query"
-									autocomplete="off"
-									placeholder="Search"
-								/>
-								<button
-									class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
-									@click="selectedValue = null"
-								>
-									<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
-								</button>
+								{{ group.group }}
 							</div>
-							<ComboboxOptions
-								class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-								static
+
+							<ComboboxOption
+								v-for="option in group.items"
+								:key="option.value"
+								:value="option.value"
+								v-slot="{ active }"
 							>
-								<div
-									class="mt-1.5"
-									v-for="group in groups"
-									:key="group.key"
-									v-show="group.items.length > 0"
-								>
-									<div
-										v-if="group.group && !group.hideLabel"
-										class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
-									>
-										{{ group.group }}
-									</div>
-									<ComboboxOption
-										as="template"
-										v-for="option in group.items"
-										:key="option.value"
-										:value="option"
-										v-slot="{ active, selected }"
-									>
-										<li
-											:class="[
-												'flex items-center rounded px-2.5 py-2 text-base',
-												{ 'bg-surface-gray-2': active },
-											]"
-										>
-											<slot
-												name="item-prefix"
-												v-bind="{ active, selected, option }"
-											/>
-											<slot
-												name="item-label"
-												v-bind="{ active, selected, option }"
-											>
-												<div class="flex flex-col space-y-1 text-ink-gray-8">
-													<div>
-														{{ option.label }}
-													</div>
-													<div
-														v-if="
-															option.description &&
-															option.description != option.label
-														"
-														class="text-xs text-ink-gray-7"
-														v-html="option.description"
-													></div>
-												</div>
-											</slot>
-										</li>
-									</ComboboxOption>
-								</div>
 								<li
-									v-if="groups.length == 0"
-									class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
+									:class="[
+										'flex items-center rounded px-2.5 py-2 text-base cursor-pointer',
+										{ 'bg-surface-gray-2': active },
+									]"
 								>
-									No results found
+									<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>
 								</li>
-							</ComboboxOptions>
-							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
-								<slot
-									name="footer"
-									v-bind="{ value: search?.el._value, close }"
-								></slot>
-							</div>
+							</ComboboxOption>
+						</template>
+
+						<div
+							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') }}
 						</div>
 					</div>
-				</template>
-			</Popover>
+
+					<!-- Footer -->
+					<div
+						v-if="slots.footer"
+						class="border-t border-outline-gray-modals p-1.5 pb-0.5"
+					>
+						<slot
+							name="footer"
+							v-bind="{
+								value: selectedValue,
+								close,
+							}"
+						/>
+					</div>
+				</ComboboxOptions>
+			</div>
 		</Combobox>
 	</div>
 </template>
@@ -143,15 +100,15 @@ import {
 	ComboboxInput,
 	ComboboxOptions,
 	ComboboxOption,
+	ComboboxButton,
 } from '@headlessui/vue'
-import { Popover } from 'frappe-ui'
-import { ChevronDown, X } from 'lucide-vue-next'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
+import { watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
 	modelValue: {
-		type: String,
-		default: '',
+		type: [String, Object],
+		default: null,
 	},
 	options: {
 		type: Array,
@@ -182,109 +139,95 @@ const props = defineProps({
 		default: true,
 	},
 })
+
 const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
-
-const query = ref('')
-const showOptions = ref(false)
+const trigger = ref(null)
 const search = ref(null)
-
 const attrs = useAttrs()
 const slots = useSlots()
-
+const selectedValue = ref(props.modelValue)
+const query = ref('')
 const valuePropPassed = computed(() => 'value' in attrs)
 
-const selectedValue = computed({
-	get() {
-		return valuePropPassed.value ? attrs.value : props.modelValue
-	},
-	set(val) {
-		query.value = ''
-		if (val) {
-			showOptions.value = false
-		}
-		emit(valuePropPassed.value ? 'change' : 'update:modelValue', val)
-	},
+watch(selectedValue, (val) => {
+	query.value = ''
+	emit(valuePropPassed.value ? 'change' : 'update:modelValue', val)
 })
 
-function close() {
-	showOptions.value = false
+function clearValue() {
+	emit('update:modelValue', null)
 }
 
 const groups = computed(() => {
-	if (!props.options || props.options.length == 0) return []
+	if (!props.options?.length) return []
 
-	let groups = props.options[0]?.group
+	const normalized = props.options[0]?.group
 		? props.options
 		: [{ group: '', items: props.options }]
-
-	return groups
-		.map((group, i) => {
-			return {
-				key: i,
-				group: group.group,
-				hideLabel: group.hideLabel || false,
-				items: props.filterable ? filterOptions(group.items) : group.items,
-			}
-		})
+	return normalized
+		.map((group, i) => ({
+			key: i,
+			group: group.group,
+			hideLabel: group.hideLabel || false,
+			items: props.filterable ? filterOptions(group.items) : group.items,
+		}))
 		.filter((group) => group.items.length > 0)
 })
 
 function filterOptions(options) {
-	if (!query.value) {
-		return options
-	}
-	return options.filter((option) => {
-		let searchTexts = [option.label, option.value]
-		return searchTexts.some((text) =>
-			(text || '').toString().toLowerCase().includes(query.value.toLowerCase())
-		)
+	if (!query.value) return options
+	const q = query.value.toLowerCase()
+	return options.filter((option) =>
+		[option.label, option.value]
+			.filter(Boolean)
+			.some((text) => text.toString().toLowerCase().includes(q))
+	)
+}
+
+watchDebounced(
+	query,
+	(val) => {
+		emit('update:query', val)
+	},
+	{ debounce: 300 }
+)
+
+const onFocus = () => {
+	trigger.value?.$el.click()
+	nextTick(() => {
+		search.value?.focus()
 	})
 }
 
-function displayValue(option) {
-	if (typeof option === 'string') {
-		let allOptions = groups.value.flatMap((group) => group.items)
-		let selectedOption = allOptions.find((o) => o.value === option)
-		return selectedOption?.label || option
-	}
-	return option?.label
+const close = () => {
+	selectedValue.value = null
+	trigger.value?.$el.click()
 }
 
-watch(query, (q) => {
-	emit('update:query', q)
-})
-
-watch(showOptions, (val) => {
-	if (val) {
-		nextTick(() => {
-			search.value.el.focus()
-		})
-	}
-})
-
-const textColor = computed(() => {
-	return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
-})
+const textColor = computed(() =>
+	props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
+)
 
 const inputClasses = computed(() => {
-	let sizeClasses = {
+	const sizeClasses = {
 		sm: 'text-base rounded h-7',
 		md: 'text-base rounded h-8',
 		lg: 'text-lg rounded-md h-10',
 		xl: 'text-xl rounded-md h-10',
 	}[props.size]
 
-	let paddingClasses = {
+	const paddingClasses = {
 		sm: 'py-1.5 px-2',
 		md: 'py-1.5 px-2.5',
 		lg: 'py-1.5 px-3',
 		xl: 'py-1.5 px-3',
 	}[props.size]
 
-	let variant = props.disabled ? 'disabled' : props.variant
-	let variantClasses = {
+	const variant = props.disabled ? 'disabled' : props.variant
+
+	const 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: [
@@ -303,6 +246,4 @@ const inputClasses = computed(() => {
 		'transition-colors w-full',
 	]
 })
-
-defineExpose({ query })
 </script>

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: {
@@ -95,14 +95,14 @@ const value = computed({
 	get: () => (valuePropPassed.value ? attrs.value : props.modelValue),
 	set: (val) => {
 		return (
-			val?.value &&
-			emit(valuePropPassed.value ? 'change' : 'update:modelValue', val?.value)
+			val && emit(valuePropPassed.value ? 'change' : 'update:modelValue', val)
 		)
 	},
 })
 
 const autocomplete = ref(null)
 const text = ref('')
+const settingsStore = useSettings()
 
 watchDebounced(
 	() => autocomplete.value?.query,
@@ -121,6 +121,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 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

@@ -5,7 +5,7 @@
 		style="min-height: 350px"
 	>
 		<div
-			class="w-[100%] h-[168px] bg-cover bg-center bg-no-repeat"
+			class="w-[100%] h-[168px] bg-cover bg-center bg-no-repeat border-t border-x rounded-t-md"
 			:style="
 				course.image
 					? { backgroundImage: `url('${encodeURI(course.image)}')` }
@@ -62,7 +62,7 @@
 					<Tooltip :text="__('Enrolled Students')">
 						<span class="flex items-center">
 							<Users class="h-4 w-4 stroke-1.5 mr-1" />
-							{{ course.enrollments }}
+							{{ formatAmount(course.enrollments) }}
 						</span>
 					</Tooltip>
 				</div>
@@ -116,28 +116,31 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>
 
-				<div v-if="course.paid_course" class="font-semibold">
-					{{ course.price }}
-				</div>
+				<div class="flex items-center space-x-2">
+					<div v-if="course.paid_course" class="font-semibold">
+						{{ course.price }}
+					</div>
 
-				<Tooltip
-					v-if="course.paid_certificate || course.enable_certification"
-					:text="__('Get Certified')"
-				>
-					<GraduationCap class="size-5 stroke-1.5 text-ink-gray-7" />
-				</Tooltip>
+					<Tooltip
+						v-if="course.paid_certificate || course.enable_certification"
+						:text="__('Get Certified')"
+					>
+						<GraduationCap class="size-5 stroke-1.5 text-ink-gray-7" />
+					</Tooltip>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
 import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next'
-import UserAvatar from '@/components/UserAvatar.vue'
 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()
 
@@ -149,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,11 +140,6 @@
 			</div>
 		</div>
 	</div>
-	<CourseProgressSummary
-		v-model="showProgressModal"
-		:courseName="course.data.name"
-		:enrollments="course.data.enrollments"
-	/>
 </template>
 <script setup>
 import {
@@ -188,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: {
@@ -214,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', {
@@ -289,7 +259,7 @@ const fetchCertificate = () => {
 	})
 }
 
-const showProgressSummary = () => {
-	showProgressModal.value = true
-}
+const isAdmin = computed(() => {
+	return user.data?.is_moderator || is_instructor()
+})
 </script>

frontend/src/components/CourseInstructors.vue

@@ -1,11 +1,12 @@
 <template>
-	<div class="">
+	<div class="text-ink-gray-7">
 		<span v-if="instructors?.length == 1">
 			<router-link
 				:to="{
 					name: 'Profile',
 					params: { username: instructors[0].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[0].full_name }}
 			</router-link>
@@ -16,6 +17,7 @@
 					name: 'Profile',
 					params: { username: instructors[0].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[0].first_name }}
 			</router-link>
@@ -25,6 +27,7 @@
 					name: 'Profile',
 					params: { username: instructors[1].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[1].first_name }}
 			</router-link>
@@ -35,6 +38,7 @@
 					name: 'Profile',
 					params: { username: instructors[0].username },
 				}"
+				class="text-ink-gray-7 hover:text-ink-gray-9"
 			>
 				{{ instructors[0].first_name }}
 			</router-link>

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

@@ -80,7 +80,7 @@ const props = defineProps({
 		required: true,
 	},
 	membership: {
-		type: Object,
+		type: Object || null,
 		required: false,
 	},
 })

frontend/src/components/DesktopLayout.vue

@@ -1,19 +1,13 @@
 <template>
-	<div class="relative flex h-full flex-col">
-		<div class="h-full flex-1">
-			<div class="flex h-screen text-base bg-surface-white">
-				<div
-					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
-				>
-					<AppSidebar />
-				</div>
-				<div class="w-full overflow-auto" id="scrollContainer">
-					<slot />
-				</div>
-			</div>
+	<div class="flex h-screen w-screen">
+		<div class="h-full border-r bg-surface-menu-bar">
+			<AppSidebar />
+		</div>
+		<div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
+			<slot />
 		</div>
 	</div>
 </template>
 <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/JobCard.vue

@@ -3,7 +3,7 @@
 		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3"
 	>
 		<div class="flex space-x-4 mb-4">
-			<div class="flex flex-col space-y-2 flex-1">
+			<div class="flex flex-col space-y-2 flex-1 break-all">
 				<div class="text-lg font-semibold text-ink-gray-9">
 					{{ job.company_name }}
 				</div>
@@ -33,6 +33,9 @@
 			<Badge>
 				{{ job.type }}
 			</Badge>
+			<Badge v-if="job.work_mode">
+				{{ job.work_mode }}
+			</Badge>
 			<Badge>
 				{{ dayjs(job.creation).fromNow() }}
 			</Badge>

frontend/src/components/LiveClass.vue

@@ -1,7 +1,7 @@
 <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"
+		class="flex items-center space-x-2 mb-5 bg-surface-amber-1 py-1 px-2 rounded-md text-ink-amber-3 text-xs"
 	>
 		<AlertCircle class="size-4 stroke-1.5" />
 		<span>
@@ -54,8 +54,8 @@
 				<div class="flex items-center space-x-2">
 					<Clock class="w-4 h-4 stroke-1.5" />
 					<span>
-						{{ formatTime(cls.time) }} -
-						{{ dayjs(getClassEnd(cls)).format('HH:mm A') }}
+						{{ dayjs(getClassStart(cls)).format('hh:mm A') }} -
+						{{ dayjs(getClassEnd(cls)).format('hh:mm A') }}
 					</span>
 				</div>
 				<div
@@ -107,7 +107,11 @@
 		v-model:reloadLiveClasses="liveClasses"
 	/>
 
-	<LiveClassAttendance v-model="showAttendance" :live_class="attendanceFor" />
+	<LiveClassAttendance
+		v-if="showAttendance"
+		v-model="showAttendance"
+		:live_class="attendanceFor"
+	/>
 </template>
 <script setup>
 import { createListResource, Button, Tooltip } from 'frappe-ui'
@@ -181,8 +185,12 @@ const canAccessClass = (cls) => {
 	return true
 }
 
+const getClassStart = (cls) => {
+	return new Date(`${cls.date}T${cls.time}`)
+}
+
 const getClassEnd = (cls) => {
-	const classStart = new Date(`${cls.date}T${cls.time}`)
+	const classStart = getClassStart(cls)
 	return new Date(classStart.getTime() + cls.duration * 60000)
 }
 

frontend/src/components/MobileLayout.vue

@@ -80,6 +80,7 @@ onMounted(() => {
 		{},
 		{
 			onSuccess(data) {
+				destructureSidebarLinks()
 				filterLinksToShow(data)
 				addOtherLinks()
 			},
@@ -103,6 +104,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])) {
@@ -165,6 +176,14 @@ const addAssignments = () => {
 	})
 }
 
+const addProgrammingExercises = () => {
+	otherLinks.value.push({
+		label: 'Programming Exercises',
+		icon: 'Code',
+		to: 'ProgrammingExercises',
+	})
+}
+
 const addPrograms = async () => {
 	let canAddProgram = await checkIfCanAddProgram()
 	if (!canAddProgram) return

frontend/src/components/Modals/AnnouncementModal.vue

@@ -15,20 +15,18 @@
 	>
 		<template #body-content>
 			<div class="flex flex-col gap-4">
-				<div class="">
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Subject') }}
-						<span class="text-ink-red-3">*</span>
-					</div>
-					<Input type="text" v-model="announcement.subject" />
-				</div>
-				<div class="">
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Reply To') }}
-						<span class="text-ink-red-3">*</span>
-					</div>
-					<Input type="text" v-model="announcement.replyTo" />
-				</div>
+				<FormControl
+					:label="__('Subject')"
+					type="text"
+					v-model="announcement.subject"
+					:required="true"
+				/>
+				<FormControl
+					:label="__('Reply To')"
+					type="text"
+					v-model="announcement.replyTo"
+					:required="true"
+				/>
 				<div class="mb-4">
 					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Announcement') }}
@@ -45,7 +43,13 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Input, TextEditor, createResource, toast } from 'frappe-ui'
+import {
+	Dialog,
+	FormControl,
+	TextEditor,
+	createResource,
+	toast,
+} from 'frappe-ui'
 import { reactive } from 'vue'
 
 const show = defineModel()

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,7 +2,7 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Add a course'),
+			title: __('Add Course'),
 			size: 'sm',
 			actions: [
 				{
@@ -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' },
 						})
 					}
 				"

frontend/src/components/Modals/BatchStudentProgress.vue

@@ -11,7 +11,7 @@
 					<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">
+							<div class="text-xl font-semibold text-ink-gray-9">
 								{{ student.full_name }}
 							</div>
 							<Badge
@@ -36,7 +36,9 @@
 						v-if="Object.keys(student.assessments).length"
 						class="space-y-2 text-sm"
 					>
-						<div class="flex items-center border-b pb-1 font-medium">
+						<div
+							class="flex items-center border-b pb-1 font-medium text-ink-gray-9"
+						>
 							<span class="flex-1">
 								{{ __('Assessment') }}
 							</span>
@@ -86,7 +88,9 @@
 						v-if="Object.keys(student.courses).length"
 						class="space-y-2 text-sm"
 					>
-						<div class="flex items-center border-b pb-1 font-medium">
+						<div
+							class="flex items-center border-b pb-1 font-medium text-ink-gray-9"
+						>
 							<span class="flex-1">
 								{{ __('Courses') }}
 							</span>

frontend/src/components/Modals/ChapterModal.vue

@@ -50,7 +50,7 @@
 								<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
 							</div>
 							<div class="flex flex-col">
-								<span>
+								<span class="text-ink-gray-9">
 									{{ chapter.scorm_package.file_name }}
 								</span>
 								<span class="text-sm text-ink-gray-4 mt-1">
@@ -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,230 +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>

frontend/src/components/Modals/EvaluationModal.vue

@@ -2,7 +2,7 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Schedule Evaluation'),
+			title: __('Schedule your evaluation'),
 			size: 'xl',
 			actions: [
 				{
@@ -14,64 +14,68 @@
 		}"
 	>
 		<template #body-content>
-			<div class="flex flex-col gap-4">
-				<div>
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Course') }}
+			<div class="flex flex-col gap-4 text-base max-h-[60vh]">
+				<FormControl
+					v-model="evaluation.course"
+					type="select"
+					:label="__('Course')"
+					:options="getCourses()"
+				/>
+				<div v-if="slots.data?.length" class="space-y-4 overflow-y-auto mt-4">
+					<div class="text-ink-gray-9 font-medium">
+						{{ __('Available Slots') }}
 					</div>
-					<Select v-model="evaluation.course" :options="getCourses()" />
-				</div>
-				<div>
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Date') }}
-					</div>
-					<FormControl
-						type="date"
-						v-model="evaluation.date"
-						:min="
-							dayjs()
-								.add(dayjs.duration({ days: 1 }))
-								.format('YYYY-MM-DD')
-						"
-					/>
-				</div>
-				<div v-if="slots.data?.length">
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Select a slot') }}
-					</div>
-					<div class="grid grid-cols-2 gap-2">
-						<div v-for="slot in slots.data">
-							<div
-								class="text-base text-center border rounded-md text-ink-gray-8 bg-surface-gray-3 p-2 cursor-pointer"
-								@click="saveSlot(slot)"
-								:class="{
-									'border-outline-gray-4':
-										evaluation.start_time == slot.start_time,
-								}"
-							>
-								{{ formatTime(slot.start_time) }} -
-								{{ formatTime(slot.end_time) }}
+					<div class="space-y-5">
+						<div v-for="row in slots.data" class="space-y-2">
+							<div class="flex items-center text-ink-gray-7 space-x-2">
+								<Calendar class="size-3" />
+								<div class="text-ink-gray-9">
+									{{ dayjs(row.date).format('DD MMMM YYYY') }}
+								</div>
+								<div>&middot;</div>
+								<div class="text-ink-gray-5">
+									{{ row.day }}
+								</div>
+							</div>
+							<div class="grid grid-cols-3 gap-2">
+								<div
+									v-for="slot in row.slots"
+									class="text-base text-center border rounded-md text-ink-gray-8 p-2 cursor-pointer text-ink-gray-7 hover:bg-surface-gray-2 hover:border-outline-gray-3"
+									@click="saveSlot(slot, row)"
+									:class="{
+										'border-outline-gray-4 text-ink-gray-9':
+											evaluation.date == row.date &&
+											evaluation.start_time == slot.start_time,
+									}"
+								>
+									{{ formatTime(slot.start_time) }} -
+									{{ formatTime(slot.end_time) }}
+								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div
-					v-else-if="evaluation.course && evaluation.date"
-					class="text-sm italic text-ink-red-4"
-				>
-					{{ __('No slots available for this date.') }}
+				<div v-else class="text-ink-red-3">
+					{{ __('No slots available for the selected course.') }}
 				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, Select, FormControl, toast } from 'frappe-ui'
-import { reactive, watch, inject } from 'vue'
+import {
+	call,
+	createResource,
+	dayjs,
+	Dialog,
+	FormControl,
+	toast,
+} from 'frappe-ui'
+import { ref, watch, inject } from 'vue'
+import { Calendar } from 'lucide-vue-next'
 import { formatTime } from '@/utils/'
 
 const user = inject('$user')
-const dayjs = inject('$dayjs')
 const show = defineModel()
 const evaluations = defineModel('reloadEvals')
 
@@ -90,7 +94,7 @@ const props = defineProps({
 	},
 })
 
-const evaluation = reactive({
+const evaluation = ref({
 	course: '',
 	date: '',
 	start_time: '',
@@ -100,48 +104,28 @@ const evaluation = reactive({
 	member: user.data.name,
 })
 
-const createEvaluation = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Certificate Request',
-				batch_name: values.batch,
-				...values,
-			},
-		}
-	},
-})
-
 function submitEvaluation(close) {
-	createEvaluation.submit(evaluation, {
-		validate() {
-			if (!evaluation.course) {
-				return 'Please select a course.'
-			}
-			if (!evaluation.date) {
-				return 'Please select a date.'
-			}
-			if (!evaluation.start_time) {
-				return 'Please select a slot.'
-			}
-			if (dayjs(evaluation.date).isBefore(dayjs(), 'day')) {
-				return 'Please select a future date.'
-			}
-			if (dayjs(evaluation.date).isAfter(dayjs(props.endDate), 'day')) {
-				return `Please select a date before the end date ${dayjs(
-					props.endDate
-				).format('DD MMMM YYYY')}.`
-			}
-		},
-		onSuccess() {
-			evaluations.value.reload()
-			close()
-		},
-		onError(err) {
-			toast.warning(__(err.messages?.[0] || err))
+	if (!evaluation.value.date || !evaluation.value.start_time) {
+		toast.warning(__('Please select a slot for your evaluation.'), {
+			duration: 10,
+		})
+		return
+	}
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'LMS Certificate Request',
+			batch_name: evaluation.value.batch,
+			...evaluation.value,
 		},
 	})
+		.then(() => {
+			evaluations.value.reload()
+			close()
+		})
+		.catch((err) => {
+			console.log(err.messages?.[0] || err)
+			toast.warning(__(err.messages?.[0] || err), { duration: 20 })
+		})
 }
 
 const getCourses = () => {
@@ -156,7 +140,7 @@ const getCourses = () => {
 	}
 
 	if (courses.length === 1) {
-		evaluation.course = courses[0].value
+		evaluation.value.course = courses[0].value
 	}
 
 	return courses
@@ -167,34 +151,22 @@ const slots = createResource({
 	makeParams(values) {
 		return {
 			course: values.course,
-			date: values.date,
 			batch: props.batch,
 		}
 	},
 })
 
 watch(
-	() => evaluation.date,
-	(date) => {
-		evaluation.start_time = ''
-		if (date && evaluation.course) {
-			slots.submit(evaluation)
-		}
-	}
-)
-
-watch(
-	() => evaluation.course,
+	() => evaluation.value.course,
 	(course) => {
-		evaluation.date = ''
-		evaluation.start_time = ''
-		slots.reset()
+		slots.reload(evaluation.value)
 	}
 )
 
-const saveSlot = (slot) => {
-	evaluation.start_time = slot.start_time
-	evaluation.end_time = slot.end_time
-	evaluation.day = slot.day
+const saveSlot = (slot, row) => {
+	evaluation.value.start_time = slot.start_time
+	evaluation.value.end_time = slot.end_time
+	evaluation.value.date = row.date
+	evaluation.value.day = row.day
 }
 </script>