chore(release): Bumped to Version 2.28.1

fix: misc issues

.github/workflows/make_release_pr.yml

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

.github/workflows/ui-tests.yml

@@ -100,11 +100,12 @@ jobs:
           bench --site lms.test execute frappe.utils.install.complete_setup_wizard
           bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
           bench --site lms.test set-password frappe@example.com admin
+          bench --site lms.test execute lms.lms.utils.persona_captured
 
       - name: cypress pre-requisites
         run: |
           cd ~/frappe-bench/apps/lms
-          yarn add cypress@^10 --no-lockfile
+          yarn add cypress@^10 --no-lockfile -W
 
       - name: UI Tests
         run: cd ~/frappe-bench/ && bench --site lms.test run-ui-tests lms --headless

commitlint.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	parserPreset: "conventional-changelog-conventionalcommits",
 	rules: {
 		"subject-empty": [2, "never"],

cypress.config.js

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

cypress/e2e/course_creation.cy.js

@@ -19,12 +19,16 @@ describe("Course Creation", () => {
 		);
 
 		cy.fixture("profile.png", "base64").then((fileContent) => {
-			cy.get('input[type="file"]').attachFile({
-				fileContent,
-				fileName: "profile.png",
-				mimeType: "image/png",
-				encoding: "base64",
-			});
+			cy.get("div")
+				.contains("Course Image")
+				.siblings("div")
+				.children('input[type="file"]')
+				.attachFile({
+					fileContent,
+					fileName: "profile.png",
+					mimeType: "image/png",
+					encoding: "base64",
+				});
 		});
 
 		cy.get("label")

docker/init.sh

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

frontend/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
     Assessments: typeof import('./src/components/Assessments.vue')['default']
     Assignment: typeof import('./src/components/Assignment.vue')['default']
+    AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
     AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
     Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
     BatchCard: typeof import('./src/components/BatchCard.vue')['default']
@@ -46,6 +47,7 @@ declare module 'vue' {
     Discussions: typeof import('./src/components/Discussions.vue')['default']
     EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
     EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
+    EmptyState: typeof import('./src/components/EmptyState.vue')['default']
     EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
     Evaluators: typeof import('./src/components/Evaluators.vue')['default']
     Event: typeof import('./src/components/Modals/Event.vue')['default']
@@ -68,9 +70,9 @@ declare module 'vue' {
     NoPermission: typeof import('./src/components/NoPermission.vue')['default']
     NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
     NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
-    OnboardingBanner: typeof import('./src/components/OnboardingBanner.vue')['default']
     PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
     PaymentSettings: typeof import('./src/components/PaymentSettings.vue')['default']
+    Play: typeof import('./src/components/Icons/Play.vue')['default']
     ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
     Question: typeof import('./src/components/Modals/Question.vue')['default']
     Quiz: typeof import('./src/components/Quiz.vue')['default']

frontend/index.html

@@ -26,12 +26,8 @@
 				<a href="{{ meta.link }}">Know More</a>
 			</div>
 		</div>
-		<div id="modals"></div>
-		<div id="popovers"></div>
-
 		<script>
 			document.getElementById('seo-content').style.display = 'none';
-			window.csrf_token = '{{ csrf_token }}'
 		</script>
 		<script type="module" src="/src/main.js"></script>
 	</body>

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frappe-ui-frontend",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -26,11 +27,12 @@
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.122",
+    "frappe-ui": "^0.1.143",
     "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
+    "plyr": "^3.7.8",
     "socket.io-client": "^4.7.2",
     "tailwindcss": "3.4.15",
     "typescript": "^5.7.2",

frontend/postcss.config.js

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

frontend/src/App.vue

@@ -1,12 +1,13 @@
 <template>
-	<Layout>
-		<router-view />
-	</Layout>
-	<Dialogs />
-	<Toasts />
+	<FrappeUIProvider>
+		<Layout>
+			<router-view />
+		</Layout>
+		<Dialogs />
+	</FrappeUIProvider>
 </template>
 <script setup>
-import { Toasts } from 'frappe-ui'
+import { FrappeUIProvider } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
@@ -24,7 +25,7 @@ const router = useRouter()
 const noSidebar = ref(false)
 
 router.beforeEach((to, from, next) => {
-	if (to.query.fromLesson) {
+	if (to.query.fromLesson || to.path === '/persona') {
 		noSidebar.value = true
 	} else {
 		noSidebar.value = false

frontend/src/components/AppSidebar.vue

@@ -39,7 +39,11 @@
 							{{ __('More') }}
 						</span>
 					</div>
-					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
+					<Button
+						v-if="isModerator && !readOnlyMode"
+						variant="ghost"
+						@click="openPageModal()"
+					>
 						<template #icon>
 							<Plus class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
 						</template>
@@ -63,6 +67,16 @@
 			</div>
 		</div>
 		<div class="m-2 flex flex-col gap-1">
+			<div
+				v-if="readOnlyMode && !sidebarStore.isSidebarCollapsed"
+				class="z-10 m-2 bg-surface-modal py-2.5 px-3 text-xs text-ink-gray-7 leading-5 rounded-md"
+			>
+				{{
+					__(
+						'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
+					)
+				}}
+			</div>
 			<TrialBanner
 				v-if="
 					userResource.data?.is_system_manager && userResource.data?.is_fc_site
@@ -74,43 +88,69 @@
 				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
 				appName="learning"
 			/>
-			<SidebarLink
-				v-if="isOnboardingStepsCompleted"
-				:link="{
-					label: __('Help'),
-				}"
-				:isCollapsed="sidebarStore.isSidebarCollapsed"
-				@click="
-					() => {
-						showHelpModal = minimize ? true : !showHelpModal
-						minimize = !showHelpModal
-					}
+
+			<div
+				class="flex items-center mt-4"
+				:class="
+					sidebarStore.isSidebarCollapsed ? 'flex-col space-y-3' : 'flex-row'
 				"
 			>
-				<template #icon>
-					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-						<CircleHelp class="h-4 w-4 stroke-1.5" />
-					</span>
-				</template>
-			</SidebarLink>
-			<SidebarLink
-				:link="{
-					label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
-				}"
-				:isCollapsed="sidebarStore.isSidebarCollapsed"
-				@click="toggleSidebar()"
-			>
-				<template #icon>
-					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-						<CollapseSidebar
-							class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
-							:class="{
-								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
-							}"
+				<div
+					class="flex items-center flex-1"
+					:class="
+						sidebarStore.isSidebarCollapsed
+							? 'flex-col space-y-3'
+							: 'flex-row space-x-3'
+					"
+				>
+					<Tooltip v-if="readOnlyMode && sidebarStore.isSidebarCollapsed">
+						<CircleAlert
+							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
 						/>
-					</span>
-				</template>
-			</SidebarLink>
+						<template #body>
+							<div
+								class="max-w-[30ch] rounded bg-surface-gray-7 px-2 py-1 text-center text-p-xs text-ink-white shadow-xl"
+							>
+								{{
+									__(
+										'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
+									)
+								}}
+							</div>
+						</template>
+					</Tooltip>
+					<Tooltip :text="__('Powered by Learning')">
+						<Zap
+							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
+							@click="redirectToWebsite()"
+						/>
+					</Tooltip>
+					<Tooltip v-if="showOnboarding" :text="__('Help')">
+						<CircleHelp
+							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
+							@click="
+								() => {
+									showHelpModal = minimize ? true : !showHelpModal
+									minimize = !showHelpModal
+								}
+							"
+						/>
+					</Tooltip>
+				</div>
+				<Tooltip
+					:text="
+						sidebarStore.isSidebarCollapsed ? __('Expand') : __('Collapse')
+					"
+				>
+					<CollapseSidebar
+						class="size-4 text-ink-gray-7 duration-300 stroke-1.5 ease-in-out cursor-pointer"
+						:class="{
+							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+						}"
+						@click="toggleSidebar()"
+					/>
+				</Tooltip>
+			</div>
 		</div>
 		<HelpModal
 			v-if="showOnboarding && showHelpModal"
@@ -148,7 +188,7 @@ import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
-import { Button, createResource } from 'frappe-ui'
+import { Button, createResource, Tooltip } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 import { capture } from '@/telemetry'
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
@@ -156,6 +196,7 @@ import { useRouter } from 'vue-router'
 import InviteIcon from './Icons/InviteIcon.vue'
 import {
 	BookOpen,
+	CircleAlert,
 	ChevronRight,
 	Plus,
 	CircleHelp,
@@ -164,6 +205,7 @@ import {
 	UserPlus,
 	Users,
 	BookText,
+	Zap,
 } from 'lucide-vue-next'
 import {
 	TrialBanner,
@@ -192,6 +234,7 @@ const currentStep = ref({})
 const router = useRouter()
 let onboardingDetails
 let isOnboardingStepsCompleted = false
+const readOnlyMode = window.read_only_mode
 const iconProps = {
 	strokeWidth: 1.5,
 	width: 16,
@@ -578,4 +621,8 @@ watch(userResource, () => {
 		setUpOnboarding()
 	}
 })
+
+const redirectToWebsite = () => {
+	window.open('https://frappe.io/learning', '_blank')
+}
 </script>

frontend/src/components/Apps.vue

@@ -3,7 +3,7 @@
 		<template #target="{ togglePopover }">
 			<button
 				:class="[
-					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-8 hover:bg-surface-gray-2',
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
 				]"
 				@click.prevent="togglePopover()"
 			>

frontend/src/components/Assessments.vue

@@ -4,7 +4,7 @@
 			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Assessments') }}
 			</div>
-			<Button v-if="canSeeAddButton()" @click="showModal = true">
+			<Button v-if="canAddAssessments()" @click="showModal = true">
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
@@ -100,6 +100,7 @@ import { Plus, Trash2 } from 'lucide-vue-next'
 
 const user = inject('$user')
 const showModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -181,7 +182,8 @@ const getRowRoute = (row) => {
 	}
 }
 
-const canSeeAddButton = () => {
+const canAddAssessments = () => {
+	if (readOnlyMode) return false
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
 

frontend/src/components/Assignment.vue

@@ -191,10 +191,11 @@ import {
 	FileUploader,
 	FormControl,
 	TextEditor,
+	toast,
 } from 'frappe-ui'
 import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { showToast, getFileSize } from '@/utils'
+import { getFileSize } from '@/utils'
 import { useRouter } from 'vue-router'
 
 const submissionFile = ref(null)
@@ -284,7 +285,7 @@ const submissionResource = createDocumentResource({
 	doctype: 'LMS Assignment Submission',
 	name: props.submissionName,
 	onError(err) {
-		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 	auto: false,
 	cache: [user.data?.name, props.assignmentID],
@@ -338,7 +339,7 @@ const submitAssignment = () => {
 			},
 			{
 				onSuccess(data) {
-					showToast(__('Success'), __('Changes saved successfully'), 'check')
+					toast.success(__('Changes saved successfully'))
 				},
 			}
 		)
@@ -352,7 +353,7 @@ const addNewSubmission = () => {
 		{},
 		{
 			onSuccess(data) {
-				showToast('Success', 'Assignment submitted successfully.', 'check')
+				toast.success(__('Assignment submitted successfully'))
 				if (router.currentRoute.value.name == 'AssignmentSubmission') {
 					router.push({
 						name: 'AssignmentSubmission',
@@ -370,7 +371,7 @@ const addNewSubmission = () => {
 				submissionResource.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/BatchCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col border-2 hover:bg-surface-gray-2 rounded-md p-4 h-full"
+		class="flex flex-col border hover:border-outline-gray-4 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">

frontend/src/components/BatchCourses.vue

@@ -86,9 +86,10 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
+	toast,
 } from 'frappe-ui'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { showToast } from '@/utils'
+const readOnlyMode = window.read_only_mode
 
 const showCourseModal = ref(false)
 const user = inject('$user')
@@ -151,7 +152,7 @@ const removeCourses = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				courses.reload()
-				showToast(__('Success'), __('Courses deleted successfully'), 'check')
+				toast.success(__('Courses deleted successfully'))
 				unselectAll()
 			},
 		}
@@ -159,6 +160,9 @@ const removeCourses = (selections, unselectAll) => {
 }
 
 const canSeeAddButton = () => {
+	if (readOnlyMode) {
+		return false
+	}
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
 </script>

frontend/src/components/BatchFeedback.vue

@@ -111,7 +111,6 @@ import {
 	FormControl,
 	ListView,
 	ListHeader,
-	ListHeaderItem,
 	ListRows,
 	ListRow,
 	ListRowItem,

frontend/src/components/BatchOverlay.vue

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

frontend/src/components/BatchStudents.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="">
+	<div v-if="batch.data" class="">
 		<div class="w-full flex items-center justify-between pb-4">
 			<div class="font-medium text-ink-gray-7">
 				{{ __('Statistics') }}
@@ -46,7 +46,7 @@
 				</div>
 				<div class="flex items-center space-x-2">
 					<span class="font-semibold">
-						{{ batch.courses?.length }}
+						{{ batch.data.courses?.length }}
 					</span>
 					<span>
 						{{ __('Courses') }}
@@ -110,7 +110,7 @@
 			<div class="text-ink-gray-7 font-medium">
 				{{ __('Students') }}
 			</div>
-			<Button @click="openStudentModal()">
+			<Button v-if="!readOnlyMode" @click="openStudentModal()">
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
@@ -201,9 +201,10 @@
 	</div>
 
 	<StudentModal
-		:batch="props.batch.name"
+		:batch="props.batch.data.name"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
+		v-model:batchModal="props.batch"
 	/>
 	<BatchStudentProgress
 		:student="selectedStudent"
@@ -223,6 +224,7 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
+	toast,
 } from 'frappe-ui'
 import {
 	BookOpen,
@@ -234,7 +236,6 @@ import {
 } from 'lucide-vue-next'
 import { ref, watch } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
-import { showToast } from '@/utils'
 import ProgressBar from '@/components/ProgressBar.vue'
 import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue'
 import ApexChart from 'vue3-apexcharts'
@@ -247,6 +248,7 @@ const chartData = ref(null)
 const chartOptions = ref(null)
 const showProgressChart = ref(false)
 const assessmentCount = ref(0)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -257,15 +259,15 @@ const props = defineProps({
 
 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
-	cache: ['students', props.batch.name],
 	params: {
-		batch: props.batch?.name,
+		batch: props.batch?.data?.name,
 	},
 	auto: true,
 	onSuccess(data) {
 		chartData.value = getChartData()
 		showProgressChart.value =
-			data.length && (props.batch?.courses?.length || assessmentCount.value)
+			data.length &&
+			(props.batch?.data?.courses?.length || assessmentCount.value)
 	},
 })
 
@@ -322,7 +324,8 @@ const removeStudents = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				students.reload()
-				showToast(__('Success'), __('Students deleted successfully'), 'check')
+				props.batch.reload()
+				toast.success(__('Students deleted successfully'))
 				unselectAll()
 			},
 		}
@@ -433,7 +436,7 @@ const certificationCount = createResource({
 	params: {
 		doctype: 'LMS Certificate',
 		filters: {
-			batch_name: props.batch.name,
+			batch_name: props.batch?.data?.name,
 		},
 	},
 	auto: true,

frontend/src/components/Categories.vue

@@ -5,10 +5,11 @@
 				{{ label }}
 			</div>
 			<Button @click="() => showCategoryForm()">
-				<template #icon>
+				<template #prefix>
 					<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
 					<X v-else class="h-3 w-3 stroke-1.5" />
 				</template>
+				{{ showForm ? __('Close') : __('New') }}
 			</Button>
 		</div>
 
@@ -28,12 +29,11 @@
 		</div>
 
 		<div class="overflow-y-scroll">
-			<div class="text-base divide-y space-y-2">
+			<div class="text-base space-y-2">
 				<FormControl
 					:value="cat.category"
 					type="text"
 					v-for="cat in categories.data"
-					class=""
 					@change.stop="(e) => update(cat.name, e.target.value)"
 				/>
 			</div>

frontend/src/components/Controls/Autocomplete.vue

@@ -28,9 +28,7 @@
 			</template>
 			<template #body="{ isOpen }">
 				<div v-show="isOpen">
-					<div
-						class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
-					>
+					<div class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2">
 						<div class="relative px-1.5 pt-0.5">
 							<ComboboxInput
 								ref="search"
@@ -49,7 +47,7 @@
 								class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
 								@click="selectedValue = null"
 							>
-								<X class="h-4 w-4 stroke-1.5" />
+								<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
 							</button>
 						</div>
 						<ComboboxOptions
@@ -89,12 +87,15 @@
 											name="item-label"
 											v-bind="{ active, selected, option }"
 										>
-											<div class="flex flex-col space-y-1">
+											<div class="flex flex-col space-y-1 text-ink-gray-8">
 												<div>
 													{{ option.label }}
 												</div>
 												<div
-													v-if="option.description"
+													v-if="
+														option.description &&
+														option.description != option.label
+													"
 													class="text-xs text-ink-gray-7"
 													v-html="option.description"
 												></div>

frontend/src/components/Controls/Link.vue

@@ -34,7 +34,7 @@
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
-						label="Create New"
+						:label="__('Create New')"
 						@click="attrs.onCreate(value, close)"
 					>
 						<template #prefix>

frontend/src/components/Controls/MultiSelect.vue

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

frontend/src/components/CourseCard.vue

@@ -9,16 +9,20 @@
 			:class="{ 'default-image': !course.image }"
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
-			<div
-				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
-			>
-				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
+			<div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
+				<Badge
+					v-if="course.featured"
+					variant="subtle"
+					theme="green"
+					size="md"
+					class="mb-1 mr-1"
+				>
 					{{ __('Featured') }}
 				</Badge>
 				<div
 					v-if="course.tags"
 					v-for="tag in course.tags?.split(', ')"
-					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
+					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md mb-1 mr-1"
 				>
 					{{ tag }}
 				</div>

frontend/src/components/CourseCardOverlay.vue

@@ -9,88 +9,94 @@
 			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
-			<div v-if="course.data.membership" class="space-y-2">
+			<div v-if="!readOnlyMode">
+				<div v-if="course.data.membership" class="space-y-2">
+					<router-link
+						:to="{
+							name: 'Lesson',
+							params: {
+								courseName: course.name,
+								chapterNumber: course.data.current_lesson
+									? course.data.current_lesson.split('-')[0]
+									: 1,
+								lessonNumber: course.data.current_lesson
+									? course.data.current_lesson.split('-')[1]
+									: 1,
+							},
+						}"
+					>
+						<Button variant="solid" size="md" class="w-full">
+							<span>
+								{{ __('Continue Learning') }}
+							</span>
+						</Button>
+					</router-link>
+					<CertificationLinks :courseName="course.data.name" class="w-full" />
+				</div>
 				<router-link
+					v-else-if="course.data.paid_course"
 					:to="{
-						name: 'Lesson',
+						name: 'Billing',
 						params: {
-							courseName: course.name,
-							chapterNumber: course.data.current_lesson
-								? course.data.current_lesson.split('-')[0]
-								: 1,
-							lessonNumber: course.data.current_lesson
-								? course.data.current_lesson.split('-')[1]
-								: 1,
+							type: 'course',
+							name: course.data.name,
 						},
 					}"
 				>
 					<Button variant="solid" size="md" class="w-full">
 						<span>
-							{{ __('Continue Learning') }}
+							{{ __('Buy this course') }}
 						</span>
 					</Button>
 				</router-link>
-				<CertificationLinks :courseName="course.data.name" class="w-full" />
-			</div>
-			<router-link
-				v-else-if="course.data.paid_course"
-				:to="{
-					name: 'Billing',
-					params: {
-						type: 'course',
-						name: course.data.name,
-					},
-				}"
-			>
-				<Button variant="solid" size="md" class="w-full">
+				<Badge
+					v-else-if="course.data.disable_self_learning"
+					theme="blue"
+					size="lg"
+				>
+					{{ __('Contact the Administrator to enroll for this course.') }}
+				</Badge>
+				<Button
+					v-else
+					@click="enrollStudent()"
+					variant="solid"
+					class="w-full"
+					size="md"
+				>
 					<span>
-						{{ __('Buy this course') }}
+						{{ __('Start Learning') }}
 					</span>
 				</Button>
-			</router-link>
-			<div
-				v-else-if="course.data.disable_self_learning"
-				class="bg-surface-blue-2 text-blue-900 text-sm rounded-md py-1 px-3"
-			>
-				{{ __('Contact the Administrator to enroll for this course.') }}
-			</div>
-			<Button
-				v-else
-				@click="enrollStudent()"
-				variant="solid"
-				class="w-full"
-				size="md"
-			>
-				<span>
-					{{ __('Start Learning') }}
-				</span>
-			</Button>
-			<Button
-				v-if="canGetCertificate"
-				@click="fetchCertificate()"
-				variant="subtle"
-				class="w-full mt-2"
-				size="md"
-			>
-				{{ __('Get Certificate') }}
-			</Button>
-			<router-link
-				v-if="user?.data?.is_moderator || is_instructor()"
-				:to="{
-					name: 'CourseForm',
-					params: {
-						courseName: course.data.name,
-					},
-				}"
-			>
-				<Button variant="subtle" class="w-full mt-2" size="md">
-					<span>
-						{{ __('Edit') }}
-					</span>
+				<Button
+					v-if="canGetCertificate"
+					@click="fetchCertificate()"
+					variant="subtle"
+					class="w-full mt-2"
+					size="md"
+				>
+					{{ __('Get Certificate') }}
 				</Button>
-			</router-link>
+				<router-link
+					v-if="user?.data?.is_moderator || is_instructor()"
+					:to="{
+						name: 'CourseForm',
+						params: {
+							courseName: course.data.name,
+						},
+					}"
+				>
+					<Button variant="subtle" class="w-full mt-2" size="md">
+						<span>
+							{{ __('Edit') }}
+						</span>
+					</Button>
+				</router-link>
+			</div>
 			<div class="space-y-4">
-				<div class="mt-8 font-medium text-ink-gray-9">
+				<div
+					class="font-medium text-ink-gray-9"
+					:class="{ 'mt-8': !readOnlyMode }"
+				>
 					{{ __('This course has:') }}
 				</div>
 				<div class="flex items-center text-ink-gray-9">
@@ -140,14 +146,15 @@
 <script setup>
 import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource, Tooltip } from 'frappe-ui'
-import { showToast, formatAmount } from '@/utils/'
+import { Badge, Button, createResource, toast } from 'frappe-ui'
+import { formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 import CertificationLinks from '@/components/CertificationLinks.vue'
 
 const router = useRouter()
 const user = inject('$user')
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	course: {
@@ -165,14 +172,10 @@ const video_link = computed(() => {
 
 function enrollStudent() {
 	if (!user.data) {
-		showToast(
-			__('Please Login'),
-			__('You need to login first to enroll for this course'),
-			'alert-circle'
-		)
+		toast.success(__('You need to login first to enroll for this course'))
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
-		}, 2000)
+		}, 1000)
 	} else {
 		const enrollStudentResource = createResource({
 			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
@@ -185,11 +188,7 @@ function enrollStudent() {
 				capture('enrolled_in_course', {
 					course: props.course.data.name,
 				})
-				showToast(
-					__('Success'),
-					__('You have been enrolled in this course'),
-					'check'
-				)
+				toast.success(__('You have been enrolled in this course'))
 				setTimeout(() => {
 					router.push({
 						name: 'Lesson',

frontend/src/components/CourseOutline.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="h-full">
+	<div class="">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
 			class="flex items-center justify-between space-x-2 mb-4 px-2"
@@ -17,9 +17,6 @@
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
 				{{ __('Add Chapter') }}
 			</Button>
-			<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">
-				{{ expandAll ? __("Collapse all chapters") : __("Expand all chapters") }}
-			</span> -->
 		</div>
 		<div
 			:class="{
@@ -150,7 +147,7 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource, Tooltip } from 'frappe-ui'
+import { Button, createResource, Tooltip, toast } from 'frappe-ui'
 import { getCurrentInstance, inject, ref } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
@@ -165,7 +162,6 @@ import {
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
-import { showToast } from '@/utils'
 
 const route = useRoute()
 const router = useRouter()
@@ -218,7 +214,7 @@ const deleteLesson = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		showToast('Success', 'Lesson deleted successfully', 'check')
+		toast.success(__('Lesson deleted successfully'))
 	},
 })
 
@@ -233,7 +229,7 @@ const updateLessonIndex = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Lesson moved successfully', 'check')
+		toast.success(__('Lesson moved successfully'))
 	},
 })
 
@@ -291,7 +287,7 @@ const deleteChapter = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		showToast('Success', 'Chapter deleted successfully', 'check')
+		toast.success(__('Chapter deleted successfully'))
 	},
 })
 
@@ -320,11 +316,7 @@ const redirectToChapter = (chapter) => {
 	event.preventDefault()
 	if (props.allowEdit) return
 	if (!user.data) {
-		showToast(
-			__('You are not enrolled'),
-			__('Please enroll for this course to view this lesson'),
-			'alert-circle'
-		)
+		toast.success(__('Please enroll for this course to view this lesson'))
 		return
 	}
 

frontend/src/components/DiscussionReplies.vue

@@ -27,7 +27,9 @@
 						</span>
 					</div>
 					<Dropdown
-						v-if="user.data.name == reply.owner && !reply.editable"
+						v-if="
+							user.data.name == reply.owner && !reply.editable && !readOnlyMode
+						"
 						:options="[
 							{
 								label: 'Edit',
@@ -71,7 +73,7 @@
 		</div>
 
 		<TextEditor
-			v-if="renderEditor"
+			v-if="renderEditor && !readOnlyMode"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
@@ -80,7 +82,7 @@
 			:fixedMenu="true"
 			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none border border-outline-gray-2 rounded-b-md min-h-[7rem] py-1 px-2"
 		/>
-		<div class="flex justify-between mt-2">
+		<div v-if="!readOnlyMode" class="flex justify-between mt-2">
 			<span> </span>
 			<Button @click="postReply()">
 				<span>
@@ -91,12 +93,11 @@
 	</div>
 </template>
 <script setup>
-import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
+import { createResource, TextEditor, Button, Dropdown, toast } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
 import { ref, inject, onMounted } from 'vue'
-import { createToast } from '../utils'
 
 const showTopics = defineModel('showTopics')
 const newReply = ref('')
@@ -105,6 +106,7 @@ const user = inject('$user')
 const allUsers = inject('$allUsers')
 const mentionUsers = ref([])
 const renderEditor = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	topic: {
@@ -189,14 +191,7 @@ const postReply = () => {
 				replies.reload()
 			},
 			onError(err) {
-				createToast({
-					title: 'Error',
-					text: err.messages?.[0] || err,
-					icon: 'x',
-					iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-					position: 'top-center',
-					timeout: 10,
-				})
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/Discussions.vue

@@ -1,6 +1,10 @@
 <template>
 	<div>
-		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
+		<Button
+			v-if="!singleThread && !readOnlyMode"
+			class="float-right"
+			@click="openTopicModal()"
+		>
 			{{ __('New {0}').format(singularize(title)) }}
 		</Button>
 		<div class="text-xl font-semibold text-ink-gray-9">
@@ -77,6 +81,7 @@ const currentTopic = ref(null)
 const socket = inject('$socket')
 const user = inject('$user')
 const showTopicModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	title: {

frontend/src/components/EmptyState.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="flex flex-col items-center justify-center mt-60">
+		<GraduationCap class="size-10 mx-auto stroke-1 text-ink-gray-5" />
+		<div class="text-lg font-semibold text-ink-gray-7 mb-2.5">
+			{{ __('No {0}').format(type?.toLowerCase()) }}
+		</div>
+		<div
+			class="leading-5 text-base w-2/5 text-base text-center text-ink-gray-7"
+		>
+			{{
+				__(
+					'There are no {0} currently. Keep an eye out, fresh learning experiences are on the way!'
+				).format(type?.toLowerCase())
+			}}
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { BookOpen, GraduationCap } from 'lucide-vue-next'
+
+const props = defineProps({
+	type: String,
+})
+</script>

frontend/src/components/Evaluators.vue

@@ -17,10 +17,11 @@
 					:debounce="300"
 				/>
 				<Button @click="() => (showForm = !showForm)">
-					<template #icon>
-						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
-						<X v-else class="h-3 w-3 stroke-1.5" />
+					<template #prefix>
+						<Plus v-if="!showForm" class="size-4 stroke-1.5" />
+						<X v-else class="size-4 stroke-1.5" />
 					</template>
+					{{ showForm ? __('Close') : __('New') }}
 				</Button>
 			</div>
 		</div>
@@ -97,7 +98,7 @@ const evaluators = createResource({
 		return {
 			doctype: 'Course Evaluator',
 			fields: ['evaluator', 'full_name', 'user_image', 'username'],
-			filters: search.value ? [['evaluator', 'like', search.value]] : [],
+			filters: search.value ? { evaluator: ['like', `%${search.value}%`] } : {},
 		}
 	},
 	auto: true,

frontend/src/components/Icons/Play.vue

@@ -0,0 +1,16 @@
+<template>
+	<svg
+		width="20"
+		height="20"
+		viewBox="0 0 68 75"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M0 6.78182C0 1.60212 5.5742 -1.65958 10.09 0.879521L64.09 31.2545C68.6916 33.8443 68.6916 40.4693 64.09 43.0595L10.09 73.4345C5.5744 75.9736 0 72.7119 0 67.5322V6.78182ZM26.2695 38.5201C26.2695 37.3248 25.2265 37.9342 26.2695 38.5201C27.332 39.1178 27.332 37.9225 26.2695 38.5201Z"
+			fill="white"
+		/>
+	</svg>
+</template>

frontend/src/components/JobCard.vue

@@ -1,25 +1,35 @@
 <template>
-	<div class="border rounded-md p-4">
-		<div class="flex space-x-4">
-			<img
-				:src="job.company_logo"
-				class="size-10 rounded-full object-contain"
-			/>
-			<div class="flex flex-col space-y-1 flex-1">
-				<div class="flex items-center justify-between">
-					<span class="text-lg font-semibold text-ink-gray-9">
-						{{ job.job_title }}
-					</span>
-				</div>
-				<div class="text-xs text-ink-gray-5">
+	<div
+		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-4"
+	>
+		<div class="flex space-x-4 mb-4">
+			<div class="flex flex-col space-y-2 flex-1">
+				<div class="text-lg font-semibold text-ink-gray-9">
 					{{ job.company_name }}
 				</div>
+				<span class="font-medium text-ink-gray-7 leading-5">
+					{{ job.job_title }}
+				</span>
+				<div class="flex items-center space-x-1 text-sm text-ink-gray-7">
+					<MapPin class="size-3" />
+					<span>
+						{{ job.location }}{{ job.country ? `, ${job.country}` : '' }}
+					</span>
+				</div>
+				<div
+					v-if="job.applicants"
+					class="flex items-center space-x-1 text-sm text-ink-gray-7"
+				>
+					<User class="size-3" />
+					<span>
+						{{ job.applicants }}
+						{{ job.applicants > 1 ? __('applicants') : __('applicant') }}
+					</span>
+				</div>
 			</div>
+			<!-- <img :src="job.company_logo" alt="Company Logo" class="size-8  rounded-full object-contain  bg-white" /> -->
 		</div>
-		<div class="space-x-4 mt-2">
-			<Badge>
-				{{ job.location }}
-			</Badge>
+		<div class="space-x-2 mt-auto">
 			<Badge>
 				{{ job.type }}
 			</Badge>
@@ -27,11 +37,16 @@
 				{{ dayjs(job.creation).fromNow() }}
 			</Badge>
 		</div>
+		<!-- <div
+			class="description text-ink-gray-9 text-sm"
+			v-html="job.description"
+		></div> -->
 	</div>
 </template>
 <script setup>
 import { inject } from 'vue'
 import { Badge } from 'frappe-ui'
+import { MapPin, User } from 'lucide-vue-next'
 
 const dayjs = inject('$dayjs')
 const props = defineProps({
@@ -41,3 +56,15 @@ const props = defineProps({
 	},
 })
 </script>
+<style>
+.description {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+	margin-top: auto;
+	line-height: 1.5;
+}
+</style>

frontend/src/components/LiveClass.vue

@@ -3,7 +3,7 @@
 		<div class="text-lg font-semibold text-ink-gray-9">
 			{{ __('Live Class') }}
 		</div>
-		<Button v-if="user.data.is_moderator" @click="openLiveClassModal">
+		<Button v-if="canCreateClass()" @click="openLiveClassModal">
 			<template #prefix>
 				<Plus class="h-4 w-4" />
 			</template>
@@ -87,6 +87,7 @@ import { formatTime } from '@/utils/'
 const user = inject('$user')
 const showLiveClassModal = ref(false)
 const dayjs = inject('$dayjs')
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	batch: {
@@ -116,6 +117,11 @@ const liveClasses = createListResource({
 const openLiveClassModal = () => {
 	showLiveClassModal.value = true
 }
+
+const canCreateClass = () => {
+	if (readOnlyMode) return false
+	return user.data?.is_moderator || user.data?.is_evaluator
+}
 </script>
 <style>
 .short-introduction {

frontend/src/components/Members.vue

@@ -17,10 +17,11 @@
 					:debounce="300"
 				/>
 				<Button @click="() => (showForm = !showForm)">
-					<template #icon>
-						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
-						<X v-else class="h-3 w-3 stroke-1.5" />
+					<template #prefix>
+						<Plus v-if="!showForm" class="size-4 stroke-1.5" />
+						<X v-else class="size-4 stroke-1.5" />
 					</template>
+					{{ showForm ? __('Close') : __('New') }}
 				</Button>
 			</div>
 		</div>

frontend/src/components/Modals/AnnouncementModal.vue

@@ -31,6 +31,7 @@
 				<div class="mb-4">
 					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Announcement') }}
+						<span class="text-ink-red-3">*</span>
 					</div>
 					<TextEditor
 						:fixedMenu="true"
@@ -43,9 +44,8 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Input, TextEditor, createResource } from 'frappe-ui'
+import { Dialog, Input, TextEditor, createResource, toast } from 'frappe-ui'
 import { reactive } from 'vue'
-import { showToast } from '@/utils/'
 
 const show = defineModel()
 
@@ -87,22 +87,21 @@ const makeAnnouncement = (close) => {
 		{
 			validate() {
 				if (!props.students.length) {
-					return 'No students in this batch'
+					return __('No students in this batch')
 				}
 				if (!announcement.subject) {
-					return 'Subject is required'
+					return __('Subject is required')
+				}
+				if (!announcement.announcement) {
+					return __('Announcement is required')
 				}
 			},
 			onSuccess() {
 				close()
-				showToast(
-					__('Success'),
-					__('Announcement has been sent successfully'),
-					'check'
-				)
+				toast.success(__('Announcement has been sent successfully'))
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'alert-circle')
+				toast.error(__(err.messages?.[0] || err))
 			},
 		}
 	)

frontend/src/components/Modals/AssessmentModal.vue

@@ -25,21 +25,39 @@
 					v-model="assessment"
 					:doctype="assessmentType"
 					:label="__('Assessment')"
+					:onCreate="
+						(value, close) => {
+							close()
+							if (assessmentType === 'LMS Quiz') {
+								router.push({
+									name: 'QuizForm',
+									params: {
+										quizID: 'new',
+									},
+								})
+							} else if (assessmentType === 'LMS Assignment') {
+								router.push({
+									name: 'Assignments',
+								})
+							}
+						}
+					"
 				/>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, createResource } from 'frappe-ui'
+import { Dialog, FormControl, createResource, toast } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
 import { computed, ref } from 'vue'
-import { showToast } from '@/utils'
+import { useRouter } from 'vue-router'
 
 const show = defineModel()
 const assessmentType = ref(null)
 const assessment = ref(null)
 const assessments = defineModel('assessments')
+const router = useRouter()
 
 const props = defineProps({
 	batch: {
@@ -70,7 +88,7 @@ const addAssessment = (close) => {
 		{
 			onSuccess(data) {
 				assessments.value.reload()
-				showToast(__('Success'), __('Assessment added successfully'), 'check')
+				toast.success(__('Assessment added successfully'))
 				close()
 			},
 		}

frontend/src/components/Modals/AssignmentForm.vue

@@ -0,0 +1,154 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: 'lg',
+		}"
+	>
+		<template #body>
+			<div class="p-5 text-base max-h-[75vh] overflow-y-auto">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-5">
+					{{
+						assignmentID === 'new'
+							? __('Create an Assignment')
+							: __('Edit Assignment')
+					}}
+				</div>
+				<div class="space-y-4">
+					<FormControl
+						v-model="assignment.title"
+						:label="__('Title')"
+						:required="true"
+					/>
+					<FormControl
+						v-model="assignment.type"
+						type="select"
+						:options="assignmentOptions"
+						:label="__('Submission Type')"
+						:required="true"
+					/>
+					<div>
+						<div class="text-xs text-ink-gray-5 mb-2">
+							{{ __('Question') }}
+							<span class="text-ink-red-3">*</span>
+						</div>
+						<TextEditor
+							:content="assignment.question"
+							@change="(val) => (assignment.question = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+						/>
+					</div>
+				</div>
+
+				<div class="flex justify-end space-x-2 mt-5">
+					<router-link
+						:to="{
+							name: 'AssignmentSubmissionList',
+							query: {
+								assignmentID: assignmentID,
+							},
+						}"
+					>
+						<Button v-if="assignmentID !== 'new'" variant="subtle">
+							{{ __('Check Submissions') }}
+						</Button>
+					</router-link>
+					<Button variant="solid" @click="saveAssignment">
+						{{ __('Save') }}
+					</Button>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Button, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { computed, reactive, watch } from 'vue'
+
+const show = defineModel()
+const assignments = defineModel<Assignments>('assignments')
+
+interface Assignment {
+	title: string
+	type: string
+	question: string
+}
+
+interface Assignments {
+	data: Assignment[]
+	get: (params: { doctype: string; name: string }) => Promise<Assignment>
+	insert: {
+		submit: (params: Assignment, options: { onSuccess: () => void }) => void
+	}
+}
+
+const assignment = reactive({
+	title: '',
+	type: '',
+	question: '',
+})
+
+const props = defineProps({
+	assignmentID: {
+		type: String,
+		default: 'new',
+	},
+})
+
+watch(
+	() => props.assignmentID,
+	(val) => {
+		if (val !== 'new') {
+			assignments.value?.data.forEach((row) => {
+				if (row.name === val) {
+					assignment.title = row.title
+					assignment.type = row.type
+					assignment.question = row.question
+				}
+			})
+		}
+	},
+	{ flush: 'post' }
+)
+
+const saveAssignment = () => {
+	if (props.assignmentID == 'new') {
+		assignments.value.insert.submit(
+			{
+				...assignment,
+			},
+			{
+				onSuccess() {
+					show.value = false
+					toast.success(__('Assignment created successfully'))
+				},
+			}
+		)
+	} else {
+		assignments.value.setValue.submit(
+			{
+				...assignment,
+				name: props.assignmentID,
+			},
+			{
+				onSuccess() {
+					show.value = false
+					toast.success(__('Assignment updated successfully'))
+				},
+			}
+		)
+	}
+}
+
+const assignmentOptions = computed(() => {
+	return [
+		{ label: 'PDF', value: 'PDF' },
+		{ label: 'Image', value: 'Image' },
+		{ label: 'Document', value: 'Document' },
+		{ label: 'Text', value: 'Text' },
+		{ label: 'URL', value: 'URL' },
+	]
+})
+</script>

frontend/src/components/Modals/BatchCourseModal.vue

@@ -19,32 +19,43 @@
 				v-model="course"
 				:label="__('Course')"
 				:required="true"
+				:onCreate="
+					(value, close) => {
+						close()
+						router.push({
+							name: 'CourseForm',
+							params: {
+								courseName: 'new',
+							},
+						})
+					}
+				"
 			/>
 			<Link
 				doctype="Course Evaluator"
 				v-model="evaluator"
 				:label="__('Evaluator')"
-				:onCreate="(value, close) => openSettings(close)"
+				:onCreate="(value, close) => openSettings('Evaluators', close)"
 				class="mt-4"
 			/>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource } from 'frappe-ui'
+import { Dialog, createResource, toast } from 'frappe-ui'
 import { ref, inject } from 'vue'
 import Link from '@/components/Controls/Link.vue'
-import { showToast } from '@/utils'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { useSettings } from '@/stores/settings'
+import { openSettings } from '@/utils'
+import { useRouter } from 'vue-router'
 
 const show = defineModel()
 const course = ref(null)
 const evaluator = ref(null)
 const user = inject('$user')
 const courses = defineModel('courses')
+const router = useRouter()
 const { updateOnboardingStep } = useOnboarding('learning')
-const settingsStore = useSettings()
 
 const props = defineProps({
 	batch: {
@@ -83,15 +94,9 @@ const addCourse = (close) => {
 				evaluator.value = null
 			},
 			onError(err) {
-				showToast('Error', err.message[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
 }
-
-const openSettings = (close) => {
-	close()
-	settingsStore.activeTab = 'Evaluators'
-	settingsStore.isSettingsOpen = true
-}
 </script>

frontend/src/components/Modals/BatchStudentProgress.vue

@@ -14,7 +14,13 @@
 							<div class="text-xl font-semibold">
 								{{ student.full_name }}
 							</div>
-							<Badge :theme="student.progress === 100 ? 'green' : 'red'">
+							<Badge
+								v-if="
+									Object.keys(student.assessments).length ||
+									Object.keys(student.courses).length
+								"
+								:theme="student.progress === 100 ? 'green' : 'red'"
+							>
 								{{ student.progress }}% {{ __('Complete') }}
 							</Badge>
 						</div>
@@ -26,7 +32,10 @@
 
 				<div class="space-y-8">
 					<!-- Assessments -->
-					<div class="space-y-2 text-sm">
+					<div
+						v-if="Object.keys(student.assessments).length"
+						class="space-y-2 text-sm"
+					>
 						<div class="flex items-center border-b pb-1 font-medium">
 							<span class="flex-1">
 								{{ __('Assessment') }}
@@ -73,7 +82,10 @@
 					</div>
 
 					<!-- Courses -->
-					<div class="space-y-2 text-sm">
+					<div
+						v-if="Object.keys(student.courses).length"
+						class="space-y-2 text-sm"
+					>
 						<div class="flex items-center border-b pb-1 font-medium">
 							<span class="flex-1">
 								{{ __('Courses') }}

frontend/src/components/Modals/BulkCertificates.vue

@@ -62,9 +62,8 @@
 </template>
 <script setup>
 import { inject, reactive } from 'vue'
-import { createResource, Dialog, FormControl, Switch } from 'frappe-ui'
+import { createResource, Dialog, FormControl, Switch, toast } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
-import { showToast } from '@/utils'
 
 const show = defineModel()
 const dayjs = inject('$dayjs')
@@ -112,13 +111,13 @@ const generateCertificates = (close) => {
 			},
 			{
 				onError(err) {
-					showToast(__('Error'), err.messages?.[0] || err, 'x')
+					toast.error(err.messages?.[0] || err)
 				},
 			}
 		)
 	})
 	close()
-	showToast(__('Success'), __('Certificates generated successfully'), 'check')
+	toast.success(__('Certificates generated successfully'))
 }
 
 const getCourses = () => {

frontend/src/components/Modals/ChapterModal.vue

@@ -38,7 +38,7 @@
 							<div class="mb-4">
 								<Button @click="openFileSelector" :loading="uploading">
 									{{
-										uploading ? `Uploading ${progress}%` : 'Upload an zip file'
+										uploading ? `Uploading ${progress}%` : 'Upload an ZIP file'
 									}}
 								</Button>
 							</div>
@@ -76,9 +76,10 @@ import {
 	FileUploader,
 	FormControl,
 	Switch,
+	toast,
 } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
-import { showToast, getFileSize } from '@/utils/'
+import { getFileSize } from '@/utils/'
 import { capture } from '@/telemetry'
 import { FileText, X } from 'lucide-vue-next'
 import { useOnboarding } from 'frappe-ui/frappe'
@@ -150,21 +151,17 @@ const addChapter = async (close) => {
 						onSuccess(data) {
 							cleanChapter()
 							outline.value.reload()
-							showToast(
-								__('Success'),
-								__('Chapter added successfully'),
-								'check'
-							)
+							toast.success(__('Chapter added successfully'))
 						},
 						onError(err) {
-							showToast(__('Error'), err.messages?.[0] || err, 'x')
+							toast.error(err.messages?.[0] || err)
 						},
 					}
 				)
 				close()
 			},
 			onError(err) {
-				showToast(__('Error'), err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -196,11 +193,11 @@ const editChapter = (close) => {
 			},
 			onSuccess() {
 				outline.value.reload()
-				showToast(__('Success'), __('Chapter updated successfully'), 'check')
+				toast.success(__('Chapter updated successfully'))
 				close()
 			},
 			onError(err) {
-				showToast(__('Error'), err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/Modals/DiscussionModal.vue

@@ -34,9 +34,15 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
+import {
+	Dialog,
+	FormControl,
+	TextEditor,
+	createResource,
+	toast,
+} from 'frappe-ui'
 import { reactive } from 'vue'
-import { showToast, singularize } from '@/utils'
+import { singularize } from '@/utils'
 
 const topics = defineModel('reloadTopics')
 
@@ -115,7 +121,7 @@ const submitTopic = (close) => {
 				)
 			},
 			onError(err) {
-				showToast('Error', err.message, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/Modals/EditProfile.vue

@@ -93,10 +93,11 @@ import {
 	Button,
 	createResource,
 	TextEditor,
+	toast,
 } from 'frappe-ui'
 import { reactive, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { getFileSize, showToast, escapeHTML } from '@/utils'
+import { getFileSize, escapeHTML } from '@/utils'
 
 const reloadProfile = defineModel('reloadProfile')
 
@@ -155,7 +156,7 @@ const saveProfile = (close) => {
 				reloadProfile.value.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/Modals/EvaluationModal.vue

@@ -42,10 +42,11 @@
 					<div class="grid grid-cols-2 gap-2">
 						<div v-for="slot in slots.data">
 							<div
-								class="text-base text-center border rounded-md bg-surface-gray-3 p-2 cursor-pointer"
+								class="text-base text-center border rounded-md text-ink-gray-8 bg-surface-gray-3 p-2 cursor-pointer"
 								@click="saveSlot(slot)"
 								:class="{
-									'border-gray-900': evaluation.start_time == slot.start_time,
+									'border-outline-gray-4':
+										evaluation.start_time == slot.start_time,
 								}"
 							>
 								{{ formatTime(slot.start_time) }} -
@@ -67,7 +68,7 @@
 <script setup>
 import { Dialog, createResource, Select, FormControl } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
-import { createToast, formatTime } from '@/utils/'
+import { formatTime } from '@/utils/'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -147,14 +148,7 @@ function submitEvaluation(close) {
 				unavailabilityMessage = false
 			}
 
-			createToast({
-				title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
-				text: message,
-				icon: unavailabilityMessage ? 'alert-circle' : 'x',
-				iconClasses: 'bg-yellow-600 text-ink-white rounded-md p-px',
-				position: 'top-center',
-				timeout: 10,
-			})
+			toast.warning(__('Evaluator is unavailable'))
 		},
 	})
 }

frontend/src/components/Modals/Event.vue

@@ -144,6 +144,7 @@ import {
 	Tabs,
 	Tooltip,
 	Textarea,
+	toast,
 } from 'frappe-ui'
 import {
 	User,
@@ -157,7 +158,7 @@ import {
 	ClipboardList,
 } from 'lucide-vue-next'
 import { inject, reactive, watch, ref, computed } from 'vue'
-import { formatTime, showToast } from '@/utils'
+import { formatTime } from '@/utils'
 import Rating from '@/components/Controls/Rating.vue'
 import Link from '@/components/Controls/Link.vue'
 
@@ -252,7 +253,7 @@ const saveEvaluation = () => {
 				} else {
 					show.value = false
 				}
-				showToast(__('Success'), __('Evaluation saved successfully'), 'check')
+				toast.success(__('Evaluation saved successfully'))
 			},
 		}
 	)
@@ -307,7 +308,7 @@ const saveCertificate = () => {
 		{},
 		{
 			onSuccess: () => {
-				showToast(__('Success'), __('Certificate saved successfully'), 'check')
+				toast.success(__('Certificate saved successfully'))
 			},
 		}
 	)

frontend/src/components/Modals/JobApplicationModal.vue

@@ -64,10 +64,10 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FileUploader, Button, createResource } from 'frappe-ui'
+import { Dialog, FileUploader, Button, createResource, toast } from 'frappe-ui'
 import { FileText } from 'lucide-vue-next'
 import { ref, inject } from 'vue'
-import { createToast, getFileSize } from '@/utils/'
+import { getFileSize } from '@/utils/'
 
 const resume = ref(null)
 const show = defineModel()
@@ -112,24 +112,12 @@ const submitResume = (close) => {
 				}
 			},
 			onSuccess() {
-				createToast({
-					title: 'Success',
-					text: 'Your application has been submitted',
-					icon: 'check',
-					iconClasses: 'bg-surface-green-3 text-ink-white rounded-md p-px',
-				})
+				toast.success('Your application has been submitted successfully')
 				application.value.reload()
 				close()
 			},
 			onError(err) {
-				createToast({
-					title: 'Error',
-					text: err.messages?.[0] || err,
-					icon: 'x',
-					iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-					position: 'top-center',
-					timeout: 10,
-				})
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/Modals/LiveClassModal.vue

@@ -94,9 +94,10 @@ import {
 	Tooltip,
 	FormControl,
 	Autocomplete,
+	toast,
 } from 'frappe-ui'
 import { reactive, inject, onMounted } from 'vue'
-import { getTimezones, createToast, getUserTimezone } from '@/utils/'
+import { getTimezones, getUserTimezone } from '@/utils/'
 
 const liveClasses = defineModel('reloadLiveClasses')
 const show = defineModel()
@@ -202,14 +203,7 @@ const submitLiveClass = (close) => {
 			close()
 		},
 		onError(err) {
-			createToast({
-				title: 'Error',
-				text: err.messages?.[0] || err,
-				icon: 'x',
-				iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-				position: 'top-center',
-				timeout: 10,
-			})
+			toast.error(err.messages?.[0] || err)
 		},
 	})
 }

frontend/src/components/Modals/PageModal.vue

@@ -30,11 +30,10 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource } from 'frappe-ui'
+import { Dialog, createResource, toast } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
 import { reactive, watch } from 'vue'
 import IconPicker from '@/components/Controls/IconPicker.vue'
-import { showToast } from '@/utils'
 
 const sidebar = defineModel('reloadSidebar')
 const show = defineModel()
@@ -78,10 +77,10 @@ const addWebPage = (close) => {
 			onSuccess() {
 				sidebar.value.reload()
 				close()
-				showToast('Success', 'Web page added to sidebar', 'check')
+				toast.success(__('Web page added to sidebar'))
 			},
 			onError(err) {
-				showToast('Error', err.message[0] || err, 'x')
+				toast.error(err.message[0] || err)
 				close()
 			},
 		}

frontend/src/components/Modals/Question.vue

@@ -1,38 +1,27 @@
 <template>
-	<Dialog v-model="show" :options="dialogOptions">
-		<template #body-content>
-			<div class="space-y-4">
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '3xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 space-y-5">
+				<div class="text-lg font-semibold text-ink-gray-9 mb-5">
+					{{ __(props.title) }}
+				</div>
 				<div
 					v-if="!editMode"
 					class="flex items-center text-xs text-ink-gray-7 space-x-5"
 				>
-					<div class="flex items-center space-x-2">
-						<input
-							type="radio"
-							id="existing"
-							value="existing"
-							v-model="questionType"
-							class="w-3 h-3 cursor-pointer"
-						/>
-						<label for="existing" class="cursor-pointer">
-							{{ __('Add an existing question') }}
-						</label>
-					</div>
-
-					<div class="flex items-center space-x-2">
-						<input
-							type="radio"
-							id="new"
-							value="new"
-							v-model="questionType"
-							class="w-3 h-3 cursor-pointer"
-						/>
-						<label for="new" class="cursor-pointer">
-							{{ __('Create a new question') }}
-						</label>
-					</div>
+					<Switch
+						size="sm"
+						:label="__('Choose an existing question')"
+						v-model="chooseFromExisting"
+						class="!p-0"
+					/>
 				</div>
-				<div v-if="questionType == 'new' || editMode" class="space-y-2">
+				<div v-if="!chooseFromExisting || editMode" class="space-y-2">
 					<div>
 						<label class="block text-xs text-ink-gray-5 mb-1">
 							{{ __('Question') }}
@@ -45,20 +34,34 @@
 							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
-					<FormControl
-						v-model="question.marks"
-						:label="__('Marks')"
-						type="number"
-					/>
-					<FormControl
-						:label="__('Type')"
-						v-model="question.type"
-						type="select"
-						:options="['Choices', 'User Input', 'Open Ended']"
-						class="pb-2"
-						:required="true"
-					/>
-					<div v-if="question.type == 'Choices'" class="divide-y border-t">
+					<div class="grid grid-cols-2 gap-4">
+						<FormControl
+							v-model="question.marks"
+							:label="__('Marks')"
+							type="number"
+						/>
+						<FormControl
+							:label="__('Type')"
+							v-model="question.type"
+							type="select"
+							:options="['Choices', 'User Input', 'Open Ended']"
+							class="pb-2"
+							:required="true"
+						/>
+					</div>
+					<div
+						v-if="question.type == 'Choices'"
+						class="text-base font-semibold text-ink-gray-9 mb-5 mt-5"
+					>
+						{{ __('Options') }}
+					</div>
+					<div
+						v-else-if="question.type == 'User Input'"
+						class="text-base font-semibold text-ink-gray-9 mb-5 mt-5"
+					>
+						{{ __('Possibilities') }}
+					</div>
+					<div v-if="question.type == 'Choices'" class="grid grid-cols-2 gap-4">
 						<div v-for="n in 4" class="space-y-4 py-2">
 							<FormControl
 								:label="__('Option') + ' ' + n"
@@ -78,17 +81,18 @@
 					</div>
 					<div
 						v-else-if="question.type == 'User Input'"
-						v-for="n in 4"
-						class="space-y-2"
+						class="grid grid-cols-2 gap-4 py-2"
 					>
-						<FormControl
-							:label="__('Possibility') + ' ' + n"
-							v-model="question[`possibility_${n}`]"
-							:required="n == 1 ? true : false"
-						/>
+						<div v-for="n in 4">
+							<FormControl
+								:label="__('Possibility') + ' ' + n"
+								v-model="question[`possibility_${n}`]"
+								:required="n == 1 ? true : false"
+							/>
+						</div>
 					</div>
 				</div>
-				<div v-else-if="questionType == 'existing'" class="space-y-2">
+				<div v-else-if="chooseFromExisting" class="space-y-2">
 					<Link
 						v-model="existingQuestion.question"
 						:label="__('Select a question')"
@@ -100,20 +104,32 @@
 						type="number"
 					/>
 				</div>
+				<div class="flex items-center justify-end space-x-2 mt-5">
+					<Button variant="solid" @click="submitQuestion()">
+						{{ __('Submit') }}
+					</Button>
+				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
+import {
+	Dialog,
+	FormControl,
+	TextEditor,
+	createResource,
+	Switch,
+	Button,
+	toast,
+} from 'frappe-ui'
 import { computed, watch, reactive, ref, inject } from 'vue'
 import Link from '@/components/Controls/Link.vue'
-import { showToast } from '@/utils'
 import { useOnboarding } from 'frappe-ui/frappe'
 
 const show = defineModel()
 const quiz = defineModel('quiz')
-const questionType = ref(null)
+const chooseFromExisting = ref(false)
 const editMode = ref(false)
 const user = inject('$user')
 const { updateOnboardingStep } = useOnboarding('learning')
@@ -182,11 +198,12 @@ watch(show, () => {
 		editMode.value = false
 		if (props.questionDetail.question) questionData.fetch()
 		else {
-			;(question.question = ''), (question.marks = 0)
+			question.question = ''
+			question.marks = 1
 			question.type = 'Choices'
 			existingQuestion.question = ''
-			existingQuestion.marks = 0
-			questionType.value = null
+			existingQuestion.marks = 1
+			chooseFromExisting.value = false
 			populateFields()
 		}
 
@@ -221,42 +238,36 @@ const questionCreation = createResource({
 	},
 })
 
-const submitQuestion = (close) => {
-	if (props.questionDetail?.question) updateQuestion(close)
-	else addQuestion(close)
+const submitQuestion = () => {
+	if (props.questionDetail?.question) updateQuestion()
+	else addQuestion()
 }
 
-const addQuestion = (close) => {
-	if (questionType.value == 'existing') {
-		addQuestionRow(
-			{
-				question: existingQuestion.question,
-				marks: existingQuestion.marks,
-			},
-			close
-		)
+const addQuestion = () => {
+	if (chooseFromExisting.value) {
+		addQuestionRow({
+			question: existingQuestion.question,
+			marks: existingQuestion.marks,
+		})
 	} else {
 		questionCreation.submit(
 			{},
 			{
 				onSuccess(data) {
-					addQuestionRow(
-						{
-							question: data.name,
-							marks: question.marks,
-						},
-						close
-					)
+					addQuestionRow({
+						question: data.name,
+						marks: question.marks,
+					})
 				},
 				onError(err) {
-					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+					toast.error(err.messages?.[0] || err)
 				},
 			}
 		)
 	}
 }
 
-const addQuestionRow = (question, close) => {
+const addQuestionRow = (question) => {
 	questionRow.submit(
 		{
 			...question,
@@ -267,13 +278,13 @@ const addQuestionRow = (question, close) => {
 					updateOnboardingStep('create_first_quiz')
 
 				show.value = false
-				showToast(__('Success'), __('Question added successfully'), 'check')
+				toast.success(__('Question added successfully'))
 				quiz.value.reload()
-				close()
+				show.value = false
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
-				close()
+				toast.error(err.messages?.[0] || err)
+				show.value = false
 			},
 		}
 	)
@@ -307,7 +318,7 @@ const marksUpdate = createResource({
 	},
 })
 
-const updateQuestion = (close) => {
+const updateQuestion = () => {
 	questionUpdate.submit(
 		{},
 		{
@@ -317,39 +328,18 @@ const updateQuestion = (close) => {
 					{
 						onSuccess() {
 							show.value = false
-							showToast(
-								__('Success'),
-								__('Question updated successfully'),
-								'check'
-							)
+							toast.success(__('Question updated successfully'))
 							quiz.value.reload()
-							close()
 						},
 					}
 				)
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
 }
-
-const dialogOptions = computed(() => {
-	return {
-		title: __(props.title),
-		size: 'xl',
-		actions: [
-			{
-				label: __('Submit'),
-				variant: 'solid',
-				onClick: (close) => {
-					submitQuestion(close)
-				},
-			},
-		],
-	}
-})
 </script>
 <style>
 input[type='radio']:checked {

frontend/src/components/Modals/ReviewModal.vue

@@ -32,10 +32,9 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Textarea, createResource } from 'frappe-ui'
+import { Dialog, Textarea, createResource, toast } from 'frappe-ui'
 import { reactive } from 'vue'
 import Rating from '@/components/Controls/Rating.vue'
-import { createToast } from '@/utils/'
 
 const show = defineModel()
 const reviews = defineModel('reloadReviews')
@@ -78,11 +77,7 @@ function submitReview(close) {
 			hasReviewed.value.reload()
 		},
 		onError(err) {
-			createToast({
-				text: err.messages?.[0] || err,
-				icon: 'x',
-				iconClasses: 'text-ink-red-4 bg-surface-red-4',
-			})
+			toast.error(err.messages?.[0] || err)
 		},
 	})
 	close()

frontend/src/components/Modals/Settings.vue

@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '4xl' }">
+	<Dialog v-model="show" :options="{ size: '5xl' }">
 		<template #body>
 			<div class="flex h-[calc(100vh_-_8rem)]">
 				<div class="flex w-52 shrink-0 flex-col bg-surface-gray-2 p-2">
@@ -315,12 +315,6 @@ const tabsStructure = computed(() => {
 							doctype: 'Email Template',
 							type: 'Link',
 						},
-						{
-							label: 'Assignment Submission Template',
-							name: 'assignment_submission_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
 					],
 				},
 				{
@@ -328,11 +322,11 @@ const tabsStructure = computed(() => {
 					icon: 'LogIn',
 					fields: [
 						{
-							label: 'Identify User Persona',
+							label: 'Identify User Category',
 							name: 'user_category',
 							type: 'checkbox',
 							description:
-								'Enable this option to identify the user persona during signup.',
+								'Enable this option to identify the user category during signup.',
 						},
 						{
 							label: 'Disable signup',
@@ -350,6 +344,33 @@ const tabsStructure = computed(() => {
 						},
 					],
 				},
+				{
+					label: 'SEO',
+					icon: 'Search',
+					fields: [
+						{
+							label: 'Meta Description',
+							name: 'meta_description',
+							type: 'textarea',
+							rows: 4,
+							description:
+								"This description will be shown on lists and pages that don't have meta description",
+						},
+						{
+							label: 'Meta Keywords',
+							name: 'meta_keywords',
+							type: 'textarea',
+							rows: 4,
+							description:
+								'Keywords for search engines to find your website. Separated by commas.',
+						},
+						{
+							label: 'Meta Image',
+							name: 'meta_image',
+							type: 'Upload',
+						},
+					],
+				},
 			],
 		},
 	]

frontend/src/components/Modals/StudentModal.vue

@@ -19,19 +19,25 @@
 					doctype="User"
 					v-model="student"
 					:filters="{ ignore_user_type: 1 }"
+					:onCreate="
+						(value, close) => {
+							openSettings('Members', close)
+						}
+					"
 				/>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource } from 'frappe-ui'
+import { Dialog, createResource, toast } from 'frappe-ui'
 import { ref, inject } from 'vue'
 import Link from '@/components/Controls/Link.vue'
-import { showToast } from '@/utils'
 import { useOnboarding } from 'frappe-ui/frappe'
+import { openSettings } from '@/utils'
 
 const students = defineModel('reloadStudents')
+const batchModal = defineModel('batchModal')
 const student = ref()
 const user = inject('$user')
 const { updateOnboardingStep } = useOnboarding('learning')
@@ -66,11 +72,12 @@ const addStudent = (close) => {
 					updateOnboardingStep('add_batch_student')
 
 				students.value.reload()
+				batchModal.value.reload()
 				student.value = null
 				close()
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/OnboardingBanner.vue

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

frontend/src/components/Quiz.vue

@@ -291,9 +291,9 @@ import {
 	ListView,
 	TextEditor,
 	FormControl,
+	toast,
 } from 'frappe-ui'
 import { ref, watch, reactive, inject, computed } from 'vue'
-import { createToast, showToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
 import { useRouter } from 'vue-router'
@@ -494,12 +494,7 @@ const getAnswers = () => {
 const checkAnswer = () => {
 	let answers = getAnswers()
 	if (!answers.length) {
-		createToast({
-			title: 'Please select an option',
-			icon: 'alert-circle',
-			iconClasses: 'text-yellow-600 bg-yellow-100 rounded-full',
-			position: 'top-center',
-		})
+		toast.warning(__('Please select an option'))
 		return
 	}
 
@@ -589,7 +584,7 @@ const createSubmission = () => {
 				const errorTitle = err?.message || ''
 				if (errorTitle.includes('MaximumAttemptsExceededError')) {
 					const errorMessage = err.messages?.[0] || err
-					showToast(__('Error'), __(errorMessage), 'x')
+					toast.error(__(errorMessage))
 					setTimeout(() => {
 						window.location.reload()
 					}, 3000)
@@ -653,3 +648,8 @@ const getSubmissionColumns = () => {
 	]
 }
 </script>
+<style>
+p {
+	line-height: 1.5rem;
+}
+</style>

frontend/src/components/SettingDetails.vue

@@ -27,9 +27,8 @@
 </template>
 
 <script setup>
-import { Button, Badge } from 'frappe-ui'
+import { Button, Badge, toast } from 'frappe-ui'
 import SettingFields from '@/components/SettingFields.vue'
-import { showToast } from '@/utils'
 
 const props = defineProps({
 	fields: {
@@ -51,7 +50,9 @@ const props = defineProps({
 
 const update = () => {
 	props.fields.forEach((f) => {
-		if (f.type != 'Column Break') {
+		if (f.type == 'Upload') {
+			props.data.doc[f.name] = f.value ? f.value.file_url : null
+		} else if (f.type != 'Column Break') {
 			props.data.doc[f.name] = f.value
 		}
 	})
@@ -59,7 +60,7 @@ const update = () => {
 		{},
 		{
 			onError(err) {
-				showToast(__('Error'), err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/components/SettingFields.vue

@@ -54,21 +54,30 @@
 						<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-modals w-[10rem] py-5"
+									class="flex items-center justify-center rounded border border-outline-gray-modals bg-white w-[10rem] py-2"
 								>
-									<img :src="data[field.name]?.file_url" class="h-6 rounded" />
+									<img
+										:src="data[field.name]?.file_url || data[field.name]"
+										class="w-[80%] rounded"
+									/>
 								</div>
 								<div class="flex flex-col flex-wrap">
 									<span class="break-all text-ink-gray-9">
-										{{ data[field.name]?.file_name }}
+										{{
+											data[field.name]?.file_name ||
+											data[field.name].split('/').pop()
+										}}
 									</span>
-									<span class="text-sm text-ink-gray-5 mt-1">
+									<span
+										v-if="data[field.name]?.file_size"
+										class="text-sm text-ink-gray-5 mt-1"
+									>
 										{{ getFileSize(data[field.name]?.file_size) }}
 									</span>
 								</div>
 								<X
 									@click="data[field.name] = null"
-									class="bg-surface-gray-5 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+									class="border text-ink-gray-7 border-outline-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
 								/>
 							</div>
 						</div>
@@ -99,7 +108,7 @@
 </template>
 <script setup>
 import { FormControl, FileUploader, Button, Switch } from 'frappe-ui'
-import { computed, onMounted } from 'vue'
+import { computed } from 'vue'
 import { getFileSize, validateFile } from '@/utils'
 import { X } from 'lucide-vue-next'
 import Link from '@/components/Controls/Link.vue'

frontend/src/components/UpcomingEvaluations.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold">
+			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('Upcoming Evaluations') }}
 			</div>
 			<Button
@@ -17,9 +17,9 @@
 		<div v-if="upcoming_evals.data?.length">
 			<div class="grid grid-cols-3 gap-4">
 				<div v-for="evl in upcoming_evals.data">
-					<div class="border rounded-md p-3">
+					<div class="border text-ink-gray-7 rounded-md p-3">
 						<div class="flex justify-between mb-3">
-							<span class="font-semibold leading-5">
+							<span class="font-semibold text-ink-gray-9 leading-5">
 								{{ evl.course_title }}
 							</span>
 							<Menu
@@ -42,7 +42,7 @@
 									leave-to-class="transform scale-95 opacity-0"
 								>
 									<MenuItems
-										class="absolute mt-2 w-32 rounded-md bg-white shadow-lg p-1.5"
+										class="absolute mt-2 w-32 rounded-md bg-surface-white border p-1.5"
 									>
 										<MenuItem v-slot="{ active }">
 											<Button
@@ -82,12 +82,11 @@
 								{{ evl.evaluator_name }}
 							</span>
 						</div>
-						<div class="flex items-center justify-between space-x-2 mt-4">
-							<Button
-								v-if="evl.google_meet_link"
-								@click="openEvalCall(evl)"
-								class="w-full"
-							>
+						<div
+							v-if="evl.google_meet_link"
+							class="flex items-center justify-between space-x-2 mt-4"
+						>
+							<Button @click="openEvalCall(evl)" class="w-full">
 								<template #prefix>
 									<HeadsetIcon class="w-4 h-4 stroke-1.5" />
 								</template>

frontend/src/components/UserDropdown.vue

@@ -194,18 +194,6 @@ const userDropdownOptions = computed(() => {
 						)
 					},
 				},
-			],
-		},
-		{
-			group: '',
-			items: [
-				{
-					icon: Zap,
-					label: 'Powered by Learning',
-					onClick: () => {
-						window.open('https://frappe.io/learning', '_blank')
-					},
-				},
 				{
 					icon: LogOut,
 					label: 'Log out',

frontend/src/components/VideoBlock.vue

@@ -1,32 +1,53 @@
 <template>
-	<div ref="videoContainer" class="video-block group relative">
+	<div ref="videoContainer" class="video-block relative group">
 		<video
 			@timeupdate="updateTime"
 			@ended="videoEnded"
 			@click="togglePlay"
 			oncontextmenu="return false"
-			class="rounded-lg border border-gray-100 group cursor-pointer"
+			class="rounded-md border border-gray-100 cursor-pointer"
 			ref="videoRef"
 		>
 			<source :src="fileURL" :type="type" />
 		</video>
 		<div
-			class="flex items-center space-x-2 bg-surface-gray-3 rounded-md p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto invisible group-hover:visible"
+			v-if="!playing"
+			class="absolute inset-0 flex items-center justify-center cursor-pointer"
+			@click="playVideo"
+		>
+			<div
+				class="rounded-full p-4 pl-4.5"
+				style="
+					background: radial-gradient(
+						circle,
+						rgba(0, 0, 0, 0.3) 0%,
+						rgba(0, 0, 0, 0.4) 50%
+					);
+				"
+			>
+				<Play />
+			</div>
+		</div>
+		<div
+			class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
+			:class="{
+				'invisible group-hover:visible': playing,
+			}"
 		>
 			<Button variant="ghost">
 				<template #icon>
 					<Play
 						v-if="!playing"
 						@click="playVideo"
-						class="w-4 h-4 text-ink-gray-9"
+						class="size-4 text-ink-gray-9"
 					/>
-					<Pause v-else @click="pauseVideo" class="w-4 h-4 text-ink-gray-9" />
+					<Pause v-else @click="pauseVideo" class="size-5 text-ink-white" />
 				</template>
 			</Button>
 			<Button variant="ghost" @click="toggleMute">
 				<template #icon>
-					<Volume2 v-if="!muted" class="w-4 h-4 text-ink-gray-9" />
-					<VolumeX v-else class="w-4 h-4 text-ink-gray-9" />
+					<Volume2 v-if="!muted" class="size-5 text-ink-white" />
+					<VolumeX v-else class="size-5 text-ink-white" />
 				</template>
 			</Button>
 			<input
@@ -38,12 +59,12 @@
 				@input="changeCurrentTime"
 				class="duration-slider w-full h-1"
 			/>
-			<span class="text-xs font-medium">
+			<span class="text-sm font-semibold">
 				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
 			</span>
 			<Button variant="ghost" @click="toggleFullscreen">
 				<template #icon>
-					<Maximize class="w-4 h-4 text-ink-gray-9" />
+					<Maximize class="size-5 text-ink-white" />
 				</template>
 			</Button>
 		</div>
@@ -51,8 +72,9 @@
 </template>
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { Play, Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
+import { Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
 import { Button } from 'frappe-ui'
+import Play from '@/components/Icons/Play.vue'
 
 const videoRef = ref(null)
 const videoContainer = ref(null)
@@ -147,7 +169,6 @@ const toggleFullscreen = () => {
 <style scoped>
 .video-block {
 	width: 100%;
-	max-width: 900px;
 	margin: 0 auto;
 }
 
@@ -165,15 +186,16 @@ iframe {
 	flex: 1;
 	-webkit-appearance: none;
 	appearance: none;
-	background-color: theme('colors.gray.400');
+	border-radius: 10px;
+	background-color: theme('colors.gray.100');
 	cursor: pointer;
 }
 
 .duration-slider::-webkit-slider-thumb {
-	height: 10px;
-	width: 10px;
+	width: 2px;
+	border-radius: 50%;
 	-webkit-appearance: none;
-	background-color: theme('colors.gray.900');
+	background-color: theme('colors.gray.500');
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -186,7 +208,7 @@ iframe {
 	input[type='range']::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		cursor: pointer;
-		box-shadow: -500px 0 0 500px theme('colors.gray.900');
+		box-shadow: -500px 0 0 500px theme('colors.gray.600');
 	}
 }
 </style>

frontend/src/main.js

@@ -26,5 +26,6 @@ app.mount('#app')
 const { userResource, allUsers } = usersStore()
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
+
 app.config.globalProperties.$user = userResource
 app.config.globalProperties.$dialog = createDialog

frontend/src/pages/AssignmentForm.vue

@@ -1,201 +0,0 @@
-<template>
-	<header
-		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
-	>
-		<Breadcrumbs :items="breadcrumbs" />
-		<div class="space-x-2">
-			<router-link
-				v-if="assignment.doc?.name"
-				:to="{
-					name: 'AssignmentSubmissionList',
-					query: {
-						assignmentID: assignment.doc.name,
-					},
-				}"
-			>
-				<Button>
-					{{ __('Submission List') }}
-				</Button>
-			</router-link>
-			<Button variant="solid" @click="saveAssignment()">
-				{{ __('Save') }}
-			</Button>
-		</div>
-	</header>
-	<div class="w-3/4 mx-auto py-5">
-		<div class="font-semibold mb-4">
-			{{ __('Details') }}
-		</div>
-		<div class="grid grid-cols-2 gap-5 mt-4 mb-8">
-			<FormControl
-				v-model="model.title"
-				:label="__('Title')"
-				:required="true"
-			/>
-			<FormControl
-				v-model="model.type"
-				type="select"
-				:options="assignmentOptions"
-				:label="__('Type')"
-				:required="true"
-			/>
-		</div>
-		<div>
-			<div class="text-xs text-ink-gray-5 mb-2">
-				{{ __('Question') }}
-				<span class="text-ink-red-3">*</span>
-			</div>
-			<TextEditor
-				:content="model.question"
-				@change="(val) => (model.question = val)"
-				:editable="true"
-				:fixedMenu="true"
-				editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
-			/>
-		</div>
-	</div>
-</template>
-<script setup>
-import {
-	Breadcrumbs,
-	Button,
-	createDocumentResource,
-	createResource,
-	FormControl,
-	TextEditor,
-	usePageMeta,
-} from 'frappe-ui'
-import {
-	computed,
-	inject,
-	onMounted,
-	onBeforeUnmount,
-	reactive,
-	watch,
-} from 'vue'
-import { sessionStore } from '../stores/session'
-import { showToast } from '@/utils'
-import { useRouter } from 'vue-router'
-
-const user = inject('$user')
-const router = useRouter()
-const { brand } = sessionStore()
-
-const props = defineProps({
-	assignmentID: {
-		type: String,
-		required: true,
-	},
-})
-
-const model = reactive({
-	title: '',
-	type: 'PDF',
-	question: '',
-})
-
-onMounted(() => {
-	if (
-		props.assignmentID == 'new' &&
-		!user.data?.is_moderator &&
-		!user.data?.is_instructor
-	) {
-		router.push({ name: 'Courses' })
-	}
-	if (props.assignmentID !== 'new') {
-		assignment.reload()
-	}
-	window.addEventListener('keydown', keyboardShortcut)
-})
-
-const keyboardShortcut = (e) => {
-	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
-		saveAssignment()
-		e.preventDefault()
-	}
-}
-
-onBeforeUnmount(() => {
-	window.removeEventListener('keydown', keyboardShortcut)
-})
-
-const assignment = createDocumentResource({
-	doctype: 'LMS Assignment',
-	name: props.assignmentID,
-	auto: false,
-})
-
-const newAssignment = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Assignment',
-				...values,
-			},
-		}
-	},
-	onSuccess(data) {
-		router.push({ name: 'AssignmentForm', params: { assignmentID: data.name } })
-	},
-	onError(err) {
-		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
-	},
-})
-
-const saveAssignment = () => {
-	if (props.assignmentID == 'new') {
-		newAssignment.submit({
-			...model,
-		})
-	} else {
-		assignment.setValue.submit(
-			{
-				...model,
-			},
-			{
-				onSuccess(data) {
-					showToast(__('Success'), __('Assignment saved successfully'), 'check')
-					assignment.reload()
-				},
-				onError(err) {
-					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
-				},
-			}
-		)
-	}
-}
-
-watch(assignment, () => {
-	Object.keys(assignment.doc).forEach((key) => {
-		model[key] = assignment.doc[key]
-	})
-})
-
-const breadcrumbs = computed(() => [
-	{
-		label: __('Assignments'),
-		route: { name: 'Assignments' },
-	},
-	{
-		label: assignment.doc ? assignment.doc.title : __('New Assignment'),
-	},
-])
-
-const assignmentOptions = computed(() => {
-	return [
-		{ label: 'PDF', value: 'PDF' },
-		{ label: 'Image', value: 'Image' },
-		{ label: 'Document', value: 'Document' },
-		{ label: 'Text', value: 'Text' },
-		{ label: 'URL', value: 'URL' },
-	]
-})
-
-usePageMeta(() => {
-	return {
-		title: assignment.doc ? assignment.doc.title : __('New Assignment'),
-		icon: brand.favicon,
-	}
-})
-</script>

frontend/src/pages/Assignments.vue

@@ -3,32 +3,46 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<router-link
-			:to="{
-				name: 'AssignmentForm',
-				params: {
-					assignmentID: 'new',
-				},
-			}"
+		<Button
+			v-if="!readOnlyMode"
+			variant="solid"
+			@click="
+				() => {
+					assignmentID = 'new'
+					showAssignmentForm = true
+				}
+			"
 		>
-			<Button variant="solid">
-				<template #prefix>
-					<Plus class="w-4 h-4" />
-				</template>
-				{{ __('New') }}
-			</Button>
-		</router-link>
+			<template #prefix>
+				<Plus class="w-4 h-4" />
+			</template>
+			{{ __('New') }}
+		</Button>
 	</header>
 
 	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
-		<div class="grid grid-cols-3 gap-5 mb-5">
-			<FormControl v-model="titleFilter" :placeholder="__('Search by title')" />
-			<FormControl
-				v-model="typeFilter"
-				type="select"
-				:options="assignmentTypes"
-				:placeholder="__('Type')"
-			/>
+		<div class="flex items-center justify-between mb-5">
+			<div
+				v-if="assignmentCount"
+				class="text-xl font-semibold text-ink-gray-7 mb-4"
+			>
+				{{ __('{0} Assignments').format(assignmentCount) }}
+			</div>
+			<div
+				v-if="assignments.data?.length || assigmentCount > 0"
+				class="grid grid-cols-2 gap-5"
+			>
+				<FormControl
+					v-model="titleFilter"
+					:placeholder="__('Search by title')"
+				/>
+				<FormControl
+					v-model="typeFilter"
+					type="select"
+					:options="assignmentTypes"
+					:placeholder="__('Type')"
+				/>
+			</div>
 		</div>
 		<ListView
 			v-if="assignments.data?.length"
@@ -38,31 +52,15 @@
 			:options="{
 				showTooltip: false,
 				selectable: false,
-				getRowRoute: (row) => ({
-					name: 'AssignmentForm',
-					params: {
-						assignmentID: row.name,
-					},
-				}),
+				onRowClick: (row) => {
+					if (readOnlyMode) return
+					assignmentID = row.name
+					showAssignmentForm = true
+				},
 			}"
 		>
 		</ListView>
-		<div
-			v-else
-			class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
-		>
-			<Pencil class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-			<div class="text-xl font-medium">
-				{{ __('No assignments found') }}
-			</div>
-			<div class="leading-5">
-				{{
-					__(
-						'You have not created any assignments yet. To create a new assignment, click on the "New" button above.'
-					)
-				}}
-			</div>
-		</div>
+		<EmptyState v-else type="Assignments" />
 		<div
 			v-if="assignments.data && assignments.hasNextPage"
 			class="flex justify-center my-5"
@@ -72,33 +70,45 @@
 			</Button>
 		</div>
 	</div>
+	<AssignmentForm
+		v-model="showAssignmentForm"
+		v-model:assignments="assignments"
+		:assignmentID="assignmentID"
+	/>
 </template>
 <script setup>
 import {
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	FormControl,
 	ListView,
 	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { Plus, Pencil } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { sessionStore } from '../stores/session'
+import AssignmentForm from '@/components/Modals/AssignmentForm.vue'
+import EmptyState from '@/components/EmptyState.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
 const titleFilter = ref('')
 const typeFilter = ref('')
+const showAssignmentForm = ref(false)
+const assignmentID = ref('new')
+const assignmentCount = ref(0)
 const { brand } = sessionStore()
 const router = useRouter()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
 		router.push({ name: 'Courses' })
 	}
-
+	getAssignmentCount()
 	titleFilter.value = router.currentRoute.value.query.title
 	typeFilter.value = router.currentRoute.value.query.type
 })
@@ -136,7 +146,7 @@ const assignmentFilter = computed(() => {
 
 const assignments = createListResource({
 	doctype: 'LMS Assignment',
-	fields: ['name', 'title', 'type', 'creation'],
+	fields: ['name', 'title', 'type', 'creation', 'question'],
 	orderBy: 'modified desc',
 	cache: ['assignments'],
 	transform(data) {
@@ -166,11 +176,19 @@ const assignmentColumns = computed(() => {
 			label: __('Created'),
 			key: 'creation',
 			width: 1,
-			align: 'center',
+			align: 'right',
 		},
 	]
 })
 
+const getAssignmentCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'LMS Assignment',
+	}).then((data) => {
+		assignmentCount.value = data
+	})
+}
+
 const assignmentTypes = computed(() => {
 	let types = ['', 'Document', 'Image', 'PDF', 'URL', 'Text']
 	return types.map((type) => {

frontend/src/pages/Batch.vue

@@ -11,7 +11,7 @@
 				>
 					{{ __('Generate Certificates') }}
 				</Button>
-				<Button v-if="user.data?.is_moderator" @click="openAnnouncementModal()">
+				<Button v-if="canMakeAnnouncement()" @click="openAnnouncementModal()">
 					<span>
 						{{ __('Make an Announcement') }}
 					</span>
@@ -67,7 +67,7 @@
 								<BatchDashboard :batch="batch" :isStudent="isStudent" />
 							</div>
 							<div v-else-if="tab.label == 'Dashboard'">
-								<BatchStudents :batch="batch.data" />
+								<BatchStudents :batch="batch" />
 							</div>
 							<div v-else-if="tab.label == 'Classes'">
 								<LiveClass :batch="batch.data.name" />
@@ -242,6 +242,7 @@ const route = useRoute()
 const router = useRouter()
 const { brand } = sessionStore()
 const tabIndex = ref(0)
+const readOnlyMode = window.read_only_mode
 
 const tabs = computed(() => {
 	let batchTabs = []
@@ -354,6 +355,14 @@ watch(tabIndex, () => {
 	}
 })
 
+const canMakeAnnouncement = () => {
+	if (readOnlyMode) return false
+
+	if (!batch.data?.students?.length) return false
+
+	return user.data?.is_moderator || user.data?.is_evaluator
+}
+
 usePageMeta(() => {
 	return {
 		title: batch?.data?.title,

frontend/src/pages/BatchDetail.vue

@@ -6,64 +6,45 @@
 			<Breadcrumbs :items="breadcrumbs" />
 		</header>
 		<div class="m-5 pb-10">
-			<div>
-				<div class="text-3xl font-semibold text-ink-gray-9">
-					{{ batch.data.title }}
-				</div>
-				<div class="my-3 leading-6 text-ink-gray-7">
-					{{ batch.data.description }}
-				</div>
-				<div
-					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center justify-between lg:w-1/2"
-				>
-					<div class="flex items-center text-ink-gray-7">
-						<BookOpen class="h-4 w-4 mr-2" />
-						<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
+			<div class="flex justify-between w-full">
+				<div class="md:w-2/3">
+					<div class="text-3xl font-semibold text-ink-gray-9">
+						{{ batch.data.title }}
 					</div>
-					<span class="hidden lg:block" v-if="batch.data.courses"
-						>&middot;</span
-					>
-					<DateRange
-						:startDate="batch.data.start_date"
-						:endDate="batch.data.end_date"
-					/>
-					<span class="hidden lg:block" v-if="batch.data.start_date"
-						>&middot;</span
-					>
-					<div class="flex items-center text-ink-gray-7">
-						<Clock class="h-4 w-4 mr-2" />
-						<span>
-							{{ formatTime(batch.data.start_time) }} -
-							{{ formatTime(batch.data.end_time) }}
-						</span>
+					<div class="my-3 leading-6 text-ink-gray-7">
+						{{ batch.data.description }}
+					</div>
+					<div class="flex avatar-group overlap">
+						<div
+							class="h-6 mr-1"
+							:class="{
+								'avatar-group overlap': batch.data.instructors.length > 1,
+							}"
+						>
+							<UserAvatar
+								v-for="instructor in batch.data.instructors"
+								:user="instructor"
+							/>
+						</div>
+						<CourseInstructors :instructors="batch.data.instructors" />
 					</div>
-				</div>
-				<div class="flex avatar-group overlap mt-3">
 					<div
-						class="h-6 mr-1"
-						:class="{
-							'avatar-group overlap': batch.data.instructors.length > 1,
-						}"
-					>
-						<UserAvatar
-							v-for="instructor in batch.data.instructors"
-							:user="instructor"
-						/>
-					</div>
-					<CourseInstructors :instructors="batch.data.instructors" />
-				</div>
-			</div>
-			<div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
-				<div class="order-2 lg:order-none">
-					<div
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
 						v-html="batch.data.batch_details"
 					></div>
+				</div>
+				<div class="hidden md:block">
+					<BatchOverlay :batch="batch" />
+				</div>
+			</div>
+			<!-- <div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
+				<div class="order-2 lg:order-none">
+					
 				</div>
 				<div class="order-1 lg:order-none">
 					<BatchOverlay :batch="batch" />
 				</div>
-			</div>
+			</div> -->
 			<div v-if="batch.data.courses.length">
 				<div class="flex items-center mt-10">
 					<div class="text-2xl font-semibold">

frontend/src/pages/BatchForm.vue

@@ -8,99 +8,68 @@
 				{{ __('Save') }}
 			</Button>
 		</header>
-		<div class="w-1/2 mx-auto py-5">
-			<div class="">
-				<div class="text-lg font-semibold mb-4">
+		<div class="py-5">
+			<div class="px-20 pb-5 space-y-5 border-b mb-5">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="space-y-4 mb-4">
+				<div class="grid grid-cols-2 gap-5">
+					<div class="space-y-5">
+						<FormControl
+							v-model="batch.title"
+							:label="__('Title')"
+							:required="true"
+							class="w-full"
+						/>
+						<MultiSelect
+							v-model="instructors"
+							doctype="User"
+							:label="__('Instructors')"
+							:required="true"
+							:onCreate="(close) => openSettings('Members', close)"
+							:filters="{ ignore_user_type: 1 }"
+						/>
+					</div>
 					<FormControl
-						v-model="batch.title"
-						:label="__('Title')"
+						v-model="batch.description"
+						:label="__('Short Description')"
+						type="textarea"
+						:rows="8"
+						:placeholder="__('Short description of the batch')"
 						:required="true"
-						class="w-full"
 					/>
-					<div class="flex items-center space-x-5">
-						<FormControl
-							v-model="batch.published"
-							type="checkbox"
-							:label="__('Published')"
-						/>
-						<FormControl
-							v-model="batch.allow_self_enrollment"
-							type="checkbox"
-							:label="__('Allow self enrollment')"
-						/>
-						<FormControl
-							v-model="batch.certification"
-							type="checkbox"
-							:label="__('Certification')"
-						/>
-					</div>
 				</div>
 			</div>
-			<div class="mb-4">
-				<div class="text-xs text-ink-gray-5 mb-2">
-					{{ __('Meta Image') }}
-				</div>
-				<FileUploader
-					v-if="!batch.image"
-					:fileTypes="['image/*']"
-					:validateFile="validateFile"
-					@success="(file) => saveImage(file)"
-				>
-					<template v-slot="{ file, progress, uploading, openFileSelector }">
-						<div class="flex items-center">
-							<div class="border rounded-md w-fit py-5 px-20">
-								<Image class="size-5 stroke-1 text-ink-gray-7" />
-							</div>
-							<div class="ml-4">
-								<Button @click="openFileSelector">
-									{{ __('Upload') }}
-								</Button>
-								<div class="mt-2 text-ink-gray-5 text-sm">
-									{{
-										__(
-											'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-ink-gray-5 text-sm">
-								{{
-									__(
-										'Appears when the batch URL is shared on any online platform'
-									)
-								}}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<MultiSelect
-				v-model="instructors"
-				doctype="User"
-				:label="__('Instructors')"
-				:required="true"
-				:filters="{ ignore_user_type: 1 }"
-			/>
 
-			<div class="my-10">
-				<div class="text-lg font-semibold mb-4">
+			<div class="px-20 pb-5 space-y-5 border-b mb-5">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
+					{{ __('Settings') }}
+				</div>
+				<div class="grid grid-cols-3 gap-5">
+					<FormControl
+						v-model="batch.published"
+						type="checkbox"
+						:label="__('Published')"
+					/>
+					<FormControl
+						v-model="batch.allow_self_enrollment"
+						type="checkbox"
+						:label="__('Allow self enrollment')"
+					/>
+					<FormControl
+						v-model="batch.certification"
+						type="checkbox"
+						:label="__('Certification')"
+					/>
+				</div>
+			</div>
+
+			<div class="px-20 pb-5 space-y-5 border-b mb-5">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Date and Time') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10">
-					<div>
+				<div class="grid grid-cols-3 gap-10">
+					<div class="space-y-5">
 						<FormControl
 							v-model="batch.start_date"
 							:label="__('Start Date')"
@@ -115,16 +84,8 @@
 							class="mb-4"
 							:required="true"
 						/>
-						<FormControl
-							v-model="batch.timezone"
-							:label="__('Timezone')"
-							type="text"
-							:placeholder="__('Example: IST (+5:30)')"
-							class="mb-4"
-							:required="true"
-						/>
 					</div>
-					<div>
+					<div class="space-y-5">
 						<FormControl
 							v-model="batch.start_time"
 							:label="__('Start Time')"
@@ -140,21 +101,14 @@
 							:required="true"
 						/>
 					</div>
-				</div>
-			</div>
-
-			<div class="mb-10">
-				<div class="text-lg font-semibold mb-4">
-					{{ __('Settings') }}
-				</div>
-				<div class="grid grid-cols-2 gap-10">
-					<div>
+					<div class="space-y-5">
 						<FormControl
-							v-model="batch.seat_count"
-							:label="__('Seat Count')"
-							type="number"
+							v-model="batch.timezone"
+							:label="__('Timezone')"
+							type="text"
+							:placeholder="__('Example: IST (+5:30)')"
 							class="mb-4"
-							:placeholder="__('Number of seats available')"
+							:required="true"
 						/>
 						<FormControl
 							v-model="batch.evaluation_end_date"
@@ -162,13 +116,46 @@
 							type="date"
 							class="mb-4"
 						/>
+					</div>
+				</div>
+			</div>
+
+			<div class="px-20 pb-5 space-y-5 border-b mb-5">
+				<div>
+					<label class="block text-sm text-ink-gray-5 mb-1">
+						{{ __('Batch Details') }}
+						<span class="text-ink-red-3">*</span>
+					</label>
+					<TextEditor
+						:content="batch.batch_details"
+						@change="(val) => (batch.batch_details = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-scroll mb-4"
+					/>
+				</div>
+			</div>
+
+			<div class="px-20 pb-5 space-y-5 border-b mb-5">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
+					{{ __('Configurations') }}
+				</div>
+				<div class="grid grid-cols-3 gap-10">
+					<div class="space-y-5">
+						<FormControl
+							v-model="batch.seat_count"
+							:label="__('Seat Count')"
+							type="number"
+							class="mb-4"
+							:placeholder="__('Number of seats available')"
+						/>
 						<Link
 							doctype="Email Template"
 							:label="__('Email Template')"
 							v-model="batch.confirmation_email_template"
 						/>
 					</div>
-					<div>
+					<div class="space-y-5">
 						<FormControl
 							v-model="batch.medium"
 							type="select"
@@ -189,26 +176,79 @@
 							doctype="LMS Category"
 							:label="__('Category')"
 							v-model="batch.category"
+							:onCreate="(value, close) => openSettings('Categories', close)"
 						/>
 					</div>
+					<div class="space-y-5">
+						<div>
+							<div class="text-xs text-ink-gray-5">
+								{{ __('Meta Image') }}
+							</div>
+							<FileUploader
+								v-if="!batch.image"
+								:fileTypes="['image/*']"
+								:validateFile="validateFile"
+								@success="(file) => saveImage(file)"
+							>
+								<template
+									v-slot="{ file, progress, uploading, openFileSelector }"
+								>
+									<div class="flex items-center">
+										<div class="border rounded-md w-fit py-5 px-20">
+											<Image class="size-5 stroke-1 text-ink-gray-7" />
+										</div>
+										<div class="ml-4">
+											<Button @click="openFileSelector">
+												{{ __('Upload') }}
+											</Button>
+											<div class="mt-1 text-ink-gray-5 text-sm leading-5">
+												{{
+													__('Appears when the batch URL is shared on socials')
+												}}
+											</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-ink-gray-5 text-sm">
+											{{
+												__(
+													'Appears when the batch URL is shared on any online platform'
+												)
+											}}
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 
-			<div class="">
-				<div class="text-lg font-semibold mb-4">
-					{{ __('Payment') }}
+			<div class="px-20 pb-5 space-y-5">
+				<div class="text-lg text-ink-gray-9 font-semibold">
+					{{ __('Pricing') }}
 				</div>
-				<div>
-					<FormControl
-						v-model="batch.paid_batch"
-						type="checkbox"
-						:label="__('Paid Batch')"
-					/>
+				<FormControl
+					v-model="batch.paid_batch"
+					type="checkbox"
+					:label="__('Paid Batch')"
+				/>
+				<div v-if="batch.paid_batch" class="grid grid-cols-3 gap-5">
 					<FormControl
 						v-model="batch.amount"
 						:label="__('Amount')"
 						type="number"
-						class="my-4"
 					/>
 					<Link
 						doctype="Currency"
@@ -218,33 +258,6 @@
 					/>
 				</div>
 			</div>
-
-			<div class="my-10">
-				<div class="text-lg font-semibold mb-4">
-					{{ __('Description') }}
-				</div>
-				<FormControl
-					v-model="batch.description"
-					:label="__('Short Description')"
-					type="textarea"
-					class="my-4"
-					:placeholder="__('Short description of the batch')"
-					:required="true"
-				/>
-				<div>
-					<label class="block text-sm text-ink-gray-5 mb-1">
-						{{ __('Batch Details') }}
-						<span class="text-ink-red-3">*</span>
-					</label>
-					<TextEditor
-						:content="batch.batch_details"
-						@change="(val) => (batch.batch_details = val)"
-						:editable="true"
-						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
-					/>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
@@ -265,15 +278,16 @@ import {
 	TextEditor,
 	createResource,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { showToast } from '@/utils'
 import { Image } from 'lucide-vue-next'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { sessionStore } from '../stores/session'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import Link from '@/components/Controls/Link.vue'
+import { openSettings } from '@/utils'
 
 const router = useRouter()
 const user = inject('$user')
@@ -445,7 +459,7 @@ const createNewBatch = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -464,7 +478,7 @@ const editBatchDetails = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/pages/Batches.vue

@@ -4,7 +4,7 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
-			v-if="user.data?.is_moderator"
+			v-if="canCreateBatch()"
 			:to="{
 				name: 'BatchForm',
 				params: { batchName: 'new' },
@@ -20,12 +20,14 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
+			v-if="batchCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Batches') }}
 			</div>
 			<div
+				v-if="batches.data?.length || batchCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons
@@ -70,22 +72,8 @@
 				<BatchCard :batch="batch" />
 			</router-link>
 		</div>
-		<div
-			v-else-if="!batches.list.loading"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 mt-48"
-		>
-			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-			<div class="text-lg font-medium mb-1">
-				{{ __('No batches found') }}
-			</div>
-			<div class="leading-5 w-2/5 text-center">
-				{{
-					__(
-						'There are no batches matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
-					)
-				}}
-			</div>
-		</div>
+		<EmptyState v-else-if="!batches.list.loading" type="Batches" />
+
 		<div
 			v-if="!batches.list.loading && batches.hasNextPage"
 			class="flex justify-center mt-5"
@@ -100,6 +88,7 @@
 import {
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	FormControl,
 	Select,
@@ -107,9 +96,10 @@ import {
 	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { BookOpen, Plus } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import BatchCard from '@/components/BatchCard.vue'
+import EmptyState from '@/components/EmptyState.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -124,10 +114,13 @@ const filters = ref({})
 const is_student = computed(() => user.data?.is_student)
 const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
 const orderBy = ref('start_date')
+const readOnlyMode = window.read_only_mode
+const batchCount = ref(0)
 
 onMounted(() => {
 	setFiltersFromQuery()
 	updateBatches()
+	getBatchCount()
 	categories.value = [
 		{
 			label: '',
@@ -299,6 +292,20 @@ const batchTabs = computed(() => {
 	return tabs
 })
 
+const canCreateBatch = () => {
+	if (readOnlyMode) return false
+	if (user.data?.is_moderator || user.data?.is_instructor) return true
+	return false
+}
+
+const getBatchCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'LMS Batch',
+	}).then((data) => {
+		batchCount.value = data
+	})
+}
+
 const breadcrumbs = computed(() => [
 	{
 		label: __('Batches'),

frontend/src/pages/Billing.vue

@@ -156,9 +156,9 @@ import {
 	FormControl,
 	Breadcrumbs,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { reactive, inject, onMounted, computed } from 'vue'
-import { showToast } from '@/utils/'
 import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
@@ -259,7 +259,7 @@ const generatePaymentLink = () => {
 				window.location.href = data
 			},
 			onError(err) {
-				showToast(__('Error'), err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -333,14 +333,7 @@ const validateAddress = () => {
 }
 
 const showError = (err) => {
-	createToast({
-		title: 'Error',
-		text: err.messages?.[0] || err,
-		icon: 'x',
-		iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-		position: 'top-center',
-		timeout: 10,
-	})
+	toast.error(err.messages?.[0] || err)
 }
 
 const changeCurrency = (country) => {

frontend/src/pages/CertifiedParticipants.vue

@@ -3,7 +3,7 @@
 		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<router-link :to="{ name: 'Batches' }">
+		<router-link :to="{ name: 'Batches', query: { certification: true } }">
 			<Button>
 				<template #prefix>
 					<GraduationCap class="h-4 w-4 stroke-1.5" />
@@ -12,12 +12,13 @@
 			</Button>
 		</router-link>
 	</header>
-	<div class="p-5 lg:w-3/4 mx-auto">
-		<div
-			class="flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 justify-between mb-5"
-		>
-			<div class="text-lg text-ink-gray-9 font-semibold">
-				{{ __('All Certified Participants') }}
+	<div
+		v-if="participants.data?.length"
+		class="mx-auto w-full max-w-4xl pt-6 pb-10"
+	>
+		<div class="flex flex-col md:flex-row justify-between mb-4 px-3">
+			<div class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0">
+				{{ memberCount }} {{ __('certified members') }}
 			</div>
 			<div class="grid grid-cols-2 gap-2">
 				<FormControl
@@ -40,79 +41,90 @@
 				</div>
 			</div>
 		</div>
-		<div v-if="participants.data?.length">
-			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+		<div class="divide-y">
+			<template v-for="participant in participants.data">
 				<router-link
-					v-for="participant in participants.data"
 					:to="{
 						name: 'ProfileCertificates',
-						params: { username: participant.username },
+						params: {
+							username: participant.username,
+						},
 					}"
+					class="flex sm:rounded px-3 py-2 sm:h-15 hover:bg-surface-gray-2"
 				>
-					<div
-						class="flex items-center space-x-2 border rounded-md hover:bg-surface-menu-bar p-2 text-ink-gray-7"
-					>
+					<div class="flex items-center w-full space-x-3">
 						<Avatar
 							:image="participant.user_image"
+							class="size-8 rounded-full object-contain"
 							:label="participant.full_name"
 							size="2xl"
 						/>
-						<div class="flex flex-col space-y-2">
-							<div class="font-medium">
-								{{ participant.full_name }}
+						<div class="flex flex-col md:flex-row w-full">
+							<div class="flex-1">
+								<div class="text-base font-medium text-ink-gray-8">
+									{{ participant.full_name }}
+								</div>
+								<div
+									v-if="participant.headline"
+									class="mt-1.5 text-base text-ink-gray-5"
+								>
+									{{ participant.headline }}
+								</div>
 							</div>
 							<div
-								v-if="participant.headline"
-								class="headline text-sm text-ink-gray-7"
+								class="flex items-center space-x-3 md:space-x-24 text-sm md:text-base mt-1.5"
 							>
-								{{ participant.headline }}
+								<div class="text-ink-gray-5">
+									{{ participant.certificate_count }}
+									{{
+										participant.certificate_count > 1
+											? __('certificates')
+											: __('certificate')
+									}}
+								</div>
+								<span class="text-ink-gray-4 md:hidden">·</span>
+								<div class="text-ink-gray-5">
+									{{ dayjs(participant.issue_date).format('DD MMM YYYY') }}
+								</div>
 							</div>
 						</div>
 					</div>
 				</router-link>
-			</div>
-			<div
-				v-if="!participants.list.loading && participants.hasNextPage"
-				class="flex justify-center mt-5"
-			>
-				<Button @click="participants.next()">
-					{{ __('Load More') }}
-				</Button>
-			</div>
+			</template>
 		</div>
 		<div
-			v-else-if="!participants.list.loading"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
+			v-if="!participants.list.loading && participants.hasNextPage"
+			class="flex justify-center mt-5"
 		>
-			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-			<div class="text-lg font-medium mb-1">
-				{{ __('No participants found') }}
-			</div>
-			<div class="leading-5 w-2/5 text-center">
-				{{ __('There are no participants matching this criteria.') }}
-			</div>
+			<Button @click="participants.next()">
+				{{ __('Load More') }}
+			</Button>
 		</div>
 	</div>
+	<EmptyState v-else type="Certified Members" />
 </template>
 <script setup>
 import {
 	Avatar,
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	FormControl,
 	Select,
 	usePageMeta,
 } from 'frappe-ui'
-import { computed, onMounted, ref } from 'vue'
-import { updateDocumentTitle } from '@/utils'
-import { BookOpen, GraduationCap } from 'lucide-vue-next'
+import { computed, inject, onMounted, ref } from 'vue'
+import { GraduationCap } from 'lucide-vue-next'
 import { sessionStore } from '../stores/session'
+import EmptyState from '@/components/EmptyState.vue'
 
 const currentCategory = ref('')
 const filters = ref({})
 const nameFilter = ref('')
 const { brand } = sessionStore()
+const memberCount = ref(0)
+const dayjs = inject('$dayjs')
 
 onMounted(() => {
 	updateParticipants()
@@ -126,6 +138,12 @@ const participants = createListResource({
 	pageLength: 30,
 })
 
+const count = call('lms.lms.api.get_count_of_certified_members').then(
+	(data) => {
+		memberCount.value = data
+	}
+)
+
 const categories = createListResource({
 	doctype: 'LMS Certificate',
 	url: 'lms.lms.api.get_certification_categories',
@@ -161,14 +179,14 @@ const updateFilters = () => {
 
 const breadcrumbs = computed(() => [
 	{
-		label: __('Certified Participants'),
+		label: __('Certified Members'),
 		route: { name: 'CertifiedParticipants' },
 	},
 ])
 
 usePageMeta(() => {
 	return {
-		title: __('Certified Participants'),
+		title: __('Certified Members'),
 		icon: brand.favicon,
 	}
 })

frontend/src/pages/CourseDetail.vue

@@ -56,7 +56,7 @@
 							<CourseInstructors :instructors="course.data.instructors" />
 						</div>
 					</div>
-					<div v-if="course.data.tags" class="flex mt-4 w-fit">
+					<div v-if="course.data.tags" class="flex my-4 w-fit">
 						<Badge
 							theme="gray"
 							size="lg"
@@ -69,7 +69,7 @@
 					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.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-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-4"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-10"
 					></div>
 					<div class="mt-10">
 						<CourseOutline

frontend/src/pages/CourseForm.vue

@@ -19,62 +19,112 @@
 						</Button>
 					</div>
 				</header>
-				<div class="mt-5 mb-10">
-					<div class="container mb-5">
+				<div class="mt-5 mb-5">
+					<div class="px-10 pb-5 mb-5 space-y-5 border-b">
 						<div class="text-lg font-semibold mb-4">
 							{{ __('Details') }}
 						</div>
-						<FormControl
-							v-model="course.title"
-							:label="__('Title')"
-							class="mb-4"
-							:required="true"
-						/>
-						<FormControl
-							v-model="course.short_introduction"
-							:label="__('Short Introduction')"
-							:placeholder="
-								__(
-									'A one line introduction to the course that appears on the course card'
-								)
-							"
-							class="mb-4"
-							:required="true"
-						/>
-						<div class="mb-4">
-							<div class="mb-1.5 text-sm text-ink-gray-5">
-								{{ __('Course Description') }}
-								<span class="text-ink-red-3">*</span>
-							</div>
-							<TextEditor
-								:content="course.description"
-								@change="(val) => (course.description = val)"
-								:editable="true"
-								:fixedMenu="true"
-								editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+						<div class="grid grid-cols-2 gap-5">
+							<FormControl
+								v-model="course.title"
+								:label="__('Title')"
+								:required="true"
+							/>
+							<Link
+								doctype="LMS Category"
+								v-model="course.category"
+								:label="__('Category')"
+								:onCreate="(value, close) => openSettings('Categories', close)"
 							/>
 						</div>
-						<div class="mb-4">
-							<div class="text-xs text-ink-gray-5 mb-2">
-								{{ __('Course Image') }}
-								<span class="text-ink-red-3">*</span>
+						<div class="grid grid-cols-2 gap-5">
+							<MultiSelect
+								v-model="instructors"
+								doctype="User"
+								:label="__('Instructors')"
+								:filters="{ ignore_user_type: 1 }"
+								:onCreate="(close) => openSettings('Members', close)"
+								:required="true"
+							/>
+							<div>
+								<div class="mb-1.5 text-xs text-ink-gray-5">
+									{{ __('Tags') }}
+								</div>
+								<div class="flex items-center">
+									<div
+										v-if="course.tags"
+										v-for="tag in course.tags?.split(', ')"
+										class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md mr-2"
+									>
+										{{ tag }}
+										<X
+											class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
+											@click="removeTag(tag)"
+										/>
+									</div>
+									<FormControl
+										v-model="newTag"
+										:placeholder="__('Add a keyword and then press enter')"
+										class="w-full"
+										@keyup.enter="updateTags()"
+										id="tags"
+									/>
+								</div>
 							</div>
-							<FileUploader
-								v-if="!course.course_image"
-								:fileTypes="['image/*']"
-								:validateFile="validateFile"
-								@success="(file) => saveImage(file)"
-							>
-								<template
-									v-slot="{ file, progress, uploading, openFileSelector }"
+						</div>
+						<div class="grid grid-cols-2 gap-5">
+							<FormControl
+								v-model="course.short_introduction"
+								type="textarea"
+								:rows="4"
+								:label="__('Short Introduction')"
+								:placeholder="
+									__(
+										'A one line introduction to the course that appears on the course card'
+									)
+								"
+								:required="true"
+							/>
+							<div class="mb-4">
+								<div class="text-xs text-ink-gray-5 mb-2">
+									{{ __('Course Image') }}
+									<span class="text-ink-red-3">*</span>
+								</div>
+								<FileUploader
+									v-if="!course.course_image"
+									:fileTypes="['image/*']"
+									:validateFile="validateFile"
+									@success="(file) => saveImage(file)"
 								>
-									<div class="flex items-center">
-										<div class="border rounded-md w-fit py-5 px-20">
-											<Image class="size-5 stroke-1 text-ink-gray-7" />
+									<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-ink-gray-7" />
+											</div>
+											<div class="ml-4">
+												<Button @click="openFileSelector">
+													{{ __('Upload') }}
+												</Button>
+												<div class="mt-1 text-ink-gray-5 text-sm leading-5">
+													{{
+														__('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="openFileSelector">
-												{{ __('Upload') }}
+											<Button @click="removeImage()">
+												{{ __('Remove') }}
 											</Button>
 											<div class="mt-2 text-ink-gray-5 text-sm">
 												{{
@@ -83,85 +133,17 @@
 											</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-ink-gray-5 text-sm">
-											{{ __('Appears on the course card in the course list') }}
-										</div>
-									</div>
 								</div>
 							</div>
 						</div>
-						<FormControl
-							v-model="course.video_link"
-							:label="__('Preview Video')"
-							:placeholder="
-								__(
-									'Paste the youtube link of a short video introducing the course'
-								)
-							"
-							class="mb-4"
-						/>
-						<div class="mb-4">
-							<div class="mb-1.5 text-xs text-ink-gray-5">
-								{{ __('Tags') }}
-							</div>
-							<div class="flex items-center">
-								<div
-									v-if="course.tags"
-									v-for="tag in course.tags?.split(', ')"
-									class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md mr-2"
-								>
-									{{ tag }}
-									<X
-										class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
-										@click="removeTag(tag)"
-									/>
-								</div>
-								<FormControl
-									v-model="newTag"
-									:placeholder="__('Add a keyword and then press enter')"
-									class="w-72"
-									@keyup.enter="updateTags()"
-									id="tags"
-								/>
-							</div>
-						</div>
-						<div class="w-1/2 mb-4">
-							<Link
-								doctype="LMS Category"
-								v-model="course.category"
-								:label="__('Category')"
-								:onCreate="(value, close) => openSettings(close)"
-							/>
-						</div>
-						<MultiSelect
-							v-model="instructors"
-							doctype="User"
-							:label="__('Instructors')"
-							:filters="{ ignore_user_type: 1 }"
-							:required="true"
-						/>
 					</div>
-					<div class="container border-t">
-						<div class="text-lg font-semibold mt-5 mb-4">
+
+					<div class="px-10 pb-5 mb-5 space-y-5 border-b">
+						<div class="text-lg font-semibold">
 							{{ __('Settings') }}
 						</div>
-						<div class="grid grid-cols-2 gap-10 mb-4">
-							<div
-								v-if="user.data?.is_moderator"
-								class="flex flex-col space-y-4"
-							>
+						<div class="grid grid-cols-2 gap-5">
+							<div class="flex flex-col space-y-5">
 								<FormControl
 									type="checkbox"
 									v-model="course.published"
@@ -171,10 +153,9 @@
 									v-model="course.published_on"
 									:label="__('Published On')"
 									type="date"
-									class="mb-5"
 								/>
 							</div>
-							<div class="flex flex-col space-y-3">
+							<div class="flex flex-col space-y-5">
 								<FormControl
 									type="checkbox"
 									v-model="course.upcoming"
@@ -193,7 +174,34 @@
 							</div>
 						</div>
 					</div>
-					<div class="container border-t space-y-4">
+
+					<div class="px-10 pb-5 mb-5 space-y-5 border-b">
+						<div class="">
+							<div class="mb-1.5 text-sm text-ink-gray-5">
+								{{ __('Course Description') }}
+								<span class="text-ink-red-3">*</span>
+							</div>
+							<TextEditor
+								:content="course.description"
+								@change="(val) => (course.description = val)"
+								:editable="true"
+								:fixedMenu="true"
+								editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+							/>
+						</div>
+
+						<FormControl
+							v-model="course.video_link"
+							:label="__('Preview Video')"
+							:placeholder="
+								__(
+									'Paste the youtube link of a short video introducing the course'
+								)
+							"
+						/>
+					</div>
+
+					<div class="px-10 pb-5 space-y-5">
 						<div class="text-lg font-semibold mt-5">
 							{{ __('Pricing and Certification') }}
 						</div>
@@ -214,19 +222,31 @@
 								:label="__('Paid Certificate')"
 							/>
 						</div>
-						<FormControl v-model="course.course_price" :label="__('Amount')" />
-						<Link
-							doctype="Currency"
-							v-model="course.currency"
-							:filters="{ enabled: 1 }"
-							:label="__('Currency')"
-						/>
-						<Link
-							v-if="course.paid_certificate"
-							doctype="Course Evaluator"
-							v-model="course.evaluator"
-							:label="__('Evaluator')"
-						/>
+						<div class="grid grid-cols-2 gap-5">
+							<div class="space-y-5">
+								<FormControl
+									v-if="course.paid_course || course.paid_certificate"
+									v-model="course.course_price"
+									:label="__('Amount')"
+								/>
+								<Link
+									v-if="course.paid_certificate"
+									doctype="Course Evaluator"
+									v-model="course.evaluator"
+									:label="__('Evaluator')"
+									:onCreate="
+										(value, close) => openSettings('Evaluators', close)
+									"
+								/>
+							</div>
+							<Link
+								v-if="course.paid_course || course.paid_certificate"
+								doctype="Currency"
+								v-model="course.currency"
+								:filters="{ enabled: 1 }"
+								:label="__('Currency')"
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -250,6 +270,7 @@ import {
 	FormControl,
 	FileUploader,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import {
 	inject,
@@ -261,13 +282,12 @@ import {
 	watch,
 	getCurrentInstance,
 } from 'vue'
-import { showToast } from '@/utils'
 import { Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { sessionStore } from '../stores/session'
-import { useSettings } from '@/stores/settings'
+import { openSettings } from '@/utils'
 import Link from '@/components/Controls/Link.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
@@ -277,7 +297,6 @@ const newTag = ref('')
 const { brand } = sessionStore()
 const router = useRouter()
 const instructors = ref([])
-const settingsStore = useSettings()
 const app = getCurrentInstance()
 const { updateOnboardingStep } = useOnboarding('learning')
 const { $dialog } = app.appContext.config.globalProperties
@@ -310,11 +329,7 @@ const course = reactive({
 })
 
 onMounted(() => {
-	if (
-		props.courseName == 'new' &&
-		!user.data?.is_moderator &&
-		!user.data?.is_instructor
-	) {
+	if (!user.data?.is_moderator && !user.data?.is_instructor) {
 		router.push({ name: 'Courses' })
 	}
 
@@ -433,10 +448,10 @@ const submitCourse = () => {
 			},
 			{
 				onSuccess() {
-					showToast('Success', 'Course updated successfully', 'check')
+					toast.success(__('Course updated successfully'))
 				},
 				onError(err) {
-					showToast('Error', err.messages?.[0] || err, 'x')
+					toast.error(err.messages?.[0] || err)
 				},
 			}
 		)
@@ -450,14 +465,14 @@ const submitCourse = () => {
 				}
 
 				capture('course_created')
-				showToast('Success', 'Course created successfully', 'check')
+				toast.success(__('Course created successfully'))
 				router.push({
 					name: 'CourseForm',
 					params: { courseName: data.name },
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		})
 	}
@@ -471,7 +486,7 @@ const deleteCourse = createResource({
 		}
 	},
 	onSuccess() {
-		showToast(__('Success'), __('Course deleted successfully'), 'check')
+		toast.success(__('Course deleted successfully'))
 		router.push({ name: 'Courses' })
 	},
 })
@@ -535,12 +550,6 @@ 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

@@ -20,12 +20,14 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
+			v-if="courseCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Courses') }}
 			</div>
 			<div
+				v-if="courses.data?.length || courseCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons :buttons="courseTabs" v-model="currentTab" />
@@ -57,7 +59,7 @@
 		</div>
 		<div
 			v-if="courses.data?.length"
-			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-5"
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4"
 		>
 			<router-link
 				v-for="course in courses.data"
@@ -66,22 +68,7 @@
 				<CourseCard :course="course" />
 			</router-link>
 		</div>
-		<div
-			v-else-if="!courses.list.loading"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
-		>
-			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-			<div class="text-lg font-medium mb-1">
-				{{ __('No courses found') }}
-			</div>
-			<div class="leading-5 w-2/5 text-center">
-				{{
-					__(
-						'There are no courses matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
-					)
-				}}
-			</div>
-		</div>
+		<EmptyState v-else-if="!courses.list.loading" type="Courses" />
 		<div
 			v-if="!courses.list.loading && courses.hasNextPage"
 			class="flex justify-center mt-5"
@@ -96,6 +83,7 @@
 import {
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	FormControl,
 	Select,
@@ -103,10 +91,12 @@ import {
 	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { BookOpen, Plus } from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { canCreateCourse } from '@/utils'
 import CourseCard from '@/components/CourseCard.vue'
+import EmptyState from '@/components/EmptyState.vue'
+import router from '../router'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -119,10 +109,12 @@ const certification = ref(false)
 const filters = ref({})
 const currentTab = ref('Live')
 const { brand } = sessionStore()
+const courseCount = ref(0)
 
 onMounted(() => {
 	setFiltersFromQuery()
 	updateCourses()
+	getCourseCount()
 	categories.value = [
 		{
 			label: '',
@@ -145,16 +137,49 @@ const courses = createListResource({
 	pageLength: pageLength.value,
 	start: start.value,
 	onSuccess(data) {
-		let allCategories = data.map((course) => course.category)
-		allCategories = allCategories.filter(
-			(category, index) => allCategories.indexOf(category) === index && category
-		)
-		if (categories.value.length <= allCategories.length) {
-			updateCategories(data)
-		}
+		setCategories(data)
 	},
 })
 
+const setCategories = (data) => {
+	let allCategories = data.map((course) => course.category)
+	allCategories = allCategories.filter(
+		(category, index) => allCategories.indexOf(category) === index && category
+	)
+	if (categories.value.length <= allCategories.length) {
+		updateCategories(data)
+	}
+}
+
+const isPersonaCaptured = async () => {
+	let persona = await call('frappe.client.get_single_value', {
+		doctype: 'LMS Settings',
+		field: 'persona_captured',
+	})
+	return persona
+}
+
+const identifyUserPersona = async () => {
+	if (user.data?.is_system_manager && !user.data?.developer_mode) {
+		let personaCaptured = await isPersonaCaptured()
+		if (personaCaptured) return
+		if (!courseCount.value) {
+			router.push({
+				name: 'PersonaForm',
+			})
+		}
+	}
+}
+
+const getCourseCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'LMS Course',
+	}).then((data) => {
+		courseCount.value = data
+		identifyUserPersona()
+	})
+}
+
 const updateCourses = () => {
 	updateFilters()
 	courses.update({

frontend/src/pages/JobDetail.vue

@@ -16,11 +16,14 @@
 					},
 				]"
 			/>
-			<div v-if="user.data?.name" class="flex space-x-2">
+			<div
+				v-if="user.data?.name && !readOnlyMode"
+				class="flex items-center space-x-2"
+			>
 				<router-link
 					v-if="user.data.name == job.data?.owner"
 					:to="{
-						name: 'JobCreation',
+						name: 'JobForm',
 						params: { jobName: job.data?.name },
 					}"
 				>
@@ -47,8 +50,14 @@
 					</template>
 					{{ __('Apply') }}
 				</Button>
+				<Badge v-else variant="subtle" theme="green" size="lg">
+					<template #prefix>
+						<Check class="h-4 w-4" />
+					</template>
+					{{ __('You have applied') }}
+				</Badge>
 			</div>
-			<div v-else>
+			<div v-else-if="!readOnlyMode">
 				<Button @click="redirectToLogin(job.data?.name)">
 					<span>
 						{{ __('Login to apply') }}
@@ -56,88 +65,63 @@
 				</Button>
 			</div>
 		</header>
-		<div v-if="job.data" class="max-w-3xl mx-auto">
+		<div v-if="job.data" class="max-w-3xl mx-auto pt-5">
 			<div class="p-4">
-				<div class="space-y-5 mb-10">
-					<div class="flex items-center">
+				<div class="space-y-5 mb-12">
+					<div class="flex">
 						<img
 							:src="job.data.company_logo"
-							class="w-16 h-16 rounded-lg object-contain cursor-pointer mr-4"
+							class="size-10 rounded-lg object-contain cursor-pointer mr-4"
 							:alt="job.data.company_name"
 							@click="redirectToWebsite(job.data.company_website)"
 						/>
-						<div class="text-2xl text-ink-gray-9 font-semibold">
-							{{ job.data.job_title }}
+						<div class="">
+							<div class="text-2xl text-ink-gray-9 font-semibold mb-1">
+								{{ job.data.job_title }}
+							</div>
+							<div class="text-sm text-ink-gray-5 font-semibold">
+								{{ job.data.company_name }} - {{ job.data.location }},
+								{{ job.data.country }}
+							</div>
 						</div>
 					</div>
-					<div>
-						<div
-							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-4">
-								<Building2 class="h-4 w-4 text-ink-green-2" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs text-ink-gray-5 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-4">
-								<MapPin class="size-4 text-ink-red-3" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
-										{{ __('Location') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ job.data.location }}
-									</span>
-								</div>
-							</div>
-							<div class="flex items-center space-x-4">
-								<ClipboardType class="h-4 w-4 text-yellow-500" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
-										{{ __('Category') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ job.data.type }}
-									</span>
-								</div>
-							</div>
-							<div class="flex items-center space-x-4">
-								<CalendarDays class="h-4 w-4 text-ink-blue-2" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs 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-4"
-							>
-								<SquareUserRound class="h-4 w-4 text-purple-500" />
-								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
-										{{ __('Applications Received') }}
-									</span>
-									<span class="text-sm font-semibold">
-										{{ applicationCount.data }}
-									</span>
-								</div>
-							</div>
-						</div>
+
+					<div class="space-x-5">
+						<Badge size="lg">
+							<template #prefix>
+								<CalendarDays class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ dayjs(job.data.creation).fromNow() }}
+						</Badge>
+						<Badge size="lg">
+							<template #prefix>
+								<ClipboardType class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ job.data.type }}
+						</Badge>
+						<Badge v-if="applicationCount.data" size="lg">
+							<template #prefix>
+								<SquareUserRound class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ applicationCount.data }}
+							{{
+								applicationCount.data == 1 ? __('applicant') : __('applicants')
+							}}
+						</Badge>
 					</div>
 				</div>
+
+				<div class="flex items-center justify-between">
+					<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
+					<div>
+						<FileText class="size-3 stroke-1 text-ink-gray-5" />
+					</div>
+					<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
+				</div>
+
 				<p
 					v-html="job.data.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-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
+					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-12"
 				></p>
 			</div>
 			<JobApplicationModal
@@ -149,25 +133,32 @@
 	</div>
 </template>
 <script setup>
-import { Button, Breadcrumbs, createResource, usePageMeta } from 'frappe-ui'
+import {
+	Badge,
+	Button,
+	Breadcrumbs,
+	createResource,
+	usePageMeta,
+} from 'frappe-ui'
 import { inject, ref } from 'vue'
 import { sessionStore } from '../stores/session'
 import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
 import {
-	MapPin,
+	Check,
 	SendHorizonal,
 	Pencil,
-	Building2,
 	CalendarDays,
-	ClipboardType,
 	SquareUserRound,
 	SquareArrowOutUpRight,
+	FileText,
+	ClipboardType,
 } from 'lucide-vue-next'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
 const { brand } = sessionStore()
 const showApplicationModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	job: {
@@ -235,3 +226,12 @@ usePageMeta(() => {
 	}
 })
 </script>
+<style>
+p {
+	margin-bottom: 0.5rem !important;
+	line-height: 1.5;
+}
+p span {
+	line-height: 1.5;
+}
+</style>

frontend/src/pages/JobForm.vue

@@ -9,34 +9,39 @@
 			</Button>
 		</header>
 		<div class="py-5">
-			<div class="container border-b mb-4 pb-4">
+			<div class="container border-b mb-4 pb-5">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Job Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-4">
-					<div>
+				<div class="grid grid-cols-2 gap-5">
+					<div class="space-y-4">
 						<FormControl
 							v-model="job.job_title"
 							:label="__('Title')"
-							class="mb-4"
 							:required="true"
 						/>
-						<FormControl
-							v-model="job.location"
-							:label="__('Location')"
-							:required="true"
-						/>
-					</div>
-					<div>
 						<FormControl
 							v-model="job.type"
 							:label="__('Type')"
 							type="select"
 							:options="jobTypes"
-							class="mb-4"
+							:required="true"
+						/>
+					</div>
+					<div class="space-y-4">
+						<FormControl
+							v-model="job.location"
+							:label="__('City')"
+							:required="true"
+						/>
+						<Link
+							v-model="job.country"
+							doctype="Country"
+							:label="__('Country')"
 							:required="true"
 						/>
 						<FormControl
+							v-if="jobName != 'new'"
 							v-model="job.status"
 							:label="__('Status')"
 							type="select"
@@ -45,25 +50,12 @@
 						/>
 					</div>
 				</div>
-				<div class="mt-4">
-					<label class="block text-ink-gray-5 text-xs mb-1">
-						{{ __('Description') }}
-						<span class="text-ink-red-3">*</span>
-					</label>
-					<TextEditor
-						:content="job.description"
-						@change="(val) => (job.description = val)"
-						:editable="true"
-						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
-					/>
-				</div>
 			</div>
-			<div class="container mb-4 pb-4">
+			<div class="container border-b mb-4 pb-5">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Company Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-4">
+				<div class="grid grid-cols-2 gap-5">
 					<div>
 						<FormControl
 							v-model="job.company_name"
@@ -128,6 +120,19 @@
 					</div>
 				</div>
 			</div>
+			<div class="container mt-4">
+				<label class="block text-ink-gray-5 text-xs mb-1">
+					{{ __('Description') }}
+					<span class="text-ink-red-3">*</span>
+				</label>
+				<TextEditor
+					:content="job.description"
+					@change="(val) => (job.description = val)"
+					:editable="true"
+					:fixedMenu="true"
+					editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
@@ -140,12 +145,13 @@ import {
 	TextEditor,
 	FileUploader,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, onMounted, reactive, inject } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { useRouter } from 'vue-router'
-import { getFileSize, showToast } from '../utils'
+import { getFileSize } from '@/utils'
 
 const user = inject('$user')
 const router = useRouter()
@@ -217,6 +223,7 @@ const imageResource = createResource({
 const job = reactive({
 	job_title: '',
 	location: '',
+	country: '',
 	type: 'Full Time',
 	status: 'Open',
 	company_name: '',
@@ -253,7 +260,7 @@ const createNewJob = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -272,7 +279,7 @@ const editJobDetails = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -317,7 +324,7 @@ const breadcrumbs = computed(() => {
 		},
 		{
 			label: props.jobName == 'new' ? 'New Job' : 'Edit Job',
-			route: { name: 'JobCreation' },
+			route: { name: 'JobForm' },
 		},
 	]
 	return crumbs

frontend/src/pages/Jobs.vue

@@ -10,13 +10,13 @@
 			<router-link
 				v-if="user.data?.name"
 				:to="{
-					name: 'JobCreation',
+					name: 'JobForm',
 					params: {
 						jobName: 'new',
 					},
 				}"
 			>
-				<Button variant="solid">
+				<Button v-if="!readOnlyMode" variant="solid">
 					<template #prefix>
 						<Plus class="h-4 w-4" />
 					</template>
@@ -25,40 +25,50 @@
 			</router-link>
 		</header>
 		<div>
-			<div v-if="jobs.data?.length" class="p-5">
-				<div
-					class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
-				>
-					<div class="text-xl text-ink-gray-9 font-semibold">
-						{{ __('Find the perfect job for you') }}
-					</div>
-					<div class="grid grid-cols-2 gap-2">
-						<FormControl
-							type="text"
-							:placeholder="__('Search')"
-							v-model="searchQuery"
-							class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
-							@input="updateJobs"
-						>
-							<template #prefix>
-								<Search
-									class="w-4 h-4 stroke-1.5 text-ink-gray-5"
-									name="search"
-								/>
-							</template>
-						</FormControl>
-						<FormControl
-							v-model="jobType"
-							type="select"
-							:options="jobTypes"
-							class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
-							:placeholder="__('Type')"
-							@change="updateJobs"
-						/>
-					</div>
+			<div
+				v-if="jobCount"
+				class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full md:w-4/5 mx-auto p-5"
+			>
+				<div class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0">
+					{{ __('{0} Open Jobs').format(jobCount) }}
 				</div>
 
-				<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
+				<div
+					v-if="jobs.data?.length || jobCount > 0"
+					class="grid grid-cols-1 md:grid-cols-3 gap-2"
+				>
+					<FormControl
+						type="text"
+						:placeholder="__('Search')"
+						v-model="searchQuery"
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+						@input="updateJobs"
+					>
+						<template #prefix>
+							<Search
+								class="w-4 h-4 stroke-1.5 text-ink-gray-5"
+								name="search"
+							/>
+						</template>
+					</FormControl>
+					<Link
+						doctype="Country"
+						v-model="country"
+						:placeholder="__('Country')"
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+					/>
+					<FormControl
+						v-model="jobType"
+						type="select"
+						:options="jobTypes"
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+						:placeholder="__('Type')"
+						@change="updateJobs"
+					/>
+				</div>
+			</div>
+			<div v-if="jobs.data?.length" class="w-full md:w-4/5 mx-auto p-5 pt-0">
+				<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 					<router-link
 						v-for="job in jobs.data"
 						:to="{
@@ -71,22 +81,7 @@
 					</router-link>
 				</div>
 			</div>
-			<div
-				v-else
-				class="flex flex-col items-center justify-center text-sm text-ink-gray-5 mt-48"
-			>
-				<Laptop class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-				<div class="text-lg font-medium mb-1">
-					{{ __('No jobs found') }}
-				</div>
-				<div class="leading-5 w-2/5 text-center">
-					{{
-						__(
-							'There are no jobs available at the moment. Open a job opportunity or check here again later.'
-						)
-					}}
-				</div>
-			</div>
+			<EmptyState v-else type="Job Openings" />
 		</div>
 	</div>
 </template>
@@ -94,21 +89,27 @@
 import {
 	Button,
 	Breadcrumbs,
+	call,
 	createResource,
 	FormControl,
 	usePageMeta,
 } from 'frappe-ui'
-import { Laptop, Plus, Search } from 'lucide-vue-next'
+import { Plus, Search } from 'lucide-vue-next'
 import { sessionStore } from '../stores/session'
-import { inject, computed, ref, onMounted } from 'vue'
+import { inject, computed, ref, onMounted, watch } from 'vue'
 import JobCard from '@/components/JobCard.vue'
+import Link from '@/components/Controls/Link.vue'
+import EmptyState from '@/components/EmptyState.vue'
 
 const user = inject('$user')
 const jobType = ref(null)
 const { brand } = sessionStore()
 const searchQuery = ref('')
+const country = ref(null)
 const filters = ref({})
 const orFilters = ref({})
+const jobCount = ref(0)
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
@@ -116,6 +117,7 @@ onMounted(() => {
 		jobType.value = queries.get('type')
 	}
 	updateJobs()
+	getJobCount()
 })
 
 const jobs = createResource({
@@ -153,8 +155,30 @@ const updateFilters = () => {
 	} else {
 		orFilters.value = {}
 	}
+
+	if (country.value) {
+		filters.value.country = country.value
+	} else {
+		delete filters.value.country
+	}
 }
 
+const getJobCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'Job Opportunity',
+		filters: {
+			status: 'Open',
+			disabled: 0,
+		},
+	}).then((data) => {
+		jobCount.value = data
+	})
+}
+
+watch(country, (val) => {
+	updateJobs()
+})
+
 const jobTypes = computed(() => {
 	return [
 		'',

frontend/src/pages/Lesson.vue

@@ -4,166 +4,237 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<CertificationLinks :courseName="courseName" />
+			<div class="flex items-center space-x-2">
+				<Tooltip v-if="canGoZen()" :text="__('Zen Mode')">
+					<Button @click="goFullScreen()">
+						<template #icon>
+							<Focus class="w-4 h-4 stroke-2" />
+						</template>
+					</Button>
+				</Tooltip>
+				<CertificationLinks :courseName="courseName" />
+			</div>
 		</header>
 		<div class="grid md:grid-cols-[70%,30%] h-screen">
-			<div
-				v-if="lesson.data.no_preview"
-				class="border-r text-center pt-10 px-5 md:px-0 pb-10"
-			>
-				<p class="mb-4">
-					{{
-						__(
-							'This lesson is not available for preview. Please enroll in the course to access it.'
-						)
-					}}
-				</p>
-				<Button v-if="user.data" @click="enrollStudent()" variant="solid">
-					{{ __('Start Learning') }}
-				</Button>
-				<Button v-else @click="redirectToLogin()">
-					{{ __('Login') }}
-				</Button>
-			</div>
-			<div v-else class="border-r container pt-5 pb-10 px-5">
-				<div class="flex flex-col md:flex-row md:items-center justify-between">
-					<div class="text-3xl font-semibold text-ink-gray-9">
-						{{ lesson.data.title }}
+			<div v-if="lesson.data.no_preview" class="border-r">
+				<div class="shadow rounded-md w-3/4 mt-10 mx-auto text-center p-4">
+					<div class="flex items-center justify-center mt-4 space-x-2">
+						<LockKeyholeIcon class="size-4 stroke-2 text-ink-gray-5" />
+						<div class="text-lg font-semibold text-ink-gray-7">
+							{{ __('This lesson is locked') }}
+						</div>
 					</div>
-					<div class="flex items-center mt-2 md:mt-0">
-						<router-link
-							v-if="lesson.data.prev"
-							:to="{
-								name: 'Lesson',
-								params: {
-									courseName: courseName,
-									chapterNumber: lesson.data.prev.split('.')[0],
-									lessonNumber: lesson.data.prev.split('.')[1],
-								},
-							}"
-						>
-							<Button class="mr-2">
-								<template #prefix>
-									<ChevronLeft class="w-4 h-4 stroke-1" />
-								</template>
-								<span>
-									{{ __('Previous') }}
-								</span>
-							</Button>
-						</router-link>
-						<router-link
-							v-if="allowEdit()"
-							:to="{
-								name: 'LessonForm',
-								params: {
-									courseName: courseName,
-									chapterNumber: props.chapterNumber,
-									lessonNumber: props.lessonNumber,
-								},
-							}"
-						>
-							<Button class="mr-2">
-								{{ __('Edit') }}
-							</Button>
-						</router-link>
-						<router-link
-							v-if="lesson.data.next"
-							:to="{
-								name: 'Lesson',
-								params: {
-									courseName: courseName,
-									chapterNumber: lesson.data.next.split('.')[0],
-									lessonNumber: lesson.data.next.split('.')[1],
-								},
-							}"
-						>
-							<Button>
-								<template #suffix>
-									<ChevronRight class="w-4 h-4 stroke-1" />
-								</template>
-								<span>
-									{{ __('Next') }}
-								</span>
-							</Button>
-						</router-link>
-						<router-link
-							v-else
-							:to="{
-								name: 'CourseDetail',
-								params: { courseName: courseName },
-							}"
-						>
-							<Button>
-								{{ __('Back to Course') }}
-							</Button>
-						</router-link>
+					<div class="mt-1 mb-4 text-ink-gray-7">
+						{{
+							__(
+								'This lesson is not available for preview. Please enroll in the course to access it.'
+							)
+						}}
 					</div>
-				</div>
-
-				<div class="flex items-center mt-2">
-					<span
-						class="h-6 mr-1"
-						:class="{
-							'avatar-group overlap': lesson.data.instructors?.length > 1,
-						}"
+					<Button
+						v-if="user.data && !lesson.data.disable_self_learning"
+						@click="enrollStudent()"
+						variant="solid"
 					>
-						<UserAvatar
-							v-for="instructor in lesson.data.instructors"
-							:user="instructor"
-						/>
-					</span>
-					<CourseInstructors
-						v-if="lesson.data?.instructors"
-						:instructors="lesson.data.instructors"
-					/>
+						{{ __('Start Learning') }}
+					</Button>
+					<Badge
+						theme="blue"
+						size="lg"
+						v-else-if="lesson.data.disable_self_learning"
+						class="mt-2"
+					>
+						{{ __('Contact the Administrator to enroll for this course.') }}
+					</Badge>
+					<Button v-else @click="redirectToLogin()">
+						<template #prefix>
+							<LogIn class="w-4 h-4 stroke-1" />
+						</template>
+						{{ __('Login') }}
+					</Button>
 				</div>
+			</div>
+			<div
+				v-else
+				ref="lessonContainer"
+				class="bg-surface-white"
+				:class="{
+					'overflow-y-auto': zenModeEnabled,
+				}"
+			>
 				<div
-					v-if="
-						lesson.data.instructor_content &&
-						JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
-						allowInstructorContent()
-					"
-					class="bg-surface-gray-2 p-3 rounded-md mt-6"
+					class="border-r container pt-5 pb-10 px-5 h-full"
+					:class="{
+						'w-full md:w-3/4 mx-auto border-none !pt-10': zenModeEnabled,
+					}"
 				>
-					<div class="text-ink-gray-5 font-medium">
-						{{ __('Instructor Notes') }}
+					<div
+						class="flex flex-col md:flex-row md:items-center justify-between"
+					>
+						<div class="flex flex-col">
+							<div class="text-3xl font-semibold text-ink-gray-9">
+								{{ lesson.data.title }}
+							</div>
+
+							<div
+								v-if="zenModeEnabled"
+								class="relative flex items-center space-x-2 text-sm mt-1 text-ink-gray-7 group w-fit mt-2"
+							>
+								<span>
+									{{ lesson.data.chapter_title }} -
+									{{ lesson.data.course_title }}
+								</span>
+								<Info class="size-3" />
+								<div
+									class="hidden group-hover:block rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-xl absolute left-0 top-full mt-2"
+								>
+									{{ Math.ceil(lesson.data.membership.progress) }}%
+									{{ __('completed') }}
+								</div>
+							</div>
+						</div>
+
+						<div class="flex items-center space-x-2 mt-2 md:mt-0">
+							<Button v-if="zenModeEnabled" @click="showDiscussionsInZenMode()">
+								<template #icon>
+									<MessageCircleQuestion class="w-4 h-4 stroke-1.5" />
+								</template>
+							</Button>
+							<router-link
+								v-if="lesson.data.prev"
+								:to="{
+									name: 'Lesson',
+									params: {
+										courseName: courseName,
+										chapterNumber: lesson.data.prev.split('.')[0],
+										lessonNumber: lesson.data.prev.split('.')[1],
+									},
+								}"
+							>
+								<Button>
+									<template #prefix>
+										<ChevronLeft class="w-4 h-4 stroke-1" />
+									</template>
+									<span>
+										{{ __('Previous') }}
+									</span>
+								</Button>
+							</router-link>
+							<router-link
+								v-if="allowEdit()"
+								:to="{
+									name: 'LessonForm',
+									params: {
+										courseName: courseName,
+										chapterNumber: props.chapterNumber,
+										lessonNumber: props.lessonNumber,
+									},
+								}"
+							>
+								<Button>
+									{{ __('Edit') }}
+								</Button>
+							</router-link>
+							<router-link
+								v-if="lesson.data.next"
+								:to="{
+									name: 'Lesson',
+									params: {
+										courseName: courseName,
+										chapterNumber: lesson.data.next.split('.')[0],
+										lessonNumber: lesson.data.next.split('.')[1],
+									},
+								}"
+							>
+								<Button>
+									<template #suffix>
+										<ChevronRight class="w-4 h-4 stroke-1" />
+									</template>
+									<span>
+										{{ __('Next') }}
+									</span>
+								</Button>
+							</router-link>
+							<router-link
+								v-else
+								:to="{
+									name: 'CourseDetail',
+									params: { courseName: courseName },
+								}"
+							>
+								<Button>
+									{{ __('Back to Course') }}
+								</Button>
+							</router-link>
+						</div>
+					</div>
+
+					<div v-if="!zenModeEnabled" class="flex items-center mt-2">
+						<span
+							class="h-6 mr-1"
+							:class="{
+								'avatar-group overlap': lesson.data.instructors?.length > 1,
+							}"
+						>
+							<UserAvatar
+								v-for="instructor in lesson.data.instructors"
+								:user="instructor"
+							/>
+						</span>
+						<CourseInstructors
+							v-if="lesson.data?.instructors"
+							:instructors="lesson.data.instructors"
+						/>
+					</div>
+
+					<div
+						v-if="
+							lesson.data.instructor_content &&
+							JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
+							allowInstructorContent()
+						"
+						class="bg-surface-gray-2 p-3 rounded-md mt-6"
+					>
+						<div class="text-ink-gray-5 font-medium">
+							{{ __('Instructor Notes') }}
+						</div>
+						<div
+							id="instructor-content"
+							class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
+						></div>
 					</div>
 					<div
-						id="instructor-content"
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
-					></div>
-				</div>
-				<div
-					v-else-if="lesson.data.instructor_notes"
-					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
-				>
-					<LessonContent :content="lesson.data.instructor_notes" />
-				</div>
-				<div
-					v-if="lesson.data.content"
-					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-5"
-				>
-					<div id="editor"></div>
-				</div>
-				<div
-					v-else
-					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-5"
-				>
-					<LessonContent
-						v-if="lesson.data?.body"
-						:content="lesson.data.body"
-						:youtube="lesson.data.youtube"
-						:quizId="lesson.data.quiz_id"
-					/>
-				</div>
-				<div class="mt-20">
-					<Discussions
-						v-if="allowDiscussions"
-						:title="'Questions'"
-						:doctype="'Course Lesson'"
-						:docname="lesson.data.name"
-						:key="lesson.data.name"
-					/>
+						v-else-if="lesson.data.instructor_notes"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
+					>
+						<LessonContent :content="lesson.data.instructor_notes" />
+					</div>
+					<div
+						v-if="lesson.data.content"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
+					>
+						<div id="editor"></div>
+					</div>
+					<div
+						v-else
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-8"
+					>
+						<LessonContent
+							v-if="lesson.data?.body"
+							:content="lesson.data.body"
+							:youtube="lesson.data.youtube"
+							:quizId="lesson.data.quiz_id"
+						/>
+					</div>
+					<div class="mt-20" ref="discussionsContainer">
+						<Discussions
+							v-if="allowDiscussions"
+							:title="'Questions'"
+							:doctype="'Course Lesson'"
+							:docname="lesson.data.name"
+							:key="lesson.data.name"
+						/>
+					</div>
 				</div>
 			</div>
 			<div class="sticky top-10">
@@ -193,14 +264,37 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button, usePageMeta } from 'frappe-ui'
-import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
+import {
+	createResource,
+	Badge,
+	Breadcrumbs,
+	Button,
+	Tooltip,
+	usePageMeta,
+} from 'frappe-ui'
+import {
+	computed,
+	watch,
+	inject,
+	ref,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+} from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRouter, useRoute } from 'vue-router'
-import { ChevronLeft, ChevronRight, GraduationCap } from 'lucide-vue-next'
+import {
+	ChevronLeft,
+	ChevronRight,
+	LockKeyholeIcon,
+	LogIn,
+	Focus,
+	Info,
+	MessageCircleQuestion,
+} from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
-import { getEditorTools } from '../utils'
+import { getEditorTools, enablePlyr } from '@/utils'
 import { sessionStore } from '@/stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
@@ -215,6 +309,10 @@ const allowDiscussions = ref(false)
 const editor = ref(null)
 const instructorEditor = ref(null)
 const lessonProgress = ref(0)
+const lessonContainer = ref(null)
+const zenModeEnabled = ref(false)
+const hasQuiz = ref(false)
+const discussionsContainer = ref(null)
 const timer = ref(0)
 const { brand } = sessionStore()
 let timerInterval
@@ -236,11 +334,27 @@ const props = defineProps({
 
 onMounted(() => {
 	startTimer()
+	document.addEventListener('fullscreenchange', attachFullscreenEvent)
+})
+
+const attachFullscreenEvent = () => {
+	if (document.fullscreenElement) {
+		zenModeEnabled.value = true
+		allowDiscussions.value = false
+	} else {
+		zenModeEnabled.value = false
+		if (!hasQuiz.value) {
+			allowDiscussions.value = true
+		}
+	}
+}
+
+onBeforeUnmount(() => {
+	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
 })
 
 const lesson = createResource({
 	url: 'lms.lms.utils.get_lesson',
-	cache: ['lesson', props.courseName, props.chapterNumber, props.lessonNumber],
 	makeParams(values) {
 		return {
 			course: props.courseName,
@@ -249,36 +363,37 @@ const lesson = createResource({
 		}
 	},
 	auto: true,
-	onSuccess(data) {
-		if (Object.keys(data).length === 0) {
-			router.push({
-				name: 'CourseDetail',
-				params: { courseName: props.courseName },
-			})
-			return
-		}
-		lessonProgress.value = data.membership?.progress
-		if (data.content) editor.value = renderEditor('editor', data.content)
-		if (
-			data.instructor_content &&
-			JSON.parse(data.instructor_content)?.blocks?.length > 1
-		)
-			instructorEditor.value = renderEditor(
-				'instructor-content',
-				data.instructor_content
-			)
-		editor.value?.isReady.then(() => {
-			checkIfDiscussionsAllowed()
-		})
-
-		if (!editor.value && data.body) {
-			const quizRegex = /\{\{ Quiz\(".*"\) \}\}/
-			const hasQuiz = quizRegex.test(data.body)
-			if (!hasQuiz) allowDiscussions.value = true
-		}
-	},
 })
 
+const setupLesson = (data) => {
+	if (Object.keys(data).length === 0) {
+		router.push({
+			name: 'CourseDetail',
+			params: { courseName: props.courseName },
+		})
+		return
+	}
+	lessonProgress.value = data.membership?.progress
+	if (data.content) editor.value = renderEditor('editor', data.content)
+	if (
+		data.instructor_content &&
+		JSON.parse(data.instructor_content)?.blocks?.length > 1
+	)
+		instructorEditor.value = renderEditor(
+			'instructor-content',
+			data.instructor_content
+		)
+	editor.value?.isReady.then(() => {
+		checkIfDiscussionsAllowed()
+	})
+
+	if (!editor.value && data.body) {
+		const quizRegex = /\{\{ Quiz\(".*"\) \}\}/
+		hasQuiz.value = quizRegex.test(data.body)
+		if (!hasQuiz.value && !zenModeEnabled) allowDiscussions.value = true
+	}
+}
+
 const renderEditor = (holder, content) => {
 	// empty the holder
 	if (document.getElementById(holder))
@@ -348,10 +463,19 @@ watch(
 			clearInterval(timerInterval)
 			timer.value = 0
 			startTimer()
+			enablePlyr()
 		}
 	}
 )
 
+watch(
+	() => lesson.data,
+	(data) => {
+		setupLesson(data)
+		enablePlyr()
+	}
+)
+
 const startTimer = () => {
 	timerInterval = setInterval(() => {
 		timer.value++
@@ -367,13 +491,13 @@ onBeforeUnmount(() => {
 })
 
 const checkIfDiscussionsAllowed = () => {
-	let quizPresent = false
 	JSON.parse(lesson.data?.content)?.blocks?.forEach((block) => {
-		if (block.type === 'quiz') quizPresent = true
+		if (block.type === 'quiz') hasQuiz.value = true
 	})
 
 	if (
-		!quizPresent &&
+		!hasQuiz.value &&
+		!zenModeEnabled.value &&
 		(lesson.data?.membership ||
 			user.data?.is_moderator ||
 			user.data?.is_instructor)
@@ -382,6 +506,7 @@ const checkIfDiscussionsAllowed = () => {
 }
 
 const allowEdit = () => {
+	if (window.read_only_mode) return false
 	if (user.data?.is_moderator) return true
 	if (lesson.data?.instructors?.includes(user.data?.name)) return true
 	return false
@@ -417,6 +542,48 @@ const enrollStudent = () => {
 	)
 }
 
+const canGoZen = () => {
+	if (
+		user.data?.is_moderator ||
+		user.data?.is_instructor ||
+		user.data?.is_evaluator
+	)
+		return false
+	if (lesson.data?.membership) return true
+	return false
+}
+
+const goFullScreen = () => {
+	if (lessonContainer.value.requestFullscreen) {
+		lessonContainer.value.requestFullscreen()
+	} else if (lessonContainer.value.mozRequestFullScreen) {
+		lessonContainer.value.mozRequestFullScreen()
+	} else if (lessonContainer.value.webkitRequestFullscreen) {
+		lessonContainer.value.webkitRequestFullscreen()
+	} else if (lessonContainer.value.msRequestFullscreen) {
+		lessonContainer.value.msRequestFullscreen()
+	}
+}
+
+const showDiscussionsInZenMode = () => {
+	if (allowDiscussions.value) {
+		allowDiscussions.value = false
+	} else {
+		allowDiscussions.value = true
+		scrollDiscussionsIntoView()
+	}
+}
+
+const scrollDiscussionsIntoView = () => {
+	nextTick(() => {
+		discussionsContainer.value?.scrollIntoView({
+			behavior: 'smooth',
+			block: 'center',
+			inline: 'nearest',
+		})
+	})
+}
+
 const redirectToLogin = () => {
 	window.location.href = `/login?redirect-to=/lms/courses/${props.courseName}`
 }
@@ -590,4 +757,30 @@ usePageMeta(() => {
 .tc-table {
 	border-left: 1px solid #e8e8eb;
 }
+
+.plyr__volume input[type='range'] {
+	display: none;
+}
+
+.plyr__control--overlaid {
+	background: radial-gradient(
+		circle,
+		rgba(0, 0, 0, 0.4) 0%,
+		rgba(0, 0, 0, 0.5) 50%
+	);
+}
+
+.plyr__control:hover {
+	background: none;
+}
+
+.plyr--video {
+	border: 1px solid theme('colors.gray.200');
+	border-radius: 8px;
+}
+
+:root {
+	--plyr-range-fill-background: white;
+	--plyr-video-control-background-hover: transparent;
+}
 </style>

frontend/src/pages/LessonForm.vue

@@ -84,6 +84,7 @@ import {
 	createResource,
 	FormControl,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import {
 	computed,
@@ -97,7 +98,7 @@ import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
-import { createToast, getEditorTools } from '@/utils'
+import { getEditorTools, enablePlyr } from '@/utils'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 
@@ -133,6 +134,7 @@ onMounted(() => {
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
 	window.addEventListener('keydown', keyboardShortcut)
+	enablePlyr()
 })
 
 const renderEditor = (holder) => {
@@ -141,6 +143,9 @@ const renderEditor = (holder) => {
 		tools: getEditorTools(true),
 		autofocus: true,
 		defaultBlock: 'markdown',
+		onChange: async (api, event) => {
+			enablePlyr()
+		},
 	})
 }
 
@@ -406,14 +411,14 @@ const createNewLesson = () => {
 								updateOnboardingStep('create_first_lesson')
 
 							capture('lesson_created')
-							showToast('Success', 'Lesson created successfully', 'check')
+							toast.success(__('Lesson created successfully'))
 							lessonDetails.reload()
 						},
 					}
 				)
 			},
 			onError(err) {
-				showToast('Error', err.message, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -430,11 +435,11 @@ const editCurrentLesson = () => {
 			},
 			onSuccess() {
 				showSuccessMessage
-					? showToast('Success', 'Lesson updated successfully', 'check')
+					? toast.success(__('Lesson updated successfully'))
 					: ''
 			},
 			onError(err) {
-				showToast('Error', err.message, 'x')
+				toast.error(err.message)
 			},
 		}
 	)
@@ -449,20 +454,6 @@ const validateLesson = () => {
 	}
 }
 
-const showToast = (title, text, icon) => {
-	createToast({
-		title: title,
-		text: text,
-		icon: icon,
-		iconClasses:
-			icon == 'check'
-				? 'bg-surface-green-3 text-ink-white rounded-md p-px'
-				: 'bg-surface-red-5 text-ink-white rounded-md p-px',
-		position: icon == 'check' ? 'bottom-right' : 'top-center',
-		timeout: icon == 'check' ? 5 : 10,
-	})
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{
@@ -624,8 +615,7 @@ usePageMeta(() => {
 }
 
 iframe {
-	border-top: 3px solid theme('colors.gray.700');
-	border-bottom: 3px solid theme('colors.gray.700');
+	border: none !important;
 }
 
 .tc-table {
@@ -639,4 +629,30 @@ iframe {
 .ce-popover-item[data-item-name='markdown'] {
 	display: none !important;
 }
+
+.plyr__volume input[type='range'] {
+	display: none;
+}
+
+.plyr__control--overlaid {
+	background: radial-gradient(
+		circle,
+		rgba(0, 0, 0, 0.4) 0%,
+		rgba(0, 0, 0, 0.5) 50%
+	);
+}
+
+.plyr__control:hover {
+	background: none;
+}
+
+.plyr--video {
+	border: 1px solid theme('colors.gray.200');
+	border-radius: 8px;
+}
+
+:root {
+	--plyr-range-fill-background: white;
+	--plyr-video-control-background-hover: transparent;
+}
 </style>

frontend/src/pages/PersonaForm.vue

@@ -0,0 +1,154 @@
+<template>
+	<div class="flex h-screen overflow-hidden sm:bg-gray-50">
+		<div class="relative h-full z-10 mx-auto sm:w-max pt-40">
+			<div class="mx-auto flex items-center justify-center space-x-2">
+				<LMSLogo class="size-7" />
+				<span
+					class="select-none text-xl font-semibold tracking-tight text-gray-900"
+				>
+					Learning
+				</span>
+			</div>
+			<div
+				class="mx-auto w-full h-fit bg-white py-8 sm:mt-6 sm:w-96 sm:rounded-lg sm:px-8 sm:shadow-xl"
+			>
+				<div class="font-medium text-center mb-8">
+					{{ __('Help us understand your needs') }}
+				</div>
+
+				<div class="mb-5">
+					<div class="text-sm text-gray-700 mb-2">
+						{{ __('What is your use case for Frappe Learning?') }}
+					</div>
+					<FormControl
+						v-model="persona.useCase"
+						type="select"
+						:options="useCaseOptions"
+					/>
+				</div>
+
+				<div class="mb-5">
+					<div class="text-sm text-gray-700 mb-2">
+						{{ __('What best describes your role?') }}
+					</div>
+					<FormControl
+						v-model="persona.role"
+						type="select"
+						:options="roleOptions"
+					/>
+				</div>
+
+				<div class="flex w-full">
+					<Button variant="solid" class="mx-auto" @click="submitPersona()">
+						{{ __('Submit and Continue') }}
+					</Button>
+				</div>
+			</div>
+			<div
+				class="text-center absolute bottom-0 right-0 left-0 mx-auto cursor-pointer text-sm pb-4"
+				@click="skipPersonaForm()"
+			>
+				{{ __('Skip') }}
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import { Button, call, FormControl, usePageMeta } from 'frappe-ui'
+import { computed, inject, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { sessionStore } from '@/stores/session'
+
+const user = inject('$user')
+const router = useRouter()
+const { brand } = sessionStore()
+
+const persona = reactive({
+	role: null,
+	useCase: null,
+})
+
+const submitPersona = () => {
+	let responses = {
+		site: user.data?.sitename,
+		no_of_students: persona.noOfStudents,
+		use_case: persona.useCase,
+	}
+	call('lms.lms.api.capture_user_persona', {
+		responses: JSON.stringify(responses),
+	}).then(() => {
+		router.push({
+			name: 'Courses',
+		})
+	})
+}
+
+const skipPersonaForm = () => {
+	call('frappe.client.set_value', {
+		doctype: 'LMS Settings',
+		name: null,
+		fieldname: 'persona_captured',
+		value: 1,
+	}).then(() => {
+		router.push({
+			name: 'Courses',
+		})
+	})
+}
+
+const roleOptions = computed(() => {
+	const options = [
+		'Trainer / Instructor',
+		'Freelancer / Consultant',
+		'HR / L&D Professional',
+		'School / University Admin',
+		'Software Developer',
+		'Community Manager',
+		'Business Owner / Team Lead',
+		'Other',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+const noOfStudentsOptions = computed(() => {
+	const options = [
+		'Less than 50',
+		'50-200',
+		'200-1000',
+		'1000+',
+		'Not sure yet',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+const useCaseOptions = computed(() => {
+	const options = [
+		'Teaching students in a school/university',
+		'Training employees in my company',
+		'Onboarding and educating my users/community',
+		'Selling courses and earning income',
+		'Other',
+	]
+
+	return options.map((option) => ({
+		label: option,
+		value: option,
+	}))
+})
+
+usePageMeta(() => {
+	return {
+		title: 'Persona',
+		icon: brand.favicon,
+	}
+})
+</script>

frontend/src/pages/Profile.vue

@@ -25,7 +25,11 @@
 					@select="(imageUrl) => coverImage.submit({ url: imageUrl })"
 				>
 					<template v-slot="{ togglePopover }">
-						<Button variant="outline" @click="togglePopover()">
+						<Button
+							v-if="!readOnlyMode"
+							variant="outline"
+							@click="togglePopover()"
+						>
 							<template #prefix>
 								<Edit class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
 							</template>
@@ -58,7 +62,7 @@
 					</div>
 				</div>
 				<Button
-					v-if="isSessionUser()"
+					v-if="isSessionUser() && !readOnlyMode"
 					class="mt-3 sm:mt-0 md:ml-auto"
 					@click="editProfile()"
 				>
@@ -95,7 +99,7 @@ import {
 } from 'frappe-ui'
 import { computed, inject, watch, ref, onMounted, watchEffect } from 'vue'
 import { sessionStore } from '@/stores/session'
-import { Edit, icons } from 'lucide-vue-next'
+import { Edit } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRoute, useRouter } from 'vue-router'
 import NoPermission from '@/components/NoPermission.vue'
@@ -109,6 +113,7 @@ const route = useRoute()
 const router = useRouter()
 const activeTab = ref('')
 const showProfileModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	username: {

frontend/src/pages/ProfileEvaluator.vue

@@ -4,134 +4,150 @@
 			{{ __('My availability') }}
 		</h2>
 
-		<div class="">
-			<div
-				class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
-			>
-				<div>
-					{{ __('Day') }}
-				</div>
-				<div>
-					{{ __('Start Time') }}
-				</div>
-				<div>
-					{{ __('End Time') }}
-				</div>
-			</div>
-
-			<div
-				v-if="evaluator.data"
-				v-for="slot in evaluator.data.slots.schedule"
-				class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
-			>
-				<FormControl
-					type="select"
-					:options="days"
-					v-model="slot.day"
-					@focusout.stop="update(slot.name, 'day', slot.day)"
-				/>
-				<FormControl
-					type="time"
-					v-model="slot.start_time"
-					@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
-				/>
-				<FormControl
-					type="time"
-					v-model="slot.end_time"
-					@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
-				/>
-				<X
-					@click="deleteRow(slot.name)"
-					class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
-				/>
-			</div>
-
-			<div
-				class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4"
-				v-show="showSlotsTemplate"
-			>
-				<FormControl
-					type="select"
-					:options="days"
-					v-model="newSlot.day"
-					@focusout.stop="add()"
-				/>
-				<FormControl
-					type="time"
-					v-model="newSlot.start_time"
-					@focusout.stop="add()"
-				/>
-				<FormControl
-					type="time"
-					v-model="newSlot.end_time"
-					@focusout.stop="add()"
-				/>
-			</div>
-
-			<Button @click="showSlotsTemplate = 1">
-				<template #prefix>
-					<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
-				</template>
-				{{ __('Add Slot') }}
-			</Button>
+		<div
+			v-if="readOnlyMode"
+			class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
+		>
+			<CircleAlert class="size-4 stroke-1.5" />
+			<span>
+				{{
+					__(
+						'You cannot change the availability when the site is being updated.'
+					)
+				}}
+			</span>
 		</div>
-		<div class="my-10">
-			<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
-				{{ __('I am unavailable') }}
-			</h2>
-			<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-				<FormControl
-					type="date"
-					:label="__('From')"
-					v-model="from"
-					@blur="
-						() => {
-							updateUnavailability.submit({
-								field: 'unavailable_from',
-								value: from,
-							})
-						}
-					"
-				/>
-				<FormControl
-					type="date"
-					:label="__('To')"
-					v-model="to"
-					@blur="
-						() => {
-							updateUnavailability.submit({
-								field: 'unavailable_to',
-								value: to,
-							})
-						}
-					"
-				/>
+		<div v-else>
+			<div>
+				<div
+					class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
+				>
+					<div>
+						{{ __('Day') }}
+					</div>
+					<div>
+						{{ __('Start Time') }}
+					</div>
+					<div>
+						{{ __('End Time') }}
+					</div>
+				</div>
+
+				<div
+					v-if="evaluator.data"
+					v-for="slot in evaluator.data.slots.schedule"
+					class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
+				>
+					<FormControl
+						type="select"
+						:options="days"
+						v-model="slot.day"
+						@focusout.stop="update(slot.name, 'day', slot.day)"
+					/>
+					<FormControl
+						type="time"
+						v-model="slot.start_time"
+						@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
+					/>
+					<FormControl
+						type="time"
+						v-model="slot.end_time"
+						@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
+					/>
+					<X
+						@click="deleteRow(slot.name)"
+						class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
+					/>
+				</div>
+
+				<div
+					class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4"
+					v-show="showSlotsTemplate"
+				>
+					<FormControl
+						type="select"
+						:options="days"
+						v-model="newSlot.day"
+						@focusout.stop="add()"
+					/>
+					<FormControl
+						type="time"
+						v-model="newSlot.start_time"
+						@focusout.stop="add()"
+					/>
+					<FormControl
+						type="time"
+						v-model="newSlot.end_time"
+						@focusout.stop="add()"
+					/>
+				</div>
+
+				<Button @click="showSlotsTemplate = 1">
+					<template #prefix>
+						<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
+					</template>
+					{{ __('Add Slot') }}
+				</Button>
 			</div>
-		</div>
-		<div>
-			<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
-				{{ __('My calendar') }}
-			</h2>
-			<div
-				v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
-				class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
-			>
-				<Check class="h-4 w-4 stroke-1.5 mr-2" />
-				{{ __('Your calendar is set.') }}
+			<div class="my-10">
+				<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
+					{{ __('I am unavailable') }}
+				</h2>
+				<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+					<FormControl
+						type="date"
+						:label="__('From')"
+						v-model="from"
+						@blur="
+							() => {
+								updateUnavailability.submit({
+									field: 'unavailable_from',
+									value: from,
+								})
+							}
+						"
+					/>
+					<FormControl
+						type="date"
+						:label="__('To')"
+						v-model="to"
+						@blur="
+							() => {
+								updateUnavailability.submit({
+									field: 'unavailable_to',
+									value: to,
+								})
+							}
+						"
+					/>
+				</div>
+			</div>
+			<div>
+				<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
+					{{ __('My calendar') }}
+				</h2>
+				<div
+					v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
+					class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
+				>
+					<Check class="h-4 w-4 stroke-1.5 mr-2" />
+					{{ __('Your calendar is set.') }}
+				</div>
+				<Button @click="() => authorizeCalendar.submit()">
+					{{ __('Authorize Google Calendar Access') }}
+				</Button>
 			</div>
-			<Button @click="() => authorizeCalendar.submit()">
-				{{ __('Authorize Google Calendar Access') }}
-			</Button>
 		</div>
 	</div>
 </template>
 <script setup>
-import { createResource, FormControl, Button } from 'frappe-ui'
+import { createResource, FormControl, Button, Badge, toast } from 'frappe-ui'
 import { computed, reactive, ref, onMounted, inject } from 'vue'
-import { showToast, convertToTitleCase } from '@/utils'
-import { Plus, X, Check } from 'lucide-vue-next'
+import { convertToTitleCase } from '@/utils'
+import { Plus, X, Check, CircleAlert } from 'lucide-vue-next'
 
 const user = inject('$user')
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	profile: {
@@ -182,7 +198,7 @@ const createSlot = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Slot added successfully', 'check')
+		toast.success(__('Slot added successfully'))
 		evaluator.reload()
 		showSlotsTemplate.value = 0
 		newSlot.day = ''
@@ -190,7 +206,7 @@ const createSlot = createResource({
 		newSlot.end_time = ''
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 
@@ -205,10 +221,10 @@ const updateSlot = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Availability updated successfully', 'check')
+		toast.success(__('Availability updated successfully'))
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 
@@ -221,11 +237,11 @@ const deleteSlot = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Slot deleted successfully', 'check')
+		toast.success(__('Slot deleted successfully'))
 		evaluator.reload()
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 
@@ -240,10 +256,10 @@ const updateUnavailability = createResource({
 		}
 	},
 	onSuccess() {
-		showToast('Success', 'Unavailability updated successfully', 'check')
+		toast.success(__('Unavailability updated successfully'))
 	},
 	onError(err) {
-		showToast('Error', err.messages?.[0] || err, 'x')
+		toast.error(err.messages?.[0] || err)
 	},
 })
 

frontend/src/pages/ProfileRoles.vue

@@ -4,6 +4,16 @@
 			{{ __('Settings') }}
 		</h2>
 		<div
+			v-if="readOnlyMode"
+			class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
+		>
+			<CircleAlert class="size-4 stroke-1.5" />
+			<span>
+				{{ __('You cannot change the roles in read-only mode.') }}
+			</span>
+		</div>
+		<div
+			v-else
 			class="flex flex-col md:flex-row gap-4 md:gap-0 justify-between w-3/4 mt-5"
 		>
 			<FormControl
@@ -34,14 +44,16 @@
 	</div>
 </template>
 <script setup>
-import { FormControl, createResource } from 'frappe-ui'
+import { FormControl, createResource, toast } from 'frappe-ui'
 import { ref } from 'vue'
-import { showToast, convertToTitleCase } from '@/utils'
+import { convertToTitleCase } from '@/utils'
+import { CircleAlert } from 'lucide-vue-next'
 
 const moderator = ref(false)
 const course_creator = ref(false)
 const batch_evaluator = ref(false)
 const lms_student = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	profile: {
@@ -90,7 +102,7 @@ const changeRole = (role) => {
 		},
 		{
 			onSuccess(data) {
-				showToast('Success', 'Role updated successfully', 'check')
+				toast.success(__('Role updated successfully'))
 			},
 		}
 	)

frontend/src/pages/ProgramForm.vue

@@ -13,7 +13,7 @@
 		<!-- Courses -->
 		<div>
 			<div class="flex items-center justify-between mb-2">
-				<div class="text-lg font-semibold">
+				<div class="text-lg text-ink-gray-9 font-semibold">
 					{{ __('Program Courses') }}
 				</div>
 				<Button
@@ -75,7 +75,7 @@
 		<!-- Members -->
 		<div>
 			<div class="flex items-center justify-between mb-2">
-				<div class="text-lg font-semibold">
+				<div class="text-lg text-ink-gray-9 font-semibold">
 					{{ __('Program Members') }}
 				</div>
 				<Button
@@ -168,6 +168,7 @@
 					ignore_user_type: 1,
 				}"
 				:label="__('Program Member')"
+				:onCreate="(value, close) => openSettings('Members', close)"
 			/>
 		</template>
 	</Dialog>
@@ -187,12 +188,13 @@ import {
 	ListHeaderItem,
 	ListSelectBanner,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { showToast } from '@/utils/'
 import { useRouter } from 'vue-router'
-import { sessionStore } from '../stores/session'
+import { sessionStore } from '@/stores/session'
+import { openSettings } from '@/utils'
 import Draggable from 'vuedraggable'
 import Link from '@/components/Controls/Link.vue'
 
@@ -229,11 +231,11 @@ const addProgramCourse = () => {
 			onSuccess(data) {
 				showDialog.value = false
 				course.value = null
-				showToast(__('Success'), __('Course added to program'), 'check')
+				toast.success(__('Course added to program'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -251,11 +253,11 @@ const addProgramMember = () => {
 			onSuccess(data) {
 				showDialog.value = false
 				member.value = null
-				showToast(__('Success'), __('Member added to program'), 'check')
+				toast.success(__('Member added to program'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -272,11 +274,11 @@ const remove = (selections, unselectAll, doctype) => {
 		{
 			onSuccess(data) {
 				unselectAll()
-				showToast(__('Success'), __('Items removed successfully'), 'check')
+				toast.success(__('Items removed successfully'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -298,11 +300,11 @@ const updateOrder = (e) => {
 		},
 		{
 			onSuccess(data) {
-				showToast(__('Success'), __('Course moved successfully'), 'check')
+				toast.success(__('Course moved successfully'))
 				program.reload()
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)

frontend/src/pages/Programs.vue

@@ -4,7 +4,7 @@
 	>
 		<Breadcrumbs :items="breadbrumbs" />
 		<Button
-			v-if="user.data?.is_moderator || user.data?.is_instructor"
+			v-if="canCreateProgram()"
 			@click="showDialog = true"
 			variant="solid"
 		>
@@ -46,7 +46,7 @@
 							params: { programName: program.name },
 						}"
 					>
-						<Button>
+						<Button v-if="!readOnlyMode">
 							<template #prefix>
 								<Edit class="h-4 w-4 stroke-1.5" />
 							</template>
@@ -82,22 +82,7 @@
 			</div>
 		</div>
 	</div>
-	<div
-		v-else
-		class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
-	>
-		<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-		<div class="text-xl font-medium">
-			{{ __('No programs found') }}
-		</div>
-		<div class="leading-5">
-			{{
-				__(
-					'There are no programs available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
-				)
-			}}
-		</div>
-	</div>
+	<EmptyState v-else type="Programs" />
 
 	<Dialog
 		v-model="showDialog"
@@ -127,13 +112,14 @@ import {
 	Dialog,
 	FormControl,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref } from 'vue'
-import { BookOpen, Edit, Plus, LockKeyhole } from 'lucide-vue-next'
+import { Edit, Plus, LockKeyhole } from 'lucide-vue-next'
 import CourseCard from '@/components/CourseCard.vue'
+import EmptyState from '@/components/EmptyState.vue'
 import { useRouter } from 'vue-router'
 import { sessionStore } from '../stores/session'
-import { showToast } from '@/utils'
 import { useSettings } from '@/stores/settings'
 
 const { brand } = sessionStore()
@@ -142,6 +128,7 @@ const showDialog = ref(false)
 const router = useRouter()
 const title = ref('')
 const settings = useSettings()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	if (
@@ -197,7 +184,7 @@ const enrollMember = (program, course) => {
 			}
 		})
 		.catch((err) => {
-			showToast('Error', err.messages?.[0] || err, 'x')
+			toast.error(err.messages?.[0] || err)
 		})
 }
 
@@ -208,9 +195,15 @@ const lockCourse = (course) => {
 	return true
 }
 
+const canCreateProgram = () => {
+	if (readOnlyMode) return false
+	if (user.data?.is_moderator || user.data?.is_instructor) return true
+	return false
+}
+
 const breadbrumbs = computed(() => [
 	{
-		label: 'Programs',
+		label: __('Programs'),
 	},
 ])
 

frontend/src/pages/QuizForm.vue

@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<div class="space-x-2">
+		<div v-if="!readOnlyMode" class="space-x-2">
 			<router-link
 				v-if="quizDetails.data?.name"
 				:to="{
@@ -38,7 +38,7 @@
 	<div class="w-3/4 mx-auto py-5">
 		<!-- Details -->
 		<div class="mb-8">
-			<div class="font-semibold mb-4">
+			<div class="font-semibold text-ink-gray-9 mb-4">
 				{{ __('Details') }}
 			</div>
 			<FormControl
@@ -75,7 +75,7 @@
 
 				<!-- Settings -->
 				<div class="mb-8">
-					<div class="font-semibold mb-4">
+					<div class="font-semibold text-ink-gray-9 mb-4">
 						{{ __('Settings') }}
 					</div>
 					<div class="grid grid-cols-3 gap-5 my-4">
@@ -93,7 +93,7 @@
 				</div>
 
 				<div class="mb-8">
-					<div class="font-semibold mb-4">
+					<div class="font-semibold text-ink-gray-9 mb-4">
 						{{ __('Shuffle Settings') }}
 					</div>
 					<div class="grid grid-cols-3">
@@ -113,10 +113,10 @@
 				<!-- Questions -->
 				<div>
 					<div class="flex items-center justify-between mb-4">
-						<div class="font-semibold">
+						<div class="font-semibold text-ink-gray-9">
 							{{ __('Questions') }}
 						</div>
-						<Button @click="openQuestionModal()">
+						<Button v-if="!readOnlyMode" @click="openQuestionModal()">
 							<template #prefix>
 								<Plus class="w-4 h-4" />
 							</template>
@@ -198,6 +198,7 @@ import {
 	ListSelectBanner,
 	Button,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import {
 	computed,
@@ -210,7 +211,7 @@ import {
 } from 'vue'
 import { sessionStore } from '../stores/session'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { showToast, updateDocumentTitle } from '@/utils'
+import { updateDocumentTitle } from '@/utils'
 import { useRouter } from 'vue-router'
 import Question from '@/components/Modals/Question.vue'
 
@@ -223,6 +224,7 @@ const currentQuestion = reactive({
 })
 const user = inject('$user')
 const router = useRouter()
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	quizID: {
@@ -339,14 +341,14 @@ const createQuiz = () => {
 		{},
 		{
 			onSuccess(data) {
-				showToast(__('Success'), __('Quiz created successfully'), 'check')
+				toast.success(__('Quiz created successfully'))
 				router.push({
 					name: 'QuizForm',
 					params: { quizID: data.name },
 				})
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -358,10 +360,10 @@ const updateQuiz = () => {
 		{
 			onSuccess(data) {
 				quiz.total_marks = data.total_marks
-				showToast(__('Success'), __('Quiz updated successfully'), 'check')
+				toast.success(__('Quiz updated successfully'))
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -427,7 +429,7 @@ const deleteQuestions = (selections, unselectAll) => {
 		},
 		{
 			onSuccess() {
-				showToast(__('Success'), __('Questions deleted successfully'), 'check')
+				toast.success(__('Questions deleted successfully'))
 				quizDetails.reload()
 				unselectAll()
 			},
@@ -444,11 +446,7 @@ const breadcrumbs = computed(() => {
 			},
 		},
 	]
-	/* if (quizDetails.data) {
-		crumbs.push({
-			label: quiz.title,
-		})
-	} */
+
 	crumbs.push({
 		label: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
 		route: { name: 'QuizForm', params: { quizID: props.quizID } },

frontend/src/pages/QuizSubmission.vue

@@ -2,10 +2,10 @@
 	<header
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
-		<Breadcrumbs v-if="submisisonDetails.doc" :items="breadcrumbs" />
+		<Breadcrumbs v-if="submissionDetails.doc" :items="breadcrumbs" />
 		<div class="space-x-2">
 			<Badge
-				v-if="submisisonDetails.isDirty"
+				v-if="submissionDetails.isDirty"
 				:label="__('Not Saved')"
 				variant="subtle"
 				theme="orange"
@@ -15,19 +15,19 @@
 			</Button>
 		</div>
 	</header>
-	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-5">
-		<div class="text-xl font-semibold text-ink-gray-9">
-			{{ submisisonDetails.doc.member_name }}
+	<div v-if="submissionDetails.doc" class="w-2/3 border-x mx-auto py-5">
+		<div class="text-xl px-10 font-semibold text-ink-gray-9 mb-5">
+			{{ submissionDetails.doc.member_name }}
 		</div>
-		<div class="space-y-4 border p-5 rounded-md">
+		<div class="space-y-4 border-b pb-5 px-10">
 			<div class="grid grid-cols-2 gap-5">
 				<FormControl
-					v-model="submisisonDetails.doc.quiz_title"
+					v-model="submissionDetails.doc.quiz_title"
 					:label="__('Quiz')"
 					:disabled="true"
 				/>
 				<FormControl
-					v-model="submisisonDetails.doc.member_name"
+					v-model="submissionDetails.doc.member_name"
 					:label="__('Member')"
 					:disabled="true"
 				/>
@@ -35,39 +35,39 @@
 
 			<div class="grid grid-cols-2 gap-5">
 				<FormControl
-					v-model="submisisonDetails.doc.score"
+					v-model="submissionDetails.doc.score"
 					:label="__('Score')"
 					:disabled="true"
 				/>
 				<FormControl
-					v-model="submisisonDetails.doc.percentage"
+					v-model="submissionDetails.doc.percentage"
 					:label="__('Percentage')"
 					:disabled="true"
 				/>
 			</div>
 		</div>
 
-		<div
-			v-for="(row, index) in submisisonDetails.doc.result"
-			class="border p-5 rounded-md space-y-4"
-		>
-			<div class="flex items-start space-x-1 font-semibold text-ink-gray-9">
-				<!-- <span>
-					{{ index + 1 }}.
-				</span> -->
-				<span class="leading-5" v-html="row.question"> </span>
-			</div>
-			<div class="leading-5 text-ink-gray-7 space-x-1">
-				<span> {{ __('Answer') }}: </span>
-				<span v-html="row.answer"></span>
-			</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 class="divide-y">
+			<div
+				v-for="(row, index) in submissionDetails.doc.result"
+				class="py-5 px-10 space-y-4"
+			>
+				<div class="text-ink-gray-9">
+					<span class="font-semibold"> {{ __('Question') }}: </span>
+					<span class="leading-5" v-html="row.question"> </span>
+				</div>
+				<div class="">
+					<span class="font-semibold"> {{ __('Answer') }} </span>
+					<span class="leading-5" v-html="row.answer"></span>
+				</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>
 	</div>
@@ -80,10 +80,10 @@ import {
 	Button,
 	Badge,
 	usePageMeta,
+	toast,
 } from 'frappe-ui'
 import { computed, onBeforeUnmount, onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { showToast } from '@/utils'
 import { sessionStore } from '@/stores/session'
 
 const { brand } = sessionStore()
@@ -119,7 +119,7 @@ const props = defineProps({
 	},
 })
 
-const submisisonDetails = createDocumentResource({
+const submissionDetails = createDocumentResource({
 	doctype: 'LMS Quiz Submission',
 	name: props.submission,
 	auto: true,
@@ -132,22 +132,22 @@ const breadcrumbs = computed(() => {
 			route: {
 				name: 'QuizSubmissionList',
 				params: {
-					quizID: submisisonDetails.doc.quiz,
+					quizID: submissionDetails.doc.quiz,
 				},
 			},
 		},
 		{
-			label: submisisonDetails.doc.quiz_title,
+			label: submissionDetails.doc.quiz_title,
 		},
 	]
 })
 
 const saveSubmission = () => {
-	submisisonDetails.save.submit(
+	submissionDetails.save.submit(
 		{},
 		{
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				toast.error(err.messages?.[0] || err)
 			},
 		}
 	)
@@ -155,7 +155,7 @@ const saveSubmission = () => {
 
 usePageMeta(() => {
 	return {
-		title: `${submisisonDetails.doc.quiz_title}`,
+		title: `${submissionDetails.doc?.quiz_title}`,
 		icon: brand.favicon,
 	}
 })

frontend/src/pages/QuizSubmissionList.vue

@@ -40,18 +40,7 @@
 			</Button>
 		</div>
 	</div>
-	<div
-		v-else
-		class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
-	>
-		<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-		<div class="text-xl font-medium">
-			{{ __('No submissions') }}
-		</div>
-		<div class="leading-5">
-			{{ __('No quiz submissions found. Please check again later.') }}
-		</div>
-	</div>
+	<EmptyState v-else />
 </template>
 <script setup>
 import {
@@ -65,10 +54,10 @@ import {
 	ListHeaderItem,
 	usePageMeta,
 } from 'frappe-ui'
-import { BookOpen } from 'lucide-vue-next'
 import { computed, onMounted, inject } from 'vue'
 import { sessionStore } from '../stores/session'
 import { useRouter } from 'vue-router'
+import EmptyState from '@/components/EmptyState.vue'
 
 const { brand } = sessionStore()
 const router = useRouter()

frontend/src/pages/Quizzes.vue

@@ -4,6 +4,7 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
+			v-if="!readOnlyMode"
 			:to="{
 				name: 'QuizForm',
 				params: {
@@ -20,6 +21,9 @@
 		</router-link>
 	</header>
 	<div v-if="quizzes.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div v-if="quizCount" class="text-xl font-semibold text-ink-gray-7 mb-4">
+			{{ __('{0} Quizzes').format(quizCount) }}
+		</div>
 		<ListView
 			:columns="quizColumns"
 			:rows="quizzes.data"
@@ -52,27 +56,13 @@
 			</Button>
 		</div>
 	</div>
-	<div
-		v-else
-		class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
-	>
-		<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-		<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>
+	<EmptyState v-else type="Quizzes" />
 </template>
 <script setup>
 import {
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	ListView,
 	ListRows,
@@ -82,18 +72,22 @@ import {
 	usePageMeta,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { computed, inject, onMounted } from 'vue'
-import { BookOpen, Plus } from 'lucide-vue-next'
+import { computed, inject, onMounted, ref } from 'vue'
+import { Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
+import EmptyState from '@/components/EmptyState.vue'
 
 const { brand } = sessionStore()
 const user = inject('$user')
 const router = useRouter()
+const quizCount = ref(0)
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
 		router.push({ name: 'Courses' })
 	}
+	getQuizCount()
 })
 
 const quizFilter = computed(() => {
@@ -112,6 +106,14 @@ const quizzes = createListResource({
 	orderBy: 'modified desc',
 })
 
+const getQuizCount = () => {
+	call('frappe.client.get_count', {
+		doctype: 'LMS Quiz',
+	}).then((data) => {
+		quizCount.value = data
+	})
+}
+
 const quizColumns = computed(() => {
 	return [
 		{

frontend/src/pages/Statistics.vue

@@ -7,109 +7,125 @@
 		</header>
 		<div v-if="chartDetails.data" class="p-5">
 			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
-				<div
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-				>
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-						<BookOpen class="w-18 h-18 stroke-1.5" />
-					</div>
-					<div>
-						<div class="text-xl font-semibold mb-1">
-							{{ formatNumber(chartDetails.data.courses) }}
-						</div>
-						<div>
-							{{ __('Courses') }}
-						</div>
-					</div>
-				</div>
-				<div
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-				>
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-						<LogIn class="w-18 h-18 stroke-1.5" />
-					</div>
-					<div>
-						<div class="text-xl font-semibold mb-1">
-							{{ formatNumber(chartDetails.data.users) }}
-						</div>
-						<div>
-							{{ __('Signups') }}
-						</div>
-					</div>
-				</div>
-				<div
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-				>
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-						<BookOpenCheck class="w-18 h-18 stroke-1.5" />
-					</div>
-					<div>
-						<div class="text-xl font-semibold mb-1">
-							{{ formatNumber(chartDetails.data.enrollments) }}
-						</div>
-						<div>
-							{{ __('Enrollments') }}
-						</div>
-					</div>
-				</div>
-				<div
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-				>
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-						<FileCheck class="w-18 h-18 stroke-1.5" />
-					</div>
-					<div>
-						<div class="text-xl font-semibold mb-1">
-							{{ formatNumber(chartDetails.data.completions) }}
-						</div>
-						<div>
-							{{ __('Completions') }}
-						</div>
-					</div>
-				</div>
-				<div
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
-				>
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
-						<FileCheck2 class="w-18 h-18 stroke-1.5" />
-					</div>
-					<div>
-						<div class="text-xl font-semibold mb-1">
-							{{ formatNumber(chartDetails.data.lesson_completions) }}
-						</div>
-						<div class="text-ink-gray-7">
-							{{ __('Milestones') }}
-						</div>
-					</div>
-				</div>
+				<Tooltip :text="__('Published Courses')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{ title: 'Courses', value: chartDetails.data.courses }"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Active Members')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{ title: 'Signups', value: chartDetails.data.users }"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Course Enrollments')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{
+							title: 'Enrollments',
+							value: chartDetails.data.enrollments,
+						}"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Course Completions')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{
+							title: 'Completions',
+							value: chartDetails.data.completions,
+						}"
+					/>
+				</Tooltip>
+				<Tooltip :text="__('Certified Members')">
+					<NumberChart
+						class="border rounded-md"
+						:config="{
+							title: 'Certifications',
+							value: chartDetails.data.certifications,
+						}"
+					/>
+				</Tooltip>
 			</div>
 			<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
-				<div class="border rounded-md p-5 min-h-72">
-					<Line
+				<div class="border rounded-md min-h-72">
+					<AxisChart
 						v-if="signupsChart.data"
-						:data="signupsChart.data"
-						:options="signupChartOptions()"
+						:config="{
+							data: signupsChart.data,
+							title: 'Signups',
+							subtitle: 'Signups per month',
+							xAxis: {
+								key: 'date',
+								type: 'time',
+								title: 'Date',
+								timeGrain: 'day',
+							},
+							yAxis: {
+								title: 'Signups',
+							},
+							series: [{ name: 'signups', type: 'line', showDataPoints: true }],
+						}"
 					/>
 				</div>
-				<div class="border rounded-md p-5 min-h-72">
-					<Line
+				<div class="border rounded-md min-h-72">
+					<AxisChart
 						v-if="enrollmentChart.data"
-						:data="enrollmentChart.data"
-						:options="enrollmentChartOptions()"
+						:config="{
+							data: enrollmentChart.data,
+							title: 'Enrollments',
+							subtitle: 'Enrollments per month',
+							xAxis: {
+								key: 'date',
+								type: 'time',
+								title: 'Date',
+								timeGrain: 'day',
+							},
+							yAxis: {
+								title: 'Enrollments',
+							},
+							series: [
+								{ name: 'enrollments', type: 'line', showDataPoints: true },
+							],
+						}"
 					/>
 				</div>
-				<div class="border rounded-md p-5">
-					<Line
-						v-if="lessonCompletion.data"
-						:data="lessonCompletion.data"
-						:options="lessonChartOptions()"
+				<div class="border rounded-md">
+					<AxisChart
+						v-if="certification.data"
+						:config="{
+							data: certification.data,
+							title: 'Certifications',
+							subtitle: 'Certifications per month',
+							xAxis: {
+								key: 'date',
+								type: 'time',
+								title: 'Date',
+								timeGrain: 'day',
+							},
+							yAxis: {
+								title: 'Certifications',
+							},
+							series: [
+								{
+									name: 'certifications',
+									type: 'line',
+									showDataPoints: true,
+								},
+							],
+						}"
 					/>
 				</div>
-				<div class="border rounded-md p-5">
-					<Pie
+				<div class="border rounded-md">
+					<DonutChart
 						v-if="courseCompletion.data"
-						:data="courseCompletion.data"
-						:options="courseChartOptions()"
+						:config="{
+							data: courseCompletion.data,
+							title: 'Completions',
+							subtitle: 'Course Completion',
+							categoryColumn: 'label',
+							valueColumn: 'value',
+						}"
 					/>
 				</div>
 			</div>
@@ -117,42 +133,17 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, usePageMeta } from 'frappe-ui'
+import {
+	AxisChart,
+	Breadcrumbs,
+	createResource,
+	DonutChart,
+	NumberChart,
+	Tooltip,
+	usePageMeta,
+} from 'frappe-ui'
 import { computed } from 'vue'
 import { sessionStore } from '../stores/session'
-import { formatNumber } from '@/utils'
-import { Line, Pie } from 'vue-chartjs'
-import {
-	Chart as ChartJS,
-	Title,
-	Tooltip,
-	Legend,
-	LineElement,
-	CategoryScale,
-	LinearScale,
-	PointElement,
-	ArcElement,
-	Filler,
-} from 'chart.js'
-
-ChartJS.register(
-	Title,
-	Tooltip,
-	Legend,
-	LineElement,
-	CategoryScale,
-	LinearScale,
-	PointElement,
-	ArcElement,
-	Filler
-)
-import {
-	BookOpen,
-	LogIn,
-	FileCheck,
-	FileCheck2,
-	BookOpenCheck,
-} from 'lucide-vue-next'
 
 const { brand } = sessionStore()
 
@@ -175,11 +166,18 @@ const chartDetails = createResource({
 
 const signupsChart = createResource({
 	url: 'lms.lms.utils.get_chart_data',
-	cache: ['signups'],
 	params: {
 		chart_name: 'New Signups',
 	},
 	auto: true,
+	transform(data) {
+		return data.map((item) => {
+			return {
+				date: new Date(item.date),
+				signups: item.count,
+			}
+		})
+	},
 })
 
 const enrollmentChart = createResource({
@@ -189,15 +187,31 @@ const enrollmentChart = createResource({
 		chart_name: 'Course Enrollments',
 	},
 	auto: true,
+	transform(data) {
+		return data.map((item) => {
+			return {
+				date: new Date(item.date),
+				enrollments: item.count,
+			}
+		})
+	},
 })
 
-const lessonCompletion = createResource({
+const certification = createResource({
 	url: 'lms.lms.utils.get_chart_data',
-	cache: ['lessonCompletion'],
+	cache: ['certifications'],
 	params: {
-		chart_name: 'Lesson Completion',
+		chart_name: 'Certification',
 	},
 	auto: true,
+	transform(data) {
+		return data.map((item) => {
+			return {
+				date: new Date(item.date),
+				certifications: item.count,
+			}
+		})
+	},
 })
 
 const courseCompletion = createResource({
@@ -206,117 +220,6 @@ const courseCompletion = createResource({
 	cache: ['courseCompletion'],
 })
 
-const signupChartOptions = () => {
-	let options = chartOptions(false)
-	options.plugins.title.text = 'Signups'
-	options.borderColor = '#4563f0'
-	options.backgroundColor = (ctx) => {
-		const canvas = ctx.chart.ctx
-		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
-		gradient.addColorStop(0, '#4563f0')
-		gradient.addColorStop(0.5, '#e8ecfe')
-		gradient.addColorStop(1, '#f6f7ff')
-
-		return gradient
-	}
-	return options
-}
-
-const enrollmentChartOptions = () => {
-	let options = chartOptions(false)
-	options.plugins.title.text = 'Enrollments'
-	options.borderColor = '#4563f0'
-	options.backgroundColor = (ctx) => {
-		const canvas = ctx.chart.ctx
-		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
-		gradient.addColorStop(0, '#4563f0')
-		gradient.addColorStop(0.5, '#e8ecfe')
-		gradient.addColorStop(1, '#f6f7ff')
-
-		return gradient
-	}
-	return options
-}
-
-const lessonChartOptions = () => {
-	let options = chartOptions(false)
-	options.plugins.title.text = 'Milestones'
-	options.borderColor = '#4563f0'
-	options.backgroundColor = (ctx) => {
-		const canvas = ctx.chart.ctx
-		const gradient = canvas.createLinearGradient(0, 0, 0, 160)
-		gradient.addColorStop(0, '#B6DEC5')
-		gradient.addColorStop(0.5, '#e8ecfe')
-		gradient.addColorStop(1, '#f6f7ff')
-
-		return gradient
-	}
-	return options
-}
-
-const courseChartOptions = () => {
-	let options = chartOptions(true)
-	options.plugins.title.text = 'Completions'
-	options.backgroundColor = ['#4563f0', '#f683ae']
-	return options
-}
-
-const chartOptions = (isPie) => {
-	return {
-		responsive: true,
-		maintainAspectRatio: false,
-		fill: true,
-		borderWidth: 2,
-		pointRadius: 2,
-		pointStyle: 'cross',
-		ticks: {
-			autoSkip: true,
-			maxTicksLimit: 5,
-		},
-		plugins: {
-			legend: {
-				display: isPie ? true : false,
-			},
-			title: {
-				display: true,
-				align: 'start',
-				font: {
-					size: 14,
-					weight: '500',
-				},
-				color: '#171717',
-				padding: {
-					bottom: 20,
-				},
-			},
-			tooltip: {
-				backgroundColor: '#000',
-			},
-		},
-		scales: {
-			x: {
-				display: isPie ? false : true,
-				grid: {
-					display: false,
-				},
-				border: {
-					display: isPie ? false : true,
-				},
-			},
-			y: {
-				beginAtZero: true,
-				display: isPie ? false : true,
-				grid: {
-					display: false,
-				},
-				border: {
-					display: isPie ? false : true,
-				},
-			},
-		},
-	}
-}
-
 usePageMeta(() => {
 	return {
 		title: __('Statistics'),

frontend/src/router.js

@@ -134,8 +134,8 @@ const routes = [
 	},
 	{
 		path: '/job-opening/:jobName/edit',
-		name: 'JobCreation',
-		component: () => import('@/pages/JobCreation.vue'),
+		name: 'JobForm',
+		component: () => import('@/pages/JobForm.vue'),
 		props: true,
 	},
 	{
@@ -199,12 +199,6 @@ const routes = [
 		name: 'Assignments',
 		component: () => import('@/pages/Assignments.vue'),
 	},
-	{
-		path: '/assignments/:assignmentID',
-		name: 'AssignmentForm',
-		component: () => import('@/pages/AssignmentForm.vue'),
-		props: true,
-	},
 	{
 		path: '/assignment-submission/:assignmentID/:submissionName',
 		name: 'AssignmentSubmission',
@@ -216,6 +210,11 @@ const routes = [
 		name: 'AssignmentSubmissionList',
 		component: () => import('@/pages/AssignmentSubmissionList.vue'),
 	},
+	{
+		path: '/persona',
+		name: 'PersonaForm',
+		component: () => import('@/pages/PersonaForm.vue'),
+	},
 ]
 
 let router = createRouter({

frontend/src/stores/session.js

@@ -50,8 +50,7 @@ export const sessionStore = defineStore('lms-session', () => {
 			brand.name = data.app_name
 			brand.logo = data.app_logo
 			brand.favicon =
-				data.favicon?.file_url ||
-				'/assets/lms/frontend/public/learning.svg'
+				data.favicon?.file_url || '/assets/lms/frontend/learning.svg'
 		},
 	})
 

frontend/src/utils/index.js

@@ -1,9 +1,10 @@
-import { toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
 import { Quiz } from '@/utils/quiz'
 import { Assignment } from '@/utils/assignment'
 import { Upload } from '@/utils/upload'
 import { Markdown } from '@/utils/markdownParser'
+import { useSettings } from '@/stores/settings'
+import { usersStore } from '@/stores/user'
 import Header from '@editorjs/header'
 import Paragraph from '@editorjs/paragraph'
 import { CodeBox } from '@/utils/code'
@@ -14,14 +15,10 @@ import dayjs from '@/utils/dayjs'
 import Embed from '@editorjs/embed'
 import SimpleImage from '@editorjs/simple-image'
 import Table from '@editorjs/table'
-import { usersStore } from '../stores/user'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
-export function createToast(options) {
-	toast({
-		position: 'bottom-right',
-		...options,
-	})
-}
+const readOnlyMode = window.read_only_mode
 
 export function timeAgo(date) {
 	return useTimeAgo(date).value
@@ -93,26 +90,6 @@ export function getFileSize(file_size) {
 	return value
 }
 
-export function showToast(title, text, icon, iconClasses = null) {
-	if (!iconClasses) {
-		if (icon == 'check') {
-			iconClasses = 'bg-surface-green-3 text-ink-white rounded-md p-px'
-		} else if (icon == 'alert-circle') {
-			iconClasses = 'bg-yellow-600 text-ink-white rounded-md p-px'
-		} else {
-			iconClasses = 'bg-surface-red-5 text-ink-white rounded-md p-px'
-		}
-	}
-	createToast({
-		title: title,
-		text: htmlToText(text),
-		icon: icon,
-		iconClasses: iconClasses,
-		position: icon == 'check' ? 'bottom-right' : 'top-center',
-		timeout: 5,
-	})
-}
-
 export function getImgDimensions(imgSrc) {
 	return new Promise((resolve) => {
 		let img = new Image()
@@ -199,78 +176,50 @@ export function getEditorTools() {
 				services: {
 					youtube: {
 						regex: /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.be\/)|(?:youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch))(?:(?:\?v=)?([^#&?=]*))?((?:[?&]\w*=\w*)*)/,
-						embedUrl:
-							'https://www.youtube.com/embed/<%= remote_id %>',
-						html: '<iframe style="width:100%; height: 30rem;" frameborder="0" allowfullscreen></iframe>',
-						height: 320,
-						width: 580,
-						id: ([id, params]) => {
-							if (!params && id) {
-								return id
-							}
-
-							const paramsMap = {
-								start: 'start',
-								end: 'end',
-								t: 'start',
-								// eslint-disable-next-line camelcase
-								time_continue: 'start',
-								list: 'list',
-							}
-
-							let newParams = params
-								.slice(1)
-								.split('&')
-								.map((param) => {
-									const [name, value] = param.split('=')
-
-									if (!id && name === 'v') {
-										id = value
-
-										return null
-									}
-
-									if (!paramsMap[name]) {
-										return null
-									}
-
-									if (
-										value === 'LL' ||
-										value.startsWith('RDMM') ||
-										value.startsWith('FL')
-									) {
-										return null
-									}
-
-									return `${paramsMap[name]}=${value}`
-								})
-								.filter((param) => !!param)
-
-							return id + '?' + newParams.join('&')
-						},
+						embedUrl: '<%= remote_id %>',
+						/* 'https://www.youtube.com/embed/<%= remote_id %>?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1' */
+						html: `<div class="video-player" data-plyr-provider="youtube"></div>`,
+						id: ([id]) => id,
+					},
+					vimeo: {
+						regex: /(?:http[s]?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/,
+						embedUrl: '<%= remote_id %>',
+						html: `<div class="video-player" data-plyr-provider="vimeo"></div>`,
+						id: ([id]) => id,
+					},
+					cloudflareStream: {
+						regex: /https:\/\/customer-[a-z0-9]+\.cloudflarestream\.com\/([a-f0-9]{32})\/watch/,
+						embedUrl:
+							'https://iframe.videodelivery.net/<%= remote_id %>',
+						html: `<iframe style="width:100%; height: ${
+							window.innerWidth < 640 ? '15rem' : '30rem'
+						};" frameborder="0" allowfullscreen></iframe>`,
 					},
-					vimeo: true,
 					codepen: true,
 					aparat: {
 						regex: /(?:http[s]?:\/\/)?(?:www.)?aparat\.com\/v\/([^\/\?\&]+)\/?/,
 						embedUrl:
 							'https://www.aparat.com/video/video/embed/videohash/<%= remote_id %>/vt/frame',
-						html: '<iframe style="margin: 0 auto; width: 100%; height: 25rem;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>',
-						height: 300,
-						width: 600,
+						html: `<iframe style="margin: 0 auto; width: 100%; height: ${
+							window.innerWidth < 640 ? '15rem' : '30rem'
+						};" frameborder="0" scrolling="no" allowtransparency="true"></iframe>`,
 					},
 					github: true,
 					slides: {
 						regex: /https:\/\/docs\.google\.com\/presentation\/d\/([A-Za-z0-9_-]+)\/pub/,
 						embedUrl:
 							'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>",
+						html: `<iframe style='width: 100%; height: ${
+							window.innerWidth < 640 ? '15rem' : '30rem'
+						}; border: 1px solid #D3D3D3; border-radius: 12px; margin: 1rem 0' frameborder='0' allowfullscreen='true'></iframe>`,
 					},
 					drive: {
 						regex: /https:\/\/drive\.google\.com\/file\/d\/([A-Za-z0-9_-]+)\/view(\?.+)?/,
 						embedUrl:
 							'https://drive.google.com/file/d/<%= remote_id %>/preview',
-						html: "<iframe style='width: 100%; height: 25rem; border: 1px solid #D3D3D3; border-radius: 12px;' frameborder='0' allowfullscreen='true'></iframe>",
+						html: `<iframe style='width: 100%; height: ${
+							window.innerWidth < 640 ? '15rem' : '30rem'
+						}; border: 1px solid #D3D3D3; border-radius: 12px;' frameborder='0' allowfullscreen='true'></iframe>`,
 					},
 					docsPublic: {
 						regex: /https:\/\/docs\.google\.com\/document\/d\/([A-Za-z0-9_-]+)\/edit(\?.+)?/,
@@ -479,7 +428,7 @@ export function getSidebarLinks() {
 			activeFor: ['Batches', 'BatchDetail', 'Batch', 'BatchForm'],
 		},
 		{
-			label: 'Certified Participants',
+			label: 'Certified Members',
 			icon: 'GraduationCap',
 			to: 'CertifiedParticipants',
 			activeFor: ['CertifiedParticipants'],
@@ -571,5 +520,44 @@ export const escapeHTML = (text) => {
 
 export const canCreateCourse = () => {
 	const { userResource } = usersStore()
-	return userResource.data?.is_instructor || userResource.data?.is_moderator
+	return (
+		!readOnlyMode &&
+		(userResource.data?.is_instructor || userResource.data?.is_moderator)
+	)
+}
+
+export const enablePlyr = () => {
+	setTimeout(() => {
+		const videoElement = document.getElementsByClassName('video-player')
+		if (videoElement.length === 0) return
+
+		Array.from(videoElement).forEach((video) => {
+			const src = video.getAttribute('src')
+			if (src) {
+				let videoID = src.split('/').pop()
+				video.setAttribute('data-plyr-embed-id', videoID)
+			}
+			new Plyr(video, {
+				youtube: {
+					noCookie: true,
+				},
+				controls: [
+					'play-large',
+					'play',
+					'progress',
+					'current-time',
+					'mute',
+					'volume',
+					'fullscreen',
+				],
+			})
+		}, 500)
+	})
+}
+
+export const openSettings = (category, close) => {
+	const settingsStore = useSettings()
+	close()
+	settingsStore.activeTab = category
+	settingsStore.isSettingsOpen = true
 }

frontend/tailwind.config.js

@@ -1,5 +1,7 @@
-module.exports = {
-	presets: [require('frappe-ui/src/tailwind/preset')],
+import frappeUIPreset from 'frappe-ui/src/tailwind/preset'
+
+export default {
+	presets: [frappeUIPreset],
 	content: [
 		'./index.html',
 		'./src/**/*.{vue,js,ts,jsx,tsx}',

frontend/vite.config.js

@@ -25,7 +25,7 @@ export default defineConfig({
 		}),
 	],
 	server: {
-		allowedHosts: ['fs', 'onb2'],
+		allowedHosts: ['fs', 'per2'],
 	},
 	resolve: {
 		alias: {
@@ -40,6 +40,7 @@ export default defineConfig({
 			'engine.io-client',
 			'tailwind.config.js',
 			'highlight.js',
+			'plyr',
 		],
 	},
 })

lms/__init__.py

@@ -1 +1 @@
-__version__ = "2.27.0"
+__version__ = "2.28.1"

lms/hooks.py

@@ -21,7 +21,7 @@ app_license = "AGPL"
 # include js, css files in header of web template
 web_include_css = "lms.bundle.css"
 # web_include_css = "/assets/lms/css/lms.css"
-web_include_js = ["website.bundle.js"]
+web_include_js = []
 
 # include custom scss in every website theme (without file extension ".scss")
 # website_theme_scss = "lms/public/scss/website"
@@ -246,7 +246,7 @@ on_login = "lms.lms.user.on_login"
 add_to_apps_screen = [
 	{
 		"name": "lms",
-		"logo": "/assets/lms/images/lms-logo.png",
+		"logo": "/assets/lms/frontend/learning.svg",
 		"title": "Learning",
 		"route": "/lms",
 		"has_permission": "lms.lms.api.check_app_permission",

lms/install.py

@@ -11,7 +11,7 @@ def after_install():
 def after_sync():
 	create_lms_roles()
 	set_default_certificate_print_format()
-	add_all_roles_to("Administrator")
+	give_lms_roles_to_admin()
 
 
 def before_uninstall():
@@ -172,3 +172,15 @@ def create_batch_source():
 			doc = frappe.new_doc("LMS Source")
 			doc.source = source
 			doc.save()
+
+
+def give_lms_roles_to_admin():
+	roles = ["Course Creator", "Moderator", "Batch Evaluator"]
+	for role in roles:
+		if not frappe.db.exists("Has Role", {"parent": "Administrator", "role": role}):
+			doc = frappe.new_doc("Has Role")
+			doc.parent = "Administrator"
+			doc.parenttype = "User"
+			doc.parentfield = "roles"
+			doc.role = role
+			doc.save()

lms/job/doctype/job_opportunity/job_opportunity.json

@@ -9,18 +9,19 @@
  "field_order": [
   "job_title",
   "location",
-  "disabled",
+  "country",
   "column_break_5",
   "type",
   "status",
+  "disabled",
   "section_break_6",
-  "description",
-  "company_details_section",
   "company_name",
   "company_website",
-  "column_break_11",
+  "column_break_phkm",
   "company_logo",
-  "company_email_address"
+  "company_email_address",
+  "company_details_section",
+  "description"
  ],
  "fields": [
   {
@@ -36,7 +37,7 @@
    "fieldtype": "Data",
    "in_list_view": 1,
    "in_standard_filter": 1,
-   "label": "Location",
+   "label": "City",
    "reqd": 1
   },
   {
@@ -62,7 +63,8 @@
   },
   {
    "fieldname": "section_break_6",
-   "fieldtype": "Section Break"
+   "fieldtype": "Section Break",
+   "label": "Company Details"
   },
   {
    "fieldname": "description",
@@ -72,8 +74,7 @@
   },
   {
    "fieldname": "company_details_section",
-   "fieldtype": "Section Break",
-   "label": "Company Details"
+   "fieldtype": "Section Break"
   },
   {
    "fieldname": "company_name",
@@ -89,10 +90,6 @@
    "label": "Company Website",
    "reqd": 1
   },
-  {
-   "fieldname": "column_break_11",
-   "fieldtype": "Column Break"
-  },
   {
    "fieldname": "company_logo",
    "fieldtype": "Attach Image",
@@ -111,13 +108,30 @@
    "label": "Company Email Address",
    "options": "Email",
    "reqd": 1
+  },
+  {
+   "fieldname": "column_break_phkm",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "country",
+   "fieldtype": "Link",
+   "label": "Country",
+   "options": "Country",
+   "reqd": 1
   }
  ],
+ "grid_page_length": 50,
  "index_web_pages_for_search": 1,
- "links": [],
+ "links": [
+  {
+   "link_doctype": "LMS Job Application",
+   "link_fieldname": "job"
+  }
+ ],
  "make_attachments_public": 1,
- "modified": "2025-01-17 12:38:57.134919",
- "modified_by": "Administrator",
+ "modified": "2025-04-24 14:34:35.920242",
+ "modified_by": "sayali@frappe.io",
  "module": "Job",
  "name": "Job Opportunity",
  "owner": "Administrator",
@@ -157,8 +171,9 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": [],
  "title_field": "job_title"
-}
+}

lms/lms/api.py

@@ -19,6 +19,8 @@ from frappe.utils import (
 	format_date,
 	date_diff,
 )
+from frappe.query_builder import DocType
+from pypika.functions import DistinctOptionFunction
 from lms.lms.utils import get_average_rating, get_lesson_count
 from xml.dom.minidom import parseString
 from lms.lms.doctype.course_lesson.course_lesson import save_progress
@@ -182,9 +184,10 @@ def get_user_info():
 	)
 	user.is_fc_site = is_fc_site()
 	user.is_system_manager = "System Manager" in user.roles
+	user.sitename = frappe.local.site
+	user.developer_mode = frappe.conf.developer_mode
 	if user.is_fc_site and user.is_system_manager:
 		user.site_info = current_site_info()
-		user.sitename = frappe.local.site
 	return user
 
 
@@ -237,6 +240,11 @@ def validate_billing_access(billing_type, name):
 			access = False
 			message = _("Batch is sold out.")
 
+		start_date = frappe.get_cached_value("LMS Batch", name, "start_date")
+		if start_date and date_diff(start_date, now()) < 0:
+			access = False
+			message = _("Batch has already started.")
+
 	elif access and billing_type == "certificate":
 		purchased_certificate = frappe.db.exists(
 			"LMS Enrollment",
@@ -278,6 +286,7 @@ def get_job_details(job):
 		[
 			"job_title",
 			"location",
+			"country",
 			"type",
 			"company_name",
 			"company_logo",
@@ -303,14 +312,20 @@ def get_job_opportunities(filters=None, orFilters=None):
 		fields=[
 			"job_title",
 			"location",
+			"country",
 			"type",
 			"company_name",
 			"company_logo",
 			"name",
 			"creation",
+			"description",
 		],
 		order_by="creation desc",
 	)
+
+	for job in jobs:
+		job.description = frappe.utils.strip_html_tags(job.description)
+		job.applicants = frappe.db.count("LMS Job Application", {"job": job.name})
 	return jobs
 
 
@@ -331,7 +346,7 @@ def get_chart_details():
 	details.completions = frappe.db.count(
 		"LMS Enrollment", {"progress": ["like", "%100%"]}
 	)
-	details.lesson_completions = frappe.db.count("LMS Course Progress")
+	details.certifications = frappe.db.count("LMS Certificate", {"published": 1})
 	return details
 
 
@@ -411,29 +426,50 @@ def get_certified_participants(filters=None, start=0, page_length=30):
 		or_filters["course_title"] = ["like", f"%{category}%"]
 		or_filters["batch_title"] = ["like", f"%{category}%"]
 
-	participants = frappe.get_all(
+	participants = frappe.db.get_all(
 		"LMS Certificate",
 		filters=filters,
 		or_filters=or_filters,
-		fields=["member"],
+		fields=["member", "issue_date"],
 		group_by="member",
-		order_by="creation desc",
+		order_by="issue_date desc",
 		start=start,
 		page_length=page_length,
 	)
 
 	for participant in participants:
+		count = frappe.db.count("LMS Certificate", {"member": participant.member})
 		details = frappe.db.get_value(
 			"User",
 			participant.member,
 			["full_name", "user_image", "username", "country", "headline"],
 			as_dict=1,
 		)
+		details["certificate_count"] = count
 		participant.update(details)
 
 	return participants
 
 
+class CountDistinct(DistinctOptionFunction):
+	def __init__(self, field):
+		super().__init__("COUNT", field, distinct=True)
+
+
+@frappe.whitelist(allow_guest=True)
+def get_count_of_certified_members():
+	Certificate = DocType("LMS Certificate")
+
+	query = (
+		frappe.qb.from_(Certificate)
+		.select(CountDistinct(Certificate.member).as_("total"))
+		.where(Certificate.published == 1)
+	)
+
+	result = query.run(as_dict=True)
+	return result[0]["total"] if result else 0
+
+
 @frappe.whitelist(allow_guest=True)
 def get_certification_categories():
 	categories = []
@@ -655,13 +691,13 @@ def get_categories(doctype, filters):
 @frappe.whitelist()
 def get_members(start=0, search=""):
 	"""Get members for the given search term and start index.
-	        Args: start (int): Start index for the query.
+	                                Args: start (int): Start index for the query.
 	<<<<<<< HEAD
-	        search (str): Search term to filter the results.
+	                                search (str): Search term to filter the results.
 	=======
-	                                        search (str): Search term to filter the results.
+	                                                                                                                                                                search (str): Search term to filter the results.
 	>>>>>>> 4869bba7bbb2fb38477d6fc29fb3b5838e075577
-	        Returns: List of members.
+	                                Returns: List of members.
 	"""
 
 	filters = {"enabled": 1, "name": ["not in", ["Administrator", "Guest"]]}
@@ -1366,3 +1402,17 @@ def add_an_evaluator(email):
 	evaluator.insert()
 
 	return evaluator
+
+
+@frappe.whitelist()
+def capture_user_persona(responses):
+	frappe.only_for("System Manager")
+	data = frappe.parse_json(responses)
+	data = json.dumps(data)
+	response = frappe.integrations.utils.make_post_request(
+		"https://school.frappe.io/api/method/capture-persona",
+		data={"response": data},
+	)
+	if response.get("message").get("name"):
+		frappe.db.set_single_value("LMS Settings", "persona_captured", True)
+	return response

lms/lms/dashboard_chart/certification/certification.json

@@ -0,0 +1,31 @@
+{
+ "based_on": "issue_date",
+ "chart_name": "Certification",
+ "chart_type": "Count",
+ "creation": "2025-04-28 17:47:28.517149",
+ "docstatus": 0,
+ "doctype": "Dashboard Chart",
+ "document_type": "LMS Certificate",
+ "dynamic_filters_json": "[]",
+ "filters_json": "[[\"LMS Certificate\",\"published\",\"=\",1,false]]",
+ "group_by_type": "Count",
+ "idx": 0,
+ "is_public": 1,
+ "is_standard": 1,
+ "modified": "2025-04-28 17:47:28.517149",
+ "modified_by": "sayali@frappe.io",
+ "module": "LMS",
+ "name": "Certification",
+ "number_of_groups": 0,
+ "owner": "sayali@frappe.io",
+ "parent_document_type": "",
+ "roles": [],
+ "source": "",
+ "time_interval": "Daily",
+ "timeseries": 1,
+ "timespan": "Last Month",
+ "type": "Line",
+ "use_report_chart": 0,
+ "value_based_on": "",
+ "y_axis": []
+}