chore(release): Bumped to Version 2.11.0

fix: misc issues

.gitmodules

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

cypress.config.js

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

cypress/e2e/course_creation.cy.js

@@ -5,7 +5,7 @@ describe("Course Creation", () => {
 		cy.visit("/lms/courses");
 
 		// Create a course
-		cy.get("a").contains("New Course").click();
+		cy.get("header").children().last().children().last().click();
 		cy.wait(1000);
 		cy.url().should("include", "/courses/new/edit");
 
@@ -31,12 +31,35 @@ describe("Course Creation", () => {
 			.contains("Preview Video")
 			.type("https://www.youtube.com/embed/-LPmw2Znl2c");
 		cy.get("[id=tags]").type("Learning{enter}Frappe{enter}ERPNext{enter}");
-		cy.get(".search-input").click().type("frappe");
+		cy.get("label")
-		cy.wait(1000);
+			.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();
@@ -50,7 +73,7 @@ describe("Course Creation", () => {
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
-				cy.button("Add Chapter").click();
+				cy.button("Create").click();
 			});
 
 		// Add Lesson
@@ -61,21 +84,7 @@ describe("Course Creation", () => {
 		cy.wait(1000);
 
 		cy.get("label").contains("Title").type("Test Lesson");
-		/* cy.get("#content .ce-block")
-			.click()
-			.invoke("text", "https://www.youtube.com/watch?v=GoDtyItReto"); */
-		/* cy.get("#content .ce-block")
-			.click()
-			.paste("https://www.youtube.com/watch?v=GoDtyItReto"); */
 
-		cy.fixture("Youtube.mov", "base64").then((fileContent) => {
-			cy.get('input[type="file"]').attachFile({
-				fileContent,
-				fileName: "Youtube.mov",
-				mimeType: "image/png",
-				encoding: "base64",
-			});
-		});
 		cy.get("#content .ce-block").type(
 			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);
@@ -119,12 +128,6 @@ describe("Course Creation", () => {
 		cy.url().should("include", "/learn/1-1");
 		cy.get("div").contains("Test Lesson");
 
-		cy.get("video")
-			.should("be.visible")
-			.children("source")
-			.invoke("attr", "src")
-			.should("include", "/files/Youtube");
-
 		cy.get("div").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."
 		);

frontend/package.json

@@ -18,10 +18,12 @@
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.6.0",
+    "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.56",
+    "frappe-ui": "^0.1.72",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",

frontend/src/App.vue

@@ -14,8 +14,10 @@ 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) {
@@ -26,6 +28,7 @@ const Layout = computed(() => {
 })
 
 onMounted(async () => {
+	if (!userResource.data) return
 	await initTelemetry()
 })
 

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

@@ -107,6 +107,7 @@ 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)
 
@@ -167,6 +168,17 @@ const addNotifications = () => {
 	}
 }
 
+const addQuizzes = () => {
+	if (isInstructor.value || isModerator.value) {
+		sidebarLinks.value.push({
+			label: 'Quizzes',
+			icon: 'CircleHelp',
+			to: 'Quizzes',
+			activeFor: ['Quizzes', 'QuizForm'],
+		})
+	}
+}
+
 const openPageModal = (link) => {
 	showPageModal.value = true
 	pageToEdit.value = link
@@ -197,6 +209,8 @@ const getSidebarFromStorage = () => {
 watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
+		isInstructor.value = userResource.data.is_instructor
+		addQuizzes()
 	}
 })
 

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

@@ -56,7 +56,6 @@ const props = defineProps({
 onMounted(() => {
 	setTimeout(() => {
 		audio.value = document.querySelector('audio')
-		console.log(audio.value)
 		audio.value.onloadedmetadata = () => {
 			duration.value = audio.value.duration
 		}

frontend/src/components/BatchCourses.vue

@@ -4,15 +4,11 @@
 			<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">
@@ -88,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')
@@ -132,23 +129,32 @@ const getCoursesColumns = () => {
 	]
 }
 
-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, unselectAll) => {
-	selections.forEach(async (course) => {
+	deleteCourses.submit(
-		removeCourse.submit({ course })
+		{
-	})
+			courses: Array.from(selections),
-	setTimeout(() => {
+		},
-		courses.reload()
+		{
-		unselectAll()
+			onSuccess(data) {
-	}, 1000)
+				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

@@ -75,6 +75,7 @@
 			variant="solid"
 			class="w-full mt-2"
 			v-else-if="batch.data.allow_self_enrollment && batch.data.seats_left"
+			@click="enrollInBatch()"
 		>
 			{{ __('Enroll Now') }}
 		</Button>
@@ -97,11 +98,13 @@
 </template>
 <script setup>
 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 } from '@/utils'
+import { formatNumberIntoCurrency, formatTime, showToast } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const user = inject('$user')
 
 const props = defineProps({
@@ -111,6 +114,39 @@ 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

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') }}
@@ -88,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)
 
@@ -135,23 +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, unselectAll) => {
-	selections.forEach(async (student) => {
+	deleteStudents.submit(
-		removeStudent.submit({ student })
+		{
-	})
+			students: Array.from(selections),
-	setTimeout(() => {
+		},
-		students.reload()
+		{
-		unselectAll()
+			onSuccess(data) {
-	}, 500)
+				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/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/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"
@@ -108,6 +109,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,

frontend/src/components/Controls/MultiSelect.vue

@@ -2,6 +2,7 @@
 	<div>
 		<label class="block mb-1" :class="labelClasses" v-if="label">
 			{{ label }}
+			<span class="text-red-500" v-if="required">*</span>
 		</label>
 		<div class="grid grid-cols-3 gap-1">
 			<Button
@@ -115,6 +116,9 @@ const props = defineProps({
 		type: Function,
 		default: (value) => `${value} is an Invalid value`,
 	},
+	required: {
+		type: Boolean,
+	},
 })
 
 const values = defineModel()
@@ -152,24 +156,11 @@ 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,
 	},
-	/* transform: (data) => {
-        let allData = data
-            .filter((c) => {
-                return c.description.split(', ')[1]
-            })
-            .map((option) => {
-                let email = option.description.split(', ')[1]
-                return {
-                    label: option.label || email,
-                    value: email,
-                }
-            })
-        return allData
-    }, */
 })
 
 const options = computed(() => {

frontend/src/components/Controls/Rating.vue

@@ -1,18 +1,27 @@
 <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: {
@@ -23,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)
@@ -36,4 +71,11 @@ function markRating(index) {
 	emitChange(index)
 	rating.value = index
 }
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		rating.value = newVal
+	}
+)
 </script>

frontend/src/components/CourseCard.vue

@@ -10,13 +10,13 @@
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
 			<div
-				class="flex items-center flex-wrap space-y-1 space-x-1 relative top-4 px-2 w-fit"
+				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
 			>
 				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
 				<Badge
-					variant="outline"
+					variant="subtle"
 					theme="gray"
 					size="md"
 					v-for="tag in course.tags"
@@ -30,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>

frontend/src/components/CourseCardOverlay.vue

@@ -93,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>
@@ -116,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()
@@ -138,11 +137,11 @@ 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',
+			'circle-warn'
-		})
+		)
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
 		}, 2000)
@@ -155,11 +154,14 @@ function enrollStudent() {
 				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',
@@ -169,7 +171,7 @@ function enrollStudent() {
 							lessonNumber: 1,
 						},
 					})
-				}, 3000)
+				}, 2000)
 			})
 	}
 }
@@ -202,7 +204,6 @@ const certificate = createResource({
 		}
 	},
 	onSuccess(data) {
-		console.log(data)
 		window.open(
 			`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
 				data.name

frontend/src/components/CourseOutline.vue

@@ -4,7 +4,7 @@
 			v-if="title && (outline.data?.length || allowEdit)"
 			class="grid grid-cols-[70%,30%] mb-4 px-2"
 		>
-			<div class="font-semibold text-lg">
+			<div class="font-semibold text-lg leading-5">
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
@@ -76,7 +76,7 @@
 										<Trash2
 											v-if="allowEdit"
 											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 stroke-1.5 text-gray-700 ml-auto invisible group-hover:visible"
+											class="h-4 w-4 text-red-500 ml-auto invisible group-hover:visible"
 										/>
 										<Check
 											v-if="lesson.is_complete"
@@ -119,7 +119,7 @@
 </template>
 <script setup>
 import { Button, createResource } from 'frappe-ui'
-import { ref } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import {
@@ -138,6 +138,8 @@ const route = useRoute()
 const expandAll = ref(true)
 const showChapterModal = ref(false)
 const currentChapter = ref(null)
+const app = getCurrentInstance()
+const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
 	courseName: {
@@ -202,9 +204,23 @@ const updateLessonIndex = createResource({
 })
 
 const trashLesson = (lessonName, chapterName) => {
-	deleteLesson.submit({
+	$dialog({
-		lesson: lessonName,
+		title: __('Delete Lesson'),
-		chapter: chapterName,
+		message: __('Are you sure you want to delete this lesson?'),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close) {
+					deleteLesson.submit({
+						lesson: lessonName,
+						chapter: chapterName,
+					})
+					close()
+				},
+			},
+		],
 	})
 }
 

frontend/src/components/CourseReviews.vue

@@ -76,7 +76,7 @@ const props = defineProps({
 		required: true,
 	},
 	avg_rating: {
-		type: Number,
+		type: String,
 		required: true,
 	},
 	membership: {

frontend/src/components/LessonContent.vue

@@ -37,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,89 @@
+<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">
+					{{ __('How to upload content from your system?') }}
+				</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>
+					{{ __('How to add a YouTube Video?') }}
+				</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" :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 openHelpDialog = (contentType) => {
+	type.value = contentType
+	showExplanation.value = true
+}
+</script>

frontend/src/components/LessonPlugins.vue

@@ -1,174 +0,0 @@
-<template>
-	<div class="text-lg font-semibold">
-		{{ __('Components') }}
-	</div>
-	<div class="mt-5 space-y-4">
-		<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">
-			<Link
-				:value="quiz"
-				class="flex-1"
-				doctype="LMS Quiz"
-				:label="__('Add an existing quiz')"
-				@change="(option) => addQuiz(option)"
-			/>
-			<router-link
-				:to="{
-					name: 'QuizCreation',
-					params: {
-						quizID: 'new',
-					},
-				}"
-				class="self-end ml-2"
-			>
-				<Button>
-					<template #icon>
-						<Plus class="h-4 w-4 stroke-1.5" />
-					</template>
-				</Button>
-			</router-link>
-		</div>
-		<div class="">
-			<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 a 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 class="">
-			<div class="text-xs text-gray-600 mb-1">
-				{{
-					__(
-						'To add a YouTube video, paste the URL of the video in the editor.'
-					)
-				}}
-			</div>
-			<YouTubeExplanation>
-				<template v-slot="{ togglePopover }">
-					<div
-						@click="togglePopover()"
-						class="flex items-center text-sm underline cursor-pointer"
-					>
-						<Info class="w-3 h-3 stroke-1.5 text-gray-700 mr-1" />
-						{{ __('Learn More') }}
-					</div>
-				</template>
-			</YouTubeExplanation>
-		</div>
-	</div>
-</template>
-<script setup>
-import Link from '@/components/Controls/Link.vue'
-import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
-import { Plus, FileText, Info } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-import YouTubeExplanation from '@/components/Modals/YouTubeExplanation.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 = (value) => {
-	getCurrentEditor().caret.setToLastBlock('end', 0)
-	if (value) {
-		getCurrentEditor().blocks.insert('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', 'pdf'].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,33 +1,30 @@
 <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-5"
+		</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-5">
-		{{ __('Live Class') }}
 	</div>
 	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
 		<div
 			v-for="cls in liveClasses.data"
-			class="flex flex-col border rounded-md h-full p-3"
+			class="flex flex-col border rounded-md h-full text-sm text-gray-700 p-3"
 		>
-			<div class="font-semibold text-lg mb-4">
+			<div class="font-semibold text-gray-900 text-lg mb-4">
 				{{ cls.title }}
 			</div>
-			<div class="mb-4">
+			<div class="leading-5 text-gray-700 text-sm mb-4">
 				{{ cls.description }}
 			</div>
 			<div class="flex items-center mb-2">
-				<Calendar class="w-4 h-4 stroke-1.5" />
+				<Calendar class="w-4 h-4 stroke-1.5 text-gray-700" />
 				<span class="ml-2">
 					{{ dayjs(cls.date).format('DD MMMM YYYY') }}
 				</span>
@@ -38,8 +35,9 @@
 					{{ formatTime(cls.time) }}
 				</span>
 			</div>
-			<div class="flex items-center space-x-2 mt-auto">
+			<div class="flex items-center space-x-2 text-gray-900 mt-auto">
 				<a
+					v-if="user.data?.is_moderator || user.data?.is_evaluator"
 					:href="cls.start_url"
 					target="_blank"
 					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
@@ -48,9 +46,10 @@
 					{{ __('Start') }}
 				</a>
 				<a
+					v-if="cls.date <= dayjs().format('YYYY-MM-DD')"
 					:href="cls.join_url"
 					target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+					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"
 				>
 					<Video class="h-4 w-4 stroke-1.5" />
 					{{ __('Join') }}
@@ -90,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

@@ -1,13 +1,13 @@
 <template>
-	<div class="text-base p-4">
+	<div class="flex min-h-0 flex-col text-base">
 		<div class="flex items-center justify-between">
 			<div>
-				<div class="font-semibold mb-1">
+				<div class="text-xl font-semibold mb-1">
 					{{ __(label) }}
 				</div>
-				<div class="text-xs text-gray-600">
+				<!-- <div class="text-xs text-gray-600">
 					{{ __(description) }}
-				</div>
+				</div> -->
 			</div>
 			<div class="flex item-center space-x-2">
 				<FormControl
@@ -16,74 +16,93 @@
 					type="text"
 					:debounce="300"
 				/>
-				<Button @click="() => (showForm = true)">
+				<Button @click="() => (showForm = !showForm)">
 					<template #icon>
-						<Plus class="h-3 w-3 stroke-1.5" />
+						<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>
-		<div class="my-4">
+
-			<!-- Form to add new member -->
+		<!-- Form to add new member -->
-			<div v-if="showForm" class="flex items-center space-x-2 mb-4">
+		<div v-if="showForm" class="flex items-center space-x-2 my-4">
-				<FormControl
+			<FormControl
-					v-model="member.email"
+				v-model="member.email"
-					:placeholder="__('Email')"
+				:placeholder="__('Email')"
-					type="email"
+				type="email"
-					class="w-full"
+				class="w-full"
-				/>
+			/>
-				<FormControl
+			<FormControl
-					v-model="member.first_name"
+				v-model="member.first_name"
-					:placeholder="__('First Name')"
+				:placeholder="__('First Name')"
-					type="test"
+				type="test"
-					class="w-full"
+				class="w-full"
-				/>
+			/>
-				<Button @click="addMember()" variant="subtle">
+			<Button @click="addMember()" variant="subtle">
-					{{ __('Add') }}
+				{{ __('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>
-
-			<!-- Member list -->
-			<div
-				v-for="member in memberList"
-				class="grid grid-cols-5 grid-flow-row py-2 cursor-pointer"
-			>
-				<div
-					@click="openProfile(member.username)"
-					class="flex items-center space-x-2 col-span-2"
-				>
-					<Avatar
-						:image="member.user_image"
-						:label="member.full_name"
-						size="sm"
-					/>
-					<div>
-						{{ member.full_name }}
-					</div>
-				</div>
-				<div class="text-sm text-gray-700 col-span-2">
-					{{ member.name }}
-				</div>
-				<div class="text-sm text-gray-700 justify-self-end">
-					{{ getRole(member.role) }}
-				</div>
-			</div>
-		</div>
-		<div v-if="hasNextPage" class="flex justify-center">
-			<Button variant="solid" @click="members.reload()">
-				<template #prefix>
-					<RefreshCw class="h-3 w-3 stroke-1.5" />
-				</template>
-				{{ __('Load More') }}
-			</Button>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 import { createResource, Avatar, Button, FormControl } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { ref, watch, reactive } from 'vue'
+import { ref, watch, reactive, inject } from 'vue'
-import { RefreshCw, Plus } from 'lucide-vue-next'
+import { RefreshCw, Plus, X } from 'lucide-vue-next'
 
 const router = useRouter()
 const show = defineModel('show')
@@ -92,6 +111,7 @@ const start = ref(0)
 const memberList = ref([])
 const hasNextPage = ref(false)
 const showForm = ref(false)
+const dayjs = inject('$dayjs')
 
 const member = reactive({
 	email: '',

frontend/src/components/MobileLayout.vue

@@ -5,9 +5,11 @@
 		</div>
 		<div
 			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(${sidebarLinks.length}, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${
+					sidebarLinks.length + 1
+				}, minmax(0, 1fr))`,
 			}"
 		>
 			<button
@@ -23,15 +25,46 @@
 					: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, ref, onMounted } 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, sidebarSettings } = sessionStore()
@@ -39,6 +72,7 @@ let { isLoggedIn } = sessionStore()
 const router = useRouter()
 let { userResource } = usersStore()
 const sidebarLinks = ref(getSidebarLinks())
+const otherLinks = ref([])
 
 onMounted(() => {
 	sidebarSettings.reload(
@@ -52,37 +86,53 @@ onMounted(() => {
 						)
 					}
 				})
-				addAccessLinks()
+
+				addOtherLinks()
 			},
 		}
 	)
 })
 
-const addAccessLinks = () => {
+const addOtherLinks = () => {
 	if (user) {
-		sidebarLinks.value.push({
+		otherLinks.value.push({
+			label: 'Notifications',
+			icon: 'Bell',
+			to: 'Notifications',
+		})
+		otherLinks.value.push({
 			label: 'Profile',
 			icon: 'UserRound',
-			activeFor: [
-				'Profile',
-				'ProfileAbout',
-				'ProfileCertification',
-				'ProfileEvaluator',
-				'ProfileRoles',
-			],
 		})
-		sidebarLinks.value.push({
+		otherLinks.value.push({
 			label: 'Log out',
 			icon: 'LogOut',
 		})
 	} else {
-		sidebarLinks.value.push({
+		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)
 }

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,12 @@
 		}"
 	>
 		<template #body-content>
-			<Link doctype="LMS Course" v-model="course" :label="__('Course')" />
+			<Link
+				doctype="LMS Course"
+				v-model="course"
+				:label="__('Course')"
+				:required="true"
+			/>
 			<Link
 				doctype="Course Evaluator"
 				v-model="evaluator"

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,18 +15,25 @@
 		}"
 	>
 		<template #body-content>
-			<FormControl label="Title" v-model="chapter.title" class="mb-4" />
+			<FormControl
+				ref="chapterInput"
+				label="Title"
+				v-model="chapter.title"
+				class="mb-4"
+				:required="true"
+			/>
 		</template>
 	</Dialog>
 </template>
 <script setup>
 import { Dialog, FormControl, createResource } from 'frappe-ui'
-import { defineModel, reactive, watch } from 'vue'
+import { defineModel, reactive, watch, ref } from 'vue'
 import { createToast } from '@/utils/'
 import { capture } from '@/telemetry'
 
 const show = defineModel()
 const outline = defineModel('outline')
+const chapterInput = ref(null)
 
 const props = defineProps({
 	course: {
@@ -37,6 +44,7 @@ const props = defineProps({
 		type: Object,
 	},
 })
+
 const chapter = reactive({
 	title: '',
 })
@@ -97,6 +105,7 @@ const addChapter = (close) => {
 					{ name: data.name },
 					{
 						onSuccess(data) {
+							chapter.title = ''
 							outline.value.reload()
 							createToast({
 								text: 'Chapter added successfully',
@@ -160,4 +169,12 @@ watch(
 		chapter.title = newChapter?.title
 	}
 )
+
+watch(show, () => {
+	if (show.value) {
+		setTimeout(() => {
+			chapterInput.value.$el.querySelector('input').focus()
+		}, 100)
+	}
+})
 </script>

frontend/src/components/Modals/EditProfile.vue

@@ -69,7 +69,18 @@
 					:label="__('Headline')"
 					class="mb-4"
 				/>
-				<FormControl type="textarea" v-model="profile.bio" :label="__('Bio')" />
+
+				<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>
@@ -81,6 +92,7 @@ import {
 	FileUploader,
 	Button,
 	createResource,
+	TextEditor,
 } from 'frappe-ui'
 import { reactive, watch, defineModel } from 'vue'
 import { FileText, X } from 'lucide-vue-next'

frontend/src/components/Modals/EvaluationModal.vue

@@ -131,10 +131,16 @@ function submitEvaluation(close) {
 		},
 		onError(err) {
 			let message = err.messages?.[0] || err
-			let unavailabilityMessage = message.includes('unavailable')
+			let unavailabilityMessage
+
+			if (typeof message === 'string') {
+				unavailabilityMessage = message?.includes('unavailable')
+			} else {
+				unavailabilityMessage = false
+			}
 
 			createToast({
-				title: unavailabilityMessage ? 'Evaluator is Unavailable' : 'Error',
+				title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
 				text: message,
 				icon: unavailabilityMessage ? 'alert-circle' : 'x',
 				iconClasses: 'bg-yellow-600 text-white rounded-md p-px',
@@ -148,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
 }

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,34 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+		}"
+	>
+		<template #body>
+			<div class="p-4">
+				<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,
+	},
+})
+
+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

@@ -22,6 +22,7 @@
 							v-model="liveClass.title"
 							:label="__('Title')"
 							class="mb-4"
+							:required="true"
 						/>
 						<Tooltip
 							:text="
@@ -35,6 +36,7 @@
 								type="time"
 								:label="__('Time')"
 								class="mb-4"
+								:required="true"
 							/>
 						</Tooltip>
 						<FormControl
@@ -42,6 +44,7 @@
 							type="select"
 							:options="getTimezoneOptions()"
 							:label="__('Timezone')"
+							:required="true"
 						/>
 					</div>
 					<div>
@@ -50,6 +53,7 @@
 							type="date"
 							class="mb-4"
 							:label="__('Date')"
+							:required="true"
 						/>
 						<Tooltip :text="__('Duration of the live class in minutes')">
 							<FormControl
@@ -57,6 +61,7 @@
 								v-model="liveClass.duration"
 								:label="__('Duration')"
 								class="mb-4"
+								:required="true"
 							/>
 						</Tooltip>
 						<FormControl

frontend/src/components/Modals/Question.vue

@@ -54,7 +54,7 @@
 						:label="__('Type')"
 						v-model="question.type"
 						type="select"
-						:options="['Choices', 'User Input']"
+						:options="['Choices', 'User Input', 'Open Ended']"
 						class="pb-2"
 					/>
 					<div v-if="question.type == 'Choices'" class="divide-y border-t">
@@ -74,7 +74,11 @@
 							/>
 						</div>
 					</div>
-					<div v-else v-for="n in 4" class="space-y-2">
+					<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}`]"
@@ -212,7 +216,7 @@ const questionCreation = createResource({
 })
 
 const submitQuestion = (close) => {
-	if (questionData.data?.name) updateQuestion(close)
+	if (props.questionDetail?.question) updateQuestion(close)
 	else addQuestion(close)
 }
 
@@ -239,7 +243,7 @@ const addQuestion = (close) => {
 					)
 				},
 				onError(err) {
-					showToast(__('Error'), __(err.message?.[0] || err), 'x')
+					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 				},
 			}
 		)
@@ -259,7 +263,7 @@ const addQuestionRow = (question, close) => {
 				close()
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.message?.[0] || err), 'x')
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 				close()
 			},
 		}
@@ -312,13 +316,12 @@ const updateQuestion = (close) => {
 							quiz.value.reload()
 							close()
 						},
-						onError(err) {
-							showToast(__('Error'), __(err.message?.[0] || err), 'x')
-							close()
-						},
 					}
 				)
 			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
 		}
 	)
 }

frontend/src/components/Modals/Settings.vue

@@ -1,12 +1,12 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '3xl' }">
+	<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">
+					<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"
@@ -17,6 +17,7 @@
 							<SidebarLink
 								v-for="item in tab.items"
 								:link="item"
+								:key="item.label"
 								class="w-full"
 								:class="
 									activeTab?.label == item.label
@@ -30,7 +31,8 @@
 				</div>
 				<div
 					v-if="activeTab && data.doc"
-					class="flex flex-1 flex-col overflow-y-auto"
+					:key="activeTab.label"
+					class="flex flex-1 flex-col px-10 py-8"
 				>
 					<Members
 						v-if="activeTab.label === 'Members'"
@@ -38,6 +40,25 @@
 						: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"
@@ -51,15 +72,20 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createDocumentResource } from 'frappe-ui'
+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,
@@ -69,8 +95,14 @@ const data = createDocumentResource({
 	auto: true,
 })
 
-const tabs = computed(() => {
+const branding = createResource({
-	let _tabs = [
+	url: 'lms.lms.api.get_branding',
+	auto: true,
+	cache: 'brand',
+})
+
+const tabsStructure = computed(() => {
+	return [
 		{
 			label: 'Settings',
 			hideLabel: true,
@@ -80,6 +112,12 @@ const tabs = computed(() => {
 					description: 'Manage the members of your learning system',
 					icon: 'UserRoundPlus',
 				},
+			],
+		},
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
 				{
 					label: 'Payment Gateway',
 					icon: 'DollarSign',
@@ -87,14 +125,10 @@ const tabs = computed(() => {
 						'Configure the payment gateway and other payment related settings',
 					fields: [
 						{
-							label: 'Razorpay Key',
+							label: 'Payment Gateway',
-							name: 'razorpay_key',
+							name: 'payment_gateway',
-							type: 'text',
+							type: 'Link',
-						},
+							doctype: 'Payment Gateway',
-						{
-							label: 'Razorpay Secret',
-							name: 'razorpay_secret',
-							type: 'password',
 						},
 						{
 							label: 'Default Currency',
@@ -102,9 +136,6 @@ const tabs = computed(() => {
 							type: 'Link',
 							doctype: 'Currency',
 						},
-						{
-							type: 'Column Break',
-						},
 						{
 							label: 'Apply GST for India',
 							name: 'apply_gst',
@@ -128,10 +159,64 @@ const tabs = computed(() => {
 			label: 'Settings',
 			hideLabel: true,
 			items: [
+				{
+					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: 'Customize the sidebar as per your needs',
+					description: 'Choose the items you want to show in the sidebar',
 					fields: [
 						{
 							label: 'Courses',
@@ -168,16 +253,9 @@ const tabs = computed(() => {
 						},
 					],
 				},
-			],
-		},
-		{
-			label: 'Settings',
-			hideLabel: true,
-			items: [
 				{
 					label: 'Email Templates',
 					icon: 'MailPlus',
-					description: 'Create email templates with the content you want',
 					fields: [
 						{
 							label: 'Batch Confirmation Template',
@@ -199,81 +277,51 @@ const tabs = computed(() => {
 						},
 					],
 				},
-			],
-		},
-		{
-			label: 'Settings',
-			hideLabel: true,
-			items: [
 				{
 					label: 'Signup',
 					icon: 'LogIn',
-					description:
-						'Customize the signup page to inform users about your terms and policies',
 					fields: [
 						{
-							label: 'Show terms of use on signup',
+							label: 'Custom Content',
-							name: 'terms_of_use',
+							name: 'custom_signup_content',
-							type: 'checkbox',
+							type: 'Code',
+							mode: 'htmlmixed',
+							rows: 10,
 						},
 						{
-							label: 'Terms of Use Page',
+							label: 'Ask for Occupation',
-							name: 'terms_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							label: 'Show privacy policy on signup',
-							name: 'privacy_policy',
-							type: 'checkbox',
-						},
-						{
-							label: 'Privacy Policy Page',
-							name: 'privacy_policy_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							type: 'Column Break',
-						},
-						{
-							label: 'Show cookie policy on signup',
-							name: 'cookie_policy',
-							type: 'checkbox',
-						},
-						{
-							label: 'Cookie Policy Page',
-							name: 'cookie_policy_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							label: 'Ask user category during signup',
 							name: 'user_category',
 							type: 'checkbox',
+							description:
+								'Enable this option to ask users to select their occupation during the signup process.',
 						},
 					],
 				},
 			],
 		},
 	]
+})
 
-	return _tabs.map((tab) => {
+const tabs = computed(() => {
-		tab.items = tab.items.filter((item) => {
+	return tabsStructure.value.map((tab) => {
-			if (item.condition) {
+		return {
-				return item.condition()
+			...tab,
-			}
+			items: tab.items.filter((item) => {
-			return true
+				return !item.condition || item.condition()
-		})
+			}),
-		return tab
+		}
 	})
 })
 
-watch(show, () => {
+watch(show, async () => {
 	if (show.value) {
-		activeTab.value = tabs.value[0].items[0]
+		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/Modals/YouTubeExplanation.vue

@@ -1,31 +0,0 @@
-<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-0 mt-3 w-[35rem] 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"
-				>
-					<video
-						controls
-						autoplay
-						muted
-						width="100%"
-						controlsList="nodownload"
-						oncontextmenu="return false;"
-						class="rounded-sm"
-					>
-						<source src="/Youtube.mov" type="video/mp4" />
-					</video>
-				</div>
-			</div>
-		</template>
-	</Popover>
-</template>
-<script setup>
-import { Popover } from 'frappe-ui'
-</script>

frontend/src/components/NoPermission.vue

@@ -24,7 +24,7 @@
 			<div>
 				{{ __('Please login to access this page.') }}
 			</div>
-			<Button variant="solid" @click="redirectToLogin()" class="mt-2">
+			<Button @click="redirectToLogin()" class="mt-4">
 				{{ __('Login') }}
 			</Button>
 		</div>

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/Quiz.vue

@@ -1,11 +1,27 @@
 <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(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>
 			<div v-if="quiz.data.passing_percentage" class="leading-relaxed">
 				{{
 					__(
@@ -22,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">
@@ -63,19 +81,12 @@
 					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 v-if="questionDetails.data.type == 'User Input'">
+							<span>
-								{{ __('Type your answer') }}
+								{{ getInstructions(questionDetails.data) }}
-							</span>
-							<span v-else>
-								{{
-									questionDetails.data.multiple
-										? __('Choose all answers that apply')
-										: __('Choose one answer')
-								}}
 							</span>
 						</div>
 						<div class="text-gray-900 text-sm font-semibold item-left">
@@ -84,7 +95,7 @@
 						</div>
 					</div>
 					<div
-						class="text-gray-900 font-semibold mt-2"
+						class="text-gray-900 font-semibold mt-2 leading-5"
 						v-html="questionDetails.data.question"
 					></div>
 					<div v-if="questionDetails.data.type == 'Choices'" v-for="index in 4">
@@ -139,7 +150,7 @@
 							{{ questionDetails.data[`explanation_${index}`] }}
 						</div>
 					</div>
-					<div v-else>
+					<div v-else-if="questionDetails.data.type == 'User Input'">
 						<FormControl
 							v-model="possibleAnswer"
 							type="textarea"
@@ -159,8 +170,18 @@
 							</Badge>
 						</div>
 					</div>
-					<div class="flex items-center justify-between mt-5">
+					<div v-else>
-						<div>
+						<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,
@@ -169,7 +190,11 @@
 							}}
 						</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>
@@ -193,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}'
@@ -236,20 +268,29 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Button, createResource, ListView } from 'frappe-ui'
+import {
-import { ref, watch, reactive, inject } from 'vue'
+	Badge,
+	Button,
+	createResource,
+	ListView,
+	TextEditor,
+	FormControl,
+} from 'frappe-ui'
+import { ref, watch, reactive, inject, computed } from 'vue'
 import { createToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
-import FormControl from 'frappe-ui/src/components/FormControl.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
-const user = inject('$user')
 
+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: {
@@ -270,6 +311,7 @@ const quiz = createResource({
 	auto: true,
 	onSuccess(data) {
 		populateQuestions()
+		setupTimer()
 	},
 })
 
@@ -285,6 +327,37 @@ const populateQuestions = () => {
 	}
 }
 
+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))
@@ -369,6 +442,7 @@ watch(
 const startQuiz = () => {
 	activeQuestion.value = 1
 	localStorage.removeItem(quiz.data.title)
+	if (quiz.data.duration) startTimer()
 }
 
 const markAnswer = (index) => {
@@ -439,7 +513,7 @@ const checkAnswer = () => {
 const addToLocalStorage = () => {
 	let quizData = JSON.parse(localStorage.getItem(quiz.data.title))
 	let questionData = {
-		question_index: activeQuestion.value,
+		question_name: currentQuestion.value,
 		answer: getAnswers().join(),
 		is_correct: showAnswers.filter((answer) => {
 			return answer != undefined
@@ -450,9 +524,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()
 	}
 }
@@ -467,7 +542,8 @@ const resetQuestion = () => {
 
 const submitQuiz = () => {
 	if (!quiz.data.show_answers) {
-		checkAnswer()
+		if (questionDetails.data.type == 'Open Ended') addToLocalStorage()
+		else checkAnswer()
 		setTimeout(() => {
 			createSubmission()
 		}, 500)
@@ -477,9 +553,15 @@ const submitQuiz = () => {
 }
 
 const createSubmission = () => {
-	quizSubmission.reload().then(() => {
+	quizSubmission.submit(
-		if (quiz.data && quiz.data.max_attempts) attempts.reload()
+		{},
-	})
+		{
+			onSuccess(data) {
+				if (quiz.data && quiz.data.max_attempts) attempts.reload()
+				if (quiz.data.duration) clearInterval(timerInterval)
+			},
+		}
+	)
 }
 
 const resetQuiz = () => {
@@ -488,6 +570,14 @@ const resetQuiz = () => {
 	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/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

@@ -1,34 +1,23 @@
 <template>
-	<div class="flex flex-col justify-between h-full p-4">
+	<div class="flex flex-col justify-between h-full">
 		<div>
-			<div class="font-semibold mb-1">
+			<div class="flex itemsc-center justify-between">
-				{{ __(label) }}
+				<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>
-		<div class="flex space-x-8 my-5">
+
-			<div v-for="(column, index) in columns" :key="index">
+		<SettingFields :fields="fields" :data="data.doc" />
-				<div class="flex flex-col space-y-4 w-60">
-					<div v-for="field in column">
-						<Link
-							v-if="field.type == 'Link'"
-							v-model="field.value"
-							:doctype="field.doctype"
-							:label="field.label"
-						/>
-						<FormControl
-							v-else
-							:key="field.name"
-							v-model="field.value"
-							:label="field.label"
-							:type="field.type"
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
 		<div class="flex flex-row-reverse mt-auto">
 			<Button variant="solid" :loading="data.save.loading" @click="update">
 				{{ __('Update') }}
@@ -38,9 +27,8 @@
 </template>
 
 <script setup>
-import { FormControl, Button } from 'frappe-ui'
+import { Button, Badge } from 'frappe-ui'
-import { computed } from 'vue'
+import SettingFields from '@/components/SettingFields.vue'
-import Link from '@/components/Controls/Link.vue'
 
 const props = defineProps({
 	fields: {
@@ -60,37 +48,23 @@ const props = defineProps({
 	},
 })
 
-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.doc[field.name] ? true : false
-			} else {
-				field.value = props.data.doc[field.name]
-			}
-			currentColumn.push(field)
-		}
-	})
-
-	if (currentColumn.length > 0) {
-		cols.push(currentColumn)
-	}
-
-	return cols
-})
-
 const update = () => {
 	props.fields.forEach((f) => {
-		props.data.doc[f.name] = f.value
+		if (f.type != 'Column Break') {
+			props.data.doc[f.name] = f.value
+		}
 	})
 	props.data.save.submit()
 }
 </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,144 @@
+<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"
+					/>
+				</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, FileText } 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

@@ -27,7 +27,7 @@
 						: '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">
 				{{ link.count }}

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/UserDropdown.vue

@@ -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"
@@ -28,11 +28,10 @@
 					<div class="text-base font-medium text-gray-900 leading-none">
 						<span
 							v-if="
-								branding.data?.brand_name &&
+								branding.data?.app_name && branding.data?.app_name != 'Frappe'
-								branding.data?.brand_name != 'Frappe'
 							"
 						>
-							{{ branding.data?.brand_name }}
+							{{ branding.data?.app_name }}
 						</span>
 						<span v-else> Learning </span>
 					</div>
@@ -66,25 +65,21 @@
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { Dropdown } from 'frappe-ui'
-import {
+import Apps from '@/components/Apps.vue'
-	ChevronDown,
+import { ChevronDown, LogIn, LogOut, User, Settings } from 'lucide-vue-next'
-	LogIn,
-	LogOut,
-	User,
-	ArrowRightLeft,
-	Settings,
-} from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { convertToTitleCase } from '../utils'
 import { usersStore } from '@/stores/user'
-import { ref } from 'vue'
+import { useSettings } from '@/stores/settings'
+import { markRaw, watch, ref } from 'vue'
 import SettingsModal from '@/components/Modals/Settings.vue'
 
 const router = useRouter()
-const showSettingsModal = ref(false)
 const { logout, branding } = sessionStore()
 let { userResource } = usersStore()
+const settingsStore = useSettings()
 let { isLoggedIn } = sessionStore()
+const showSettingsModal = ref(false)
 
 const props = defineProps({
 	isCollapsed: {
@@ -93,6 +88,13 @@ const props = defineProps({
 	},
 })
 
+watch(
+	() => settingsStore.isSettingsOpen,
+	(value) => {
+		showSettingsModal.value = value
+	}
+)
+
 const userDropdownOptions = [
 	{
 		icon: User,
@@ -105,11 +107,7 @@ const userDropdownOptions = [
 		},
 	},
 	{
-		icon: ArrowRightLeft,
+		component: markRaw(Apps),
-		label: 'Switch to Desk',
-		onClick: () => {
-			window.location.href = '/app'
-		},
 		condition: () => {
 			let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
 			let system_user = cookies.get('system_user')
@@ -121,7 +119,7 @@ const userDropdownOptions = [
 		icon: Settings,
 		label: 'Settings',
 		onClick: () => {
-			showSettingsModal.value = true
+			settingsStore.isSettingsOpen = true
 		},
 		condition: () => {
 			return userResource.data?.is_moderator

frontend/src/components/VideoBlock.vue

@@ -3,12 +3,15 @@
 		<video
 			@timeupdate="updateTime"
 			@ended="videoEnded"
-			class="rounded-lg border border-gray-100"
+			@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"
+			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>
@@ -71,7 +74,6 @@ const props = defineProps({
 
 onMounted(() => {
 	setTimeout(() => {
-		videoRef.value = document.querySelector('video')
 		videoRef.value.onloadedmetadata = () => {
 			duration.value = videoRef.value.duration
 		}
@@ -106,6 +108,14 @@ const pauseVideo = () => {
 	playing.value = false
 }
 
+const togglePlay = () => {
+	if (playing.value) {
+		pauseVideo()
+	} else {
+		playVideo()
+	}
+}
+
 const videoEnded = () => {
 	playing.value = false
 }

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'
@@ -36,3 +37,4 @@ let { isLoggedIn } = sessionStore()
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
 app.config.globalProperties.$user = userResource
+app.config.globalProperties.$dialog = createDialog

frontend/src/pages/Batch.vue

@@ -15,7 +15,11 @@
 		</header>
 		<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-y-hidden">
+				<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
@@ -236,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)
 	)
 })

frontend/src/pages/BatchForm.vue

@@ -13,12 +13,12 @@
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10 mb-4">
+				<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"
 						/>
 					</div>
 					<div class="flex flex-col space-y-2">
@@ -36,61 +36,73 @@
 				</div>
 			</div>
 			<div class="mb-4">
-				<div>
+				<div class="text-xs text-gray-600 mb-2">
-					<FileUploader
+					{{ __('Meta Image') }}
-						v-if="!batch.image"
+				</div>
-						class="mt-4"
+				<FileUploader
-						:fileTypes="['image/*']"
+					v-if="!batch.image"
-						:validateFile="validateFile"
+					:fileTypes="['image/*']"
-						@success="(file) => saveImage(file)"
+					:validateFile="validateFile"
-					>
+					@success="(file) => saveImage(file)"
-						<template v-slot="{ file, progress, uploading, openFileSelector }">
+				>
-							<div class="mb-4">
+					<template v-slot="{ file, progress, uploading, openFileSelector }">
-								<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">
-							{{ __('Meta Image') }}
-						</div>
 						<div class="flex items-center">
-							<div class="border rounded-md p-2 mr-2">
+							<div class="border rounded-md w-fit py-5 px-20">
-								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+								<Image class="size-5 stroke-1 text-gray-700" />
 							</div>
-							<div class="flex flex-col">
+							<div class="ml-4">
-								<span>
+								<Button @click="openFileSelector">
-									{{ batch.image.file_name }}
+									{{ __('Upload') }}
-								</span>
+								</Button>
-								<span class="text-sm text-gray-500 mt-1">
+								<div class="mt-2 text-gray-600 text-sm">
-									{{ getFileSize(batch.image.file_size) }}
+									{{
-								</span>
+										__(
+											'Appears when the batch URL is shared on any online platform'
+										)
+									}}
+								</div>
+							</div>
+						</div>
+					</template>
+				</FileUploader>
+				<div v-else class="mb-4">
+					<div class="flex items-center">
+						<img :src="batch.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 when the batch URL is shared on any online platform'
+									)
+								}}
 							</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>
 				</div>
-				<MultiSelect
-					v-model="instructors"
-					doctype="User"
-					:label="__('Instructors')"
-				/>
 			</div>
+			<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"
@@ -112,12 +124,14 @@
 							: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>
@@ -126,18 +140,22 @@
 							: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>
@@ -153,6 +171,7 @@
 							:label="__('Seat Count')"
 							type="number"
 							class="mb-4"
+							:placeholder="__('Number of seats available')"
 						/>
 						<FormControl
 							v-model="batch.evaluation_end_date"
@@ -232,11 +251,11 @@ import {
 	createResource,
 } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
-import MultiSelect from '@/components/Controls/MultiSelect.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')

frontend/src/pages/Batches.vue

@@ -8,12 +8,12 @@
 				:items="[{ label: __('Batches'), route: { name: 'Batches' } }]"
 			/>
 			<div class="flex space-x-2">
-				<div class="w-40">
+				<div class="w-44">
 					<Select
 						v-if="categories.data?.length"
 						v-model="currentCategory"
 						:options="categories.data"
-						:placeholder="__('Filter')"
+						:placeholder="__('Category')"
 					/>
 				</div>
 				<router-link
@@ -27,7 +27,7 @@
 						<template #prefix>
 							<Plus class="h-4 w-4 stroke-1.5" />
 						</template>
-						{{ __('New Batch') }}
+						{{ __('New') }}
 					</Button>
 				</router-link>
 			</div>
@@ -40,6 +40,7 @@
 				{{ __('Loading Batches...') }}
 			</div>
 			<Tabs
+				v-if="hasBatches"
 				v-model="tabIndex"
 				:tabs="makeTabs"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
@@ -79,24 +80,63 @@
 							<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,
 	createResource,
 	Breadcrumbs,
 	Button,
@@ -104,13 +144,14 @@ import {
 	Badge,
 	Select,
 } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
+import { BookOpen, Plus } from 'lucide-vue-next'
 import BatchCard from '@/components/BatchCard.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)
 
 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
@@ -119,10 +160,10 @@ onMounted(() => {
 	}
 })
 
-const batches = createListResource({
+const batches = createResource({
 	doctype: 'LMS Batch',
 	url: 'lms.lms.utils.get_batches',
-	cache: ['batches', user?.data?.email],
+	cache: ['batches', user.data?.email],
 	auto: true,
 })
 
@@ -183,6 +224,14 @@ const addToTabs = (label) => {
 	})
 }
 
+watch(batches, () => {
+	Object.keys(batches.data).forEach((key) => {
+		if (batches.data[key].length) {
+			hasBatches.value = true
+		}
+	})
+})
+
 watch(
 	() => currentCategory.value,
 	() => {

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">
@@ -167,11 +155,18 @@
 	</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)
 			},
 		}
 	)

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')"
@@ -67,14 +67,14 @@
 					<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 :courseName="course.data.name" :showOutline="true" />
 					</div>
 					<CourseReviews
 						:courseName="course.data.name"
-						:avg_rating="course.data.avg_rating"
+						:avg_rating="course.data.rating"
 						:membership="course.data.membership"
 					/>
 				</div>
@@ -116,7 +116,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
 })
@@ -131,26 +131,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;
-}
-
-.course-description ul {
-	list-style: disc;
-	margin: revert;
-	padding: revert;
-}
-
 .avatar-group {
 	display: inline-flex;
 	align-items: center;

frontend/src/pages/CourseForm.vue

@@ -7,6 +7,14 @@
 				>
 					<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') }}
@@ -23,15 +31,23 @@
 							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-700">
+							<div class="mb-1.5 text-sm text-gray-600">
 								{{ __('Course Description') }}
+								<span class="text-red-500">*</span>
 							</div>
 							<TextEditor
 								:content="course.description"
@@ -41,49 +57,62 @@
 								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
+						<div class="mb-4">
-							v-if="!course.course_image"
+							<div class="text-xs text-gray-600 mb-2">
-							: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') }}
+								<span class="text-red-500">*</span>
 							</div>
-							<div class="flex items-center">
+							<FileUploader
-								<div class="border rounded-md p-2 mr-2">
+								v-if="!course.course_image"
-									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+								: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 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')"
+							:placeholder="
+								__(
+									'Paste the youtube link of a short video introducing the course'
+								)
+							"
 							class="mb-4"
 						/>
 						<div class="mb-4">
@@ -104,15 +133,27 @@
 								</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">
@@ -122,7 +163,7 @@
 						<div class="grid grid-cols-3 gap-10 mb-4">
 							<div
 								v-if="user.data?.is_moderator"
-								class="flex flex-col space-y-3"
+								class="flex flex-col space-y-4"
 							>
 								<FormControl
 									type="checkbox"
@@ -215,24 +256,24 @@ import {
 	ref,
 	reactive,
 	watch,
+	getCurrentInstance,
 } from 'vue'
-import {
+import { showToast, updateDocumentTitle } from '@/utils'
-	convertToTitleCase,
-	showToast,
-	getFileSize,
-	updateDocumentTitle,
-} from '../utils'
 import Link from '@/components/Controls/Link.vue'
-import { FileText, X } from 'lucide-vue-next'
+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: {
@@ -405,23 +446,37 @@ const submitCourse = () => {
 	}
 }
 
-const validateMandatoryFields = () => {
+const deleteCourse = createResource({
-	const mandatory_fields = [
+	url: 'lms.lms.api.delete_course',
-		'title',
+	makeParams(values) {
-		'short_introduction',
+		return {
-		'description',
+			course: props.courseName,
-		'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)) {
+	onSuccess() {
-		return 'Course price and currency are mandatory for paid courses'
+		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(
@@ -436,7 +491,7 @@ watch(
 const validateFile = (file) => {
 	let extension = file.name.split('.').pop().toLowerCase()
 	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
-		return 'Only image file is allowed.'
+		return __('Only image file is allowed.')
 	}
 }
 
@@ -463,6 +518,12 @@ 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

frontend/src/pages/Courses.vue

@@ -8,7 +8,16 @@
 				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
 			/>
 			<div class="flex space-x-2 justify-end">
-				<div class="w-36">
+				<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"
@@ -32,13 +41,14 @@
 						<template #prefix>
 							<Plus class="h-4 w-4" />
 						</template>
-						{{ __('New Course') }}
+						{{ __('New') }}
 					</Button>
 				</router-link>
 			</div>
 		</header>
 		<div class="">
 			<Tabs
+				v-if="hasCourses"
 				v-model="tabIndex"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 				:tabs="makeTabs"
@@ -92,18 +102,57 @@
 							<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>
@@ -118,12 +167,21 @@ import {
 	createResource,
 } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
-import { Plus, Search } 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'
 
 const user = inject('$user')
 const searchQuery = ref('')
+const currentCategory = ref(null)
+const hasCourses = ref(false)
+
+onMounted(() => {
+	let queries = new URLSearchParams(location.search)
+	if (queries.has('category')) {
+		currentCategory.value = queries.get('category')
+	}
+})
 
 const courses = createResource({
 	url: 'lms.lms.utils.get_courses',
@@ -168,18 +226,67 @@ const addToTabs = (label) => {
 }
 
 const getCourses = (type) => {
+	let courseList = courses.data[type]
 	if (searchQuery.value) {
 		let query = searchQuery.value.toLowerCase()
-		return courses.data[type].filter(
+		courseList = courseList.filter(
 			(course) =>
 				course.title.toLowerCase().includes(query) ||
 				course.short_introduction.toLowerCase().includes(query) ||
 				course.tags.filter((tag) => tag.toLowerCase().includes(query)).length
 		)
 	}
-	return courses.data[type]
+	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/JobCreation.vue

@@ -149,7 +149,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

@@ -52,46 +52,88 @@
 		</header>
 		<div v-if="job.data" class="max-w-3xl mx-auto">
 			<div class="p-4">
-				<div class="flex mb-10">
+				<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-4">
 							{{ job.data.job_title }}
 						</div>
+					</div>
+					<div>
 						<div
-							class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-2 md:gap-y-4"
+							class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
 						>
 							<div class="flex items-center space-x-2">
-								<Building2 class="h-4 w-4 stroke-1.5" />
+								<span class="p-4 bg-green-50 rounded-full">
-								<span>{{ job.data.company_name }}</span>
+									<Building2 class="h-4 w-4 text-green-500" />
-							</div>
-							<div class="flex items-center space-x-2">
-								<MapPin class="h-4 w-4 stroke-1.5" />
-								<span>{{ job.data.location }}</span>
-							</div>
-							<div class="flex items-center space-x-2">
-								<ClipboardType class="h-4 w-4 stroke-1.5" />
-								<span>{{ job.data.type }}</span>
-							</div>
-							<div class="flex items-center space-x-2">
-								<CalendarDays class="h-4 w-4 stroke-1.5" />
-								<span>
-									{{ dayjs(job.data.creation).format('DD MMM YYYY') }}
 								</span>
+								<div class="flex flex-col space-y-2">
+									<span class="text-xs text-gray-600 font-medium uppercase">
+										{{ __('Organisation') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ 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"
 							>
-								<SquareUserRound class="h-4 w-4 stroke-1.5" />
+								<span class="p-4 bg-purple-50 rounded-full">
-								<span
+									<SquareUserRound class="h-4 w-4 text-purple-500" />
-									>{{ applicationCount.data }}
+								</span>
-									{{ __('applications received') }}</span
+								<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>

frontend/src/pages/Lesson.vue

@@ -17,14 +17,9 @@
 						)
 					}}
 				</p>
-				<router-link
+				<Button v-if="user.data" @click="enrollStudent()" variant="solid">
-					v-if="user.data"
+					{{ __('Start Learning') }}
-					:to="{ name: 'CourseDetail', params: { courseName: courseName } }"
+				</Button>
-				>
-					<Button variant="solid">
-						{{ __('Start Learning') }}
-					</Button>
-				</router-link>
 				<Button v-else @click="redirectToLogin()">
 					{{ __('Login') }}
 				</Button>
@@ -120,7 +115,8 @@
 				</div>
 				<div
 					v-if="
-						lesson.data.instructor_content?.blocks?.length &&
+						lesson.data.instructor_content &&
+						JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
 						allowInstructorContent()
 					"
 					class="bg-gray-100 p-3 rounded-md mt-6"
@@ -193,7 +189,7 @@ import { createResource, Breadcrumbs, Button } from 'frappe-ui'
 import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { useRoute } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
 import { getEditorTools, updateDocumentTitle } from '../utils'
@@ -203,6 +199,7 @@ import CourseInstructors from '@/components/CourseInstructors.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 
 const user = inject('$user')
+const router = useRouter()
 const route = useRoute()
 const allowDiscussions = ref(false)
 const editor = ref(null)
@@ -242,9 +239,16 @@ const lesson = createResource({
 	},
 	auto: true,
 	onSuccess(data) {
+		if (Object.keys(data).length === 0) {
+			router.push({ name: 'Courses' })
+			return
+		}
 		lessonProgress.value = data.membership?.progress
 		if (data.content) editor.value = renderEditor('editor', data.content)
-		if (data.instructor_content?.blocks?.length)
+		if (
+			data.instructor_content &&
+			JSON.parse(data.instructor_content)?.blocks?.length > 1
+		)
 			instructorEditor.value = renderEditor(
 				'instructor-content',
 				data.instructor_content
@@ -275,7 +279,7 @@ const renderEditor = (holder, content) => {
 }
 
 const markProgress = () => {
-	if (user.data && !lesson.data?.progress) {
+	if (user.data && lesson.data && !lesson.data.progress) {
 		progress.submit()
 	}
 }
@@ -297,14 +301,14 @@ const breadcrumbs = computed(() => {
 	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
 	items.push({
 		label: lesson?.data?.course_title,
-		route: { name: 'CourseDetail', params: { course: props.courseName } },
+		route: { name: 'CourseDetail', params: { courseName: props.courseName } },
 	})
 	items.push({
 		label: lesson?.data?.title,
 		route: {
 			name: 'Lesson',
 			params: {
-				course: props.courseName,
+				courseName: props.courseName,
 				chapterNumber: props.chapterNumber,
 				lessonNumber: props.lessonNumber,
 			},
@@ -375,6 +379,30 @@ const allowInstructorContent = () => {
 	return false
 }
 
+const enrollment = createResource({
+	url: 'frappe.client.insert',
+	makeParams() {
+		return {
+			doc: {
+				doctype: 'LMS Enrollment',
+				course: props.courseName,
+				member: user.data?.name,
+			},
+		}
+	},
+})
+
+const enrollStudent = () => {
+	enrollment.submit(
+		{},
+		{
+			onSuccess() {
+				window.location.reload()
+			},
+		}
+	)
+}
+
 const redirectToLogin = () => {
 	window.location.href = `/login?redirect-to=/lms/courses/${props.courseName}`
 }
@@ -448,6 +476,10 @@ updateDocumentTitle(pageMeta)
 	max-width: unset;
 }
 
+.codex-editor__redactor {
+	padding-bottom: 0px !important;
+}
+
 .codeBoxHolder {
 	display: flex;
 	flex-direction: column;
@@ -537,4 +569,13 @@ updateDocumentTitle(pageMeta)
 	color: #383a42;
 	background-color: #fafafa;
 }
+
+.codeBoxTextArea {
+	line-height: 1.7;
+}
+
+iframe {
+	border-top: 3px solid theme('colors.gray.700');
+	border-bottom: 3px solid theme('colors.gray.700');
+}
 </style>

frontend/src/pages/LessonForm.vue

@@ -12,7 +12,12 @@
 				</header>
 				<div class="py-5">
 					<div class="w-5/6 mx-auto">
-						<FormControl v-model="lesson.title" label="Title" class="mb-4" />
+						<FormControl
+							v-model="lesson.title"
+							label="Title"
+							class="mb-4"
+							:required="true"
+						/>
 						<FormControl
 							v-model="lesson.include_in_preview"
 							type="checkbox"
@@ -62,14 +67,14 @@
 			</div>
 			<div class="">
 				<div class="sticky top-0 p-5">
-					<LessonPlugins :editor="editor" :notesEditor="instructorEditor" />
+					<LessonHelp />
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, FormControl, createResource, Button } from 'frappe-ui'
+import { Breadcrumbs, Button, createResource, FormControl } from 'frappe-ui'
 import {
 	computed,
 	reactive,
@@ -79,7 +84,7 @@ import {
 	onBeforeUnmount,
 } from 'vue'
 import EditorJS from '@editorjs/editorjs'
-import LessonPlugins from '@/components/LessonPlugins.vue'
+import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { updateDocumentTitle, createToast, getEditorTools } from '@/utils'
 import { capture } from '@/telemetry'
@@ -117,7 +122,7 @@ onMounted(() => {
 const renderEditor = (holder) => {
 	return new EditorJS({
 		holder: holder,
-		tools: getEditorTools(),
+		tools: getEditorTools(true),
 		autofocus: true,
 	})
 }
@@ -143,7 +148,9 @@ const lessonDetails = createResource({
 			Object.keys(data.lesson).forEach((key) => {
 				lesson[key] = data.lesson[key]
 			})
-			lesson.include_in_preview = data.include_in_preview ? true : false
+			lesson.include_in_preview = data?.lesson?.include_in_preview
+				? true
+				: false
 			addLessonContent(data)
 			addInstructorNotes(data)
 			enableAutoSave()
@@ -180,7 +187,7 @@ const addInstructorNotes = (data) => {
 const enableAutoSave = () => {
 	autoSaveInterval = setInterval(() => {
 		saveLesson()
-	}, 5000)
+	}, 10000)
 }
 
 onBeforeUnmount(() => {
@@ -423,7 +430,7 @@ const breadcrumbs = computed(() => {
 		},
 		{
 			label: lessonDetails.data?.course_title,
-			route: { name: 'CourseDetail', params: { courseName: props.courseName } },
+			route: { name: 'CourseForm', params: { courseName: props.courseName } },
 		},
 	]
 
@@ -473,6 +480,10 @@ updateDocumentTitle(pageMeta)
 	max-width: none;
 }
 
+.codex-editor--narrow .ce-toolbar__actions {
+	right: 100%;
+}
+
 .ce-toolbar__content {
 	max-width: none;
 }
@@ -545,10 +556,6 @@ updateDocumentTitle(pageMeta)
 	cursor: pointer;
 }
 
-.codeBoxSelectItem:hover {
-	opacity: 0.7;
-}
-
 .codeBoxSelectedItem {
 	background-color: lightblue !important;
 }
@@ -566,4 +573,17 @@ updateDocumentTitle(pageMeta)
 	color: #383a42;
 	background-color: #fafafa;
 }
+
+.codeBoxTextArea {
+	line-height: 1.7;
+}
+
+.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+	overflow-x: unset;
+}
+
+iframe {
+	border-top: 3px solid theme('colors.gray.700');
+	border-bottom: 3px solid theme('colors.gray.700');
+}
 </style>

frontend/src/pages/Profile.vue

@@ -146,7 +146,7 @@ const coverImage = createResource({
 
 const setActiveTab = () => {
 	let fragments = route.path.split('/')
-	let sections = ['certificates', 'roles', 'evaluations']
+	let sections = ['certificates', 'roles', 'slots', 'schedule']
 	sections.forEach((section) => {
 		if (fragments.includes(section)) {
 			activeTab.value = convertToTitleCase(section)
@@ -161,7 +161,8 @@ watchEffect(() => {
 			About: { name: 'ProfileAbout' },
 			Certificates: { name: 'ProfileCertificates' },
 			Roles: { name: 'ProfileRoles' },
-			Evaluations: { name: 'ProfileEvaluator' },
+			Slots: { name: 'ProfileEvaluator' },
+			Schedule: { name: 'ProfileEvaluationSchedule' },
 		}[activeTab.value]
 		router.push(route)
 	}
@@ -185,8 +186,13 @@ const isSessionUser = () => {
 const getTabButtons = () => {
 	let buttons = [{ label: 'About' }, { label: 'Certificates' }]
 	if ($user.data?.is_moderator) buttons.push({ label: 'Roles' })
-	if (isSessionUser() && $user.data?.is_evaluator)
+	if (
-		buttons.push({ label: 'Evaluations' })
+		isSessionUser() &&
+		($user.data?.is_evaluator || $user.data?.is_moderator)
+	) {
+		buttons.push({ label: 'Slots' })
+		buttons.push({ label: 'Schedule' })
+	}
 
 	return buttons
 }

frontend/src/pages/ProfileAbout.vue

@@ -42,7 +42,7 @@
 							<img
 								:src="badge.badge_image"
 								:alt="badge.badge"
-								class="bg-gray-100 rounded-t-md"
+								class="bg-gray-100 rounded-t-md h-[200px] mx-auto"
 							/>
 							<div class="p-5">
 								<div class="text-2xl font-semibold mb-2">
@@ -142,7 +142,7 @@ const shareOnSocial = (badge, medium) => {
 	const summary = `I am happy to announce that I earned the ${
 		badge.badge
 	} badge on ${dayjs(badge.issued_on).format('DD MMM YYYY')} at ${
-		branding.data?.brand_name
+		branding.data?.app_name
 	}.`
 
 	if (medium == 'LinkedIn')

frontend/src/pages/ProfileEvaluationSchedule.vue

@@ -0,0 +1,102 @@
+<template>
+	<div class="mt-7 mb-20">
+		<div class="flex h-screen flex-col overflow-hidden">
+			<Calendar
+				v-if="evaluations.data?.length"
+				:config="{
+					defaultMode: 'Month',
+					disableModes: ['Day', 'Week'],
+					redundantCellHeight: 100,
+					enableShortcuts: false,
+				}"
+				:events="evaluations.data"
+				@click="(event) => openEvent(event)"
+			>
+				<template #header="{ currentMonthYear, decrement, increment }">
+					<div class="mb-2 flex justify-between">
+						<span class="text-lg font-semibold">
+							{{ currentMonthYear }}
+						</span>
+						<div class="flex gap-x-1">
+							<Button
+								@click="decrement()"
+								variant="ghost"
+								class="h-4 w-4"
+								icon="chevron-left"
+							/>
+							<Button
+								@click="increment()"
+								variant="ghost"
+								class="h-4 w-4"
+								icon="chevron-right"
+							/>
+						</div>
+					</div>
+				</template>
+			</Calendar>
+		</div>
+	</div>
+	<Event v-model="showEvent" :event="currentEvent" />
+</template>
+<script setup>
+import { Calendar, createListResource, Button } from 'frappe-ui'
+import { inject, ref } from 'vue'
+import Event from '@/components/Modals/Event.vue'
+
+const user = inject('$user')
+const currentEvent = ref(null)
+const showEvent = ref(false)
+
+const props = defineProps({
+	profile: {
+		type: Object,
+		required: true,
+	},
+})
+
+const evaluations = createListResource({
+	doctype: 'LMS Certificate Request',
+	filters: {
+		evaluator: user.data?.name,
+	},
+	fields: [
+		'name',
+		'member_name',
+		'member',
+		'course',
+		'course_title',
+		'batch_name',
+		'batch_title',
+		'evaluator',
+		'evaluator_name',
+		'date',
+		'start_time',
+		'end_time',
+		'google_meet_link',
+	],
+	auto: true,
+	orderBy: 'creation desc',
+	limit: 100,
+	cache: ['schedule', user.data?.name],
+	transform(data) {
+		return data.map((d) => {
+			let mappedData = Object.assign({}, d)
+
+			mappedData.title = `${d.member_name}'s Evaluation`
+			mappedData.participant = d.member_name
+			mappedData.id = d.name
+			mappedData.venue = d.google_meet_link
+			mappedData.fromDate = `${d.date} ${d.start_time}`
+			mappedData.toDate = `${d.date} ${d.end_time}`
+			mappedData.color = 'green'
+
+			return mappedData
+		})
+	},
+})
+
+const openEvent = (event) => {
+	currentEvent.value = event.calendarEvent
+	showEvent.value = true
+}
+</script>

frontend/src/pages/QuizForm.vue

@@ -3,14 +3,42 @@
 		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" />
-		<Button variant="solid" @click="submitQuiz()">
+		<div class="space-x-2">
-			{{ __('Save') }}
+			<router-link
-		</Button>
+				v-if="quizDetails.data?.name"
+				:to="{
+					name: 'QuizPage',
+					params: {
+						quizID: quizDetails.data.name,
+					},
+				}"
+			>
+				<Button>
+					{{ __('Open') }}
+				</Button>
+			</router-link>
+			<router-link
+				v-if="quizDetails.data?.name"
+				:to="{
+					name: 'QuizSubmissionList',
+					params: {
+						quizID: quizDetails.data.name,
+					},
+				}"
+			>
+				<Button>
+					{{ __('Submission List') }}
+				</Button>
+			</router-link>
+			<Button variant="solid" @click="submitQuiz()">
+				{{ __('Save') }}
+			</Button>
+		</div>
 	</header>
 	<div class="w-3/4 mx-auto py-5">
 		<!-- Details -->
 		<div class="mb-8">
-			<div class="text-sm font-semibold mb-4">
+			<div class="font-semibold mb-4">
 				{{ __('Details') }}
 			</div>
 			<FormControl
@@ -22,11 +50,17 @@
 				"
 			/>
 			<div v-if="quizDetails.data?.name">
-				<div class="grid grid-cols-3 gap-5 mt-2 mb-8">
+				<div class="grid grid-cols-2 gap-5 mt-4 mb-8">
 					<FormControl
+						type="number"
 						v-model="quiz.max_attempts"
 						:label="__('Maximun Attempts')"
 					/>
+					<FormControl
+						type="number"
+						v-model="quiz.duration"
+						:label="__('Duration (in minutes)')"
+					/>
 					<FormControl
 						v-model="quiz.total_marks"
 						:label="__('Total Marks')"
@@ -40,7 +74,7 @@
 
 				<!-- Settings -->
 				<div class="mb-8">
-					<div class="text-sm font-semibold mb-4">
+					<div class="font-semibold mb-4">
 						{{ __('Settings') }}
 					</div>
 					<div class="grid grid-cols-3 gap-5 my-4">
@@ -58,7 +92,7 @@
 				</div>
 
 				<div class="mb-8">
-					<div class="text-sm font-semibold mb-4">
+					<div class="font-semibold mb-4">
 						{{ __('Shuffle Settings') }}
 					</div>
 					<div class="grid grid-cols-3">
@@ -78,7 +112,7 @@
 				<!-- Questions -->
 				<div>
 					<div class="flex items-center justify-between mb-4">
-						<div class="text-sm font-semibold">
+						<div class="font-semibold">
 							{{ __('Questions') }}
 						</div>
 						<Button @click="openQuestionModal()">
@@ -125,7 +159,7 @@
 								<div class="flex gap-2">
 									<Button
 										variant="ghost"
-										@click="deleteQuizzes(selections, unselectAll)"
+										@click="deleteQuestions(selections, unselectAll)"
 									>
 										<Trash2 class="h-4 w-4 stroke-1.5" />
 									</Button>
@@ -174,7 +208,7 @@ import {
 } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
 import Question from '@/components/Modals/Question.vue'
-import { showToast } from '../utils'
+import { showToast, updateDocumentTitle } from '@/utils'
 import { useRouter } from 'vue-router'
 
 const showQuestionModal = ref(false)
@@ -198,6 +232,7 @@ const quiz = reactive({
 	total_marks: 0,
 	passing_percentage: 0,
 	max_attempts: 0,
+	duration: 0,
 	limit_questions_to: 0,
 	show_answers: true,
 	show_submission_history: false,
@@ -306,7 +341,7 @@ const createQuiz = () => {
 			onSuccess(data) {
 				showToast(__('Success'), __('Quiz created successfully'), 'check')
 				router.push({
-					name: 'QuizCreation',
+					name: 'QuizForm',
 					params: { quizID: data.name },
 				})
 			},
@@ -347,17 +382,17 @@ const questionColumns = computed(() => {
 		{
 			label: __('ID'),
 			key: 'question',
-			width: '25%',
+			width: '10rem',
 		},
 		{
 			label: __('Question'),
 			key: __('question_detail'),
-			width: '60%',
+			width: '40rem',
 		},
 		{
 			label: __('Marks'),
 			key: 'marks',
-			width: '10%',
+			width: '5rem',
 		},
 	]
 })
@@ -375,24 +410,29 @@ const openQuestionModal = (question = null) => {
 	showQuestionModal.value = true
 }
 
-const deleteQuiz = createResource({
+const deleteQuestionResource = createResource({
-	url: 'frappe.client.delete',
+	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
 			doctype: 'LMS Quiz Question',
-			name: values.quiz,
+			documents: values.questions,
 		}
 	},
 })
 
-const deleteQuizzes = (selections, unselectAll) => {
+const deleteQuestions = (selections, unselectAll) => {
-	selections.forEach(async (quiz) => {
+	deleteQuestionResource.submit(
-		deleteQuiz.submit({ quiz })
+		{
-	})
+			questions: Array.from(selections),
-	setTimeout(() => {
+		},
-		quizDetails.reload()
+		{
-		unselectAll()
+			onSuccess() {
-	}, 500)
+				showToast(__('Success'), __('Questions deleted successfully'), 'check')
+				quizDetails.reload()
+				unselectAll()
+			},
+		}
+	)
 }
 
 const breadcrumbs = computed(() => {
@@ -410,9 +450,18 @@ const breadcrumbs = computed(() => {
 		})
 	} */
 	crumbs.push({
-		label: props.quizID == 'new' ? 'New Quiz' : quizDetails.data?.title,
+		label: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
-		route: { name: 'QuizCreation', params: { quizID: props.quizID } },
+		route: { name: 'QuizForm', params: { quizID: props.quizID } },
 	})
 	return crumbs
 })
+
+const pageMeta = computed(() => {
+	return {
+		title: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
+		description: __('Form to create and edit quizzes'),
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/QuizPage.vue

@@ -0,0 +1,58 @@
+<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" />
+	</header>
+	<div class="md:w-7/12 md:mx-auto mx-4 py-10">
+		<Quiz :quizName="quizID" />
+	</div>
+</template>
+<script setup>
+import Quiz from '@/components/Quiz.vue'
+import { createResource, Breadcrumbs } from 'frappe-ui'
+import { computed, inject, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { updateDocumentTitle } from '@/utils'
+
+const user = inject('$user')
+const router = useRouter()
+
+onMounted(() => {
+	if (!user.data) {
+		router.push({ name: 'Courses' })
+	}
+})
+
+const props = defineProps({
+	quizID: {
+		type: String,
+		required: true,
+	},
+})
+
+const title = createResource({
+	url: 'frappe.client.get_value',
+	params: {
+		doctype: 'LMS Quiz',
+		fieldname: 'title',
+		filters: {
+			name: props.quizID,
+		},
+	},
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	return [{ label: __('Quiz Submission') }, { label: title.data?.title }]
+})
+
+const pageMeta = computed(() => {
+	return {
+		title: title.data?.title,
+		description: __('Quiz Submission'),
+	}
+})
+
+updateDocumentTitle(pageMeta)
+</script>

frontend/src/pages/QuizSubmission.vue

@@ -0,0 +1,122 @@
+<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 v-if="submisisonDetails.doc" :items="breadcrumbs" />
+		<div class="space-x-2">
+			<Badge
+				v-if="submisisonDetails.isDirty"
+				:label="__('Not Saved')"
+				variant="subtle"
+				theme="orange"
+			/>
+			<Button variant="solid" @click="saveSubmission()">
+				{{ __('Save') }}
+			</Button>
+		</div>
+	</header>
+	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-4">
+		<div class="grid grid-cols-2 gap-5">
+			<FormControl
+				v-model="submisisonDetails.doc.quiz_title"
+				:label="__('Quiz')"
+				:disabled="true"
+			/>
+			<FormControl
+				v-model="submisisonDetails.doc.member_name"
+				:label="__('Member')"
+				:disabled="true"
+			/>
+		</div>
+
+		<div class="grid grid-cols-2 gap-5">
+			<FormControl
+				v-model="submisisonDetails.doc.score"
+				:label="__('Score')"
+				:disabled="true"
+			/>
+			<FormControl
+				v-model="submisisonDetails.doc.percentage"
+				:label="__('Percentage')"
+				:disabled="true"
+			/>
+		</div>
+
+		<div
+			v-for="row in submisisonDetails.doc.result"
+			class="border p-5 rounded-md space-y-4"
+		>
+			<div class="font-semibold">{{ row.idx }}. {{ row.question }}</div>
+			<div v-html="row.answer" class="leading-5"></div>
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl v-model="row.marks" :label="__('Marks')" />
+				<FormControl
+					v-model="row.marks_out_of"
+					:label="__('Marks out of')"
+					:disabled="true"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	createDocumentResource,
+	Breadcrumbs,
+	FormControl,
+	Button,
+	Badge,
+} from 'frappe-ui'
+import { computed, onMounted, inject } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from '@/utils'
+
+const router = useRouter()
+const user = inject('$user')
+
+onMounted(() => {
+	if (!user.data?.is_instructor && !user.data?.is_moderator)
+		router.push({ name: 'Courses' })
+})
+
+const props = defineProps({
+	submission: {
+		type: String,
+		required: true,
+	},
+})
+
+const submisisonDetails = createDocumentResource({
+	doctype: 'LMS Quiz Submission',
+	name: props.submission,
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Quiz Submissions'),
+			route: {
+				name: 'QuizSubmissionList',
+				params: {
+					quizID: submisisonDetails.doc.quiz,
+				},
+			},
+		},
+		{
+			label: submisisonDetails.doc.quiz_title,
+		},
+	]
+})
+
+const saveSubmission = () => {
+	submisisonDetails.save.submit(
+		{},
+		{
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
+		}
+	)
+}
+</script>

frontend/src/pages/QuizSubmissionList.vue

@@ -0,0 +1,104 @@
+<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" />
+	</header>
+	<div v-if="submissions.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<ListView
+			:columns="quizColumns"
+			:rows="submissions.data"
+			row-key="name"
+			:options="{ showTooltip: false, selectable: false }"
+		>
+			<ListHeader
+				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+			>
+				<ListHeaderItem :item="item" v-for="item in quizColumns">
+				</ListHeaderItem>
+			</ListHeader>
+			<ListRows>
+				<router-link
+					v-for="row in submissions.data"
+					:to="{
+						name: 'QuizSubmission',
+						params: {
+							submission: row.name,
+						},
+					}"
+				>
+					<ListRow :row="row" />
+				</router-link>
+			</ListRows>
+		</ListView>
+	</div>
+</template>
+<script setup>
+import {
+	createListResource,
+	Breadcrumbs,
+	ListView,
+	ListRow,
+	ListRows,
+	ListHeader,
+	ListHeaderItem,
+} from 'frappe-ui'
+import { computed, onMounted, inject } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const user = inject('$user')
+
+onMounted(() => {
+	if (!user.data?.is_instructor && !user.data?.is_moderator)
+		router.push({ name: 'Courses' })
+})
+
+const props = defineProps({
+	quizID: {
+		type: String,
+		required: true,
+	},
+})
+
+const submissions = createListResource({
+	doctype: 'LMS Quiz Submission',
+	filters: {
+		quiz: props.quizID,
+	},
+	fields: ['name', 'member_name', 'score', 'percentage', 'quiz_title'],
+	orderBy: 'creation desc',
+	auto: true,
+})
+
+const quizColumns = computed(() => {
+	return [
+		{
+			label: __('Member'),
+			key: 'member_name',
+			width: 2,
+		},
+		{
+			label: __('Quiz'),
+			key: 'quiz_title',
+			width: 2,
+		},
+		{
+			label: __('Score'),
+			key: 'score',
+			width: 1,
+			align: 'center',
+		},
+		{
+			label: __('Percentage'),
+			key: 'percentage',
+			width: 1,
+			align: 'center',
+		},
+	]
+})
+
+const breadcrumbs = computed(() => {
+	return [{ label: __('Quiz Submissions') }]
+})
+</script>

frontend/src/pages/Quizzes.vue

@@ -5,7 +5,7 @@
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
 			:to="{
-				name: 'QuizCreation',
+				name: 'QuizForm',
 				params: {
 					quizID: 'new',
 				},
@@ -19,7 +19,7 @@
 			</Button>
 		</router-link>
 	</header>
-	<div v-if="quizzes.data?.length" class="w-3/4 mx-auto py-5">
+	<div v-if="quizzes.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
 		<ListView
 			:columns="quizColumns"
 			:rows="quizzes.data"
@@ -36,7 +36,7 @@
 				<router-link
 					v-for="row in quizzes.data"
 					:to="{
-						name: 'QuizCreation',
+						name: 'QuizForm',
 						params: {
 							quizID: row.name,
 						},
@@ -47,6 +47,22 @@
 			</ListRows>
 		</ListView>
 	</div>
+	<div
+		v-else
+		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 quizzes found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'You have not created any quizzes yet. To create a new quiz, click on the "New Quiz" button above.'
+				)
+			}}
+		</div>
+	</div>
 </template>
 <script setup>
 import {
@@ -61,7 +77,8 @@ import {
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { computed, inject, onMounted } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { BookOpen, Plus } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'
 
 const user = inject('$user')
 const router = useRouter()
@@ -123,4 +140,13 @@ const breadcrumbs = computed(() => {
 		},
 	]
 })
+
+const pageMeta = computed(() => {
+	return {
+		title: __('Quizzes'),
+		description: __('List of quizzes'),
+	}
+})
+
+updateDocumentTitle(pageMeta)
 </script>

frontend/src/router.js

@@ -79,9 +79,15 @@ const routes = [
 			},
 			{
 				name: 'ProfileEvaluator',
-				path: 'evaluations',
+				path: 'slots',
 				component: () => import('@/pages/ProfileEvaluator.vue'),
 			},
+			{
+				name: 'ProfileEvaluationSchedule',
+				path: 'schedule',
+				component: () =>
+					import('@/pages/ProfileEvaluationSchedule.vue'),
+			},
 		],
 	},
 	{
@@ -148,8 +154,26 @@ const routes = [
 	},
 	{
 		path: '/quizzes/:quizID',
-		name: 'QuizCreation',
+		name: 'QuizForm',
-		component: () => import('@/pages/QuizCreation.vue'),
+		component: () => import('@/pages/QuizForm.vue'),
+		props: true,
+	},
+	{
+		path: '/quiz/:quizID',
+		name: 'QuizPage',
+		component: () => import('@/pages/QuizPage.vue'),
+		props: true,
+	},
+	{
+		path: '/quiz-submissions/:quizID',
+		name: 'QuizSubmissionList',
+		component: () => import('@/pages/QuizSubmissionList.vue'),
+		props: true,
+	},
+	{
+		path: '/quiz-submission/:submission',
+		name: 'QuizSubmission',
+		component: () => import('@/pages/QuizSubmission.vue'),
 		props: true,
 	},
 ]

frontend/src/stores/session.js

@@ -17,7 +17,7 @@ export const sessionStore = defineStore('lms-session', () => {
 	}
 
 	let user = ref(sessionUser())
-	if (user) {
+	if (user.value) {
 		allUsers.reload()
 	}
 	const isLoggedIn = computed(() => !!user.value)

frontend/src/stores/settings.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useSettings = defineStore('settings', () => {
+	const isSettingsOpen = ref(false)
+	const activeTab = ref(null)
+
+	return {
+		isSettingsOpen,
+		activeTab,
+	}
+})

frontend/src/utils/code.ts

@@ -62,7 +62,7 @@ export class CodeBox {
 
 	static get toolbox() {
 		const app = createApp({
-			render: () => h(Code, { size: 24, strokeWidth: 2, color: 'black' }),
+			render: () => h(Code, { size: 18, strokeWidth: 1.5, color: 'black' }),
 		});
 
 		const div = document.createElement('div');

frontend/src/utils/customEmbed.js

@@ -1,32 +0,0 @@
-import Embed from '@editorjs/embed'
-import VideoBlock from '@/components/VideoBlock.vue'
-import { createApp } from 'vue'
-
-export class CustomEmbed extends Embed {
-	render() {
-		const container = super.render()
-		const { service, source, embed } = this.data
-
-		if (service === 'youtube' || service === 'vimeo') {
-			// Remove the iframe or existing embed content
-			container.innerHTML = ''
-
-			// Create a placeholder element for Vue component
-			const vueContainer = document.createElement('div')
-			vueContainer.setAttribute('data-service', service)
-			vueContainer.setAttribute('data-video-id', this.data.source)
-
-			// Append the Vue placeholder
-			container.appendChild(vueContainer)
-			console.log(source)
-			// Mount the Vue component (using a global Vue instance)
-			const app = createApp(VideoBlock, {
-				file: source,
-				type: 'video/youtube',
-			})
-			app.mount(vueContainer)
-		}
-
-		return container
-	}
-}

frontend/src/utils/index.js

@@ -57,6 +57,15 @@ export function formatNumberIntoCurrency(number, currency) {
 	return ''
 }
 
+// create a function that formats numbers in thousands to k
+
+export function formatAmount(amount) {
+	if (amount > 999) {
+		return (amount / 1000).toFixed(1) + 'k'
+	}
+	return amount
+}
+
 export function convertToTitleCase(str) {
 	if (!str) {
 		return ''
@@ -82,10 +91,13 @@ export function getFileSize(file_size) {
 
 export function showToast(title, text, icon, iconClasses = null) {
 	if (!iconClasses) {
-		iconClasses =
+		if (icon == 'check') {
-			icon == 'check'
+			iconClasses = 'bg-green-600 text-white rounded-md p-px'
-				? 'bg-green-600 text-white rounded-md p-px'
+		} else if (icon == 'circle-warn') {
-				: 'bg-red-600 text-white rounded-md p-px'
+			iconClasses = 'bg-yellow-600 text-white rounded-md p-px'
+		} else {
+			iconClasses = 'bg-red-600 text-white rounded-md p-px'
+		}
 	}
 	createToast({
 		title: title,
@@ -149,9 +161,9 @@ export function getEditorTools() {
 			class: CodeBox,
 			config: {
 				themeURL:
-					'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/dracula.min.css', // Optional
+					'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css',
-				themeName: 'atom-one-dark', // Optional
+				themeName: 'atom-one-dark',
-				useDefaultTheme: 'dark', // Optional. This also determines the background color of the language select drop-down
+				useDefaultTheme: 'dark',
 			},
 		},
 		list: {
@@ -233,9 +245,9 @@ export function getEditorTools() {
 					},
 					github: true,
 					slides: {
-						regex: /https:\/\/docs\.google\.com\/presentation\/d\/e\/([A-Za-z0-9_-]+)\/pub/,
+						regex: /https:\/\/docs\.google\.com\/presentation\/d\/([A-Za-z0-9_-]+)\/pub/,
 						embedUrl:
-							'https://docs.google.com/presentation/d/e/<%= remote_id %>/embed',
+							'https://docs.google.com/presentation/d/<%= remote_id %>/embed',
 						html: "<iframe style='width: 100%; height: 30rem; border: 1px solid #D3D3D3; border-radius: 12px; margin: 1rem 0' frameborder='0' allowfullscreen='true'></iframe>",
 					},
 					drive: {
@@ -499,3 +511,10 @@ export function singularize(word) {
 		(r) => endings[r]
 	)
 }
+
+export const validateFile = (file) => {
+	let extension = file.name.split('.').pop().toLowerCase()
+	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
+		return __('Only image file is allowed.')
+	}
+}

frontend/src/utils/quiz.js

@@ -1,7 +1,9 @@
 import QuizBlock from '@/components/QuizBlock.vue'
-import { createApp } from 'vue'
+import QuizPlugin from '@/components/QuizPlugin.vue'
+import { createApp, h } from 'vue'
 import { usersStore } from '../stores/user'
 import translationPlugin from '../translation'
+import { CircleHelp } from 'lucide-vue-next'
 
 export class Quiz {
 	constructor({ data, api, readOnly }) {
@@ -9,17 +11,31 @@ export class Quiz {
 		this.readOnly = readOnly
 	}
 
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(CircleHelp, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+
+		return {
+			title: __('Quiz'),
+			icon: div.innerHTML,
+		}
+	}
+
 	static get isReadOnlySupported() {
 		return true
 	}
 
 	render() {
 		this.wrapper = document.createElement('div')
-		if (this.data) {
+		if (Object.keys(this.data).length) {
-			let renderedQuiz = this.renderQuiz(this.data.quiz)
+			this.renderQuiz(this.data.quiz)
-			if (!this.readOnly) {
+		} else {
-				this.wrapper.innerHTML = renderedQuiz
+			this.renderQuizModal()
-			}
 		}
 		return this.wrapper
 	}
@@ -27,7 +43,7 @@ export class Quiz {
 	renderQuiz(quiz) {
 		if (this.readOnly) {
 			const app = createApp(QuizBlock, {
-				quiz: quiz, // Pass quiz content as prop
+				quiz: quiz,
 			})
 			app.use(translationPlugin)
 			const { userResource } = usersStore()
@@ -35,11 +51,23 @@ export class Quiz {
 			app.mount(this.wrapper)
 			return
 		}
-		return `<div class='border rounded-md p-10 text-center mb-2'>
+		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-gray-50 mb-2'>
             <span class="font-medium">
                 Quiz: ${quiz}
             </span>
         </div>`
+		return
+	}
+
+	renderQuizModal() {
+		const app = createApp(QuizPlugin, {
+			onQuizAddition: (quiz) => {
+				this.data.quiz = quiz
+				this.renderQuiz(quiz)
+			},
+		})
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
 	}
 
 	save(blockContent) {

frontend/src/utils/upload.js

@@ -1,6 +1,9 @@
 import AudioBlock from '@/components/AudioBlock.vue'
 import VideoBlock from '@/components/VideoBlock.vue'
-import { createApp } from 'vue'
+import UploadPlugin from '@/components/UploadPlugin.vue'
+import { h, createApp } from 'vue'
+import { Upload as UploadIcon } from 'lucide-vue-next'
+import translationPlugin from '../translation'
 
 export class Upload {
 	constructor({ data, api, readOnly }) {
@@ -8,17 +11,38 @@ export class Upload {
 		this.readOnly = readOnly
 	}
 
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(UploadIcon, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+
+		return {
+			title: 'Upload',
+			icon: div.innerHTML,
+		}
+	}
+
 	static get isReadOnlySupported() {
 		return true
 	}
 
 	render() {
 		this.wrapper = document.createElement('div')
-		this.renderUpload(this.data)
+
+		if (this.data && this.data.file_url) {
+			this.renderFile(this.data)
+		} else {
+			this.renderFileUploader()
+		}
+
 		return this.wrapper
 	}
 
-	renderUpload(file) {
+	renderFile(file) {
 		if (this.isVideo(file.file_type)) {
 			const app = createApp(VideoBlock, {
 				file: file.file_url,
@@ -32,9 +56,11 @@ export class Upload {
 			app.mount(this.wrapper)
 			return
 		} else if (file.file_type == 'PDF') {
-			this.wrapper.innerHTML = `<iframe src="${encodeURI(
+			this.wrapper.innerHTML = `<iframe src="https://docs.google.com/viewer?url=${
+				window.location.origin
+			}${encodeURI(
 				file.file_url
-			)}#toolbar=0" width='100%' height='700px' class="mb-4"></iframe>`
+			)}&embedded=true" width='100%' height='700px' class="mb-4" type="application/pdf"></iframe>`
 			return
 		} else {
 			this.wrapper.innerHTML = `<img class="mb-4" src=${encodeURI(
@@ -44,6 +70,25 @@ export class Upload {
 		}
 	}
 
+	renderFileUploader() {
+		const app = createApp(UploadPlugin, {
+			onFileUploaded: (file) => {
+				this.data.file_url = file.file_url
+				this.data.file_type = file.file_type
+				this.renderFile(file)
+			},
+		})
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
+	}
+
+	validate(savedData) {
+		if (!savedData.file_url || !savedData.file_type) {
+			return false
+		}
+		return true
+	}
+
 	save(blockContent) {
 		return {
 			file_url: this.data.file_url,

lms/__init__.py

@@ -1 +1 @@
-__version__ = "2.3.0"
+__version__ = "2.11.0"

lms/config/desktop.py

@@ -1,13 +0,0 @@
-from frappe import _
-
-
-def get_data():
-	return [
-		{
-			"module_name": "Community",
-			"color": "grey",
-			"icon": "octicon octicon-file-directory",
-			"type": "module",
-			"label": _("Community"),
-		}
-	]

lms/config/docs.py

@@ -1,12 +0,0 @@
-"""
-Configuration for docs
-"""
-
-# source_link = "https://github.com/[org_name]/community"
-# docs_base_url = "https://[org_name].github.io/community"
-# headline = "App that does everything"
-# sub_heading = "Yes, you got that right the first time, everything"
-
-
-def get_context(context):
-	context.brand_html = "Community"

lms/fixtures/lms_category.json

@@ -0,0 +1,51 @@
+[
+ {
+  "category": "Web Development",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2024-09-20 12:58:16.841571",
+  "name": "Web Development"
+ },
+ {
+  "category": "Business",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2024-09-20 12:58:32.304850",
+  "name": "Business"
+ },
+ {
+  "category": "Design",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2024-09-20 12:59:12.621022",
+  "name": "Design"
+ },
+ {
+  "category": "Personal Development",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2024-09-20 12:59:19.287404",
+  "name": "Personal Development"
+ },
+ {
+  "category": "Finance",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2024-09-20 12:58:28.579714",
+  "name": "Finance"
+ },
+ {
+  "category": "Frontend",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2024-05-08 14:05:16.979275",
+  "name": "Frontend"
+ },
+ {
+  "category": "Framework",
+  "docstatus": 0,
+  "doctype": "LMS Category",
+  "modified": "2023-06-15 18:01:41.598282",
+  "name": "Framework"
+ }
+]

lms/hooks.py

@@ -4,9 +4,11 @@ app_name = "frappe_lms"
 app_title = "Frappe LMS"
 app_publisher = "Frappe"
 app_description = "Frappe LMS App"
-app_icon = "octicon octicon-file-directory"
+app_icon_url = "/assets/lms/images/lms-logo.png"
+app_icon_title = "Learning"
+app_icon_route = "/lms"
 app_color = "grey"
-app_email = "school@frappe.io"
+app_email = "jannat@frappe.io"
 app_license = "AGPL"
 
 # Includes in <head>
@@ -61,8 +63,6 @@ web_include_js = ["website.bundle.js"]
 after_install = "lms.install.after_install"
 after_sync = "lms.install.after_sync"
 before_uninstall = "lms.install.before_uninstall"
-
-
 setup_wizard_requires = "assets/lms/js/setup_wizard.js"
 
 # Desk Notifications
@@ -110,12 +110,13 @@ doc_events = {
 # ---------------
 scheduler_events = {
 	"hourly": [
-		"lms.lms.doctype.lms_certificate_request.lms_certificate_request.schedule_evals"
+		"lms.lms.doctype.lms_certificate_request.lms_certificate_request.schedule_evals",
+		"lms.lms.api.update_course_statistics",
 	],
 	"daily": ["lms.job.doctype.job_opportunity.job_opportunity.update_job_openings"],
 }
 
-fixtures = ["Custom Field", "Function", "Industry"]
+fixtures = ["Custom Field", "Function", "Industry", "LMS Category"]
 
 # Testing
 # -------
@@ -185,6 +186,7 @@ jinja = {
 		"lms.lms.utils.get_lesson_url",
 		"lms.page_renderers.get_profile_url",
 		"lms.overrides.user.get_palette",
+		"lms.lms.utils.is_instructor",
 	],
 	"filters": [],
 }
@@ -231,3 +233,13 @@ profile_url_prefix = "/users/"
 signup_form_template = "lms.plugins.show_custom_signup"
 
 on_session_creation = "lms.overrides.user.on_session_creation"
+
+add_to_apps_screen = [
+	{
+		"name": "lms",
+		"logo": "/assets/lms/images/lms-logo.png",
+		"title": "Learning",
+		"route": "/lms",
+		"has_permission": "lms.lms.api.check_app_permission",
+	}
+]

lms/install.py

@@ -1,10 +1,12 @@
 import frappe
 from frappe.desk.page.setup_wizard.setup_wizard import add_all_roles_to
+from lms.lms.api import give_dicussions_permission
 
 
 def after_install():
 	add_pages_to_nav()
 	create_batch_source()
+	give_dicussions_permission()
 
 
 def after_sync():

lms/job/doctype/lms_job_application/test_lms_job_application.py

@@ -2,8 +2,8 @@
 # See license.txt
 
 # import frappe
-from frappe.tests.utils import FrappeTestCase
+from frappe.tests import UnitTestCase
 
 
-class TestLMSJobApplication(FrappeTestCase):
+class TestLMSJobApplication(UnitTestCase):
 	pass

lms/lms/api.py

@@ -1,12 +1,15 @@
 """API methods for the LMS.
 """
 
+import json
 import frappe
 from frappe.translate import get_all_translations
 from frappe import _
 from frappe.query_builder import DocType
 from frappe.query_builder.functions import Count
-from frappe.utils import time_diff, now_datetime, get_datetime
+from frappe.utils import time_diff, now_datetime, get_datetime, flt
+from typing import Optional
+from lms.lms.utils import get_average_rating, get_lesson_count
 
 
 @frappe.whitelist()
@@ -288,11 +291,17 @@ def get_file_info(file_url):
 @frappe.whitelist(allow_guest=True)
 def get_branding():
 	"""Get branding details."""
-	return {
+	website_settings = frappe.get_single("Website Settings")
-		"brand_name": frappe.db.get_single_value("Website Settings", "app_name"),
+	image_fields = ["banner_image", "footer_logo", "favicon"]
-		"brand_html": frappe.db.get_single_value("Website Settings", "brand_html"),
+
-		"favicon": frappe.db.get_single_value("Website Settings", "favicon"),
+	for field in image_fields:
-	}
+		if website_settings.get(field):
+			file_info = get_file_info(website_settings.get(field))
+			website_settings.update({field: json.loads(json.dumps(file_info))})
+		else:
+			website_settings.update({field: None})
+
+	return website_settings
 
 
 @frappe.whitelist()
@@ -319,7 +328,7 @@ def get_evaluator_details(evaluator):
 		)
 
 	if frappe.db.exists("Course Evaluator", {"evaluator": evaluator}):
-		doc = frappe.get_doc("Course Evaluator", evaluator, as_dict=1)
+		doc = frappe.get_doc("Course Evaluator", evaluator)
 	else:
 		doc = frappe.new_doc("Course Evaluator")
 		doc.evaluator = evaluator
@@ -483,7 +492,15 @@ def delete_sidebar_item(webpage):
 
 @frappe.whitelist()
 def delete_lesson(lesson, chapter):
-	frappe.db.delete("Lesson Reference", {"parent": chapter, "lesson": lesson})
+	# Delete Reference
+	chapter = frappe.get_doc("Course Chapter", chapter)
+	chapter.lessons = [row for row in chapter.lessons if row.lesson != lesson]
+	chapter.save()
+
+	# Delete progress
+	frappe.db.delete("LMS Course Progress", {"lesson": lesson})
+
+	# Delete Lesson
 	frappe.db.delete("Course Lesson", lesson)
 
 
@@ -573,14 +590,17 @@ def get_members(start=0, search=""):
 	"""
 
 	filters = {"enabled": 1, "name": ["not in", ["Administrator", "Guest"]]}
+	or_filters = {}
 
 	if search:
-		filters["full_name"] = ["like", f"%{search}%"]
+		or_filters["full_name"] = ["like", f"%{search}%"]
+		or_filters["email"] = ["like", f"%{search}%"]
 
 	members = frappe.get_all(
 		"User",
 		filters=filters,
-		fields=["name", "full_name", "user_image", "username"],
+		fields=["name", "full_name", "user_image", "username", "last_active"],
+		or_filters=or_filters,
 		page_length=20,
 		start=start,
 	)
@@ -597,3 +617,262 @@ def get_members(start=0, search=""):
 			member.role = "LMS Student"
 
 	return members
+
+
+def check_app_permission():
+	"""Check if the user has permission to access the app."""
+	if frappe.session.user == "Administrator":
+		return True
+
+	roles = frappe.get_roles()
+	lms_roles = ["Moderator", "Course Creator", "Batch Evaluator", "LMS Student"]
+	if any(role in roles for role in lms_roles):
+		return True
+
+	return False
+
+
+@frappe.whitelist()
+def save_evaluation_details(
+	member,
+	course,
+	batch_name,
+	evaluator,
+	date,
+	start_time,
+	end_time,
+	status,
+	rating,
+	summary,
+):
+	"""
+	Save evaluation details for a member against a course.
+	"""
+	evaluation = frappe.db.exists(
+		"LMS Certificate Evaluation", {"member": member, "course": course}
+	)
+
+	details = {
+		"date": date,
+		"start_time": start_time,
+		"end_time": end_time,
+		"status": status,
+		"rating": rating / 5,
+		"summary": summary,
+		"batch_name": batch_name,
+	}
+
+	if evaluation:
+		frappe.db.set_value("LMS Certificate Evaluation", evaluation, details)
+		return evaluation
+	else:
+		doc = frappe.new_doc("LMS Certificate Evaluation")
+		details.update(
+			{
+				"member": member,
+				"course": course,
+				"evaluator": evaluator,
+			}
+		)
+		doc.update(details)
+		doc.insert()
+		return doc.name
+
+
+@frappe.whitelist()
+def save_certificate_details(
+	member,
+	course,
+	batch_name,
+	evaluator,
+	issue_date,
+	expiry_date,
+	template,
+	published=True,
+):
+	"""
+	Save certificate details for a member against a course.
+	"""
+	certificate = frappe.db.exists("LMS Certificate", {"member": member, "course": course})
+
+	details = {
+		"published": published,
+		"issue_date": issue_date,
+		"expiry_date": expiry_date,
+		"template": template,
+		"batch_name": batch_name,
+	}
+
+	if certificate:
+		frappe.db.set_value("LMS Certificate", certificate, details)
+		return certificate
+	else:
+		doc = frappe.new_doc("LMS Certificate")
+		details.update(
+			{
+				"member": member,
+				"course": course,
+				"evaluator": evaluator,
+			}
+		)
+		doc.update(details)
+		doc.insert()
+		return doc.name
+
+
+@frappe.whitelist()
+def delete_documents(doctype, documents):
+	frappe.only_for("Moderator")
+	for doc in documents:
+		frappe.delete_doc(doctype, doc)
+
+
+@frappe.whitelist()
+def get_payment_gateway_details(payment_gateway):
+	fields = []
+	gateway = frappe.get_doc("Payment Gateway", payment_gateway)
+
+	if gateway.gateway_controller is None:
+		try:
+			data = frappe.get_doc(f"{payment_gateway} Settings").as_dict()
+			meta = frappe.get_meta(f"{payment_gateway} Settings").fields
+			doctype = f"{payment_gateway} Settings"
+			docname = f"{payment_gateway} Settings"
+		except Exception:
+			frappe.throw(_("{0} Settings not found").format(payment_gateway))
+	else:
+		try:
+			data = frappe.get_doc(gateway.gateway_settings, gateway.gateway_controller).as_dict()
+			meta = frappe.get_meta(gateway.gateway_settings).fields
+			doctype = gateway.gateway_settings
+			docname = gateway.gateway_controller
+		except Exception:
+			frappe.throw(_("{0} Settings not found").format(payment_gateway))
+
+	for row in meta:
+		if row.fieldtype not in ["Column Break", "Section Break"]:
+			if row.fieldtype in ["Attach", "Attach Image"]:
+				fieldtype = "Upload"
+				data[row.fieldname] = get_file_info(data.get(row.fieldname))
+			else:
+				fieldtype = row.fieldtype
+
+			fields.append(
+				{
+					"label": row.label,
+					"name": row.fieldname,
+					"type": fieldtype,
+				}
+			)
+
+	return {
+		"fields": fields,
+		"data": data,
+		"doctype": doctype,
+		"docname": docname,
+	}
+
+
+def update_course_statistics():
+	courses = frappe.get_all("LMS Course", fields=["name"])
+
+	for course in courses:
+		lessons = get_lesson_count(course.name)
+
+		enrollments = frappe.db.count(
+			"LMS Enrollment", {"course": course.name, "member_type": "Student"}
+		)
+
+		avg_rating = get_average_rating(course.name) or 0
+		avg_rating = flt(avg_rating, frappe.get_system_settings("float_precision") or 3)
+
+		frappe.db.set_value(
+			"LMS Course",
+			course.name,
+			{"lessons": lessons, "enrollments": enrollments, "rating": avg_rating},
+		)
+
+
+@frappe.whitelist()
+def get_announcements(batch):
+	return frappe.get_all(
+		"Communication",
+		filters={
+			"reference_doctype": "LMS Batch",
+			"reference_name": batch,
+		},
+		fields=[
+			"subject",
+			"content",
+			"recipients",
+			"cc",
+			"communication_date",
+			"sender",
+			"sender_full_name",
+		],
+		order_by="communication_date desc",
+	)
+
+
+@frappe.whitelist()
+def delete_course(course):
+
+	chapters = frappe.get_all("Course Chapter", {"course": course}, pluck="name")
+
+	chapter_references = frappe.get_all(
+		"Chapter Reference", {"parent": course}, pluck="name"
+	)
+
+	for chapter in chapters:
+		lessons = frappe.get_all("Course Lesson", {"chapter": chapter}, pluck="name")
+
+		lesson_references = frappe.get_all(
+			"Lesson Reference", {"parent": chapter}, pluck="name"
+		)
+
+		for lesson in lesson_references:
+			frappe.delete_doc("Lesson Reference", lesson)
+
+		for lesson in lessons:
+			frappe.db.delete("LMS Course Progress", {"lesson": lesson})
+
+			topics = frappe.get_all(
+				"Discussion Topic",
+				{"reference_doctype": "Course Lesson", "reference_docname": lesson},
+				pluck="name",
+			)
+
+			for topic in topics:
+				frappe.db.delete("Discussion Reply", {"topic": topic})
+
+				frappe.db.delete("Discussion Topic", topic)
+
+			frappe.delete_doc("Course Lesson", lesson)
+
+	for chapter in chapter_references:
+		frappe.delete_doc("Chapter Reference", chapter)
+
+	for chapter in chapters:
+		frappe.delete_doc("Course Chapter", chapter)
+
+	frappe.db.delete("LMS Enrollment", {"course": course})
+	frappe.delete_doc("LMS Course", course)
+
+
+def give_dicussions_permission():
+	doctypes = ["Discussion Topic", "Discussion Reply"]
+	roles = ["LMS Student", "Course Creator", "Moderator", "Batch Evaluator"]
+	for doctype in doctypes:
+		for role in roles:
+			if not frappe.db.exists("Custom DocPerm", {"parent": doctype, "role": role}):
+				frappe.get_doc(
+					{
+						"doctype": "Custom DocPerm",
+						"parent": doctype,
+						"role": role,
+						"read": 1,
+						"write": 1,
+						"create": 1,
+						"delete": 1,
+					}
+				).save(ignore_permissions=True)

lms/lms/doctype/batch_student/batch_student.py

@@ -7,17 +7,3 @@ from frappe.model.document import Document
 
 class BatchStudent(Document):
 	pass
-
-
-@frappe.whitelist()
-def enroll_batch(batch_name):
-	if frappe.db.exists(
-		"Batch Student", {"student": frappe.session.user, "parent": batch_name}
-	):
-		frappe.throw("You are already enrolled in this batch")
-	enrollment = frappe.new_doc("Batch Student")
-	enrollment.student = frappe.session.user
-	enrollment.parent = batch_name
-	enrollment.parentfield = "students"
-	enrollment.parenttype = "LMS Batch"
-	enrollment.save(ignore_permissions=True)

lms/lms/doctype/batch_student/test_batch_student.py

@@ -2,8 +2,8 @@
 # See license.txt
 
 # import frappe
-from frappe.tests.utils import FrappeTestCase
+from frappe.tests import UnitTestCase
 
 
-class TestBatchStudent(FrappeTestCase):
+class TestBatchStudent(UnitTestCase):
 	pass

lms/lms/doctype/course_chapter/course_chapter.json

@@ -9,9 +9,8 @@
  "engine": "InnoDB",
  "field_order": [
   "course",
-  "title",
   "column_break_3",
-  "description",
+  "title",
   "section_break_5",
   "lessons"
  ],
@@ -35,11 +34,6 @@
    "fieldname": "column_break_3",
    "fieldtype": "Column Break"
   },
-  {
-   "fieldname": "description",
-   "fieldtype": "Small Text",
-   "label": "Description"
-  },
   {
    "fieldname": "section_break_5",
    "fieldtype": "Section Break"
@@ -59,7 +53,7 @@
    "link_fieldname": "chapter"
   }
  ],
- "modified": "2023-09-29 17:03:58.013819",
+ "modified": "2024-10-29 16:54:20.904683",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Chapter",

lms/lms/doctype/course_chapter/course_chapter.py

@@ -1,11 +1,27 @@
 # Copyright (c) 2021, FOSS United and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
 from frappe.model.document import Document
-from frappe.utils.telemetry import capture
+from lms.lms.utils import get_course_progress
+from lms.lms.api import update_course_statistics
 
 
 class CourseChapter(Document):
-	def after_insert(self):
+	def on_update(self):
-		capture("chapter_created", "lms")
+		self.recalculate_course_progress()
+		update_course_statistics()
+
+	def recalculate_course_progress(self):
+		previous_lessons = (
+			self.get_doc_before_save() and self.get_doc_before_save().as_dict().lessons
+		)
+		current_lessons = self.lessons
+
+		if previous_lessons and previous_lessons != current_lessons:
+			enrolled_members = frappe.get_all(
+				"LMS Enrollment", {"course": self.course}, ["member", "name"]
+			)
+			for enrollment in enrolled_members:
+				new_progress = get_course_progress(self.course, enrollment.member)
+				frappe.db.set_value("LMS Enrollment", enrollment.name, "progress", new_progress)

lms/lms/doctype/course_evaluator/test_course_evaluator.py

@@ -2,8 +2,8 @@
 # See license.txt
 
 # import frappe
-from frappe.tests.utils import FrappeTestCase
+from frappe.tests import UnitTestCase
 
 
-class TestCourseEvaluator(FrappeTestCase):
+class TestCourseEvaluator(UnitTestCase):
 	pass