From a41338c3a24980e8dd0e2ed17aaf8f0bbfaa1951 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 26 Mar 2025 22:13:08 +0530
Subject: [PATCH] fix: onboarding step improvements

---
 frappe-ui                                     |   2 +-
 frontend/components.d.ts                      |   4 +-
 frontend/package.json                         |   4 +-
 frontend/src/components/AppSidebar.vue        |  92 +++++++------
 frontend/src/components/CourseOutline.vue     |  13 +-
 frontend/src/components/Evaluators.vue        | 126 ++++++++++++++++++
 frontend/src/components/Icons/BatchIcon.vue   |  23 ----
 frontend/src/components/Icons/InviteIcon.vue  |  17 +++
 frontend/src/components/LessonContent.vue     |   7 +-
 .../components/Modals/BatchCourseModal.vue    |   2 +-
 frontend/src/components/Modals/Question.vue   |   5 +-
 frontend/src/components/Modals/Settings.vue   |  12 ++
 frontend/src/pages/CourseDetail.vue           |   4 +-
 frontend/src/pages/CourseForm.vue             |  19 +--
 frontend/src/pages/QuizForm.vue               |   3 -
 frontend/tailwind.config.js                   |   6 +-
 frontend/vite.config.js                       |   2 +-
 lms/lms/api.py                                |  21 +++
 .../course_evaluator/course_evaluator.json    |  41 +++++-
 .../course_evaluator/course_evaluator.py      |   6 +
 lms/lms/onboarding.py                         |   4 +-
 yarn.lock                                     |  53 ++++++--
 22 files changed, 358 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/components/Evaluators.vue
 delete mode 100644 frontend/src/components/Icons/BatchIcon.vue
 create mode 100644 frontend/src/components/Icons/InviteIcon.vue

diff --git a/frappe-ui b/frappe-ui
index 10635f31..704a098e 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 10635f3120840ddf67d2694b62046578f77c560c
+Subproject commit 704a098eb1982410678cb12e6764c3d4087ea8fb
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 085dc343..4389972d 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -16,7 +16,6 @@ declare module 'vue' {
     AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
     Assessments: typeof import('./src/components/Assessments.vue')['default']
     Assignment: typeof import('./src/components/Assignment.vue')['default']
-    AssignmentBlock: typeof import('./src/components/AssignmentBlock.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']
@@ -24,7 +23,6 @@ declare module 'vue' {
     BatchCourses: typeof import('./src/components/BatchCourses.vue')['default']
     BatchDashboard: typeof import('./src/components/BatchDashboard.vue')['default']
     BatchFeedback: typeof import('./src/components/BatchFeedback.vue')['default']
-    BatchIcon: typeof import('./src/components/Icons/BatchIcon.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']
@@ -49,11 +47,13 @@ declare module 'vue' {
     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']
diff --git a/frontend/package.json b/frontend/package.json
index 44bd7ea6..7990f221 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,13 +26,13 @@
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.121",
+    "frappe-ui": "^0.1.122",
     "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
     "socket.io-client": "^4.7.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.4.15",
     "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 2193c654..8b18c389 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -88,7 +88,9 @@
 				"
 			>
 				<template #icon>
-					<CircleHelp class="h-4 w-4" />
+					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+						<CircleHelp class="h-4 w-4 stroke-1.5" />
+					</span>
 				</template>
 			</SidebarLink>
 			<SidebarLink
@@ -101,7 +103,7 @@
 				<template #icon>
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 						<CollapseSidebar
-							class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
+							class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
 							:class="{
 								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
 							}"
@@ -110,29 +112,29 @@
 				</template>
 			</SidebarLink>
 		</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"
 		v-model:reloadSidebar="sidebarSettings"
 		:page="pageToEdit"
 	/>
-	<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"
-	/>
 </template>
 
 <script setup>
@@ -140,12 +142,18 @@ 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, reactive, markRaw } 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 { Button, createResource } 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,
 	ChevronRight,
@@ -155,8 +163,8 @@ import {
 	FileText,
 	UserPlus,
 	Users,
+	BookText,
 } from 'lucide-vue-next'
-import { Button, createResource } from 'frappe-ui'
 import {
 	TrialBanner,
 	HelpModal,
@@ -166,10 +174,6 @@ import {
 	minimize,
 	IntermediateStepModal,
 } from 'frappe-ui/frappe'
-import PageModal from '@/components/Modals/PageModal.vue'
-import { capture } from '@/telemetry'
-import LMSLogo from '@/components/Icons/LMSLogo.vue'
-import { useRouter } from 'vue-router'
 
 const { user, sidebarSettings } = sessionStore()
 const { userResource } = usersStore()
@@ -188,6 +192,11 @@ const currentStep = ref({})
 const router = useRouter()
 let onboardingDetails
 let isOnboardingStepsCompleted = false
+const iconProps = {
+	strokeWidth: 1.5,
+	width: 16,
+	height: 16,
+}
 
 onMounted(() => {
 	addNotifications()
@@ -372,22 +381,19 @@ const steps = reactive([
 	{
 		name: 'create_first_course',
 		title: __('Create your first course'),
-		icon: markRaw(BookOpen),
+		icon: markRaw(h(BookOpen, iconProps)),
 		completed: false,
 		onClick: () => {
 			minimize.value = true
 			router.push({
-				name: 'CourseForm',
-				params: {
-					courseName: 'new',
-				},
+				name: 'Courses',
 			})
 		},
 	},
 	{
 		name: 'create_first_chapter',
 		title: __('Add your first chapter'),
-		icon: markRaw(FolderTree),
+		icon: markRaw(h(FolderTree, iconProps)),
 		completed: false,
 		onClick: async () => {
 			minimize.value = true
@@ -402,35 +408,35 @@ const steps = reactive([
 	{
 		name: 'create_first_lesson',
 		title: __('Add your first lesson'),
-		icon: markRaw(FileText),
+		icon: markRaw(h(FileText, iconProps)),
 		completed: false,
 		onClick: async () => {
 			minimize.value = true
 			let course = await getFirstCourse()
 			if (course) {
 				router.push({
-					name: 'LessonForm',
-					params: { courseName: course, chapterNumber: 1, lessonNumber: 1 },
+					name: 'CourseForm',
+					params: { courseName: course },
 				})
 			} else {
-				router.push({ name: 'CourseForm' })
+				router.push({ name: 'Courses' })
 			}
 		},
 	},
 	{
 		name: 'create_first_quiz',
 		title: __('Create your first quiz'),
-		icon: markRaw(CircleHelp),
+		icon: markRaw(h(CircleHelp, iconProps)),
 		completed: false,
 		onClick: () => {
 			minimize.value = true
-			router.push({ name: 'QuizForm', params: { quizID: 'new' } })
+			router.push({ name: 'Quizzes' })
 		},
 	},
 	{
 		name: 'invite_students',
 		title: __('Invite your team and students'),
-		icon: markRaw(UserPlus),
+		icon: markRaw(h(InviteIcon, iconProps)),
 		completed: false,
 		onClick: () => {
 			minimize.value = true
@@ -441,17 +447,17 @@ const steps = reactive([
 	{
 		name: 'create_first_batch',
 		title: __('Create your first batch'),
-		icon: markRaw(Users),
+		icon: markRaw(h(Users, iconProps)),
 		completed: false,
 		onClick: () => {
 			minimize.value = true
-			router.push({ name: 'BatchForm', params: { batchName: 'new' } })
+			router.push({ name: 'Batches' })
 		},
 	},
 	{
 		name: 'add_batch_student',
 		title: __('Add students to your batch'),
-		icon: markRaw(UserPlus),
+		icon: markRaw(h(UserPlus, iconProps)),
 		completed: false,
 		onClick: async () => {
 			minimize.value = true
@@ -471,7 +477,7 @@ const steps = reactive([
 	{
 		name: 'add_batch_course',
 		title: __('Add courses to your batch'),
-		icon: markRaw(BookOpen),
+		icon: markRaw(h(BookText, iconProps)),
 		completed: false,
 		onClick: async () => {
 			minimize.value = true
@@ -482,7 +488,7 @@ const steps = reactive([
 					params: {
 						batchName: batch,
 					},
-					hash: 'courses',
+					hash: '#courses',
 				})
 			} else {
 				router.push({ name: 'Batch' })
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index 291a4351..122e76e7 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -1,10 +1,17 @@
 <template>
-	<div class="text-base">
+	<div class="h-full">
 		<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()">
diff --git a/frontend/src/components/Evaluators.vue b/frontend/src/components/Evaluators.vue
new file mode 100644
index 00000000..fe12ceeb
--- /dev/null
+++ b/frontend/src/components/Evaluators.vue
@@ -0,0 +1,126 @@
+<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>
diff --git a/frontend/src/components/Icons/BatchIcon.vue b/frontend/src/components/Icons/BatchIcon.vue
deleted file mode 100644
index 0156adbf..00000000
--- a/frontend/src/components/Icons/BatchIcon.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/components/Icons/InviteIcon.vue b/frontend/src/components/Icons/InviteIcon.vue
new file mode 100644
index 00000000..94810039
--- /dev/null
+++ b/frontend/src/components/Icons/InviteIcon.vue
@@ -0,0 +1,17 @@
+<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>
+  
\ No newline at end of file
diff --git a/frontend/src/components/LessonContent.vue b/frontend/src/components/LessonContent.vue
index 736367af..2bb686c4 100644
--- a/frontend/src/components/LessonContent.vue
+++ b/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,
diff --git a/frontend/src/components/Modals/BatchCourseModal.vue b/frontend/src/components/Modals/BatchCourseModal.vue
index b29e1798..4a47c667 100644
--- a/frontend/src/components/Modals/BatchCourseModal.vue
+++ b/frontend/src/components/Modals/BatchCourseModal.vue
@@ -88,7 +88,7 @@ const addCourse = (close) => {
 
 const openSettings = (close) => {
 	close()
-	settingsStore.activeTab = 'Categories'
+	settingsStore.activeTab = 'Evaluators'
 	settingsStore.isSettingsOpen = true
 }
 </script>
diff --git a/frontend/src/components/Modals/Question.vue b/frontend/src/components/Modals/Question.vue
index 7ab280bd..28ca4f96 100644
--- a/frontend/src/components/Modals/Question.vue
+++ b/frontend/src/components/Modals/Question.vue
@@ -109,11 +109,13 @@ import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
 import { computed, watch, reactive, ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import { showToast } from '@/utils'
+import { useOnboarding } from 'frappe-ui/frappe'
 
 const show = defineModel()
 const quiz = defineModel('quiz')
 const questionType = ref(null)
 const editMode = ref(false)
+const { updateOnboardingStep } = useOnboarding('learning')
 
 const existingQuestion = reactive({
 	question: '',
@@ -122,7 +124,7 @@ const existingQuestion = reactive({
 const question = reactive({
 	question: '',
 	type: 'Choices',
-	marks: 0,
+	marks: 1,
 })
 
 const populateFields = () => {
@@ -261,6 +263,7 @@ const addQuestionRow = (question, close) => {
 		{
 			onSuccess() {
 				show.value = false
+				updateOnboardingStep('create_first_quiz')
 				showToast(__('Success'), __('Question added successfully'), 'check')
 				quiz.value.reload()
 				close()
diff --git a/frontend/src/components/Modals/Settings.vue b/frontend/src/components/Modals/Settings.vue
index f4c11d4f..fb9aaff7 100644
--- a/frontend/src/components/Modals/Settings.vue
+++ b/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',
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index 56c9fc6b..2d47f37c 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -56,7 +56,7 @@
 							<CourseInstructors :instructors="course.data.instructors" />
 						</div>
 					</div>
-					<div v-if="course.data.tags" class="flex mt-3 mb-4 w-fit">
+					<div v-if="course.data.tags" class="flex mt-4 w-fit">
 						<Badge
 							theme="gray"
 							size="lg"
@@ -69,7 +69,7 @@
 					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.description"
-						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
+						class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-4"
 					></div>
 					<div class="mt-10">
 						<CourseOutline
diff --git a/frontend/src/pages/CourseForm.vue b/frontend/src/pages/CourseForm.vue
index e0019169..7dca8b64 100644
--- a/frontend/src/pages/CourseForm.vue
+++ b/frontend/src/pages/CourseForm.vue
@@ -1,19 +1,20 @@
 <template>
-	<div class="">
+	<div class="h-full">
 		<div class="grid md:grid-cols-[70%,30%] h-full">
 			<div>
 				<header
-					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
+					class="sticky top-0 z-10 group flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 				>
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
 					<div class="flex items-center mt-3 md:mt-0">
-						<Button v-if="courseResource.data?.name" @click="trashCourse()">
-							<template #prefix>
+						<Button
+							v-if="courseResource.data?.name"
+							@click="trashCourse()"
+							class="invisible group-hover:visible"
+						>
+							<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 +234,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>
diff --git a/frontend/src/pages/QuizForm.vue b/frontend/src/pages/QuizForm.vue
index 7ba3bceb..c143d2aa 100644
--- a/frontend/src/pages/QuizForm.vue
+++ b/frontend/src/pages/QuizForm.vue
@@ -211,7 +211,6 @@ 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 { useOnboarding } from 'frappe-ui/frappe'
 
 const showQuestionModal = ref(false)
 const currentQuestion = reactive({
@@ -221,7 +220,6 @@ const currentQuestion = reactive({
 })
 const user = inject('$user')
 const router = useRouter()
-const { updateOnboardingStep } = useOnboarding('learning')
 
 const props = defineProps({
 	quizID: {
@@ -339,7 +337,6 @@ const createQuiz = () => {
 		{
 			onSuccess(data) {
 				showToast(__('Success'), __('Quiz created successfully'), 'check')
-				updateOnboardingStep('create_first_quiz')
 				router.push({
 					name: 'QuizForm',
 					params: { quizID: data.name },
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 0f6fe469..20b6bd73 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,8 +3,10 @@ module.exports = {
 	content: [
 		'./index.html',
 		'./src/**/*.{vue,js,ts,jsx,tsx}',
-		'./node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
-		'../node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
+		'./node_modules/frappe-ui/src/**/*.{vue,js,ts,jsx,tsx}',
+		'../node_modules/frappe-ui/src/**/*.{vue,js,ts,jsx,tsx}',
+		'./node_modules/frappe-ui/frappe/**/*.{vue,js,ts,jsx,tsx}',
+		'../node_modules/frappe-ui/frappe/**/*.{vue,js,ts,jsx,tsx}',
 	],
 	theme: {
 		extend: {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 626a9a7b..a62def39 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -25,7 +25,7 @@ export default defineConfig({
 		}),
 	],
 	server: {
-		allowedHosts: ['fs', 'onb'],
+		allowedHosts: ['fs', 'onb1'],
 	},
 	resolve: {
 		alias: {
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 38f59622..4358e80d 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -1339,3 +1339,24 @@ def save_role(user, role, value):
 	else:
 		frappe.db.delete("Has Role", {"parent": user, "role": role})
 	return True
+
+
+@frappe.whitelist()
+def add_an_evaluator(email):
+	if not frappe.db.exists("User", email):
+		user = frappe.new_doc("User")
+		user.update(
+			{
+				"email": email,
+				"first_name": email.split("@")[0].capitalize(),
+				"enabled": 1,
+			}
+		)
+		user.insert()
+		user.add_roles("Batch Evaluator")
+
+	evaluator = frappe.new_doc("Course Evaluator")
+	evaluator.evaluator = email
+	evaluator.insert()
+
+	return evaluator
diff --git a/lms/lms/doctype/course_evaluator/course_evaluator.json b/lms/lms/doctype/course_evaluator/course_evaluator.json
index 2c3c31a5..702aabc8 100644
--- a/lms/lms/doctype/course_evaluator/course_evaluator.json
+++ b/lms/lms/doctype/course_evaluator/course_evaluator.json
@@ -8,6 +8,11 @@
  "engine": "InnoDB",
  "field_order": [
   "evaluator",
+  "full_name",
+  "column_break_casg",
+  "user_image",
+  "username",
+  "section_break_ljse",
   "schedule",
   "unavailability_section",
   "unavailable_from",
@@ -18,8 +23,10 @@
   {
    "fieldname": "evaluator",
    "fieldtype": "Link",
+   "in_list_view": 1,
    "label": "Evaluator",
    "options": "User",
+   "reqd": 1,
    "unique": 1
   },
   {
@@ -46,11 +53,40 @@
    "fieldname": "unavailable_to",
    "fieldtype": "Date",
    "label": "To"
+  },
+  {
+   "fetch_from": "evaluator.full_name",
+   "fieldname": "full_name",
+   "fieldtype": "Data",
+   "label": "Full Name",
+   "read_only": 1
+  },
+  {
+   "fieldname": "column_break_casg",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "section_break_ljse",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fetch_from": "evaluator.user_image",
+   "fieldname": "user_image",
+   "fieldtype": "Attach Image",
+   "label": "User Image",
+   "read_only": 1
+  },
+  {
+   "fetch_from": "evaluator.username",
+   "fieldname": "username",
+   "fieldtype": "Data",
+   "label": "Username",
+   "read_only": 1
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-02-24 12:17:08.436659",
+ "modified": "2025-03-26 14:02:46.588721",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Evaluator",
@@ -94,7 +130,8 @@
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "modified",
  "sort_order": "DESC",
  "states": []
-}
\ No newline at end of file
+}
diff --git a/lms/lms/doctype/course_evaluator/course_evaluator.py b/lms/lms/doctype/course_evaluator/course_evaluator.py
index 93be1b08..f7e1573b 100644
--- a/lms/lms/doctype/course_evaluator/course_evaluator.py
+++ b/lms/lms/doctype/course_evaluator/course_evaluator.py
@@ -11,9 +11,15 @@ from frappe.utils import get_time, getdate
 
 class CourseEvaluator(Document):
 	def validate(self):
+		self.validate_evaluator_role()
 		self.validate_time_slots()
 		self.validate_unavailability()
 
+	def validate_evaluator_role(self):
+		roles = frappe.get_roles(self.evaluator)
+		if "Batch Evaluator" not in roles:
+			frappe.get_doc("User", self.evaluator).add_roles("Batch Evaluator")
+
 	def validate_unavailability(self):
 		if (
 			self.unavailable_from
diff --git a/lms/lms/onboarding.py b/lms/lms/onboarding.py
index 5aef0d12..4585891c 100644
--- a/lms/lms/onboarding.py
+++ b/lms/lms/onboarding.py
@@ -1,5 +1,6 @@
 import frappe
 
+
 def get_first_course():
 	course = frappe.get_all(
 		"LMS Course",
@@ -9,6 +10,7 @@ def get_first_course():
 	)
 	return course[0].name if course else None
 
+
 def get_first_batch():
 	batch = frappe.get_all(
 		"LMS Batch",
@@ -16,4 +18,4 @@ def get_first_batch():
 		order_by="creation",
 		limit=1,
 	)
-	return batch[0].name if batch else None
\ No newline at end of file
+	return batch[0].name if batch else None
diff --git a/yarn.lock b/yarn.lock
index 8e12bb2b..2e51d28e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -103,9 +103,9 @@
     style-mod "^4.0.0"
 
 "@codemirror/lint@^6.4.2":
-  version "6.8.4"
-  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.4.tgz#7d8aa5d1a6dec89ffcc23ad45ddca2e12e90982d"
-  integrity sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==
+  version "6.8.5"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.5.tgz#9edaa808e764e28e07665b015951934c8ec3a418"
+  integrity sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==
   dependencies:
     "@codemirror/state" "^6.0.0"
     "@codemirror/view" "^6.35.0"
@@ -2314,9 +2314,9 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.5.73:
-  version "1.5.123"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.123.tgz#fae5bdba0ba27045895176327aa79831aba0790c"
-  integrity sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==
+  version "1.5.124"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.124.tgz#34b1d6baf8f21d9dbcbae6e67fa276e54554ce81"
+  integrity sha512-riELkpDUqBi00gqreV3RIGoowxGrfueEKBd6zPdOk/I8lvuFpBGNkYoHof3zUHbiTBsIU8oxdIIL/WNrAG1/7A==
 
 emoji-regex@^10.3.0:
   version "10.4.0"
@@ -2664,9 +2664,9 @@ finalhandler@1.1.2:
     unpipe "~1.0.0"
 
 flexsearch@*:
-  version "0.8.132"
-  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.8.132.tgz#6ec63d37fe8ea59d9d5a0dcdfdd64ec6b2e5b95c"
-  integrity sha512-eK5MrXL2qgt+mHpFueW2PNdQNSx3rkpn/6QyiqNFr0Zyy8YffmiG+L52AM/H9kAHx5OcMdYhUtCy/z1xmI3VKg==
+  version "0.8.140"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.8.140.tgz#f9ab78c2560c182e047abb578ff0ad307a61154d"
+  integrity sha512-G6aEypMdVsvpEmSbu74wJu1cDHz9JxL0asmBhK4Yk3a3LG89EdM+tWFbJwELdLgwJsAjcZBGR7wczvOOKjpO+w==
 
 flexsearch@0.7.21:
   version "0.7.21"
@@ -3250,6 +3250,11 @@ lazy-ass@^1.6.0:
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
   integrity sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==
 
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
 lilconfig@^3.0.0, lilconfig@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
@@ -4836,7 +4841,35 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tailwindcss@^3.2.7, tailwindcss@^3.3.3:
+tailwindcss@3.4.15:
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.15.tgz#04808bf4bf1424b105047d19e7d4bfab368044a9"
+  integrity sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.6"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
+tailwindcss@^3.2.7:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
   integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==