chore(release): Bumped to Version 2.15.0

chore: sync translations from crowdin

.github/helper/update_pot_file.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+set -e
+cd ~ || exit
+
+echo "Setting Up Bench..."
+
+pip install frappe-bench
+bench -v init frappe-bench --skip-assets --skip-redis-config-generation --python "$(which python)" --frappe-branch "${BASE_BRANCH}"
+cd ./frappe-bench || exit
+
+echo "Get LMS..."
+bench get-app --skip-assets lms "${GITHUB_WORKSPACE}"
+
+echo "Generating POT file..."
+bench generate-pot-file --app lms
+
+cd ./apps/lms || exit
+
+echo "Configuring git user..."
+git config user.email "developers@erpnext.com"
+git config user.name "frappe-pr-bot"
+
+echo "Setting the correct git remote..."
+# Here, the git remote is a local file path by default. Let's change it to the upstream repo.
+git remote set-url upstream https://github.com/frappe/lms.git
+
+echo "Creating a new branch..."
+isodate=$(date -u +"%Y-%m-%d")
+branch_name="pot_${BASE_BRANCH}_${isodate}"
+git checkout -b "${branch_name}"
+
+echo "Commiting changes..."
+git add lms/locale/main.pot
+git commit -m "chore: update POT file"
+
+gh auth setup-git
+git push -u upstream "${branch_name}"
+
+echo "Creating a PR..."
+gh pr create --fill --base "${BASE_BRANCH}" --head "${branch_name}" -R frappe/lms

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

@@ -0,0 +1,34 @@
+name: Regenerate POT file (translatable strings)
+on:
+  schedule:
+    - cron: "00 16 * * 5"
+  workflow_dispatch:
+
+jobs:
+  regenerate-pot-file:
+    name: Release
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        branch: ["develop"]
+    permissions:
+      contents: write
+
+    steps:
+        - name: Checkout
+          uses: actions/checkout@v4
+          with:
+            ref: ${{ matrix.branch }}
+
+        - name: Setup Python
+          uses: actions/setup-python@v5
+          with:
+            python-version: "3.12"
+
+        - name: Run script to update POT file
+          run: |
+            bash ${GITHUB_WORKSPACE}/.github/helper/update_pot_file.sh
+          env:
+            GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+            BASE_BRANCH: ${{ matrix.branch }}

.github/workflows/make_release_pr.yml

@@ -0,0 +1,27 @@
+name: Create weekly release
+on:
+  schedule:
+    # 13:00 UTC -> 7pm IST on every Wednesday
+    - cron: '30 4 * * 3'
+  workflow_dispatch:
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+
+    steps:
+      - uses: octokit/request-action@v2.x
+        with:
+          route: POST /repos/{owner}/{repo}/pulls
+          owner: frappe
+          repo: lms
+          title: |-
+            "chore: merge 'develop' into 'main'"
+          body: "Automated weekly release"
+          base: main
+          head: develop
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}

.github/workflows/on_release.yml

@@ -0,0 +1,32 @@
+name: Generate Semantic Release
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Setup dependencies
+        run: |
+          npm install @semantic-release/git @semantic-release/exec --no-save
+      - name: Create Release
+        env:
+          GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GIT_AUTHOR_NAME: "Frappe PR Bot"
+          GIT_AUTHOR_EMAIL: "developers@frappe.io"
+          GIT_COMMITTER_NAME: "Frappe PR Bot"
+          GIT_COMMITTER_EMAIL: "developers@frappe.io"
+        run: npx semantic-release

.github/workflows/release_notes.yml

@@ -0,0 +1,39 @@
+# This action:
+#
+# 1. Generates release notes using github API.
+# 2. Strips unnecessary info like chore/style etc from notes.
+# 3. Updates release info.
+
+name: 'Release Notes'
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag_name:
+        description: 'Tag of release like v2.0.0'
+        required: true
+        type: string
+  release:
+    types: [released]
+
+permissions:
+  contents: read
+
+jobs:
+  regen-notes:
+    name: 'Regenerate release notes'
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Update notes
+      run: |
+        NEW_NOTES=$(gh api --method POST -H "Accept: application/vnd.github+json"  /repos/frappe/lms/releases/generate-notes  -f tag_name=$RELEASE_TAG \
+          | jq -r '.body' \
+          | sed -E '/^\* (chore|ci|test|docs|style)/d' \
+          | sed -E 's/by @mergify //'
+        )
+        RELEASE_ID=$(gh api -H "Accept: application/vnd.github+json" /repos/frappe/lms/releases/tags/$RELEASE_TAG | jq -r '.id')
+        gh api --method PATCH -H "Accept: application/vnd.github+json" /repos/frappe/lms/releases/$RELEASE_ID -f body="$NEW_NOTES"
+      env:
+        GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+        RELEASE_TAG: ${{ github.event.inputs.tag_name || github.event.release.tag_name }}

.github/workflows/ui-tests.yml

@@ -99,6 +99,7 @@ jobs:
           cd ~/frappe-bench/
           bench --site lms.test execute frappe.utils.install.complete_setup_wizard
           bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
+          bench --site lms.test set-password frappe@example.com admin
 
       - name: cypress pre-requisites
         run: |

.gitignore

@@ -12,3 +12,4 @@ node_modules
 package-lock.json
 lms/public/frontend
 lms/www/lms.html
+frappe-ui

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "frappe-ui"]
+	path = frappe-ui
+	url = https://github.com/frappe/frappe-ui

.releaserc

@@ -0,0 +1,21 @@
+{
+	"branches": ["develop"],
+	"plugins": [
+		"@semantic-release/commit-analyzer", {
+			"preset": "angular"
+		},
+		"@semantic-release/release-notes-generator",
+		[
+			"@semantic-release/exec", {
+				"prepareCmd": 'sed -ir "s/[0-9]*\.[0-9]*\.[0-9]*/${nextRelease.version}/" lms/__init__.py'
+			}
+		],
+		[
+			"@semantic-release/git", {
+				"assets": ["lms/__init__.py"],
+				"message": "chore(release): Bumped to Version ${nextRelease.version}"
+			}
+		],
+		"@semantic-release/github"
+	]
+}

README.md

@@ -75,7 +75,13 @@ cd apps/lms/docker
 docker-compose up
 ```
 
-Wait for some time until the setup script creates a site. After that, you can access `http://localhost:8000` in your browser and the app's login screen should show up.
+Wait for some time until the setup script creates a site. After that, you can access `http://localhost:8000` in your browser and the app's login screen should appear.
+You'll have to go through the setup wizard to set up the website the first time you access it. Log in using the following credentials to complete the setup wizard.
+
+```
+Username: Administrator
+password: admin
+```
 
 ### Frappe Bench
 

crowdin.yml

@@ -0,0 +1,8 @@
+files:
+  - source: /lms/locale/main.pot
+    translation: /lms/locale/%two_letters_code%.po
+pull_request_title: "chore: sync translations from crowdin"
+pull_request_labels:
+  - translation
+commit_message: "chore: %language% translations"
+append_commit_message: false

cypress.config.js

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

cypress/e2e/course_creation.cy.js

@@ -1,133 +1,159 @@
 describe("Course Creation", () => {
 	it("creates a new course", () => {
 		cy.login();
-		cy.visit("/courses");
+		cy.wait(1000);
+		cy.visit("/lms/courses");
+
 		// Create a course
-		cy.get("a.btn").contains("Create a Course").click();
+		cy.get("header").children().last().children().last().click();
-		cy.wait(1000);
-		cy.url().should("include", "/courses/new-course/edit");
-		cy.get("#title").type("Test Course");
-		cy.get("#intro").type("Test Course Short Introduction");
-		cy.get("#description").type("Test Course Description");
-		cy.get("#video-link").type("-LPmw2Znl2c");
-		cy.get("#tags-input").type("Test");
-		cy.get("#published").check();
 		cy.wait(1000);
+		cy.url().should("include", "/courses/new/edit");
+
+		cy.get("label").contains("Title").type("Test Course");
+		cy.get("label")
+			.contains("Short Introduction")
+			.type("Test Course Short Introduction to test the UI");
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"Test Course Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+		);
+
+		cy.fixture("profile.png", "base64").then((fileContent) => {
+			cy.get('input[type="file"]').attachFile({
+				fileContent,
+				fileName: "profile.png",
+				mimeType: "image/png",
+				encoding: "base64",
+			});
+		});
+
+		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.get("input")
+					.invoke("attr", "aria-controls")
+					.as("instructor_list_id");
+			});
+		cy.get("@instructor_list_id").then((instructor_list_id) => {
+			cy.get(`[id^=${instructor_list_id}`)
+				.should("be.visible")
+				.within(() => {
+					cy.get("[id^=headlessui-combobox-option-").first().click();
+				});
+		});
+
+		cy.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.link("Course Outline").click();
+		cy.button("Add Chapter").click();
 
 		cy.wait(1000);
-		cy.get(".edit-header .btn-add-chapter").click();
+		cy.get("[id^=headlessui-dialog-panel-")
-		cy.wait(500);
+			.should("be.visible")
-		cy.get("#chapter-title").type("Test Chapter");
+			.within(() => {
-		cy.get("#chapter-description").type("Test Chapter Description");
+				cy.get("label").contains("Title").type("Test Chapter");
-		cy.button("Save").click();
+				cy.button("Create").click();
+			});
 
 		// Add Lesson
 		cy.wait(1000);
-		cy.link("Add Lesson").click();
+		cy.button("Add Lesson").click();
+		cy.wait(1000);
+		cy.url().should("include", "/learn/1-1/edit");
 		cy.wait(1000);
-		cy.get("#lesson-title").type("Test Lesson");
 
-		// Content
+		cy.get("label").contains("Title").type("Test Lesson");
-		cy.get(".collapse-section.collapsed:first").click();
+
-		cy.get("#lesson-content .ce-block")
+		cy.get("#content .ce-block").type(
-			.click()
+			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
-			.type(
+		);
-				"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now. {enter}"
-			);
-		cy.get("#lesson-content .ce-toolbar__plus").click();
-		cy.get('#lesson-content [data-item-name="youtube"]').click();
-		cy.get('input[data-fieldname="youtube"]').type("GoDtyItReto");
-		cy.button("Insert").click();
-		cy.wait(1000);
 		cy.button("Save").click();
 
 		// View Course
 		cy.wait(1000);
-		cy.visit("/courses");
+		cy.visit("/lms");
-		cy.get(".course-card-title:first").contains("Test Course");
+		cy.wait(500);
-		cy.get(".course-card:first").click();
+		cy.url().should("include", "/lms/courses");
-		cy.url().should("include", "/courses/test-course");
+		cy.get(".grid a:first").within(() => {
-		cy.get("#title").contains("Test Course");
+			cy.get("div").contains("Test Course");
-		cy.get(".preview-video").should(
+			cy.get("div").contains(
+				"Test Course Short Introduction to test the UI"
+			);
+			cy.get(".course-image")
+				.invoke("css", "background-image")
+				.should("include", "/files/profile");
+		});
+		cy.get(".grid a:first").click();
+		cy.url().should("include", "/lms/courses/test-course");
+		cy.get("div").contains("Test Course");
+		cy.get("div").contains("Test Course Short Introduction to test the UI");
+		cy.get("div").contains("Learning");
+		cy.get("div").contains("Frappe");
+		cy.get("div").contains("ERPNext");
+		cy.get("iframe").should(
 			"have.attr",
 			"src",
 			"https://www.youtube.com/embed/-LPmw2Znl2c"
 		);
-		cy.get("#intro").contains("Test Course Short Introduction");
 
 		// View Chapter
-		cy.get(".chapter-title-main:first").contains("Test Chapter");
+		cy.get("div").contains("Test Chapter");
-		cy.get(".chapter-description:first").contains(
+		cy.get("[id^=headlessui-disclosure-panel-").within(() => {
-			"Test Chapter Description"
+			cy.get("div").contains("Test Lesson").click();
-		);
+		});
-		cy.get(".lesson-info:first").contains("Test Lesson");
+		cy.wait(3000);
-		cy.get(".lesson-info:first").click();
 
 		// View Lesson
-		cy.wait(1000);
+		cy.url().should("include", "/learn/1-1");
-		cy.url().should("include", "learn/1.1");
+		cy.get("div").contains("Test Lesson");
-		cy.get("#title").contains("Test Lesson");
+
-		cy.get(".lesson-video iframe").should(
+		cy.get("div").contains(
-			"have.attr",
-			"src",
-			"https://www.youtube.com/embed/GoDtyItReto"
-		);
-		cy.get(".lesson-content-card").contains(
 			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);
 
 		// Add Discussion
-		cy.get(".reply").click();
+		cy.button("New Question").click();
 		cy.wait(500);
-		cy.get(".discussion-modal").should("be.visible");
+		cy.get("[id^=headlessui-dialog-panel-").within(() => {
-
+			cy.get("label").contains("Title").type("Test Discussion");
-		// Enter title
+			cy.get("div[contenteditable=true]").invoke(
-		cy.get(".modal .topic-title")
+				"text",
-			.type("Discussion from tests")
+				"This is a test discussion. This will check if the UI is working properly."
-			.should("have.value", "Discussion from tests");
-
-		// Enter comment
-		cy.get(".modal .discussions-comment").type(
-			"This is a discussion from the cypress ui tests."
-		);
-
-		// Submit
-		cy.get(".modal .submit-discussion").click();
-		cy.wait(2000);
-
-		// Check if discussion is added to page and content is visible
-		cy.get(".sidebar-parent:first .discussion-topic-title").should(
-			"have.text",
-			"Discussion from tests"
-		);
-		cy.get(".sidebar-parent:first .discussion-topic-title").click();
-		cy.get(".discussion-on-page:visible").should("have.class", "show");
-		cy.get(
-			".discussion-on-page:visible .reply-card .reply-text .ql-editor p"
-		).should(
-			"have.text",
-			"This is a discussion from the cypress ui tests."
-		);
-
-		cy.get(".discussion-form:visible .discussions-comment").type(
-			"This is a discussion from the cypress ui tests. \n\nThis comment was entered through the commentbox on the page."
-		);
-
-		cy.get(".discussion-form:visible .submit-discussion").click();
-		cy.wait(3000);
-		cy.get(".discussion-on-page:visible").should("have.class", "show");
-		cy.get(".discussion-on-page:visible")
-			.children(".reply-card")
-			.eq(1)
-			.find(".reply-text")
-			.should(
-				"have.text",
-				"This is a discussion from the cypress ui tests. This comment was entered through the commentbox on the page.\n"
 			);
+			cy.button("Post").click();
+		});
+
+		// View Discussion
+		cy.wait(500);
+		cy.get("div").contains("Test Discussion").click();
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"This is a test comment. This will check if the UI is working properly."
+		);
+
+		cy.get("div").contains(
+			"This is a test comment. This will check if the UI is working properly."
+		);
 	});
 });

cypress/support/commands.js

@@ -24,6 +24,8 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
+import "cypress-file-upload";
+
 Cypress.Commands.add("login", (email, password) => {
 	if (!email) {
 		email = Cypress.config("testUser") || "Administrator";
@@ -53,3 +55,13 @@ Cypress.Commands.add("iconButton", (text) => {
 Cypress.Commands.add("dialog", (selector) => {
 	return cy.get(`[role=dialog] ${selector}`);
 });
+
+Cypress.Commands.add("paste", { prevSubject: true }, (subject, text) => {
+	cy.wrap(subject).then(($element) => {
+		const element = $element[0];
+		element.focus();
+		element.textContent = text;
+		const event = new Event("paste", { bubbles: true });
+		element.dispatchEvent(event);
+	});
+});

docker/init.sh

@@ -35,7 +35,6 @@ bench new-site lms.localhost \
 bench --site lms.localhost install-app lms
 bench --site lms.localhost set-config developer_mode 1
 bench --site lms.localhost clear-cache
-bench --site lms.localhost set-config mute_emails 1
 bench use lms.localhost
 
 bench start

frontend/package.json

@@ -10,24 +10,31 @@
   },
   "dependencies": {
     "@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/image": "^2.9.0",
+    "@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",
+    "ace-builds": "^1.36.2",
     "chart.js": "^4.4.1",
+    "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.50",
+    "frappe-ui": "^0.1.72",
-    "lucide-vue-next": "^0.309.0",
+    "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
     "socket.io-client": "^4.7.2",
     "tailwindcss": "^3.3.3",
-    "vue": "^3.2.25",
+    "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
-    "vue-router": "^4.0.12"
+    "vue-draggable-next": "^2.2.1",
+    "vue-router": "^4.0.12",
+    "vuedraggable": "4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",

frontend/src/App.vue

@@ -8,12 +8,16 @@
 <script setup>
 import { Toasts } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useScreenSize } from './utils/composables'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
+import { stopSession } from '@/telemetry'
+import { init as initTelemetry } from '@/telemetry'
+import { usersStore } from '@/stores/user'
 
 const screenSize = useScreenSize()
+let { userResource } = usersStore()
 
 const Layout = computed(() => {
 	if (screenSize.width < 640) {
@@ -22,4 +26,13 @@ const Layout = computed(() => {
 		return DesktopLayout
 	}
 })
+
+onMounted(async () => {
+	if (!userResource.data) return
+	await initTelemetry()
+})
+
+onUnmounted(() => {
+	stopSession()
+})
 </script>

frontend/src/components/Annoucements.vue

@@ -25,7 +25,7 @@
 	</div>
 </template>
 <script setup>
-import { createListResource, Avatar } from 'frappe-ui'
+import { createResource, Avatar } from 'frappe-ui'
 import { timeAgo } from '@/utils'
 
 const props = defineProps({
@@ -35,24 +35,15 @@ const props = defineProps({
 	},
 })
 
-const communications = createListResource({
+const communications = createResource({
-	doctype: 'Communication',
+	url: 'lms.lms.api.get_announcements',
-	fields: [
+	makeParams(value) {
-		'subject',
+		return {
-		'content',
+			batch: props.batch,
-		'recipients',
+		}
-		'cc',
-		'communication_date',
-		'sender',
-		'sender_full_name',
-	],
-	filters: {
-		reference_doctype: 'LMS Batch',
-		reference_name: props.batch,
 	},
-	orderBy: 'communication_date desc',
 	auto: true,
-	cache: ['batch', props.batch],
+	cache: ['announcement', props.batch],
 })
 </script>
 <style>

frontend/src/components/AppSidebar.vue

@@ -1,40 +1,92 @@
 <template>
 	<div
 		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
+		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
 			class="flex flex-col overflow-hidden"
-			:class="isSidebarCollapsed ? 'items-center' : ''"
+			:class="sidebarStore.isSidebarCollapsed ? 'items-center' : ''"
 		>
-			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
-			<div class="flex flex-col overflow-y-auto">
+			<div class="flex flex-col" v-if="sidebarSettings.data">
 				<SidebarLink
-					v-for="link in links"
+					v-for="link in sidebarLinks"
 					:link="link"
-					:isCollapsed="isSidebarCollapsed"
+					:isCollapsed="sidebarStore.isSidebarCollapsed"
 					class="mx-2 my-0.5"
 				/>
 			</div>
+			<div
+				v-if="sidebarSettings.data?.web_pages?.length || isModerator"
+				class="mt-4"
+			>
+				<div
+					class="flex items-center justify-between pr-2 cursor-pointer"
+					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
+					@click="showWebPages = !showWebPages"
+				>
+					<div
+						v-if="!sidebarStore.isSidebarCollapsed"
+						class="flex items-center text-sm text-gray-600 my-1"
+					>
+						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+							<ChevronRight
+								class="h-4 w-4 stroke-1.5 text-gray-900 transition-all duration-300 ease-in-out"
+								:class="{ 'rotate-90': showWebPages }"
+							/>
+						</span>
+						<span class="ml-2">
+							{{ __('More') }}
+						</span>
+					</div>
+					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
+						<template #icon>
+							<Plus class="h-4 w-4 text-gray-700 stroke-1.5" />
+						</template>
+					</Button>
+				</div>
+				<div
+					v-if="sidebarSettings.data?.web_pages?.length"
+					class="flex flex-col transition-all duration-300 ease-in-out"
+					:class="showWebPages ? 'block' : 'hidden'"
+				>
+					<SidebarLink
+						v-for="link in sidebarSettings.data.web_pages"
+						:link="link"
+						:isCollapsed="sidebarStore.isSidebarCollapsed"
+						class="mx-2 my-0.5"
+						:showControls="isModerator ? true : false"
+						@openModal="openPageModal"
+						@deletePage="deletePage"
+					/>
+				</div>
+			</div>
 		</div>
 		<SidebarLink
 			:link="{
-				label: isSidebarCollapsed ? 'Expand' : 'Collapse',
+				label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
 			}"
-			:isCollapsed="isSidebarCollapsed"
+			:isCollapsed="sidebarStore.isSidebarCollapsed"
-			@click="isSidebarCollapsed = !isSidebarCollapsed"
+			@click="toggleSidebar()"
 			class="m-2"
 		>
 			<template #icon>
 				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 					<CollapseSidebar
 						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+						:class="{
+							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+						}"
 					/>
 				</span>
 			</template>
 		</SidebarLink>
 	</div>
+	<PageModal
+		v-model="showPageModal"
+		v-model:reloadSidebar="sidebarSettings"
+		:page="pageToEdit"
+	/>
 </template>
 
 <script setup>
@@ -42,14 +94,165 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, onMounted, inject, watch } from 'vue'
 import { getSidebarLinks } from '../utils'
+import { usersStore } from '@/stores/user'
+import { sessionStore } from '@/stores/session'
+import { useSidebar } from '@/stores/sidebar'
+import { useSettings } from '@/stores/settings'
+import { ChevronRight, Plus } from 'lucide-vue-next'
+import { createResource, Button } from 'frappe-ui'
+import PageModal from '@/components/Modals/PageModal.vue'
 
-const links = getSidebarLinks()
+const { user, sidebarSettings } = sessionStore()
+const { userResource } = usersStore()
+let sidebarStore = useSidebar()
+const socket = inject('$socket')
+const unreadCount = ref(0)
+const sidebarLinks = ref(getSidebarLinks())
+const showPageModal = ref(false)
+const isModerator = ref(false)
+const isInstructor = ref(false)
+const pageToEdit = ref(null)
+const showWebPages = ref(false)
+const settingsStore = useSettings()
+
+onMounted(() => {
+	socket.on('publish_lms_notifications', (data) => {
+		unreadNotifications.reload()
+	})
+	addNotifications()
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
+			},
+		}
+	)
+})
+
+const unreadNotifications = createResource({
+	cache: 'Unread Notifications Count',
+	url: 'frappe.client.get_count',
+	makeParams(values) {
+		return {
+			doctype: 'Notification Log',
+			filters: {
+				for_user: user,
+				read: 0,
+			},
+		}
+	},
+	onSuccess(data) {
+		unreadCount.value = data
+		sidebarLinks.value = sidebarLinks.value.map((link) => {
+			if (link.label === 'Notifications') {
+				link.count = data
+			}
+			return link
+		})
+	},
+	auto: user ? true : false,
+})
+
+const addNotifications = () => {
+	if (user) {
+		sidebarLinks.value.push({
+			label: 'Notifications',
+			icon: 'Bell',
+			to: 'Notifications',
+			activeFor: ['Notifications'],
+			count: unreadCount.value,
+		})
+	}
+}
+
+const addQuizzes = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.push({
+			label: 'Quizzes',
+			icon: 'CircleHelp',
+			to: 'Quizzes',
+			activeFor: ['Quizzes', 'QuizForm'],
+		})
+	}
+}
+
+const addPrograms = () => {
+	let activeFor = ['Programs', 'ProgramForm']
+	let index = 1
+	let canAddProgram = false
+
+	if (
+		!isInstructor.value &&
+		!isModerator.value &&
+		settingsStore.learningPaths.data
+	) {
+		sidebarLinks.value = sidebarLinks.value.filter(
+			(link) => link.label !== 'Courses'
+		)
+		activeFor.push('CourseDetail')
+		activeFor.push('Lesson')
+		index = 0
+		canAddProgram = true
+	} else if (isInstructor.value || isModerator.value) {
+		canAddProgram = true
+	}
+
+	if (canAddProgram) {
+		sidebarLinks.value.splice(index, 0, {
+			label: 'Programs',
+			icon: 'Route',
+			to: 'Programs',
+			activeFor: activeFor,
+		})
+	}
+}
+
+const openPageModal = (link) => {
+	showPageModal.value = true
+	pageToEdit.value = link
+}
+
+const deletePage = (link) => {
+	createResource({
+		url: 'lms.lms.api.delete_sidebar_item',
+		makeParams(values) {
+			return {
+				webpage: link.web_page,
+			}
+		},
+	}).submit(
+		{},
+		{
+			onSuccess() {
+				sidebarSettings.reload()
+			},
+		}
+	)
+}
 
 const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)
 }
 
-let isSidebarCollapsed = ref(getSidebarFromStorage())
+watch(userResource, () => {
+	if (userResource.data) {
+		isModerator.value = userResource.data.is_moderator
+		isInstructor.value = userResource.data.is_instructor
+		addQuizzes()
+		addPrograms()
+	}
+})
+
+const toggleSidebar = () => {
+	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
+}
 </script>

frontend/src/components/Apps.vue

@@ -0,0 +1,67 @@
+<template>
+	<Popover placement="right-start" class="flex w-full">
+		<template #target="{ togglePopover }">
+			<button
+				:class="[
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+				]"
+				@click.prevent="togglePopover()"
+			>
+				<div class="flex gap-2">
+					<LayoutGrid class="size-4 stroke-1.5" />
+					<span class="whitespace-nowrap">
+						{{ __('Apps') }}
+					</span>
+				</div>
+				<ChevronRight class="h-4 w-4 stroke-1.5" />
+			</button>
+		</template>
+		<template #body>
+			<div
+				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+			>
+				<div v-for="app in apps.data" key="name">
+					<a
+						:href="app.route"
+						class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+					>
+						<img class="size-8" :src="app.logo" />
+						<div class="text-sm" @click="app.onClick">
+							{{ app.title }}
+						</div>
+					</a>
+				</div>
+			</div>
+		</template>
+	</Popover>
+</template>
+<script setup>
+import { Popover, createResource } from 'frappe-ui'
+import { LayoutGrid, ChevronRight } from 'lucide-vue-next'
+
+const apps = createResource({
+	url: 'frappe.apps.get_apps',
+	cache: 'apps',
+	auto: true,
+	transform: (data) => {
+		let _apps = [
+			{
+				name: 'frappe',
+				logo: '/assets/lms/images/desk.png',
+				title: __('Desk'),
+				route: '/app',
+			},
+		]
+		data.map((app) => {
+			if (app.name === 'lms') return
+			_apps.push({
+				name: app.name,
+				logo: app.logo,
+				title: __(app.title),
+				route: app.route,
+			})
+		})
+		return _apps
+	},
+})
+</script>

frontend/src/components/Assessments.vue

@@ -1,7 +1,15 @@
 <template>
 	<div>
-		<div class="text-lg font-semibold mb-4">
+		<div class="flex items-center justify-between">
-			{{ __('Assessments') }}
+			<div class="text-lg font-semibold mb-4">
+				{{ __('Assessments') }}
+			</div>
+			<Button v-if="canSeeAddButton()" @click="showModal = true">
+				<template #prefix>
+					<Plus class="h-4 w-4" />
+				</template>
+				{{ __('Add') }}
+			</Button>
 		</div>
 		<div v-if="assessments.data?.length">
 			<ListView
@@ -9,41 +17,76 @@
 				:rows="assessments.data"
 				row-key="name"
 				:options="{
-					selectable: false,
 					showTooltip: false,
-					getRowRoute: (row) => {
+					getRowRoute: (row) => getRowRoute(row),
-						if (row.submission) {
-							return {
-								name: 'AssignmentSubmission',
-								params: {
-									assignmentName: row.assessment_name,
-									submissionName: row.submission.name,
-								},
-							}
-						} else {
-							return {
-								name: 'AssignmentSubmission',
-								params: {
-									assignmentName: row.assessment_name,
-									submissionName: 'new',
-								},
-							}
-						}
-					},
 				}"
 			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in getAssessmentColumns()">
+						<template #prefix="{ item }">
+							<component
+								v-if="item.icon"
+								:is="item.icon"
+								class="h-4 w-4 stroke-1.5 ml-4"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+				<ListRows>
+					<ListRow :row="row" v-for="row in assessments.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeAssessments(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
 			</ListView>
 		</div>
 		<div v-else class="text-sm italic text-gray-600">
 			{{ __('No Assessments') }}
 		</div>
 	</div>
+	<AssessmentModal
+		v-model="showModal"
+		v-model:assessments="assessments"
+		:batch="props.batch"
+	/>
 </template>
 <script setup>
-import { ListView, createResource } from 'frappe-ui'
+import {
-import { inject } from 'vue'
+	ListView,
+	ListRow,
+	ListRows,
+	ListHeader,
+	ListHeaderItem,
+	ListRowItem,
+	ListSelectBanner,
+	createResource,
+	Button,
+} from 'frappe-ui'
+import { inject, ref } from 'vue'
+import AssessmentModal from '@/components/Modals/AssessmentModal.vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
 
 const user = inject('$user')
+const showModal = ref(false)
 
 const props = defineProps({
 	batch: {
@@ -74,6 +117,61 @@ const assessments = createResource({
 	auto: true,
 })
 
+const deleteAssessments = createResource({
+	url: 'lms.lms.api.delete_documents',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Assessment',
+			documents: values.assessments,
+		}
+	},
+})
+
+const removeAssessments = (selections, unselectAll) => {
+	deleteAssessments.submit(
+		{ assessments: Array.from(selections) },
+		{
+			onSuccess(data) {
+				assessments.reload()
+				unselectAll()
+			},
+		}
+	)
+}
+
+const getRowRoute = (row) => {
+	if (row.assessment_type == 'LMS Assignment') {
+		if (row.submission) {
+			return {
+				name: 'AssignmentSubmission',
+				params: {
+					assignmentName: row.assessment_name,
+					submissionName: row.submission.name,
+				},
+			}
+		} else {
+			return {
+				name: 'AssignmentSubmission',
+				params: {
+					assignmentName: row.assessment_name,
+					submissionName: 'new',
+				},
+			}
+		}
+	} else {
+		return {
+			name: 'QuizPage',
+			params: {
+				quizID: row.assessment_name,
+			},
+		}
+	}
+}
+
+const canSeeAddButton = () => {
+	return user.data?.is_moderator || user.data?.is_evaluator
+}
+
 const getAssessmentColumns = () => {
 	let columns = [
 		{

frontend/src/components/AudioBlock.vue

@@ -0,0 +1,134 @@
+<template>
+	<div>
+		<!-- <audio width="100%" controls controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio> -->
+		<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
+			<source :src="encodeURI(file)" type="audio/mp3" />
+		</audio>
+		<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
+			<Button variant="ghost" @click="togglePlay">
+				<template #icon>
+					<Play v-if="!isPlaying" class="w-4 h-4 text-gray-900" />
+					<Pause v-else class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+			<input
+				type="range"
+				min="0"
+				:max="duration"
+				step="0.1"
+				v-model="currentTime"
+				@input="changeCurrentTime"
+				class="duration-slider w-full h-1"
+			/>
+			<span class="text-xs text-gray-900 font-medium">
+				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+			</span>
+			<Button variant="ghost" @click="toggleMute">
+				<template #icon>
+					<Volume2 v-if="!isMuted" class="w-4 h-4 text-gray-900" />
+					<VolumeX v-else class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { Play, Pause, Volume2, VolumeX } from 'lucide-vue-next'
+import { Button } from 'frappe-ui'
+
+const isPlaying = ref(false)
+const audio = ref(null)
+let isMuted = ref(false)
+let currentTime = ref(0)
+let duration = ref(0)
+
+const props = defineProps({
+	file: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	setTimeout(() => {
+		audio.value = document.querySelector('audio')
+		audio.value.onloadedmetadata = () => {
+			duration.value = audio.value.duration
+		}
+		audio.value.ontimeupdate = () => {
+			currentTime.value = audio.value.currentTime
+		}
+	}, 0)
+})
+
+const togglePlay = () => {
+	if (audio.value.paused) {
+		audio.value.play()
+		isPlaying.value = true
+	} else {
+		audio.value.pause()
+		isPlaying.value = false
+	}
+}
+
+const toggleMute = () => {
+	audio.value.muted = !audio.value.muted
+	isMuted.value = audio.value.muted
+}
+
+const changeCurrentTime = () => {
+	audio.value.currentTime = currentTime.value
+}
+
+const handleAudioEnd = () => {
+	isPlaying.value = false
+}
+
+const formatTime = (time) => {
+	const minutes = Math.floor(time / 60)
+	const seconds = Math.floor(time % 60)
+	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+}
+
+watch(isPlaying, (newVal) => {
+	if (newVal) {
+		audio.value.play()
+	} else {
+		audio.value.pause()
+	}
+})
+</script>
+<style>
+.duration-slider {
+	flex: 1;
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: theme('colors.gray.400');
+	cursor: pointer;
+}
+
+.duration-slider::-webkit-slider-thumb {
+	height: 10px;
+	width: 10px;
+	-webkit-appearance: none;
+	background-color: theme('colors.gray.900');
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+	input[type='range'] {
+		overflow: hidden;
+		width: 150px;
+		-webkit-appearance: none;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		cursor: pointer;
+		box-shadow: -150px 0 0 150px theme('colors.gray.900');
+	}
+}
+</style>

frontend/src/components/BatchCard.vue

@@ -1,14 +1,19 @@
 <template>
 	<div
-		class="flex flex-col border border-gray-200 rounded-md p-4 h-full"
+		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
+		<div class="text-lg leading-5 font-semibold mb-2">
+			{{ batch.title }}
+		</div>
 		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
 			theme="green"
 			class="self-start mb-2"
 		>
-			{{ batch.seats_left }} {{ __('Seat Left') }}
+			{{ batch.seats_left }}
+			<span v-if="batch.seats_left > 1">{{ __('Seats Left') }}</span
+			><span v-else-if="batch.seats_left == 1">{{ __('Seat Left') }}</span>
 		</Badge>
 		<Badge
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
@@ -17,43 +22,59 @@
 		>
 			{{ __('Sold Out') }}
 		</Badge>
-		<div class="text-xl font-semibold mb-1">
+		<div class="short-introduction text-sm text-gray-700">
-			{{ batch.title }}
-		</div>
-		<div class="short-introduction">
 			{{ batch.description }}
 		</div>
-		<div class="mt-auto">
+		<div v-if="batch.amount" class="font-semibold mb-4">
-			<div v-if="batch.amount" class="font-semibold text-lg mb-4">
+			{{ batch.price }}
-				{{ batch.price }}
+		</div>
-			</div>
+		<div class="flex flex-col space-y-2 mt-auto">
-			<div class="flex items-center mb-3">
+			<DateRange
-				<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				:startDate="batch.start_date"
-				<span> {{ batch.courses.length }} {{ __('Courses') }} </span>
+				:endDate="batch.end_date"
-			</div>
+				class="text-sm text-gray-700"
-			<div class="flex items-center mb-3">
+			/>
-				<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<div class="flex items-center text-sm text-gray-700">
-				<span>
-					{{ dayjs(batch.start_date).format('DD MMM YYYY') }} -
-					{{ dayjs(batch.end_date).format('DD MMM YYYY') }}
-				</span>
-			</div>
-			<div class="flex items-center">
 				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
+			<div
+				v-if="batch.timezone"
+				class="flex items-center text-sm text-gray-700"
+			>
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
+				<span>
+					{{ batch.timezone }}
+				</span>
+			</div>
+		</div>
+		<div
+			v-if="batch.instructors?.length"
+			class="flex avatar-group overlap mt-4"
+		>
+			<div
+				class="h-6 mr-1"
+				:class="{ 'avatar-group overlap': batch.instructors.length > 1 }"
+			>
+				<UserAvatar
+					v-for="instructor in batch.instructors"
+					:user="instructor"
+				/>
+			</div>
+			<CourseInstructors :instructors="batch.instructors" />
 		</div>
 	</div>
 </template>
 <script setup>
-import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
-import { inject } from 'vue'
 import { Badge } from 'frappe-ui'
 import { formatTime } from '../utils'
+import { Clock, BookOpen, Globe } from 'lucide-vue-next'
+import DateRange from '@/components/Common/DateRange.vue'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 
-const dayjs = inject('$dayjs')
 const props = defineProps({
 	batch: {
 		type: Object,
@@ -69,7 +90,20 @@ const props = defineProps({
 	text-overflow: ellipsis;
 	width: 100%;
 	overflow: hidden;
-	margin: 0.25rem 0 1.25rem;
+	margin: 0.25rem 0 1rem;
 	line-height: 1.5;
 }
+
+.avatar-group {
+	display: inline-flex;
+	align-items: center;
+}
+
+.avatar-group .avatar {
+	transition: margin 0.1s ease-in-out;
+}
+
+.avatar-group.overlap .avatar + .avatar {
+	margin-left: calc(-8px);
+}
 </style>

frontend/src/components/BatchCourses.vue

@@ -4,23 +4,25 @@
 			<div class="text-xl font-semibold">
 				{{ __('Courses') }}
 			</div>
-			<Button
+			<Button v-if="canSeeAddButton()" @click="openCourseModal()">
-				v-if="user.data?.is_moderator"
-				variant="solid"
-				@click="openCourseModal()"
-			>
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
-				{{ __('Add Course') }}
+				{{ __('Add') }}
 			</Button>
 		</div>
 		<div v-if="courses.data?.length">
 			<ListView
 				:columns="getCoursesColumns()"
 				:rows="courses.data"
-				row-key="name"
+				row-key="batch_course"
-				:options="{ showTooltip: false }"
+				:options="{
+					showTooltip: false,
+					getRowRoute: (row) => ({
+						name: 'CourseDetail',
+						params: { courseName: row.name },
+					}),
+				}"
 			>
 				<ListHeader
 					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
@@ -49,7 +51,10 @@
 				<ListSelectBanner>
 					<template #actions="{ unselectAll, selections }">
 						<div class="flex gap-2">
-							<Button variant="ghost" @click="removeCourses(selections)">
+							<Button
+								variant="ghost"
+								@click="removeCourses(selections, unselectAll)"
+							>
 								<Trash2 class="h-4 w-4 stroke-1.5" />
 							</Button>
 						</div>
@@ -79,6 +84,7 @@ import {
 	ListRowItem,
 } from 'frappe-ui'
 import { Plus, Trash2 } from 'lucide-vue-next'
+import { showToast } from '@/utils'
 
 const showCourseModal = ref(false)
 const user = inject('$user')
@@ -108,34 +114,47 @@ const getCoursesColumns = () => {
 		{
 			label: 'Title',
 			key: 'title',
+			width: 2,
 		},
 		{
 			label: 'Lessons',
 			key: 'lesson_count',
+			align: 'right',
 		},
 		{
 			label: 'Enrollments',
+			align: 'right',
 			key: 'enrollment_count',
 		},
 	]
 }
 
-const removeCourse = createResource({
+const deleteCourses = createResource({
-	url: 'frappe.client.delete',
+	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
 			doctype: 'Batch Course',
-			name: values.course,
+			documents: values.courses,
 		}
 	},
 })
 
-const removeCourses = (selections) => {
+const removeCourses = (selections, unselectAll) => {
-	console.log(selections)
+	deleteCourses.submit(
-	selections.forEach(async (course) => {
+		{
-		removeCourse.submit({ course })
+			courses: Array.from(selections),
-		await setTimeout(1000)
+		},
-	})
+		{
-	courses.reload()
+			onSuccess(data) {
+				courses.reload()
+				showToast(__('Success'), __('Courses deleted successfully'), 'check')
+				unselectAll()
+			},
+		}
+	)
+}
+
+const canSeeAddButton = () => {
+	return user.data?.is_moderator || user.data?.is_evaluator
 }
 </script>

frontend/src/components/BatchOverlay.vue

@@ -1,11 +1,12 @@
 <template>
-	<div v-if="batch.data" class="shadow rounded-md p-5" style="width: 300px">
+	<div v-if="batch.data" class="shadow rounded-md p-5 lg:w-72">
 		<Badge
 			v-if="batch.data.seat_count && seats_left > 0"
 			theme="green"
 			class="self-start mb-2 float-right"
 		>
-			{{ seats_left }} {{ __('Seat Left') }}
+			{{ seats_left }} <span v-if="seats_left > 1">{{ __('Seats Left') }}</span
+			><span v-else-if="seats_left == 1">{{ __('Seat Left') }}</span>
 		</Badge>
 		<Badge
 			v-else-if="batch.data.seat_count && seats_left <= 0"
@@ -21,22 +22,26 @@
 			<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 		</div>
+		<DateRange
+			:startDate="batch.data.start_date"
+			:endDate="batch.data.end_date"
+			class="mb-3"
+		/>
 		<div class="flex items-center mb-3">
-			<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
-			<span>
-				{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
-				{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
-			</span>
-		</div>
-		<div class="flex items-center">
 			<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span>
 				{{ formatTime(batch.data.start_time) }} -
 				{{ formatTime(batch.data.end_time) }}
 			</span>
 		</div>
+		<div v-if="batch.data.timezone" class="flex items-center">
+			<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span>
+				{{ batch.data.timezone }}
+			</span>
+		</div>
 		<router-link
-			v-if="user?.data?.is_moderator"
+			v-if="isModerator || isStudent"
 			:to="{
 				name: 'Batch',
 				params: {
@@ -46,7 +51,7 @@
 		>
 			<Button variant="solid" class="w-full mt-4">
 				<span>
-					{{ __('Manage Batch') }}
+					{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
 				</span>
 			</Button>
 		</router-link>
@@ -58,9 +63,9 @@
 					name: batch.data.name,
 				},
 			}"
-			v-else-if="batch.data.paid_batch"
+			v-else-if="batch.data.paid_batch && batch.data.seats_left"
 		>
-			<Button class="w-full mt-4" variant="solid">
+			<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
 				<span>
 					{{ __('Register Now') }}
 				</span>
@@ -69,14 +74,15 @@
 		<Button
 			variant="solid"
 			class="w-full mt-2"
-			v-else-if="batch.data.allow_self_enrollment"
+			v-else-if="batch.data.allow_self_enrollment && batch.data.seats_left"
+			@click="enrollInBatch()"
 		>
 			{{ __('Enroll Now') }}
 		</Button>
 		<router-link
-			v-if="user?.data?.is_moderator"
+			v-if="isModerator"
 			:to="{
-				name: 'BatchCreation',
+				name: 'BatchForm',
 				params: {
 					batchName: batch.data.name,
 				},
@@ -91,12 +97,14 @@
 	</div>
 </template>
 <script setup>
-import { formatNumberIntoCurrency, formatTime } from '@/utils'
-import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
 import { inject, computed } from 'vue'
-import { Badge, Button } from 'frappe-ui'
+import { Badge, Button, createResource } from 'frappe-ui'
+import { BookOpen, Clock, Globe } from 'lucide-vue-next'
+import { formatNumberIntoCurrency, formatTime, showToast } from '@/utils'
+import DateRange from '@/components/Common/DateRange.vue'
+import { useRouter } from 'vue-router'
 
-const dayjs = inject('$dayjs')
+const router = useRouter()
 const user = inject('$user')
 
 const props = defineProps({
@@ -106,10 +114,51 @@ const props = defineProps({
 	},
 })
 
+const enroll = createResource({
+	url: 'lms.lms.utils.enroll_in_batch',
+	makeParams(values) {
+		return {
+			batch: props.batch.data.name,
+		}
+	},
+})
+
+const enrollInBatch = () => {
+	if (!user.data) {
+		window.location.href = `/login?redirect-to=/batches/details/${props.batch.data.name}`
+	}
+	enroll.submit(
+		{},
+		{
+			onSuccess(data) {
+				showToast(
+					__('Success'),
+					__('You have been enrolled in this batch'),
+					'check'
+				)
+				router.push({
+					name: 'Batch',
+					params: {
+						batchName: props.batch.data.name,
+					},
+				})
+			},
+		}
+	)
+}
+
 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)
+})
+
+const isModerator = computed(() => {
+	return user.data?.is_moderator
+})
 </script>

frontend/src/components/BatchStudents.vue

@@ -1,9 +1,9 @@
 <template>
-	<Button class="float-right mb-3" variant="solid" @click="openStudentModal()">
+	<Button class="float-right mb-3" @click="openStudentModal()">
 		<template #prefix>
 			<Plus class="h-4 w-4" />
 		</template>
-		{{ __('Add Student') }}
+		{{ __('Add') }}
 	</Button>
 	<div class="text-lg font-semibold mb-4">
 		{{ __('Students') }}
@@ -52,7 +52,10 @@
 			<ListSelectBanner>
 				<template #actions="{ unselectAll, selections }">
 					<div class="flex gap-2">
-						<Button variant="ghost" @click="removeStudents(selections)">
+						<Button
+							variant="ghost"
+							@click="removeStudents(selections, unselectAll)"
+						>
 							<Trash2 class="h-4 w-4 stroke-1.5" />
 						</Button>
 					</div>
@@ -85,6 +88,7 @@ import {
 import { Trash2, Plus } from 'lucide-vue-next'
 import { ref } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
+import { showToast } from '@/utils'
 
 const showStudentModal = ref(false)
 
@@ -109,6 +113,7 @@ const getStudentColumns = () => {
 		{
 			label: 'Full Name',
 			key: 'full_name',
+			width: 2,
 		},
 		{
 			label: 'Courses Done',
@@ -131,21 +136,28 @@ const openStudentModal = () => {
 	showStudentModal.value = true
 }
 
-const removeStudent = createResource({
+const deleteStudents = createResource({
-	url: 'frappe.client.delete',
+	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
 			doctype: 'Batch Student',
-			name: values.student,
+			documents: values.students,
 		}
 	},
 })
 
-const removeStudents = (selections) => {
+const removeStudents = (selections, unselectAll) => {
-	selections.forEach(async (student) => {
+	deleteStudents.submit(
-		removeStudent.submit({ student })
+		{
-		await setTimeout(1000)
+			students: Array.from(selections),
-	})
+		},
-	students.reload()
+		{
+			onSuccess(data) {
+				students.reload()
+				showToast(__('Success'), __('Students deleted successfully'), 'check')
+				unselectAll()
+			},
+		}
+	)
 }
 </script>

frontend/src/components/BrandSettings.vue

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

frontend/src/components/Categories.vue

@@ -0,0 +1,151 @@
+<template>
+	<div class="flex flex-col min-h-0">
+		<div class="flex items-center justify-between">
+			<div class="text-xl font-semibold mb-1">
+				{{ label }}
+			</div>
+			<Button @click="() => showCategoryForm()">
+				<template #icon>
+					<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+					<X v-else class="h-3 w-3 stroke-1.5" />
+				</template>
+			</Button>
+		</div>
+
+		<div
+			v-if="showForm"
+			class="flex items-center justify-between my-4 space-x-2"
+		>
+			<FormControl
+				ref="categoryInput"
+				v-model="category"
+				:placeholder="__('Category Name')"
+				class="flex-1"
+			/>
+			<Button @click="addCategory()" variant="subtle">
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div class="overflow-y-scroll">
+			<div class="text-base divide-y">
+				<FormControl
+					:value="cat.category"
+					type="text"
+					v-for="cat in categories.data"
+					class="form-control"
+					@change.stop="(e) => update(cat.name, e.target.value)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Button,
+	FormControl,
+	createListResource,
+	createResource,
+	debounce,
+} from 'frappe-ui'
+import { Plus, X } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const showForm = ref(false)
+const category = ref(null)
+const categoryInput = ref(null)
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const categories = createListResource({
+	doctype: 'LMS Category',
+	fields: ['name', 'category'],
+	auto: true,
+})
+
+const newCategory = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Category',
+				category: category.value,
+			},
+		}
+	},
+})
+
+const addCategory = () => {
+	newCategory.submit(
+		{},
+		{
+			onSuccess(data) {
+				categories.reload()
+				category.value = null
+			},
+		}
+	)
+}
+
+const showCategoryForm = () => {
+	showForm.value = !showForm.value
+	setTimeout(() => {
+		categoryInput.value.$el.querySelector('input').focus()
+	}, 0)
+}
+
+const updateCategory = createResource({
+	url: 'frappe.client.rename_doc',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Category',
+			old_name: values.name,
+			new_name: values.category,
+		}
+	},
+})
+
+const update = (name, value) => {
+	updateCategory.submit(
+		{
+			name: name,
+			category: value,
+		},
+		{
+			onSuccess() {
+				categories.reload()
+			},
+		}
+	)
+}
+</script>
+<style>
+.form-control input {
+	padding: 1.25rem 0;
+	border-color: transparent;
+	background: white;
+}
+
+.form-control input:focus {
+	outline: transparent;
+	background: white;
+	box-shadow: none;
+	border-color: transparent;
+}
+
+.form-control input:hover {
+	outline: transparent;
+	background: white;
+	box-shadow: none;
+	border-color: transparent;
+}
+</style>

frontend/src/components/Common/DateRange.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="flex items-center">
+		<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+		<span>
+			{{ getFormattedDateRange(props.startDate, props.endDate) }}
+		</span>
+	</div>
+</template>
+
+<script setup>
+import { Calendar } from 'lucide-vue-next'
+import { getFormattedDateRange } from '@/utils'
+
+const props = defineProps({
+	startDate: {
+		type: String,
+	},
+	endDate: {
+		type: String,
+	},
+})
+</script>

frontend/src/components/Controls/Autocomplete.vue

@@ -75,7 +75,7 @@
 								>
 									<li
 										:class="[
-											'flex items-center rounded px-2.5 py-1.5 text-base',
+											'flex items-center rounded px-2.5 py-2 text-base',
 											{ 'bg-gray-100': active },
 										]"
 									>
@@ -87,7 +87,16 @@
 											name="item-label"
 											v-bind="{ active, selected, option }"
 										>
-											{{ option.label }}
+											<div class="flex flex-col space-y-1">
+												<div>
+													{{ option.label }}
+												</div>
+												<div
+													v-if="option.description"
+													class="text-xs text-gray-700"
+													v-html="option.description"
+												></div>
+											</div>
 										</slot>
 									</li>
 								</ComboboxOption>

frontend/src/components/Controls/CodeEditor.vue

@@ -0,0 +1,204 @@
+<template>
+	<div
+		class="editor flex flex-col gap-1"
+		:style="{
+			height: height,
+		}"
+	>
+		<span class="text-xs" v-if="label">
+			{{ label }}
+		</span>
+		<div
+			ref="editor"
+			class="h-auto flex-1 overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2 dark:bg-gray-900"
+		/>
+		<span
+			class="mt-1 text-xs text-gray-600"
+			v-show="description"
+			v-html="description"
+		></span>
+		<Button
+			v-if="showSaveButton"
+			@click="emit('save', aceEditor?.getValue())"
+			class="mt-3"
+		>
+			{{ __('Save') }}
+		</Button>
+	</div>
+</template>
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import ace from 'ace-builds'
+import 'ace-builds/src-min-noconflict/ext-searchbox'
+import 'ace-builds/src-min-noconflict/theme-chrome'
+import 'ace-builds/src-min-noconflict/theme-twilight'
+import { PropType, onMounted, ref, watch } from 'vue'
+import { Button } from 'frappe-ui'
+
+const isDark = useDark({
+	attribute: 'data-theme',
+})
+
+const props = defineProps({
+	modelValue: {
+		type: [Object, String, Array],
+	},
+	type: {
+		type: String as PropType<'JSON' | 'HTML' | 'Python' | 'JavaScript' | 'CSS'>,
+		default: 'JSON',
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
+	height: {
+		type: String,
+		default: '250px',
+	},
+	showLineNumbers: {
+		type: Boolean,
+		default: false,
+	},
+	autofocus: {
+		type: Boolean,
+		default: true,
+	},
+	showSaveButton: {
+		type: Boolean,
+		default: false,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const emit = defineEmits(['save', 'update:modelValue'])
+const editor = ref<HTMLElement | null>(null)
+let aceEditor = null as ace.Ace.Editor | null
+
+onMounted(() => {
+	setupEditor()
+})
+
+const setupEditor = () => {
+	aceEditor = ace.edit(editor.value as HTMLElement)
+	resetEditor(props.modelValue as string, true)
+	aceEditor.setReadOnly(props.readonly)
+	aceEditor.setOptions({
+		fontSize: '12px',
+		useWorker: false,
+		showGutter: props.showLineNumbers,
+		wrap: props.showLineNumbers,
+	})
+	if (props.type === 'CSS') {
+		import('ace-builds/src-noconflict/mode-css').then(() => {
+			aceEditor?.session.setMode('ace/mode/css')
+		})
+	} else if (props.type === 'JavaScript') {
+		import('ace-builds/src-noconflict/mode-javascript').then(() => {
+			aceEditor?.session.setMode('ace/mode/javascript')
+		})
+	} else if (props.type === 'Python') {
+		import('ace-builds/src-noconflict/mode-python').then(() => {
+			aceEditor?.session.setMode('ace/mode/python')
+		})
+	} else if (props.type === 'JSON') {
+		import('ace-builds/src-noconflict/mode-json').then(() => {
+			aceEditor?.session.setMode('ace/mode/json')
+		})
+	} else {
+		import('ace-builds/src-noconflict/mode-html').then(() => {
+			aceEditor?.session.setMode('ace/mode/html')
+		})
+	}
+	aceEditor.on('blur', () => {
+		try {
+			let value = aceEditor?.getValue() || ''
+			if (props.type === 'JSON') {
+				value = JSON.parse(value)
+			}
+			if (value === props.modelValue) return
+			if (!props.showSaveButton && !props.readonly) {
+				emit('update:modelValue', value)
+			}
+		} catch (e) {
+			// do nothing
+		}
+	})
+}
+
+const getModelValue = () => {
+	let value = props.modelValue || ''
+	try {
+		if (props.type === 'JSON' || typeof value === 'object') {
+			value = JSON.stringify(value, null, 2)
+		}
+	} catch (e) {
+		// do nothing
+	}
+	return value as string
+}
+
+function resetEditor(value: string, resetHistory = false) {
+	value = getModelValue()
+	aceEditor?.setValue(value)
+	aceEditor?.clearSelection()
+	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
+	props.autofocus && aceEditor?.focus()
+	if (resetHistory) {
+		aceEditor?.session.getUndoManager().reset()
+	}
+}
+
+watch(isDark, () => {
+	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
+})
+
+watch(
+	() => props.type,
+	() => {
+		setupEditor()
+	}
+)
+
+watch(
+	() => props.modelValue,
+	() => {
+		resetEditor(props.modelValue as string)
+	}
+)
+
+defineExpose({ resetEditor })
+</script>
+<style scoped>
+.editor .ace_editor {
+	height: 100%;
+	width: 100%;
+	border-radius: 5px;
+	overscroll-behavior: none;
+}
+.editor :deep(.ace_scrollbar-h) {
+	display: none;
+}
+.editor :deep(.ace_search) {
+	@apply dark:bg-gray-800 dark:text-gray-200;
+	@apply dark:border-gray-800;
+}
+.editor :deep(.ace_searchbtn) {
+	@apply dark:bg-gray-800 dark:text-gray-200;
+	@apply dark:border-gray-800;
+}
+.editor :deep(.ace_button) {
+	@apply dark:bg-gray-800 dark:text-gray-200;
+}
+
+.editor :deep(.ace_search_field) {
+	@apply dark:bg-gray-900 dark:text-gray-200;
+	@apply dark:border-gray-800;
+}
+</style>

frontend/src/components/Controls/IconPicker.vue

@@ -0,0 +1,114 @@
+<template>
+	<div class="space-y-1.5">
+		<label class="block text-xs text-gray-600">
+			{{ label }}
+		</label>
+		<div class="w-full">
+			<Popover>
+				<template #target="{ togglePopover }">
+					<button
+						@click="openPopover(togglePopover)"
+						class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
+					>
+						<component
+							v-if="selectedIcon"
+							class="w-4 h-4 text-gray-700 stroke-1.5"
+							:is="icons[selectedIcon]"
+						/>
+						<component
+							v-else
+							class="w-4 h-4 text-gray-700 stroke-1.5"
+							:is="icons.Folder"
+						/>
+						<span v-if="selectedIcon">
+							{{ selectedIcon }}
+						</span>
+						<span v-else class="text-gray-600">
+							{{ __('Choose an icon') }}
+						</span>
+					</button>
+				</template>
+				<template #body-main="{ close, isOpen }" class="w-full">
+					<div class="p-3 max-h-56 overflow-auto w-full">
+						<FormControl
+							ref="search"
+							v-model="iconQuery"
+							:placeholder="__('Search for an icon')"
+							autocomplete="off"
+						/>
+						<div class="grid grid-cols-10 gap-4 mt-4">
+							<div v-for="(iconComponent, iconName) in filteredIcons">
+								<component
+									:is="iconComponent"
+									class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
+									@click="setIcon(iconName, close)"
+								/>
+							</div>
+						</div>
+					</div>
+				</template>
+			</Popover>
+		</div>
+	</div>
+</template>
+<script setup>
+import { FormControl, Popover } from 'frappe-ui'
+import * as icons from 'lucide-vue-next'
+import { ref, computed, onMounted, nextTick } from 'vue'
+
+const iconQuery = ref('')
+const selectedIcon = ref('')
+const search = ref(null)
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const iconArray = ref(
+	Object.keys(icons)
+		.sort(() => 0.5 - Math.random())
+		.slice(0, 100)
+		.reduce((result, key) => {
+			result[key] = icons[key]
+			return result
+		}, {})
+)
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: 'Icon',
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
+})
+
+onMounted(() => {
+	selectedIcon.value = props.modelValue
+})
+
+const setIcon = (icon, close) => {
+	emit('update:modelValue', icon)
+	selectedIcon.value = icon
+	iconQuery.value = ''
+	close()
+}
+
+const filteredIcons = computed(() => {
+	if (!iconQuery.value) {
+		return iconArray.value
+	}
+
+	return Object.keys(icons)
+		.filter((icon) =>
+			icon.toLowerCase().includes(iconQuery.value.toLowerCase())
+		)
+		.reduce((result, key) => {
+			result[key] = icons[key]
+			return result
+		}, {})
+})
+
+const openPopover = (togglePopover) => {
+	togglePopover()
+}
+</script>

frontend/src/components/Controls/Link.vue

@@ -2,6 +2,7 @@
 	<div class="space-y-1.5">
 		<label class="block" :class="labelClasses" v-if="attrs.label">
 			{{ attrs.label }}
+			<span class="text-red-500" v-if="attrs.required">*</span>
 		</label>
 		<Autocomplete
 			ref="autocomplete"
@@ -43,6 +44,7 @@
 				</div>
 			</template>
 		</Autocomplete>
+		<p v-if="description" class="text-sm text-gray-600">{{ description }}</p>
 	</div>
 </template>
 
@@ -66,6 +68,10 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	description: {
+		type: String,
+		default: '',
+	},
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])
@@ -108,6 +114,7 @@ const options = createResource({
 	url: 'frappe.desk.search.search_link',
 	cache: [props.doctype, text.value],
 	method: 'POST',
+	auto: true,
 	params: {
 		txt: text.value,
 		doctype: props.doctype,
@@ -116,8 +123,9 @@ const options = createResource({
 	transform: (data) => {
 		return data.map((option) => {
 			return {
-				label: option.value,
+				label: option.label || option.value,
 				value: option.value,
+				description: option.description,
 			}
 		})
 	},

frontend/src/components/Controls/MultiSelect.vue

@@ -0,0 +1,246 @@
+<template>
+	<div>
+		<label class="block mb-1" :class="labelClasses" v-if="label">
+			{{ label }}
+			<span class="text-red-500" v-if="required">*</span>
+		</label>
+		<div class="grid grid-cols-3 gap-1">
+			<Button
+				ref="emails"
+				v-for="value in values"
+				:key="value"
+				:label="value"
+				theme="gray"
+				variant="subtle"
+				class="rounded-md"
+				@keydown.delete.capture.stop="removeLastValue"
+			>
+				<template #suffix>
+					<X @click="removeValue(value)" class="h-4 w-4 stroke-1.5" />
+				</template>
+			</Button>
+			<div class="">
+				<Combobox v-model="selectedValue" nullable>
+					<Popover class="w-full" v-model:show="showOptions">
+						<template #target="{ togglePopover }">
+							<ComboboxInput
+								ref="search"
+								class="search-input form-input w-full focus-visible:!ring-0"
+								type="text"
+								:value="query"
+								@change="
+									(e) => {
+										query = e.target.value
+										showOptions = true
+									}
+								"
+								autocomplete="off"
+								@focus="() => togglePopover()"
+								@keydown.delete.capture.stop="removeLastValue"
+							/>
+						</template>
+						<template #body="{ isOpen }">
+							<div v-show="isOpen">
+								<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+									<ComboboxOptions
+										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+										static
+									>
+										<ComboboxOption
+											v-for="option in options"
+											:key="option.value"
+											:value="option"
+											v-slot="{ active }"
+										>
+											<li
+												:class="[
+													'flex cursor-pointer items-center rounded px-2 py-1 text-base',
+													{ 'bg-gray-100': active },
+												]"
+											>
+												<div class="flex flex-col gap-1 p-1">
+													<div class="text-base font-medium">
+														{{ option.description }}
+													</div>
+													<div class="text-sm text-gray-600">
+														{{ option.value }}
+													</div>
+												</div>
+											</li>
+										</ComboboxOption>
+									</ComboboxOptions>
+								</div>
+							</div>
+						</template>
+					</Popover>
+				</Combobox>
+			</div>
+		</div>
+		<!-- <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" /> -->
+	</div>
+</template>
+
+<script setup>
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxOptions,
+	ComboboxOption,
+} from '@headlessui/vue'
+import { createResource, Popover, Button } from 'frappe-ui'
+import { ref, computed, nextTick } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { X } 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,
+	},
+	errorMessage: {
+		type: Function,
+		default: (value) => `${value} is an Invalid value`,
+	},
+	required: {
+		type: Boolean,
+	},
+})
+
+const values = defineModel()
+
+const emails = ref([])
+const search = ref(null)
+const error = ref(null)
+const query = ref('')
+const text = ref('')
+const showOptions = ref(false)
+
+const selectedValue = computed({
+	get: () => query.value || '',
+	set: (val) => {
+		query.value = ''
+		if (val) {
+			showOptions.value = false
+		}
+		val?.value && addValue(val.value)
+	},
+})
+
+watchDebounced(
+	query,
+	(val) => {
+		val = val || ''
+		if (text.value === val) return
+		text.value = val
+		reload(val)
+	},
+	{ debounce: 300, immediate: true }
+)
+
+const filterOptions = createResource({
+	url: 'frappe.desk.search.search_link',
+	method: 'POST',
+	cache: [text.value, props.doctype],
+	auto: true,
+	params: {
+		txt: text.value,
+		doctype: props.doctype,
+	},
+})
+
+const options = computed(() => {
+	return filterOptions.data || []
+})
+
+function reload(val) {
+	filterOptions.update({
+		params: {
+			txt: val,
+			doctype: props.doctype,
+		},
+	})
+	filterOptions.reload()
+}
+
+const 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 = '')
+	}
+}
+
+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-gray-600',
+	]
+})
+</script>

frontend/src/components/Controls/Rating.vue

@@ -1,18 +1,28 @@
 <template>
-	<div class="flex text-center">
+	<div class="space-y-1">
-		<div v-for="index in 5">
+		<label class="block text-xs text-gray-600" v-if="props.label">
-			<Star
+			{{ props.label }}
-				:class="index <= rating ? 'fill-orange-500' : ''"
+		</label>
-				class="h-6 w-6 fill-gray-400 text-gray-50 mr-1 cursor-pointer"
+		<div class="flex text-center">
-				@click="markRating(index)"
+			<div
-			/>
+				v-for="index in 5"
+				@mouseover="hoveredRating = index"
+				@mouseleave="hoveredRating = 0"
+			>
+				<Star
+					class="fill-gray-400 text-gray-50 stroke-1 mr-1 cursor-pointer"
+					:class="iconClasses(index)"
+					@click="markRating(index)"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
 import { Star } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
 const props = defineProps({
 	id: {
 		type: String,
@@ -22,10 +32,36 @@ const props = defineProps({
 		type: Number,
 		default: 0,
 	},
+	label: {
+		type: String,
+		default: '',
+	},
+	size: {
+		type: String,
+		default: 'md',
+	},
 })
 
+const iconClasses = (index) => {
+	let classes = [
+		{
+			sm: 'size-4',
+			md: 'size-5',
+			lg: 'size-6',
+			xl: 'size-7',
+		}[props.size],
+	]
+	if (index <= hoveredRating.value && index > rating.value) {
+		classes.push('fill-yellow-200')
+	} else if (index <= rating.value) {
+		classes.push('fill-yellow-500')
+	}
+	return classes.join(' ')
+}
+
 const emit = defineEmits(['update:modelValue'])
-let rating = ref(props.modelValue)
+const rating = ref(props.modelValue)
+const hoveredRating = ref(0)
 
 let emitChange = (value) => {
 	emit('update:modelValue', value)
@@ -35,4 +71,11 @@ function markRating(index) {
 	emitChange(index)
 	rating.value = index
 }
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		rating.value = newVal
+	}
+)
 </script>

frontend/src/components/CourseCard.vue

@@ -2,15 +2,25 @@
 	<div
 		v-if="course.title"
 		class="flex flex-col h-full rounded-md shadow-md text-base overflow-auto"
-		style="min-height: 320px"
+		style="min-height: 350px"
 	>
 		<div
 			class="course-image"
 			:class="{ 'default-image': !course.image }"
-			:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
+			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
-			<div class="flex relative top-4 left-4 w-fit flex-wrap">
+			<div
-				<Badge theme="gray" size="md" class="mr-2" v-for="tag in course.tags">
+				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
+			>
+				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
+					{{ __('Featured') }}
+				</Badge>
+				<Badge
+					variant="subtle"
+					theme="gray"
+					size="md"
+					v-for="tag in course.tags"
+				>
 					{{ tag }}
 				</Badge>
 			</div>
@@ -20,29 +30,29 @@
 		</div>
 		<div class="flex flex-col flex-auto p-4">
 			<div class="flex items-center justify-between mb-2">
-				<div v-if="course.lesson_count">
+				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
 						<span class="flex items-center">
 							<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.lesson_count }}
+							{{ course.lessons }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.enrollment_count">
+				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
 						<span class="flex items-center">
 							<Users class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.enrollment_count }}
+							{{ course.enrollments }}
 						</span>
 					</Tooltip>
 				</div>
 
-				<div v-if="course.avg_rating">
+				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
 						<span class="flex items-center">
 							<Star class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
-							{{ course.avg_rating }}
+							{{ course.rating }}
 						</span>
 					</Tooltip>
 				</div>
@@ -62,18 +72,15 @@
 				{{ course.title }}
 			</div>
 
-			<div class="short-introduction">
+			<div class="short-introduction text-gray-700 text-sm">
 				{{ course.short_introduction }}
 			</div>
-			<div
+
+			<ProgressBar
 				v-if="user && course.membership"
-				class="w-full bg-gray-200 rounded-full h-1 mb-2"
+				:progress="course.membership.progress"
-			>
+			/>
-				<div
+
-					class="bg-gray-900 h-1 rounded-full"
-					:style="{ width: Math.ceil(course.membership.progress) + '%' }"
-				></div>
-			</div>
 			<div v-if="user && course.membership" class="text-sm mb-4">
 				{{ Math.ceil(course.membership.progress) }}% completed
 			</div>
@@ -81,7 +88,7 @@
 			<div class="flex items-center justify-between mt-auto">
 				<div class="flex avatar-group overlap">
 					<div
-						class="mr-1"
+						class="h-6 mr-1"
 						:class="{ 'avatar-group overlap': course.instructors.length > 1 }"
 					>
 						<UserAvatar
@@ -89,17 +96,7 @@
 							:user="instructor"
 						/>
 					</div>
-					<span v-if="course.instructors.length == 1">
+					<CourseInstructors :instructors="course.instructors" />
-						{{ course.instructors[0].full_name }}
-					</span>
-					<span v-if="course.instructors.length == 2">
-						{{ course.instructors[0].first_name }} and
-						{{ course.instructors[1].first_name }}
-					</span>
-					<span v-if="course.instructors.length > 2">
-						{{ course.instructors[0].first_name }} and
-						{{ course.instructors.length - 1 }} others
-					</span>
 				</div>
 
 				<div class="font-semibold">
@@ -114,6 +111,8 @@ import { BookOpen, Users, Star } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
 import { Badge, Tooltip } from 'frappe-ui'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 const { user } = sessionStore()
 
@@ -150,8 +149,8 @@ const props = defineProps({
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	background-color: theme('colors.orange.100');
+	background-color: theme('colors.green.100');
-	color: theme('colors.orange.600');
+	color: theme('colors.green.600');
 }
 
 .avatar-group {

frontend/src/components/CourseCardOverlay.vue

@@ -16,10 +16,10 @@
 					params: {
 						courseName: course.name,
 						chapterNumber: course.data.current_lesson
-							? course.data.current_lesson.split('.')[0]
+							? course.data.current_lesson.split('-')[0]
 							: 1,
 						lessonNumber: course.data.current_lesson
-							? course.data.current_lesson.split('.')[1]
+							? course.data.current_lesson.split('-')[1]
 							: 1,
 					},
 				}"
@@ -46,6 +46,12 @@
 					</span>
 				</Button>
 			</router-link>
+			<div
+				v-else-if="course.data.disable_self_learning"
+				class="bg-blue-100 text-blue-900 text-sm rounded-md py-1 px-3"
+			>
+				{{ __('Contact the Administrator to enroll for this course.') }}
+			</div>
 			<Button
 				v-else
 				@click="enrollStudent()"
@@ -57,10 +63,19 @@
 					{{ __('Start Learning') }}
 				</span>
 			</Button>
+			<Button
+				v-if="canGetCertificate"
+				@click="fetchCertificate()"
+				variant="subtle"
+				class="w-full mt-2"
+				size="md"
+			>
+				{{ __('Get Certificate') }}
+			</Button>
 			<router-link
 				v-if="user?.data?.is_moderator || is_instructor()"
 				:to="{
-					name: 'CreateCourse',
+					name: 'CourseForm',
 					params: {
 						courseName: course.data.name,
 					},
@@ -78,21 +93,19 @@
 			<div class="flex items-center mb-3">
 				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
 				<span class="ml-2">
-					{{ course.data.lesson_count }} {{ __('Lessons') }}
+					{{ course.data.lessons }} {{ __('Lessons') }}
 				</span>
 			</div>
 			<div class="flex items-center mb-3">
 				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
 				<span class="ml-2">
-					{{ course.data.enrollment_count_formatted }}
+					{{ formatAmount(course.data.enrollments) }}
 					{{ __('Enrolled Students') }}
 				</span>
 			</div>
 			<div class="flex items-center">
 				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
-				<span class="ml-2">
+				<span class="ml-2"> {{ course.data.rating }} {{ __('Rating') }} </span>
-					{{ course.data.avg_rating }} {{ __('Rating') }}
-				</span>
 			</div>
 		</div>
 	</div>
@@ -101,7 +114,8 @@
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
-import { createToast } from '@/utils/'
+import { showToast, formatAmount } from '@/utils/'
+import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -123,29 +137,31 @@ const video_link = computed(() => {
 
 function enrollStudent() {
 	if (!user.data) {
-		createToast({
+		showToast(
-			title: 'Please Login',
+			__('Please Login'),
-			icon: 'alert-circle',
+			__('You need to login first to enroll for this course'),
-			iconClasses: 'text-yellow-600 bg-yellow-100',
+			'alert-circle'
-		})
+		)
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
-		}, 3000)
+		}, 2000)
 	} else {
 		const enrollStudentResource = createResource({
 			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
 		})
-		console.log(props.course)
 		enrollStudentResource
 			.submit({
 				course: props.course.data.name,
 			})
 			.then(() => {
-				createToast({
+				capture('enrolled_in_course', {
-					title: 'Enrolled Successfully',
+					course: props.course.data.name,
-					icon: 'check',
-					iconClasses: 'text-green-600 bg-green-100',
 				})
+				showToast(
+					__('Success'),
+					__('You have been enrolled in this course'),
+					'check'
+				)
 				setTimeout(() => {
 					router.push({
 						name: 'Lesson',
@@ -155,10 +171,52 @@ function enrollStudent() {
 							lessonNumber: 1,
 						},
 					})
-				}, 3000)
+				}, 2000)
 			})
 	}
 }
 
-const is_instructor = () => {}
+const is_instructor = () => {
+	let user_is_instructor = false
+	props.course.data.instructors.forEach((instructor) => {
+		if (!user_is_instructor && instructor.name == user.data?.name) {
+			user_is_instructor = true
+		}
+	})
+	return user_is_instructor
+}
+
+const canGetCertificate = computed(() => {
+	if (
+		props.course.data?.enable_certification &&
+		props.course.data?.membership?.progress == 100
+	) {
+		return true
+	}
+	return false
+})
+
+const certificate = createResource({
+	url: 'lms.lms.doctype.lms_certificate.lms_certificate.create_certificate',
+	makeParams(values) {
+		return {
+			course: values.course,
+		}
+	},
+	onSuccess(data) {
+		window.open(
+			`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+				data.name
+			}&format=${encodeURIComponent(data.template)}`,
+			'_blank'
+		)
+	},
+})
+
+const fetchCertificate = () => {
+	certificate.submit({
+		course: props.course.data?.name,
+		member: user.data?.name,
+	})
+}
 </script>

frontend/src/components/CourseInstructors.vue

@@ -0,0 +1,50 @@
+<template>
+	<span v-if="instructors?.length == 1">
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[0].username },
+			}"
+		>
+			{{ instructors[0].full_name }}
+		</router-link>
+	</span>
+	<span v-if="instructors?.length == 2">
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[0].username },
+			}"
+		>
+			{{ instructors[0].first_name }}
+		</router-link>
+		and
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[1].username },
+			}"
+		>
+			{{ instructors[1].first_name }}
+		</router-link>
+	</span>
+	<span v-if="instructors?.length > 2">
+		<router-link
+			:to="{
+				name: 'Profile',
+				params: { username: instructors[0].username },
+			}"
+		>
+			{{ instructors[0].first_name }}
+		</router-link>
+		and {{ instructors?.length - 1 }} others
+	</span>
+</template>
+<script setup>
+const props = defineProps({
+	instructors: {
+		type: Array,
+		required: true,
+	},
+})
+</script>

frontend/src/components/CourseOutline.vue

@@ -2,9 +2,9 @@
 	<div class="text-base">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
-			class="flex items-center justify-between mb-4"
+			class="grid grid-cols-[70%,30%] mb-4 px-2"
 		>
-			<div class="font-semibold" :class="allowEdit ? 'text-base' : 'text-lg'">
+			<div class="font-semibold text-lg leading-5">
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
@@ -16,7 +16,7 @@
 		</div>
 		<div
 			:class="{
-				'shadow rounded-md pt-2 px-2': showOutline && outline.data?.length,
+				'shadow rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
 			<Disclosure
@@ -25,58 +25,94 @@
 				:key="chapter.name"
 				:defaultOpen="openChapterDetail(chapter.idx)"
 			>
-				<DisclosureButton ref="" class="flex w-full px-2 py-3">
+				<DisclosureButton ref="" class="flex items-center w-full p-2 group">
 					<ChevronRight
 						:class="{
 							'rotate-90 transform duration-200': open,
 							'duration-200': !open,
+							hidden: chapter.is_scorm_package,
 							open: index == 1,
 						}"
-						class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+						class="h-4 w-4 text-gray-900 stroke-1"
 					/>
-					<div class="text-base text-left font-medium leading-5">
+					<div
+						class="text-base text-left font-medium leading-5 ml-2"
+						@click="redirectToChapter(chapter)"
+					>
 						{{ chapter.title }}
 					</div>
-				</DisclosureButton>
+					<div class="flex ml-auto space-x-4">
-				<DisclosurePanel class="pb-2">
+						<Tooltip :text="__('Edit Chapter')" placement="bottom">
-					<div v-for="lesson in chapter.lessons" :key="lesson.name">
+							<FilePenLine
-						<div class="outline-lesson pl-8 py-2">
+								v-if="allowEdit"
-							<router-link
+								@click.prevent="openChapterModal(chapter)"
-								:to="{
+								class="h-4 w-4 text-gray-900 invisible group-hover:visible"
-									name: allowEdit ? 'CreateLesson' : 'Lesson',
+							/>
-									params: {
+						</Tooltip>
-										courseName: courseName,
+						<Tooltip :text="__('Delete Chapter')" placement="bottom">
-										chapterNumber: lesson.number.split('.')[0],
+							<Trash2
-										lessonNumber: lesson.number.split('.')[1],
+								v-if="allowEdit"
-									},
+								@click.prevent="trashChapter(chapter.name)"
-								}"
+								class="h-4 w-4 text-red-500 invisible group-hover:visible"
-							>
+							/>
-								<div class="flex items-center text-sm leading-5">
+						</Tooltip>
-									<MonitorPlay
-										v-if="lesson.icon === 'icon-youtube'"
-										class="h-4 w-4 text-gray-900 stroke-1 mr-2"
-									/>
-									<HelpCircle
-										v-else-if="lesson.icon === 'icon-quiz'"
-										class="h-4 w-4 text-gray-900 stroke-1 mr-2"
-									/>
-									<FileText
-										v-else-if="lesson.icon === 'icon-list'"
-										class="h-4 w-4 text-gray-900 stroke-1 mr-2"
-									/>
-									{{ lesson.title }}
-									<Check
-										v-if="lesson.is_complete"
-										class="h-4 w-4 text-green-500 stroke-1.5 ml-2"
-									/>
-								</div>
-							</router-link>
-						</div>
 					</div>
-					<div v-if="allowEdit" class="flex mt-2 pl-8">
+				</DisclosureButton>
+				<DisclosurePanel v-if="!chapter.is_scorm_package">
+					<Draggable
+						v-if="!chapter.is_scorm_package"
+						:list="chapter.lessons"
+						:disabled="!allowEdit"
+						item-key="name"
+						group="items"
+						@end="updateOutline"
+						:data-chapter="chapter.name"
+					>
+						<template #item="{ element: lesson }">
+							<div class="outline-lesson pl-8 py-2 pr-4">
+								<router-link
+									:to="{
+										name: allowEdit ? 'LessonForm' : 'Lesson',
+										params: {
+											courseName: courseName,
+											chapterNumber: lesson.number.split('.')[0],
+											lessonNumber: lesson.number.split('.')[1],
+										},
+									}"
+								>
+									<div class="flex items-center text-sm leading-5 group">
+										<MonitorPlay
+											v-if="lesson.icon === 'icon-youtube'"
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+										/>
+										<HelpCircle
+											v-else-if="lesson.icon === 'icon-quiz'"
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+										/>
+										<FileText
+											v-else-if="lesson.icon === 'icon-list'"
+											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+										/>
+										{{ lesson.title }}
+										<Trash2
+											v-if="allowEdit"
+											@click.prevent="trashLesson(lesson.name, chapter.name)"
+											class="h-4 w-4 text-red-500 ml-auto invisible group-hover:visible"
+										/>
+										<Check
+											v-if="lesson.is_complete"
+											class="h-4 w-4 text-green-700 ml-2"
+										/>
+									</div>
+								</router-link>
+							</div>
+						</template>
+					</Draggable>
+					<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
 						<router-link
+							v-if="!chapter.is_scorm_package"
 							:to="{
-								name: 'CreateLesson',
+								name: 'LessonForm',
 								params: {
 									courseName: courseName,
 									chapterNumber: chapter.idx,
@@ -88,9 +124,6 @@
 								{{ __('Add Lesson') }}
 							</Button>
 						</router-link>
-						<Button class="ml-2" @click="openChapterModal(chapter)">
-							{{ __('Edit Chapter') }}
-						</Button>
 					</div>
 				</DisclosurePanel>
 			</Disclosure>
@@ -104,23 +137,30 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource } from 'frappe-ui'
+import { Button, createResource, Tooltip } from 'frappe-ui'
-import { ref } from 'vue'
+import { getCurrentInstance, inject, ref } from 'vue'
+import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
-	ChevronRight,
-	MonitorPlay,
-	HelpCircle,
-	FileText,
 	Check,
+	ChevronRight,
+	FileText,
+	FilePenLine,
+	HelpCircle,
+	MonitorPlay,
+	Trash2,
 } from 'lucide-vue-next'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
+import { showToast } from '@/utils'
 
 const route = useRoute()
-const expandAll = ref(true)
+const router = useRouter()
+const user = inject('$user')
 const showChapterModal = ref(false)
 const currentChapter = ref(null)
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	courseName: {
@@ -139,6 +179,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	getProgress: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const outline = createResource({
@@ -146,10 +190,63 @@ const outline = createResource({
 	cache: ['course_outline', props.courseName],
 	params: {
 		course: props.courseName,
+		progress: props.getProgress,
 	},
 	auto: true,
 })
 
+const deleteLesson = createResource({
+	url: 'lms.lms.api.delete_lesson',
+	makeParams(values) {
+		return {
+			lesson: values.lesson,
+			chapter: values.chapter,
+		}
+	},
+	onSuccess() {
+		outline.reload()
+		showToast('Success', 'Lesson deleted successfully', 'check')
+	},
+})
+
+const updateLessonIndex = createResource({
+	url: 'lms.lms.api.update_lesson_index',
+	makeParams(values) {
+		return {
+			lesson: values.lesson,
+			sourceChapter: values.sourceChapter,
+			targetChapter: values.targetChapter,
+			idx: values.idx,
+		}
+	},
+	onSuccess() {
+		showToast('Success', 'Lesson moved successfully', 'check')
+	},
+})
+
+const trashLesson = (lessonName, chapterName) => {
+	$dialog({
+		title: __('Delete this lesson?'),
+		message: __(
+			'Deleting this lesson will permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteLesson.submit({
+						lesson: lessonName,
+						chapter: chapterName,
+					})
+					close()
+				},
+			},
+		],
+	})
+}
+
 const openChapterDetail = (index) => {
 	return index == route.params.chapterNumber || index == 1
 }
@@ -162,6 +259,70 @@ const openChapterModal = (chapter = null) => {
 const getCurrentChapter = () => {
 	return currentChapter.value
 }
+
+const updateOutline = (e) => {
+	updateLessonIndex.submit({
+		lesson: e.item.__draggable_context.element.name,
+		sourceChapter: e.from.dataset.chapter,
+		targetChapter: e.to.dataset.chapter,
+		idx: e.newIndex,
+	})
+}
+
+const deleteChapter = createResource({
+	url: 'lms.lms.api.delete_chapter',
+	makeParams(values) {
+		return {
+			chapter: values.chapter,
+		}
+	},
+	onSuccess() {
+		outline.reload()
+		showToast('Success', 'Chapter deleted successfully', 'check')
+	},
+})
+
+const trashChapter = (chapterName) => {
+	$dialog({
+		title: __('Delete this chapter?'),
+		message: __(
+			'Deleting this chapter will also delete all its lessons and permanently remove it from the course. This action cannot be undone. Are you sure you want to continue?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteChapter.submit({ chapter: chapterName })
+					close()
+				},
+			},
+		],
+	})
+}
+
+const redirectToChapter = (chapter) => {
+	if (!chapter.is_scorm_package) return
+	event.preventDefault()
+	if (props.allowEdit) return
+	if (!user.data) {
+		showToast(
+			__('You are not enrolled'),
+			__('Please enroll for this course to view this lesson'),
+			'alert-circle'
+		)
+		return
+	}
+
+	router.push({
+		name: 'SCORMChapter',
+		params: {
+			courseName: props.courseName,
+			chapterName: chapter.name,
+		},
+	})
+}
 </script>
 <style>
 .outline-lesson:has(.router-link-active) {

frontend/src/components/CourseReviews.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="reviews.data" class="mt-20 mb-10">
+	<div v-if="reviews.data?.length || membership" class="mt-20 mb-10">
 		<Button
 			v-if="membership && !hasReviewed.data"
 			@click="openReviewModal()"
@@ -8,18 +8,30 @@
 			{{ __('Write a Review') }}
 		</Button>
 		<div class="flex items-center font-semibold text-2xl">
-			<Star class="h-6 w-6 stroke-1 text-gray-50 fill-orange-500 mr-1" />
+			{{ __('Student Reviews') }}
-			{{ avg_rating }} {{ __('ratings and ') }} {{ reviews.data.length }}
-			{{ __('reviews') }}
 		</div>
 		<div class="grid gap-8 mt-10">
 			<div v-for="(review, index) in reviews.data">
 				<div class="flex items-center">
-					<UserAvatar :user="review.owner_details" :size="'2xl'" />
+					<router-link
+						:to="{
+							name: 'Profile',
+							params: { username: review.owner_details.username },
+						}"
+					>
+						<UserAvatar :user="review.owner_details" :size="'2xl'" />
+					</router-link>
 					<div class="mx-4">
-						<span class="text-lg font-medium mr-4">
+						<router-link
-							{{ review.owner_details.full_name }}
+							:to="{
-						</span>
+								name: 'Profile',
+								params: { username: review.owner_details.username },
+							}"
+						>
+							<span class="text-lg font-medium mr-4">
+								{{ review.owner_details.full_name }}
+							</span>
+						</router-link>
 						<span>
 							{{ review.creation }}
 						</span>
@@ -64,7 +76,7 @@ const props = defineProps({
 		required: true,
 	},
 	avg_rating: {
-		type: Number,
+		type: String,
 		required: true,
 	},
 	membership: {

frontend/src/components/DesktopLayout.vue

@@ -5,7 +5,6 @@
 				<div
 					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
 				>
-					<slot name="sidebar" />
 					<AppSidebar />
 				</div>
 				<div class="w-full overflow-auto" id="scrollContainer">

frontend/src/components/DiscussionReplies.vue

@@ -69,9 +69,11 @@
 				/>
 			</div>
 		</div>
+
 		<TextEditor
 			class="mt-5"
 			:content="newReply"
+			:mentions="mentionUsers"
 			@change="(val) => (newReply = val)"
 			placeholder="Type your reply here..."
 			:fixedMenu="true"
@@ -92,13 +94,14 @@ import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, computed } from 'vue'
 import { createToast } from '../utils'
 
 const showTopics = defineModel('showTopics')
 const newReply = ref('')
 const socket = inject('$socket')
 const user = inject('$user')
+const allUsers = inject('$allUsers')
 
 const props = defineProps({
 	topic: {
@@ -147,6 +150,16 @@ const newReplyResource = createResource({
 	},
 })
 
+const mentionUsers = computed(() => {
+	let users = Object.values(allUsers.data).map((user) => {
+		return {
+			value: user.name,
+			label: user.full_name,
+		}
+	})
+	return users
+})
+
 const postReply = () => {
 	newReplyResource.submit(
 		{},

frontend/src/components/Discussions.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
-			{{ __('New {0}').format(title) }}
+			{{ __('New {0}').format(singularize(title)) }}
 		</Button>
 		<div class="text-xl font-semibold">
 			{{ __(title) }}
@@ -40,13 +40,16 @@
 	<div v-else-if="singleThread && topics.data">
 		<DiscussionReplies :topic="topics.data" :singleThread="singleThread" />
 	</div>
-	<div v-else class="flex justify-center border mt-5 p-5 rounded-md">
+	<div
-		<MessageSquareIcon class="w-10 h-10 stroke-1.5 text-gray-800 mr-2" />
+		v-else
-		<div>
+		class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
-			<div class="text-xl font-semibold mb-2">
+	>
+		<MessageSquareText class="w-7 h-7 text-gray-500 stroke-1.5 mr-2" />
+		<div class="">
+			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
 			</div>
-			<div>
+			<div class="text-gray-600">
 				{{ __(emptyStateText) }}
 			</div>
 		</div>
@@ -60,13 +63,14 @@
 	/>
 </template>
 <script setup>
-import { createResource, Button, TextEditor } from 'frappe-ui'
+import { createResource, Button } from 'frappe-ui'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { timeAgo } from '../utils'
+import { singularize, timeAgo } from '../utils'
 import { ref, onMounted, inject } from 'vue'
 import DiscussionReplies from '@/components/DiscussionReplies.vue'
 import DiscussionModal from '@/components/Modals/DiscussionModal.vue'
-import { MessageSquareIcon } from 'lucide-vue-next'
+import { MessageSquareText } from 'lucide-vue-next'
+import { getScrollContainer } from '@/utils/scrollContainer'
 
 const showTopics = ref(true)
 const currentTopic = ref(null)
@@ -89,16 +93,20 @@ const props = defineProps({
 	},
 	emptyStateTitle: {
 		type: String,
-		default: 'No topics yet',
+		default: '',
 	},
 	emptyStateText: {
 		type: String,
-		default: 'Be the first to start a discussion',
+		default: 'Start a discussion',
 	},
 	singleThread: {
 		type: Boolean,
 		default: false,
 	},
+	scrollToBottom: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 onMounted(() => {
@@ -107,8 +115,19 @@ onMounted(() => {
 	socket.on('new_discussion_topic', (data) => {
 		topics.refresh()
 	})
+
+	if (props.scrollToBottom) {
+		setTimeout(() => {
+			scrollToEnd()
+		}, 100)
+	}
 })
 
+const scrollToEnd = () => {
+	let scrollContainer = getScrollContainer()
+	scrollContainer.scrollTop = scrollContainer.scrollHeight
+}
+
 const topics = createResource({
 	url: 'lms.lms.utils.get_discussion_topics',
 	cache: ['topics', props.doctype, props.docname],

frontend/src/components/JobCard.vue

@@ -1,35 +1,31 @@
 <template>
-	<div class="flex shadow rounded-md p-4 h-full">
+	<div class="flex rounded p-1 lg:px-2 lg:py-2.5 hover:bg-gray-100">
-		<img
+		<div class="flex w-3/5 md:w-2/5">
-			:src="job.company_logo"
+			<img
-			class="w-12 h-12 rounded-lg object-contain mr-4"
+				:src="job.company_logo"
-			:alt="job.company_name"
+				class="w-12 h-12 rounded-lg object-contain mr-4"
-		/>
+				:alt="job.company_name"
-		<div>
+			/>
-			<div class="text-xl font-semibold mb-2">
-				{{ job.job_title }}
-			</div>
 			<div>
-				{{ __('posted by') }}
+				<div class="font-medium mb-1">
-				<span class="font-medium">
+					{{ job.job_title }}
+				</div>
+				<div class="text-gray-700">
 					{{ job.company_name }}
-				</span>
+				</div>
-			</div>
-			<div class="flex items-center my-4">
-				<Badge :label="job.type" theme="green" size="lg" class="mr-4" />
-				<Badge :label="job.location.split(' ')[0]" theme="gray" size="lg">
-					<template #prefix>
-						<MapPin class="h-4 w-4 stroke-1.5" />
-					</template>
-				</Badge>
-			</div>
-			<div>
-				{{ __('posted on') }}
-				<span class="font-medium">
-					{{ dayjs(job.creation).format('DD MMM YYYY') }}
-				</span>
 			</div>
 		</div>
+		<div class="flex justify-end w-1/5 text-gray-700">
+			{{ job.location.replace(',', '').split(' ')[0] }}
+		</div>
+		<div
+			class="flex justify-end w-1/5 text-gray-700 text-right hidden md:block"
+		>
+			{{ job.type }}
+		</div>
+		<div class="flex justify-end w-1/5 text-sm text-gray-700 text-right">
+			{{ dayjs(job.creation).format('DD MMM YYYY') }}
+		</div>
 	</div>
 	<!-- <div class="flex flex-col shadow rounded-md p-4 h-full">
 		<div class="flex justify-between">

frontend/src/components/LessonContent.vue

@@ -9,7 +9,7 @@
 			allowfullscreen
 		></iframe>
 	</div>
-	<div v-for="block in content.split('\n\n')">
+	<div v-for="block in content?.split('\n\n')">
 		<div v-if="block.includes('{{ YouTubeVideo')">
 			<iframe
 				class="youtube-video"
@@ -24,7 +24,12 @@
 			<Quiz :quiz="getId(block)" />
 		</div>
 		<div v-else-if="block.includes('{{ Video')">
-			<video controls width="100%" controlsList="nodownload">
+			<video
+				controls
+				width="100%"
+				controlsList="nodownload"
+				oncontextmenu="return false;"
+			>
 				<source :src="getId(block)" type="video/mp4" />
 			</video>
 		</div>
@@ -32,7 +37,7 @@
 			<iframe
 				:src="getPDFSource(block)"
 				width="100%"
-				height="400"
+				height="700px"
 				frameborder="0"
 				allowfullscreen
 			></iframe>

frontend/src/components/LessonHelp.vue

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

frontend/src/components/LessonPlugins.vue

@@ -1,142 +0,0 @@
-<template>
-	<div class="text-lg font-semibold">
-		{{ __('Components') }}
-	</div>
-	<div class="mt-5">
-		<Tooltip
-			:text="
-				__(
-					'Content such as quiz, video and image will be added in the editor you select.'
-				)
-			"
-			placement="bottom"
-		>
-			<div class="">
-				<div class="text-xs text-gray-600 mb-1">
-					{{ __('Select an Editor') }}
-				</div>
-				<Select v-model="currentEditor" :options="getEditorOptions()" />
-			</div>
-		</Tooltip>
-		<div class="flex mt-4">
-			<Link
-				v-model="quiz"
-				class="flex-1"
-				doctype="LMS Quiz"
-				:label="__('Select a Quiz')"
-			/>
-			<Button @click="addQuiz()" class="self-end ml-2">
-				<template #icon>
-					<Plus class="h-4 w-4 stroke-1.5" />
-				</template>
-			</Button>
-		</div>
-		<div class="mt-4">
-			<div class="text-xs text-gray-600 mb-1">
-				{{ __('Add an image, video, pdf or audio.') }}
-			</div>
-			<div class="flex">
-				<FileUploader
-					v-if="!file"
-					:fileTypes="['image/*', 'video/*', 'audio/*', '.pdf']"
-					:validateFile="validateFile"
-					@success="(data) => addFile(data)"
-				>
-					<template v-slot="{ file, progress, uploading, openFileSelector }">
-						<div class="">
-							<Button @click="openFileSelector" :loading="uploading">
-								{{
-									uploading
-										? __('Uploading {0}%').format(progress)
-										: __('Upload an File')
-								}}
-							</Button>
-						</div>
-					</template>
-				</FileUploader>
-				<div v-else class="">
-					<div class="flex items-center">
-						<div class="border rounded-md p-2 mr-2">
-							<FileText class="h-4 w-4 stroke-1.5 text-gray-700" />
-						</div>
-						<div class="flex flex-col">
-							<span class="text-xs">
-								{{ file.file_name }}
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import Link from '@/components/Controls/Link.vue'
-import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
-import { Plus, FileText } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-
-const quiz = ref(null)
-const file = ref(null)
-const lessonEditor = ref(null)
-const instructorEditor = ref(null)
-const currentEditor = ref('Lesson Content')
-
-const props = defineProps({
-	editor: {
-		required: true,
-	},
-	notesEditor: {
-		required: true,
-	},
-})
-
-const addQuiz = () => {
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	if (quiz.value) {
-		getCurrentEditor().blocks.insert('quiz', {
-			quiz: quiz.value,
-		})
-		quiz.value = null
-	}
-}
-
-const addFile = (data) => {
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	getCurrentEditor().blocks.insert('upload', data)
-}
-
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3'].includes(extension)) {
-		return 'Only image and video files are allowed.'
-	}
-}
-
-const getEditorOptions = () => {
-	return [
-		{
-			label: 'Lesson Content',
-			value: 'Lesson Content',
-		},
-		{
-			label: 'Instructor Content',
-			value: 'Instructor Content',
-		},
-	]
-}
-
-const getCurrentEditor = () => {
-	return currentEditor.value == 'Lesson Content'
-		? lessonEditor.value
-		: instructorEditor.value
-}
-
-watch(
-	() => [props.editor, props.notesEditor],
-	([newEditor, newNotesEditor], [oldEditor, oldNotesEditor]) => {
-		lessonEditor.value = newEditor
-		instructorEditor.value = newNotesEditor
-	}
-)
-</script>

frontend/src/components/LiveClass.vue

@@ -1,59 +1,59 @@
 <template>
-	<Button
+	<div class="flex items-center justify-between mb-5">
-		v-if="user.data.is_moderator"
+		<div class="text-lg font-semibold">
-		variant="solid"
+			{{ __('Live Class') }}
-		class="float-right mb-3"
+		</div>
-		@click="openLiveClassModal"
+		<Button v-if="user.data.is_moderator" @click="openLiveClassModal">
-	>
+			<template #prefix>
-		<template #prefix>
+				<Plus class="h-4 w-4" />
-			<Plus class="h-4 w-4" />
+			</template>
-		</template>
+			<span>
-		<span>
+				{{ __('Add') }}
-			{{ __('Add Live Class') }}
+			</span>
-		</span>
+		</Button>
-	</Button>
-	<div class="text-lg font-semibold mb-4">
-		{{ __('Live Class') }}
 	</div>
 	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
-		<div v-for="cls in liveClasses.data">
+		<div
-			<div class="border rounded-md p-3">
+			v-for="cls in liveClasses.data"
-				<div class="font-semibold text-lg mb-4">
+			class="flex flex-col border rounded-md h-full text-sm text-gray-700 p-3"
-					{{ cls.title }}
+		>
-				</div>
+			<div class="font-semibold text-gray-900 text-lg mb-4">
-				<div class="flex items-center mb-2">
+				{{ cls.title }}
-					<Calendar class="w-4 h-4 stroke-1.5" />
+			</div>
-					<span class="ml-2">
+			<div class="leading-5 text-gray-700 text-sm mb-4">
-						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
+				{{ cls.description }}
-					</span>
+			</div>
-				</div>
+			<div class="flex items-center mb-2">
-				<div class="flex items-center mb-5">
+				<Calendar class="w-4 h-4 stroke-1.5 text-gray-700" />
-					<Clock class="w-4 h-4 stroke-1.5" />
+				<span class="ml-2">
-					<span class="ml-2">
+					{{ dayjs(cls.date).format('DD MMMM YYYY') }}
-						{{ formatTime(cls.time) }}
+				</span>
-					</span>
+			</div>
-				</div>
+			<div class="flex items-center mb-5">
-				<div class="mb-5">
+				<Clock class="w-4 h-4 stroke-1.5" />
-					{{ cls.description }}
+				<span class="ml-2">
-				</div>
+					{{ formatTime(cls.time) }}
-				<div class="flex items-center gap-2">
+				</span>
-					<a
+			</div>
-						:href="cls.start_url"
+			<div class="flex items-center space-x-2 text-gray-900 mt-auto">
-						target="_blank"
+				<a
-						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+					v-if="user.data?.is_moderator || user.data?.is_evaluator"
-					>
+					:href="cls.start_url"
-						<Monitor class="h-4 w-4 stroke-1.5" />
+					target="_blank"
-						{{ __('Start') }}
+					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
-					</a>
+				>
-					<a
+					<Monitor class="h-4 w-4 stroke-1.5" />
-						:href="cls.join_url"
+					{{ __('Start') }}
-						target="_blank"
+				</a>
-						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+				<a
-					>
+					v-if="cls.date <= dayjs().format('YYYY-MM-DD')"
-						<Video class="h-4 w-4 stroke-1.5" />
+					:href="cls.join_url"
-						{{ __('Join') }}
+					target="_blank"
-					</a>
+					class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
-				</div>
+				>
+					<Video class="h-4 w-4 stroke-1.5" />
+					{{ __('Join') }}
+				</a>
 			</div>
 		</div>
 	</div>
@@ -89,7 +89,6 @@ const liveClasses = createListResource({
 	doctype: 'LMS Live Class',
 	filters: {
 		batch_name: props.batch,
-		date: ['>=', new Date()],
 	},
 	fields: [
 		'title',

frontend/src/components/Members.vue

@@ -0,0 +1,203 @@
+<template>
+	<div class="flex min-h-0 flex-col text-base">
+		<div class="flex items-center justify-between">
+			<div>
+				<div class="text-xl font-semibold mb-1">
+					{{ __(label) }}
+				</div>
+				<!-- <div class="text-xs text-gray-600">
+					{{ __(description) }}
+				</div> -->
+			</div>
+			<div class="flex item-center space-x-2">
+				<FormControl
+					v-model="search"
+					:placeholder="__('Search')"
+					type="text"
+					:debounce="300"
+				/>
+				<Button @click="() => (showForm = !showForm)">
+					<template #icon>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
+					</template>
+				</Button>
+			</div>
+		</div>
+
+		<!-- Form to add new member -->
+		<div v-if="showForm" class="flex items-center space-x-2 my-4">
+			<FormControl
+				v-model="member.email"
+				:placeholder="__('Email')"
+				type="email"
+				class="w-full"
+			/>
+			<FormControl
+				v-model="member.first_name"
+				:placeholder="__('First Name')"
+				type="test"
+				class="w-full"
+			/>
+			<Button @click="addMember()" variant="subtle">
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div class="mt-2 pb-10 overflow-auto">
+			<!-- Member list -->
+			<div class="overflow-y-scroll">
+				<ul class="divide-y">
+					<li
+						v-for="member in memberList"
+						class="grid grid-cols-3 gap-10 py-2 cursor-pointer"
+					>
+						<div
+							@click="openProfile(member.username)"
+							class="flex items-center space-x-3 col-span-2"
+						>
+							<Avatar
+								:image="member.user_image"
+								:label="member.full_name"
+								size="lg"
+							/>
+							<div class="space-y-1">
+								<div class="flex">
+									<div class="text-gray-900">
+										{{ member.full_name }}
+									</div>
+									<div v-if="getRole(member)">
+										{{ getRole(member) }}
+									</div>
+								</div>
+								<div class="text-sm text-gray-700">
+									{{ member.name }}
+								</div>
+							</div>
+						</div>
+						<div class="flex items-center justify-center text-gray-700 text-sm">
+							<div v-if="member.last_active">
+								{{ dayjs(member.last_active).format('DD MMM, YYYY HH:mm a') }}
+							</div>
+							<div v-else>-</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div
+				v-if="memberList.length && hasNextPage"
+				class="flex justify-center mt-4"
+			>
+				<Button @click="members.reload()">
+					<template #prefix>
+						<RefreshCw class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('Load More') }}
+				</Button>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { createResource, Avatar, Button, FormControl } from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { ref, watch, reactive, inject } from 'vue'
+import { RefreshCw, Plus, X } from 'lucide-vue-next'
+
+const router = useRouter()
+const show = defineModel('show')
+const search = ref('')
+const start = ref(0)
+const memberList = ref([])
+const hasNextPage = ref(false)
+const showForm = ref(false)
+const dayjs = inject('$dayjs')
+
+const member = reactive({
+	email: '',
+	first_name: '',
+})
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	show: {
+		type: Boolean,
+	},
+})
+
+const members = createResource({
+	url: 'lms.lms.api.get_members',
+	makeParams: () => {
+		return {
+			search: search.value,
+			start: start.value,
+		}
+	},
+	onSuccess(data) {
+		memberList.value = memberList.value.concat(data)
+		start.value = start.value + 20
+		hasNextPage.value = data.length === 20
+	},
+	auto: true,
+})
+
+const openProfile = (username) => {
+	show.value = false
+	router.push({
+		name: 'Profile',
+		params: {
+			username: username,
+		},
+	})
+}
+
+const newMember = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'User',
+				first_name: member.first_name,
+				email: member.email,
+			},
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		show.value = false
+		router.push({
+			name: 'Profile',
+			params: {
+				username: data.username,
+			},
+		})
+	},
+})
+
+const addMember = () => {
+	newMember.reload()
+}
+
+watch(search, () => {
+	memberList.value = []
+	start.value = 0
+	members.reload()
+})
+
+const getRole = (role) => {
+	const map = {
+		'LMS Student': 'Student',
+		'Course Creator': 'Instructor',
+		Moderator: 'Moderator',
+		'Batch Evaluator': 'Evaluator',
+	}
+	return map[role]
+}
+</script>

frontend/src/components/MobileLayout.vue

@@ -4,42 +4,135 @@
 			<slot />
 		</div>
 		<div
-			v-if="tabs"
+			v-if="sidebarSettings.data"
-			class="fixed flex justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
+			class="fixed flex items-center justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
 			:style="{
-				gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${
+					sidebarLinks.length + 1
+				}, minmax(0, 1fr))`,
 			}"
 		>
 			<button
-				v-for="tab in tabs"
+				v-for="tab in sidebarLinks"
 				:key="tab.label"
 				:class="isVisible(tab) ? 'block' : 'hidden'"
 				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
 				@click="handleClick(tab)"
 			>
 				<component
-					:is="tab.icon"
+					:is="icons[tab.icon]"
 					class="h-6 w-6 stroke-1.5"
 					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
 				/>
 			</button>
+			<Popover
+				trigger="hover"
+				popoverClass="bottom-28 mx-2"
+				placement="top-start"
+			>
+				<template #target>
+					<component
+						:is="icons['List']"
+						class="h-6 w-6 stroke-1.5 text-gray-600"
+					/>
+				</template>
+				<template #body-main>
+					<div class="text-base p-5 space-y-4">
+						<div
+							v-for="link in otherLinks"
+							:key="link.label"
+							class="flex items-center space-x-2"
+							@click="handleClick(link)"
+						>
+							<component
+								:is="icons[link.icon]"
+								class="h-4 w-4 stroke-1.5 text-gray-600"
+							/>
+							<div>
+								{{ link.label }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</Popover>
 		</div>
 	</div>
 </template>
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed, inject } from 'vue'
+import { watch, ref, onMounted } from 'vue'
 import { sessionStore } from '@/stores/session'
+import { usersStore } from '@/stores/user'
+import { Popover } from 'frappe-ui'
+import * as icons from 'lucide-vue-next'
 
-const { logout, user } = sessionStore()
+const { logout, user, sidebarSettings } = sessionStore()
 let { isLoggedIn } = sessionStore()
-
 const router = useRouter()
-const tabs = computed(() => {
+let { userResource } = usersStore()
-	return getSidebarLinks()
+const sidebarLinks = ref(getSidebarLinks())
+const otherLinks = ref([])
+
+onMounted(() => {
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
+
+				addOtherLinks()
+			},
+		}
+	)
 })
 
+const addOtherLinks = () => {
+	if (user) {
+		otherLinks.value.push({
+			label: 'Notifications',
+			icon: 'Bell',
+			to: 'Notifications',
+		})
+		otherLinks.value.push({
+			label: 'Profile',
+			icon: 'UserRound',
+		})
+		otherLinks.value.push({
+			label: 'Log out',
+			icon: 'LogOut',
+		})
+	} else {
+		otherLinks.value.push({
+			label: 'Log in',
+			icon: 'LogIn',
+		})
+	}
+}
+
+watch(userResource, () => {
+	if (
+		userResource.data &&
+		(userResource.data.is_moderator || userResource.data.is_instructor)
+	) {
+		addQuizzes()
+	}
+})
+
+const addQuizzes = () => {
+	otherLinks.value.push({
+		label: 'Quizzes',
+		icon: 'CircleHelp',
+		to: 'Quizzes',
+	})
+}
+
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)
 }
@@ -50,6 +143,13 @@ const handleClick = (tab) => {
 		logout.submit().then(() => {
 			isLoggedIn = false
 		})
+	else if (tab.label == 'Profile')
+		router.push({
+			name: 'Profile',
+			params: {
+				username: userResource.data?.username,
+			},
+		})
 	else router.push({ name: tab.to })
 }
 

frontend/src/components/Modals/AnnouncementModal.vue

@@ -18,6 +18,7 @@
 				<div class="">
 					<div class="mb-1.5 text-sm text-gray-600">
 						{{ __('Subject') }}
+						<span class="text-red-500">*</span>
 					</div>
 					<Input type="text" v-model="announcement.subject" />
 				</div>
@@ -44,7 +45,7 @@
 <script setup>
 import { Dialog, Input, TextEditor, createResource } from 'frappe-ui'
 import { reactive } from 'vue'
-import { createToast } from '@/utils/'
+import { showToast } from '@/utils/'
 
 const show = defineModel()
 
@@ -94,22 +95,14 @@ const makeAnnouncement = (close) => {
 			},
 			onSuccess() {
 				close()
-				createToast({
+				showToast(
-					title: 'Success',
+					__('Success'),
-					text: 'Announcement has been sent successfully',
+					__('Announcement has been sent successfully'),
-					icon: 'Check',
+					'check'
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
+				)
-				})
 			},
 			onError(err) {
-				createToast({
+				showToast(__('Error'), __(err.messages?.[0] || err), 'check')
-					title: 'Error',
-					text: err.messages?.[0] || err,
-					icon: 'x',
-					iconClasses: 'bg-red-600 text-white rounded-md p-px',
-					position: 'top-center',
-					timeout: 10,
-				})
 			},
 		}
 	)

frontend/src/components/Modals/AssessmentModal.vue

@@ -0,0 +1,86 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add an assessment'),
+			size: 'sm',
+			actions: [
+				{
+					label: __('Submit'),
+					variant: 'solid',
+					onClick: (close) => addAssessment(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					type="select"
+					:options="assessmentTypes"
+					v-model="assessmentType"
+					:label="__('Type')"
+				/>
+				<Link
+					v-model="assessment"
+					:doctype="assessmentType"
+					:label="__('Assessment')"
+				/>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, FormControl, createResource } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
+import { computed, ref } from 'vue'
+import { showToast } from '@/utils'
+
+const show = defineModel()
+const assessmentType = ref(null)
+const assessment = ref(null)
+const assessments = defineModel('assessments')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		default: null,
+	},
+})
+
+const assessmentResource = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Assessment',
+				parent: props.batch,
+				parenttype: 'LMS Batch',
+				parentfield: 'assessment',
+				assessment_type: assessmentType.value,
+				assessment_name: assessment.value,
+			},
+		}
+	},
+})
+
+const addAssessment = (close) => {
+	assessmentResource.submit(
+		{},
+		{
+			onSuccess(data) {
+				assessments.value.reload()
+				showToast(__('Success'), __('Assessment added successfully'), 'check')
+				close()
+			},
+		}
+	)
+}
+
+const assessmentTypes = computed(() => {
+	return [
+		{ label: 'Quiz', value: 'LMS Quiz' },
+		{ label: 'Assignment', value: 'LMS Assignment' },
+	]
+})
+</script>

frontend/src/components/Modals/BatchCourseModal.vue

@@ -14,7 +14,18 @@
 		}"
 	>
 		<template #body-content>
-			<Link doctype="LMS Course" v-model="course" />
+			<Link
+				doctype="LMS Course"
+				v-model="course"
+				:label="__('Course')"
+				:required="true"
+			/>
+			<Link
+				doctype="Course Evaluator"
+				v-model="evaluator"
+				:label="__('Evaluator')"
+				class="mt-4"
+			/>
 		</template>
 	</Dialog>
 </template>
@@ -26,6 +37,7 @@ import { showToast } from '@/utils'
 
 const show = defineModel()
 const course = ref(null)
+const evaluator = ref(null)
 const courses = defineModel('courses')
 
 const props = defineProps({
@@ -45,6 +57,7 @@ const createBatchCourse = createResource({
 				parenttype: 'LMS Batch',
 				parentfield: 'courses',
 				course: course.value,
+				evaluator: evaluator.value,
 			},
 		}
 	},
@@ -58,6 +71,7 @@ const addCourse = (close) => {
 				courses.value.reload()
 				close()
 				course.value = null
+				evaluator.value = null
 			},
 			onError(err) {
 				showToast('Error', err.message[0] || err, 'x')

frontend/src/components/Modals/ChapterModal.vue

@@ -2,11 +2,11 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Add Chapter'),
+			title: chapterDetail ? __('Edit Chapter') : __('Add Chapter'),
 			size: 'lg',
 			actions: [
 				{
-					label: chapterDetail ? __('Edit Chapter') : __('Add Chapter'),
+					label: chapterDetail ? __('Edit') : __('Create'),
 					variant: 'solid',
 					onClick: (close) =>
 						chapterDetail ? editChapter(close) : addChapter(close),
@@ -15,17 +15,77 @@
 		}"
 	>
 		<template #body-content>
-			<FormControl label="Title" v-model="chapter.title" class="mb-4" />
+			<div class="space-y-4 text-base">
+				<FormControl label="Title" v-model="chapter.title" :required="true" />
+				<Switch
+					size="sm"
+					:label="__('SCORM Package')"
+					:description="
+						__(
+							'Enable this only if you want to upload a SCORM package as a chapter.'
+						)
+					"
+					v-model="chapter.is_scorm_package"
+				/>
+				<div v-if="chapter.is_scorm_package">
+					<FileUploader
+						v-if="!chapter.scorm_package"
+						:fileTypes="['.zip']"
+						:validateFile="validateFile"
+						@success="(file) => (chapter.scorm_package = file)"
+					>
+						<template v-slot="{ file, progress, uploading, openFileSelector }">
+							<div class="mb-4">
+								<Button @click="openFileSelector" :loading="uploading">
+									{{
+										uploading ? `Uploading ${progress}%` : 'Upload an zip file'
+									}}
+								</Button>
+							</div>
+						</template>
+					</FileUploader>
+					<div v-else class="">
+						<div class="flex items-center">
+							<div class="border rounded-md p-2 mr-2">
+								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							</div>
+							<div class="flex flex-col">
+								<span>
+									{{ chapter.scorm_package.file_name }}
+								</span>
+								<span class="text-sm text-gray-500 mt-1">
+									{{ getFileSize(chapter.scorm_package.file_size) }}
+								</span>
+							</div>
+							<X
+								@click="() => (chapter.scorm_package = null)"
+								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, createResource } from 'frappe-ui'
+import {
-import { defineModel, reactive, watch, inject } from 'vue'
+	Button,
-import { createToast, formatTime } from '@/utils/'
+	createResource,
+	Dialog,
+	FileUploader,
+	FormControl,
+	Switch,
+} from 'frappe-ui'
+import { defineModel, reactive, watch } from 'vue'
+import { showToast, getFileSize } from '@/utils/'
+import { capture } from '@/telemetry'
+import { FileText, X } from 'lucide-vue-next'
+import { useSettings } from '@/stores/settings'
 
 const show = defineModel()
 const outline = defineModel('outline')
+const settingsStore = useSettings()
 
 const props = defineProps({
 	course: {
@@ -36,32 +96,22 @@ const props = defineProps({
 		type: Object,
 	},
 })
+
 const chapter = reactive({
 	title: '',
+	is_scorm_package: 0,
+	scorm_package: null,
 })
 
 const chapterResource = createResource({
-	url: 'frappe.client.insert',
+	url: 'lms.lms.api.upsert_chapter',
 	makeParams(values) {
 		return {
-			doc: {
+			title: chapter.title,
-				doctype: 'Course Chapter',
+			course: props.course,
-				title: chapter.title,
+			is_scorm_package: chapter.is_scorm_package,
-				description: chapter.description,
+			scorm_package: chapter.scorm_package,
-				course: props.course,
-			},
-		}
-	},
-})
-
-const chapterEditResource = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		return {
-			doctype: 'Course Chapter',
 			name: props.chapterDetail?.name,
-			fieldname: 'title',
-			value: chapter.title,
 		}
 	},
 })
@@ -81,43 +131,61 @@ const chapterReference = createResource({
 	},
 })
 
-const addChapter = (close) => {
+const addChapter = async (close) => {
 	chapterResource.submit(
 		{},
 		{
 			validate() {
-				if (!chapter.title) {
+				return validateChapter()
-					return 'Title is required'
-				}
 			},
 			onSuccess: (data) => {
+				capture('chapter_created')
 				chapterReference.submit(
 					{ name: data.name },
 					{
 						onSuccess(data) {
+							cleanChapter()
+							if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+								settingsStore.onboardingDetails.reload()
+							}
 							outline.value.reload()
-							createToast({
+							showToast(
-								text: 'Chapter added successfully',
+								__('Success'),
-								icon: 'check',
+								__('Chapter added successfully'),
-								iconClasses: 'bg-green-600 text-white rounded-md p-px',
+								'check'
-							})
+							)
 						},
 						onError(err) {
-							showError(err)
+							showToast(__('Error'), err.messages?.[0] || err, 'x')
 						},
 					}
 				)
 				close()
 			},
 			onError(err) {
-				showError(err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
 }
 
+const validateChapter = () => {
+	if (!chapter.title) {
+		return __('Title is required')
+	}
+	if (chapter.is_scorm_package && !chapter.scorm_package) {
+		return __('Please upload a SCORM package')
+	}
+}
+
+const cleanChapter = () => {
+	chapter.title = ''
+	chapter.is_scorm_package = 0
+	chapter.scorm_package = null
+}
+
 const editChapter = (close) => {
-	chapterEditResource.submit(
+	chapterResource.submit(
 		{},
 		{
 			validate() {
@@ -127,35 +195,29 @@ const editChapter = (close) => {
 			},
 			onSuccess() {
 				outline.value.reload()
-				createToast({
+				showToast(__('Success'), __('Chapter updated successfully'), 'check')
-					text: 'Chapter updated successfully',
-					icon: 'check',
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
-				})
 				close()
 			},
 			onError(err) {
-				showError(err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
 }
 
-const showError = (err) => {
-	createToast({
-		title: 'Error',
-		text: err.messages?.[0] || err,
-		icon: 'x',
-		iconClasses: 'bg-red-600 text-white rounded-md p-px',
-		position: 'top-center',
-		timeout: 10,
-	})
-}
-
 watch(
 	() => props.chapterDetail,
 	(newChapter) => {
 		chapter.title = newChapter?.title
+		chapter.is_scorm_package = newChapter?.is_scorm_package
+		chapter.scorm_package = newChapter?.scorm_package
 	}
 )
+
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (extension !== 'zip') {
+		return __('Only zip files are allowed')
+	}
+}
 </script>

frontend/src/components/Modals/DiscussionModal.vue

@@ -1,11 +1,11 @@
 <template>
 	<Dialog
 		:options="{
-			title: props.title,
+			title: singularize(props.title),
 			size: '2xl',
 			actions: [
 				{
-					label: 'Submit',
+					label: 'Post',
 					variant: 'solid',
 					onClick: (close) => submitTopic(close),
 				},
@@ -15,10 +15,7 @@
 		<template #body-content>
 			<div class="flex flex-col gap-4">
 				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
+					<FormControl v-model="topic.title" :label="__('Title')" type="text" />
-						{{ __('Title') }}
-					</div>
-					<Input type="text" v-model="topic.title" />
 				</div>
 				<div>
 					<div class="mb-1.5 text-sm text-gray-600">
@@ -37,8 +34,9 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Input, TextEditor, createResource } from 'frappe-ui'
+import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
 import { reactive, defineModel } from 'vue'
+import { showToast, singularize } from '@/utils'
 
 const topics = defineModel('reloadTopics')
 
@@ -93,6 +91,14 @@ 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(
 					{
@@ -108,6 +114,9 @@ const submitTopic = (close) => {
 					}
 				)
 			},
+			onError(err) {
+				showToast('Error', err.message, 'x')
+			},
 		}
 	)
 }

frontend/src/components/Modals/EditCoverImage.vue

@@ -0,0 +1,109 @@
+<template>
+	<Popover transition="default">
+		<template #target="{ isOpen, togglePopover }" class="flex w-full">
+			<slot v-bind="{ isOpen, togglePopover }"></slot>
+		</template>
+		<template #body>
+			<div
+				class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
+			>
+				<div
+					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
+				>
+					<div class="flex items-center justify-center space-x-2">
+						<TextInput
+							type="text"
+							placeholder="search by keyword"
+							v-model="search"
+							:debounce="300"
+							class="flex-1"
+						/>
+						<FileUploader
+							:fileTypes="['image/*']"
+							:validateFile="validateFile"
+							@success="(file) => saveImage(file)"
+						>
+							<template
+								v-slot="{ file, progress, uploading, openFileSelector }"
+							>
+								<div class="">
+									<Button @click="openFileSelector" :loading="uploading">
+										{{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}
+									</Button>
+								</div>
+							</template>
+						</FileUploader>
+					</div>
+					<div
+						class="relative mt-2 grid w-[25.5rem] gap-2 bg-white lg:grid-cols-2"
+					>
+						<button
+							v-for="image in images.data"
+							:key="image.id"
+							class="h-[50px] w-[200px] overflow-hidden rounded hover:opacity-80"
+							@click="$emit('select', image.urls.raw)"
+						>
+							<img
+								:src="
+									image.urls.raw +
+									'&w=200&h=50&fit=crop&crop=entropy,faces,focalpoint'
+								"
+							/>
+						</button>
+					</div>
+					<div
+						v-if="images.data"
+						class="mt-2 text-center text-sm text-gray-500"
+					>
+						{{ __('Image search powered by') }}
+						<a class="underline" target="_blank" href="https://unsplash.com">
+							{{ __('Unsplash') }}
+						</a>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Popover>
+</template>
+<script setup>
+import {
+	Popover,
+	TextInput,
+	FileUploader,
+	Button,
+	createResource,
+} from 'frappe-ui'
+import { ref, watch } from 'vue'
+
+const search = ref(null)
+const emit = defineEmits(['select'])
+
+const images = createResource({
+	url: 'lms.lms.api.get_unsplash_photos',
+	makeParams: () => {
+		return {
+			keyword: search.value,
+		}
+	},
+	auto: true,
+	debounce: 500,
+})
+
+watch(
+	() => search.value,
+	() => {
+		images.reload()
+	}
+)
+
+const saveImage = (file) => {
+	emit('select', file.file_url)
+}
+
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
+		return 'Only image file is allowed.'
+	}
+}
+</script>

frontend/src/components/Modals/EditProfile.vue

@@ -0,0 +1,190 @@
+<template>
+	<Dialog
+		:options="{
+			title: 'Edit your profile',
+			size: 'xl',
+			actions: [
+				{
+					label: 'Save',
+					variant: 'solid',
+					onClick: (close) => saveProfile(close),
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<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="text-xs text-gray-600 mb-1">
+						{{ __('Profile Image') }}
+					</div>
+					<div class="flex items-center">
+						<div class="border rounded-md p-2 mr-2">
+							<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+						</div>
+						<div class="text-base flex flex-col">
+							<span>
+								{{ profile.image.file_name }}
+							</span>
+							<span class="text-sm text-gray-500 mt-1">
+								{{ getFileSize(profile.image.file_size) }}
+							</span>
+						</div>
+						<X
+							@click="removeImage()"
+							class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+						/>
+					</div>
+				</div>
+				<FormControl
+					v-model="profile.first_name"
+					:label="__('First Name')"
+					class="mb-4"
+				/>
+				<FormControl
+					v-model="profile.last_name"
+					:label="__('Last Name')"
+					class="mb-4"
+				/>
+				<FormControl
+					v-model="profile.headline"
+					:label="__('Headline')"
+					class="mb-4"
+				/>
+
+				<div class="mb-4">
+					<div class="mb-1.5 text-sm text-gray-600">
+						{{ __('Bio') }}
+					</div>
+					<TextEditor
+						:fixedMenu="true"
+						@change="(val) => (profile.bio = val)"
+						:content="profile.bio"
+						editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Dialog,
+	FormControl,
+	FileUploader,
+	Button,
+	createResource,
+	TextEditor,
+} from 'frappe-ui'
+import { reactive, watch, defineModel } from 'vue'
+import { FileText, X } from 'lucide-vue-next'
+import { getFileSize, showToast } from '@/utils'
+
+const reloadProfile = defineModel('reloadProfile')
+
+const props = defineProps({
+	profile: {
+		type: Object,
+		required: true,
+	},
+})
+
+const profile = reactive({
+	first_name: '',
+	last_name: '',
+	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
+	},
+})
+
+const updateProfile = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'User',
+			name: props.profile.data.name,
+			fieldname: {
+				user_image: profile.image.file_url,
+				...profile,
+			},
+		}
+	},
+	onSuccess(data) {
+		props.profile.data = data
+	},
+})
+
+const saveProfile = (close) => {
+	updateProfile.submit(
+		{},
+		{
+			onSuccess() {
+				close()
+				reloadProfile.value.reload()
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+
+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(
+	() => props.profile.data,
+	(newVal) => {
+		if (newVal) {
+			profile.first_name = newVal.first_name
+			profile.last_name = newVal.last_name
+			profile.headline = newVal.headline
+			profile.bio = newVal.bio
+			if (newVal.user_image) imageResource.submit({ image: newVal.user_image })
+		}
+	}
+)
+</script>

frontend/src/components/Modals/EvaluationModal.vue

@@ -25,7 +25,7 @@
 					<div class="mb-1.5 text-sm text-gray-600">
 						{{ __('Date') }}
 					</div>
-					<DatePicker v-model="evaluation.date" />
+					<FormControl type="date" v-model="evaluation.date" />
 				</div>
 				<div v-if="slots.data?.length">
 					<div class="mb-1.5 text-sm text-gray-600">
@@ -46,7 +46,10 @@
 						</div>
 					</div>
 				</div>
-				<div v-else class="text-sm italic text-red-600">
+				<div
+					v-else-if="evaluation.course && evaluation.date"
+					class="text-sm italic text-red-600"
+				>
 					{{ __('No slots available for this date.') }}
 				</div>
 			</div>
@@ -54,7 +57,7 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, Select, DatePicker } from 'frappe-ui'
+import { Dialog, createResource, Select, FormControl } from 'frappe-ui'
 import { defineModel, reactive, watch, inject } from 'vue'
 import { createToast, formatTime } from '@/utils/'
 
@@ -113,7 +116,7 @@ function submitEvaluation(close) {
 			if (!evaluation.start_time) {
 				return 'Please select a slot.'
 			}
-			if (dayjs(evaluation.date).isSameOrBefore(dayjs(), 'day')) {
+			if (dayjs(evaluation.date).isBefore(dayjs(), 'day')) {
 				return 'Please select a future date.'
 			}
 			if (dayjs(evaluation.date).isAfter(dayjs(props.endDate), 'day')) {
@@ -127,11 +130,20 @@ function submitEvaluation(close) {
 			close()
 		},
 		onError(err) {
+			let message = err.messages?.[0] || err
+			let unavailabilityMessage
+
+			if (typeof message === 'string') {
+				unavailabilityMessage = message?.includes('unavailable')
+			} else {
+				unavailabilityMessage = false
+			}
+
 			createToast({
-				title: 'Error',
+				title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
-				text: err.messages?.[0] || err,
+				text: message,
-				icon: 'x',
+				icon: unavailabilityMessage ? 'alert-circle' : 'x',
-				iconClasses: 'bg-red-600 text-white rounded-md p-px',
+				iconClasses: 'bg-yellow-600 text-white rounded-md p-px',
 				position: 'top-center',
 				timeout: 10,
 			})
@@ -142,10 +154,12 @@ function submitEvaluation(close) {
 const getCourses = () => {
 	let courses = []
 	for (const course of props.courses) {
-		courses.push({
+		if (course.evaluator) {
-			label: course.title,
+			courses.push({
-			value: course.course,
+				label: course.title,
-		})
+				value: course.course,
+			})
+		}
 	}
 	return courses
 }
@@ -165,7 +179,7 @@ watch(
 	() => evaluation.date,
 	(date) => {
 		evaluation.start_time = ''
-		if (date) {
+		if (date && evaluation.course) {
 			slots.submit(evaluation)
 		}
 	}

frontend/src/components/Modals/Event.vue

@@ -0,0 +1,378 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '2xl',
+		}"
+	>
+		<template #body>
+			<div class="flex text-base">
+				<div class="flex flex-col w-1/2 p-5">
+					<div class="text-lg font-semibold mb-4">
+						{{ event.title }}
+					</div>
+
+					<div class="flex flex-col space-y-4 text-sm text-gray-800">
+						<Tooltip :text="__('Email ID')">
+							<div class="flex items-center space-x-2 w-fit">
+								<User class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.member }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Course')">
+							<div class="flex items-center space-x-2 w-fit">
+								<BookOpen class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.course_title }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip v-if="event.batch_title" :text="__('Batch')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Users class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ event.batch_title }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Date')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Calendar class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ dayjs(event.date).format('DD MMM YYYY') }}
+								</span>
+							</div>
+						</Tooltip>
+						<Tooltip :text="__('Time')">
+							<div class="flex items-center space-x-2 w-fit">
+								<Clock class="h-4 w-4 stroke-1.5" />
+								<span>
+									{{ formatTime(event.start_time) }} -
+									{{ formatTime(event.end_time) }}
+								</span>
+							</div>
+						</Tooltip>
+					</div>
+					<div class="flex items-center space-x-2 mt-auto">
+						<Button
+							v-if="certificate.name"
+							@click="openCertificate(certificate)"
+							class="w-full"
+						>
+							<template #prefix>
+								<FileText class="h-4 w-4 stroke-1.5" />
+							</template>
+							{{ __('View Certificate') }}
+						</Button>
+						<Button v-else @click="openCallLink(event.venue)" class="w-full">
+							<template #prefix>
+								<Video class="h-4 w-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Join Meeting') }}
+							</span>
+						</Button>
+					</div>
+				</div>
+				<Tabs :tabs="tabs" v-model="tabIndex" class="border-l w-1/2">
+					<template #default="{ tab }">
+						<div
+							v-if="tab.label == 'Evaluation'"
+							class="flex flex-col space-y-4 p-5"
+						>
+							<div class="flex items-center justify-between">
+								<Rating v-model="evaluation.rating" :label="__('Rating')" />
+								<FormControl
+									type="select"
+									:options="statusOptions"
+									v-model="evaluation.status"
+									:label="__('Status')"
+									class="w-1/2"
+								/>
+							</div>
+							<Textarea
+								v-model="evaluation.summary"
+								:label="__('Summary')"
+								:rows="7"
+							/>
+							<Button variant="solid" @click="saveEvaluation()">
+								{{ __('Save') }}
+							</Button>
+						</div>
+						<div v-else class="flex flex-col space-y-4 p-5">
+							<FormControl
+								type="checkbox"
+								v-model="certificate.published"
+								:label="__('Published')"
+							/>
+							<Link
+								v-model="certificate.template"
+								:label="__('Template')"
+								doctype="Print Format"
+								:filters="{
+									doc_type: 'LMS Certificate',
+								}"
+							/>
+							<FormControl
+								type="date"
+								v-model="certificate.issue_date"
+								:label="__('Issue Date')"
+							/>
+							<FormControl
+								type="date"
+								v-model="certificate.expiry_date"
+								:label="__('Expiry Date')"
+							/>
+							<Button variant="solid" @click="saveCertificate()">
+								{{ __('Save') }}
+							</Button>
+						</div>
+					</template>
+				</Tabs>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import {
+	Dialog,
+	Button,
+	FormControl,
+	createResource,
+	Tabs,
+	Tooltip,
+	Textarea,
+} from 'frappe-ui'
+import {
+	User,
+	Calendar,
+	Clock,
+	Video,
+	BookOpen,
+	FileText,
+	GraduationCap,
+	Users,
+	ClipboardList,
+} from 'lucide-vue-next'
+import { inject, reactive, watch, ref, computed } from 'vue'
+import { formatTime, showToast } from '@/utils'
+import Rating from '@/components/Controls/Rating.vue'
+import Link from '@/components/Controls/Link.vue'
+
+const show = defineModel()
+const dayjs = inject('$dayjs')
+const tabIndex = ref(0)
+const showCertification = ref(false)
+
+const props = defineProps({
+	event: {
+		type: [Object, null],
+		required: true,
+	},
+})
+
+const evaluation = reactive({})
+
+const certificate = reactive({})
+
+const defaultTemplate = createResource({
+	url: 'frappe.client.get_value',
+	makeParams(values) {
+		return {
+			doctype: 'Property Setter',
+			fieldname: 'value',
+			filters: {
+				doc_type: 'LMS Certificate',
+				property: 'default_print_format',
+			},
+		}
+	},
+	auto: true,
+	onSuccess(data) {
+		certificate.template = data.value
+	},
+})
+
+const openCallLink = (link) => {
+	window.open(link, '_blank')
+}
+
+const evaluationResource = createResource({
+	url: 'lms.lms.api.save_evaluation_details',
+	makeParams(values) {
+		return {
+			member: props.event.member,
+			course: props.event.course,
+			batch_name: props.event.batch_name,
+			date: props.event.date,
+			start_time: props.event.start_time,
+			end_time: props.event.end_time,
+			status: evaluation.status,
+			rating: evaluation.rating,
+			summary: evaluation.summary,
+			evaluator: props.event.evaluator,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		evaluation.name = data.name
+	},
+})
+
+const evaluationDetails = createResource({
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Certificate Evaluation',
+			filters: {
+				member: props.event.member,
+				course: props.event.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		for (const key in data) {
+			if (key in evaluation) evaluation[key] = data[key]
+			if (key == 'rating') evaluation.rating = data.rating * 5
+			if (evaluation.status == 'Pass') showCertification.value = true
+		}
+	},
+	auto: false,
+})
+
+const saveEvaluation = () => {
+	evaluationResource.submit(
+		{},
+		{
+			onSuccess: () => {
+				if (evaluation.status == 'Pass') {
+					showCertification.value = true
+				} else {
+					show.value = false
+				}
+				showToast(__('Success'), __('Evaluation saved successfully'), 'check')
+			},
+		}
+	)
+}
+
+const certificateResource = createResource({
+	url: 'lms.lms.api.save_certificate_details',
+	makeParams(values) {
+		return {
+			member: props.event.member,
+			course: props.event.course,
+			batch_name: props.event.batch_name,
+			published: certificate.published,
+			issue_date: certificate.issue_date,
+			expiry_date: certificate.expiry_date,
+			template: certificate.template,
+			evaluator: props.event.evaluator,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		certificate.name = data
+	},
+})
+
+const certificateDetails = createResource({
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Certificate',
+			filters: {
+				member: props.event.member,
+				course: props.event.course,
+			},
+		}
+	},
+	onSuccess(data) {
+		for (const key in data) {
+			if (key in certificate) certificate[key] = data[key]
+			certificate.name = data.name
+			showCertification.value = true
+		}
+	},
+	onError(err) {
+		certificate.template = defaultTemplate.data.value
+	},
+	auto: false,
+})
+
+const saveCertificate = () => {
+	certificateResource.submit(
+		{},
+		{
+			onSuccess: () => {
+				showToast(__('Success'), __('Certificate saved successfully'), 'check')
+			},
+		}
+	)
+}
+
+watch(show, () => {
+	if (show.value) {
+		evaluation.rating = 0
+		evaluation.status = 'Pending'
+		evaluation.summary = ''
+		evaluationDetails.reload()
+
+		certificate.published = true
+		certificate.issue_date = dayjs().format('YYYY-MM-DD')
+		certificate.expiry_date = null
+		certificate.template = null
+		certificate.name = null
+		certificateDetails.reload()
+	}
+})
+
+const openCertificate = (certificate) => {
+	window.open(
+		`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+			certificate.name
+		}&format=${encodeURIComponent(certificate.template)}`
+	)
+}
+
+const statusOptions = computed(() => {
+	return [
+		{
+			value: 'Pending',
+			label: __('Pending'),
+		},
+		{
+			value: 'In Progress',
+			label: __('In Progress'),
+		},
+		{
+			value: 'Pass',
+			label: __('Pass'),
+		},
+		{
+			value: 'Fail',
+			label: __('Fail'),
+		},
+	]
+})
+
+const tabs = computed(() => {
+	const tabsArray = [
+		{
+			label: __('Evaluation'),
+			icon: ClipboardList,
+		},
+	]
+
+	if (showCertification.value) {
+		tabsArray.push({
+			label: __('Certification'),
+			icon: GraduationCap,
+		})
+	}
+
+	return tabsArray
+})
+</script>

frontend/src/components/Modals/ExplanationVideos.vue

@@ -0,0 +1,39 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+			title: title,
+		}"
+	>
+		<template #body-content>
+			<div>
+				<VideoBlock :file="file" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog } from 'frappe-ui'
+import { computed } from 'vue'
+import VideoBlock from '@/components/VideoBlock.vue'
+
+const show = defineModel()
+
+const props = defineProps({
+	type: {
+		type: [String, null],
+		required: true,
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+})
+
+const file = computed(() => {
+	if (props.type == 'youtube') return '/assets/lms/frontend/Youtube.mp4'
+	if (props.type == 'quiz') return '/assets/lms/frontend/Quiz.mp4'
+	if (props.type == 'upload') return '/assets/lms/frontend/Upload.mp4'
+})
+</script>

frontend/src/components/Modals/LiveClassModal.vue

@@ -17,78 +17,66 @@
 			<div class="flex flex-col gap-4">
 				<div class="grid grid-cols-2 gap-4">
 					<div>
-						<div class="mb-4">
+						<FormControl
-							<div class="mb-1.5 text-sm text-gray-600">
+							type="text"
-								{{ __('Title') }}
+							v-model="liveClass.title"
-							</div>
+							:label="__('Title')"
-							<Input type="text" v-model="liveClass.title" />
+							class="mb-4"
-						</div>
+							:required="true"
-						<div class="mb-4">
+						/>
-							<div class="mb-1.5 text-sm text-gray-600">
+						<Tooltip
-								<Tooltip
+							:text="
-									class="flex items-center"
+								__(
-									:text="
+									'Time must be in 24 hour format (HH:mm). Example 11:30 or 22:00'
-										__(
+								)
-											'Time must be in 24 hour format (HH:mm). Example 11:30 or 22:00'
+							"
-										)
+						>
-									"
+							<FormControl
-								>
+								v-model="liveClass.time"
-									<span>
+								type="time"
-										{{ __('Time') }}
+								:label="__('Time')"
-									</span>
+								class="mb-4"
-									<Info class="stroke-2 w-3 h-3 ml-1" />
+								:required="true"
-								</Tooltip>
-							</div>
-							<Input v-model="liveClass.time" />
-						</div>
-						<div>
-							<div class="mb-1.5 text-sm text-gray-600">
-								{{ __('Timezone') }}
-							</div>
-							<Select
-								v-model="liveClass.timezone"
-								:options="getTimezoneOptions()"
 							/>
-						</div>
+						</Tooltip>
+						<FormControl
+							v-model="liveClass.timezone"
+							type="select"
+							:options="getTimezoneOptions()"
+							:label="__('Timezone')"
+							:required="true"
+						/>
 					</div>
 					<div>
-						<div class="mb-4">
+						<FormControl
-							<div class="mb-1.5 text-sm text-gray-600">
+							v-model="liveClass.date"
-								{{ __('Date') }}
+							type="date"
-							</div>
+							class="mb-4"
-							<DatePicker v-model="liveClass.date" inputClass="w-full" />
+							:label="__('Date')"
-						</div>
+							:required="true"
-						<div class="mb-4">
+						/>
-							<div class="mb-1.5 text-sm text-gray-600">
+						<Tooltip :text="__('Duration of the live class in minutes')">
-								<Tooltip
+							<FormControl
-									class="flex items-center"
+								type="number"
-									:text="__('Duration of the live class in minutes')"
+								v-model="liveClass.duration"
-								>
+								:label="__('Duration')"
-									<span>
+								class="mb-4"
-										{{ __('Duration') }}
+								:required="true"
-									</span>
-									<Info class="stroke-2 w-3 h-3 ml-1" />
-								</Tooltip>
-							</div>
-							<Input type="number" v-model="liveClass.duration" />
-						</div>
-						<div>
-							<div class="mb-1.5 text-sm text-gray-600">
-								{{ __('Auto Recording') }}
-							</div>
-							<Select
-								v-model="liveClass.auto_recording"
-								:options="getRecordingOptions()"
 							/>
-						</div>
+						</Tooltip>
+						<FormControl
+							v-model="liveClass.auto_recording"
+							type="select"
+							:options="getRecordingOptions()"
+							:label="__('Auto Recording')"
+						/>
 					</div>
 				</div>
-				<div>
+				<FormControl
-					<div class="mb-1.5 text-sm text-gray-600">
+					v-model="liveClass.description"
-						{{ __('Description') }}
+					type="textarea"
-					</div>
+					:label="__('Description')"
-					<Textarea v-model="liveClass.description" />
+				/>
-				</div>
 			</div>
 		</template>
 	</Dialog>
@@ -102,6 +90,7 @@ import {
 	Dialog,
 	createResource,
 	Tooltip,
+	FormControl,
 } from 'frappe-ui'
 import { reactive, inject } from 'vue'
 import { getTimezones, createToast } from '@/utils/'
@@ -169,28 +158,37 @@ const createLiveClass = createResource({
 })
 
 const submitLiveClass = (close) => {
-	createLiveClass.submit(liveClass, {
+	return createLiveClass.submit(liveClass, {
 		validate() {
 			if (!liveClass.title) {
-				return 'Please enter a title.'
+				return __('Please enter a title.')
 			}
 			if (!liveClass.date) {
-				return 'Please select a date.'
+				return __('Please select a date.')
-			}
-			if (dayjs(liveClass.date).isSameOrBefore(dayjs(), 'day')) {
-				return 'Please select a future date.'
 			}
 			if (!liveClass.time) {
-				return 'Please select a time.'
+				return __('Please select a time.')
-			}
-			if (!valideTime()) {
-				return 'Please enter a valid time in the format HH:mm.'
-			}
-			if (!liveClass.duration) {
-				return 'Please select a duration.'
 			}
 			if (!liveClass.timezone) {
-				return 'Please select a timezone.'
+				return __('Please select a timezone.')
+			}
+			if (!valideTime()) {
+				return __('Please enter a valid time in the format HH:mm.')
+			}
+			const liveClassDateTime = dayjs(`${liveClass.date}T${liveClass.time}`).tz(
+				liveClass.timezone,
+				true
+			)
+			if (
+				liveClassDateTime.isSameOrBefore(
+					dayjs().tz(liveClass.timezone, false),
+					'minute'
+				)
+			) {
+				return __('Please select a future date and time.')
+			}
+			if (!liveClass.duration) {
+				return __('Please select a duration.')
 			}
 		},
 		onSuccess() {

frontend/src/components/Modals/PageModal.vue

@@ -0,0 +1,90 @@
+<template>
+	<Dialog
+		v-model="show"
+		class="text-base"
+		:options="{
+			title: __('Add web page to sidebar'),
+			size: 'lg',
+			actions: [
+				{
+					label: 'Add',
+					variant: 'solid',
+					onClick: (close) => {
+						addWebPage(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<Link
+				v-model="page.webpage"
+				doctype="Web Page"
+				:label="__('Web Page')"
+				:filters="{
+					published: 1,
+				}"
+			/>
+			<IconPicker v-model="page.icon" :label="__('Icon')" class="mt-4" />
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, createResource } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
+import { reactive, watch } from 'vue'
+import IconPicker from '@/components/Controls/IconPicker.vue'
+import { showToast } from '@/utils'
+
+const sidebar = defineModel('reloadSidebar')
+const show = defineModel()
+const page = reactive({
+	icon: '',
+	webpage: '',
+})
+
+const props = defineProps({
+	page: {
+		type: Object,
+		default: null,
+	},
+})
+
+const webPage = createResource({
+	url: 'lms.lms.api.update_sidebar_item',
+	makeParams(values) {
+		return {
+			webpage: page.webpage,
+			icon: page.icon,
+		}
+	},
+})
+
+watch(
+	() => props.page,
+	(newPage) => {
+		if (newPage) {
+			page.icon = newPage.icon
+			page.webpage = newPage.web_page
+		}
+	},
+	{ immediate: true }
+)
+
+const addWebPage = (close) => {
+	webPage.submit(
+		{},
+		{
+			onSuccess() {
+				sidebar.value.reload()
+				close()
+				showToast('Success', 'Web page added to sidebar', 'check')
+			},
+			onError(err) {
+				showToast('Error', err.message[0] || err, 'x')
+				close()
+			},
+		}
+	)
+}
+</script>

frontend/src/components/Modals/Question.vue

@@ -0,0 +1,354 @@
+<template>
+	<Dialog v-model="show" :options="dialogOptions">
+		<template #body-content>
+			<div class="space-y-4">
+				<div
+					v-if="!editMode"
+					class="flex items-center text-xs text-gray-700 space-x-5"
+				>
+					<div class="flex items-center space-x-2">
+						<input
+							type="radio"
+							id="existing"
+							value="existing"
+							v-model="questionType"
+							class="w-3 h-3 cursor-pointer"
+						/>
+						<label for="existing" class="cursor-pointer">
+							{{ __('Add an existing question') }}
+						</label>
+					</div>
+
+					<div class="flex items-center space-x-2">
+						<input
+							type="radio"
+							id="new"
+							value="new"
+							v-model="questionType"
+							class="w-3 h-3 cursor-pointer"
+						/>
+						<label for="new" class="cursor-pointer">
+							{{ __('Create a new question') }}
+						</label>
+					</div>
+				</div>
+				<div v-if="questionType == 'new' || editMode" class="space-y-2">
+					<div>
+						<label class="block text-xs text-gray-600 mb-1">
+							{{ __('Question') }}
+						</label>
+						<TextEditor
+							:content="question.question"
+							@change="(val) => (question.question = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+						/>
+					</div>
+					<FormControl
+						v-model="question.marks"
+						:label="__('Marks')"
+						type="number"
+					/>
+					<FormControl
+						:label="__('Type')"
+						v-model="question.type"
+						type="select"
+						:options="['Choices', 'User Input', 'Open Ended']"
+						class="pb-2"
+						:required="true"
+					/>
+					<div v-if="question.type == 'Choices'" class="divide-y border-t">
+						<div v-for="n in 4" class="space-y-4 py-2">
+							<FormControl
+								:label="__('Option') + ' ' + n"
+								v-model="question[`option_${n}`]"
+								:required="n <= 2 ? true : false"
+							/>
+							<FormControl
+								:label="__('Explanation')"
+								v-model="question[`explanation_${n}`]"
+							/>
+							<FormControl
+								:label="__('Correct Answer')"
+								v-model="question[`is_correct_${n}`]"
+								type="checkbox"
+							/>
+						</div>
+					</div>
+					<div
+						v-else-if="question.type == 'User Input'"
+						v-for="n in 4"
+						class="space-y-2"
+					>
+						<FormControl
+							:label="__('Possibility') + ' ' + n"
+							v-model="question[`possibility_${n}`]"
+							:required="n == 1 ? true : false"
+						/>
+					</div>
+				</div>
+				<div v-else-if="questionType == 'existing'" class="space-y-2">
+					<Link
+						v-model="existingQuestion.question"
+						:label="__('Select a question')"
+						doctype="LMS Question"
+					/>
+					<FormControl
+						v-model="existingQuestion.marks"
+						:label="__('Marks')"
+						type="number"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
+import { computed, watch, reactive, ref } from 'vue'
+import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
+
+const show = defineModel()
+const quiz = defineModel('quiz')
+const questionType = ref(null)
+const editMode = ref(false)
+
+const existingQuestion = reactive({
+	question: '',
+	marks: 0,
+})
+const question = reactive({
+	question: '',
+	type: 'Choices',
+	marks: 0,
+})
+
+const populateFields = () => {
+	let fields = ['option', 'is_correct', 'explanation', 'possibility']
+	let counter = 1
+	fields.forEach((field) => {
+		while (counter <= 4) {
+			question[`${field}_${counter}`] = field === 'is_correct' ? false : null
+			counter++
+		}
+	})
+}
+
+populateFields()
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: __('Add a new question'),
+	},
+	questionDetail: {
+		type: [Object, null],
+		required: true,
+	},
+})
+
+const questionData = createResource({
+	url: 'frappe.client.get',
+	makeParams() {
+		return {
+			doctype: 'LMS Question',
+			name: props.questionDetail.question,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		let counter = 1
+		editMode.value = true
+		Object.keys(data).forEach((key) => {
+			if (Object.hasOwn(question, key)) question[key] = data[key]
+		})
+		while (counter <= 4) {
+			question[`is_correct_${counter}`] = data[`is_correct_${counter}`]
+				? true
+				: false
+			counter++
+		}
+		question.marks = props.questionDetail.marks
+	},
+})
+
+watch(show, () => {
+	if (show.value) {
+		editMode.value = false
+		if (props.questionDetail.question) questionData.fetch()
+		else {
+			;(question.question = ''), (question.marks = 0)
+			question.type = 'Choices'
+			existingQuestion.question = ''
+			existingQuestion.marks = 0
+			questionType.value = null
+			populateFields()
+		}
+
+		if (props.questionDetail.marks) question.marks = props.questionDetail.marks
+	}
+})
+
+const questionRow = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Quiz Question',
+				parent: quiz.value.data.name,
+				parentfield: 'questions',
+				parenttype: 'LMS Quiz',
+				...values,
+			},
+		}
+	},
+})
+
+const questionCreation = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Question',
+				...question,
+			},
+		}
+	},
+})
+
+const submitQuestion = (close) => {
+	if (props.questionDetail?.question) updateQuestion(close)
+	else addQuestion(close)
+}
+
+const addQuestion = (close) => {
+	if (questionType.value == 'existing') {
+		addQuestionRow(
+			{
+				question: existingQuestion.question,
+				marks: existingQuestion.marks,
+			},
+			close
+		)
+	} else {
+		questionCreation.submit(
+			{},
+			{
+				onSuccess(data) {
+					addQuestionRow(
+						{
+							question: data.name,
+							marks: question.marks,
+						},
+						close
+					)
+				},
+				onError(err) {
+					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				},
+			}
+		)
+	}
+}
+
+const addQuestionRow = (question, close) => {
+	questionRow.submit(
+		{
+			...question,
+		},
+		{
+			onSuccess() {
+				show.value = false
+				showToast(__('Success'), __('Question added successfully'), 'check')
+				quiz.value.reload()
+				close()
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				close()
+			},
+		}
+	)
+}
+
+const questionUpdate = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Question',
+			name: questionData.data?.name,
+			fieldname: {
+				...question,
+			},
+		}
+	},
+})
+
+const marksUpdate = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Quiz Question',
+			name: props.questionDetail.name,
+			fieldname: {
+				marks: question.marks,
+			},
+		}
+	},
+})
+
+const updateQuestion = (close) => {
+	questionUpdate.submit(
+		{},
+		{
+			onSuccess() {
+				marksUpdate.submit(
+					{},
+					{
+						onSuccess() {
+							show.value = false
+							showToast(
+								__('Success'),
+								__('Question updated successfully'),
+								'check'
+							)
+							quiz.value.reload()
+							close()
+						},
+					}
+				)
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
+		}
+	)
+}
+
+const dialogOptions = computed(() => {
+	return {
+		title: __(props.title),
+		size: 'xl',
+		actions: [
+			{
+				label: __('Submit'),
+				variant: 'solid',
+				onClick: (close) => {
+					submitQuestion(close)
+				},
+			},
+		],
+	}
+})
+</script>
+<style>
+input[type='radio']:checked {
+	background-color: theme('colors.gray.900') !important;
+	border-color: theme('colors.gray.900') !important;
+	--tw-ring-color: theme('colors.gray.900') !important;
+}
+</style>

frontend/src/components/Modals/Settings.vue

@@ -0,0 +1,354 @@
+<template>
+	<Dialog v-model="show" :options="{ size: '4xl' }">
+		<template #body>
+			<div class="flex h-[calc(100vh_-_8rem)]">
+				<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
+					<h1 class="mb-3 px-2 pt-2 text-lg font-semibold">
+						{{ __('Settings') }}
+					</h1>
+					<div v-for="tab in tabs" :key="tab.label">
+						<div
+							v-if="!tab.hideLabel"
+							class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+						>
+							<span>{{ __(tab.label) }}</span>
+						</div>
+						<nav class="space-y-1">
+							<SidebarLink
+								v-for="item in tab.items"
+								:link="item"
+								:key="item.label"
+								class="w-full"
+								:class="
+									activeTab?.label == item.label
+										? 'bg-white shadow-sm'
+										: 'hover:bg-gray-100'
+								"
+								@click="activeTab = item"
+							/>
+						</nav>
+					</div>
+				</div>
+				<div
+					v-if="activeTab && data.doc"
+					:key="activeTab.label"
+					class="flex flex-1 flex-col px-10 py-8"
+				>
+					<Members
+						v-if="activeTab.label === 'Members'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						v-model:show="show"
+					/>
+					<Categories
+						v-else-if="activeTab.label === 'Categories'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+					/>
+					<PaymentSettings
+						v-else-if="activeTab.label === 'Payment Gateway'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:data="data"
+						:fields="activeTab.fields"
+					/>
+					<BrandSettings
+						v-else-if="activeTab.label === 'Branding'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:fields="activeTab.fields"
+						:data="branding"
+					/>
+					<SettingDetails
+						v-else
+						:fields="activeTab.fields"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						:data="data"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import { Dialog, createDocumentResource, createResource } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
+import { useSettings } from '@/stores/settings'
+import SettingDetails from '../SettingDetails.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import Members from '@/components/Members.vue'
+import Categories from '@/components/Categories.vue'
+import BrandSettings from '@/components/BrandSettings.vue'
+import PaymentSettings from '@/components/PaymentSettings.vue'
+
+const show = defineModel()
+const doctype = ref('LMS Settings')
+const activeTab = ref(null)
+const settingsStore = useSettings()
+
+const data = createDocumentResource({
+	doctype: doctype.value,
+	name: doctype.value,
+	fields: ['*'],
+	cache: doctype.value,
+	auto: true,
+})
+
+const branding = createResource({
+	url: 'lms.lms.api.get_branding',
+	auto: true,
+	cache: 'brand',
+})
+
+const tabsStructure = computed(() => {
+	return [
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
+				{
+					label: 'General',
+					icon: 'Wrench',
+					fields: [
+						{
+							label: 'Enable Learning Paths',
+							name: 'enable_learning_paths',
+							description:
+								'This will enforce students to go through programs assigned to them in the correct order.',
+							type: 'checkbox',
+						},
+						{
+							label: 'Send calendar invite for evaluations',
+							name: 'send_calendar_invite_for_evaluations',
+							description:
+								'If enabled, it sends google calendar invite to the student for evaluations.',
+							type: 'checkbox',
+						},
+						{
+							label: 'Unsplash Access Key',
+							name: 'unsplash_access_key',
+							description:
+								'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
+							type: 'text',
+						},
+					],
+				},
+			],
+		},
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
+				{
+					label: 'Payment Gateway',
+					icon: 'DollarSign',
+					description:
+						'Configure the payment gateway and other payment related settings',
+					fields: [
+						{
+							label: 'Payment Gateway',
+							name: 'payment_gateway',
+							type: 'Link',
+							doctype: 'Payment Gateway',
+						},
+						{
+							label: 'Default Currency',
+							name: 'default_currency',
+							type: 'Link',
+							doctype: 'Currency',
+						},
+						{
+							label: 'Apply GST for India',
+							name: 'apply_gst',
+							type: 'checkbox',
+						},
+						{
+							label: 'Show USD equivalent amount',
+							name: 'show_usd_equivalent',
+							type: 'checkbox',
+						},
+						{
+							label: 'Apply rounding on equivalent',
+							name: 'apply_rounding',
+							type: 'checkbox',
+						},
+					],
+				},
+			],
+		},
+		{
+			label: 'Lists',
+			hideLabel: false,
+			items: [
+				{
+					label: 'Members',
+					description: 'Manage the members of your learning system',
+					icon: 'UserRoundPlus',
+				},
+				{
+					label: 'Categories',
+					description: 'Manage the members of your learning system',
+					icon: 'Network',
+				},
+			],
+		},
+		{
+			label: 'Customise',
+			hideLabel: false,
+			items: [
+				{
+					label: 'Branding',
+					icon: 'Blocks',
+					fields: [
+						{
+							label: 'Brand Name',
+							name: 'app_name',
+							type: 'text',
+						},
+						{
+							label: 'Logo',
+							name: 'banner_image',
+							type: 'Upload',
+						},
+						{
+							label: 'Favicon',
+							name: 'favicon',
+							type: 'Upload',
+						},
+						{
+							label: 'Footer Logo',
+							name: 'footer_logo',
+							type: 'Upload',
+						},
+						{
+							label: 'Address',
+							name: 'address',
+							type: 'textarea',
+							rows: 2,
+						},
+						{
+							label: 'Footer "Powered By"',
+							name: 'footer_powered',
+							type: 'textarea',
+							rows: 4,
+						},
+						{
+							label: 'Copyright',
+							name: 'copyright',
+							type: 'text',
+						},
+					],
+				},
+				{
+					label: 'Sidebar',
+					icon: 'PanelLeftIcon',
+					description: 'Choose the items you want to show in the sidebar',
+					fields: [
+						{
+							label: 'Courses',
+							name: 'courses',
+							type: 'checkbox',
+						},
+						{
+							label: 'Batches',
+							name: 'batches',
+							type: 'checkbox',
+						},
+						{
+							label: 'Certified Participants',
+							name: 'certified_participants',
+							type: 'checkbox',
+						},
+						{
+							type: 'Column Break',
+						},
+						{
+							label: 'Jobs',
+							name: 'jobs',
+							type: 'checkbox',
+						},
+						{
+							label: 'Statistics',
+							name: 'statistics',
+							type: 'checkbox',
+						},
+						{
+							label: 'Notifications',
+							name: 'notifications',
+							type: 'checkbox',
+						},
+					],
+				},
+				{
+					label: 'Email Templates',
+					icon: 'MailPlus',
+					fields: [
+						{
+							label: 'Batch Confirmation Template',
+							name: 'batch_confirmation_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Certification Template',
+							name: 'certification_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Assignment Submission Template',
+							name: 'assignment_submission_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+					],
+				},
+				{
+					label: 'Signup',
+					icon: 'LogIn',
+					fields: [
+						{
+							label: 'Custom Content',
+							name: 'custom_signup_content',
+							type: 'Code',
+							mode: 'htmlmixed',
+							rows: 10,
+						},
+						{
+							label: 'Ask for Occupation',
+							name: 'user_category',
+							type: 'checkbox',
+							description:
+								'Enable this option to ask users to select their occupation during the signup process.',
+						},
+					],
+				},
+			],
+		},
+	]
+})
+
+const tabs = computed(() => {
+	return tabsStructure.value.map((tab) => {
+		return {
+			...tab,
+			items: tab.items.filter((item) => {
+				return !item.condition || item.condition()
+			}),
+		}
+	})
+})
+
+watch(show, async () => {
+	if (show.value) {
+		const currentTab = await tabs.value
+			.flatMap((tab) => tab.items)
+			.find((item) => item.label === settingsStore.activeTab)
+		activeTab.value = currentTab || tabs.value[0].items[0]
+	} else {
+		activeTab.value = null
+		settingsStore.isSettingsOpen = false
+	}
+})
+</script>

frontend/src/components/NoPermission.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="border rounded-md w-1/3 mx-auto my-32">
+		<div class="border-b px-5 py-3 font-medium">
+			<span
+				class="inline-flex items-center before:bg-red-600 before:w-2 before:h-2 before:rounded-md before:mr-2"
+			></span>
+			{{ __('Not Permitted') }}
+		</div>
+		<div v-if="user.data" class="px-5 py-3">
+			<div>
+				{{ __('You do not have permission to access this page.') }}
+			</div>
+			<router-link
+				:to="{
+					name: 'Courses',
+				}"
+			>
+				<Button variant="solid" class="mt-2">
+					{{ __('Checkout Courses') }}
+				</Button>
+			</router-link>
+		</div>
+		<div class="px-5 py-3">
+			<div>
+				{{ __('Please login to access this page.') }}
+			</div>
+			<Button @click="redirectToLogin()" class="mt-4">
+				{{ __('Login') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import { inject } from 'vue'
+import { Button } from 'frappe-ui'
+
+const user = inject('$user')
+
+const redirectToLogin = () => {
+	window.location.href = '/login'
+}
+</script>

frontend/src/components/OnboardingBanner.vue

@@ -0,0 +1,151 @@
+<template>
+	<div v-if="showOnboardingBanner && onboardingDetails.data">
+		<Tooltip :text="__('Skip Onboarding')" placement="left">
+			<X
+				class="w-4 h-4 stroke-1 absolute top-2 right-2 cursor-pointer mr-1"
+				@click="skipOnboarding.reload()"
+			/>
+		</Tooltip>
+		<div class="flex items-center justify-evenly bg-gray-100 p-10">
+			<div
+				@click="redirectToCourseForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer': !onboardingDetails.data.course_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.course_created?.length"
+					class="py-1 px-1 bg-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-green-600" />
+				</span>
+				<span v-else class="font-semibold bg-white px-2 py-1 rounded-full">
+					1
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Create a course') }}
+				</span>
+			</div>
+			<div
+				@click="redirectToChapterForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer':
+						onboardingDetails.data.course_created?.length &&
+						!onboardingDetails.data.chapter_created?.length,
+					'text-gray-400': !onboardingDetails.data.course_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.chapter_created?.length"
+					class="py-1 px-1 bg-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-green-600" />
+				</span>
+				<span v-else class="font-semibold bg-white px-2 py-1 rounded-full">
+					2
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Add a chapter') }}
+				</span>
+			</div>
+			<div
+				@click="redirectToLessonForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer':
+						onboardingDetails.data.course_created?.length &&
+						onboardingDetails.data.chapter_created?.length,
+					'text-gray-400':
+						!onboardingDetails.data.course_created?.length ||
+						!onboardingDetails.data.chapter_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.lesson_created?.length"
+					class="py-1 px-1 bg-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-green-600" />
+				</span>
+				<span class="font-semibold bg-white px-2 py-1 rounded-full"> 3 </span>
+				<span class="text-lg font-semibold">
+					{{ __('Add a lesson') }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Check, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'
+import { createResource, Tooltip } from 'frappe-ui'
+
+const showOnboardingBanner = ref(false)
+const settings = useSettings()
+const onboardingDetails = settings.onboardingDetails
+const router = useRouter()
+
+watch(onboardingDetails, () => {
+	if (!onboardingDetails.data?.is_onboarded) {
+		showOnboardingBanner.value = true
+	} else {
+		showOnboardingBanner.value = false
+	}
+})
+
+const redirectToCourseForm = () => {
+	if (onboardingDetails.data?.course_created.length) {
+		return
+	} else {
+		router.push({ name: 'CourseForm', params: { courseName: 'new' } })
+	}
+}
+
+const redirectToChapterForm = () => {
+	if (!onboardingDetails.data?.course_created.length) {
+		return
+	} else {
+		router.push({
+			name: 'CourseForm',
+			params: {
+				courseName: onboardingDetails.data?.first_course,
+			},
+		})
+	}
+}
+
+const redirectToLessonForm = () => {
+	if (!onboardingDetails.data?.course_created.length) {
+		return
+	} else if (!onboardingDetails.data?.chapter_created.length) {
+		return
+	} else {
+		router.push({
+			name: 'LessonForm',
+			params: {
+				courseName: onboardingDetails.data?.first_course,
+				chapterNumber: 1,
+				lessonNumber: 1,
+			},
+		})
+	}
+}
+
+const skipOnboarding = createResource({
+	url: 'frappe.client.set_value',
+	makeParams() {
+		return {
+			doctype: 'LMS Settings',
+			name: 'LMS Settings',
+			fieldname: 'is_onboarding_complete',
+			value: 1,
+		}
+	},
+	onSuccess(data) {
+		onboardingDetails.reload()
+	},
+})
+</script>

frontend/src/components/PaymentSettings.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="flex flex-col h-full">
+		<div class="flex items-center justify-between">
+			<div class="text-xl font-semibold mb-1">
+				{{ label }}
+			</div>
+			<!-- <Badge
+                v-if="isDirty"
+                :label="__('Not Saved')"
+                variant="subtle"
+                theme="orange"
+            /> -->
+		</div>
+		<div class="overflow-y-scroll">
+			<div class="flex space-x-4">
+				<SettingFields :fields="fields" :data="data.doc" class="w-1/2" />
+				<SettingFields
+					v-if="paymentGateway.data"
+					:fields="paymentGateway.data.fields"
+					:data="paymentGateway.data.data"
+					class="w-1/2"
+				/>
+			</div>
+		</div>
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" @click="update">
+				{{ __('Update') }}
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import SettingFields from '@/components/SettingFields.vue'
+import { createResource, Badge, Button } from 'frappe-ui'
+import { watch, ref } from 'vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+	fields: {
+		type: Array,
+		required: true,
+	},
+})
+
+const paymentGateway = createResource({
+	url: 'lms.lms.api.get_payment_gateway_details',
+	makeParams(values) {
+		return {
+			payment_gateway: props.data.doc.payment_gateway,
+		}
+	},
+	auto: true,
+})
+
+const saveSettings = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		let fields = {}
+		Object.keys(paymentGateway.data.data).forEach((key) => {
+			if (
+				paymentGateway.data.data[key] &&
+				typeof paymentGateway.data.data[key] === 'object'
+			) {
+				fields[key] = paymentGateway.data.data[key].file_url
+			} else {
+				fields[key] = paymentGateway.data.data[key]
+			}
+		})
+
+		return {
+			doctype: paymentGateway.data.doctype,
+			name: paymentGateway.data.docname,
+			fieldname: fields,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		paymentGateway.reload()
+	},
+})
+
+const update = () => {
+	props.fields.forEach((f) => {
+		if (f.type != 'Column Break') {
+			props.data.doc[f.name] = f.value
+		}
+	})
+	props.data.save.submit()
+	saveSettings.submit()
+}
+
+watch(
+	() => props.data.doc.payment_gateway,
+	() => {
+		paymentGateway.reload()
+	}
+)
+</script>

frontend/src/components/ProgressBar.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="w-full bg-gray-200 rounded-full h-1 my-2">
+		<div
+			class="bg-gray-900 h-1 rounded-full"
+			:style="{ width: progressBarWidth }"
+		></div>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	progress: {
+		type: Number,
+		default: 0,
+	},
+})
+
+const progressBarWidth = computed(() => {
+	const formattedPercentage = Math.min(Math.ceil(props.progress), 100)
+	return `${formattedPercentage}%`
+})
+</script>

frontend/src/components/Quiz.vue

@@ -1,10 +1,24 @@
 <template>
 	<div v-if="quiz.data">
-		<div class="bg-blue-100 py-2 px-2 mb-4 rounded-md text-sm text-blue-800">
+		<div
-			<div class="leading-relaxed">
+			class="bg-blue-100 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-blue-800"
+		>
+			<div class="leading-5">
 				{{
-					__('This quiz consists of {0} questions.').format(
+					__('This quiz consists of {0} questions.').format(questions.length)
-						quiz.data.questions.length
+				}}
+			</div>
+			<div v-if="quiz.data?.duration" class="leading-5">
+				{{
+					__(
+						'Please ensure that you complete all the questions in {0} minutes.'
+					).format(quiz.data.duration)
+				}}
+			</div>
+			<div v-if="quiz.data?.duration" class="leading-5">
+				{{
+					__(
+						'If you fail to do so, the quiz will be automatically submitted when the timer ends.'
 					)
 				}}
 			</div>
@@ -24,14 +38,16 @@
 					)
 				}}
 			</div>
-			<div v-if="quiz.data.time" class="leading-relaxed">
-				{{
-					__(
-						'The quiz has a time limit. For each question you will be given {0} seconds.'
-					).format(quiz.data.time)
-				}}
-			</div>
 		</div>
+
+		<div v-if="quiz.data.duration" class="flex items-center space-x-2 my-4">
+			<span class="text-gray-600 text-xs"> {{ __('Time') }}: </span>
+			<ProgressBar :progress="timerProgress" />
+			<span class="font-semibold">
+				{{ formatTimer(timer) }}
+			</span>
+		</div>
+
 		<div v-if="activeQuestion == 0">
 			<div class="border text-center p-20 rounded-md">
 				<div class="font-semibold text-lg">
@@ -59,22 +75,18 @@
 			</div>
 		</div>
 		<div v-else-if="!quizSubmission.data">
-			<div v-for="(question, qtidx) in quiz.data.questions">
+			<div v-for="(question, qtidx) in questions">
 				<div
 					v-if="qtidx == activeQuestion - 1 && questionDetails.data"
 					class="border rounded-md p-5"
 				>
 					<div class="flex justify-between">
-						<div class="text-sm">
+						<div class="text-sm text-gray-600">
 							<span class="mr-2">
 								{{ __('Question {0}').format(activeQuestion) }}:
 							</span>
 							<span>
-								{{
+								{{ getInstructions(questionDetails.data) }}
-									questionDetails.data.multiple
-										? __('Choose all answers that apply')
-										: __('Choose one answer')
-								}}
 							</span>
 						</div>
 						<div class="text-gray-900 text-sm font-semibold item-left">
@@ -82,9 +94,10 @@
 							{{ question.marks == 1 ? __('Mark') : __('Marks') }}
 						</div>
 					</div>
-					<div class="text-gray-900 font-semibold mt-2">
+					<div
-						{{ questionDetails.data.question }}
+						class="text-gray-900 font-semibold mt-2 leading-5"
-					</div>
+						v-html="questionDetails.data.question"
+					></div>
 					<div v-if="questionDetails.data.type == 'Choices'" v-for="index in 4">
 						<label
 							v-if="questionDetails.data[`option_${index}`]"
@@ -123,28 +136,65 @@
 									<MinusCircle v-else class="w-4 h-4" />
 								</div>
 							</div>
-							<span class="ml-2">
+							<span
-								{{ questionDetails.data[`option_${index}`] }}
+								class="ml-2"
+								v-html="questionDetails.data[`option_${index}`]"
+							>
 							</span>
 						</label>
 						<div
 							v-if="questionDetails.data[`explanation_${index}`]"
-							class="mt-2 text-sm hidden"
+							class="mt-2 text-xs"
+							v-show="showAnswers.length"
 						>
 							{{ questionDetails.data[`explanation_${index}`] }}
 						</div>
 					</div>
-					<div class="flex items-center justify-between mt-8">
+					<div v-else-if="questionDetails.data.type == 'User Input'">
-						<div>
+						<FormControl
+							v-model="possibleAnswer"
+							type="textarea"
+							:disabled="showAnswers.length ? true : false"
+							class="my-2"
+						/>
+						<div v-if="showAnswers.length">
+							<Badge v-if="showAnswers[0]" :label="__('Correct')" theme="green">
+								<template #prefix>
+									<CheckCircle class="w-4 h-4 text-green-500 mr-1" />
+								</template>
+							</Badge>
+							<Badge v-else theme="red" :label="__('Incorrect')">
+								<template #prefix>
+									<XCircle class="w-4 h-4 text-red-500 mr-1" />
+								</template>
+							</Badge>
+						</div>
+					</div>
+					<div v-else>
+						<TextEditor
+							class="mt-4"
+							:content="possibleAnswer"
+							@change="(val) => (possibleAnswer = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+						/>
+					</div>
+					<div class="flex items-center justify-between mt-4">
+						<div class="text-sm text-gray-600">
 							{{
 								__('Question {0} of {1}').format(
 									activeQuestion,
-									quiz.data.questions.length
+									questions.length
 								)
 							}}
 						</div>
 						<Button
-							v-if="quiz.data.show_answers && !showAnswers.length"
+							v-if="
+								quiz.data.show_answers &&
+								!showAnswers.length &&
+								questionDetails.data.type != 'Open Ended'
+							"
 							@click="checkAnswer()"
 						>
 							<span>
@@ -152,7 +202,7 @@
 							</span>
 						</Button>
 						<Button
-							v-else-if="activeQuestion != quiz.data.questions.length"
+							v-else-if="activeQuestion != questions.length"
 							@click="nextQuetion()"
 						>
 							<span>
@@ -168,11 +218,18 @@
 				</div>
 			</div>
 		</div>
-		<div v-else class="border rounded-md p-20 text-center">
+		<div v-else class="border rounded-md p-20 text-center space-y-4">
 			<div class="text-lg font-semibold">
 				{{ __('Quiz Summary') }}
 			</div>
-			<div>
+			<div v-if="quizSubmission.data.is_open_ended">
+				{{
+					__(
+						"Your submission has been successfully saved. The instructor will review and grade it shortly, and you'll be notified of your final result."
+					)
+				}}
+			</div>
+			<div v-else>
 				{{
 					__(
 						'You got {0}% correct answers with a score of {1} out of {2}'
@@ -212,21 +269,28 @@
 </template>
 <script setup>
 import {
-	createDocumentResource,
+	Badge,
 	Button,
 	createResource,
 	ListView,
+	TextEditor,
+	FormControl,
 } from 'frappe-ui'
-import { ref, watch, reactive, inject } from 'vue'
+import { ref, watch, reactive, inject, computed } from 'vue'
 import { createToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
-const user = inject('$user')
+import ProgressBar from '@/components/ProgressBar.vue'
 
+const user = inject('$user')
 const activeQuestion = ref(0)
 const currentQuestion = ref('')
 const selectedOptions = reactive([0, 0, 0, 0])
 const showAnswers = reactive([])
+let questions = reactive([])
+const possibleAnswer = ref(null)
+const timer = ref(0)
+let timerInterval = null
 
 const props = defineProps({
 	quizName: {
@@ -246,11 +310,62 @@ const quiz = createResource({
 	cache: ['quiz', props.quizName],
 	auto: true,
 	onSuccess(data) {
-		attempts.reload()
+		populateQuestions()
-		resetQuiz()
+		setupTimer()
 	},
 })
 
+const populateQuestions = () => {
+	let data = quiz.data
+	if (data.shuffle_questions) {
+		questions = shuffleArray(data.questions)
+		if (data.limit_questions_to) {
+			questions = questions.slice(0, data.limit_questions_to)
+		}
+	} else {
+		questions = data.questions
+	}
+}
+
+const setupTimer = () => {
+	if (quiz.data.duration) {
+		timer.value = quiz.data.duration * 60
+	}
+}
+
+const startTimer = () => {
+	timerInterval = setInterval(() => {
+		timer.value--
+		if (timer.value == 0) {
+			clearInterval(timerInterval)
+			submitQuiz()
+		}
+	}, 1000)
+}
+
+const formatTimer = (seconds) => {
+	const hrs = Math.floor(seconds / 3600)
+		.toString()
+		.padStart(2, '0')
+	const mins = Math.floor((seconds % 3600) / 60)
+		.toString()
+		.padStart(2, '0')
+	const secs = (seconds % 60).toString().padStart(2, '0')
+	return hrs != '00' ? `${hrs}:${mins}:${secs}` : `${mins}:${secs}`
+}
+
+const timerProgress = computed(() => {
+	return (timer.value / (quiz.data.duration * 60)) * 100
+})
+
+const shuffleArray = (array) => {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1))
+		;[array[i], array[j]] = [array[j], array[i]]
+	}
+	return array
+}
+
 const attempts = createResource({
 	url: 'frappe.client.get_list',
 	makeParams(values) {
@@ -279,6 +394,19 @@ const attempts = createResource({
 	},
 })
 
+watch(
+	() => quiz.data,
+	() => {
+		if (quiz.data) {
+			populateQuestions()
+		}
+		if (quiz.data && quiz.data.max_attempts) {
+			attempts.reload()
+			resetQuiz()
+		}
+	}
+)
+
 const quizSubmission = createResource({
 	url: 'lms.lms.doctype.lms_quiz.lms_quiz.quiz_summary',
 	makeParams(values) {
@@ -308,7 +436,6 @@ watch(activeQuestion, (value) => {
 watch(
 	() => props.quizName,
 	(newName) => {
-		console.log(newName)
 		if (newName) {
 			quiz.reload()
 		}
@@ -318,6 +445,7 @@ watch(
 const startQuiz = () => {
 	activeQuestion.value = 1
 	localStorage.removeItem(quiz.data.title)
+	if (quiz.data.duration) startTimer()
 }
 
 const markAnswer = (index) => {
@@ -328,10 +456,17 @@ const markAnswer = (index) => {
 
 const getAnswers = () => {
 	let answers = []
-	selectedOptions.forEach((value, index) => {
+	const type = questionDetails.data.type
-		if (selectedOptions[index])
+
-			answers.push(questionDetails.data[`option_${index + 1}`])
+	if (type == 'Choices') {
-	})
+		selectedOptions.forEach((value, index) => {
+			if (selectedOptions[index])
+				answers.push(questionDetails.data[`option_${index + 1}`])
+		})
+	} else {
+		answers.push(possibleAnswer.value)
+	}
+
 	return answers
 }
 
@@ -341,7 +476,8 @@ const checkAnswer = () => {
 		createToast({
 			title: 'Please select an option',
 			icon: 'alert-circle',
-			iconClasses: 'text-yellow-600 bg-yellow-100',
+			iconClasses: 'text-yellow-600 bg-yellow-100 rounded-full',
+			position: 'top-center',
 		})
 		return
 	}
@@ -355,15 +491,20 @@ const checkAnswer = () => {
 		},
 		auto: true,
 		onSuccess(data) {
-			selectedOptions.forEach((option, index) => {
+			let type = questionDetails.data.type
-				if (option) {
+			if (type == 'Choices') {
-					showAnswers[index] = option && data[index]
+				selectedOptions.forEach((option, index) => {
-				} else if (questionDetails.data[`is_correct_${index + 1}`]) {
+					if (option) {
-					showAnswers[index] = 0
+						showAnswers[index] = option && data[index]
-				} else {
+					} else if (questionDetails.data[`is_correct_${index + 1}`]) {
-					showAnswers[index] = undefined
+						showAnswers[index] = 0
-				}
+					} else {
-			})
+						showAnswers[index] = undefined
+					}
+				})
+			} else {
+				showAnswers.push(data)
+			}
 			addToLocalStorage()
 			if (!quiz.data.show_answers) {
 				resetQuestion()
@@ -375,8 +516,8 @@ const checkAnswer = () => {
 const addToLocalStorage = () => {
 	let quizData = JSON.parse(localStorage.getItem(quiz.data.title))
 	let questionData = {
-		question_index: activeQuestion.value,
+		question_name: currentQuestion.value,
-		answers: getAnswers().join(),
+		answer: getAnswers().join(),
 		is_correct: showAnswers.filter((answer) => {
 			return answer != undefined
 		}),
@@ -386,9 +527,10 @@ const addToLocalStorage = () => {
 }
 
 const nextQuetion = () => {
-	if (!quiz.data.show_answers) {
+	if (!quiz.data.show_answers && questionDetails.data?.type != 'Open Ended') {
 		checkAnswer()
 	} else {
+		if (questionDetails.data?.type == 'Open Ended') addToLocalStorage()
 		resetQuestion()
 	}
 }
@@ -398,11 +540,13 @@ const resetQuestion = () => {
 	activeQuestion.value = activeQuestion.value + 1
 	selectedOptions.splice(0, selectedOptions.length, ...[0, 0, 0, 0])
 	showAnswers.length = 0
+	possibleAnswer.value = null
 }
 
 const submitQuiz = () => {
 	if (!quiz.data.show_answers) {
-		checkAnswer()
+		if (questionDetails.data.type == 'Open Ended') addToLocalStorage()
+		else checkAnswer()
 		setTimeout(() => {
 			createSubmission()
 		}, 500)
@@ -412,9 +556,15 @@ const submitQuiz = () => {
 }
 
 const createSubmission = () => {
-	quizSubmission.reload().then(() => {
+	quizSubmission.submit(
-		attempts.reload()
+		{},
-	})
+		{
+			onSuccess(data) {
+				if (quiz.data && quiz.data.max_attempts) attempts.reload()
+				if (quiz.data.duration) clearInterval(timerInterval)
+			},
+		}
+	)
 }
 
 const resetQuiz = () => {
@@ -422,6 +572,15 @@ const resetQuiz = () => {
 	selectedOptions.splice(0, selectedOptions.length, ...[0, 0, 0, 0])
 	showAnswers.length = 0
 	quizSubmission.reset()
+	populateQuestions()
+	setupTimer()
+}
+
+const getInstructions = (question) => {
+	if (question.type == 'Choices')
+		if (question.multiple) return __('Choose all answers that apply')
+		else return __('Choose one answer')
+	else return __('Type your answer')
 }
 
 const getSubmissionColumns = () => {

frontend/src/components/QuizBlock.vue

@@ -23,4 +23,8 @@ const props = defineProps({
 		required: true,
 	},
 })
+
+const redirectToLogin = () => {
+	window.location.href = `/login`
+}
 </script>

frontend/src/components/QuizPlugin.vue

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

frontend/src/components/SettingDetails.vue

@@ -0,0 +1,78 @@
+<template>
+	<div class="flex flex-col justify-between h-full">
+		<div>
+			<div class="flex itemsc-center justify-between">
+				<div class="text-xl font-semibold leading-none mb-1">
+					{{ __(label) }}
+				</div>
+				<Badge
+					v-if="data.isDirty"
+					:label="__('Not Saved')"
+					variant="subtle"
+					theme="orange"
+				/>
+			</div>
+			<div class="text-xs text-gray-600">
+				{{ __(description) }}
+			</div>
+		</div>
+
+		<SettingFields :fields="fields" :data="data.doc" />
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" :loading="data.save.loading" @click="update">
+				{{ __('Update') }}
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { Button, Badge } from 'frappe-ui'
+import SettingFields from '@/components/SettingFields.vue'
+import { showToast } from '@/utils'
+
+const props = defineProps({
+	fields: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+	},
+})
+
+const update = () => {
+	props.fields.forEach((f) => {
+		if (f.type != 'Column Break') {
+			props.data.doc[f.name] = f.value
+		}
+	})
+	props.data.save.submit(
+		{},
+		{
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		}
+	)
+}
+</script>
+
+<style>
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+	font-family: revert;
+}
+
+.CodeMirror {
+	border-radius: 12px;
+}
+</style>

frontend/src/components/SettingFields.vue

@@ -0,0 +1,145 @@
+<template>
+	<div
+		class="my-5"
+		:class="{ 'flex justify-between w-full': columns.length > 1 }"
+	>
+		<div v-for="(column, index) in columns" :key="index">
+			<div
+				class="flex flex-col space-y-5"
+				:class="columns.length > 1 ? 'w-72' : 'w-full'"
+			>
+				<div v-for="field in column">
+					<Link
+						v-if="field.type == 'Link'"
+						v-model="data[field.name]"
+						:doctype="field.doctype"
+						:label="__(field.label)"
+					/>
+
+					<div v-else-if="field.type == 'Code'">
+						<CodeEditor
+							:label="__(field.label)"
+							type="HTML"
+							description="The HTML you add here will be shown on your sign up page."
+							v-model="data[field.name]"
+							height="250px"
+							class="shrink-0"
+							:showLineNumbers="true"
+						>
+						</CodeEditor>
+					</div>
+
+					<div v-else-if="field.type == 'Upload'">
+						<div class="text-sm text-gray-600 mb-1">
+							{{ __(field.label) }}
+						</div>
+						<FileUploader
+							v-if="!data[field.name]"
+							:fileTypes="['image/*']"
+							:validateFile="validateFile"
+							@success="(file) => (data[field.name] = file)"
+						>
+							<template
+								v-slot="{ file, progress, uploading, openFileSelector }"
+							>
+								<div class="">
+									<Button @click="openFileSelector" :loading="uploading">
+										{{
+											uploading ? `Uploading ${progress}%` : 'Upload an image'
+										}}
+									</Button>
+								</div>
+							</template>
+						</FileUploader>
+						<div v-else>
+							<div class="flex items-center text-sm space-x-2">
+								<div
+									class="flex items-center justify-center rounded border border-outline-gray-1 w-[15rem] py-5"
+								>
+									<img :src="data[field.name]?.file_url" class="h-6 rounded" />
+								</div>
+								<div class="flex flex-col flex-wrap">
+									<span class="break-all">
+										{{ data[field.name]?.file_name }}
+									</span>
+									<span class="text-sm text-gray-500 mt-1">
+										{{ getFileSize(data[field.name]?.file_size) }}
+									</span>
+								</div>
+								<X
+									@click="data[field.name] = null"
+									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								/>
+							</div>
+						</div>
+					</div>
+
+					<Switch
+						v-else-if="field.type == 'checkbox'"
+						size="sm"
+						:label="__(field.label)"
+						:description="__(field.description)"
+						v-model="data[field.name]"
+					/>
+
+					<FormControl
+						v-else
+						:key="field.name"
+						v-model="data[field.name]"
+						:label="__(field.label)"
+						:type="field.type"
+						:rows="field.rows"
+						:options="field.options"
+						:description="field.description"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { FormControl, FileUploader, Button, Switch } from 'frappe-ui'
+import { computed } from 'vue'
+import { getFileSize, validateFile } from '@/utils'
+import { X } from 'lucide-vue-next'
+import Link from '@/components/Controls/Link.vue'
+import CodeEditor from '@/components/Controls/CodeEditor.vue'
+
+const props = defineProps({
+	fields: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Object,
+		required: true,
+	},
+})
+
+const columns = computed(() => {
+	const cols = []
+	let currentColumn = []
+
+	props.fields.forEach((field) => {
+		if (field.type === 'Column Break') {
+			if (currentColumn.length > 0) {
+				cols.push(currentColumn)
+				currentColumn = []
+			}
+		} else {
+			if (field.type == 'checkbox') {
+				field.value = props.data[field.name] ? true : false
+			} else {
+				field.value = props.data[field.name]
+			}
+			currentColumn.push(field)
+		}
+	})
+
+	if (currentColumn.length > 0) {
+		cols.push(currentColumn)
+	}
+
+	return cols
+})
+</script>

frontend/src/components/SidebarLink.vue

@@ -6,39 +6,66 @@
 		@click="handleClick"
 	>
 		<div
-			class="flex items-center duration-300 ease-in-out"
+			class="flex items-center w-full duration-300 ease-in-out group"
-			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
+			:class="isCollapsed ? 'p-1 relative' : 'px-2 py-1'"
 		>
 			<Tooltip :text="link.label" placement="right">
 				<slot name="icon">
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 						<component
-							:is="link.icon"
+							:is="icons[link.icon]"
-							class="h-5 w-5 stroke-1.5 text-gray-800"
+							class="h-4 w-4 stroke-1.5 text-gray-800"
 						/>
 					</span>
 				</slot>
 			</Tooltip>
 			<span
-				class="flex-shrink-0 text-base duration-300 ease-in-out"
+				class="flex-shrink-0 text-sm duration-300 ease-in-out"
 				:class="
 					isCollapsed
 						? 'ml-0 w-0 overflow-hidden opacity-0'
 						: 'ml-2 w-auto opacity-100'
 				"
 			>
-				{{ link.label }}
+				{{ __(link.label) }}
 			</span>
+			<span
+				v-if="link.count"
+				class="!ml-auto block text-xs text-gray-600"
+				:class="
+					isCollapsed && link.count > 9
+						? 'absolute top-[2px] right-0 bg-white'
+						: ''
+				"
+			>
+				{{ link.count }}
+			</span>
+			<div
+				v-if="showControls && !isCollapsed"
+				class="flex items-center space-x-2 !ml-auto block text-xs text-gray-600 group-hover:visible invisible"
+			>
+				<component
+					:is="icons['Edit']"
+					class="h-3 w-3 stroke-1.5 text-gray-700"
+					@click.stop="openModal(link)"
+				/>
+				<component
+					:is="icons['X']"
+					class="h-3 w-3 stroke-1.5 text-gray-700"
+					@click.stop="deletePage(link)"
+				/>
+			</div>
 		</div>
 	</button>
 </template>
-
 <script setup>
-import { Tooltip } from 'frappe-ui'
+import { Tooltip, Button } from 'frappe-ui'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import * as icons from 'lucide-vue-next'
 
 const router = useRouter()
+const emit = defineEmits(['openModal', 'deletePage'])
 
 const props = defineProps({
 	link: {
@@ -49,13 +76,29 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	showControls: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 function handleClick() {
-	router.push({ name: props.link.to })
+	if (router.hasRoute(props.link.to)) {
+		router.push({ name: props.link.to })
+	} else if (props.link.to) {
+		window.location.href = `/${props.link.to}`
+	}
 }
 
-let isActive = computed(() => {
+const isActive = computed(() => {
 	return props.link?.activeFor?.includes(router.currentRoute.value.name)
 })
+
+const openModal = (link) => {
+	emit('openModal', link)
+}
+
+const deletePage = (link) => {
+	emit('deletePage', link)
+}
 </script>

frontend/src/components/Tags.vue

@@ -34,9 +34,7 @@ const props = defineProps({
 		default: 'Tags',
 	},
 })
-console.log(props.modelValue)
 let tags = ref(props.modelValue)
-console.log(tags.value)
 const emit = defineEmits(['update:modelValue'])
 let newTag = ref('')
 

frontend/src/components/UnsplashImageBrowser.vue

@@ -0,0 +1,90 @@
+<template>
+	<Popover transition="default">
+		<template #target="{ isOpen, togglePopover }" class="flex w-full">
+			<slot v-bind="{ isOpen, togglePopover }"></slot>
+		</template>
+		<template #body>
+			<div
+				class="absolute left-1/2 mt-3 max-w-sm -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
+			>
+				<div
+					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
+				>
+					<div class="flex items-center space-x-2">
+						<div class="flex-1">
+							<TextInput
+								type="text"
+								placeholder="search by keyword"
+								v-model="search"
+								:debounce="300"
+							/>
+						</div>
+						<FileUploader @success="(file) => $emit('select', file.file_url)">
+							<template
+								v-slot="{ file, progress, uploading, openFileSelector }"
+							>
+								<div class="w-full text-center">
+									<Button @click="openFileSelector" :loading="uploading">
+										{{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}
+									</Button>
+								</div>
+							</template>
+						</FileUploader>
+					</div>
+					<div
+						class="relative mt-2 grid w-[25.5rem] gap-2 bg-white lg:grid-cols-2"
+					>
+						<Button
+							v-for="image in $resources.images.data"
+							:key="image.id"
+							class="h-[50px] w-[200px] overflow-hidden rounded hover:opacity-80"
+							@click="$emit('select', image.urls.raw)"
+						>
+							<img
+								:src="
+									image.urls.raw +
+									'&w=200&h=50&fit=crop&crop=entropy,faces,focalpoint'
+								"
+							/>
+						</Button>
+					</div>
+					<div class="mt-2 text-center text-sm text-gray-500">
+						{{ __('Image search powered by') }}
+						<a class="underline" target="_blank" href="https://unsplash.com">
+							{{ __('Unsplash') }}
+						</a>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Popover>
+</template>
+
+<script>
+// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { Popover, FileUploader, Button } from 'frappe-ui'
+
+export default {
+	name: 'UnsplashImageBrowser',
+	components: {
+		Popover,
+		FileUploader,
+	},
+	emits: ['select'],
+	resources: {
+		images() {
+			return {
+				url: 'gameplan.api.get_unsplash_photos',
+				params: { keyword: this.search },
+				auto: true,
+				debounce: 500,
+			}
+		},
+	},
+	data() {
+		return {
+			search: '',
+		}
+	},
+}
+</script>

frontend/src/components/UploadPlugin.vue

@@ -0,0 +1,53 @@
+<template>
+	<FileUploader
+		:fileTypes="['image/*', 'video/*', 'audio/*', '.pdf']"
+		:validateFile="validateFile"
+		@success="(data) => addFile(data)"
+		ref="fileUploader"
+		class="hide"
+	/>
+</template>
+<script setup>
+import { FileUploader } from 'frappe-ui'
+import { onMounted, ref, nextTick } from 'vue'
+
+const fileUploader = ref(null)
+const emit = defineEmits(['fileUploaded'])
+
+const props = defineProps({
+	onFileUploaded: {
+		type: Function,
+		required: true,
+	},
+})
+
+onMounted(async () => {
+	await nextTick()
+	const fileInput = fileUploader.value.$el.querySelector('input[type="file"]')
+	if (fileInput) {
+		fileInput.click()
+	}
+})
+
+const addFile = (file) => {
+	props.onFileUploaded({
+		file_url: file.file_url,
+		file_type: file.file_type,
+	})
+}
+
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (!['jpg', 'jpeg', 'png', 'mp4', 'mov', 'mp3', 'pdf'].includes(extension)) {
+		return 'Only image and video files are allowed.'
+	}
+}
+
+const isVideo = (type) => {
+	return ['mov', 'mp4', 'avi', 'mkv', 'webm'].includes(type.toLowerCase())
+}
+
+const isAudio = (type) => {
+	return ['mp3', 'wav', 'ogg'].includes(type.toLowerCase())
+}
+</script>

frontend/src/components/UserAvatar.vue

@@ -1,15 +1,17 @@
 <template>
-	<Avatar
+	<Tooltip :text="user.full_name">
-		class="avatar border border-gray-300"
+		<Avatar
-		v-if="user"
+			class="avatar border border-gray-300 cursor-auto"
-		:label="user.full_name"
+			v-if="user"
-		:image="user.user_image"
+			:label="user.full_name"
-		:size="size"
+			:image="user.user_image"
-		v-bind="$attrs"
+			:size="size"
-	/>
+			v-bind="$attrs"
+		/>
+	</Tooltip>
 </template>
 <script setup>
-import { Avatar } from 'frappe-ui'
+import { Avatar, Tooltip } from 'frappe-ui'
 const props = defineProps({
 	user: {
 		type: Object,

frontend/src/components/UserDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dropdown :options="userDropdownOptions">
+	<Dropdown class="p-2" :options="userDropdownOptions">
 		<template v-slot="{ open }">
 			<button
 				class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
@@ -11,11 +11,11 @@
 						: 'hover:bg-gray-200 px-2 w-52'
 				"
 			>
-				<span
+				<img
-					v-if="branding.data?.brand_html"
+					v-if="branding.data?.banner_image"
-					v-html="branding.data?.brand_html"
+					:src="branding.data?.banner_image.file_url"
 					class="w-8 h-8 rounded flex-shrink-0"
-				></span>
+				/>
 				<LMSLogo v-else class="w-8 h-8 rounded flex-shrink-0" />
 				<div
 					class="flex flex-1 flex-col text-left duration-300 ease-in-out"
@@ -26,13 +26,20 @@
 					"
 				>
 					<div class="text-base font-medium text-gray-900 leading-none">
-						<span v-if="branding.data?.brand_name">
+						<span
-							{{ branding.data?.brand_name }}
+							v-if="
+								branding.data?.app_name && branding.data?.app_name != 'Frappe'
+							"
+						>
+							{{ branding.data?.app_name }}
 						</span>
 						<span v-else> Learning </span>
 					</div>
-					<div v-if="user" class="mt-1 text-sm text-gray-700 leading-none">
+					<div
-						{{ convertToTitleCase(user.split('@')[0]) }}
+						v-if="userResource"
+						class="mt-1 text-sm text-gray-700 leading-none"
+					>
+						{{ convertToTitleCase(userResource.data?.full_name) }}
 					</div>
 				</div>
 				<div
@@ -48,18 +55,32 @@
 			</button>
 		</template>
 	</Dropdown>
+	<SettingsModal
+		v-if="userResource.data?.is_moderator"
+		v-model="showSettingsModal"
+	/>
 </template>
 
 <script setup>
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
-import { Dropdown, createResource } from 'frappe-ui'
+import { Dropdown } from 'frappe-ui'
-import { ChevronDown, LogIn, LogOut, User } from 'lucide-vue-next'
+import Apps from '@/components/Apps.vue'
+import { ChevronDown, LogIn, LogOut, User, Settings } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { convertToTitleCase } from '../utils'
-import { onMounted } from 'vue'
+import { usersStore } from '@/stores/user'
+import { useSettings } from '@/stores/settings'
+import { markRaw, watch, ref } from 'vue'
+import SettingsModal from '@/components/Modals/Settings.vue'
 
 const router = useRouter()
+const { logout, branding } = sessionStore()
+let { userResource } = usersStore()
+const settingsStore = useSettings()
+let { isLoggedIn } = sessionStore()
+const showSettingsModal = ref(false)
+
 const props = defineProps({
 	isCollapsed: {
 		type: Boolean,
@@ -67,28 +88,43 @@ const props = defineProps({
 	},
 })
 
-const branding = createResource({
+watch(
-	url: 'lms.lms.api.get_branding',
+	() => settingsStore.isSettingsOpen,
-	cache: true,
+	(value) => {
-	auto: true,
+		showSettingsModal.value = value
-	onSuccess(data) {
+	}
-		document.querySelector("link[rel='icon']").href = data.favicon
+)
-	},
-})
 
-const { logout, user } = sessionStore()
-let { isLoggedIn } = sessionStore()
 const userDropdownOptions = [
-	/* {
+	{
 		icon: User,
 		label: 'My Profile',
 		onClick: () => {
-			router.push(`/user/${user.data?.username}`)
+			router.push(`/user/${userResource.data?.username}`)
 		},
 		condition: () => {
 			return isLoggedIn
 		},
-	}, */
+	},
+	{
+		component: markRaw(Apps),
+		condition: () => {
+			let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
+			let system_user = cookies.get('system_user')
+			if (system_user === 'yes') return true
+			else return false
+		},
+	},
+	{
+		icon: Settings,
+		label: 'Settings',
+		onClick: () => {
+			settingsStore.isSettingsOpen = true
+		},
+		condition: () => {
+			return userResource.data?.is_moderator
+		},
+	},
 	{
 		icon: LogOut,
 		label: 'Log out',

frontend/src/components/VideoBlock.vue

@@ -0,0 +1,192 @@
+<template>
+	<div ref="videoContainer" class="video-block group relative">
+		<video
+			@timeupdate="updateTime"
+			@ended="videoEnded"
+			@click="togglePlay"
+			oncontextmenu="return false"
+			class="rounded-lg border border-gray-100 group cursor-pointer"
+			ref="videoRef"
+		>
+			<source :src="fileURL" :type="type" />
+		</video>
+		<div
+			class="flex items-center space-x-2 bg-gray-200 rounded-md p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto invisible group-hover:visible"
+		>
+			<Button variant="ghost">
+				<template #icon>
+					<Play
+						v-if="!playing"
+						@click="playVideo"
+						class="w-4 h-4 text-gray-900"
+					/>
+					<Pause v-else @click="pauseVideo" class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+			<Button variant="ghost" @click="toggleMute">
+				<template #icon>
+					<Volume2 v-if="!muted" class="w-4 h-4 text-gray-900" />
+					<VolumeX v-else class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+			<input
+				type="range"
+				min="0"
+				:max="duration"
+				step="0.1"
+				v-model="currentTime"
+				@input="changeCurrentTime"
+				class="duration-slider w-full h-1"
+			/>
+			<span class="text-xs font-medium">
+				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+			</span>
+			<Button variant="ghost" @click="toggleFullscreen">
+				<template #icon>
+					<Maximize class="w-4 h-4 text-gray-900" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { Play, Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
+import { Button } from 'frappe-ui'
+
+const videoRef = ref(null)
+const videoContainer = ref(null)
+let playing = ref(false)
+let currentTime = ref(0)
+let duration = ref(0)
+let muted = ref(false)
+
+const props = defineProps({
+	file: {
+		type: String,
+		required: true,
+	},
+	type: {
+		type: String,
+		default: 'video/mp4',
+	},
+})
+
+onMounted(() => {
+	setTimeout(() => {
+		videoRef.value.onloadedmetadata = () => {
+			duration.value = videoRef.value.duration
+		}
+		videoRef.value.ontimeupdate = () => {
+			currentTime.value = videoRef.value.currentTime
+		}
+	}, 0)
+})
+
+const fileURL = computed(() => {
+	if (isYoutube) {
+		let url = props.file
+		if (url.includes('watch?v=')) {
+			url = url.replace('watch?v=', 'embed/')
+		}
+		return `${url}?autoplay=0&controls=0&disablekb=1&playsinline=1&cc_load_policy=1&cc_lang_pref=auto`
+	}
+	return props.file
+})
+
+const isYoutube = computed(() => {
+	return props.type == 'video/youtube'
+})
+
+const playVideo = () => {
+	videoRef.value.play()
+	playing.value = true
+}
+
+const pauseVideo = () => {
+	videoRef.value.pause()
+	playing.value = false
+}
+
+const togglePlay = () => {
+	if (playing.value) {
+		pauseVideo()
+	} else {
+		playVideo()
+	}
+}
+
+const videoEnded = () => {
+	playing.value = false
+}
+
+const toggleMute = () => {
+	videoRef.value.muted = !videoRef.value.muted
+	muted.value = videoRef.value.muted
+}
+
+const changeCurrentTime = () => {
+	videoRef.value.currentTime = currentTime.value
+}
+
+const formatTime = (time) => {
+	const minutes = Math.floor(time / 60)
+	const seconds = Math.floor(time % 60)
+	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+}
+
+const toggleFullscreen = () => {
+	if (document.fullscreenElement) {
+		document.exitFullscreen()
+	} else {
+		videoContainer.value.requestFullscreen()
+	}
+}
+</script>
+
+<style scoped>
+.video-block {
+	width: 100%;
+	max-width: 900px;
+	margin: 0 auto;
+}
+
+.video-block video {
+	width: 100%;
+	height: auto;
+}
+
+iframe {
+	width: 100%;
+	min-height: 500px;
+}
+
+.duration-slider {
+	flex: 1;
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: theme('colors.gray.400');
+	cursor: pointer;
+}
+
+.duration-slider::-webkit-slider-thumb {
+	height: 10px;
+	width: 10px;
+	-webkit-appearance: none;
+	background-color: theme('colors.gray.900');
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+	input[type='range'] {
+		overflow: hidden;
+		width: 150px;
+		-webkit-appearance: none;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		cursor: pointer;
+		box-shadow: -500px 0 0 500px theme('colors.gray.900');
+	}
+}
+</style>

frontend/src/main.js

@@ -5,6 +5,7 @@ import router from './router'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import dayjs from '@/utils/dayjs'
+import { createDialog } from '@/utils/dialogs'
 import translationPlugin from './translation'
 import { usersStore } from './stores/user'
 import { sessionStore } from './stores/session'
@@ -30,8 +31,10 @@ app.provide('$dayjs', dayjs)
 app.provide('$socket', initSocket())
 app.mount('#app')
 
-const { userResource } = usersStore()
+const { userResource, allUsers } = usersStore()
 let { isLoggedIn } = sessionStore()
 
 app.provide('$user', userResource)
+app.provide('$allUsers', allUsers)
 app.config.globalProperties.$user = userResource
+app.config.globalProperties.$dialog = createDialog

frontend/src/pages/Badge.vue

@@ -0,0 +1,90 @@
+<template>
+	<div v-if="badge.doc">
+		<div class="p-5 flex flex-col items-center mt-40">
+			<div class="text-3xl font-semibold">
+				{{ badge.doc.title }}
+			</div>
+			<img :src="badge.doc.image" :alt="badge.doc.title" class="h-60 mt-2" />
+			<div class="text-lg">
+				{{
+					__('This badge has been awarded to {0} on {1}.').format(
+						userName,
+						dayjs(issuedOn.data?.issued_on).format('DD MMM YYYY')
+					)
+				}}
+			</div>
+			<div class="text-lg mt-2">
+				{{ badge.doc.description }}
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { createDocumentResource, createResource, Breadcrumbs } from 'frappe-ui'
+import { computed, inject } from 'vue'
+import { useRouter } from 'vue-router'
+
+const allUsers = inject('$allUsers')
+const dayjs = inject('$dayjs')
+const router = useRouter()
+
+const props = defineProps({
+	badgeName: {
+		type: String,
+		required: true,
+	},
+	email: {
+		type: String,
+		required: true,
+	},
+})
+
+const badge = createDocumentResource({
+	doctype: 'LMS Badge',
+	name: props.badgeName,
+})
+
+const userName = computed(() => {
+	const user = Object.values(allUsers.data).find(
+		(user) => user.name === props.email
+	)
+	return user ? user.full_name : props.email
+})
+
+const issuedOn = createResource({
+	url: 'frappe.client.get_value',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Badge Assignment',
+			filters: {
+				member: props.email,
+				badge: props.badgeName,
+			},
+			fieldname: 'issued_on',
+		}
+	},
+	onSuccess(data) {
+		if (!data.issued_on) {
+			router.push({ name: 'Courses' })
+		}
+	},
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: 'Badges',
+		},
+		{
+			label: badge.doc.title,
+			route: {
+				name: 'Badge',
+				params: {
+					badge: badge.doc.name,
+				},
+			},
+		},
+	]
+})
+</script>

frontend/src/pages/Batch.vue

@@ -13,9 +13,13 @@
 				</template>
 			</Button>
 		</header>
-		<div v-if="batch.data" class="grid grid-cols-[70%,30%] h-full">
+		<div v-if="batch.data" class="grid grid-cols-[70%,30%] h-screen">
 			<div class="border-r-2">
-				<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
+				<Tabs
+					v-model="tabIndex"
+					:tabs="tabs"
+					tablistClass="overflow-y-hidden sticky top-11 bg-white z-10"
+				>
 					<template #tab="{ tab, selected }" class="overflow-x-hidden">
 						<div>
 							<button
@@ -43,7 +47,7 @@
 						</div>
 					</template>
 					<template #default="{ tab }">
-						<div class="pt-5 px-10 pb-10">
+						<div class="pt-5 px-5 pb-10">
 							<div v-if="tab.label == 'Courses'">
 								<BatchCourses :batch="batch.data.name" />
 							</div>
@@ -66,9 +70,10 @@
 								<Discussions
 									doctype="LMS Batch"
 									:docname="batch.data.name"
-									title="Discussions"
+									:title="__('Discussions')"
 									:key="batch.data.name"
 									:singleThread="true"
+									:scrollToBottom="true"
 								/>
 							</div>
 						</div>
@@ -79,21 +84,40 @@
 				<div class="text-2xl font-semibold mb-2">
 					{{ batch.data.title }}
 				</div>
-				<div v-html="batch.data.description" class="leading-5 mb-4"></div>
+				<div v-html="batch.data.description" class="leading-5 mb-2"></div>
-				<div class="flex items-center mb-3">
+
-					<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				<div class="flex avatar-group overlap mb-5">
-					<span>
+					<div
-						{{ dayjs(batch.data.start_date).format('DD MMMM YYYY') }} -
+						class="h-6 mr-1"
-						{{ dayjs(batch.data.end_date).format('DD MMMM YYYY') }}
+						:class="{
-					</span>
+							'avatar-group overlap': batch.data.instructors.length > 1,
+						}"
+					>
+						<UserAvatar
+							v-for="instructor in batch.data.instructors"
+							:user="instructor"
+						/>
+					</div>
+					<CourseInstructors :instructors="batch.data.instructors" />
 				</div>
-				<div class="flex items-center mb-6">
+				<DateRange
+					:startDate="batch.data.start_date"
+					:endDate="batch.data.end_date"
+					class="mb-3"
+				/>
+				<div class="flex items-center mb-4">
 					<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 					<span>
 						{{ formatTime(batch.data.start_time) }} -
 						{{ formatTime(batch.data.end_time) }}
 					</span>
 				</div>
+				<div v-if="batch.data.timezone" class="flex items-center mb-4">
+					<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+					<span>
+						{{ batch.data.timezone }}
+					</span>
+				</div>
 			</div>
 			<AnnouncementModal
 				v-model="showAnnouncementModal"
@@ -149,8 +173,9 @@
 <script setup>
 import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
 import { computed, inject, ref } from 'vue'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 import {
-	Calendar,
 	Clock,
 	LayoutDashboard,
 	BookOpen,
@@ -160,8 +185,9 @@ import {
 	Mail,
 	SendIcon,
 	MessageCircle,
+	Globe,
 } from 'lucide-vue-next'
-import { formatTime } from '@/utils'
+import { formatTime, updateDocumentTitle } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
 import BatchCourses from '@/components/BatchCourses.vue'
 import LiveClass from '@/components/LiveClass.vue'
@@ -170,8 +196,8 @@ import Assessments from '@/components/Assessments.vue'
 import Announcements from '@/components/Annoucements.vue'
 import AnnouncementModal from '@/components/Modals/AnnouncementModal.vue'
 import Discussions from '@/components/Discussions.vue'
+import DateRange from '@/components/Common/DateRange.vue'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
 
@@ -214,7 +240,7 @@ const breadcrumbs = computed(() => {
 const isStudent = computed(() => {
 	return (
 		user?.data &&
-		batch.data?.students.length &&
+		batch.data?.students?.length &&
 		batch.data?.students.includes(user.data.name)
 	)
 })
@@ -264,4 +290,13 @@ const redirectToLogin = () => {
 const openAnnouncementModal = () => {
 	showAnnouncementModal.value = true
 }
+
+const pageMeta = computed(() => {
+	return {
+		title: batch.data?.title,
+		description: batch.data?.description,
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/BatchDetail.vue

@@ -11,20 +11,23 @@
 				<div class="my-3">
 					{{ batch.data.description }}
 				</div>
-				<div class="flex items-center justify-between w-1/2">
+				<div
+					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center justify-between lg:w-1/2"
+				>
 					<div class="flex items-center">
 						<BookOpen class="h-4 w-4 text-gray-700 mr-2" />
 						<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
 					</div>
-					<span v-if="batch.data.courses">&middot;</span>
+					<span class="hidden lg:block" v-if="batch.data.courses"
-					<div class="flex items-center">
+						>&middot;</span
-						<Calendar class="h-4 w-4 text-gray-700 mr-2" />
+					>
-						<span>
+					<DateRange
-							{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
+						:startDate="batch.data.start_date"
-							{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
+						:endDate="batch.data.end_date"
-						</span>
+					/>
-					</div>
+					<span class="hidden lg:block" v-if="batch.data.start_date"
-					<span v-if="batch.data.start_date">&middot;</span>
+						>&middot;</span
+					>
 					<div class="flex items-center">
 						<Clock class="h-4 w-4 text-gray-700 mr-2" />
 						<span>
@@ -33,15 +36,29 @@
 						</span>
 					</div>
 				</div>
+				<div class="flex avatar-group overlap mt-3">
+					<div
+						class="h-6 mr-1"
+						:class="{
+							'avatar-group overlap': batch.data.instructors.length > 1,
+						}"
+					>
+						<UserAvatar
+							v-for="instructor in batch.data.instructors"
+							:user="instructor"
+						/>
+					</div>
+					<CourseInstructors :instructors="batch.data.instructors" />
+				</div>
 			</div>
-			<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
+			<div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
-				<div class="">
+				<div class="order-2 lg:order-none">
 					<div
 						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
 						v-html="batch.data.batch_details"
 					></div>
 				</div>
-				<div>
+				<div class="order-1 lg:order-none">
 					<BatchOverlay :batch="batch" />
 				</div>
 			</div>
@@ -51,7 +68,7 @@
 						{{ __('Courses') }}
 					</div>
 				</div>
-				<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5">
+				<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-5">
 					<div
 						v-if="batch.data.courses"
 						v-for="course in courses.data"
@@ -80,15 +97,17 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, createResource, Button } from 'frappe-ui'
+import { computed, inject } from 'vue'
-import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
-import { formatTime } from '../utils'
-import { computed, inject, ref } from 'vue'
-import BatchOverlay from '@/components/BatchOverlay.vue'
-import CourseCard from '@/components/CourseCard.vue'
 import { useRouter } from 'vue-router'
+import { BookOpen, Clock } from 'lucide-vue-next'
+import { formatTime, updateDocumentTitle } from '@/utils'
+import { Breadcrumbs, createResource } from 'frappe-ui'
+import CourseCard from '@/components/CourseCard.vue'
+import BatchOverlay from '@/components/BatchOverlay.vue'
+import DateRange from '../components/Common/DateRange.vue'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 const router = useRouter()
 
@@ -106,16 +125,6 @@ const batch = createResource({
 		batch: props.batchName,
 	},
 	auto: true,
-	onSuccess(data) {
-		if (data.students?.includes(user.data?.name)) {
-			router.push({
-				name: 'Batch',
-				params: {
-					batchName: props.batchName,
-				},
-			})
-		}
-	},
 })
 
 const courses = createResource({
@@ -135,6 +144,15 @@ const breadcrumbs = computed(() => {
 	})
 	return items
 })
+
+const pageMeta = computed(() => {
+	return {
+		title: batch.data?.title,
+		description: batch.data?.description,
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .batch-description p {

frontend/src/pages/BatchForm.vue

@@ -8,79 +8,101 @@
 				{{ __('Save') }}
 			</Button>
 		</header>
-		<div class="py-5">
+		<div class="w-1/2 mx-auto py-5">
-			<div class="container">
+			<div class="">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10">
+				<div class="grid grid-cols-2 gap-10 mb-4 space-y-2">
 					<div>
 						<FormControl
 							v-model="batch.title"
 							:label="__('Title')"
-							class="mb-4"
+							:required="true"
-						/>
-						<FormControl
-							v-model="batch.description"
-							:label="__('Description')"
-							type="textarea"
-							class="mb-4"
 						/>
 					</div>
-					<div>
+					<div class="flex flex-col space-y-2">
 						<FormControl
 							v-model="batch.published"
 							type="checkbox"
 							:label="__('Published')"
 						/>
-						<FileUploader
+						<FormControl
-							v-if="!batch.image"
+							v-model="batch.allow_self_enrollment"
-							class="mt-4"
+							type="checkbox"
-							:fileTypes="['image/*']"
+							:label="__('Allow self enrollment')"
-							:validateFile="validateFile"
+						/>
-							@success="(file) => saveImage(file)"
+					</div>
-						>
+				</div>
-							<template
+			</div>
-								v-slot="{ file, progress, uploading, openFileSelector }"
+			<div class="mb-4">
-							>
+				<div class="text-xs text-gray-600 mb-2">
-								<div class="mb-4">
+					{{ __('Meta Image') }}
-									<Button @click="openFileSelector" :loading="uploading">
+				</div>
-										{{
+				<FileUploader
-											uploading ? `Uploading ${progress}%` : 'Upload an image'
+					v-if="!batch.image"
-										}}
+					:fileTypes="['image/*']"
-									</Button>
+					:validateFile="validateFile"
-								</div>
+					@success="(file) => saveImage(file)"
-							</template>
+				>
-						</FileUploader>
+					<template v-slot="{ file, progress, uploading, openFileSelector }">
-						<div v-else class="mt-4">
+						<div class="flex items-center">
-							<div class="text-xs text-gray-600 mb-1">
+							<div class="border rounded-md w-fit py-5 px-20">
-								{{ __('Meta Image') }}
+								<Image class="size-5 stroke-1 text-gray-700" />
 							</div>
-							<div class="flex items-center">
+							<div class="ml-4">
-								<div class="border rounded-md p-2 mr-2">
+								<Button @click="openFileSelector">
-									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+									{{ __('Upload') }}
+								</Button>
+								<div class="mt-2 text-gray-600 text-sm">
+									{{
+										__(
+											'Appears when the batch URL is shared on any online platform'
+										)
+									}}
 								</div>
-								<div class="flex flex-col">
+							</div>
-									<span>
+						</div>
-										{{ batch.image.file_name }}
+					</template>
-									</span>
+				</FileUploader>
-									<span class="text-sm text-gray-500 mt-1">
+				<div v-else class="mb-4">
-										{{ getFileSize(batch.image.file_size) }}
+					<div class="flex items-center">
-									</span>
+						<img :src="batch.image.file_url" class="border rounded-md w-40" />
-								</div>
+						<div class="ml-4">
-								<X
+							<Button @click="removeImage()">
-									@click="removeImage()"
+								{{ __('Remove') }}
-									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+							</Button>
-								/>
+							<div class="mt-2 text-gray-600 text-sm">
+								{{
+									__(
+										'Appears when the batch URL is shared on any online platform'
+									)
+								}}
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="container border-b mb-5">
+			<MultiSelect
+				v-model="instructors"
+				doctype="User"
+				:label="__('Instructors')"
+				:required="true"
+				:filters="{ ignore_user_type: 1 }"
+			/>
+			<div class="mb-4">
+				<FormControl
+					v-model="batch.description"
+					:label="__('Description')"
+					type="textarea"
+					class="my-4"
+					:placeholder="__('Short description of the batch')"
+					:required="true"
+				/>
 				<div>
 					<label class="block text-sm text-gray-600 mb-1">
 						{{ __('Batch Details') }}
+						<span class="text-red-500">*</span>
 					</label>
 					<TextEditor
 						:content="batch.batch_details"
@@ -91,9 +113,9 @@
 					/>
 				</div>
 			</div>
-			<div class="container border-b mb-5">
+			<div class="mb-4">
 				<div class="text-lg font-semibold mb-4">
-					{{ __('Settings') }}
+					{{ __('Date and Time') }}
 				</div>
 				<div class="grid grid-cols-2 gap-10">
 					<div>
@@ -102,32 +124,54 @@
 							:label="__('Start Date')"
 							type="date"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.end_date"
 							:label="__('End Date')"
 							type="date"
 							class="mb-4"
+							:required="true"
 						/>
+					</div>
+					<div>
 						<FormControl
 							v-model="batch.start_time"
 							:label="__('Start Time')"
 							type="time"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.end_time"
 							:label="__('End Time')"
 							type="time"
 							class="mb-4"
+							:required="true"
+						/>
+						<FormControl
+							v-model="batch.timezone"
+							:label="__('Timezone')"
+							type="text"
+							:placeholder="__('Example: IST (+5:30)')"
+							class="mb-4"
+							:required="true"
 						/>
 					</div>
+				</div>
+			</div>
+			<div class="mb-4">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Settings') }}
+				</div>
+				<div class="grid grid-cols-2 gap-10">
 					<div>
 						<FormControl
 							v-model="batch.seat_count"
 							:label="__('Seat Count')"
 							type="number"
 							class="mb-4"
+							:placeholder="__('Number of seats available')"
 						/>
 						<FormControl
 							v-model="batch.evaluation_end_date"
@@ -135,6 +179,8 @@
 							type="date"
 							class="mb-4"
 						/>
+					</div>
+					<div>
 						<FormControl
 							v-model="batch.medium"
 							type="select"
@@ -160,7 +206,7 @@
 				</div>
 			</div>
 
-			<div class="container">
+			<div class="">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Payment') }}
 				</div>
@@ -188,7 +234,14 @@
 	</div>
 </template>
 <script setup>
-import { computed, onMounted, inject, reactive } from 'vue'
+import {
+	computed,
+	onMounted,
+	inject,
+	reactive,
+	onBeforeUnmount,
+	ref,
+} from 'vue'
 import {
 	Breadcrumbs,
 	FormControl,
@@ -199,8 +252,10 @@ import {
 } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
 import { useRouter } from 'vue-router'
-import { getFileSize, showToast } from '../utils'
+import { showToast } from '../utils'
-import { X, FileText } from 'lucide-vue-next'
+import { Image } from 'lucide-vue-next'
+import { capture } from '@/telemetry'
+import MultiSelect from '@/components/Controls/MultiSelect.vue'
 
 const router = useRouter()
 const user = inject('$user')
@@ -221,21 +276,43 @@ const batch = reactive({
 	end_date: '',
 	start_time: '',
 	end_time: '',
+	timezone: '',
 	evaluation_end_date: '',
 	seat_count: '',
 	medium: '',
 	category: '',
+	allow_self_enrollment: false,
 	image: null,
 	paid_batch: false,
 	currency: '',
 	amount: 0,
 })
 
+const instructors = ref([])
+
 onMounted(() => {
 	if (!user.data) window.location.href = '/login'
 	if (props.batchName != 'new') {
 		batchDetail.reload()
+	} else {
+		capture('batch_form_opened')
 	}
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		saveBatch()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
 })
 
 const newBatch = createResource({
@@ -244,7 +321,10 @@ const newBatch = createResource({
 		return {
 			doc: {
 				doctype: 'LMS Batch',
-				meta_image: batch.image.file_url,
+				meta_image: batch.image?.file_url,
+				instructors: instructors.value.map((instructor) => ({
+					instructor: instructor,
+				})),
 				...batch,
 			},
 		}
@@ -261,9 +341,13 @@ const batchDetail = createResource({
 	},
 	onSuccess(data) {
 		Object.keys(data).forEach((key) => {
-			if (Object.hasOwn(batch, key)) batch[key] = data[key]
+			if (key == 'instructors') {
+				data.instructors.forEach((instructor) => {
+					instructors.value.push(instructor.instructor)
+				})
+			} else if (Object.hasOwn(batch, key)) batch[key] = data[key]
 		})
-		let checkboxes = ['published', 'paid_batch']
+		let checkboxes = ['published', 'paid_batch', 'allow_self_enrollment']
 		for (let idx in checkboxes) {
 			let key = checkboxes[idx]
 			batch[key] = batch[key] ? true : false
@@ -279,7 +363,10 @@ const editBatch = createResource({
 			doctype: 'LMS Batch',
 			name: props.batchName,
 			fieldname: {
-				meta_image: batch.image.file_url,
+				meta_image: batch.image?.file_url,
+				instructors: instructors.value.map((instructor) => ({
+					instructor: instructor,
+				})),
 				...batch,
 			},
 		}
@@ -312,6 +399,7 @@ const createNewBatch = () => {
 		{},
 		{
 			onSuccess(data) {
+				capture('batch_created')
 				router.push({
 					name: 'BatchDetail',
 					params: {
@@ -382,7 +470,7 @@ const breadcrumbs = computed(() => {
 	}
 	crumbs.push({
 		label: props.batchName == 'new' ? 'New Batch' : 'Edit Batch',
-		route: { name: 'BatchCreation', params: { batchName: props.batchName } },
+		route: { name: 'BatchForm', params: { batchName: props.batchName } },
 	})
 	return crumbs
 })

frontend/src/pages/Batches.vue

@@ -5,21 +5,29 @@
 		>
 			<Breadcrumbs
 				class="h-7"
-				:items="[{ label: __('All Batches'), route: { name: 'Batches' } }]"
+				:items="[{ label: __('Batches'), route: { name: 'Batches' } }]"
 			/>
-			<div class="flex">
+			<div class="flex space-x-2">
+				<div class="w-44">
+					<Select
+						v-if="categories.data?.length"
+						v-model="currentCategory"
+						:options="categories.data"
+						:placeholder="__('Category')"
+					/>
+				</div>
 				<router-link
-					v-if="user.data"
+					v-if="user.data?.is_moderator"
 					:to="{
-						name: 'BatchCreation',
+						name: 'BatchForm',
 						params: { batchName: 'new' },
 					}"
 				>
 					<Button variant="solid">
 						<template #prefix>
-							<Plus class="h-4 w-4" />
+							<Plus class="h-4 w-4 stroke-1.5" />
 						</template>
-						{{ __('New Batch') }}
+						{{ __('New') }}
 					</Button>
 				</router-link>
 			</div>
@@ -32,8 +40,9 @@
 				{{ __('Loading Batches...') }}
 			</div>
 			<Tabs
+				v-if="hasBatches"
 				v-model="tabIndex"
-				:tabs="tabs"
+				:tabs="makeTabs"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 			>
 				<template #tab="{ tab, selected }">
@@ -62,7 +71,7 @@
 				<template #default="{ tab }">
 					<div
 						v-if="tab.batches && tab.batches.value.length"
-						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-5 mx-5"
+						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 m-5"
 					>
 						<router-link
 							v-for="batch in tab.batches.value"
@@ -71,62 +80,177 @@
 							<BatchCard :batch="batch" />
 						</router-link>
 					</div>
-					<div
+					<div v-else class="p-5 italic text-gray-500">
-						v-else
+						{{ __('No {0} batches').format(tab.label.toLowerCase()) }}
-						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
-					>
-						<div class="flex flex-col items-center justify-center mt-4">
-							<div>
-								{{ __('No {0} batches found').format(tab.label.toLowerCase()) }}
-							</div>
-						</div>
 					</div>
 				</template>
 			</Tabs>
+			<div
+				v-else-if="
+					!batches.loading &&
+					!hasBatches &&
+					(user.data?.is_instructor || user.data?.is_moderator)
+				"
+				class="grid grid-cols-3 p-5"
+			>
+				<router-link
+					:to="{
+						name: 'BatchForm',
+						params: {
+							batchName: 'new',
+						},
+					}"
+				>
+					<div class="bg-gray-50 py-32 px-5 rounded-md">
+						<div class="flex flex-col items-center text-center space-y-2">
+							<Plus
+								class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+							/>
+							<div class="font-medium">
+								{{ __('Create a Batch') }}
+							</div>
+							<span class="text-gray-700 text-sm leading-4">
+								{{ __('You can link courses and assessments to it.') }}
+							</span>
+						</div>
+					</div>
+				</router-link>
+			</div>
+			<div
+				v-else-if="!batches.loading && !hasBatches"
+				class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+			>
+				<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+				<div class="text-xl font-medium">
+					{{ __('No batches found') }}
+				</div>
+				<div>
+					{{
+						__(
+							'There are no batches available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+						)
+					}}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { createListResource, Breadcrumbs, Button, Tabs, Badge } from 'frappe-ui'
+import {
-import { Plus } from 'lucide-vue-next'
+	createResource,
+	Breadcrumbs,
+	Button,
+	Tabs,
+	Badge,
+	Select,
+} from 'frappe-ui'
+import { BookOpen, Plus } from 'lucide-vue-next'
 import BatchCard from '@/components/BatchCard.vue'
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, onMounted, watch } from 'vue'
+import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
+const currentCategory = ref(null)
+const hasBatches = ref(false)
 
-const batches = createListResource({
+onMounted(() => {
+	let queries = new URLSearchParams(location.search)
+	if (queries.has('category')) {
+		currentCategory.value = queries.get('category')
+	}
+})
+
+const batches = createResource({
 	doctype: 'LMS Batch',
 	url: 'lms.lms.utils.get_batches',
-	cache: ['batches', user?.data?.email],
+	cache: ['batches', user.data?.email],
 	auto: true,
 })
 
-const tabIndex = ref(0)
+const categories = createResource({
-const tabs = [
+	url: 'lms.lms.api.get_categories',
-	{
+	makeParams() {
-		label: 'Upcoming',
+		return {
-		batches: computed(() => batches.data?.upcoming || []),
+			doctype: 'LMS Batch',
-		count: computed(() => batches.data?.upcoming?.length),
+			filters: {
+				published: 1,
+			},
+		}
 	},
-]
+	cache: ['batchCategories'],
+	auto: true,
+	transform(data) {
+		data.unshift({
+			label: '',
+			value: null,
+		})
+	},
+})
 
-if (user.data?.is_moderator) {
+const tabIndex = ref(0)
+let tabs
+
+const makeTabs = computed(() => {
+	tabs = []
+	addToTabs('Upcoming')
+
+	if (user.data?.is_moderator) {
+		addToTabs('Archived')
+		addToTabs('Private')
+	}
+
+	if (user.data) {
+		addToTabs('Enrolled')
+	}
+
+	return tabs
+})
+
+const getBatches = (type) => {
+	if (currentCategory.value && currentCategory.value != '') {
+		return batches.data[type].filter(
+			(batch) => batch.category == currentCategory.value
+		)
+	}
+	return batches.data[type]
+}
+
+const addToTabs = (label) => {
+	let batches = getBatches(label.toLowerCase().split(' ').join('_'))
 	tabs.push({
-		label: 'Archived',
+		label,
-		batches: computed(() => batches.data?.archived),
+		batches: computed(() => batches),
-		count: computed(() => batches.data?.archived?.length),
+		count: computed(() => batches.length),
-	})
-	tabs.push({
-		label: 'Private',
-		batches: computed(() => batches.data?.private),
-		count: computed(() => batches.data?.private?.length),
 	})
 }
-if (user.data) {
+
-	tabs.push({
+watch(batches, () => {
-		label: 'Enrolled',
+	Object.keys(batches.data).forEach((key) => {
-		batches: computed(() => batches.data?.enrolled),
+		if (batches.data[key].length) {
-		count: computed(() => batches.data?.enrolled?.length),
+			hasBatches.value = true
+		}
 	})
-}
+})
+
+watch(
+	() => currentCategory.value,
+	() => {
+		let queries = new URLSearchParams(location.search)
+		if (currentCategory.value) {
+			queries.set('category', currentCategory.value)
+		} else {
+			queries.delete('category')
+		}
+		history.pushState(null, '', `${location.pathname}?${queries.toString()}`)
+	}
+)
+
+const pageMeta = computed(() => {
+	return {
+		title: 'Batches',
+		description: 'All batches divided by categories',
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Billing.vue

@@ -1,44 +1,50 @@
 <template>
 	<div class="">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs
+				class="h-7"
+				:items="[{ label: __('Billing Details'), route: { name: 'Billing' } }]"
+			/>
+		</header>
 		<div
 			v-if="access.data?.access && orderSummary.data"
-			class="mt-10 w-1/2 mx-auto"
+			class="pt-5 pb-10 mx-5"
 		>
-			<div class="text-3xl font-bold">
+			<!-- <div class="mb-5">
-				{{ __('Billing Details') }}
+				<div class="text-lg font-semibold">
-			</div>
+					{{ __('Address') }}
-			<div class="text-gray-600 mt-1">
-				{{ __('Enter the billing information to complete the payment.') }}
-			</div>
-			<div class="border rounded-md p-5 mt-5">
-				<div class="text-xl font-semibold">
-					{{ __('Summary') }}
 				</div>
-				<div class="text-gray-600 mt-1">
+			</div> -->
-					{{ __('Review the details of your purchase.') }}
+			<div class="flex flex-col lg:flex-row justify-between">
-				</div>
+				<div
-				<div class="mt-5">
+					class="h-fit bg-gray-100 rounded-md p-5 space-y-4 lg:order-last mb-10 lg:mt-10 text-sm font-medium lg:w-1/4"
-					<div class="flex items-center justify-between">
+				>
-						<div>
+					<div class="flex items-center justify-between space-x-2">
+						<div class="text-gray-600">
+							{{ __('Ordered Item') }}
+						</div>
+						<div class="">
 							{{ orderSummary.data.title }}
 						</div>
-						<div
+					</div>
-							:class="{
+					<div
-								'font-semibold text-xl': !orderSummary.data.gst_applied,
+						v-if="orderSummary.data.gst_applied"
-							}"
+						class="flex items-center justify-between"
-						>
+					>
-							{{
+						<div class="text-gray-600">
-								orderSummary.data.gst_applied
+							{{ __('Original Amount') }}
-									? orderSummary.data.original_amount_formatted
+						</div>
-									: orderSummary.data.total_amount_formatted
+						<div class="">
-							}}
+							{{ orderSummary.data.original_amount_formatted }}
 						</div>
 					</div>
 					<div
 						v-if="orderSummary.data.gst_applied"
 						class="flex items-center justify-between mt-2"
 					>
-						<div>
+						<div class="text-gray-600">
 							{{ __('GST Amount') }}
 						</div>
 						<div>
@@ -46,107 +52,89 @@
 						</div>
 					</div>
 					<div
-						v-if="orderSummary.data.gst_applied"
+						class="flex items-center justify-between border-t border-gray-400 pt-4 mt-2"
-						class="flex items-center justify-between mt-2"
 					>
-						<div>
+						<div class="text-lg font-semibold">
-							{{ __('Total Amount') }}
+							{{ __('Total') }}
 						</div>
-						<div class="font-semibold text-2xl">
+						<div class="text-lg font-semibold">
 							{{ orderSummary.data.total_amount_formatted }}
 						</div>
 					</div>
 				</div>
 
-				<div class="text-xl font-semibold mt-10">
+				<div class="flex-1 lg:mr-10">
-					{{ __('Address') }}
+					<div class="mb-5">
-				</div>
+						<div class="text-lg font-semibold">
-				<div class="text-gray-600 mt-1">
+							{{ __('Address') }}
-					{{ __('Specify your billing address correctly.') }}
-				</div>
-				<div class="grid grid-cols-2 gap-5 mt-4">
-					<div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Billing Name') }}
-							</div>
-							<Input type="text" v-model="billingDetails.billing_name" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Address Line 1') }}
-							</div>
-							<Input type="text" v-model="billingDetails.address_line1" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Address Line 2') }}
-							</div>
-							<Input type="text" v-model="billingDetails.address_line2" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('City') }}
-							</div>
-							<Input type="text" v-model="billingDetails.city" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('State') }}
-							</div>
-							<Input type="text" v-model="billingDetails.state" />
 						</div>
 					</div>
-					<div>
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-						<div class="mt-4">
+						<div class="space-y-4">
-							<div class="mb-1.5 text-sm text-gray-700">
+							<FormControl
-								{{ __('Country') }}
+								:label="__('Billing Name')"
-							</div>
+								v-model="billingDetails.billing_name"
+							/>
+							<FormControl
+								:label="__('Address Line 1')"
+								v-model="billingDetails.address_line1"
+							/>
+							<FormControl
+								:label="__('Address Line 2')"
+								v-model="billingDetails.address_line2"
+							/>
+							<FormControl :label="__('City')" v-model="billingDetails.city" />
+							<FormControl
+								:label="__('State')"
+								v-model="billingDetails.state"
+							/>
+						</div>
+						<div class="space-y-4">
 							<Link
 								doctype="Country"
 								:value="billingDetails.country"
 								@change="(option) => changeCurrency(option)"
+								:label="__('Country')"
+							/>
+							<FormControl
+								:label="__('Postal Code')"
+								v-model="billingDetails.pincode"
+							/>
+							<FormControl
+								:label="__('Phone Number')"
+								v-model="billingDetails.phone"
 							/>
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Postal Code') }}
-							</div>
-							<Input type="text" v-model="billingDetails.pincode" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Phone Number') }}
-							</div>
-							<Input type="text" v-model="billingDetails.phone" />
-						</div>
-						<div class="mt-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Source') }}
-							</div>
 							<Link
 								doctype="LMS Source"
 								:value="billingDetails.source"
 								@change="(option) => (billingDetails.source = option)"
+								:label="__('Where did you hear about us?')"
+							/>
+							<FormControl
+								v-if="billingDetails.country == 'India'"
+								:label="__('GST Number')"
+								v-model="billingDetails.gstin"
+							/>
+							<FormControl
+								v-if="billingDetails.country == 'India'"
+								:label="__('Pan Number')"
+								v-model="billingDetails.pan"
 							/>
 						</div>
-						<div v-if="billingDetails.country == 'India'" class="mt-4">
+					</div>
-							<div class="mb-1.5 text-sm text-gray-700">
+					<div class="flex items-center justify-between border-t pt-4 mt-8">
-								{{ __('GST Number') }}
+						<p class="text-gray-600">
-							</div>
+							{{
-							<Input type="text" v-model="billingDetails.gstin" />
+								__(
-						</div>
+									'Make sure to enter the right billing name as the same will be used in your invoice.'
-						<div v-if="billingDetails.country == 'India'" class="mt-4">
+								)
-							<div class="mb-1.5 text-sm text-gray-700">
+							}}
-								{{ __('Pan Number') }}
+						</p>
-							</div>
+						<Button variant="solid" size="md" @click="generatePaymentLink()">
-							<Input type="text" v-model="billingDetails.pan" />
+							{{ __('Proceed to Payment') }}
-						</div>
+						</Button>
 					</div>
 				</div>
-				<Button variant="solid" class="mt-8" @click="generatePaymentLink()">
-					{{ __('Proceed to Payment') }}
-				</Button>
 			</div>
 		</div>
 		<div v-else-if="access.data?.message">
@@ -161,17 +149,24 @@
 		<div v-else-if="!user.data?.name">
 			<NotPermitted
 				text="Please login to access this page."
-				:buttonLink="`/login?redirect-to=/billing/${type}/${name}`"
+				:buttonLink="`/login?redirect-to=/lms/billing/${type}/${name}`"
 			/>
 		</div>
 	</div>
 </template>
 <script setup>
-import { Input, Button, createResource } from 'frappe-ui'
+import {
+	Input,
+	Button,
+	createResource,
+	FormControl,
+	Breadcrumbs,
+	Tooltip,
+} from 'frappe-ui'
 import { reactive, inject, onMounted, ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
-import { createToast } from '@/utils/'
+import { showToast } from '@/utils/'
 
 const user = inject('$user')
 
@@ -202,8 +197,8 @@ const access = createResource({
 		name: props.name,
 	},
 	onSuccess(data) {
-		orderSummary.submit()
 		setBillingDetails(data.address)
+		orderSummary.submit()
 	},
 })
 
@@ -224,84 +219,49 @@ const orderSummary = createResource({
 const billingDetails = reactive({})
 
 const setBillingDetails = (data) => {
-	billingDetails.billing_name = data.billing_name || ''
+	billingDetails.billing_name = data?.billing_name || ''
-	billingDetails.address_line1 = data.address_line1 || ''
+	billingDetails.address_line1 = data?.address_line1 || ''
-	billingDetails.address_line2 = data.address_line2 || ''
+	billingDetails.address_line2 = data?.address_line2 || ''
-	billingDetails.city = data.city || ''
+	billingDetails.city = data?.city || ''
-	billingDetails.state = data.state || ''
+	billingDetails.state = data?.state || ''
-	billingDetails.country = data.country || ''
+	billingDetails.country = data?.country || ''
-	billingDetails.pincode = data.pincode || ''
+	billingDetails.pincode = data?.pincode || ''
-	billingDetails.phone = data.phone || ''
+	billingDetails.phone = data?.phone || ''
-	billingDetails.source = data.source || ''
+	billingDetails.source = data?.source || ''
-	billingDetails.gstin = data.gstin || ''
+	billingDetails.gstin = data?.gstin || ''
-	billingDetails.pan = data.pan || ''
+	billingDetails.pan = data?.pan || ''
 }
 
-const paymentOptions = createResource({
+const paymentLink = createResource({
-	url: 'lms.lms.utils.get_payment_options',
+	url: 'lms.lms.payments.get_payment_link',
 	makeParams(values) {
 		return {
 			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
 			docname: props.name,
-			phone: billingDetails.phone,
+			title: orderSummary.data.title,
-			country: billingDetails.country,
+			amount: orderSummary.data.original_amount,
+			total_amount: orderSummary.data.amount,
+			currency: orderSummary.data.currency,
+			address: billingDetails,
 		}
 	},
 })
 
 const generatePaymentLink = () => {
-	paymentOptions.submit(
+	paymentLink.submit(
 		{},
 		{
-			validate(params) {
+			validate() {
+				if (!billingDetails.source) {
+					return __('Please let us know where you heard about us from.')
+				}
 				return validateAddress()
 			},
 			onSuccess(data) {
-				data.handler = (response) => {
+				window.location.href = data
-					let doctype = props.type == 'course' ? 'LMS Course' : 'LMS Batch'
-					let docname = props.name
-					handleSuccess(response, doctype, docname, data.order_id)
-				}
-				let rzp1 = new Razorpay(data)
-				rzp1.open()
 			},
 			onError(err) {
-				showError(err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
-			},
-		}
-	)
-}
-
-const paymentResource = createResource({
-	url: 'lms.lms.utils.verify_payment',
-	makeParams(values) {
-		return {
-			response: values.response,
-			doctype: props.type == 'course' ? 'LMS Course' : 'LMS Batch',
-			docname: props.name,
-			address: billingDetails,
-			order_id: values.orderId,
-		}
-	},
-})
-
-const handleSuccess = (response, doctype, docname, orderId) => {
-	paymentResource.submit(
-		{
-			response: response,
-			orderId: orderId,
-		},
-		{
-			onSuccess(data) {
-				createToast({
-					title: 'Success',
-					text: 'Payment Successful',
-					icon: 'check',
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
-				})
-				setTimeout(() => {
-					window.location.href = data
-				}, 3000)
 			},
 		}
 	)
@@ -340,6 +300,7 @@ const validateAddress = () => {
 		'Assam',
 		'Bihar',
 		'Chhattisgarh',
+		'Delhi',
 		'Goa',
 		'Gujarat',
 		'Haryana',

frontend/src/pages/CertifiedParticipants.vue

@@ -0,0 +1,93 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<div>
+			<FormControl
+				type="text"
+				placeholder="Search"
+				v-model="searchQuery"
+				@input="participants.reload()"
+				class="w-40"
+			>
+				<template #prefix>
+					<Search class="w-4 stroke-1.5 text-gray-600" name="search" />
+				</template>
+			</FormControl>
+		</div>
+	</header>
+
+	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 m-5">
+		<div
+			v-if="participants.data?.length"
+			v-for="participant in participantsList"
+		>
+			<router-link
+				:to="{
+					name: 'Profile',
+					params: { username: participant.username },
+				}"
+			>
+				<div class="flex shadow rounded-md h-full p-2">
+					<UserAvatar :user="participant" size="3xl" class="mr-2" />
+					<div>
+						<router-link
+							:to="{
+								name: 'Profile',
+								params: { username: participant.username },
+							}"
+						>
+							<div class="text-lg font-semibold mb-2">
+								{{ participant.full_name }}
+							</div>
+						</router-link>
+						<div class="leading-5" v-for="course in participant.courses">
+							{{ course }}
+						</div>
+					</div>
+				</div>
+			</router-link>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Breadcrumbs, FormControl, createResource } from 'frappe-ui'
+import { ref, computed } from 'vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { Search } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'
+
+const searchQuery = ref('')
+
+const participants = createResource({
+	url: 'lms.lms.api.get_certified_participants',
+	method: 'GET',
+	cache: 'certified-participants',
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	return [{ label: 'Certified Participants', to: '/certified-participants' }]
+})
+
+const pageMeta = computed(() => {
+	return {
+		title: 'Certified Participants',
+		description: 'All participants that have been certified.',
+	}
+})
+
+const participantsList = computed(() => {
+	if (searchQuery.value) {
+		return participants.data.filter((participant) => {
+			return participant.full_name
+				.toLowerCase()
+				.includes(searchQuery.value.toLowerCase())
+		})
+	}
+	return participants.data
+})
+
+updateDocumentTitle(pageMeta)
+</script>

frontend/src/pages/CourseDetail.vue

@@ -16,16 +16,16 @@
 					</div>
 					<div class="flex items-center">
 						<Tooltip
-							v-if="course.data.avg_rating"
+							v-if="course.data.rating"
 							:text="__('Average Rating')"
 							class="flex items-center"
 						>
 							<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
 							<span class="ml-1">
-								{{ course.data.avg_rating }}
+								{{ course.data.rating }}
 							</span>
 						</Tooltip>
-						<span v-if="course.data.avg_rating" class="mx-3">&middot;</span>
+						<span v-if="course.data.rating" class="mx-3">&middot;</span>
 						<Tooltip
 							v-if="course.data.enrollment_count"
 							:text="__('Enrolled Students')"
@@ -41,7 +41,7 @@
 						>
 						<div class="flex items-center">
 							<span
-								class="mr-1"
+								class="h-6 mr-1"
 								:class="{
 									'avatar-group overlap': course.data.instructors.length > 1,
 								}"
@@ -51,17 +51,7 @@
 									:user="instructor"
 								/>
 							</span>
-							<span v-if="course.data.instructors.length == 1">
+							<CourseInstructors :instructors="course.data.instructors" />
-								{{ course.data.instructors[0].full_name }}
-							</span>
-							<span v-if="course.data.instructors.length == 2">
-								{{ course.data.instructors[0].first_name }} and
-								{{ course.data.instructors[1].first_name }}
-							</span>
-							<span v-if="course.data.instructors.length > 2">
-								{{ course.data.instructors[0].first_name }} and
-								{{ course.data.instructors.length - 1 }} others
-							</span>
 						</div>
 					</div>
 					<div class="flex mt-3 mb-4 w-fit">
@@ -77,19 +67,18 @@
 					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.description"
-						class="course-description"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
 					></div>
 					<div class="mt-10">
 						<CourseOutline
+							:title="__('Course Outline')"
 							:courseName="course.data.name"
 							:showOutline="true"
-							title="Course Outline"
 						/>
 					</div>
 					<CourseReviews
-						v-if="course.data.avg_rating"
 						:courseName="course.data.name"
-						:avg_rating="course.data.avg_rating"
+						:avg_rating="course.data.rating"
 						:membership="course.data.membership"
 					/>
 				</div>
@@ -109,6 +98,7 @@ import CourseOutline from '@/components/CourseOutline.vue'
 import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { updateDocumentTitle } from '@/utils'
+import CourseInstructors from '@/components/CourseInstructors.vue'
 
 const props = defineProps({
 	courseName: {
@@ -130,7 +120,7 @@ const breadcrumbs = computed(() => {
 	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
 	items.push({
 		label: course?.data?.title,
-		route: { name: 'CourseDetail', params: { course: course?.data?.name } },
+		route: { name: 'CourseDetail', params: { courseName: course?.data?.name } },
 	})
 	return items
 })
@@ -145,20 +135,6 @@ const pageMeta = computed(() => {
 updateDocumentTitle(pageMeta)
 </script>
 <style>
-.course-description p {
-	margin-bottom: 1rem;
-	line-height: 1.7;
-}
-.course-description li {
-	line-height: 1.7;
-}
-
-.course-description ol {
-	list-style: auto;
-	margin: revert;
-	padding: revert;
-}
-
 .avatar-group {
 	display: inline-flex;
 	align-items: center;

frontend/src/pages/CourseForm.vue

@@ -0,0 +1,573 @@
+<template>
+	<div class="">
+		<div class="grid md:grid-cols-[70%,30%] h-full">
+			<div>
+				<header
+					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+				>
+					<Breadcrumbs class="h-7" :items="breadcrumbs" />
+					<div class="flex items-center mt-3 md:mt-0">
+						<Button v-if="courseResource.data?.name" @click="trashCourse()">
+							<template #prefix>
+								<Trash2 class="w-4 h-4 stroke-1.5" />
+							</template>
+							<span>
+								{{ __('Delete') }}
+							</span>
+						</Button>
+						<Button variant="solid" @click="submitCourse()" class="ml-2">
+							<span>
+								{{ __('Save') }}
+							</span>
+						</Button>
+					</div>
+				</header>
+				<div class="mt-5 mb-10">
+					<div class="container mb-5">
+						<div class="text-lg font-semibold mb-4">
+							{{ __('Details') }}
+						</div>
+						<FormControl
+							v-model="course.title"
+							:label="__('Title')"
+							class="mb-4"
+							:required="true"
+						/>
+						<FormControl
+							v-model="course.short_introduction"
+							:label="__('Short Introduction')"
+							:placeholder="
+								__(
+									'A one line introduction to the course that appears on the course card'
+								)
+							"
+							class="mb-4"
+							:required="true"
+						/>
+						<div class="mb-4">
+							<div class="mb-1.5 text-sm text-gray-600">
+								{{ __('Course Description') }}
+								<span class="text-red-500">*</span>
+							</div>
+							<TextEditor
+								:content="course.description"
+								@change="(val) => (course.description = val)"
+								:editable="true"
+								:fixedMenu="true"
+								editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+							/>
+						</div>
+						<div class="mb-4">
+							<div class="text-xs text-gray-600 mb-2">
+								{{ __('Course Image') }}
+								<span class="text-red-500">*</span>
+							</div>
+							<FileUploader
+								v-if="!course.course_image"
+								:fileTypes="['image/*']"
+								:validateFile="validateFile"
+								@success="(file) => saveImage(file)"
+							>
+								<template
+									v-slot="{ file, progress, uploading, openFileSelector }"
+								>
+									<div class="flex items-center">
+										<div class="border rounded-md w-fit py-5 px-20">
+											<Image class="size-5 stroke-1 text-gray-700" />
+										</div>
+										<div class="ml-4">
+											<Button @click="openFileSelector">
+												{{ __('Upload') }}
+											</Button>
+											<div class="mt-2 text-gray-600 text-sm">
+												{{
+													__('Appears on the course card in the course list')
+												}}
+											</div>
+										</div>
+									</div>
+								</template>
+							</FileUploader>
+							<div v-else class="mb-4">
+								<div class="flex items-center">
+									<img
+										:src="course.course_image.file_url"
+										class="border rounded-md w-40"
+									/>
+									<div class="ml-4">
+										<Button @click="removeImage()">
+											{{ __('Remove') }}
+										</Button>
+										<div class="mt-2 text-gray-600 text-sm">
+											{{ __('Appears on the course card in the course list') }}
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<FormControl
+							v-model="course.video_link"
+							:label="__('Preview Video')"
+							:placeholder="
+								__(
+									'Paste the youtube link of a short video introducing the course'
+								)
+							"
+							class="mb-4"
+						/>
+						<div class="mb-4">
+							<div class="mb-1.5 text-xs text-gray-600">
+								{{ __('Tags') }}
+							</div>
+							<div class="flex items-center">
+								<div
+									v-if="course.tags"
+									v-for="tag in course.tags?.split(', ')"
+									class="flex items-center bg-gray-100 p-2 rounded-md mr-2"
+								>
+									{{ tag }}
+									<X
+										class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
+										@click="removeTag(tag)"
+									/>
+								</div>
+								<FormControl
+									v-model="newTag"
+									:placeholder="__('Keywords for the course')"
+									class="w-52"
+									@keyup.enter="updateTags()"
+									id="tags"
+								/>
+							</div>
+						</div>
+						<div class="w-1/2 mb-4">
+							<Link
+								doctype="LMS Category"
+								v-model="course.category"
+								:label="__('Category')"
+								:onCreate="(value, close) => openSettings(close)"
+							/>
+						</div>
+						<MultiSelect
+							v-model="instructors"
+							doctype="User"
+							:label="__('Instructors')"
+							:filters="{ ignore_user_type: 1 }"
+							:required="true"
+						/>
+					</div>
+					<div class="container border-t">
+						<div class="text-lg font-semibold mt-5 mb-4">
+							{{ __('Settings') }}
+						</div>
+						<div class="grid grid-cols-3 gap-10 mb-4">
+							<div
+								v-if="user.data?.is_moderator"
+								class="flex flex-col space-y-4"
+							>
+								<FormControl
+									type="checkbox"
+									v-model="course.published"
+									:label="__('Published')"
+								/>
+								<FormControl
+									v-model="course.published_on"
+									:label="__('Published On')"
+									type="date"
+									class="mb-5"
+								/>
+							</div>
+							<div class="flex flex-col space-y-3">
+								<FormControl
+									type="checkbox"
+									v-model="course.upcoming"
+									:label="__('Upcoming')"
+								/>
+								<FormControl
+									type="checkbox"
+									v-model="course.featured"
+									:label="__('Featured')"
+								/>
+							</div>
+							<div class="flex flex-col space-y-3">
+								<FormControl
+									type="checkbox"
+									v-model="course.disable_self_learning"
+									:label="__('Disable Self Enrollment')"
+								/>
+								<FormControl
+									type="checkbox"
+									v-model="course.enable_certification"
+									:label="__('Completion Certificate')"
+								/>
+							</div>
+						</div>
+					</div>
+					<div class="container border-t">
+						<div class="text-lg font-semibold mt-5 mb-4">
+							{{ __('Pricing') }}
+						</div>
+						<div class="mb-4">
+							<FormControl
+								type="checkbox"
+								v-model="course.paid_course"
+								:label="__('Paid Course')"
+							/>
+						</div>
+						<FormControl
+							v-model="course.course_price"
+							:label="__('Course Price')"
+							class="mb-4"
+						/>
+						<Link
+							doctype="Currency"
+							v-model="course.currency"
+							:filters="{ enabled: 1 }"
+							:label="__('Currency')"
+						/>
+					</div>
+				</div>
+			</div>
+			<div class="border-l pt-5">
+				<CourseOutline
+					v-if="courseResource.data"
+					:courseName="courseResource.data.name"
+					:title="course.title"
+					:allowEdit="true"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	TextEditor,
+	Button,
+	createResource,
+	FormControl,
+	FileUploader,
+} from 'frappe-ui'
+import {
+	inject,
+	onMounted,
+	onBeforeUnmount,
+	computed,
+	ref,
+	reactive,
+	watch,
+	getCurrentInstance,
+} from 'vue'
+import { showToast, updateDocumentTitle } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
+import { Image, Trash2, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import CourseOutline from '@/components/CourseOutline.vue'
+import MultiSelect from '@/components/Controls/MultiSelect.vue'
+import { capture } from '@/telemetry'
+import { useSettings } from '@/stores/settings'
+
+const user = inject('$user')
+const newTag = ref('')
+const router = useRouter()
+const instructors = ref([])
+const settingsStore = useSettings()
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
+
+const props = defineProps({
+	courseName: {
+		type: String,
+	},
+})
+
+const course = reactive({
+	title: '',
+	short_introduction: '',
+	description: '',
+	video_link: '',
+	course_image: null,
+	tags: '',
+	published: false,
+	published_on: '',
+	featured: false,
+	upcoming: false,
+	disable_self_learning: false,
+	enable_certification: false,
+	paid_course: false,
+	course_price: '',
+	currency: '',
+})
+
+onMounted(() => {
+	if (
+		props.courseName == 'new' &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+
+	if (props.courseName !== 'new') {
+		courseResource.reload()
+	} else {
+		capture('course_form_opened')
+	}
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		submitCourse()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const courseCreationResource = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Course',
+				image: course.course_image?.file_url || '',
+				instructors: instructors.value.map((instructor) => ({
+					instructor: instructor,
+				})),
+				...values,
+			},
+		}
+	},
+})
+
+const courseEditResource = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Course',
+			name: values.course,
+			fieldname: {
+				image: course.course_image?.file_url || '',
+				instructors: instructors.value.map((instructor) => ({
+					instructor: instructor,
+				})),
+				...course,
+			},
+		}
+	},
+})
+
+const courseResource = createResource({
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Course',
+			name: props.courseName,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		Object.keys(data).forEach((key) => {
+			if (key == 'instructors') {
+				instructors.value = []
+				data.instructors.forEach((instructor) => {
+					instructors.value.push(instructor.instructor)
+				})
+			} else if (Object.hasOwn(course, key)) course[key] = data[key]
+		})
+		let checkboxes = [
+			'published',
+			'upcoming',
+			'disable_self_learning',
+			'paid_course',
+			'featured',
+			'enable_certification',
+		]
+		for (let idx in checkboxes) {
+			let key = checkboxes[idx]
+			course[key] = course[key] ? true : false
+		}
+
+		if (data.image) imageResource.reload({ image: data.image })
+		check_permission()
+	},
+})
+
+const imageResource = createResource({
+	url: 'lms.lms.api.get_file_info',
+	makeParams(values) {
+		return {
+			file_url: values.image,
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		course.course_image = data
+	},
+})
+
+const submitCourse = () => {
+	if (courseResource.data) {
+		courseEditResource.submit(
+			{
+				course: courseResource.data.name,
+			},
+			{
+				onSuccess() {
+					showToast('Success', 'Course updated successfully', 'check')
+				},
+				onError(err) {
+					showToast('Error', err.messages?.[0] || err, 'x')
+				},
+			}
+		)
+	} else {
+		courseCreationResource.submit(course, {
+			onSuccess(data) {
+				capture('course_created')
+				showToast('Success', 'Course created successfully', 'check')
+				if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+					settingsStore.onboardingDetails.reload()
+				}
+				router.push({
+					name: 'CourseForm',
+					params: { courseName: data.name },
+				})
+			},
+			onError(err) {
+				showToast('Error', err.messages?.[0] || err, 'x')
+			},
+		})
+	}
+}
+
+const deleteCourse = createResource({
+	url: 'lms.lms.api.delete_course',
+	makeParams(values) {
+		return {
+			course: props.courseName,
+		}
+	},
+	onSuccess() {
+		showToast(__('Success'), __('Course deleted successfully'), 'check')
+		router.push({ name: 'Courses' })
+	},
+})
+
+const trashCourse = () => {
+	$dialog({
+		title: __('Delete Course'),
+		message: __(
+			'Deleting the course will also delete all its chapters and lessons. Are you sure you want to delete this course?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteCourse.submit()
+					close()
+				},
+			},
+		],
+	})
+}
+
+watch(
+	() => props.courseName !== 'new',
+	(newVal) => {
+		if (newVal) {
+			courseResource.reload()
+		}
+	}
+)
+
+const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
+		return __('Only image file is allowed.')
+	}
+}
+
+const updateTags = () => {
+	if (newTag.value) {
+		course.tags = course.tags ? `${course.tags}, ${newTag.value}` : newTag.value
+		newTag.value = ''
+	}
+}
+
+const removeTag = (tag) => {
+	course.tags = course.tags
+		?.split(', ')
+		.filter((t) => t !== tag)
+		.join(', ')
+	newTag.value = ''
+}
+
+const saveImage = (file) => {
+	course.course_image = file
+}
+
+const removeImage = () => {
+	course.course_image = null
+}
+
+const openSettings = (close) => {
+	close()
+	settingsStore.activeTab = 'Categories'
+	settingsStore.isSettingsOpen = true
+}
+
+const check_permission = () => {
+	let user_is_instructor = false
+	if (user.data?.is_moderator) return
+
+	instructors.value.forEach((instructor) => {
+		if (!user_is_instructor && instructor == user.data?.name) {
+			user_is_instructor = true
+		}
+	})
+
+	if (!user_is_instructor) {
+		router.push({ name: 'Courses' })
+	}
+}
+
+const breadcrumbs = computed(() => {
+	let crumbs = [
+		{
+			label: 'Courses',
+			route: { name: 'Courses' },
+		},
+	]
+	if (courseResource.data) {
+		crumbs.push({
+			label: course.title,
+			route: { name: 'CourseDetail', params: { courseName: props.courseName } },
+		})
+	}
+	crumbs.push({
+		label: props.courseName == 'new' ? 'New Course' : 'Edit Course',
+		route: { name: 'CourseForm', params: { courseName: props.courseName } },
+	})
+	return crumbs
+})
+
+const pageMeta = computed(() => {
+	return {
+		title: 'Create a Course',
+		description: 'Create or edit a course for your learning system.',
+	}
+})
+
+updateDocumentTitle(pageMeta)
+</script>

frontend/src/pages/Courses.vue

@@ -7,36 +7,52 @@
 				class="h-7"
 				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
 			/>
-			<div class="flex">
+			<div class="flex space-x-2 justify-end">
+				<div class="w-40 md:w-44">
+					<FormControl
+						v-if="categories.data?.length"
+						type="select"
+						v-model="currentCategory"
+						:options="categories.data"
+						:placeholder="__('Category')"
+					/>
+				</div>
+				<div class="w-28 md:w-36">
+					<FormControl
+						type="text"
+						placeholder="Search"
+						v-model="searchQuery"
+						@input="courses.reload()"
+					>
+						<template #prefix>
+							<Search class="w-4 h-4 stroke-1.5 text-gray-600" name="search" />
+						</template>
+					</FormControl>
+				</div>
 				<router-link
+					v-if="user.data?.is_moderator || user.data?.is_instructor"
 					:to="{
-						name: 'CreateCourse',
+						name: 'CourseForm',
 						params: {
 							courseName: 'new',
 						},
 					}"
 				>
-					<Button v-if="user.data?.is_moderator" variant="solid">
+					<Button variant="solid">
 						<template #prefix>
 							<Plus class="h-4 w-4" />
 						</template>
-						{{ __('New Course') }}
+						{{ __('New') }}
 					</Button>
 				</router-link>
 			</div>
 		</header>
 		<div class="">
-			<div
-				v-if="courses.data.length == 0 && courses.list.loading"
-				class="p-5 text-base text-gray-700"
-			>
-				{{ __('Loading Courses...') }}
-			</div>
 			<Tabs
-				v-else
+				v-if="hasCourses"
 				v-model="tabIndex"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
-				:tabs="tabs"
+				:tabs="makeTabs"
 			>
 				<template #tab="{ tab, selected }">
 					<div>
@@ -65,8 +81,8 @@
 											name: 'Lesson',
 											params: {
 												courseName: course.name,
-												chapterNumber: course.current_lesson.split('.')[0],
+												chapterNumber: course.current_lesson.split('-')[0],
-												lessonNumber: course.current_lesson.split('.')[1],
+												lessonNumber: course.current_lesson.split('-')[1],
 											},
 									  }
 									: course.membership
@@ -87,80 +103,206 @@
 							<CourseCard :course="course" />
 						</router-link>
 					</div>
-					<div
+					<div v-else class="p-5 italic text-gray-500">
-						v-else
+						{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
-						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
-					>
-						<div class="flex flex-col items-center justify-center mt-4">
-							<div>
-								{{ __('No {0} courses found').format(tab.label.toLowerCase()) }}
-							</div>
-						</div>
 					</div>
 				</template>
 			</Tabs>
+			<div
+				v-else-if="
+					!courses.loading &&
+					(user.data?.is_moderator || user.data?.is_instructor)
+				"
+				class="grid grid-cols-3 p-5"
+			>
+				<router-link
+					:to="{
+						name: 'CourseForm',
+						params: {
+							courseName: 'new',
+						},
+					}"
+				>
+					<div class="bg-gray-50 py-32 px-5 rounded-md">
+						<div class="flex flex-col items-center text-center space-y-2">
+							<Plus
+								class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+							/>
+							<div class="font-medium">
+								{{ __('Create a Course') }}
+							</div>
+							<span class="text-gray-700 text-sm leading-4">
+								{{ __('You can add chapters and lessons to it.') }}
+							</span>
+						</div>
+					</div>
+				</router-link>
+			</div>
+			<div
+				v-else-if="!courses.loading && !hasCourses"
+				class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+			>
+				<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+				<div class="text-xl font-medium">
+					{{ __('No courses found') }}
+				</div>
+				<div class="leading-5">
+					{{
+						__(
+							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+						)
+					}}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { createListResource, Breadcrumbs, Tabs, Badge, Button } from 'frappe-ui'
+import {
+	Badge,
+	Breadcrumbs,
+	Button,
+	call,
+	createResource,
+	FormControl,
+	Tabs,
+} from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
-import { Plus } from 'lucide-vue-next'
+import { BookOpen, Plus, Search } from 'lucide-vue-next'
-import { ref, computed, inject } from 'vue'
+import { ref, computed, inject, onMounted, watch } from 'vue'
 import { updateDocumentTitle } from '@/utils'
+import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
-const courses = createListResource({
+const searchQuery = ref('')
-	type: 'list',
+const currentCategory = ref(null)
-	doctype: 'LMS Course',
+const hasCourses = ref(false)
-	cache: ['courses', user?.data?.email],
+const router = useRouter()
+const settings = useSettings()
+
+onMounted(() => {
+	checkLearningPath()
+	let queries = new URLSearchParams(location.search)
+	if (queries.has('category')) {
+		currentCategory.value = queries.get('category')
+	}
+})
+
+const checkLearningPath = () => {
+	if (
+		settings.learningPaths.data &&
+		(!user.data?.is_moderator || !user.data?.is_instructor)
+	) {
+		router.push({ name: 'Programs' })
+	}
+}
+
+const courses = createResource({
 	url: 'lms.lms.utils.get_courses',
+	cache: ['courses', user.data?.email],
 	auto: true,
 })
 
 const tabIndex = ref(0)
-const tabs = [
+let tabs
-	{
-		label: 'All',
-		courses: computed(() => courses.data?.live || []),
-		count: computed(() => courses.data?.live?.length),
-	},
-	{
-		label: 'Upcoming',
-		courses: computed(() => courses.data?.upcoming),
-		count: computed(() => courses.data?.upcoming?.length),
-	},
-]
 
-if (user.data) {
+const makeTabs = computed(() => {
+	tabs = []
+	addToTabs('Live')
+	addToTabs('New')
+	addToTabs('Upcoming')
+
+	if (user.data) {
+		addToTabs('Enrolled')
+
+		if (
+			user.data.is_moderator ||
+			user.data.is_instructor ||
+			courses.data?.created?.length
+		) {
+			addToTabs('Created')
+		}
+
+		if (user.data.is_moderator) {
+			addToTabs('Under Review')
+		}
+	}
+	return tabs
+})
+
+const addToTabs = (label) => {
+	let courses = getCourses(label.toLowerCase().split(' ').join('_'))
 	tabs.push({
-		label: 'Enrolled',
+		label,
-		courses: computed(() => courses.data?.enrolled),
+		courses: computed(() => courses),
-		count: computed(() => courses.data?.enrolled?.length),
+		count: computed(() => courses.length),
 	})
-
-	if (
-		user.data.is_moderator ||
-		user.data.is_instructor ||
-		courses.data?.created?.length
-	) {
-		tabs.push({
-			label: 'Created',
-			courses: computed(() => courses.data?.created),
-			count: computed(() => courses.data?.created?.length),
-		})
-	}
-
-	if (user.data.is_moderator) {
-		tabs.push({
-			label: 'Under Review',
-			courses: computed(() => courses.data?.under_review),
-			count: computed(() => courses.data?.under_review?.length),
-		})
-	}
 }
 
+const getCourses = (type) => {
+	let courseList = courses.data[type]
+	if (searchQuery.value) {
+		let query = searchQuery.value.toLowerCase()
+		courseList = courseList.filter(
+			(course) =>
+				course.title.toLowerCase().includes(query) ||
+				course.short_introduction.toLowerCase().includes(query) ||
+				course.tags.filter((tag) => tag.toLowerCase().includes(query)).length
+		)
+	}
+	if (currentCategory.value && currentCategory.value != '') {
+		courseList = courseList.filter(
+			(course) => course.category == currentCategory.value
+		)
+	}
+	return courseList
+}
+
+const categories = createResource({
+	url: 'lms.lms.api.get_categories',
+	makeParams() {
+		return {
+			doctype: 'LMS Course',
+			filters: {
+				published: 1,
+			},
+		}
+	},
+	cache: ['courseCategories'],
+	auto: true,
+	transform(data) {
+		data.unshift({
+			label: '',
+			value: null,
+		})
+	},
+})
+
+watch(courses, () => {
+	if (courses.data) {
+		Object.keys(courses.data).forEach((section) => {
+			if (courses.data[section].length) {
+				hasCourses.value = true
+			}
+		})
+	}
+})
+
+watch(
+	() => currentCategory.value,
+	() => {
+		let queries = new URLSearchParams(location.search)
+		if (currentCategory.value) {
+			queries.set('category', currentCategory.value)
+		} else {
+			queries.delete('category')
+		}
+		history.pushState(null, '', `${location.pathname}?${queries.toString()}`)
+	}
+)
+
 const pageMeta = computed(() => {
 	return {
 		title: 'Courses',

frontend/src/pages/CreateCourse.vue

@@ -1,414 +0,0 @@
-<template>
-	<div class="">
-		<div class="grid md:grid-cols-[70%,30%] h-full">
-			<div>
-				<header
-					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
-				>
-					<Breadcrumbs class="h-7" :items="breadcrumbs" />
-					<div class="flex items-center mt-3 md:mt-0">
-						<router-link
-							v-if="courseResource.data"
-							:to="{
-								name: 'CourseDetail',
-								params: { courseName: courseResource.data.name },
-							}"
-						>
-							<Button>
-								<span>
-									{{ __('View Course') }}
-								</span>
-							</Button>
-						</router-link>
-						<Button variant="solid" @click="submitCourse()" class="ml-2">
-							<span>
-								{{ __('Save') }}
-							</span>
-						</Button>
-					</div>
-				</header>
-				<div class="mt-5 mb-10">
-					<div class="container mb-5">
-						<div class="text-lg font-semibold mb-4">
-							{{ __('Details') }}
-						</div>
-						<FormControl
-							v-model="course.title"
-							:label="__('Title')"
-							class="mb-4"
-						/>
-						<FormControl
-							v-model="course.short_introduction"
-							:label="__('Short Introduction')"
-							class="mb-4"
-						/>
-						<div class="mb-4">
-							<div class="mb-1.5 text-sm text-gray-700">
-								{{ __('Course Description') }}
-							</div>
-							<TextEditor
-								:content="course.description"
-								@change="(val) => (course.description = val)"
-								:editable="true"
-								:fixedMenu="true"
-								editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
-							/>
-						</div>
-						<FileUploader
-							v-if="!course.course_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 an image'
-										}}
-									</Button>
-								</div>
-							</template>
-						</FileUploader>
-						<div v-else class="mb-4">
-							<div class="text-xs text-gray-600 mb-1">
-								{{ __('Course Image') }}
-							</div>
-							<div class="flex items-center">
-								<div class="border rounded-md p-2 mr-2">
-									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
-								</div>
-								<div class="flex flex-col">
-									<span>
-										{{ course.course_image.file_name }}
-									</span>
-									<span class="text-sm text-gray-500 mt-1">
-										{{ getFileSize(course.course_image.file_size) }}
-									</span>
-								</div>
-								<X
-									@click="removeImage()"
-									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-								/>
-							</div>
-						</div>
-						<FormControl
-							v-model="course.video_link"
-							:label="__('Preview Video')"
-							class="mb-4"
-						/>
-						<div>
-							<div class="mb-1.5 text-xs text-gray-600">
-								{{ __('Tags') }}
-							</div>
-							<div class="flex items-center">
-								<div
-									v-for="tag in course.tags.split(', ')"
-									class="flex items-center bg-gray-100 p-2 rounded-md mr-2"
-								>
-									{{ tag }}
-									<X
-										class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
-										@click="removeTag(tag)"
-									/>
-								</div>
-								<FormControl v-model="newTag" @keyup.enter="updateTags()" />
-							</div>
-						</div>
-					</div>
-					<div class="container border-t">
-						<div class="text-lg font-semibold mt-5 mb-4">
-							{{ __('Settings') }}
-						</div>
-						<div class="flex items-center justify-between mb-5">
-							<FormControl
-								type="checkbox"
-								v-model="course.published"
-								:label="__('Published')"
-							/>
-							<FormControl
-								type="checkbox"
-								v-model="course.upcoming"
-								:label="__('Upcoming')"
-							/>
-							<FormControl
-								type="checkbox"
-								v-model="course.disable_self_learning"
-								:label="__('Disable Self Enrollment')"
-							/>
-						</div>
-					</div>
-					<div class="container border-t">
-						<div class="text-lg font-semibold mt-5 mb-4">
-							{{ __('Pricing') }}
-						</div>
-						<div class="mb-4">
-							<FormControl
-								type="checkbox"
-								v-model="course.paid_course"
-								:label="__('Paid Course')"
-							/>
-						</div>
-						<FormControl
-							v-model="course.course_price"
-							:label="__('Course Price')"
-							class="mb-4"
-						/>
-						<Link
-							doctype="Currency"
-							v-model="course.currency"
-							:filters="{ enabled: 1 }"
-							:label="__('Currency')"
-						/>
-					</div>
-				</div>
-			</div>
-			<div class="border-l px-5 pt-5">
-				<!-- <CreateOutline v-if="courseResource.doc" :course="courseResource.doc"/> -->
-				<CourseOutline
-					v-if="courseResource.data"
-					:courseName="courseResource.data.name"
-					:title="course.title"
-					:allowEdit="true"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import {
-	Breadcrumbs,
-	TextEditor,
-	Button,
-	createResource,
-	createDocumentResource,
-	FormControl,
-	FileUploader,
-} from 'frappe-ui'
-import { inject, onMounted, computed, ref, reactive, watch } from 'vue'
-import { convertToTitleCase, showToast, getFileSize } from '../utils'
-import Link from '@/components/Controls/Link.vue'
-import { FileText, X } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
-import CourseOutline from '@/components/CourseOutline.vue'
-
-const user = inject('$user')
-const newTag = ref('')
-const router = useRouter()
-
-const props = defineProps({
-	courseName: {
-		type: String,
-	},
-})
-
-const course = reactive({
-	title: '',
-	short_introduction: '',
-	description: '',
-	video_link: '',
-	course_image: null,
-	tags: '',
-	published: false,
-	upcoming: false,
-	disable_self_learning: false,
-	paid_course: false,
-	course_price: '',
-	currency: '',
-})
-
-onMounted(() => {
-	if (!user.data?.is_moderator || !user.data?.is_instructor) {
-		router.push({ name: 'Courses' })
-	}
-	if (props.courseName !== 'new') {
-		courseResource.reload()
-	}
-})
-
-const courseCreationResource = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Course',
-				image: course.course_image.file_url,
-				...values,
-			},
-		}
-	},
-})
-
-const courseEditResource = createResource({
-	url: 'frappe.client.set_value',
-	auto: false,
-	makeParams(values) {
-		return {
-			doctype: 'LMS Course',
-			name: values.course,
-			fieldname: {
-				image: course.course_image.file_url,
-				...course,
-			},
-		}
-	},
-})
-
-const courseResource = createResource({
-	url: 'frappe.client.get',
-	makeParams(values) {
-		return {
-			doctype: 'LMS Course',
-			name: props.courseName,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		Object.keys(data).forEach((key) => {
-			if (Object.hasOwn(course, key)) course[key] = data[key]
-		})
-		let checkboxes = [
-			'published',
-			'upcoming',
-			'disable_self_learning',
-			'paid_course',
-		]
-		for (let idx in checkboxes) {
-			let key = checkboxes[idx]
-			course[key] = course[key] ? true : false
-		}
-
-		if (data.image) imageResource.reload({ image: data.image })
-	},
-})
-
-const imageResource = createResource({
-	url: 'lms.lms.api.get_file_info',
-	makeParams(values) {
-		return {
-			file_url: values.image,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		course.course_image = data
-	},
-})
-
-const getTags = computed(() => {
-	return courseResource.doc?.tags
-		? courseResource.doc.tags.split(', ')
-		: tags.value?.split(', ')
-})
-
-const submitCourse = () => {
-	if (courseResource.data) {
-		courseEditResource.submit(
-			{
-				course: courseResource.data.name,
-			},
-			{
-				onSuccess() {
-					showToast('Success', 'Course updated successfully', 'check')
-				},
-				onError(err) {
-					showToast('Error', err.messages?.[0] || err, 'x')
-				},
-			}
-		)
-	} else {
-		courseCreationResource.submit(course, {
-			onSuccess(data) {
-				showToast('Success', 'Course created successfully', 'check')
-				router.push({
-					name: 'CreateCourse',
-					params: { courseName: data.name },
-				})
-			},
-			onError(err) {
-				showToast(err)
-			},
-		})
-	}
-}
-
-const validateMandatoryFields = () => {
-	const mandatory_fields = [
-		'title',
-		'short_introduction',
-		'description',
-		'video_link',
-		'course_image',
-	]
-	for (const field of mandatory_fields) {
-		if (!course[field]) {
-			let fieldLabel = convertToTitleCase(field.split('_').join(' '))
-			return `${fieldLabel} is mandatory`
-		}
-	}
-	if (course.paid_course && (!course.course_price || !course.currency)) {
-		return 'Course price and currency are mandatory for paid courses'
-	}
-}
-
-watch(
-	() => props.courseName !== 'new',
-	(newVal) => {
-		if (newVal) {
-			courseResource.reload()
-		}
-	}
-)
-
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	}
-}
-
-const updateTags = () => {
-	if (newTag.value) {
-		course.tags = course.tags ? `${course.tags}, ${newTag.value}` : newTag.value
-		newTag.value = ''
-	}
-}
-
-const removeTag = (tag) => {
-	course.tags = course.tags
-		?.split(', ')
-		.filter((t) => t !== tag)
-		.join(', ')
-	newTag.value = ''
-}
-
-const saveImage = (file) => {
-	course.course_image = file
-}
-
-const removeImage = () => {
-	course.course_image = null
-}
-
-const breadcrumbs = computed(() => {
-	let crumbs = [
-		{
-			label: 'Courses',
-			route: { name: 'Courses' },
-		},
-	]
-	if (courseResource.data) {
-		crumbs.push({
-			label: course.title,
-			route: { name: 'CourseDetail', params: { courseName: props.courseName } },
-		})
-	}
-	crumbs.push({
-		label: props.courseName == 'new' ? 'New Course' : 'Edit Course',
-		route: { name: 'CreateCourse', params: { courseName: props.courseName } },
-	})
-	return crumbs
-})
-</script>

frontend/src/pages/JobCreation.vue

@@ -19,8 +19,13 @@
 							v-model="job.job_title"
 							:label="__('Title')"
 							class="mb-4"
+							:required="true"
+						/>
+						<FormControl
+							v-model="job.location"
+							:label="__('Location')"
+							:required="true"
 						/>
-						<FormControl v-model="job.location" :label="__('Location')" />
 					</div>
 					<div>
 						<FormControl
@@ -29,18 +34,21 @@
 							type="select"
 							:options="jobTypes"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="job.status"
 							:label="__('Status')"
 							type="select"
 							:options="jobStatuses"
+							:required="true"
 						/>
 					</div>
 				</div>
 				<div class="mt-4">
 					<label class="block text-gray-600 text-xs mb-1">
 						{{ __('Description') }}
+						<span class="text-red-500">*</span>
 					</label>
 					<TextEditor
 						:content="job.description"
@@ -61,10 +69,12 @@
 							v-model="job.company_name"
 							:label="__('Company Name')"
 							class="mb-4"
+							:required="true"
 						/>
 						<FormControl
 							v-model="job.company_website"
 							:label="__('Company Website')"
+							:required="true"
 						/>
 					</div>
 					<div>
@@ -72,9 +82,11 @@
 							v-model="job.company_email_address"
 							:label="__('Company Email Address')"
 							class="mb-4"
+							:required="true"
 						/>
 						<label class="block text-gray-600 text-xs mb-1 mt-4">
 							{{ __('Company Logo') }}
+							<span class="text-red-500">*</span>
 						</label>
 						<FileUploader
 							v-if="!job.image"
@@ -149,7 +161,7 @@ const newJob = createResource({
 		return {
 			doc: {
 				doctype: 'Job Opportunity',
-				company_logo: job.image.file_url,
+				company_logo: job.image?.file_url,
 				...job,
 			},
 		}

frontend/src/pages/JobDetail.vue

@@ -50,38 +50,91 @@
 				</Button>
 			</div>
 		</header>
-		<div v-if="job.data">
+		<div v-if="job.data" class="max-w-3xl mx-auto">
-			<div class="p-5 sm:p-5">
+			<div class="p-4">
-				<div class="flex mb-4">
+				<div class="space-y-5 mb-10">
-					<img
+					<div class="flex items-center">
-						:src="job.data.company_logo"
+						<img
-						class="w-16 h-16 rounded-lg object-contain mr-4"
+							:src="job.data.company_logo"
-						:alt="job.data.company_name"
+							class="w-16 h-16 rounded-lg object-contain mr-4"
-					/>
+							:alt="job.data.company_name"
-					<div>
+						/>
-						<div class="text-2xl font-semibold mb-2">
+						<div class="text-2xl font-semibold mb-4">
 							{{ job.data.job_title }}
 						</div>
-						<div>
+					</div>
-							{{ __('posted by') }}
+					<div>
-							<span class="font-medium">{{ job.data.company_name }}</span>
+						<div
-							{{ __('on') }}
+							class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
-							<span class="font-medium">{{
+						>
-								dayjs(job.data.creation).format('DD MMM YYYY')
+							<div class="flex items-center space-x-2">
-							}}</span>
+								<span class="p-4 bg-green-50 rounded-full">
-						</div>
+									<Building2 class="h-4 w-4 text-green-500" />
-						<div class="flex items-center mt-2">
+								</span>
-							<Badge :label="job.data.type" theme="green" size="lg" />
+								<div class="flex flex-col space-y-2">
-							<Badge
+									<span class="text-xs text-gray-600 font-medium uppercase">
-								:label="job.data.location"
+										{{ __('Organisation') }}
-								theme="gray"
+									</span>
-								size="lg"
+									<span class="text-sm font-semibold">
-								class="ml-4"
+										{{ job.data.company_name }}
+									</span>
+								</div>
+							</div>
+							<div class="flex items-center space-x-2">
+								<span class="p-4 bg-red-50 rounded-full">
+									<MapPin class="h-4 w-4 text-red-500" />
+								</span>
+								<div class="flex flex-col space-y-2">
+									<span class="text-xs text-gray-600 font-medium uppercase">
+										{{ __('Location') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ job.data.location }}
+									</span>
+								</div>
+							</div>
+							<div class="flex items-center space-x-2">
+								<span class="p-4 bg-yellow-50 rounded-full">
+									<ClipboardType class="h-4 w-4 text-yellow-500" />
+								</span>
+								<div class="flex flex-col space-y-2">
+									<span class="text-xs font-medium text-gray-600 uppercase">
+										{{ __('Category') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ job.data.type }}
+									</span>
+								</div>
+							</div>
+							<div class="flex items-center space-x-2">
+								<span class="p-4 bg-blue-50 rounded-full">
+									<CalendarDays class="h-4 w-4 text-blue-500" />
+								</span>
+								<div class="flex flex-col space-y-2">
+									<span class="text-xs text-gray-600 font-medium uppercase">
+										{{ __('Posted on') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ dayjs(job.data.creation).format('DD MMM YYYY') }}
+									</span>
+								</div>
+							</div>
+							<div
+								v-if="applicationCount.data"
+								class="flex items-center space-x-2"
 							>
-								<template #prefix>
+								<span class="p-4 bg-purple-50 rounded-full">
-									<MapPin class="h-4 w-4 stroke-1.5" />
+									<SquareUserRound class="h-4 w-4 text-purple-500" />
-								</template>
+								</span>
-							</Badge>
+								<div class="flex flex-col space-y-2">
+									<span class="text-xs text-gray-600 font-medium uppercase">
+										{{ __('Applications Received') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ applicationCount.data }}
+									</span>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -99,10 +152,19 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Button, Breadcrumbs, createResource } from 'frappe-ui'
+import { Button, Breadcrumbs, createResource } from 'frappe-ui'
-import { inject, ref, onMounted } from 'vue'
+import { inject, ref, computed } from 'vue'
-import { MapPin, SendHorizonal, Pencil } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'
 import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
+import {
+	MapPin,
+	SendHorizonal,
+	Pencil,
+	Building2,
+	CalendarDays,
+	ClipboardType,
+	SquareUserRound,
+} from 'lucide-vue-next'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -126,6 +188,7 @@ const job = createResource({
 		if (user.data?.name) {
 			jobApplication.submit()
 		}
+		applicationCount.submit()
 	},
 })
 
@@ -142,6 +205,18 @@ const jobApplication = createResource({
 	},
 })
 
+const applicationCount = createResource({
+	url: 'frappe.client.get_count',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Job Application',
+			filters: {
+				job: job.data?.name,
+			},
+		}
+	},
+})
+
 const openApplicationModal = () => {
 	showApplicationModal.value = true
 }
@@ -149,4 +224,13 @@ const openApplicationModal = () => {
 const redirectToLogin = (job) => {
 	window.location.href = `/login?redirect-to=/job-openings/${job}`
 }
+
+const pageMeta = computed(() => {
+	return {
+		title: job.data?.job_title,
+		description: job.data?.description,
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>