chore(release): Bumped to Version 2.28.0

fix: misc fixes

.github/workflows/ci.yml

@@ -39,7 +39,7 @@ jobs:
         node-version: '18'
         check-latest: true
     - name: setup cache for bench
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         path: ~/bench-cache
         key: ${{ runner.os }}

.github/workflows/linters.yml

@@ -7,8 +7,27 @@ on:
     branches: [ main ]
 
 jobs:
+  commit-lint:
+    name: 'Semantic Commits'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 200
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          check-latest: true
+
+      - name: Check commit titles
+        run: |
+          npm install @commitlint/cli @commitlint/config-conventional
+          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
+
   linters:
-    name: Semantic Commits
+    name: Semgrep Rules
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
 
@@ -20,8 +39,17 @@ jobs:
         with:
           python-version: '3.10'
 
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
       - name: Install and Run Pre-commit
-        uses: pre-commit/action@v2.0.3
+        uses: pre-commit/action@v3.0.1
 
       - name: Download Semgrep rules
         run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules

.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 15 * *'
-    - cron: '30 4 * * 3'
   workflow_dispatch:
 
 jobs:

.github/workflows/ui-tests.yml

@@ -58,7 +58,7 @@ jobs:
           echo "127.0.0.1 lms.test" | sudo tee -a /etc/hosts
 
       - name: Cache pip
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
@@ -70,7 +70,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -79,7 +79,7 @@ jobs:
             ${{ runner.os }}-yarn-ui-
 
       - name: Cache cypress binary
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/Cypress
           key: ${{ runner.os }}-cypress
@@ -100,6 +100,7 @@ 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: |

commitlint.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+	parserPreset: "conventional-changelog-conventionalcommits",
+	rules: {
+		"subject-empty": [2, "never"],
+		"type-case": [2, "always", "lower-case"],
+		"type-empty": [2, "never"],
+		"type-enum": [
+			2,
+			"always",
+			[
+				"build",
+				"chore",
+				"ci",
+				"docs",
+				"feat",
+				"fix",
+				"perf",
+				"refactor",
+				"revert",
+				"style",
+				"test",
+				"deprecate", // deprecation decision
+			],
+		],
+	},
+};

cypress.config.js

@@ -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({
+			cy.get("div")
-				fileContent,
+				.contains("Course Image")
-				fileName: "profile.png",
+				.siblings("div")
-				mimeType: "image/png",
+				.children('input[type="file"]')
-				encoding: "base64",
+				.attachFile({
-			});
+					fileContent,
+					fileName: "profile.png",
+					mimeType: "image/png",
+					encoding: "base64",
+				});
 		});
 
 		cy.get("label")

cypress/support/commands.js

@@ -37,6 +37,9 @@ Cypress.Commands.add("login", (email, password) => {
 		url: "/api/method/login",
 		method: "POST",
 		body: { usr: email, pwd: password },
+		timeout: 60000,
+		retryOnStatusCodeFailure: true,
+		retryOnNetworkFailure: true,
 	});
 });
 

frontend/components.d.ts

@@ -0,0 +1,97 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Annoucements: typeof import('./src/components/Annoucements.vue')['default']
+    AnnouncementModal: typeof import('./src/components/Modals/AnnouncementModal.vue')['default']
+    Apps: typeof import('./src/components/Apps.vue')['default']
+    AppSidebar: typeof import('./src/components/AppSidebar.vue')['default']
+    AssessmentModal: typeof import('./src/components/Modals/AssessmentModal.vue')['default']
+    AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
+    Assessments: typeof import('./src/components/Assessments.vue')['default']
+    Assignment: typeof import('./src/components/Assignment.vue')['default']
+    AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
+    AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
+    Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
+    BatchCard: typeof import('./src/components/BatchCard.vue')['default']
+    BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default']
+    BatchCourses: typeof import('./src/components/BatchCourses.vue')['default']
+    BatchDashboard: typeof import('./src/components/BatchDashboard.vue')['default']
+    BatchFeedback: typeof import('./src/components/BatchFeedback.vue')['default']
+    BatchOverlay: typeof import('./src/components/BatchOverlay.vue')['default']
+    BatchStudentProgress: typeof import('./src/components/Modals/BatchStudentProgress.vue')['default']
+    BatchStudents: typeof import('./src/components/BatchStudents.vue')['default']
+    BrandSettings: typeof import('./src/components/BrandSettings.vue')['default']
+    BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
+    Categories: typeof import('./src/components/Categories.vue')['default']
+    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
+    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
+    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
+    CourseCard: typeof import('./src/components/CourseCard.vue')['default']
+    CourseCardOverlay: typeof import('./src/components/CourseCardOverlay.vue')['default']
+    CourseInstructors: typeof import('./src/components/CourseInstructors.vue')['default']
+    CourseOutline: typeof import('./src/components/CourseOutline.vue')['default']
+    CourseReviews: typeof import('./src/components/CourseReviews.vue')['default']
+    CreateOutline: typeof import('./src/components/CreateOutline.vue')['default']
+    DateRange: typeof import('./src/components/Common/DateRange.vue')['default']
+    DesktopLayout: typeof import('./src/components/DesktopLayout.vue')['default']
+    DiscussionModal: typeof import('./src/components/Modals/DiscussionModal.vue')['default']
+    DiscussionReplies: typeof import('./src/components/DiscussionReplies.vue')['default']
+    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']
+    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']
+    ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
+    FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
+    IconPicker: typeof import('./src/components/Controls/IconPicker.vue')['default']
+    IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
+    InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
+    JobApplicationModal: typeof import('./src/components/Modals/JobApplicationModal.vue')['default']
+    JobCard: typeof import('./src/components/JobCard.vue')['default']
+    LessonContent: typeof import('./src/components/LessonContent.vue')['default']
+    LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
+    Link: typeof import('./src/components/Controls/Link.vue')['default']
+    LiveClass: typeof import('./src/components/LiveClass.vue')['default']
+    LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
+    LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
+    Members: typeof import('./src/components/Members.vue')['default']
+    MobileLayout: typeof import('./src/components/MobileLayout.vue')['default']
+    MultiSelect: typeof import('./src/components/Controls/MultiSelect.vue')['default']
+    NoPermission: typeof import('./src/components/NoPermission.vue')['default']
+    NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
+    NotPermitted: typeof import('./src/components/NotPermitted.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']
+    QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
+    Rating: typeof import('./src/components/Controls/Rating.vue')['default']
+    ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SettingDetails: typeof import('./src/components/SettingDetails.vue')['default']
+    SettingFields: typeof import('./src/components/SettingFields.vue')['default']
+    Settings: typeof import('./src/components/Modals/Settings.vue')['default']
+    SidebarLink: typeof import('./src/components/SidebarLink.vue')['default']
+    StudentHeatmap: typeof import('./src/components/StudentHeatmap.vue')['default']
+    StudentModal: typeof import('./src/components/Modals/StudentModal.vue')['default']
+    Tags: typeof import('./src/components/Tags.vue')['default']
+    UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
+    UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
+    UploadPlugin: typeof import('./src/components/UploadPlugin.vue')['default']
+    UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
+    UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
+    VideoBlock: typeof import('./src/components/VideoBlock.vue')['default']
+  }
+}

frontend/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="{{ favicon or '/assets/lms/frontend/favicon.png' }}" />
+		<link rel="icon" href="{{ favicon }}" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Frappe Learning</title>
+		<title>{{ title }}</title>
 		<meta name="title" content="{{ meta.title }}" />
 		<meta name="image" content="{{ meta.image }}" />
 		<meta name="description" content="{{ meta.description }}" />
@@ -23,26 +23,10 @@
 				<p>
 					{{ meta.description }}
 				</p>
-				<p>
-					The content here is just for seo purposes. The actual content will be loaded in a few seconds.
-				</p>
-				<p>
-					Seo checks if a page has more than 300 words. So, here are some more words to make it more than 300 words.
-					Page descriptions are the HTML meta tags that provide a brief summary of a web page.
-					Search engines use meta descriptions to help identify the page's topic - they don't use them to rank the page, but they do use them to determine whether or not to display the page in search results.
-					Meta descriptions are important because they're often the first thing people see when they're deciding which search result to click on.
-					They're also important because they can help improve your click-through rate (CTR) from search results.
-					A good meta description can entice people to click on your page instead of someone else's.
-				</p>
 				<a href="{{ meta.link }}">Know More</a>
 			</div>
 		</div>
-		<div id="modals"></div>
-		<div id="popovers"></div>
-
 		<script>
-			window.csrf_token = '{{ csrf_token }}'
-			window.setup_complete = '{{ setup_complete }}'
 			document.getElementById('seo-content').style.display = 'none';
 		</script>
 		<script type="module" src="/src/main.js"></script>

frontend/package.json

@@ -26,12 +26,14 @@
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.109",
+    "frappe-ui": "^0.1.134",
+    "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.3.3",
+    "tailwindcss": "3.4.15",
     "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",

frontend/public/learning.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z" fill="#0E7159"/>
+<path d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z" fill="white"/>
+</svg>

frontend/src/App.vue

@@ -8,18 +8,34 @@
 <script setup>
 import { Toasts } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
+import NoSidebarLayout from './components/NoSidebarLayout.vue'
 import { stopSession } from '@/telemetry'
 import { init as initTelemetry } from '@/telemetry'
 import { usersStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
 
 const screenSize = useScreenSize()
 let { userResource } = usersStore()
+const router = useRouter()
+const noSidebar = ref(false)
+
+router.beforeEach((to, from, next) => {
+	if (to.query.fromLesson || to.path === '/persona') {
+		noSidebar.value = true
+	} else {
+		noSidebar.value = false
+	}
+	next()
+})
 
 const Layout = computed(() => {
+	if (noSidebar.value) {
+		return NoSidebarLayout
+	}
 	if (screenSize.width < 640) {
 		return MobileLayout
 	} else {
@@ -28,11 +44,11 @@ const Layout = computed(() => {
 })
 
 onMounted(async () => {
-	if (!userResource.data) return
+	if (userResource.data) await initTelemetry()
-	await initTelemetry()
 })
 
 onUnmounted(() => {
+	noSidebar.value = false
 	stopSession()
 })
 </script>

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>
@@ -62,34 +66,109 @@
 				</div>
 			</div>
 		</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?.user_type == 'System User' &&
+					userResource.data?.is_system_manager && userResource.data?.is_fc_site
-					userResource.data?.is_fc_site
 				"
 				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
 			/>
-			<SidebarLink
+			<GettingStartedBanner
-				:link="{
+				v-if="showOnboarding && !isOnboardingStepsCompleted"
-					label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
+				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
-				}"
+				appName="learning"
-				:isCollapsed="sidebarStore.isSidebarCollapsed"
+			/>
-				@click="toggleSidebar()"
+
-				class="m-2"
+			<div
+				class="flex items-center mt-4"
+				:class="
+					sidebarStore.isSidebarCollapsed ? 'flex-col space-y-3' : 'flex-row'
+				"
 			>
-				<template #icon>
+				<div
-					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+					class="flex items-center flex-1"
-						<CollapseSidebar
+					:class="
-							class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
+						sidebarStore.isSidebarCollapsed
-							:class="{
+							? 'flex-col space-y-3'
-								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+							: '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 #body>
-				</template>
+							<div
-			</SidebarLink>
+								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 :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"
+			v-model="showHelpModal"
+			v-model:articles="articles"
+			appName="learning"
+			title="Frappe Learning"
+			:logo="LMSLogo"
+			:afterSkip="(step) => capture('onboarding_step_skipped_' + step)"
+			:afterSkipAll="() => capture('onboarding_steps_skipped')"
+			:afterReset="(step) => capture('onboarding_step_reset_' + step)"
+			:afterResetAll="() => capture('onboarding_steps_reset')"
+			docsLink="https://docs.frappe.io/learning"
+		/>
+		<IntermediateStepModal
+			v-model="showIntermediateModal"
+			:currentStep="currentStep"
+		/>
 	</div>
 	<PageModal
 		v-model="showPageModal"
@@ -103,15 +182,40 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
-import { ref, onMounted, inject, watch } from 'vue'
+import { ref, onMounted, inject, watch, reactive, markRaw, h } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
-import { ChevronRight, Plus } from 'lucide-vue-next'
+import { Button, createResource, Tooltip } from 'frappe-ui'
-import { Button, createResource, TrialBanner } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
+import { capture } from '@/telemetry'
+import LMSLogo from '@/components/Icons/LMSLogo.vue'
+import { useRouter } from 'vue-router'
+import InviteIcon from './Icons/InviteIcon.vue'
+import {
+	BookOpen,
+	CircleAlert,
+	ChevronRight,
+	Plus,
+	CircleHelp,
+	FolderTree,
+	FileText,
+	UserPlus,
+	Users,
+	BookText,
+	Zap,
+} from 'lucide-vue-next'
+import {
+	TrialBanner,
+	HelpModal,
+	GettingStartedBanner,
+	useOnboarding,
+	showHelpModal,
+	minimize,
+	IntermediateStepModal,
+} from 'frappe-ui/frappe'
 
 const { user, sidebarSettings } = sessionStore()
 const { userResource } = usersStore()
@@ -124,12 +228,28 @@ const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
 const settingsStore = useSettings()
+const showOnboarding = ref(false)
+const showIntermediateModal = ref(false)
+const currentStep = ref({})
+const router = useRouter()
+let onboardingDetails
+let isOnboardingStepsCompleted = false
+const readOnlyMode = window.read_only_mode
+const iconProps = {
+	strokeWidth: 1.5,
+	width: 16,
+	height: 16,
+}
 
 onMounted(() => {
+	addNotifications()
+	setSidebarLinks()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
-	addNotifications()
+})
+
+const setSidebarLinks = () => {
 	sidebarSettings.reload(
 		{},
 		{
@@ -144,7 +264,7 @@ onMounted(() => {
 			},
 		}
 	)
-})
+}
 
 const unreadNotifications = createResource({
 	cache: 'Unread Notifications Count',
@@ -188,7 +308,12 @@ const addQuizzes = () => {
 			label: 'Quizzes',
 			icon: 'CircleHelp',
 			to: 'Quizzes',
-			activeFor: ['Quizzes', 'QuizForm'],
+			activeFor: [
+				'Quizzes',
+				'QuizForm',
+				'QuizSubmissionList',
+				'QuizSubmission',
+			],
 		})
 	}
 }
@@ -199,7 +324,12 @@ const addAssignments = () => {
 			label: 'Assignments',
 			icon: 'Pencil',
 			to: 'Assignments',
-			activeFor: ['Assignments', 'AssignmentForm'],
+			activeFor: [
+				'Assignments',
+				'AssignmentForm',
+				'AssignmentSubmissionList',
+				'AssignmentSubmission',
+			],
 		})
 	}
 }
@@ -262,16 +392,6 @@ const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)
 }
 
-watch(userResource, () => {
-	if (userResource.data) {
-		isModerator.value = userResource.data.is_moderator
-		isInstructor.value = userResource.data.is_instructor
-		addPrograms()
-		addQuizzes()
-		addAssignments()
-	}
-})
-
 const toggleSidebar = () => {
 	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
 	localStorage.setItem(
@@ -287,4 +407,222 @@ const toggleWebPages = () => {
 		JSON.stringify(sidebarStore.isWebpagesCollapsed)
 	)
 }
+
+const getFirstCourse = async () => {
+	let firstCourse = localStorage.getItem('firstCourse')
+	if (firstCourse) return firstCourse
+	return await call('lms.lms.onboarding.get_first_course')
+}
+
+const getFirstBatch = async () => {
+	let firstBatch = localStorage.getItem('firstBatch')
+	if (firstBatch) return firstBatch
+	return await call('lms.lms.onboarding.get_first_batch')
+}
+
+const steps = reactive([
+	{
+		name: 'create_first_course',
+		title: __('Create your first course'),
+		icon: markRaw(h(BookOpen, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			router.push({
+				name: 'Courses',
+			})
+		},
+	},
+	{
+		name: 'create_first_chapter',
+		title: __('Add your first chapter'),
+		icon: markRaw(h(FolderTree, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let course = await getFirstCourse()
+			if (course) {
+				router.push({ name: 'CourseForm', params: { courseName: course } })
+			} else {
+				router.push({ name: 'CourseForm' })
+			}
+		},
+	},
+	{
+		name: 'create_first_lesson',
+		title: __('Add your first lesson'),
+		icon: markRaw(h(FileText, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let course = await getFirstCourse()
+			if (course) {
+				router.push({
+					name: 'CourseForm',
+					params: { courseName: course },
+				})
+			} else {
+				router.push({ name: 'Courses' })
+			}
+		},
+	},
+	{
+		name: 'create_first_quiz',
+		title: __('Create your first quiz'),
+		icon: markRaw(h(CircleHelp, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			router.push({ name: 'Quizzes' })
+		},
+	},
+	{
+		name: 'invite_students',
+		title: __('Invite your team and students'),
+		icon: markRaw(h(InviteIcon, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			settingsStore.activeTab = 'Members'
+			settingsStore.isSettingsOpen = true
+		},
+	},
+	{
+		name: 'create_first_batch',
+		title: __('Create your first batch'),
+		icon: markRaw(h(Users, iconProps)),
+		completed: false,
+		onClick: () => {
+			minimize.value = true
+			router.push({ name: 'Batches' })
+		},
+	},
+	{
+		name: 'add_batch_student',
+		title: __('Add students to your batch'),
+		icon: markRaw(h(UserPlus, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let batch = await getFirstBatch()
+			if (batch) {
+				router.push({
+					name: 'Batch',
+					params: {
+						batchName: batch,
+					},
+				})
+			} else {
+				router.push({ name: 'Batch' })
+			}
+		},
+	},
+	{
+		name: 'add_batch_course',
+		title: __('Add courses to your batch'),
+		icon: markRaw(h(BookText, iconProps)),
+		completed: false,
+		onClick: async () => {
+			minimize.value = true
+			let batch = await getFirstBatch()
+			if (batch) {
+				router.push({
+					name: 'Batch',
+					params: {
+						batchName: batch,
+					},
+					hash: '#courses',
+				})
+			} else {
+				router.push({ name: 'Batch' })
+			}
+		},
+	},
+])
+
+const articles = ref([
+	{
+		title: __('Introduction'),
+		opened: false,
+		subArticles: [
+			{ name: 'introduction', title: __('Introduction') },
+			{ name: 'setting-up', title: __('Setting up') },
+		],
+	},
+	{
+		title: __('Creating a course'),
+		opened: false,
+		subArticles: [
+			{ name: 'create-a-course', title: __('Create a course') },
+			{ name: 'add-a-chapter', title: __('Add a chapter') },
+			{ name: 'add-a-lesson', title: __('Add a lesson') },
+		],
+	},
+	{
+		title: __('Creating a batch'),
+		opened: false,
+		subArticles: [
+			{ name: 'create-a-batch', title: __('Create a batch') },
+			{ name: 'create-a-live-class', title: __('Create a live class') },
+		],
+	},
+	{
+		title: __('Assessments'),
+		opened: false,
+		subArticles: [
+			{ name: 'quizzes', title: __('Quizzes') },
+			{ name: 'assignments', title: __('Assignments') },
+		],
+	},
+	{
+		title: __('Certification'),
+		opened: false,
+		subArticles: [
+			{ name: 'issue-a-certificate', title: __('Issue a Certificate') },
+			{
+				name: 'custom-certificate-templates',
+				title: __('Custom Certificate Templates'),
+			},
+		],
+	},
+	{
+		title: __('Monetization'),
+		opened: false,
+		subArticles: [
+			{
+				name: 'setting-up-payment-gateway',
+				title: __('Setting up payment gateway'),
+			},
+		],
+	},
+	{
+		title: __('Settings'),
+		opened: false,
+		subArticles: [{ name: 'roles', title: __('Roles') }],
+	},
+])
+
+const setUpOnboarding = () => {
+	if (userResource.data?.is_system_manager) {
+		onboardingDetails = useOnboarding('learning')
+		onboardingDetails.setUp(steps)
+		isOnboardingStepsCompleted = onboardingDetails.isOnboardingStepsCompleted
+		showOnboarding.value = true
+	}
+}
+
+watch(userResource, () => {
+	if (userResource.data) {
+		isModerator.value = userResource.data.is_moderator
+		isInstructor.value = userResource.data.is_instructor
+		addPrograms()
+		addQuizzes()
+		addAssignments()
+		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

@@ -1,10 +1,13 @@
 <template>
 	<div
 		v-if="assignment.data"
-		class="grid grid-cols-[65%,35%] h-full"
+		class="grid grid-cols-2 h-full"
-		:class="{ 'border rounded-lg': !showTitle }"
+		:class="{ 'border rounded-lg overflow-auto': !showTitle }"
 	>
-		<div class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]">
+		<div
+			class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
+			:class="{ 'h-full': !showTitle }"
+		>
 			<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
 				<div v-if="submissionName === 'new'">
 					{{ __('Submission by') }} {{ user.data?.full_name }}
@@ -50,7 +53,7 @@
 						!['Pass', 'Fail'].includes(submissionResource.doc?.status) &&
 						submissionResource.doc?.owner == user.data?.name
 					"
-					class="bg-surface-blue-2 p-3 rounded-md leading-5 text-sm mb-4"
+					class="bg-surface-blue-2 text-ink-blue-2 p-3 rounded-md leading-5 text-sm mb-4"
 				>
 					{{ __("You've successfully submitted the assignment.") }}
 					{{
@@ -116,7 +119,7 @@
 					/>
 				</div>
 				<div v-else>
-					<div class="text-sm mb-4">
+					<div class="text-sm mb-2 text-ink-gray-7">
 						{{ __('Write your answer here') }}
 					</div>
 					<TextEditor
@@ -138,9 +141,10 @@
 					<div class="text-sm text-ink-gray-5 font-medium mb-2">
 						{{ __('Comments by Evaluator') }}:
 					</div>
-					<div class="leading-5">
+					<div
-						{{ submissionResource.doc.comments }}
+						class="leading-5 text-ink-gray-9"
-					</div>
+						v-html="submissionResource.doc.comments"
+					></div>
 				</div>
 
 				<!-- Grading -->
@@ -198,7 +202,6 @@ const answer = ref(null)
 const comments = ref(null)
 const router = useRouter()
 const user = inject('$user')
-const showTitle = router.currentRoute.value.name == 'AssignmentSubmission'
 const isDirty = ref(false)
 
 const props = defineProps({
@@ -210,6 +213,10 @@ const props = defineProps({
 		type: String,
 		default: 'new',
 	},
+	showTitle: {
+		type: Boolean,
+		default: true,
+	},
 })
 
 onMounted(() => {
@@ -353,6 +360,7 @@ const addNewSubmission = () => {
 							assignmentID: props.assignmentID,
 							submissionName: data.name,
 						},
+						query: { fromLesson: router.currentRoute.value.query.fromLesson },
 					})
 				} else {
 					markLessonProgress()

frontend/src/components/AssignmentBlock.vue

@@ -1,46 +0,0 @@
-<template>
-	<Assignment
-		v-if="user.data && submission.data"
-		:assignmentID="assignmentID"
-		:submissionName="submission.data?.name || 'new'"
-	/>
-	<div v-else class="border rounded-md text-center py-20">
-		<div>
-			{{ __('Please login to access the assignment.') }}
-		</div>
-		<Button @click="redirectToLogin()" class="mt-2">
-			<span>
-				{{ __('Login') }}
-			</span>
-		</Button>
-	</div>
-</template>
-<script setup>
-import { inject, watch } from 'vue'
-import { Button, createResource } from 'frappe-ui'
-import Assignment from '@/components/Assignment.vue'
-
-const user = inject('$user')
-
-const props = defineProps({
-	assignmentID: {
-		type: String,
-		required: true,
-	},
-})
-
-const submission = createResource({
-	url: 'frappe.client.get_value',
-	makeParams(values) {
-		return {
-			doctype: 'LMS Assignment Submission',
-			fieldname: 'name',
-			filters: {
-				assignment: props.assignmentID,
-				member: user.data?.name,
-			},
-		}
-	},
-	auto: true,
-})
-</script>

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

@@ -63,6 +63,9 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
+		<div v-else class="text-sm italic text-ink-gray-5">
+			{{ __('No courses added') }}
+		</div>
 		<BatchCourseModal
 			v-model="showCourseModal"
 			:batch="batch"
@@ -86,6 +89,7 @@ import {
 } 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')
@@ -156,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

@@ -24,7 +24,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,68 +49,70 @@
 				{{ batch.data.timezone }}
 			</span>
 		</div>
-		<router-link
+		<div v-if="!readOnlyMode">
-			v-if="isModerator || isStudent"
+			<router-link
-			:to="{
+				v-if="isModerator || isStudent"
-				name: 'Batch',
+				:to="{
-				params: {
+					name: 'Batch',
-					batchName: batch.data.name,
+					params: {
-				},
+						batchName: batch.data.name,
-			}"
+					},
-		>
+				}"
-			<Button variant="solid" class="w-full mt-4">
+			>
-				<span>
+				<Button variant="solid" class="w-full mt-4">
-					{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
+					<span>
-				</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
-		<router-link
+				v-if="isModerator"
-			:to="{
+				:to="{
-				name: 'Billing',
+					name: 'BatchForm',
-				params: {
+					params: {
-					type: 'batch',
+						batchName: batch.data.name,
-					name: batch.data.name,
+					},
-				},
+				}"
-			}"
+			>
-			v-else-if="
+				<Button class="w-full mt-2">
-				batch.data.paid_batch &&
+					<span>
-				batch.data.seats_left > 0 &&
+						{{ __('Edit') }}
-				batch.data.accept_enrollments
+					</span>
-			"
+				</Button>
-		>
+			</router-link>
-			<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
+		</div>
-				<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>
 	</div>
 </template>
 <script setup>
@@ -120,7 +125,7 @@ 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: {

frontend/src/components/BatchStudents.vue

@@ -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>
@@ -247,6 +247,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: {
@@ -264,7 +265,8 @@ const students = createResource({
 	auto: true,
 	onSuccess(data) {
 		chartData.value = getChartData()
-		showProgressChart.value = data.length && true
+		showProgressChart.value =
+			data.length && (props.batch?.courses?.length || assessmentCount.value)
 	},
 })
 

frontend/src/components/CertificationLinks.vue

@@ -1,6 +1,16 @@
 <template>
+	<Button
+		v-if="certification.data && certification.data.certificate"
+		@click="downloadCertificate"
+		class=""
+	>
+		<template #prefix>
+			<GraduationCap class="size-4 stroke-1.5" />
+		</template>
+		{{ __('View Certificate') }}
+	</Button>
 	<div
-		v-if="
+		v-else-if="
 			certification.data &&
 			certification.data.membership &&
 			certification.data.paid_certificate &&
@@ -25,7 +35,7 @@
 			</Button>
 		</router-link>
 		<router-link
-			v-else-if="!certification.data.membership.certficate"
+			v-else-if="!certification.data.membership.certificate"
 			:to="{
 				name: 'CourseCertification',
 				params: {
@@ -61,7 +71,15 @@ const certification = createResource({
 	params: {
 		course: props.courseName,
 	},
-	auto: true,
+	auto: user.data ? true : false,
 	cache: ['certificationData', user.data?.name],
 })
+
+const downloadCertificate = () => {
+	window.open(
+		`/api/method/frappe.utils.print_format.download_pdf?doctype=LMS+Certificate&name=${
+			certification.data.certificate.name
+		}&format=${encodeURIComponent(certification.data.certificate.template)}`
+	)
+}
 </script>

frontend/src/components/Controls/Autocomplete.vue

@@ -28,9 +28,7 @@
 			</template>
 			<template #body="{ isOpen }">
 				<div v-show="isOpen">
-					<div
+					<div class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2">
-						class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
-					>
 						<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,7 +87,7 @@
 											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>
@@ -130,7 +128,7 @@ import {
 	ComboboxOptions,
 	ComboboxOption,
 } from '@headlessui/vue'
-import { Popover, Button } from 'frappe-ui'
+import { Popover } from 'frappe-ui'
 import { ChevronDown, X } from 'lucide-vue-next'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
 

frontend/src/components/Controls/CodeEditor.vue

@@ -146,7 +146,6 @@ function resetEditor(value: string, resetHistory = false) {
 	value = getModelValue()
 	aceEditor?.setValue(value)
 	aceEditor?.clearSelection()
-	console.log(isDark.value)
 	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
 	props.autofocus && aceEditor?.focus()
 	if (resetHistory) {

frontend/src/components/Controls/MultiSelect.vue

@@ -4,7 +4,7 @@
 			{{ label }}
 			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
-		<div class="grid grid-cols-3 gap-1">
+		<div class="grid grid-cols-3 gap-2">
 			<Button
 				ref="emails"
 				v-for="value in values"
@@ -12,7 +12,7 @@
 				:label="value"
 				theme="gray"
 				variant="subtle"
-				class="rounded-md"
+				class="rounded-md word-break-all"
 				@keydown.delete.capture.stop="removeLastValue"
 			>
 				<template #suffix>
@@ -42,7 +42,7 @@
 						<template #body="{ isOpen }">
 							<div v-show="isOpen">
 								<div
-									class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
+									class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
 								>
 									<ComboboxOptions
 										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
@@ -61,7 +61,7 @@
 												]"
 											>
 												<div class="flex flex-col gap-1 p-1">
-													<div class="text-base font-medium">
+													<div class="text-base font-medium text-ink-gray-8">
 														{{ option.description }}
 													</div>
 													<div class="text-sm text-ink-gray-5">

frontend/src/components/CourseCard.vue

@@ -9,15 +9,20 @@
 			:class="{ 'default-image': !course.image }"
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
-			<div
+			<div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
-				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
+				<Badge
-			>
+					v-if="course.featured"
-				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
+					variant="subtle"
+					theme="green"
+					size="md"
+					class="mb-1 mr-1"
+				>
 					{{ __('Featured') }}
 				</Badge>
 				<div
-					v-for="tag in course.tags"
+					v-if="course.tags"
-					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
+					v-for="tag in course.tags?.split(', ')"
+					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,
+							type: 'course',
-							chapterNumber: course.data.current_lesson
+							name: course.data.name,
-								? 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') }}
+							{{ __('Buy this course') }}
 						</span>
 					</Button>
 				</router-link>
-				<CertificationLinks :courseName="course.data.name" />
+				<Badge
-			</div>
+					v-else-if="course.data.disable_self_learning"
-			<router-link
+					theme="blue"
-				v-else-if="course.data.paid_course"
+					size="lg"
-				:to="{
+				>
-					name: 'Billing',
+					{{ __('Contact the Administrator to enroll for this course.') }}
-					params: {
+				</Badge>
-						type: 'course',
+				<Button
-						name: course.data.name,
+					v-else
-					},
+					@click="enrollStudent()"
-				}"
+					variant="solid"
-			>
+					class="w-full"
-				<Button variant="solid" size="md" class="w-full">
+					size="md"
+				>
 					<span>
-						{{ __('Buy this course') }}
+						{{ __('Start Learning') }}
 					</span>
 				</Button>
-			</router-link>
+				<Button
-			<div
+					v-if="canGetCertificate"
-				v-else-if="course.data.disable_self_learning"
+					@click="fetchCertificate()"
-				class="bg-surface-blue-2 text-blue-900 text-sm rounded-md py-1 px-3"
+					variant="subtle"
-			>
+					class="w-full mt-2"
-				{{ __('Contact the Administrator to enroll for this course.') }}
+					size="md"
-			</div>
+				>
-			<Button
+					{{ __('Get Certificate') }}
-				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>
-			</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,7 +146,7 @@
 <script setup>
 import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource, Tooltip } from 'frappe-ui'
+import { Badge, Button, createResource } from 'frappe-ui'
 import { showToast, formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
@@ -148,6 +154,7 @@ import CertificationLinks from '@/components/CertificationLinks.vue'
 
 const router = useRouter()
 const user = inject('$user')
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	course: {
@@ -172,7 +179,7 @@ function enrollStudent() {
 		)
 		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',

frontend/src/components/CourseOutline.vue

@@ -1,18 +1,22 @@
 <template>
-	<div class="text-base">
+	<div class="">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
-			class="grid grid-cols-[70%,30%] mb-4 px-2"
+			class="flex items-center justify-between space-x-2 mb-4 px-2"
+			:class="{
+				'sticky top-0 z-10 bg-surface-white border-b px-3 py-2.5 sm:px-5':
+					allowEdit,
+			}"
 		>
-			<div class="font-semibold text-lg leading-5 text-ink-gray-9">
+			<div
+				class="font-semibold text-lg leading-5 text-ink-gray-9"
+				:class="{ 'font-medium text-p-base': allowEdit }"
+			>
 				{{ __(title) }}
 			</div>
 			<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="{
@@ -72,7 +76,7 @@
 							<div
 								class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
 								:class="
-									isActiveLesson(lesson.number) ? 'bg-surface-selected' : ''
+									isActiveLesson(lesson.number) ? 'bg-surface-gray-3' : ''
 								"
 							>
 								<router-link
@@ -135,6 +139,7 @@
 		</div>
 	</div>
 	<ChapterModal
+		v-if="user.data"
 		v-model="showChapterModal"
 		v-model:outline="outline"
 		:course="courseName"

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>
@@ -105,6 +107,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: {

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

@@ -0,0 +1,129 @@
+<template>
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div>
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+					{{ __(label) }}
+				</div>
+				<!-- <div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div> -->
+			</div>
+			<div class="flex item-center space-x-2">
+				<FormControl
+					v-model="search"
+					:placeholder="__('Search')"
+					type="text"
+					:debounce="300"
+				/>
+				<Button @click="() => (showForm = !showForm)">
+					<template #icon>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
+					</template>
+				</Button>
+			</div>
+		</div>
+
+		<!-- Form to add new member -->
+		<div v-if="showForm" class="flex items-center space-x-2 my-4">
+			<FormControl
+				v-model="email"
+				:placeholder="__('Email')"
+				type="email"
+				class="w-full"
+			/>
+			<Button @click="addEvaluator()" variant="subtle">
+				{{ __('Add') }}
+			</Button>
+		</div>
+
+		<div class="divide-y">
+			<div
+				v-for="evaluator in evaluators.data"
+				@click="openProfile(evaluator.username)"
+				class="cursor-pointer"
+			>
+				<div class="flex items-center justify-between py-3">
+					<div class="flex items-center space-x-3">
+						<Avatar
+							:image="evaluator.user_image"
+							:label="evaluator.full_name"
+							size="lg"
+						/>
+						<div>
+							<div class="text-base font-semibold text-ink-gray-9">
+								{{ evaluator.full_name }}
+							</div>
+							<div class="text-xs text-ink-gray-5">
+								{{ evaluator.evaluator }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { createResource, Button, FormControl, call, Avatar } from 'frappe-ui'
+import { ref, watch } from 'vue'
+import { Plus, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const show = defineModel('show')
+const search = ref('')
+const showForm = ref(false)
+const email = ref('')
+const router = useRouter()
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+	show: {
+		type: Boolean,
+	},
+})
+
+const evaluators = createResource({
+	url: 'frappe.client.get_list',
+	makeParams: () => {
+		return {
+			doctype: 'Course Evaluator',
+			fields: ['evaluator', 'full_name', 'user_image', 'username'],
+			filters: search.value ? { evaluator: ['like', `%${search.value}%`] } : {},
+		}
+	},
+	auto: true,
+})
+
+const addEvaluator = () => {
+	call('lms.lms.api.add_an_evaluator', {
+		email: email.value,
+	}).then((data) => {
+		showForm.value = false
+		email.value = ''
+		evaluators.reload()
+	})
+}
+
+watch(search, () => {
+	evaluators.reload()
+})
+
+const openProfile = (username) => {
+	show.value = false
+	router.push({
+		name: 'Profile',
+		params: {
+			username: username,
+		},
+	})
+}
+</script>

frontend/src/components/Icons/BatchIcon.vue

@@ -1,23 +0,0 @@
-<template>
-	<svg
-		width="18"
-		height="18"
-		viewBox="0 0 18 18"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<g clip-path="url(#clip0_1584_1676)">
-			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-				d="M3.17474 0.625C2.34632 0.625 1.67474 1.29657 1.67474 2.125V7.475C1.67474 8.30343 2.34632 8.975 3.17474 8.975H14.8247C15.6532 8.975 16.3247 8.30343 16.3247 7.475V2.125C16.3247 1.29657 15.6532 0.625 14.8247 0.625H3.17474ZM2.67474 2.125C2.67474 1.84886 2.8986 1.625 3.17474 1.625H14.8247C15.1009 1.625 15.3247 1.84886 15.3247 2.125V7.475C15.3247 7.75114 15.1009 7.975 14.8247 7.975H3.17474C2.8986 7.975 2.67474 7.75114 2.67474 7.475V2.125ZM4.27478 10.0749C3.99864 10.0749 3.77478 10.2987 3.77478 10.5749V12.6749C3.77478 12.951 3.99864 13.1749 4.27478 13.1749C4.55092 13.1749 4.77478 12.951 4.77478 12.6749V11.0749H6.92478V12.6749C6.92478 12.951 7.14864 13.1749 7.42478 13.1749C7.70092 13.1749 7.92478 12.951 7.92478 12.6749V10.5749C7.92478 10.2987 7.70092 10.0749 7.42478 10.0749H4.27478ZM10.0749 10.5749C10.0749 10.2987 10.2987 10.0749 10.5749 10.0749H13.7249C14.001 10.0749 14.2249 10.2987 14.2249 10.5749V12.6749C14.2249 12.951 14.001 13.1749 13.7249 13.1749C13.4487 13.1749 13.2249 12.951 13.2249 12.6749V11.0749H11.0749V12.6749C11.0749 12.951 10.851 13.1749 10.5749 13.1749C10.2987 13.1749 10.0749 12.951 10.0749 12.6749V10.5749ZM1.125 14.275C0.848858 14.275 0.625 14.4988 0.625 14.775V16.875C0.625 17.1511 0.848858 17.375 1.125 17.375C1.40114 17.375 1.625 17.1511 1.625 16.875V15.275H3.775V16.875C3.775 17.1511 3.99886 17.375 4.275 17.375C4.55114 17.375 4.775 17.1511 4.775 16.875V14.775C4.775 14.4988 4.55114 14.275 4.275 14.275H1.125ZM13.2252 14.775C13.2252 14.4988 13.4491 14.275 13.7252 14.275H16.8752C17.1514 14.275 17.3752 14.4988 17.3752 14.775V16.875C17.3752 17.1511 17.1514 17.375 16.8752 17.375C16.5991 17.375 16.3752 17.1511 16.3752 16.875V15.275H14.2252V16.875C14.2252 17.1511 14.0014 17.375 13.7252 17.375C13.4491 17.375 13.2252 17.1511 13.2252 16.875V14.775ZM7.42511 14.275C7.14897 14.275 6.92511 14.4988 6.92511 14.775V16.875C6.92511 17.1511 7.14897 17.375 7.42511 17.375C7.70125 17.375 7.92511 17.1511 7.92511 16.875V15.275H10.0751V16.875C10.0751 17.1511 10.299 17.375 10.5751 17.375C10.8513 17.375 11.0751 17.1511 11.0751 16.875V14.775C11.0751 14.4988 10.8513 14.275 10.5751 14.275H7.42511Z"
-				fill="#525252"
-			/>
-		</g>
-		<defs>
-			<clipPath id="clip0_1584_1676">
-				<rect width="18" height="18" fill="white" />
-			</clipPath>
-		</defs>
-	</svg>
-</template>

frontend/src/components/Icons/FrappeCloudIcon.vue

@@ -0,0 +1,23 @@
+<template>
+	<svg
+		width="32"
+		height="32"
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect
+			x="0.75"
+			y="0.75"
+			width="30.5"
+			height="30.5"
+			rx="6.25"
+			stroke="currentColor"
+			stroke-width="1.5"
+		/>
+		<path
+			d="M24.5011 14.1124C23.3954 12.4873 21.532 11.5477 19.594 11.6747C18.7616 10.1384 17.2211 9.12267 15.4198 9.0084C14.1651 8.93222 12.8979 9.3766 11.9165 10.24C11.2456 10.8367 10.7611 11.5223 10.463 12.2968C10.289 12.7539 9.89151 13.0459 9.46912 13.0459H6.5V15.5852H9.46912C10.9226 15.5852 12.2271 14.6584 12.7737 13.2237C12.9227 12.8301 13.1712 12.4873 13.5439 12.1571C14.0284 11.7255 14.662 11.4969 15.2583 11.535C16.1528 11.5985 16.7863 12.0175 17.1839 12.538C17.6063 13.0205 17.8423 13.7696 17.979 14.5187C18.774 14.2902 19.6437 14.0997 20.476 14.2394C21.1593 14.3536 21.7929 14.7218 22.2525 15.2678C22.327 15.3567 22.4016 15.4456 22.4637 15.5471C23.06 16.4232 23.1718 17.5024 22.7743 18.5689C22.414 19.5592 21.0847 20.4607 19.9791 20.4607H11.3326C10.1524 20.4607 9.18339 19.5592 9.03432 18.4038H6.54969C6.71119 20.9686 8.78585 23 11.3326 23H19.9915C22.1283 23 24.3769 21.451 25.1098 19.4704C25.7931 17.6167 25.5695 15.6614 24.5135 14.0997L24.5011 14.1124Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

frontend/src/components/Icons/InviteIcon.vue

@@ -0,0 +1,16 @@
+<template>
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M13.5 0C13.7761 0 14 0.223858 14 0.5V2H15.5C15.7761 2 16 2.22386 16 2.5C16 2.77614 15.7761 3 15.5 3H14V4.5C14 4.77614 13.7761 5 13.5 5C13.2239 5 13 4.77614 13 4.5V3H11.5C11.2239 3 11 2.77614 11 2.5C11 2.22386 11.2239 2 11.5 2H13V0.5C13 0.223858 13.2239 0 13.5 0ZM7.9998 2C4.6862 2 2 4.6862 2 7.9998C2 9.49431 2.54643 10.8612 3.45041 11.9116C4.18218 10.8499 5.63104 9.51974 7.99595 9.50011L8.0001 9.50008C9.89267 9.50009 11.5613 10.456 12.5506 11.91C13.4537 10.8598 13.9996 9.49355 13.9996 7.9998C13.9996 7.72366 14.2235 7.4998 14.4996 7.4998C14.7757 7.4998 14.9996 7.72366 14.9996 7.9998C14.9996 11.8657 11.8657 14.9996 7.9998 14.9996C4.13392 14.9996 1 11.8657 1 7.9998C1 4.13392 4.13392 1 7.9998 1C8.27594 1 8.4998 1.22386 8.4998 1.5C8.4998 1.77614 8.27594 2 7.9998 2ZM11.8227 12.6242C11.0281 11.3487 9.61378 10.5008 8.00216 10.5001C5.94811 10.518 4.73746 11.7366 4.17676 12.6241C5.21484 13.4833 6.54702 13.9996 7.9998 13.9996C9.45251 13.9996 10.7846 13.4833 11.8227 12.6242ZM8 4.5C7.0335 4.5 6.25 5.2835 6.25 6.25C6.25 7.2165 7.0335 8 8 8C8.9665 8 9.75 7.2165 9.75 6.25C9.75 5.2835 8.9665 4.5 8 4.5ZM5.25 6.25C5.25 4.73122 6.48122 3.5 8 3.5C9.51878 3.5 10.75 4.73122 10.75 6.25C10.75 7.76878 9.51878 9 8 9C6.48122 9 5.25 7.76878 5.25 6.25Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

frontend/src/components/Icons/LMSLogo.vue

@@ -1,36 +1,18 @@
 <template>
 	<svg
-		width="118"
+		width="80"
-		height="118"
+		height="79"
-		viewBox="0 0 118 118"
+		viewBox="0 0 80 79"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
 	>
 		<path
-			d="M93.9278 0H23.1013C10.3428 0 0 10.3428 0 23.1013V93.9278C0 106.686 10.3428 117.029 23.1013 117.029H93.9278C106.686 117.029 117.029 106.686 117.029 93.9278V23.1013C117.029 10.3428 106.686 0 93.9278 0Z"
+			d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z"
-			fill="url(#paint0_radial_174_336)"
+			fill="#0E7159"
 		/>
 		<path
-			d="M93.9278 0H23.1013C10.3428 0 0 10.3428 0 23.1013V93.9278C0 106.686 10.3428 117.029 23.1013 117.029H93.9278C106.686 117.029 117.029 106.686 117.029 93.9278V23.1013C117.029 10.3428 106.686 0 93.9278 0Z"
+			d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z"
-			fill="#0B3D3D"
+			fill="white"
-			fill-opacity="0.8"
 		/>
-		<path
-			d="M95.1879 33.1294L91.4077 32.0268C80.1721 28.7716 67.9389 30.9242 58.5409 37.7496C52.083 33.0769 43.9975 30.5042 36.1746 30.5042H21.8938V41.0048H36.2796C42.2649 41.0048 48.1978 42.9999 52.923 46.6226L58.5934 50.9279L64.2637 46.6226C70.144 42.1599 77.5469 40.2698 84.7923 41.2673V76.1818C75.5518 75.2367 66.2063 77.7044 58.6459 83.2172C51.0854 77.7044 41.6349 75.2367 32.4994 76.1818V52.8705H21.9988V86.4724H95.3454V33.1294H95.1879Z"
-			fill="#58FF9B"
-		/>
-		<defs>
-			<radialGradient
-				id="paint0_radial_174_336"
-				cx="0"
-				cy="0"
-				r="1"
-				gradientUnits="userSpaceOnUse"
-				gradientTransform="translate(117.24 -101.5) rotate(105.042) scale(226.282)"
-			>
-				<stop offset="0.445162" stop-color="#1F7676" />
-				<stop offset="1" stop-color="#0A4B4B" />
-			</radialGradient>
-		</defs>
 	</svg>
 </template>

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,41 +1,52 @@
 <template>
-	<div class="flex space-x-4 border rounded-md p-2">
+	<div
-		<img :src="job.company_logo" class="size-10 rounded-full object-contain" />
+		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-4"
-		<div class="flex flex-col space-y-2 flex-1">
+	>
-			<div class="flex items-center justify-between">
+		<div class="flex space-x-4 mb-4">
-				<span class="font-semibold text-ink-gray-9">
+			<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>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
+			<!-- <img :src="job.company_logo" alt="Company Logo" class="size-8  rounded-full object-contain  bg-white" /> -->
-				<Building2 class="w-4 h-4 stroke-1.5" />
-				<span>
-					{{ job.company_name }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<MapPin class="w-4 h-4 stroke-1.5" />
-				<span>
-					{{ job.location }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<Shapes class="w-4 h-4 stroke-1.5" />
-				<span>
-					{{ job.type }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<Calendar class="w-4 h-4 stroke-1.5" />
-				<span> {{ __('posted') }} {{ dayjs(job.creation).fromNow() }} </span>
-			</div>
 		</div>
+		<div class="space-x-2 mt-auto">
+			<Badge>
+				{{ job.type }}
+			</Badge>
+			<Badge>
+				{{ 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 { Building2, Calendar, MapPin, Shapes } from 'lucide-vue-next'
 import { inject } from 'vue'
-import { Avatar } from 'frappe-ui'
+import { Badge } from 'frappe-ui'
+import { MapPin, User } from 'lucide-vue-next'
 
 const dayjs = inject('$dayjs')
 const props = defineProps({
@@ -45,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/LessonContent.vue

@@ -4,7 +4,7 @@
 			class="youtube-video"
 			:src="getYouTubeVideoSource(youtube.split('/').pop())"
 			width="100%"
-			height="400"
+			:height="screenSize.width < 640 ? 200 : 400"
 			frameborder="0"
 			allowfullscreen
 		></iframe>
@@ -15,7 +15,7 @@
 				class="youtube-video"
 				:src="getYouTubeVideoSource(block)"
 				width="100%"
-				height="400"
+				:height="screenSize.width < 640 ? 200 : 400"
 				frameborder="0"
 				allowfullscreen
 			></iframe>
@@ -66,6 +66,9 @@
 <script setup>
 import Quiz from '@/components/QuizBlock.vue'
 import MarkdownIt from 'markdown-it'
+import { useScreenSize } from '@/utils/composables'
+
+const screenSize = useScreenSize()
 
 const markdown = new MarkdownIt({
 	html: true,

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

@@ -116,6 +116,24 @@ import { createResource, Avatar, Button, FormControl, Badge } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, watch, reactive, inject } from 'vue'
 import { RefreshCw, Plus, X } from 'lucide-vue-next'
+import { useOnboarding } from 'frappe-ui/frappe'
+
+interface User {
+	data: {
+		email: string
+		name: string
+		enabled: boolean
+		user_image: string
+		full_name: string
+		user_type: ['System User', 'Website User']
+		username: string
+		is_moderator: boolean
+		is_system_manager: boolean
+		is_evaluator: boolean
+		is_instructor: boolean
+		is_fc_site: boolean
+	}
+}
 
 const router = useRouter()
 const show = defineModel('show')
@@ -125,6 +143,8 @@ const memberList = ref([])
 const hasNextPage = ref(false)
 const showForm = ref(false)
 const dayjs = inject('$dayjs')
+const user = inject<User | null>('$user')
+const { updateOnboardingStep } = useOnboarding('learning')
 
 const member = reactive({
 	email: '',
@@ -185,6 +205,9 @@ const newMember = createResource({
 	auto: false,
 	onSuccess(data) {
 		show.value = false
+
+		if (user?.data?.is_system_manager) updateOnboardingStep('invite_students')
+
 		router.push({
 			name: 'Profile',
 			params: {

frontend/src/components/Modals/AssignmentForm.vue

@@ -0,0 +1,163 @@
+<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]"
+						/>
+					</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 } from 'frappe-ui'
+import { computed, reactive, watch } from 'vue'
+import { showToast } from '@/utils'
+
+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
+					showToast(
+						__('Success'),
+						__('Assignment created successfully'),
+						'check'
+					)
+				},
+			}
+		)
+	} else {
+		assignments.value.setValue.submit(
+			{
+				...assignment,
+				name: props.assignmentID,
+			},
+			{
+				onSuccess() {
+					show.value = false
+					showToast(
+						__('Success'),
+						__('Assignment updated successfully'),
+						'check'
+					)
+				},
+			}
+		)
+	}
+}
+
+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

@@ -24,6 +24,7 @@
 				doctype="Course Evaluator"
 				v-model="evaluator"
 				:label="__('Evaluator')"
+				:onCreate="(value, close) => openSettings(close)"
 				class="mt-4"
 			/>
 		</template>
@@ -31,14 +32,19 @@
 </template>
 <script setup>
 import { Dialog, createResource } from 'frappe-ui'
-import { ref } from 'vue'
+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'
 
 const show = defineModel()
 const course = ref(null)
 const evaluator = ref(null)
+const user = inject('$user')
 const courses = defineModel('courses')
+const { updateOnboardingStep } = useOnboarding('learning')
+const settingsStore = useSettings()
 
 const props = defineProps({
 	batch: {
@@ -68,8 +74,11 @@ const addCourse = (close) => {
 		{},
 		{
 			onSuccess() {
-				courses.value.reload()
+				if (user.data?.is_system_manager)
+					updateOnboardingStep('add_batch_course')
+
 				close()
+				courses.value.reload()
 				course.value = null
 				evaluator.value = null
 			},
@@ -79,4 +88,10 @@ const addCourse = (close) => {
 		}
 	)
 }
+
+const openSettings = (close) => {
+	close()
+	settingsStore.activeTab = 'Evaluators'
+	settingsStore.isSettingsOpen = true
+}
 </script>

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>
@@ -77,15 +77,16 @@ import {
 	FormControl,
 	Switch,
 } from 'frappe-ui'
-import { reactive, watch } from 'vue'
+import { reactive, watch, inject } from 'vue'
 import { showToast, getFileSize } from '@/utils/'
 import { capture } from '@/telemetry'
 import { FileText, X } from 'lucide-vue-next'
-import { useSettings } from '@/stores/settings'
+import { useOnboarding } from 'frappe-ui/frappe'
 
 const show = defineModel()
 const outline = defineModel('outline')
-const settingsStore = useSettings()
+const user = inject('$user')
+const { updateOnboardingStep } = useOnboarding('learning')
 
 const props = defineProps({
 	course: {
@@ -139,15 +140,15 @@ const addChapter = async (close) => {
 				return validateChapter()
 			},
 			onSuccess: (data) => {
+				if (user.data?.is_system_manager)
+					updateOnboardingStep('create_first_chapter')
+
 				capture('chapter_created')
 				chapterReference.submit(
 					{ name: data.name },
 					{
 						onSuccess(data) {
 							cleanChapter()
-							/* if (!settingsStore.onboardingDetails.data?.is_onboarded) {
-								settingsStore.onboardingDetails.reload()
-							} */
 							outline.value.reload()
 							showToast(
 								__('Success'),

frontend/src/components/Modals/FCVerfiyCodeModal.vue

@@ -1,94 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			size: 'xl',
-			title: __('Login to Frappe Cloud'),
-			actions: [
-				{
-					label: __('Verify'),
-					variant: 'solid',
-					onClick: (close) => {
-						verifyCode(close)
-					},
-				},
-			],
-		}"
-	>
-		<template #body-content>
-			<div>
-				<p>
-					{{ __('We have sent the verificaton code to your email id ') }}
-					<b>{{ props.email }}</b>
-				</p>
-				<FormControl
-					v-model="code"
-					:label="__('Verification Code')"
-					class="mb-4"
-				/>
-				<p>
-					{{ __("Didn't receive the code?") }}
-					<a href="#" @click="resendCode">{{ __('Resend') }}</a>
-				</p>
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup>
-import { call, Dialog } from 'frappe-ui'
-import { showToast } from '@/utils'
-
-const show = defineModel()
-const code = ref('')
-
-const props = defineProps({
-	email: {
-		type: String,
-		required: true,
-	},
-})
-
-const verifyCode = (close) => {
-	if (!code.value) {
-		return
-	}
-	call(
-		'frappe.integrations.frappe_providers.frappecloud_billing.verify_verification_code',
-		{
-			verification_code: code.value,
-			route: window.route,
-		}
-	)
-		.then((data) => {
-			if (data.message.login_token) {
-				close()
-				window.open(
-					`${frappeCloudBaseEndpoint}/api/method/press.api.developer.saas.login_to_fc?token=${data.message.login_token}`,
-					'_blank'
-				)
-				showToast(
-					__('Frappe Cloud Login Successful'),
-					`<p>${__('You will be redirected to Frappe Cloud soon.')}</p><p>${__(
-						"If you haven't been redirected,"
-					)} <a href="${frappeCloudBaseEndpoint}/api/method/press.api.developer.saas.login_to_fc?token=${
-						data.message.login_token
-					}" target="_blank">${__('Click here to login')}</a></p>`,
-					'check'
-				)
-			} else {
-				showToast(__('Login failed'), __('Please try again'), 'x')
-			}
-		})
-		.catch((err) => {
-			showToast(__('Login failed'), __('Please try again'), 'x')
-		})
-}
-
-const resendCode = () => {
-	call(
-		'frappe.integrations.frappe_providers.frappecloud_billing.send_verification_code'
-	).catch((err) => {
-		showToast(__('Failed to resend code'), __('Please try again'), 'x')
-	})
-}
-</script>

frontend/src/components/Modals/LiveClassModal.vue

@@ -39,13 +39,19 @@
 								:required="true"
 							/>
 						</Tooltip>
-						<FormControl
+
-							v-model="liveClass.timezone"
+						<div class="space-y-1.5">
-							type="select"
+							<label class="block text-ink-gray-5 text-xs" for="batchTimezone">
-							:options="getTimezoneOptions()"
+								{{ __('Timezone') }}
-							:label="__('Timezone')"
+								<span class="text-ink-red-3">*</span>
-							:required="true"
+							</label>
-						/>
+							<Autocomplete
+								@update:modelValue="(opt) => (liveClass.timezone = opt.value)"
+								:modelValue="liveClass.timezone"
+								:options="getTimezoneOptions()"
+								:required="true"
+							/>
+						</div>
 					</div>
 					<div>
 						<FormControl
@@ -83,18 +89,14 @@
 </template>
 <script setup>
 import {
-	Input,
-	DatePicker,
-	Select,
-	Textarea,
 	Dialog,
 	createResource,
 	Tooltip,
 	FormControl,
+	Autocomplete,
 } from 'frappe-ui'
-import { reactive, inject } from 'vue'
+import { reactive, inject, onMounted } from 'vue'
-import { getTimezones, createToast } from '@/utils/'
+import { getTimezones, createToast, getUserTimezone } from '@/utils/'
-import { Info } from 'lucide-vue-next'
 
 const liveClasses = defineModel('reloadLiveClasses')
 const show = defineModel()
@@ -120,6 +122,10 @@ let liveClass = reactive({
 	host: user.data.name,
 })
 
+onMounted(() => {
+	liveClass.timezone = getUserTimezone()
+})
+
 const getTimezoneOptions = () => {
 	return getTimezones().map((timezone) => {
 		return {

frontend/src/components/Modals/Question.vue

@@ -1,38 +1,27 @@
 <template>
-	<Dialog v-model="show" :options="dialogOptions">
+	<Dialog
-		<template #body-content>
+		v-model="show"
-			<div class="space-y-4">
+		: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">
+					<Switch
-						<input
+						size="sm"
-							type="radio"
+						:label="__('Choose an existing question')"
-							id="existing"
+						v-model="chooseFromExisting"
-							value="existing"
+						class="!p-0"
-							v-model="questionType"
+					/>
-							class="w-3 h-3 cursor-pointer"
-						/>
-						<label for="existing" class="cursor-pointer">
-							{{ __('Add an existing question') }}
-						</label>
-					</div>
-
-					<div class="flex items-center space-x-2">
-						<input
-							type="radio"
-							id="new"
-							value="new"
-							v-model="questionType"
-							class="w-3 h-3 cursor-pointer"
-						/>
-						<label for="new" class="cursor-pointer">
-							{{ __('Create a new question') }}
-						</label>
-					</div>
 				</div>
-				<div v-if="questionType == 'new' || editMode" class="space-y-2">
+				<div 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
+					<div class="grid grid-cols-2 gap-4">
-						v-model="question.marks"
+						<FormControl
-						:label="__('Marks')"
+							v-model="question.marks"
-						type="number"
+							:label="__('Marks')"
-					/>
+							type="number"
-					<FormControl
+						/>
-						:label="__('Type')"
+						<FormControl
-						v-model="question.type"
+							:label="__('Type')"
-						type="select"
+							v-model="question.type"
-						:options="['Choices', 'User Input', 'Open Ended']"
+							type="select"
-						class="pb-2"
+							:options="['Choices', 'User Input', 'Open Ended']"
-						:required="true"
+							class="pb-2"
-					/>
+							:required="true"
-					<div v-if="question.type == 'Choices'" class="divide-y border-t">
+						/>
+					</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="grid grid-cols-2 gap-4 py-2"
-						class="space-y-2"
 					>
-						<FormControl
+						<div v-for="n in 4">
-							:label="__('Possibility') + ' ' + n"
+							<FormControl
-							v-model="question[`possibility_${n}`]"
+								:label="__('Possibility') + ' ' + n"
-							:required="n == 1 ? true : false"
+								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,29 +104,44 @@
 						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 {
-import { computed, watch, reactive, ref } from 'vue'
+	Dialog,
+	FormControl,
+	TextEditor,
+	createResource,
+	Switch,
+	Button,
+} 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')
 
 const existingQuestion = reactive({
 	question: '',
-	marks: 0,
+	marks: 1,
 })
 const question = reactive({
 	question: '',
 	type: 'Choices',
-	marks: 0,
+	marks: 1,
 })
 
 const populateFields = () => {
@@ -179,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
+			existingQuestion.marks = 1
-			questionType.value = null
+			chooseFromExisting.value = false
 			populateFields()
 		}
 
@@ -218,32 +238,26 @@ const questionCreation = createResource({
 	},
 })
 
-const submitQuestion = (close) => {
+const submitQuestion = () => {
-	if (props.questionDetail?.question) updateQuestion(close)
+	if (props.questionDetail?.question) updateQuestion()
-	else addQuestion(close)
+	else addQuestion()
 }
 
-const addQuestion = (close) => {
+const addQuestion = () => {
-	if (questionType.value == 'existing') {
+	if (chooseFromExisting.value) {
-		addQuestionRow(
+		addQuestionRow({
-			{
+			question: existingQuestion.question,
-				question: existingQuestion.question,
+			marks: existingQuestion.marks,
-				marks: existingQuestion.marks,
+		})
-			},
-			close
-		)
 	} else {
 		questionCreation.submit(
 			{},
 			{
 				onSuccess(data) {
-					addQuestionRow(
+					addQuestionRow({
-						{
+						question: data.name,
-							question: data.name,
+						marks: question.marks,
-							marks: question.marks,
+					})
-						},
-						close
-					)
 				},
 				onError(err) {
 					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
@@ -253,21 +267,24 @@ const addQuestion = (close) => {
 	}
 }
 
-const addQuestionRow = (question, close) => {
+const addQuestionRow = (question) => {
 	questionRow.submit(
 		{
 			...question,
 		},
 		{
 			onSuccess() {
+				if (user.data?.is_system_manager)
+					updateOnboardingStep('create_first_quiz')
+
 				show.value = false
 				showToast(__('Success'), __('Question added successfully'), 'check')
 				quiz.value.reload()
-				close()
+				show.value = false
 			},
 			onError(err) {
 				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
-				close()
+				show.value = false
 			},
 		}
 	)
@@ -301,7 +318,7 @@ const marksUpdate = createResource({
 	},
 })
 
-const updateQuestion = (close) => {
+const updateQuestion = () => {
 	questionUpdate.submit(
 		{},
 		{
@@ -317,7 +334,6 @@ const updateQuestion = (close) => {
 								'check'
 							)
 							quiz.value.reload()
-							close()
 						},
 					}
 				)
@@ -328,22 +344,6 @@ const updateQuestion = (close) => {
 		}
 	)
 }
-
-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/Settings.vue

@@ -40,6 +40,12 @@
 						:description="activeTab.description"
 						v-model:show="show"
 					/>
+					<Evaluators
+						v-else-if="activeTab.label === 'Evaluators'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						v-model:show="show"
+					/>
 					<Categories
 						v-else-if="activeTab.label === 'Categories'"
 						:label="activeTab.label"
@@ -78,6 +84,7 @@ import { useSettings } from '@/stores/settings'
 import SettingDetails from '../SettingDetails.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import Members from '@/components/Members.vue'
+import Evaluators from '@/components/Evaluators.vue'
 import Categories from '@/components/Categories.vue'
 import BrandSettings from '@/components/BrandSettings.vue'
 import PaymentSettings from '@/components/PaymentSettings.vue'
@@ -193,6 +200,11 @@ const tabsStructure = computed(() => {
 					description: 'Manage the members of your learning system',
 					icon: 'UserRoundPlus',
 				},
+				{
+					label: 'Evaluators',
+					description: 'Manage the evaluators of your learning system',
+					icon: 'UserCheck',
+				},
 				{
 					label: 'Categories',
 					description: 'Manage the members of your learning system',
@@ -303,12 +315,6 @@ const tabsStructure = computed(() => {
 							doctype: 'Email Template',
 							type: 'Link',
 						},
-						{
-							label: 'Assignment Submission Template',
-							name: 'assignment_submission_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
 					],
 				},
 				{
@@ -316,18 +322,52 @@ const tabsStructure = computed(() => {
 					icon: 'LogIn',
 					fields: [
 						{
-							label: 'Custom Content',
+							label: 'Identify User Category',
+							name: 'user_category',
+							type: 'checkbox',
+							description:
+								'Enable this option to identify the user category during signup.',
+						},
+						{
+							label: 'Disable signup',
+							name: 'disable_signup',
+							type: 'checkbox',
+							description:
+								'New users will have to be manually registered by Admins.',
+						},
+						{
+							label: 'Signup Consent HTML',
 							name: 'custom_signup_content',
 							type: 'Code',
 							mode: 'htmlmixed',
 							rows: 10,
 						},
+					],
+				},
+				{
+					label: 'SEO',
+					icon: 'Search',
+					fields: [
 						{
-							label: 'Ask for Occupation',
+							label: 'Meta Description',
-							name: 'user_category',
+							name: 'meta_description',
-							type: 'checkbox',
+							type: 'textarea',
+							rows: 4,
 							description:
-								'Enable this option to ask users to select their occupation during the signup process.',
+								"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

@@ -26,12 +26,15 @@
 </template>
 <script setup>
 import { Dialog, createResource } from 'frappe-ui'
-import { ref } from 'vue'
+import { ref, inject } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import { showToast } from '@/utils'
+import { useOnboarding } from 'frappe-ui/frappe'
 
 const students = defineModel('reloadStudents')
 const student = ref()
+const user = inject('$user')
+const { updateOnboardingStep } = useOnboarding('learning')
 const show = defineModel()
 
 const props = defineProps({
@@ -59,6 +62,9 @@ const addStudent = (close) => {
 		{},
 		{
 			onSuccess() {
+				if (user.data?.is_system_manager)
+					updateOnboardingStep('add_batch_student')
+
 				students.value.reload()
 				student.value = null
 				close()

frontend/src/components/NoSidebarLayout.vue

@@ -0,0 +1,11 @@
+<template>
+	<div class="relative flex h-full flex-col">
+		<div class="h-full flex-1">
+			<div class="flex h-screen text-base bg-surface-white">
+				<div class="w-full overflow-auto" id="scrollContainer">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>

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

@@ -1,7 +1,7 @@
 <template>
 	<div v-if="quiz.data">
 		<div
-			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-800"
+			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-3"
 		>
 			<div class="leading-5">
 				{{
@@ -29,7 +29,7 @@
 					).format(quiz.data.passing_percentage)
 				}}
 			</div>
-			<div v-if="quiz.data.max_attempts" class="leading-relaxed">
+			<div v-if="quiz.data.max_attempts" class="leading-5">
 				{{
 					__('You can attempt this quiz {0}.').format(
 						quiz.data.max_attempts == 1
@@ -52,7 +52,7 @@
 
 		<div v-if="activeQuestion == 0">
 			<div class="border text-center p-20 rounded-md">
-				<div class="font-semibold text-lg">
+				<div class="font-semibold text-lg text-ink-gray-9">
 					{{ quiz.data.title }}
 				</div>
 				<Button
@@ -67,7 +67,7 @@
 						{{ __('Start') }}
 					</span>
 				</Button>
-				<div v-else>
+				<div v-else class="leading-5 text-ink-gray-7">
 					{{
 						__(
 							'You have already exceeded the maximum number of attempts allowed for this quiz.'
@@ -222,11 +222,14 @@
 				</div>
 			</div>
 		</div>
-		<div v-else class="border rounded-md p-20 text-center space-y-4">
+		<div v-else class="border rounded-md p-20 text-center space-y-2">
-			<div class="text-lg font-semibold">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Quiz Summary') }}
 			</div>
-			<div v-if="quizSubmission.data.is_open_ended">
+			<div
+				v-if="quizSubmission.data.is_open_ended"
+				class="leading-5 text-ink-gray-7"
+			>
 				{{
 					__(
 						"Your submission has been successfully saved. The instructor will review and grade it shortly, and you'll be notified of your final result."
@@ -613,7 +616,6 @@ const getInstructions = (question) => {
 }
 
 const markLessonProgress = () => {
-	console.log(router)
 	if (router.currentRoute.value.name == 'Lesson') {
 		call('lms.lms.api.mark_lesson_progress', {
 			course: router.currentRoute.value.params.courseName,
@@ -651,3 +653,8 @@ const getSubmissionColumns = () => {
 	]
 }
 </script>
+<style>
+p {
+	line-height: 1.5rem;
+}
+</style>

frontend/src/components/SettingDetails.vue

@@ -51,7 +51,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
 		}
 	})

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>

frontend/src/components/SidebarLink.vue

@@ -2,7 +2,9 @@
 	<button
 		v-if="link && !link.onlyMobile"
 		class="flex h-7 cursor-pointer items-center rounded text-ink-gray-8 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-outline-gray-3"
-		:class="isActive ? 'bg-surface-white shadow-sm' : 'hover:bg-surface-gray-2'"
+		:class="
+			isActive ? 'bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'
+		"
 		@click="handleClick"
 	>
 		<div

frontend/src/components/UpcomingEvaluations.vue

@@ -18,8 +18,51 @@
 			<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="font-semibold mb-3">
+						<div class="flex justify-between mb-3">
-							{{ evl.course_title }}
+							<span class="font-semibold leading-5">
+								{{ evl.course_title }}
+							</span>
+							<Menu
+								v-if="evl.date > dayjs().format()"
+								as="div"
+								class="relative inline-block text-left"
+							>
+								<div>
+									<MenuButton class="inline-flex w-full justify-center">
+										<EllipsisVertical class="w-4 h-4 stroke-1.5" />
+									</MenuButton>
+								</div>
+
+								<transition
+									enter-active-class="transition duration-100 ease-out"
+									enter-from-class="transform scale-95 opacity-0"
+									enter-to-class="transform scale-100 opacity-100"
+									leave-active-class="transition duration-75 ease-in"
+									leave-from-class="transform scale-100 opacity-100"
+									leave-to-class="transform scale-95 opacity-0"
+								>
+									<MenuItems
+										class="absolute mt-2 w-32 rounded-md bg-white shadow-lg p-1.5"
+									>
+										<MenuItem v-slot="{ active }">
+											<Button
+												variant="ghost"
+												class="w-full"
+												@click="cancelEvaluation(evl)"
+											>
+												<template #prefix>
+													<Ban
+														:active="active"
+														class="size-4 stroke-1.5"
+														aria-hidden="true"
+													/>
+												</template>
+												{{ __('Cancel') }}
+											</Button>
+										</MenuItem>
+									</MenuItems>
+								</transition>
+							</Menu>
 						</div>
 						<div class="flex items-center mb-2">
 							<Calendar class="w-4 h-4 stroke-1.5" />
@@ -50,16 +93,6 @@
 								</template>
 								{{ __('Join Call') }}
 							</Button>
-							<Button
-								v-if="evl.date > dayjs().format()"
-								@click="cancelEvaluation(evl)"
-								class="w-full"
-							>
-								<template #prefix>
-									<Ban class="w-4 h-4 stroke-1.5" />
-								</template>
-								{{ __('Cancel') }}
-							</Button>
 						</div>
 					</div>
 				</div>
@@ -84,11 +117,13 @@ import {
 	Clock,
 	GraduationCap,
 	HeadsetIcon,
+	EllipsisVertical,
 } from 'lucide-vue-next'
 import { inject, ref, getCurrentInstance } from 'vue'
 import { formatTime } from '../utils'
 import { Button, createResource, call } from 'frappe-ui'
 import EvaluationModal from '@/components/Modals/EvaluationModal.vue'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 
 const dayjs = inject('$dayjs')
 const user = inject('$user')

frontend/src/components/UserDropdown.vue

@@ -36,7 +36,7 @@
 						<span v-else> Learning </span>
 					</div>
 					<div
-						v-if="userResource"
+						v-if="userResource.data"
 						class="mt-1 text-sm text-ink-gray-7 leading-none"
 					>
 						{{ convertToTitleCase(userResource.data?.full_name) }}
@@ -59,22 +59,21 @@
 		v-if="userResource.data?.is_moderator"
 		v-model="showSettingsModal"
 	/>
-	<FCVerfiyCodeModal v-if="showFCLoginDialog" :email="verificationEmail" />
 </template>
 
 <script setup>
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
-import { call, Dropdown } from 'frappe-ui'
+import { Dropdown } from 'frappe-ui'
 import Apps from '@/components/Apps.vue'
 import { useRouter } from 'vue-router'
-import { convertToTitleCase, showToast } from '@/utils'
+import { convertToTitleCase } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { useSettings } from '@/stores/settings'
 import { markRaw, watch, ref, onMounted, computed } from 'vue'
-import SettingsModal from '@/components/Modals/Settings.vue'
 import { createDialog } from '@/utils/dialogs'
-import FCVerfiyCodeModal from './Modals/FCVerfiyCodeModal.vue'
+import SettingsModal from '@/components/Modals/Settings.vue'
+import FrappeCloudIcon from '@/components/Icons/FrappeCloudIcon.vue'
 import {
 	ChevronDown,
 	LogIn,
@@ -83,7 +82,7 @@ import {
 	User,
 	Settings,
 	Sun,
-	LogInIcon,
+	Zap,
 } from 'lucide-vue-next'
 
 const router = useRouter()
@@ -93,11 +92,8 @@ const settingsStore = useSettings()
 let { isLoggedIn } = sessionStore()
 const showSettingsModal = ref(false)
 const theme = ref('light')
-const $dialog = createDialog
 const frappeCloudBaseEndpoint = 'https://frappecloud.com'
-
+const $dialog = createDialog
-const showFCLoginDialog = ref(false)
-const verificationEmail = ref(null)
 
 const props = defineProps({
 	isCollapsed: {
@@ -130,120 +126,103 @@ const toggleTheme = () => {
 const userDropdownOptions = computed(() => {
 	return [
 		{
-			icon: User,
+			group: '',
-			label: 'My Profile',
+			items: [
-			onClick: () => {
+				{
-				router.push(`/user/${userResource.data?.username}`)
+					icon: User,
-			},
+					label: 'My Profile',
-			condition: () => {
+					onClick: () => {
-				return isLoggedIn
+						router.push(`/user/${userResource.data?.username}`)
-			},
+					},
-		},
+					condition: () => {
-		{
+						return isLoggedIn
-			icon: theme.value === 'light' ? Moon : Sun,
+					},
-			label: 'Toggle Theme',
+				},
-			onClick: () => {
+				{
-				toggleTheme()
+					icon: theme.value === 'light' ? Moon : Sun,
-			},
+					label: 'Toggle Theme',
-		},
+					onClick: () => {
-		{
+						toggleTheme()
-			component: markRaw(Apps),
+					},
-			condition: () => {
+				},
-				let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
+				{
-				let system_user = cookies.get('system_user')
+					component: markRaw(Apps),
-				if (system_user === 'yes') return true
+					condition: () => {
-				else return false
+						let cookies = new URLSearchParams(
-			},
+							document.cookie.split('; ').join('&')
-		},
+						)
-		{
+						let system_user = cookies.get('system_user')
-			icon: Settings,
+						if (system_user === 'yes') return true
-			label: 'Settings',
+						else return false
-			onClick: () => {
+					},
-				settingsStore.isSettingsOpen = true
+				},
-			},
+				{
-			condition: () => {
+					icon: Settings,
-				return userResource.data?.is_moderator
+					label: 'Settings',
-			},
+					onClick: () => {
-		},
+						settingsStore.isSettingsOpen = true
-		{
+					},
-			icon: LogInIcon,
+					condition: () => {
-			label: 'Login to Frappe Cloud',
+						return userResource.data?.is_moderator
-			onClick: () => {
+					},
-				initiateRequestForLoginToFrappeCloud()
+				},
-			},
+				{
-			condition: () => {
+					icon: FrappeCloudIcon,
-				return (
+					label: 'Login to Frappe Cloud',
-					userResource.data?.user_type == 'System User' &&
+					onClick: () => {
-					userResource.data?.is_fc_site
+						$dialog({
-				)
+							title: __('Login to Frappe Cloud?'),
-			},
+							message: __(
-		},
+								'Are you sure you want to login to your Frappe Cloud dashboard?'
-		{
+							),
-			icon: LogOut,
+							actions: [
-			label: 'Log out',
+								{
-			onClick: () => {
+									label: __('Confirm'),
-				logout.submit().then(() => {
+									variant: 'solid',
-					isLoggedIn = false
+									onClick(close) {
-				})
+										loginToFrappeCloud()
-			},
+										close()
-			condition: () => {
+									},
-				return isLoggedIn
+								},
-			},
+							],
-		},
+						})
-		{
+					},
-			icon: LogIn,
+					condition: () => {
-			label: 'Log in',
+						return (
-			onClick: () => {
+							userResource.data?.is_system_manager &&
-				window.location.href = '/login'
+							userResource.data?.is_fc_site
-			},
+						)
-			condition: () => {
+					},
-				return !isLoggedIn
+				},
-			},
+				{
+					icon: LogOut,
+					label: 'Log out',
+					onClick: () => {
+						logout.submit().then(() => {
+							isLoggedIn = false
+						})
+					},
+					condition: () => {
+						return isLoggedIn
+					},
+				},
+				{
+					icon: LogIn,
+					label: 'Log in',
+					onClick: () => {
+						window.location.href = '/login'
+					},
+					condition: () => {
+						return !isLoggedIn
+					},
+				},
+			],
 		},
 	]
 })
 
-const initiateRequestForLoginToFrappeCloud = () => {
+const loginToFrappeCloud = () => {
-	$dialog({
+	let redirect_to = '/dashboard/sites/' + userResource.data.sitename
-		title: __('Login to Frappe Cloud?'),
+	window.open(`${frappeCloudBaseEndpoint}${redirect_to}`, '_blank')
-		message: __(
-			'Are you sure you want to login to your Frappe Cloud dashboard?'
-		),
-		actions: [
-			{
-				label: __('Confirm'),
-				variant: 'solid',
-				onClick(close) {
-					requestLoginToFC()
-					close()
-				},
-			},
-		],
-	})
-}
-
-const requestLoginToFC = () => {
-	call(
-		'frappe.integrations.frappe_providers.frappecloud_billing.send_verification_code'
-	)
-		.then((data) => {
-			if (data.message.is_user_logged_in) {
-				window.open(
-					`${frappeCloudBaseEndpoint}${data.message.redirect_to}`,
-					'_blank'
-				)
-				return
-			} else {
-				showFCLoginDialog.value = true
-				verificationEmail.value = data.message.email
-			}
-		})
-		.catch((err) => {
-			showToast(
-				__('Failed to login to Frappe Cloud'),
-				__('Please try again'),
-				'x'
-			)
-		})
 }
 </script>

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" />
+					<Volume2 v-if="!muted" class="size-5 text-ink-white" />
-					<VolumeX v-else class="w-4 h-4 text-ink-gray-9" />
+					<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: 2px;
-	width: 10px;
+	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,191 +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,
-} from 'frappe-ui'
-import {
-	computed,
-	inject,
-	onMounted,
-	onBeforeUnmount,
-	reactive,
-	watch,
-} from 'vue'
-import { showToast } from '@/utils'
-import { useRouter } from 'vue-router'
-
-const user = inject('$user')
-const router = useRouter()
-
-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' },
-	]
-})
-</script>

frontend/src/pages/AssignmentSubmission.vue

@@ -1,19 +1,27 @@
 <template>
 	<header
+		v-if="!fromLesson"
 		class="flex justify-between sticky top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 	<div class="overflow-hidden h-[calc(100vh-3.2rem)]">
-		<Assignment :assignmentID="assignmentID" :submissionName="submissionName" />
+		<Assignment
+			:assignmentID="assignmentID"
+			:submissionName="submissionName"
+			:showTitle="!fromLesson"
+		/>
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, createResource } from 'frappe-ui'
+import { Breadcrumbs, createResource, usePageMeta } from 'frappe-ui'
-import { computed, inject, onMounted } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
+import { sessionStore } from '../stores/session'
 import Assignment from '@/components/Assignment.vue'
 
 const user = inject('$user')
+const fromLesson = ref(false)
+const { brand } = sessionStore()
 
 const props = defineProps({
 	assignmentID: {
@@ -42,6 +50,10 @@ onMounted(() => {
 	if (!user.data) {
 		window.location.href = '/login'
 	}
+
+	if (new URLSearchParams(window.location.search).get('fromLesson')) {
+		fromLesson.value = true
+	}
 })
 
 const breadcrumbs = computed(() => {
@@ -62,4 +74,11 @@ const breadcrumbs = computed(() => {
 	]
 	return crumbs
 })
+
+usePageMeta(() => {
+	return {
+		title: title.data?.title,
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/AssignmentSubmissionList.vue

@@ -84,14 +84,17 @@ import {
 	ListRows,
 	ListRow,
 	ListRowItem,
+	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Pencil } from 'lucide-vue-next'
+import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
+const { brand } = sessionStore()
 const router = useRouter()
 const assignmentID = ref('')
 const member = ref('')
@@ -214,4 +217,11 @@ const breadcrumbs = computed(() => {
 		},
 	]
 })
+
+usePageMeta(() => {
+	return {
+		title: __('Assignment Submissions'),
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/Assignments.vue

@@ -3,21 +3,21 @@
 		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
+		<Button
-			:to="{
+			v-if="!readOnlyMode"
-				name: 'AssignmentForm',
+			variant="solid"
-				params: {
+			@click="
-					assignmentID: 'new',
+				() => {
-				},
+					assignmentID = 'new'
-			}"
+					showAssignmentForm = true
+				}
+			"
 		>
-			<Button variant="solid">
+			<template #prefix>
-				<template #prefix>
+				<Plus class="w-4 h-4" />
-					<Plus class="w-4 h-4" />
+			</template>
-				</template>
+			{{ __('New') }}
-				{{ __('New') }}
+		</Button>
-			</Button>
-		</router-link>
 	</header>
 
 	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
@@ -38,12 +38,11 @@
 			:options="{
 				showTooltip: false,
 				selectable: false,
-				getRowRoute: (row) => ({
+				onRowClick: (row) => {
-					name: 'AssignmentForm',
+					if (readOnlyMode) return
-					params: {
+					assignmentID = row.name
-						assignmentID: row.name,
+					showAssignmentForm = true
-					},
+				},
-				}),
 			}"
 		>
 		</ListView>
@@ -72,6 +71,11 @@
 			</Button>
 		</div>
 	</div>
+	<AssignmentForm
+		v-model="showAssignmentForm"
+		v-model:assignments="assignments"
+		:assignmentID="assignmentID"
+	/>
 </template>
 <script setup>
 import {
@@ -80,16 +84,23 @@ import {
 	createListResource,
 	FormControl,
 	ListView,
+	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { Plus, Pencil } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
+import { sessionStore } from '../stores/session'
+import AssignmentForm from '@/components/Modals/AssignmentForm.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
 const titleFilter = ref('')
 const typeFilter = ref('')
+const showAssignmentForm = ref(false)
+const assignmentID = ref('new')
+const { brand } = sessionStore()
 const router = useRouter()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
@@ -133,7 +144,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) {
@@ -163,7 +174,7 @@ const assignmentColumns = computed(() => {
 			label: __('Created'),
 			key: 'creation',
 			width: 1,
-			align: 'center',
+			align: 'right',
 		},
 	]
 })
@@ -184,4 +195,11 @@ const breadcrumbs = computed(() => [
 		route: { name: 'Assignments' },
 	},
 ])
+
+usePageMeta(() => {
+	return {
+		title: __('Assignments'),
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/Badge.vue

@@ -24,10 +24,12 @@
 	</div>
 </template>
 <script setup>
-import { createDocumentResource, createResource } from 'frappe-ui'
+import { createResource, usePageMeta } from 'frappe-ui'
 import { computed, inject } from 'vue'
+import { sessionStore } from '../stores/session'
 
 const dayjs = inject('$dayjs')
+const { brand } = sessionStore()
 
 const props = defineProps({
 	badgeName: {
@@ -70,4 +72,11 @@ const breadcrumbs = computed(() => {
 		},
 	]
 })
+
+usePageMeta(() => {
+	return {
+		title: badge.data.badge,
+		icon: brand.favicon,
+	}
+})
 </script>

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>
@@ -190,14 +190,23 @@
 			</div>
 		</div>
 	</div>
-	<BulkCertificates v-model="openCertificateDialog" :batch="batch.data" />
+	<BulkCertificates
+		v-if="batch.data"
+		v-model="openCertificateDialog"
+		:batch="batch.data"
+	/>
 </template>
 <script setup>
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, onMounted, watch } from 'vue'
-import { useRouteQuery } from '@vueuse/router'
+import { useRoute, useRouter } from 'vue-router'
-import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
+import {
-import CourseInstructors from '@/components/CourseInstructors.vue'
+	Breadcrumbs,
-import UserAvatar from '@/components/UserAvatar.vue'
+	Button,
+	createResource,
+	Tabs,
+	Badge,
+	usePageMeta,
+} from 'frappe-ui'
 import {
 	Clock,
 	LayoutDashboard,
@@ -210,7 +219,10 @@ import {
 	Globe,
 	ClipboardPen,
 } from 'lucide-vue-next'
-import { formatTime, updateDocumentTitle } from '@/utils'
+import { formatTime } from '@/utils'
+import { sessionStore } from '@/stores/session'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 import BatchDashboard from '@/components/BatchDashboard.vue'
 import BatchCourses from '@/components/BatchCourses.vue'
 import LiveClass from '@/components/LiveClass.vue'
@@ -226,52 +238,12 @@ import BatchFeedback from '@/components/BatchFeedback.vue'
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
 const openCertificateDialog = ref(false)
+const route = useRoute()
+const router = useRouter()
+const { brand } = sessionStore()
+const tabIndex = ref(0)
+const readOnlyMode = window.read_only_mode
 
-const props = defineProps({
-	batchName: {
-		type: String,
-		required: true,
-	},
-})
-
-const batch = createResource({
-	url: 'lms.lms.utils.get_batch_details',
-	cache: ['batch', props.batchName],
-	params: {
-		batch: props.batchName,
-	},
-	auto: true,
-})
-
-const breadcrumbs = computed(() => {
-	let crumbs = [{ label: 'Batches', route: { name: 'Batches' } }]
-	if (!isStudent.value) {
-		crumbs.push({
-			label: 'Details',
-			route: {
-				name: 'BatchDetail',
-				params: {
-					batchName: batch.data?.name,
-				},
-			},
-		})
-	}
-	crumbs.push({
-		label: batch?.data?.title,
-		route: { name: 'Batch', params: { batchName: props.batchName } },
-	})
-	return crumbs
-})
-
-const isStudent = computed(() => {
-	return (
-		user?.data &&
-		batch.data?.students?.length &&
-		batch.data?.students.includes(user.data.name)
-	)
-})
-
-const tabIndex = useRouteQuery('tab', 0)
 const tabs = computed(() => {
 	let batchTabs = []
 	batchTabs.push({
@@ -313,6 +285,61 @@ const tabs = computed(() => {
 	return batchTabs
 })
 
+const props = defineProps({
+	batchName: {
+		type: String,
+		required: true,
+	},
+})
+
+onMounted(() => {
+	const hash = route.hash
+	if (hash) {
+		tabs.value.forEach((tab, index) => {
+			if (tab.label?.toLowerCase() === hash.replace('#', '')) {
+				tabIndex.value = index
+			}
+		})
+	}
+})
+
+const batch = createResource({
+	url: 'lms.lms.utils.get_batch_details',
+	cache: ['batch', props.batchName],
+	params: {
+		batch: props.batchName,
+	},
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	let crumbs = [{ label: 'Batches', route: { name: 'Batches' } }]
+	if (!isStudent.value) {
+		crumbs.push({
+			label: 'Details',
+			route: {
+				name: 'BatchDetail',
+				params: {
+					batchName: batch.data?.name,
+				},
+			},
+		})
+	}
+	crumbs.push({
+		label: batch?.data?.title,
+		route: { name: 'Batch', params: { batchName: props.batchName } },
+	})
+	return crumbs
+})
+
+const isStudent = computed(() => {
+	return (
+		user?.data &&
+		batch.data?.students?.length &&
+		batch.data?.students.includes(user.data.name)
+	)
+})
+
 const redirectToLogin = () => {
 	window.location.href = `/login?redirect-to=/lms/batches/${props.batchName}`
 }
@@ -321,12 +348,22 @@ const openAnnouncementModal = () => {
 	showAnnouncementModal.value = true
 }
 
-const pageMeta = computed(() => {
+watch(tabIndex, () => {
-	return {
+	const tab = tabs.value[tabIndex.value]
-		title: batch.data?.title,
+	if (tab.label != route.hash.replace('#', '')) {
-		description: batch.data?.description,
+		router.push({ ...route, hash: `#${tab.label.toLowerCase()}` })
 	}
 })
 
-updateDocumentTitle(pageMeta)
+const canMakeAnnouncement = () => {
+	if (readOnlyMode) return false
+	return user.data?.is_moderator || user.data?.is_evaluator
+}
+
+usePageMeta(() => {
+	return {
+		title: batch?.data?.title,
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/BatchDetail.vue

@@ -14,13 +14,16 @@
 					{{ 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"
+					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center space-x-0 md:space-x-5 lg:w-1/2"
 				>
-					<div class="flex items-center text-ink-gray-7">
+					<div
-						<BookOpen class="h-4 w-4 mr-2" />
+						v-if="batch.data?.courses?.length"
+						class="flex items-center text-ink-gray-7"
+					>
+						<BookOpen class="h-4 w-4 mr-2 stroke-1.5" />
 						<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
 					</div>
-					<span class="hidden lg:block" v-if="batch.data.courses"
+					<span v-if="batch.data?.courses?.length" class="hidden lg:block"
 						>&middot;</span
 					>
 					<DateRange
@@ -31,7 +34,7 @@
 						>&middot;</span
 					>
 					<div class="flex items-center text-ink-gray-7">
-						<Clock class="h-4 w-4 mr-2" />
+						<Clock class="h-4 w-4 mr-2 stroke-1.5" />
 						<span>
 							{{ formatTime(batch.data.start_time) }} -
 							{{ formatTime(batch.data.end_time) }}
@@ -102,8 +105,9 @@
 import { computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { BookOpen, Clock } from 'lucide-vue-next'
-import { formatTime, updateDocumentTitle } from '@/utils'
+import { formatTime } from '@/utils'
-import { Breadcrumbs, createResource } from 'frappe-ui'
+import { Breadcrumbs, createResource, usePageMeta } from 'frappe-ui'
+import { sessionStore } from '@/stores/session'
 import CourseCard from '@/components/CourseCard.vue'
 import BatchOverlay from '@/components/BatchOverlay.vue'
 import DateRange from '../components/Common/DateRange.vue'
@@ -112,6 +116,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 
 const user = inject('$user')
 const router = useRouter()
+const { brand } = sessionStore()
 
 const props = defineProps({
 	batchName: {
@@ -152,14 +157,12 @@ const breadcrumbs = computed(() => {
 	return items
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: batch.data?.title,
+		title: batch?.data?.title,
-		description: batch.data?.description,
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>
 <style>
 .batch-description p {

frontend/src/pages/BatchForm.vue

@@ -8,98 +8,109 @@
 				{{ __('Save') }}
 			</Button>
 		</header>
-		<div class="w-1/2 mx-auto py-5">
+		<div class="w-3/4 mx-auto py-5">
 			<div class="">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="space-y-4 mb-4">
+				<div class="space-y-10 mb-4">
-					<FormControl
+					<div class="space-y-4">
-						v-model="batch.title"
-						:label="__('Title')"
-						:required="true"
-						class="w-full"
-					/>
-					<div class="flex items-center space-x-5">
 						<FormControl
-							v-model="batch.published"
+							v-model="batch.title"
-							type="checkbox"
+							:label="__('Title')"
-							:label="__('Published')"
+							:required="true"
+							class="w-full"
 						/>
-						<FormControl
+						<MultiSelect
-							v-model="batch.allow_self_enrollment"
+							v-model="instructors"
-							type="checkbox"
+							doctype="User"
-							:label="__('Allow self enrollment')"
+							:label="__('Instructors')"
-						/>
+							:required="true"
-						<FormControl
+							:filters="{ ignore_user_type: 1 }"
-							v-model="batch.certification"
-							type="checkbox"
-							:label="__('Certification')"
 						/>
 					</div>
-				</div>
+
-			</div>
+					<div class="grid grid-cols-2 gap-10">
-			<div class="mb-4">
+						<div class="flex flex-col space-y-5">
-				<div class="text-xs text-ink-gray-5 mb-2">
+							<FormControl
-					{{ __('Meta Image') }}
+								v-model="batch.published"
-				</div>
+								type="checkbox"
-				<FileUploader
+								:label="__('Published')"
-					v-if="!batch.image"
+							/>
-					:fileTypes="['image/*']"
+							<FormControl
-					:validateFile="validateFile"
+								v-model="batch.allow_self_enrollment"
-					@success="(file) => saveImage(file)"
+								type="checkbox"
-				>
+								:label="__('Allow self enrollment')"
-					<template v-slot="{ file, progress, uploading, openFileSelector }">
+							/>
-						<div class="flex items-center">
+							<FormControl
-							<div class="border rounded-md w-fit py-5 px-20">
+								v-model="batch.certification"
-								<Image class="size-5 stroke-1 text-ink-gray-7" />
+								type="checkbox"
+								:label="__('Certification')"
+							/>
+						</div>
+
+						<div>
+							<div class="text-xs text-ink-gray-5 mb-2">
+								{{ __('Meta Image') }}
 							</div>
-							<div class="ml-4">
+							<FileUploader
-								<Button @click="openFileSelector">
+								v-if="!batch.image"
-									{{ __('Upload') }}
+								:fileTypes="['image/*']"
-								</Button>
+								:validateFile="validateFile"
-								<div class="mt-2 text-ink-gray-5 text-sm">
+								@success="(file) => saveImage(file)"
-									{{
+							>
-										__(
+								<template
-											'Appears when the batch URL is shared on any online platform'
+									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>
-					</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="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Date and Time') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10">
+				<div class="grid grid-cols-3 gap-10">
 					<div>
 						<FormControl
 							v-model="batch.start_date"
@@ -115,14 +126,6 @@
 							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>
 						<FormControl
@@ -140,14 +143,24 @@
 							:required="true"
 						/>
 					</div>
+					<div>
+						<FormControl
+							v-model="batch.timezone"
+							:label="__('Timezone')"
+							type="text"
+							:placeholder="__('Example: IST (+5:30)')"
+							class="mb-4"
+							:required="true"
+						/>
+					</div>
 				</div>
 			</div>
 
 			<div class="mb-10">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Settings') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10">
+				<div class="grid grid-cols-3 gap-10">
 					<div>
 						<FormControl
 							v-model="batch.seat_count"
@@ -162,11 +175,6 @@
 							type="date"
 							class="mb-4"
 						/>
-						<Link
-							doctype="Email Template"
-							:label="__('Email Template')"
-							v-model="batch.confirmation_email_template"
-						/>
 					</div>
 					<div>
 						<FormControl
@@ -191,24 +199,30 @@
 							v-model="batch.category"
 						/>
 					</div>
+					<div>
+						<Link
+							doctype="Email Template"
+							:label="__('Email Template')"
+							v-model="batch.confirmation_email_template"
+						/>
+					</div>
 				</div>
 			</div>
 
 			<div class="">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Payment') }}
 				</div>
-				<div>
+				<FormControl
-					<FormControl
+					v-model="batch.paid_batch"
-						v-model="batch.paid_batch"
+					type="checkbox"
-						type="checkbox"
+					:label="__('Paid Batch')"
-						:label="__('Paid Batch')"
+				/>
-					/>
+				<div class="grid grid-cols-3 gap-10 mt-4">
 					<FormControl
 						v-model="batch.amount"
 						:label="__('Amount')"
 						type="number"
-						class="my-4"
 					/>
 					<Link
 						doctype="Currency"
@@ -220,7 +234,7 @@
 			</div>
 
 			<div class="my-10">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Description') }}
 				</div>
 				<FormControl
@@ -264,16 +278,21 @@ import {
 	Button,
 	TextEditor,
 	createResource,
+	usePageMeta,
 } from 'frappe-ui'
-import Link from '@/components/Controls/Link.vue'
 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'
 
 const router = useRouter()
 const user = inject('$user')
+const { brand } = sessionStore()
+const { updateOnboardingStep } = useOnboarding('learning')
 
 const props = defineProps({
 	batchName: {
@@ -425,6 +444,12 @@ const createNewBatch = () => {
 		{},
 		{
 			onSuccess(data) {
+				if (user.data?.is_system_manager) {
+					updateOnboardingStep('create_first_batch', true, false, () => {
+						localStorage.setItem('firstBatch', data.name)
+					})
+				}
+
 				capture('batch_created')
 				router.push({
 					name: 'BatchDetail',
@@ -434,7 +459,7 @@ const createNewBatch = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				showToast('Message', err.messages?.[0] || err, 'alert-circle')
 			},
 		}
 	)
@@ -453,7 +478,7 @@ const editBatchDetails = () => {
 				})
 			},
 			onError(err) {
-				showToast('Error', err.messages?.[0] || err, 'x')
+				showToast('Message', err.messages?.[0] || err, 'alert-circle')
 			},
 		}
 	)
@@ -500,4 +525,11 @@ const breadcrumbs = computed(() => {
 	})
 	return crumbs
 })
+
+usePageMeta(() => {
+	return {
+		title: props.batchName == 'new' ? 'New Batch' : batchDetail.data?.title,
+		icon: brand.favicon,
+	}
+})
 </script>

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' },
@@ -22,7 +22,7 @@
 		<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-lg font-semibold">
+			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Batches') }}
 			</div>
 			<div
@@ -72,7 +72,7 @@
 		</div>
 		<div
 			v-else-if="!batches.list.loading"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
+			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">
@@ -104,14 +104,16 @@ import {
 	FormControl,
 	Select,
 	TabButtons,
+	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { BookOpen, Plus } from 'lucide-vue-next'
-import { updateDocumentTitle } from '@/utils'
+import { sessionStore } from '@/stores/session'
 import BatchCard from '@/components/BatchCard.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
+const { brand } = sessionStore()
 const start = ref(0)
 const pageLength = ref(20)
 const categories = ref([])
@@ -119,8 +121,10 @@ const currentCategory = ref(null)
 const title = ref('')
 const certification = ref(false)
 const filters = ref({})
-const currentTab = ref(user.data?.is_student ? 'All' : 'Upcoming')
+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
 
 onMounted(() => {
 	setFiltersFromQuery()
@@ -204,12 +208,12 @@ const updateTabFilter = () => {
 	if (!user.data) {
 		return
 	}
-	if (currentTab.value == 'Enrolled' && user.data?.is_student) {
+	if (currentTab.value == 'Enrolled' && is_student.value) {
 		filters.value['enrolled'] = 1
 		delete filters.value['start_date']
 		delete filters.value['published']
 		orderBy.value = 'start_date desc'
-	} else if (user.data?.is_student) {
+	} else if (is_student.value) {
 		delete filters.value['enrolled']
 	} else {
 		delete filters.value['start_date']
@@ -228,7 +232,7 @@ const updateTabFilter = () => {
 }
 
 const updateStudentFilter = () => {
-	if (!user.data || (user.data?.is_student && currentTab.value != 'Enrolled')) {
+	if (!user.data || (is_student.value && currentTab.value != 'Enrolled')) {
 		filters.value['start_date'] = ['>=', dayjs().format('YYYY-MM-DD')]
 		filters.value['published'] = 1
 	}
@@ -250,7 +254,12 @@ const setQueryParams = () => {
 		}
 	})
 
-	history.replaceState({}, '', `${location.pathname}?${queries.toString()}`)
+	let queryString = ''
+	if (queries.toString()) {
+		queryString = `?${queries.toString()}`
+	}
+
+	history.replaceState({}, '', `${location.pathname}${queryString}`)
 }
 
 const updateCategories = (data) => {
@@ -270,34 +279,33 @@ watch(currentTab, () => {
 	updateBatches()
 })
 
-const batchType = computed(() => {
-	let types = [
-		{ label: __(''), value: null },
-		{ label: __('Upcoming'), value: 'Upcoming' },
-		{ label: __('Archived'), value: 'Archived' },
-	]
-	if (user.data?.is_moderator) {
-		types.push({ label: __('Unpublished'), value: 'Unpublished' })
-	}
-	return types
-})
-
 const batchTabs = computed(() => {
 	let tabs = [
 		{
 			label: __('All'),
 		},
 	]
-	if (user.data?.is_student) {
+
-		tabs.push({ label: __('Enrolled') })
+	if (
-	} else {
+		user.data?.is_moderator ||
+		user.data?.is_instructor ||
+		user.data?.is_evaluator
+	) {
 		tabs.push({ label: __('Upcoming') })
 		tabs.push({ label: __('Archived') })
 		tabs.push({ label: __('Unpublished') })
+	} else if (user.data) {
+		tabs.push({ label: __('Enrolled') })
 	}
 	return tabs
 })
 
+const canCreateBatch = () => {
+	if (readOnlyMode) return false
+	if (user.data?.is_moderator || user.data?.is_instructor) return true
+	return false
+}
+
 const breadcrumbs = computed(() => [
 	{
 		label: __('Batches'),
@@ -305,12 +313,10 @@ const breadcrumbs = computed(() => [
 	},
 ])
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: 'Batches',
+		title: __('Batches'),
-		description: 'All upcoming batches.',
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Billing.vue

@@ -151,19 +151,20 @@
 </template>
 <script setup>
 import {
-	Input,
 	Button,
 	createResource,
 	FormControl,
 	Breadcrumbs,
-	Tooltip,
+	usePageMeta,
 } 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'
-import { showToast } from '@/utils/'
 
 const user = inject('$user')
+const { brand } = sessionStore()
 
 onMounted(() => {
 	const script = document.createElement('script')
@@ -245,12 +246,10 @@ const paymentLink = createResource({
 })
 
 const generatePaymentLink = () => {
-	console.log('called')
 	paymentLink.submit(
 		{},
 		{
 			validate() {
-				console.log('validation start')
 				if (!billingDetails.source) {
 					return __('Please let us know where you heard about us from.')
 				}
@@ -358,4 +357,11 @@ const redirectTo = computed(() => {
 		return `/lms/courses/${props.name}/certification`
 	}
 })
+
+usePageMeta(() => {
+	return {
+		title: __('Billing Details'),
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/CertifiedParticipants.vue

@@ -12,12 +12,13 @@
 			</Button>
 		</router-link>
 	</header>
-	<div class="p-5 lg:w-3/4 mx-auto">
+	<div
-		<div
+		v-if="participants.data?.length"
-			class="flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 justify-between mb-5"
+		class="mx-auto w-full max-w-4xl pt-6 pb-10"
-		>
+	>
-			<div class="text-lg text-ink-gray-9 font-semibold">
+		<div class="flex flex-col md:flex-row justify-between mb-4 px-3">
-				{{ __('All Certified Participants') }}
+			<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,57 +41,80 @@
 				</div>
 			</div>
 		</div>
-		<div v-if="participants.data?.length">
+		<div class="divide-y">
-			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+			<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
+					<div class="flex items-center w-full space-x-3">
-						class="flex items-center space-x-2 border rounded-md hover:bg-surface-menu-bar p-2 text-ink-gray-7"
-					>
 						<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="flex flex-col md:flex-row w-full">
-							<div class="font-medium">
+							<div class="flex-1">
-								{{ participant.full_name }}
+								<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="flex items-center space-x-3 md:space-x-24 text-sm md:text-base mt-1.5"
-								class="headline text-sm text-ink-gray-7"
 							>
-								{{ 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>
+			</template>
-			<div
-				v-if="!participants.list.loading && participants.hasNextPage"
-				class="flex justify-center mt-5"
-			>
-				<Button @click="participants.next()">
-					{{ __('Load More') }}
-				</Button>
-			</div>
 		</div>
 		<div
-			v-else-if="!participants.list.loading"
+			v-if="!participants.list.loading && participants.hasNextPage"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
+			class="flex justify-center mt-5"
 		>
-			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+			<Button @click="participants.next()">
-			<div class="text-lg font-medium mb-1">
+				{{ __('Load More') }}
-				{{ __('No participants found') }}
+			</Button>
-			</div>
+		</div>
-			<div class="leading-5 w-2/5 text-center">
+	</div>
-				{{ __('There are no participants matching this criteria.') }}
+	<div
-			</div>
+		v-else
+		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 certified members') }}
+		</div>
+		<div class="leading-5 w-2/5 text-center">
+			{{
+				__(
+					'No certified members found. Please check again later or get certified yourself.'
+				)
+			}}
 		</div>
 	</div>
 </template>
@@ -99,17 +123,22 @@ import {
 	Avatar,
 	Breadcrumbs,
 	Button,
+	call,
 	createListResource,
 	FormControl,
 	Select,
+	usePageMeta,
 } from 'frappe-ui'
-import { computed, onMounted, ref } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
-import { updateDocumentTitle } from '@/utils'
 import { BookOpen, GraduationCap } from 'lucide-vue-next'
+import { sessionStore } from '../stores/session'
 
 const currentCategory = ref('')
 const filters = ref({})
 const nameFilter = ref('')
+const { brand } = sessionStore()
+const memberCount = ref(0)
+const dayjs = inject('$dayjs')
 
 onMounted(() => {
 	updateParticipants()
@@ -123,6 +152,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',
@@ -158,18 +193,17 @@ const updateFilters = () => {
 
 const breadcrumbs = computed(() => [
 	{
-		label: __('Certified Participants'),
+		label: __('Certified Members'),
 		route: { name: 'CertifiedParticipants' },
 	},
 ])
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: 'Certified Participants',
+		title: __('Certified Members'),
-		description: 'All participants that have been certified.',
+		icon: brand.favicon,
 	}
 })
-updateDocumentTitle(pageMeta)
 </script>
 <style>
 .headline {

frontend/src/pages/CourseCertification.vue

@@ -36,14 +36,18 @@
 </template>
 <script setup>
 import { computed, inject, onMounted, ref } from 'vue'
-import { Breadcrumbs, call, createResource } from 'frappe-ui'
+import { Breadcrumbs, call, createResource, usePageMeta } from 'frappe-ui'
+import { useRouter } from 'vue-router'
+import { sessionStore } from '../stores/session'
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 
 const courseTitle = ref(null)
 const evaluator = ref(null)
+const { brand } = sessionStore()
 const courses = ref([])
 const user = inject('$user')
 const dayjs = inject('$dayjs')
+const router = useRouter()
 
 const props = defineProps({
 	courseName: {
@@ -53,6 +57,7 @@ const props = defineProps({
 })
 
 onMounted(() => {
+	fetchEnrollmentDetails()
 	fetchCourseDetails()
 })
 
@@ -66,10 +71,26 @@ const certificate = createResource({
 		},
 		fieldname: ['name', 'template', 'issue_date'],
 	},
-	auto: true,
 	cache: [user.data?.name, props.courseName],
 })
 
+const fetchEnrollmentDetails = () => {
+	call('frappe.client.get_value', {
+		doctype: 'LMS Enrollment',
+		filters: { member: user.data?.name, course: props.courseName },
+		fieldname: ['purchased_certificate'],
+	}).then((data) => {
+		if (data.purchased_certificate) {
+			certificate.reload()
+		} else {
+			router.push({
+				name: 'CourseDetail',
+				params: { courseName: props.courseName },
+			})
+		}
+	})
+}
+
 const fetchCourseDetails = () => {
 	call('frappe.client.get_value', {
 		doctype: 'LMS Course',
@@ -114,4 +135,11 @@ const breadcrumbs = computed(() => [
 		label: __('Certification'),
 	},
 ])
+
+usePageMeta(() => {
+	return {
+		title: courseTitle.value,
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/CourseDetail.vue

@@ -56,12 +56,12 @@
 							<CourseInstructors :instructors="course.data.instructors" />
 						</div>
 					</div>
-					<div class="flex mt-3 mb-4 w-fit">
+					<div v-if="course.data.tags" class="flex my-4 w-fit">
 						<Badge
 							theme="gray"
 							size="lg"
 							class="mr-2 text-ink-gray-9"
-							v-for="tag in course.data.tags"
+							v-for="tag in course.data.tags.split(', ')"
 						>
 							{{ tag }}
 						</Badge>
@@ -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"
+						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
@@ -92,16 +92,24 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Badge, Tooltip } from 'frappe-ui'
+import {
+	createResource,
+	Breadcrumbs,
+	Badge,
+	Tooltip,
+	usePageMeta,
+} from 'frappe-ui'
 import { computed } from 'vue'
 import { Users, Star } from 'lucide-vue-next'
+import { sessionStore } from '@/stores/session'
 import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { updateDocumentTitle } from '@/utils'
 import CourseInstructors from '@/components/CourseInstructors.vue'
 
+const { brand } = sessionStore()
+
 const props = defineProps({
 	courseName: {
 		type: String,
@@ -127,14 +135,12 @@ const breadcrumbs = computed(() => {
 	return items
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
 		title: course?.data?.title,
-		description: course?.data?.short_introduction,
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>
 <style>
 .avatar-group {

frontend/src/pages/CourseForm.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="">
+	<div class="h-full">
 		<div class="grid md:grid-cols-[70%,30%] h-full">
 			<div>
 				<header
@@ -8,12 +8,9 @@
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
 					<div class="flex items-center mt-3 md:mt-0">
 						<Button v-if="courseResource.data?.name" @click="trashCourse()">
-							<template #prefix>
+							<template #icon>
 								<Trash2 class="w-4 h-4 stroke-1.5" />
 							</template>
-							<span>
-								{{ __('Delete') }}
-							</span>
 						</Button>
 						<Button variant="solid" @click="submitCourse()" class="ml-2">
 							<span>
@@ -233,11 +230,11 @@
 					</div>
 				</div>
 			</div>
-			<div class="border-l pt-5">
+			<div class="border-l">
 				<CourseOutline
 					v-if="courseResource.data"
 					:courseName="courseResource.data.name"
-					:title="course.title"
+					:title="__('Course Outline')"
 					:allowEdit="true"
 				/>
 			</div>
@@ -252,6 +249,7 @@ import {
 	createResource,
 	FormControl,
 	FileUploader,
+	usePageMeta,
 } from 'frappe-ui'
 import {
 	inject,
@@ -263,21 +261,25 @@ import {
 	watch,
 	getCurrentInstance,
 } from 'vue'
-import { showToast, updateDocumentTitle } from '@/utils'
+import { showToast } from '@/utils'
-import Link from '@/components/Controls/Link.vue'
 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 Link from '@/components/Controls/Link.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
-import { capture } from '@/telemetry'
-import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
 const newTag = ref('')
+const { brand } = sessionStore()
 const router = useRouter()
 const instructors = ref([])
 const settingsStore = useSettings()
 const app = getCurrentInstance()
+const { updateOnboardingStep } = useOnboarding('learning')
 const { $dialog } = app.appContext.config.globalProperties
 
 const props = defineProps({
@@ -308,11 +310,7 @@ const course = reactive({
 })
 
 onMounted(() => {
-	if (
+	if (!user.data?.is_moderator && !user.data?.is_instructor) {
-		props.courseName == 'new' &&
-		!user.data?.is_moderator &&
-		!user.data?.is_instructor
-	) {
 		router.push({ name: 'Courses' })
 	}
 
@@ -398,7 +396,7 @@ const courseResource = createResource({
 			'paid_course',
 			'featured',
 			'enable_certification',
-			'paid_certifiate',
+			'paid_certificate',
 		]
 		for (let idx in checkboxes) {
 			let key = checkboxes[idx]
@@ -441,11 +439,14 @@ const submitCourse = () => {
 	} else {
 		courseCreationResource.submit(course, {
 			onSuccess(data) {
+				if (user.data?.is_system_manager) {
+					updateOnboardingStep('create_first_course', true, false, () => {
+						localStorage.setItem('firstCourse', data.name)
+					})
+				}
+
 				capture('course_created')
 				showToast('Success', 'Course created successfully', 'check')
-				/* if (!settingsStore.onboardingDetails.data?.is_onboarded) {
-					settingsStore.onboardingDetails.reload()
-				} */
 				router.push({
 					name: 'CourseForm',
 					params: { courseName: data.name },
@@ -571,12 +572,10 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: 'Create a Course',
+		title: courseResource.data?.title || __('New Course'),
-		description: 'Create or edit a course for your learning system.',
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Courses.vue

@@ -1,318 +1,348 @@
 <template>
-	<div v-if="courses.data">
+	<header
-		<header
+		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
-			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
+			v-if="canCreateCourse()"
+			:to="{
+				name: 'CourseForm',
+				params: { courseName: 'new' },
+			}"
 		>
-			<Breadcrumbs
+			<Button variant="solid">
-				class="h-7"
+				<template #prefix>
-				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
+					<Plus class="h-4 w-4 stroke-1.5" />
-			/>
+				</template>
-			<div class="flex space-x-2 justify-end">
+				{{ __('New') }}
-				<div class="w-40 md:w-44">
+			</Button>
-					<FormControl
+		</router-link>
-						v-if="categories.data?.length"
+	</header>
-						type="select"
+	<div class="p-5 pb-10">
-						v-model="currentCategory"
+		<div
-						:options="categories.data"
+			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
-						:placeholder="__('Category')"
+		>
-					/>
+			<div class="text-lg text-ink-gray-9 font-semibold">
-				</div>
+				{{ __('All Courses') }}
-				<div class="w-28 md:w-36">
+			</div>
+			<div
+				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" />
+				<FormControl
+					v-model="certification"
+					:label="__('Certification')"
+					type="checkbox"
+					@change="updateCourses()"
+				/>
+				<div class="grid grid-cols-2 gap-2">
 					<FormControl
+						v-model="title"
+						:placeholder="__('Search by Title')"
 						type="text"
-						placeholder="Search"
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
-						v-model="searchQuery"
+						@input="updateCourses()"
-						@input="courses.reload()"
+					/>
-					>
+					<div class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40">
-						<template #prefix>
+						<Select
-							<Search
+							v-if="categories.length"
-								class="w-4 h-4 stroke-1.5 text-ink-gray-5"
+							v-model="currentCategory"
-								name="search"
+							:options="categories"
-							/>
+							:placeholder="__('Category')"
-						</template>
+							@change="updateCourses()"
-					</FormControl>
+						/>
-				</div>
-				<router-link
-					v-if="user.data?.is_moderator || user.data?.is_instructor"
-					:to="{
-						name: 'CourseForm',
-						params: {
-							courseName: 'new',
-						},
-					}"
-				>
-					<Button variant="solid">
-						<template #prefix>
-							<Plus class="h-4 w-4" />
-						</template>
-						{{ __('New') }}
-					</Button>
-				</router-link>
-			</div>
-		</header>
-		<div class="">
-			<Tabs
-				v-if="hasCourses"
-				as="div"
-				v-model="tabIndex"
-				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
-				:tabs="makeTabs"
-			>
-				<template #tab="{ tab, selected }">
-					<div>
-						<button
-							class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
-							:class="{ 'text-ink-gray-9': selected }"
-						>
-							<component v-if="tab.icon" :is="tab.icon" class="h-5" />
-							{{ __(tab.label) }}
-							<Badge theme="gray">
-								{{ tab.count }}
-							</Badge>
-						</button>
 					</div>
-				</template>
-				<template #tab-panel="{ tab }">
-					<div
-						v-if="tab.courses && tab.courses.value.length"
-						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-7 my-5 mx-5"
-					>
-						<router-link
-							v-for="course in tab.courses.value"
-							:to="
-								course.membership && course.current_lesson
-									? {
-											name: 'Lesson',
-											params: {
-												courseName: course.name,
-												chapterNumber: course.current_lesson.split('-')[0],
-												lessonNumber: course.current_lesson.split('-')[1],
-											},
-									  }
-									: course.membership
-									? {
-											name: 'Lesson',
-											params: {
-												courseName: course.name,
-												chapterNumber: 1,
-												lessonNumber: 1,
-											},
-									  }
-									: {
-											name: 'CourseDetail',
-											params: { courseName: course.name },
-									  }
-							"
-						>
-							<CourseCard :course="course" />
-						</router-link>
-					</div>
-					<div v-else class="p-5 italic text-ink-gray-4">
-						{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
-					</div>
-				</template>
-			</Tabs>
-			<div
-				v-else-if="
-					!courses.loading &&
-					(user.data?.is_moderator || user.data?.is_instructor)
-				"
-				class="grid grid-cols-3 p-5"
-			>
-				<router-link
-					:to="{
-						name: 'CourseForm',
-						params: {
-							courseName: 'new',
-						},
-					}"
-				>
-					<div class="bg-surface-menu-bar py-32 px-5 rounded-md">
-						<div class="flex flex-col items-center text-center space-y-2">
-							<Plus
-								class="size-10 stroke-1 text-ink-gray-8 p-1 rounded-full border bg-surface-white"
-							/>
-							<div class="font-medium">
-								{{ __('Create a Course') }}
-							</div>
-							<span class="text-ink-gray-7 text-sm leading-4">
-								{{ __('You can add chapters and lessons to it.') }}
-							</span>
-						</div>
-					</div>
-				</router-link>
-			</div>
-			<div
-				v-else-if="!courses.loading && !hasCourses"
-				class="text-center p-5 text-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 courses found') }}
-				</div>
-				<div class="leading-5">
-					{{
-						__(
-							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
-						)
-					}}
 				</div>
 			</div>
 		</div>
+		<div
+			v-if="courses.data?.length"
+			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"
+				:to="{ name: 'CourseDetail', params: { courseName: course.name } }"
+			>
+				<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>
+		<div
+			v-if="!courses.list.loading && courses.hasNextPage"
+			class="flex justify-center mt-5"
+		>
+			<Button @click="courses.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
 	</div>
 </template>
-
 <script setup>
 import {
-	Badge,
 	Breadcrumbs,
 	Button,
 	call,
-	createResource,
+	createListResource,
 	FormControl,
-	Tabs,
+	Select,
+	TabButtons,
+	usePageMeta,
 } from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { BookOpen, Plus } from 'lucide-vue-next'
+import { sessionStore } from '@/stores/session'
+import { canCreateCourse } from '@/utils'
 import CourseCard from '@/components/CourseCard.vue'
-import { BookOpen, Plus, Search } from 'lucide-vue-next'
+import router from '../router'
-import { ref, computed, inject, onMounted, watch } from 'vue'
-import { updateDocumentTitle } from '@/utils'
-import { useRouter } from 'vue-router'
-import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
-const searchQuery = ref('')
+const dayjs = inject('$dayjs')
+const start = ref(0)
+const pageLength = ref(30)
+const categories = ref([])
 const currentCategory = ref(null)
-const hasCourses = ref(false)
+const title = ref('')
-const router = useRouter()
+const certification = ref(false)
-const settings = useSettings()
+const filters = ref({})
+const currentTab = ref('Live')
+const { brand } = sessionStore()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
-	checkLearningPath()
+	identifyUserPersona()
-	let queries = new URLSearchParams(location.search)
+	setFiltersFromQuery()
-	if (queries.has('category')) {
+	updateCourses()
-		currentCategory.value = queries.get('category')
+	categories.value = [
-	}
+		{
+			label: '',
+			value: null,
+		},
+	]
 })
 
-const checkLearningPath = () => {
+const setFiltersFromQuery = () => {
-	if (
+	let queries = new URLSearchParams(location.search)
-		settings.learningPaths.data &&
+	title.value = queries.get('title') || ''
-		(!user.data?.is_moderator || !user.data?.is_instructor)
+	currentCategory.value = queries.get('category') || null
-	) {
+	certification.value = queries.get('certification') || false
-		router.push({ name: 'Programs' })
+}
+
+const courses = createListResource({
+	doctype: 'LMS Course',
+	url: 'lms.lms.utils.get_courses',
+	cache: ['courses', user.data?.name],
+	pageLength: pageLength.value,
+	start: start.value,
+	onSuccess(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 courses = createResource({
+const isPersonaCaptured = async () => {
-	url: 'lms.lms.utils.get_courses',
+	let persona = await call('frappe.client.get_single_value', {
-	cache: ['courses', user.data?.email],
+		doctype: 'LMS Settings',
-	auto: true,
+		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
+
+		call('frappe.client.get_count', {
+			doctype: 'LMS Course',
+		}).then((data) => {
+			if (!data) {
+				router.push({
+					name: 'PersonaForm',
+				})
+			}
+		})
+	}
+}
+
+const updateCourses = () => {
+	updateFilters()
+	courses.update({
+		filters: filters.value,
+	})
+	courses.reload()
+}
+
+const updateFilters = () => {
+	updateCategoryFilter()
+	updateTitleFilter()
+	updateCertificationFilter()
+	updateTabFilter()
+	updateStudentFilter()
+	setQueryParams()
+}
+
+const updateCategoryFilter = () => {
+	if (currentCategory.value) {
+		filters.value['category'] = currentCategory.value
+	} else {
+		delete filters.value['category']
+	}
+}
+
+const updateTitleFilter = () => {
+	if (title.value) {
+		filters.value['title'] = ['like', `%${title.value}%`]
+	} else {
+		delete filters.value['title']
+	}
+}
+
+const updateCertificationFilter = () => {
+	if (certification.value) {
+		filters.value['certification'] = 1
+	} else {
+		delete filters.value['certification']
+	}
+}
+
+const updateTabFilter = () => {
+	delete filters.value['live']
+	delete filters.value['created']
+	delete filters.value['published_on']
+	delete filters.value['upcoming']
+
+	if (currentTab.value == 'Enrolled' && user.data?.is_student) {
+		filters.value['enrolled'] = 1
+		delete filters.value['published']
+	} else {
+		delete filters.value['published']
+		delete filters.value['enrolled']
+
+		if (currentTab.value == 'Live') {
+			filters.value['published'] = 1
+			filters.value['upcoming'] = 0
+			filters.value['live'] = 1
+		} else if (currentTab.value == 'Upcoming') {
+			filters.value['upcoming'] = 1
+			filters.value['published'] = 1
+		} else if (currentTab.value == 'New') {
+			filters.value['published'] = 1
+			filters.value['published_on'] = [
+				'>=',
+				dayjs().add(-3, 'month').format('YYYY-MM-DD'),
+			]
+		} else if (currentTab.value == 'Created') {
+			filters.value['created'] = 1
+		}
+	}
+}
+
+const updateStudentFilter = () => {
+	if (!user.data || (user.data?.is_student && currentTab.value != 'Enrolled')) {
+		filters.value['published'] = 1
+	}
+}
+
+const setQueryParams = () => {
+	let queries = new URLSearchParams(location.search)
+	let filterKeys = {
+		title: title.value,
+		category: currentCategory.value,
+		certification: certification.value,
+	}
+
+	Object.keys(filterKeys).forEach((key) => {
+		if (filterKeys[key]) {
+			queries.set(key, filterKeys[key])
+		} else {
+			queries.delete(key)
+		}
+	})
+
+	let queryString = ''
+	if (queries.toString()) {
+		queryString = `?${queries.toString()}`
+	}
+
+	history.replaceState({}, '', `${location.pathname}${queryString}`)
+}
+
+const updateCategories = (data) => {
+	data.forEach((course) => {
+		if (
+			course.category &&
+			!categories.value.find((category) => category.value === course.category)
+		)
+			categories.value.push({
+				label: course.category,
+				value: course.category,
+			})
+	})
+}
+
+watch(currentTab, () => {
+	updateCourses()
 })
 
-const tabIndex = ref(0)
+const courseTabs = computed(() => {
-let tabs
+	let tabs = [
-
+		{
-const makeTabs = computed(() => {
+			label: __('Live'),
-	tabs = []
+		},
-	addToTabs('Live')
+		{
-	addToTabs('New')
+			label: __('New'),
-	addToTabs('Upcoming')
+		},
-
+		{
-	if (user.data) {
+			label: __('Upcoming'),
-		addToTabs('Enrolled')
+		},
-
+	]
-		if (
+	if (
-			user.data.is_moderator ||
+		user.data?.is_moderator ||
-			user.data.is_instructor ||
+		user.data?.is_instructor ||
-			courses.data?.created?.length
+		user.data?.is_evaluator
-		) {
+	) {
-			addToTabs('Created')
+		tabs.push({ label: __('Created') })
-		}
+	} else if (user.data) {
-
+		tabs.push({ label: __('Enrolled') })
-		if (user.data.is_moderator) {
-			addToTabs('Under Review')
-		}
 	}
 	return tabs
 })
 
-const addToTabs = (label) => {
+const breadcrumbs = computed(() => [
-	let courses = getCourses(label.toLowerCase().split(' ').join('_'))
+	{
-	tabs.push({
+		label: __('Courses'),
-		label,
+		route: { name: 'Courses' },
-		courses: computed(() => courses),
-		count: computed(() => courses.length),
-	})
-}
-
-const getCourses = (type) => {
-	let courseList = courses.data[type]
-	if (searchQuery.value) {
-		let query = searchQuery.value.toLowerCase()
-		courseList = courseList.filter(
-			(course) =>
-				course.title.toLowerCase().includes(query) ||
-				course.short_introduction.toLowerCase().includes(query) ||
-				course.tags.filter((tag) => tag.toLowerCase().includes(query)).length
-		)
-	}
-	if (currentCategory.value && currentCategory.value != '') {
-		courseList = courseList.filter(
-			(course) => course.category == currentCategory.value
-		)
-	}
-	return courseList
-}
-
-const categories = createResource({
-	url: 'lms.lms.api.get_categories',
-	makeParams() {
-		return {
-			doctype: 'LMS Course',
-			filters: {
-				published: 1,
-			},
-		}
 	},
-	cache: ['courseCategories'],
+])
-	auto: true,
-	transform(data) {
-		data.unshift({
-			label: '',
-			value: null,
-		})
-	},
-})
 
-watch(courses, () => {
+usePageMeta(() => {
-	if (courses.data) {
-		Object.keys(courses.data).forEach((section) => {
-			if (courses.data[section].length) {
-				hasCourses.value = true
-			}
-		})
-	}
-})
-
-watch(
-	() => currentCategory.value,
-	() => {
-		let queries = new URLSearchParams(location.search)
-		if (currentCategory.value) {
-			queries.set('category', currentCategory.value)
-		} else {
-			queries.delete('category')
-		}
-		history.pushState(null, '', `${location.pathname}?${queries.toString()}`)
-	}
-)
-
-const pageMeta = computed(() => {
 	return {
-		title: 'Courses',
+		title: __('Courses'),
-		description: 'All Courses divided by categories',
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Home.vue

@@ -1,39 +0,0 @@
-<template>
-	<div class="max-w-3xl py-12 mx-auto">
-		<Button
-			icon-left="code"
-			@click="$resources.ping.fetch"
-			:loading="$resources.ping.loading"
-		>
-			Click to send 'ping' request
-		</Button>
-		<div>
-			{{ $resources.ping.data }}
-		</div>
-		<pre>{{ $resources.ping }}</pre>
-
-		<Button @click="showDialog = true">Open Dialog</Button>
-		<Dialog title="Title" v-model="showDialog"> Dialog content </Dialog>
-	</div>
-</template>
-
-<script>
-import { Dialog } from 'frappe-ui'
-
-export default {
-	name: 'Home',
-	data() {
-		return {
-			showDialog: false,
-		}
-	},
-	resources: {
-		ping: {
-			url: 'ping',
-		},
-	},
-	components: {
-		Dialog,
-	},
-}
-</script>

frontend/src/pages/JobDetail.vue

@@ -16,21 +16,30 @@
 					},
 				]"
 			/>
-			<div v-if="user.data?.name" class="flex">
+			<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 },
 					}"
 				>
-					<Button class="mr-2">
+					<Button>
 						<template #prefix>
 							<Pencil class="h-4 w-4 stroke-1.5" />
 						</template>
 						{{ __('Edit') }}
 					</Button>
 				</router-link>
+				<Button @click="redirectToWebsite(job.data?.company_website)">
+					<template #prefix>
+						<SquareArrowOutUpRight class="h-4 w-4 stroke-1.5" />
+					</template>
+					{{ __('Visit Website') }}
+				</Button>
 				<Button
 					v-if="!jobApplication.data?.length"
 					variant="solid"
@@ -41,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') }}
@@ -50,16 +65,17 @@
 				</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">
 						<img
 							:src="job.data.company_logo"
-							class="w-16 h-16 rounded-lg object-contain 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 mb-4">
+						<div class="text-2xl text-ink-gray-9 font-semibold">
 							{{ job.data.job_title }}
 						</div>
 					</div>
@@ -68,8 +84,8 @@
 							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" />
+								<Building2 class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<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>
@@ -79,20 +95,20 @@
 								</div>
 							</div>
 							<div class="flex items-center space-x-4">
-								<MapPin class="size-4 text-ink-red-3" />
+								<MapPin class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
+									<span class="text-xs text-ink-gray-5 font-medium uppercase">
 										{{ __('Location') }}
 									</span>
 									<span class="text-sm font-semibold">
-										{{ job.data.location }}
+										{{ job.data.location }}, {{ job.data.country }}
 									</span>
 								</div>
 							</div>
 							<div class="flex items-center space-x-4">
-								<ClipboardType class="h-4 w-4 text-yellow-500" />
+								<ClipboardType class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
+									<span class="text-xs text-ink-gray-5 font-medium uppercase">
 										{{ __('Category') }}
 									</span>
 									<span class="text-sm font-semibold">
@@ -101,9 +117,9 @@
 								</div>
 							</div>
 							<div class="flex items-center space-x-4">
-								<CalendarDays class="h-4 w-4 text-ink-blue-2" />
+								<CalendarDays class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
+									<span class="text-xs text-ink-gray-5 font-medium uppercase">
 										{{ __('Posted on') }}
 									</span>
 									<span class="text-sm font-semibold">
@@ -115,9 +131,9 @@
 								v-if="applicationCount.data"
 								class="flex items-center space-x-4"
 							>
-								<SquareUserRound class="h-4 w-4 text-purple-500" />
+								<SquareUserRound class="size-4 stroke-1.5 text-ink-gray-7" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
-									<span class="text-xs font-medium uppercase">
+									<span class="text-xs text-ink-gray-5 font-medium uppercase">
 										{{ __('Applications Received') }}
 									</span>
 									<span class="text-sm font-semibold">
@@ -142,23 +158,33 @@
 	</div>
 </template>
 <script setup>
-import { Button, Breadcrumbs, createResource } from 'frappe-ui'
+import {
-import { inject, ref, computed } from 'vue'
+	Badge,
-import { updateDocumentTitle } from '@/utils'
+	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,
 } 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: {
@@ -215,12 +241,14 @@ const redirectToLogin = (job) => {
 	window.location.href = `/login?redirect-to=/job-openings/${job}`
 }
 
-const pageMeta = computed(() => {
+const redirectToWebsite = (url) => {
+	window.open(url, '_blank')
+}
+
+usePageMeta(() => {
 	return {
 		title: job.data?.job_title,
-		description: job.data?.description,
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/JobForm.vue

@@ -13,17 +13,22 @@
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Job Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-4">
+				<div class="grid grid-cols-2 gap-5">
-					<div>
+					<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')"
+							:label="__('City')"
+							:required="true"
+						/>
+						<Link
+							v-model="job.country"
+							doctype="Country"
+							:label="__('Country')"
 							:required="true"
 						/>
 					</div>
@@ -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-4">
 				<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>
@@ -139,14 +144,17 @@ import {
 	Button,
 	TextEditor,
 	FileUploader,
+	usePageMeta,
 } 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'
 
 const user = inject('$user')
 const router = useRouter()
+const { brand } = sessionStore()
 
 const props = defineProps({
 	jobName: {
@@ -214,6 +222,7 @@ const imageResource = createResource({
 const job = reactive({
 	job_title: '',
 	location: '',
+	country: '',
 	type: 'Full Time',
 	status: 'Open',
 	company_name: '',
@@ -314,9 +323,16 @@ const breadcrumbs = computed(() => {
 		},
 		{
 			label: props.jobName == 'new' ? 'New Job' : 'Edit Job',
-			route: { name: 'JobCreation' },
+			route: { name: 'JobForm' },
 		},
 	]
 	return crumbs
 })
+
+usePageMeta(() => {
+	return {
+		title: props.jobName == 'new' ? 'New Job' : jobDetail.data?.title,
+		icon: brand.favicon,
+	}
+})
 </script>

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,43 +25,48 @@
 			</router-link>
 		</header>
 		<div>
-			<div class="lg:w-3/4 mx-auto p-5">
+			<div
+				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="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
+					v-if="jobCount"
+					class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0"
 				>
-					<div class="text-xl text-ink-gray-9 font-semibold">
+					{{ __('{0} Open Jobs').format(jobCount) }}
-						{{ __('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>
-
+				<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
-				<div
+					<FormControl
-					v-if="jobs.data?.length"
+						type="text"
-					class="grid grid-cols-1 lg:grid-cols-2 gap-5"
+						: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="{
@@ -73,25 +78,49 @@
 						<JobCard :job="job" />
 					</router-link>
 				</div>
-				<div v-else class="text-ink-gray-7 italic p-5 w-fit mx-auto">
+			</div>
-					{{ __('No jobs posted') }}
+			<div
+				v-else
+				class="flex flex-col items-center justify-center text-sm text-ink-gray-5 mt-56"
+			>
+				<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.') }}
+				</div>
+				<div class="leading-5 w-1/5 text-center">
+					{{ __('Post a new job or check again later.') }}
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { Button, Breadcrumbs, createResource, FormControl } from 'frappe-ui'
+import {
-import { Plus, Search } from 'lucide-vue-next'
+	Button,
-import { inject, computed, ref, onMounted } from 'vue'
+	Breadcrumbs,
+	call,
+	createResource,
+	FormControl,
+	usePageMeta,
+} from 'frappe-ui'
+import { Laptop, Plus, Search } from 'lucide-vue-next'
+import { sessionStore } from '../stores/session'
+import { inject, computed, ref, onMounted, watch } from 'vue'
 import JobCard from '@/components/JobCard.vue'
-import { updateDocumentTitle } from '@/utils'
+import Link from '@/components/Controls/Link.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)
@@ -99,6 +128,7 @@ onMounted(() => {
 		jobType.value = queries.get('type')
 	}
 	updateJobs()
+	getJobCount()
 })
 
 const jobs = createResource({
@@ -136,8 +166,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 [
 		'',
@@ -147,12 +199,11 @@ const jobTypes = computed(() => {
 		{ label: __('Freelance'), value: 'Freelance' },
 	]
 })
-const pageMeta = computed(() => {
+
+usePageMeta(() => {
 	return {
-		title: 'Jobs',
+		title: __('Jobs'),
-		description: 'An open job board for the community',
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

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
+			<div v-if="lesson.data.no_preview" class="border-r">
-				v-if="lesson.data.no_preview"
+				<div class="shadow rounded-md w-3/4 mt-10 mx-auto text-center p-4">
-				class="border-r text-center pt-10 px-5 md:px-0 pb-10"
+					<div class="flex items-center justify-center mt-4 space-x-2">
-			>
+						<LockKeyholeIcon class="size-4 stroke-2 text-ink-gray-5" />
-				<p class="mb-4">
+						<div class="text-lg font-semibold text-ink-gray-7">
-					{{
+							{{ __('This lesson is locked') }}
-						__(
+						</div>
-							'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>
-					<div class="flex items-center mt-2 md:mt-0">
+					<div class="mt-1 mb-4 text-ink-gray-7">
-						<router-link
+						{{
-							v-if="lesson.data.prev"
+							__(
-							:to="{
+								'This lesson is not available for preview. Please enroll in the course to access it.'
-								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>
-				</div>
+					<Button
-
+						v-if="user.data && !lesson.data.disable_self_learning"
-				<div class="flex items-center mt-2">
+						@click="enrollStudent()"
-					<span
+						variant="solid"
-						class="h-6 mr-1"
-						:class="{
-							'avatar-group overlap': lesson.data.instructors?.length > 1,
-						}"
 					>
-						<UserAvatar
+						{{ __('Start Learning') }}
-							v-for="instructor in lesson.data.instructors"
+					</Button>
-							:user="instructor"
+					<Badge
-						/>
+						theme="blue"
-					</span>
+						size="lg"
-					<CourseInstructors
+						v-else-if="lesson.data.disable_self_learning"
-						v-if="lesson.data?.instructors"
+						class="mt-2"
-						:instructors="lesson.data.instructors"
+					>
-					/>
+						{{ __('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="
+					class="border-r container pt-5 pb-10 px-5 h-full"
-						lesson.data.instructor_content &&
+					:class="{
-						JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
+						'w-full md:w-3/4 mx-auto border-none !pt-10': zenModeEnabled,
-						allowInstructorContent()
+					}"
-					"
-					class="bg-surface-gray-2 p-3 rounded-md mt-6"
 				>
-					<div class="text-ink-gray-5 font-medium">
+					<div
-						{{ __('Instructor Notes') }}
+						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"
+						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"
+						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>
+					>
-				</div>
+						<LessonContent :content="lesson.data.instructor_notes" />
-				<div
+					</div>
-					v-else-if="lesson.data.instructor_notes"
+					<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"
+						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"
-					<LessonContent :content="lesson.data.instructor_notes" />
+					>
-				</div>
+						<div id="editor"></div>
-				<div
+					</div>
-					v-if="lesson.data.content"
+					<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-5"
+						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"
-					<div id="editor"></div>
+					>
-				</div>
+						<LessonContent
-				<div
+							v-if="lesson.data?.body"
-					v-else
+							:content="lesson.data.body"
-					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"
+							:youtube="lesson.data.youtube"
-				>
+							:quizId="lesson.data.quiz_id"
-					<LessonContent
+						/>
-						v-if="lesson.data?.body"
+					</div>
-						:content="lesson.data.body"
+					<div class="mt-20" ref="discussionsContainer">
-						:youtube="lesson.data.youtube"
+						<Discussions
-						:quizId="lesson.data.quiz_id"
+							v-if="allowDiscussions"
-					/>
+							:title="'Questions'"
-				</div>
+							:doctype="'Course Lesson'"
-				<div class="mt-20">
+							:docname="lesson.data.name"
-					<Discussions
+							:key="lesson.data.name"
-						v-if="allowDiscussions"
+						/>
-						:title="'Questions'"
+					</div>
-						:doctype="'Course Lesson'"
-						:docname="lesson.data.name"
-						:key="lesson.data.name"
-					/>
 				</div>
 			</div>
 			<div class="sticky top-10">
@@ -193,14 +264,38 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button } from 'frappe-ui'
+import {
-import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
+	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, updateDocumentTitle } from '../utils'
+import { getEditorTools, enablePlyr } from '@/utils'
+import { sessionStore } from '@/stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
@@ -214,7 +309,12 @@ 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
 
 const props = defineProps({
@@ -234,11 +334,28 @@ const props = defineProps({
 
 onMounted(() => {
 	startTimer()
+	enablePlyr()
+	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,
@@ -247,36 +364,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))
@@ -346,10 +464,18 @@ watch(
 			clearInterval(timerInterval)
 			timer.value = 0
 			startTimer()
+			enablePlyr()
 		}
 	}
 )
 
+watch(
+	() => lesson.data,
+	(data) => {
+		setupLesson(data)
+	}
+)
+
 const startTimer = () => {
 	timerInterval = setInterval(() => {
 		timer.value++
@@ -365,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)
@@ -380,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
@@ -415,18 +542,58 @@ 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}`
 }
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: lesson.data?.title,
+		title: lesson?.data?.title,
-		description: lesson.data?.course,
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>
 <style>
 .avatar-group {
@@ -587,12 +754,33 @@ updateDocumentTitle(pageMeta)
 	line-height: 1.7;
 }
 
-iframe {
-	border-top: 3px solid theme('colors.gray.700');
-	border-bottom: 3px solid theme('colors.gray.700');
-}
-
 .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

@@ -78,7 +78,13 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, Button, createResource, FormControl } from 'frappe-ui'
+import {
+	Breadcrumbs,
+	Button,
+	createResource,
+	FormControl,
+	usePageMeta,
+} from 'frappe-ui'
 import {
 	computed,
 	reactive,
@@ -87,18 +93,20 @@ import {
 	ref,
 	onBeforeUnmount,
 } from 'vue'
+import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
-import { updateDocumentTitle, createToast, getEditorTools } from '@/utils'
+import { createToast, getEditorTools, enablePlyr } from '@/utils'
 import { capture } from '@/telemetry'
-import { useSettings } from '@/stores/settings'
+import { useOnboarding } from 'frappe-ui/frappe'
 
+const { brand } = sessionStore()
 const editor = ref(null)
 const instructorEditor = ref(null)
 const user = inject('$user')
 const openInstructorEditor = ref(false)
-const settingsStore = useSettings()
+const { updateOnboardingStep } = useOnboarding('learning')
 let autoSaveInterval
 let showSuccessMessage = false
 
@@ -125,6 +133,7 @@ onMounted(() => {
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
 	window.addEventListener('keydown', keyboardShortcut)
+	enablePlyr()
 })
 
 const renderEditor = (holder) => {
@@ -133,6 +142,9 @@ const renderEditor = (holder) => {
 		tools: getEditorTools(true),
 		autofocus: true,
 		defaultBlock: 'markdown',
+		onChange: async (api, event) => {
+			enablePlyr()
+		},
 	})
 }
 
@@ -394,11 +406,11 @@ const createNewLesson = () => {
 					{ lesson: data.name },
 					{
 						onSuccess() {
+							if (user.data?.is_system_manager)
+								updateOnboardingStep('create_first_lesson')
+
 							capture('lesson_created')
 							showToast('Success', 'Lesson created successfully', 'check')
-							/* if (!settingsStore.onboardingDetails.data?.is_onboarded) {
-								settingsStore.onboardingDetails.reload()
-							} */
 							lessonDetails.reload()
 						},
 					}
@@ -494,14 +506,14 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: 'Lesson Editor',
+		title: lessonDetails?.data?.lesson
-		description: 'Create and edit lessons for your course',
+			? lessonDetails.data.lesson.title
+			: 'New Lesson',
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>
 <style>
 .embed-tool__caption,
@@ -616,11 +628,44 @@ updateDocumentTitle(pageMeta)
 }
 
 iframe {
-	border-top: 3px solid theme('colors.gray.700');
+	border: none !important;
-	border-bottom: 3px solid theme('colors.gray.700');
 }
 
 .tc-table {
 	border-left: 1px solid #e8e8eb;
 }
+
+.ce-toolbox__button[data-tool='markdown'] {
+	display: none !important;
+}
+
+.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/Notifications.vue

@@ -65,12 +65,14 @@ import {
 	TabButtons,
 	Button,
 	Tooltip,
+	usePageMeta,
 } from 'frappe-ui'
+import { sessionStore } from '../stores/session'
 import { computed, inject, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { X } from 'lucide-vue-next'
-import { updateDocumentTitle } from '@/utils'
 
+const { brand } = sessionStore()
 const user = inject('$user')
 const socket = inject('$socket')
 const activeTab = ref('Unread')
@@ -145,14 +147,12 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
 		title: 'Notifications',
-		description: 'All your notifications in one place.',
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>
 <style>
 .notification strong {

frontend/src/pages/PersonaForm.vue

@@ -0,0 +1,136 @@
+<template>
+	<div class="flex h-screen overflow-hidden sm:bg-gray-50">
+		<div class="relative h-full z-10 mx-auto pt-8 sm:w-max sm:pt-32">
+			<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 main 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">
+						{{ __('How many students are you planning to teach?') }}
+					</div>
+					<FormControl
+						v-model="persona.noOfStudents"
+						type="select"
+						:options="noOfStudentsOptions"
+					/>
+				</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({
+	noOfStudents: 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 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()"
 				>
@@ -86,23 +90,30 @@
 	/>
 </template>
 <script setup>
-import { Breadcrumbs, createResource, Button, TabButtons } from 'frappe-ui'
+import {
+	Breadcrumbs,
+	createResource,
+	Button,
+	TabButtons,
+	usePageMeta,
+} from 'frappe-ui'
 import { computed, inject, watch, ref, onMounted, watchEffect } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { Edit } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRoute, useRouter } from 'vue-router'
 import NoPermission from '@/components/NoPermission.vue'
-import { convertToTitleCase, updateDocumentTitle } from '@/utils'
+import { convertToTitleCase } from '@/utils'
 import EditProfile from '@/components/Modals/EditProfile.vue'
 import EditCoverImage from '@/components/Modals/EditCoverImage.vue'
 
-const { user } = sessionStore()
+const { user, brand } = sessionStore()
 const $user = inject('$user')
 const route = useRoute()
 const router = useRouter()
 const activeTab = ref('')
 const showProfileModal = ref(false)
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	username: {
@@ -215,12 +226,10 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
 		title: profile.data?.full_name,
-		description: profile.data?.headline,
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/ProfileEvaluator.vue

@@ -4,134 +4,150 @@
 			{{ __('My availability') }}
 		</h2>
 
-		<div class="">
+		<div
-			<div
+			v-if="readOnlyMode"
-				class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
+			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"
-			>
+		>
-				<div>
+			<CircleAlert class="size-4 stroke-1.5" />
-					{{ __('Day') }}
+			<span>
-				</div>
+				{{
-				<div>
+					__(
-					{{ __('Start Time') }}
+						'You cannot change the availability when the site is being updated.'
-				</div>
+					)
-				<div>
+				}}
-					{{ __('End Time') }}
+			</span>
-				</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 class="my-10">
+		<div v-else>
-			<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
+			<div>
-				{{ __('I am unavailable') }}
+				<div
-			</h2>
+					class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
-			<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+				>
-				<FormControl
+					<div>
-					type="date"
+						{{ __('Day') }}
-					:label="__('From')"
+					</div>
-					v-model="from"
+					<div>
-					@blur="
+						{{ __('Start Time') }}
-						() => {
+					</div>
-							updateUnavailability.submit({
+					<div>
-								field: 'unavailable_from',
+						{{ __('End Time') }}
-								value: from,
+					</div>
-							})
+				</div>
-						}
+
-					"
+				<div
-				/>
+					v-if="evaluator.data"
-				<FormControl
+					v-for="slot in evaluator.data.slots.schedule"
-					type="date"
+					class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
-					:label="__('To')"
+				>
-					v-model="to"
+					<FormControl
-					@blur="
+						type="select"
-						() => {
+						:options="days"
-							updateUnavailability.submit({
+						v-model="slot.day"
-								field: 'unavailable_to',
+						@focusout.stop="update(slot.name, 'day', slot.day)"
-								value: to,
+					/>
-							})
+					<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 class="my-10">
-		<div>
+				<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
-			<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
+					{{ __('I am unavailable') }}
-				{{ __('My calendar') }}
+				</h2>
-			</h2>
+				<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-			<div
+					<FormControl
-				v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
+						type="date"
-				class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
+						:label="__('From')"
-			>
+						v-model="from"
-				<Check class="h-4 w-4 stroke-1.5 mr-2" />
+						@blur="
-				{{ __('Your calendar is set.') }}
+							() => {
+								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 } 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 { Plus, X, Check, CircleAlert } from 'lucide-vue-next'
 
 const user = inject('$user')
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	profile: {

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
@@ -37,11 +47,13 @@
 import { FormControl, createResource } from 'frappe-ui'
 import { ref } from 'vue'
 import { showToast, 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: {
@@ -72,7 +84,7 @@ const roles = createResource({
 })
 
 const updateRole = createResource({
-	url: 'lms.overrides.user.save_role',
+	url: 'lms.lms.api.save_role',
 	makeParams(values) {
 		return {
 			user: props.profile.data?.name,

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
@@ -186,14 +186,17 @@ import {
 	ListHeader,
 	ListHeaderItem,
 	ListSelectBanner,
+	usePageMeta,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import Link from '@/components/Controls/Link.vue'
 import { showToast } from '@/utils/'
-import Draggable from 'vuedraggable'
 import { useRouter } from 'vue-router'
+import { sessionStore } from '../stores/session'
+import Draggable from 'vuedraggable'
+import Link from '@/components/Controls/Link.vue'
 
+const { brand } = sessionStore()
 const showDialog = ref(false)
 const currentForm = ref(null)
 const course = ref(null)
@@ -364,4 +367,11 @@ const breadbrumbs = computed(() => {
 		},
 	]
 })
+
+usePageMeta(() => {
+	return {
+		title: program.doc?.title,
+		icon: brand.favicon,
+	}
+})
 </script>

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"
 		>
@@ -17,7 +17,7 @@
 	<div v-if="programs.data?.length" class="pt-5 px-5">
 		<div v-for="program in programs.data" class="mb-10">
 			<div class="flex items-center justify-between">
-				<div class="text-xl font-semibold">
+				<div class="text-xl text-ink-gray-9 font-semibold">
 					{{ program.name }}
 				</div>
 				<div class="flex items-center space-x-2">
@@ -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>
@@ -126,19 +126,23 @@ import {
 	createResource,
 	Dialog,
 	FormControl,
+	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref } from 'vue'
 import { BookOpen, Edit, Plus, LockKeyhole } from 'lucide-vue-next'
 import CourseCard from '@/components/CourseCard.vue'
 import { useRouter } from 'vue-router'
+import { sessionStore } from '../stores/session'
 import { showToast } from '@/utils'
 import { useSettings } from '@/stores/settings'
 
+const { brand } = sessionStore()
 const user = inject('$user')
 const showDialog = ref(false)
 const router = useRouter()
 const title = ref('')
 const settings = useSettings()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	if (
@@ -205,9 +209,22 @@ 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'),
 	},
 ])
+
+usePageMeta(() => {
+	return {
+		title: __('Programs'),
+		icon: brand.favicon,
+	}
+})
 </script>

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>
@@ -197,6 +197,7 @@ import {
 	ListRowItem,
 	ListSelectBanner,
 	Button,
+	usePageMeta,
 } from 'frappe-ui'
 import {
 	computed,
@@ -207,11 +208,13 @@ import {
 	onBeforeUnmount,
 	watch,
 } from 'vue'
+import { sessionStore } from '../stores/session'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import Question from '@/components/Modals/Question.vue'
 import { showToast, updateDocumentTitle } from '@/utils'
 import { useRouter } from 'vue-router'
+import Question from '@/components/Modals/Question.vue'
 
+const { brand } = sessionStore()
 const showQuestionModal = ref(false)
 const currentQuestion = reactive({
 	question: '',
@@ -220,6 +223,7 @@ const currentQuestion = reactive({
 })
 const user = inject('$user')
 const router = useRouter()
+const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
 	quizID: {
@@ -441,11 +445,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 } },
@@ -453,12 +453,10 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
 		title: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
-		description: __('Form to create and edit quizzes'),
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/QuizPage.vue

@@ -1,27 +1,37 @@
 <template>
 	<header
+		v-if="!fromLesson"
 		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" />
 	</header>
-	<div class="md:w-7/12 md:mx-auto mx-4 py-10">
+	<div
+		class="md:w-7/12 md:mx-auto mx-4 py-10"
+		:class="{ 'pt-4 md:w-full': fromLesson }"
+	>
 		<Quiz :quizName="quizID" />
 	</div>
 </template>
 <script setup>
 import Quiz from '@/components/Quiz.vue'
-import { createResource, Breadcrumbs } from 'frappe-ui'
+import { createResource, Breadcrumbs, usePageMeta } from 'frappe-ui'
-import { computed, inject, onMounted } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { updateDocumentTitle } from '@/utils'
+import { sessionStore } from '../stores/session'
 
+const { brand } = sessionStore()
 const user = inject('$user')
 const router = useRouter()
+const fromLesson = ref(false)
 
 onMounted(() => {
 	if (!user.data) {
 		router.push({ name: 'Courses' })
 	}
+
+	if (new URLSearchParams(window.location.search).get('fromLesson')) {
+		fromLesson.value = true
+	}
 })
 
 const props = defineProps({
@@ -47,12 +57,10 @@ const breadcrumbs = computed(() => {
 	return [{ label: __('Quiz Submission') }, { label: title.data?.title }]
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: title.data?.title,
+		title: `${title.data?.title}`,
-		description: __('Quiz Submission'),
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/QuizSubmission.vue

@@ -79,11 +79,14 @@ import {
 	FormControl,
 	Button,
 	Badge,
+	usePageMeta,
 } 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()
 const router = useRouter()
 const user = inject('$user')
 
@@ -149,4 +152,11 @@ const saveSubmission = () => {
 		}
 	)
 }
+
+usePageMeta(() => {
+	return {
+		title: `${submisisonDetails.doc.quiz_title}`,
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/QuizSubmissionList.vue

@@ -40,6 +40,18 @@
 			</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>
 </template>
 <script setup>
 import {
@@ -51,10 +63,14 @@ import {
 	ListRows,
 	ListHeader,
 	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'
 
+const { brand } = sessionStore()
 const router = useRouter()
 const user = inject('$user')
 
@@ -105,4 +121,11 @@ const quizColumns = computed(() => {
 const breadcrumbs = computed(() => {
 	return [{ label: __('Quiz Submissions') }]
 })
+
+usePageMeta(() => {
+	return {
+		title: __('Quiz Submissions'),
+		icon: brand.favicon,
+	}
+})
 </script>

frontend/src/pages/Quizzes.vue

@@ -4,6 +4,7 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
+			v-if="!readOnlyMode"
 			:to="{
 				name: 'QuizForm',
 				params: {
@@ -79,14 +80,17 @@ import {
 	ListRow,
 	ListHeader,
 	ListHeaderItem,
+	usePageMeta,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { computed, inject, onMounted } from 'vue'
 import { BookOpen, Plus } from 'lucide-vue-next'
-import { updateDocumentTitle } from '@/utils'
+import { sessionStore } from '@/stores/session'
 
+const { brand } = sessionStore()
 const user = inject('$user')
 const router = useRouter()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
@@ -143,12 +147,10 @@ const breadcrumbs = computed(() => {
 	]
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
 		title: __('Quizzes'),
-		description: __('List of quizzes'),
+		icon: brand.favicon,
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/SCORMChapter.vue

@@ -39,11 +39,13 @@ import {
 	createDocumentResource,
 	createListResource,
 	createResource,
+	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onBeforeMount, ref } from 'vue'
 import { useSidebar } from '@/stores/sidebar'
-import { updateDocumentTitle } from '@/utils'
+import { sessionStore } from '../stores/session'
 
+const { brand } = sessionStore()
 const sidebarStore = useSidebar()
 const user = inject('$user')
 const readyToRender = ref(false)
@@ -195,14 +197,10 @@ const breadcrumbs = computed(() => {
 	]
 })
 
-const pageMeta = computed(() => {
+usePageMeta(() => {
 	return {
-		title: chapter?.doc?.title,
+		title: chapter.doc?.title,
-		description: __('This is a chapter in the course {0}').format(
+		icon: brand.favicon,
-			chapter?.doc?.course_title
-		),
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/pages/Statistics.vue

@@ -7,109 +7,115 @@
 		</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
+				<NumberChart
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+					class="border rounded-md"
-				>
+					:config="{ title: 'Courses', value: chartDetails.data.courses }"
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+				/>
-						<BookOpen class="w-18 h-18 stroke-1.5" />
+				<NumberChart
-					</div>
+					class="border rounded-md"
-					<div>
+					:config="{ title: 'Signups', value: chartDetails.data.users }"
-						<div class="text-xl font-semibold mb-1">
+				/>
-							{{ formatNumber(chartDetails.data.courses) }}
+				<NumberChart
-						</div>
+					class="border rounded-md"
-						<div>
+					:config="{
-							{{ __('Courses') }}
+						title: 'Enrollments',
-						</div>
+						value: chartDetails.data.enrollments,
-					</div>
+					}"
-				</div>
+				/>
-				<div
+				<NumberChart
-					class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
+					class="border rounded-md"
-				>
+					:config="{
-					<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
+						title: 'Completions',
-						<LogIn class="w-18 h-18 stroke-1.5" />
+						value: chartDetails.data.completions,
-					</div>
+					}"
-					<div>
+				/>
-						<div class="text-xl font-semibold mb-1">
+				<NumberChart
-							{{ formatNumber(chartDetails.data.users) }}
+					class="border rounded-md"
-						</div>
+					:config="{
-						<div>
+						title: 'Certifications',
-							{{ __('Signups') }}
+						value: chartDetails.data.certifications,
-						</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>
 			</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">
+				<div class="border rounded-md min-h-72">
-					<Line
+					<AxisChart
 						v-if="signupsChart.data"
-						:data="signupsChart.data"
+						:config="{
-						:options="signupChartOptions()"
+							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">
+				<div class="border rounded-md min-h-72">
-					<Line
+					<AxisChart
 						v-if="enrollmentChart.data"
-						:data="enrollmentChart.data"
+						:config="{
-						:options="enrollmentChartOptions()"
+							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">
+				<div class="border rounded-md">
-					<Line
+					<AxisChart
-						v-if="lessonCompletion.data"
+						v-if="certification.data"
-						:data="lessonCompletion.data"
+						:config="{
-						:options="lessonChartOptions()"
+							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">
+				<div class="border rounded-md">
-					<Pie
+					<DonutChart
 						v-if="courseCompletion.data"
-						:data="courseCompletion.data"
+						:config="{
-						:options="courseChartOptions()"
+							data: courseCompletion.data,
+							title: 'Completions',
+							subtitle: 'Course Completion',
+							categoryColumn: 'label',
+							valueColumn: 'value',
+						}"
 					/>
 				</div>
 			</div>
@@ -117,44 +123,18 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs } from 'frappe-ui'
-import { computed, inject } from 'vue'
-import { updateDocumentTitle } from '@/utils'
-import { formatNumber } from '@/utils'
-import { Line, Pie } from 'vue-chartjs'
 import {
-	Chart as ChartJS,
+	AxisChart,
-	Title,
+	Breadcrumbs,
-	Tooltip,
+	createResource,
-	Legend,
+	DonutChart,
-	LineElement,
+	NumberChart,
-	CategoryScale,
+	usePageMeta,
-	LinearScale,
+} from 'frappe-ui'
-	PointElement,
+import { computed } from 'vue'
-	ArcElement,
+import { sessionStore } from '../stores/session'
-	Filler,
-} from 'chart.js'
 
-ChartJS.register(
+const { brand } = sessionStore()
-	Title,
-	Tooltip,
-	Legend,
-	LineElement,
-	CategoryScale,
-	LinearScale,
-	PointElement,
-	ArcElement,
-	Filler
-)
-import {
-	BookOpen,
-	LogIn,
-	FileCheck,
-	FileCheck2,
-	BookOpenCheck,
-} from 'lucide-vue-next'
-
-const dayjs = inject('$dayjs')
 
 const breadcrumbs = computed(() => {
 	return [
@@ -175,11 +155,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 +176,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,123 +209,10 @@ const courseCompletion = createResource({
 	cache: ['courseCompletion'],
 })
 
-const signupChartOptions = () => {
+usePageMeta(() => {
-	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,
+		title: __('Statistics'),
-		maintainAspectRatio: false,
+		icon: brand.favicon,
-		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,
-				},
-			},
-		},
-	}
-}
-
-const pageMeta = computed(() => {
-	return {
-		title: 'Statistics',
-		description: 'Statistics of the platform',
 	}
 })
-
-updateDocumentTitle(pageMeta)
 </script>

frontend/src/router.js

@@ -134,8 +134,8 @@ const routes = [
 	},
 	{
 		path: '/job-opening/:jobName/edit',
-		name: 'JobCreation',
+		name: 'JobForm',
-		component: () => import('@/pages/JobCreation.vue'),
+		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

@@ -2,10 +2,11 @@ import { defineStore } from 'pinia'
 import { createResource } from 'frappe-ui'
 import { usersStore } from './user'
 import router from '@/router'
-import { ref, computed } from 'vue'
+import { computed, reactive, ref } from 'vue'
 
 export const sessionStore = defineStore('lms-session', () => {
 	let { userResource } = usersStore()
+	const brand = reactive({})
 
 	function sessionUser() {
 		let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
@@ -46,7 +47,10 @@ export const sessionStore = defineStore('lms-session', () => {
 		cache: 'brand',
 		auto: true,
 		onSuccess(data) {
-			document.querySelector("link[rel='icon']").href = data.favicon
+			brand.name = data.app_name
+			brand.logo = data.app_logo
+			brand.favicon =
+				data.favicon?.file_url || '/assets/lms/frontend/learning.svg'
 		},
 	})
 
@@ -61,6 +65,7 @@ export const sessionStore = defineStore('lms-session', () => {
 		isLoggedIn,
 		login,
 		logout,
+		brand,
 		branding,
 		sidebarSettings,
 	}

frontend/src/stores/settings.js

@@ -9,15 +9,9 @@ export const useSettings = defineStore('settings', () => {
 	const activeTab = ref(null)
 
 	const learningPaths = createResource({
-		url: 'frappe.client.get_single_value',
+		url: 'lms.lms.api.is_learning_path_enabled',
-		makeParams(values) {
+		auto: true,
-			return {
+		cache: ['learningPath'],
-				doctype: 'LMS Settings',
-				field: 'enable_learning_paths',
-			}
-		},
-		auto: isLoggedIn ? true : false,
-		cache: ['learningPaths'],
 	})
 
 	const allowGuestAccess = createResource({
@@ -26,12 +20,6 @@ export const useSettings = defineStore('settings', () => {
 		cache: ['allowGuestAccess'],
 	})
 
-	/* const onboardingDetails = createResource({
-		url: 'lms.lms.utils.is_onboarding_complete',
-		auto: isLoggedIn ? true : false,
-		cache: ['onboardingDetails'],
-	}) */
-
 	return {
 		isSettingsOpen,
 		activeTab,

frontend/src/utils/assignment.js

@@ -1,10 +1,9 @@
 import { Pencil } from 'lucide-vue-next'
 import { createApp, h } from 'vue'
 import AssessmentPlugin from '@/components/AssessmentPlugin.vue'
-import AssignmentBlock from '@/components/AssignmentBlock.vue'
 import translationPlugin from '../translation'
 import { usersStore } from '@/stores/user'
-import router from '../router'
+import { call } from 'frappe-ui'
 
 export class Assignment {
 	constructor({ data, api, readOnly }) {
@@ -43,14 +42,18 @@ export class Assignment {
 
 	renderAssignment(assignment) {
 		if (this.readOnly) {
-			const app = createApp(AssignmentBlock, {
-				assignmentID: assignment,
-			})
-			app.use(translationPlugin)
-			app.use(router)
 			const { userResource } = usersStore()
-			app.provide('$user', userResource)
+			call('frappe.client.get_value', {
-			app.mount(this.wrapper)
+				doctype: 'LMS Assignment Submission',
+				filters: {
+					assignment: assignment,
+					member: userResource.data?.name,
+				},
+				fieldname: ['name'],
+			}).then((data) => {
+				let submission = data.name || 'new'
+				this.wrapper.innerHTML = `<iframe src="/lms/assignment-submission/${assignment}/${submission}?fromLesson=1" class="w-full h-[500px]"></iframe>`
+			})
 			return
 		}
 		this.wrapper.innerHTML = `<div class='border rounded-md p-10 text-center bg-surface-menu-bar mb-2'>