fix: onboarding step improvements

2025-03-26 22:13:08 +05:30
parent aa979b96f2
commit a41338c3a2
22 changed files with 358 additions and 108 deletions
--- a/2
+++ b/2
--- 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']
--- 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",
--- 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' })
--- 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()">
--- a/frontend/src/components/Evaluators.vue
+++ 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>
--- a/frontend/src/components/Icons/BatchIcon.vue
+++ b/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>
--- a/frontend/src/components/Icons/InviteIcon.vue
+++ 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>
+  
--- 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,
--- 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>
--- 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()
--- 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',
--- 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
--- 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>
--- 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 },
--- 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: {
--- 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: {
--- 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
--- 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": []
-}
+}
--- 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
--- 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
+	return batch[0].name if batch else None
--- 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==