fix: course count on batch dashboard

2025-05-26 12:25:16 +05:30
parent 532dbbea4a 0d284d05d9
commit 9babfd150e
36 changed files with 1234 additions and 585 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -39,9 +39,9 @@ const Layout = computed(() => {
 	}
 	if (screenSize.width < 640) {
 		return MobileLayout
-	} else {
-		return DesktopLayout
 	}
+
+	return DesktopLayout
 })

 onMounted(async () => {
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -181,7 +181,6 @@
 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, h } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
@@ -244,6 +243,7 @@ const iconProps = {
 onMounted(() => {
 	addNotifications()
 	setSidebarLinks()
+	setUpOnboarding()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
@@ -388,10 +388,6 @@ const deletePage = (link) => {
 	)
 }

-const getSidebarFromStorage = () => {
-	return useStorage('sidebar_is_collapsed', false)
-}
-
 const toggleSidebar = () => {
 	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
 	localStorage.setItem(
@@ -438,6 +434,7 @@ const steps = reactive([
 		title: __('Add your first chapter'),
 		icon: markRaw(h(FolderTree, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_course',
 		onClick: async () => {
 			minimize.value = true
 			let course = await getFirstCourse()
@@ -453,6 +450,7 @@ const steps = reactive([
 		title: __('Add your first lesson'),
 		icon: markRaw(h(FileText, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_chapter',
 		onClick: async () => {
 			minimize.value = true
 			let course = await getFirstCourse()
@@ -471,6 +469,7 @@ const steps = reactive([
 		title: __('Create your first quiz'),
 		icon: markRaw(h(CircleHelp, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_course',
 		onClick: () => {
 			minimize.value = true
 			router.push({ name: 'Quizzes' })
@@ -502,6 +501,7 @@ const steps = reactive([
 		title: __('Add students to your batch'),
 		icon: markRaw(h(UserPlus, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_batch',
 		onClick: async () => {
 			minimize.value = true
 			let batch = await getFirstBatch()
@@ -522,6 +522,7 @@ const steps = reactive([
 		title: __('Add courses to your batch'),
 		icon: markRaw(h(BookText, iconProps)),
 		completed: false,
+		dependsOn: 'create_first_batch',
 		onClick: async () => {
 			minimize.value = true
 			let batch = await getFirstBatch()
--- a/frontend/src/components/BatchFeedback.vue
+++ b/frontend/src/components/BatchFeedback.vue
@@ -1,44 +1,49 @@
 <template>
 	<div v-if="user.data?.is_student">
-		<div
-			v-if="feedbackList.data?.length"
-			class="bg-surface-blue-2 text-blue-700 p-2 rounded-md mb-5"
-		>
-			{{ __('Thank you for providing your feedback!') }}
-		</div>
-		<div v-else class="flex justify-between items-center mb-5">
-			<div class="text-lg font-semibold">
-				{{ __('Help Us Improve') }}
+		<div>
+			<div class="leading-5 mb-4">
+				<div v-if="readOnly">
+					{{ __('Thank you for providing your feedback.') }}
+					<span
+						@click="showFeedbackForm = !showFeedbackForm"
+						class="underline cursor-pointer"
+						>{{ __('Click here') }}</span
+					>
+					{{ __('to view your feedback.') }}
+				</div>
+				<div v-else>
+					{{ __('Help us improve by providing your feedback.') }}
+				</div>
 			</div>
-			<Button @click="submitFeedback()">
-				{{ __('Submit') }}
-			</Button>
-		</div>
-		<div class="space-y-8">
-			<div class="flex items-center justify-between">
-				<Rating
-					v-for="key in ratingKeys"
-					v-model="feedback[key]"
-					:label="__(convertToTitleCase(key))"
+			<div class="space-y-4" :class="showFeedbackForm ? 'block' : 'hidden'">
+				<div class="space-y-4">
+					<Rating
+						v-for="key in ratingKeys"
+						v-model="feedback[key]"
+						:label="__(convertToTitleCase(key))"
+						:readonly="readOnly"
+					/>
+				</div>
+				<FormControl
+					v-model="feedback.feedback"
+					type="textarea"
+					:label="__('Feedback')"
+					:rows="9"
 					:readonly="readOnly"
 				/>
+				<Button v-if="!readOnly" @click="submitFeedback">
+					{{ __('Submit Feedback') }}
+				</Button>
 			</div>
-			<FormControl
-				v-model="feedback.feedback"
-				type="textarea"
-				:label="__('Feedback')"
-				:rows="7"
-				:readonly="readOnly"
-			/>
 		</div>
 	</div>

 	<div v-else-if="feedbackList.data?.length">
-		<div class="text-lg font-semibold mb-5">
-			{{ __('Average of Feedback Received') }}
+		<div class="leading-5 text-sm mb-2 mt-5">
+			{{ __('Average Feedback Received') }}
 		</div>

-		<div class="flex items-center justify-between mb-10">
+		<div class="space-y-4">
 			<Rating
 				v-for="key in ratingKeys"
 				v-model="average[key]"
@@ -47,81 +52,32 @@
 			/>
 		</div>

-		<div class="text-lg font-semibold mb-5">
-			{{ __('All Feedback') }}
-		</div>
-		<ListView
-			:columns="feedbackColumns"
-			:rows="feedbackList.data"
-			row-key="name"
-			:options="{
-				showTooltip: false,
-				rowHeight: 'h-16',
-				selectable: false,
-			}"
-		>
-			<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
-			></ListHeader>
-			<ListRows>
-				<ListRow
-					:row="row"
-					v-for="row in feedbackList.data"
-					class="group cursor-pointer feedback-list"
-				>
-					<template #default="{ column, item }">
-						<ListRowItem
-							:item="row[column.key]"
-							:align="column.align"
-							class="text-sm"
-						>
-							<template #prefix>
-								<div v-if="column.key == 'member_name'">
-									<Avatar
-										class="flex"
-										:image="row['member_image']"
-										:label="item"
-										size="sm"
-									/>
-								</div>
-							</template>
-							<div v-if="ratingKeys.includes(column.key)">
-								<Rating v-model="row[column.key]" :readonly="true" />
-							</div>
-							<div v-else class="leading-5">
-								{{ row[column.key] }}
-							</div>
-						</ListRowItem>
-					</template>
-				</ListRow>
-			</ListRows>
-		</ListView>
+		<Button variant="outline" class="mt-5" @click="showAllFeedback = true">
+			{{ __('View all feedback') }}
+		</Button>
 	</div>
-	<div v-else class="text-sm italic text-center text-ink-gray-7 mt-5">
+	<div v-else class="text-ink-gray-7 mt-5 leading-5">
 		{{ __('No feedback received yet.') }}
 	</div>
+	<FeedbackModal
+		v-if="feedbackList.data?.length"
+		v-model="showAllFeedback"
+		:feedbackList="feedbackList.data"
+	/>
 </template>
 <script setup>
-import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
+import { inject, onMounted, reactive, ref, watch } from 'vue'
 import { convertToTitleCase } from '@/utils'
-import {
-	Avatar,
-	Button,
-	createListResource,
-	FormControl,
-	ListView,
-	ListHeader,
-	ListRows,
-	ListRow,
-	ListRowItem,
-	Rating,
-} from 'frappe-ui'
+import { Button, createListResource, FormControl, Rating } from 'frappe-ui'
+import FeedbackModal from '@/components/Modals/FeedbackModal.vue'

 const user = inject('$user')
 const ratingKeys = ['content', 'instructors', 'value']
 const readOnly = ref(false)
 const average = reactive({})
 const feedback = reactive({})
+const showFeedbackForm = ref(true)
+const showAllFeedback = ref(false)

 const props = defineProps({
 	batch: {
@@ -167,6 +123,7 @@ watch(
 		if (feedbackList.data.length) {
 			let data = feedbackList.data
 			readOnly.value = true
+			showFeedbackForm.value = false

 			ratingKeys.forEach((key) => {
 				average[key] = 0
@@ -201,40 +158,11 @@ const submitFeedback = () => {
 		{
 			onSuccess: () => {
 				feedbackList.reload()
+				showFeedbackForm.value = false
 			},
 		}
 	)
 }
-
-const feedbackColumns = computed(() => {
-	return [
-		{
-			label: 'Member',
-			key: 'member_name',
-			width: '10rem',
-		},
-		{
-			label: 'Feedback',
-			key: 'feedback',
-			width: '15rem',
-		},
-		{
-			label: 'Content',
-			key: 'content',
-			width: '9rem',
-		},
-		{
-			label: 'Instructors',
-			key: 'instructors',
-			width: '9rem',
-		},
-		{
-			label: 'Value',
-			key: 'value',
-			width: '9rem',
-		},
-	]
-})
 </script>
 <style>
 .feedback-list > button > div {
--- a/frontend/src/components/BrandSettings.vue
+++ b/frontend/src/components/BrandSettings.vue
@@ -18,11 +18,11 @@
 		</div>
 		<div class="overflow-y-auto">
 			<SettingFields :fields="fields" :data="data.data" />
-			<div class="flex flex-row-reverse mt-auto">
-				<Button variant="solid" :loading="saveSettings.loading" @click="update">
-					{{ __('Update') }}
-				</Button>
-			</div>
+		</div>
+		<div class="flex flex-row-reverse mt-auto">
+			<Button variant="solid" :loading="saveSettings.loading" @click="update">
+				{{ __('Update') }}
+			</Button>
 		</div>
 	</div>
 </template>
--- a/frontend/src/components/Categories.vue
+++ b/frontend/src/components/Categories.vue
@@ -1,16 +1,32 @@
 <template>
-	<div class="flex flex-col min-h-0">
-		<div class="flex items-center justify-between">
-			<div class="text-xl font-semibold mb-5 text-ink-gray-9">
-				{{ label }}
+	<div class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<div class="flex items-center space-x-5">
+				<div
+					class="flex items-center space-x-1 text-ink-amber-3 border border-outline-amber-1 bg-surface-amber-1 rounded-lg px-2 py-1"
+					v-if="saving"
+				>
+					<LoadingIndicator class="size-2" />
+					<span class="text-xs">
+						{{ __('saving...') }}
+					</span>
+				</div>
+				<Button @click="() => showCategoryForm()">
+					<template #prefix>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ showForm ? __('Close') : __('New') }}
+				</Button>
 			</div>
-			<Button @click="() => showCategoryForm()">
-				<template #prefix>
-					<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
-					<X v-else class="h-3 w-3 stroke-1.5" />
-				</template>
-				{{ showForm ? __('Close') : __('New') }}
-			</Button>
 		</div>

 		<div
@@ -29,13 +45,39 @@
 		</div>

 		<div class="overflow-y-scroll">
-			<div class="text-base space-y-2">
-				<FormControl
-					:value="cat.category"
-					type="text"
-					v-for="cat in categories.data"
-					@change.stop="(e) => update(cat.name, e.target.value)"
-				/>
+			<div class="divide-y space-y-2">
+				<div
+					v-for="(cat, index) in categories.data"
+					:key="cat.name"
+					class="pt-2"
+				>
+					<div
+						v-if="editing?.name !== cat.name"
+						class="flex items-center justify-between group text-sm"
+					>
+						<div @dblclick="allowEdit(cat, index)">
+							{{ cat.category }}
+						</div>
+						<Button
+							variant="ghost"
+							theme="red"
+							class="invisible group-hover:visible"
+							@click="deleteCategory(cat.name)"
+						>
+							<template #icon>
+								<Trash2 class="size-4 stroke-1.5 text-ink-red-4" />
+							</template>
+						</Button>
+					</div>
+					<FormControl
+						v-else
+						:ref="(el) => (editInputRef[index] = el)"
+						v-model="editedValue"
+						type="text"
+						class="w-full"
+						@keyup.enter="saveChanges(cat.name, editedValue)"
+					/>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -44,16 +86,22 @@
 import {
 	Button,
 	FormControl,
+	LoadingIndicator,
 	createListResource,
 	createResource,
-	debounce,
+	toast,
 } from 'frappe-ui'
-import { Plus, X } from 'lucide-vue-next'
+import { Plus, Trash2, X } from 'lucide-vue-next'
 import { ref } from 'vue'
+import { cleanError } from '@/utils'

 const showForm = ref(false)
 const category = ref(null)
 const categoryInput = ref(null)
+const saving = ref(false)
+const editing = ref(null)
+const editedValue = ref('')
+const editInputRef = ref([])

 const props = defineProps({
 	label: {
@@ -72,25 +120,20 @@ const categories = createListResource({
 	auto: true,
 })

-const newCategory = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Category',
-				category: category.value,
-			},
-		}
-	},
-})
-
 const addCategory = () => {
-	newCategory.submit(
-		{},
+	categories.insert.submit(
+		{
+			category: category.value,
+		},
 		{
 			onSuccess(data) {
 				categories.reload()
 				category.value = null
+				showForm.value = false
+				toast.success(__('Category added successfully'))
+			},
+			onError(err) {
+				toast.error(__(cleanError(err.messages[0]) || 'Unable to add category'))
 			},
 		}
 	)
@@ -115,6 +158,7 @@ const updateCategory = createResource({
 })

 const update = (name, value) => {
+	saving.value = true
 	updateCategory.submit(
 		{
 			name: name,
@@ -122,9 +166,51 @@ const update = (name, value) => {
 		},
 		{
 			onSuccess() {
+				saving.value = false
 				categories.reload()
+				editing.value = null
+				editedValue.value = ''
+				toast.success(__('Category updated successfully'))
+			},
+			onError(err) {
+				saving.value = false
+				editing.value = null
+				editedValue.value = ''
+				toast.error(
+					__(cleanError(err.messages[0]) || 'Unable to update category')
+				)
 			},
 		}
 	)
 }
+
+const deleteCategory = (name) => {
+	saving.value = true
+	categories.delete.submit(name, {
+		onSuccess() {
+			saving.value = false
+			categories.reload()
+			toast.success(__('Category deleted successfully'))
+		},
+		onError(err) {
+			saving.value = false
+			toast.error(
+				__(cleanError(err.messages[0]) || 'Unable to delete category')
+			)
+		},
+	})
+}
+
+const saveChanges = (name, value) => {
+	saving.value = true
+	update(name, value)
+}
+
+const allowEdit = (cat, index) => {
+	editing.value = cat
+	editedValue.value = cat.category
+	setTimeout(() => {
+		editInputRef.value[index].$el.querySelector('input').focus()
+	}, 0)
+}
 </script>
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -116,7 +116,7 @@
 					v-if="parseInt(course.data.rating) > 0"
 					class="flex items-center text-ink-gray-9"
 				>
-					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
+					<Star class="size-4 stroke-1.5 fill-yellow-500 text-transparent" />
 					<span class="ml-2">
 						{{ course.data.rating }} {{ __('Rating') }}
 					</span>
--- a/frontend/src/components/CourseReviews.vue
+++ b/frontend/src/components/CourseReviews.vue
@@ -35,14 +35,14 @@
 						<span class="text-ink-gray-7">
 							{{ review.creation }}
 						</span>
-						<div class="flex mt-2">
+						<div class="flex mt-2 space-x-1">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
+								class="size-4 text-transparent rounded-sm"
 								:class="
 									index <= Math.ceil(review.rating)
-										? 'fill-orange-500'
-										: 'fill-gray-600'
+										? 'fill-yellow-500'
+										: 'fill-gray-300'
 								"
 							/>
 						</div>
--- a/frontend/src/components/EmailTemplates.vue
+++ b/frontend/src/components/EmailTemplates.vue
@@ -0,0 +1,160 @@
+<template>
+	<div class="flex flex-col min-h-0 text-base">
+		<div class="flex items-center justify-between mb-5">
+			<div class="flex flex-col space-y-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{ label }}
+				</div>
+				<div class="text-xs text-ink-gray-5">
+					{{ __(description) }}
+				</div>
+			</div>
+			<div class="flex items-center space-x-5">
+				<Button @click="openTemplateForm('new')">
+					<template #prefix>
+						<Plus class="h-3 w-3 stroke-1.5" />
+					</template>
+					{{ __('New') }}
+				</Button>
+			</div>
+		</div>
+		<div v-if="emailTemplates.data?.length" class="overflow-y-scroll">
+			<ListView
+				:columns="columns"
+				:rows="emailTemplates.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					onRowClick: (row) => {
+						openTemplateForm(row.name)
+					},
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+				>
+					<ListHeaderItem :item="item" v-for="item in columns">
+						<template #prefix="{ item }">
+							<component
+								v-if="item.icon"
+								:is="item.icon"
+								class="h-4 w-4 stroke-1.5 ml-4"
+							/>
+						</template>
+					</ListHeaderItem>
+				</ListHeader>
+
+				<ListRows>
+					<ListRow :row="row" v-for="row in emailTemplates.data">
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div class="leading-5 text-sm">
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="removeTemplate(selections, unselectAll)"
+							>
+								<Trash2 class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
+		</div>
+	</div>
+	<EmailTemplateModal
+		v-model="showForm"
+		v-model:emailTemplates="emailTemplates"
+		:templateID="selectedTemplate"
+	/>
+</template>
+<script setup lang="ts">
+import {
+	Button,
+	call,
+	createListResource,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	toast,
+} from 'frappe-ui'
+import { computed, ref } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
+
+const props = defineProps({
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		default: '',
+	},
+})
+
+const showForm = ref(false)
+const readOnlyMode = window.read_only_mode
+const selectedTemplate = ref(null)
+
+const emailTemplates = createListResource({
+	doctype: 'Email Template',
+	fields: ['name', 'subject', 'use_html', 'response', 'response_html'],
+	auto: true,
+	orderBy: 'modified desc',
+	cache: 'email-templates',
+})
+
+const removeTemplate = (selections, unselectAll) => {
+	call('lms.lms.api.delete_documents', {
+		doctype: 'Email Template',
+		documents: Array.from(selections),
+	})
+		.then(() => {
+			emailTemplates.reload()
+			toast.success(__('Email Templates deleted successfully'))
+			unselectAll()
+		})
+		.catch((err) => {
+			toast.error(
+				cleanError(err.messages[0]) || __('Error deleting email templates')
+			)
+		})
+}
+
+const openTemplateForm = (templateID) => {
+	if (readOnlyMode) {
+		return
+	}
+	selectedTemplate.value = templateID
+	showForm.value = true
+}
+
+const columns = computed(() => {
+	return [
+		{
+			label: 'Name',
+			key: 'name',
+			width: '20rem',
+		},
+		{
+			label: 'Subject',
+			key: 'subject',
+			width: '25rem',
+		},
+	]
+})
+</script>
--- a/frontend/src/components/Evaluators.vue
+++ b/frontend/src/components/Evaluators.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="flex min-h-0 flex-col text-base">
 		<div class="flex items-center justify-between mb-4">
 			<div>
 				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
@@ -39,25 +39,27 @@
 			</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 class="overflow-y-scroll">
+			<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>
--- a/frontend/src/components/MobileLayout.vue
+++ b/frontend/src/components/MobileLayout.vue
@@ -1,60 +1,55 @@
 <template>
-	<div class="flex h-full flex-col">
+	<div class="flex h-full flex-col relative">
 		<div class="h-full pb-10" id="scrollContainer">
 			<slot />
 		</div>
-		<div
-			v-if="sidebarSettings.data"
-			class="fixed flex items-center justify-around border-t border-outline-gray-2 bottom-0 z-10 w-full bg-surface-white standalone:pb-4"
-			:style="{
-				gridTemplateColumns: `repeat(${
-					sidebarLinks.length + 1
-				}, minmax(0, 1fr))`,
-			}"
-		>
-			<button
-				v-for="tab in sidebarLinks"
-				:key="tab.label"
-				:class="isVisible(tab) ? 'block' : 'hidden'"
-				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
-				@click="handleClick(tab)"
+
+		<div class="relative z-20">
+			<!-- Dropdown menu -->
+			<div
+				class="fixed bottom-16 right-2 w-[80%] rounded-md bg-surface-white text-base p-5 space-y-4 shadow-md"
+				v-if="showMenu"
+				ref="menu"
 			>
-				<component
-					:is="icons[tab.icon]"
-					class="h-6 w-6 stroke-1.5"
-					:class="[isActive(tab) ? 'text-ink-gray-9' : 'text-ink-gray-5']"
-				/>
-			</button>
-			<Popover
-				trigger="hover"
-				popoverClass="bottom-28 mx-2"
-				placement="top-start"
+				<div
+					v-for="link in otherLinks"
+					:key="link.label"
+					class="flex items-center space-x-2 cursor-pointer"
+					@click="handleClick(link)"
+				>
+					<component
+						:is="icons[link.icon]"
+						class="h-4 w-4 stroke-1.5 text-ink-gray-5"
+					/>
+					<div>{{ link.label }}</div>
+				</div>
+			</div>
+
+			<!-- Fixed menu -->
+			<div
+				v-if="sidebarSettings.data"
+				class="fixed bottom-0 left-0 w-full flex items-center justify-around border-t border-outline-gray-2 bg-surface-white standalone:pb-4 z-10"
 			>
-				<template #target>
+				<button
+					v-for="tab in sidebarLinks"
+					:key="tab.label"
+					:class="isVisible(tab) ? 'block' : 'hidden'"
+					class="flex flex-col items-center justify-center py-3 transition active:scale-95"
+					@click="handleClick(tab)"
+				>
+					<component
+						:is="icons[tab.icon]"
+						class="h-6 w-6 stroke-1.5"
+						:class="[isActive(tab) ? 'text-ink-gray-9' : 'text-ink-gray-5']"
+					/>
+				</button>
+				<button @click="toggleMenu">
 					<component
 						:is="icons['List']"
 						class="h-6 w-6 stroke-1.5 text-ink-gray-5"
 					/>
-				</template>
-				<template #body-main>
-					<div class="text-base p-5 space-y-4">
-						<div
-							v-for="link in otherLinks"
-							:key="link.label"
-							class="flex items-center space-x-2"
-							@click="handleClick(link)"
-						>
-							<component
-								:is="icons[link.icon]"
-								class="h-4 w-4 stroke-1.5 text-ink-gray-5"
-							/>
-							<div>
-								{{ link.label }}
-							</div>
-						</div>
-					</div>
-				</template>
-			</Popover>
+				</button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -64,7 +59,6 @@ import { useRouter } from 'vue-router'
 import { watch, ref, onMounted } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/user'
-import { Popover } from 'frappe-ui'
 import * as icons from 'lucide-vue-next'

 const { logout, user, sidebarSettings } = sessionStore()
@@ -73,26 +67,47 @@ const router = useRouter()
 let { userResource } = usersStore()
 const sidebarLinks = ref(getSidebarLinks())
 const otherLinks = ref([])
+const showMenu = ref(false)
+const menu = ref(null)

 onMounted(() => {
 	sidebarSettings.reload(
 		{},
 		{
 			onSuccess(data) {
-				Object.keys(data).forEach((key) => {
-					if (!parseInt(data[key])) {
-						sidebarLinks.value = sidebarLinks.value.filter(
-							(link) => link.label.toLowerCase().split(' ').join('_') !== key
-						)
-					}
-				})
-
+				filterLinksToShow(data)
 				addOtherLinks()
 			},
 		}
 	)
 })

+const handleOutsideClick = (e) => {
+	if (menu.value && !menu.value.contains(e.target)) {
+		showMenu.value = false
+	}
+}
+
+watch(showMenu, (val) => {
+	if (val) {
+		setTimeout(() => {
+			document.addEventListener('click', handleOutsideClick)
+		}, 0)
+	} else {
+		document.removeEventListener('click', handleOutsideClick)
+	}
+})
+
+const filterLinksToShow = (data) => {
+	Object.keys(data).forEach((key) => {
+		if (!parseInt(data[key])) {
+			sidebarLinks.value = sidebarLinks.value.filter(
+				(link) => link.label.toLowerCase().split(' ').join('_') !== key
+			)
+		}
+	})
+}
+
 const addOtherLinks = () => {
 	if (user) {
 		otherLinks.value.push({
@@ -122,6 +137,7 @@ watch(userResource, () => {
 		(userResource.data.is_moderator || userResource.data.is_instructor)
 	) {
 		addQuizzes()
+		addAssignments()
 	}
 })

@@ -133,6 +149,14 @@ const addQuizzes = () => {
 	})
 }

+const addAssignments = () => {
+	otherLinks.value.push({
+		label: 'Assignments',
+		icon: 'Pencil',
+		to: 'Assignments',
+	})
+}
+
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)
 }
@@ -158,4 +182,8 @@ const isVisible = (tab) => {
 	else if (tab.label == 'Log out') return isLoggedIn
 	else return true
 }
+
+const toggleMenu = () => {
+	showMenu.value = !showMenu.value
+}
 </script>
--- a/frontend/src/components/Modals/AssignmentForm.vue
+++ b/frontend/src/components/Modals/AssignmentForm.vue
@@ -6,7 +6,7 @@
 		}"
 	>
 		<template #body>
-			<div class="p-5 text-base max-h-[75vh] overflow-y-auto">
+			<div class="p-5 text-base">
 				<div class="text-lg text-ink-gray-9 font-semibold mb-5">
 					{{
 						assignmentID === 'new'
@@ -14,7 +14,7 @@
 							: __('Edit Assignment')
 					}}
 				</div>
-				<div class="space-y-4">
+				<div class="space-y-4 max-h-[75vh] overflow-y-auto">
 					<FormControl
 						v-model="assignment.title"
 						:label="__('Title')"
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -0,0 +1,192 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title:
+				templateID == 'new'
+					? __('New Email Template')
+					: __('Edit Email Template'),
+			size: 'lg',
+			actions: [
+				{
+					label: __('Save'),
+					variant: 'solid',
+					onClick: ({ close }) => {
+						saveTemplate(close)
+					},
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<FormControl
+					:label="__('Name')"
+					v-model="template.name"
+					type="text"
+					:required="true"
+					:placeholder="__('Batch Enrollment Confirmation')"
+				/>
+				<FormControl
+					:label="__('Subject')"
+					v-model="template.subject"
+					type="text"
+					:required="true"
+					:placeholder="__('Your enrollment in {{ batch_name }} is confirmed')"
+				/>
+				<FormControl
+					:label="__('Use HTML')"
+					v-model="template.use_html"
+					type="checkbox"
+				/>
+				<FormControl
+					v-if="template.use_html"
+					:label="__('Content')"
+					v-model="template.response_html"
+					type="textarea"
+					:required="true"
+					:rows="10"
+					:placeholder="
+						__(
+							'<p>Dear {{ member_name }},</p>\n\n<p>You have been enrolled in our upcoming batch {{ batch_name }}.</p>\n\n<p>Thanks,</p>\n<p>Frappe Learning</p>'
+						)
+					"
+				/>
+				<div v-else>
+					<div class="text-xs text-ink-gray-5 mb-2">
+						{{ __('Content') }}
+						<span class="text-ink-red-3">*</span>
+					</div>
+					<TextEditor
+						:content="template.response"
+						@change="(val) => (template.response = val)"
+						:editable="true"
+						:fixedMenu="true"
+						:placeholder="
+							__(
+								'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
+							)
+						"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { reactive, watch } from 'vue'
+import { cleanError } from '@/utils'
+
+const props = defineProps({
+	templateID: {
+		type: String,
+		default: 'new',
+	},
+})
+
+const show = defineModel()
+const emailTemplates = defineModel('emailTemplates')
+const template = reactive({
+	name: '',
+	subject: '',
+	use_html: false,
+	response: '',
+	response_html: '',
+})
+
+const saveTemplate = (close) => {
+	if (props.templateID == 'new') {
+		createNewTemplate(close)
+	} else {
+		updateTemplate(close)
+	}
+}
+
+const createNewTemplate = (close) => {
+	emailTemplates.value.insert.submit(
+		{
+			__newname: template.name,
+			...template,
+		},
+		{
+			onSuccess() {
+				emailTemplates.value.reload()
+				refreshForm(close)
+				toast.success(__('Email Template created successfully'))
+			},
+			onError(err) {
+				refreshForm(close)
+				toast.error(
+					cleanError(err.messages[0]) || __('Error creating email template')
+				)
+			},
+		}
+	)
+}
+
+const updateTemplate = async (close) => {
+	if (props.templateID != template.name) {
+		await renameDoc()
+	}
+	setValue(close)
+}
+
+const setValue = (close) => {
+	emailTemplates.value.setValue.submit(
+		{
+			...template,
+			name: template.name,
+		},
+		{
+			onSuccess() {
+				emailTemplates.value.reload()
+				refreshForm(close)
+				toast.success(__('Email Template updated successfully'))
+			},
+			onError(err) {
+				refreshForm(close)
+				toast.error(
+					cleanError(err.messages[0]) || __('Error updating email template')
+				)
+			},
+		}
+	)
+}
+
+const renameDoc = async () => {
+	await call('frappe.client.rename_doc', {
+		doctype: 'Email Template',
+		old_name: props.templateID,
+		new_name: template.name,
+	})
+}
+
+watch(
+	() => props.templateID,
+	(val) => {
+		if (val !== 'new') {
+			emailTemplates.value?.data.forEach((row) => {
+				if (row.name === val) {
+					template.name = row.name
+					template.subject = row.subject
+					template.use_html = row.use_html
+					template.response = row.response
+					template.response_html = row.response_html
+				}
+			})
+		}
+	},
+	{ flush: 'post' }
+)
+
+const refreshForm = (close) => {
+	close()
+	template.name = ''
+	template.subject = ''
+	template.use_html = false
+	template.response = ''
+	template.response_html = ''
+}
+</script>
--- a/frontend/src/components/Modals/EvaluationModal.vue
+++ b/frontend/src/components/Modals/EvaluationModal.vue
@@ -66,7 +66,7 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, Select, FormControl } from 'frappe-ui'
+import { Dialog, createResource, Select, FormControl, toast } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
 import { formatTime } from '@/utils/'

@@ -90,7 +90,7 @@ const props = defineProps({
 	},
 })

-let evaluation = reactive({
+const evaluation = reactive({
 	course: '',
 	date: '',
 	start_time: '',
@@ -139,7 +139,7 @@ function submitEvaluation(close) {
 			close()
 		},
 		onError(err) {
-			let message = err.messages?.[0] || err
+			const message = err.messages?.[0] || err
 			let unavailabilityMessage

 			if (typeof message === 'string') {
@@ -148,13 +148,13 @@ function submitEvaluation(close) {
 				unavailabilityMessage = false
 			}

-			toast.warning(__('Evaluator is unavailable'))
+			toast.warning(__(unavailabilityMessage || 'Evaluator is unavailable'))
 		},
 	})
 }

 const getCourses = () => {
-	let courses = []
+	const courses = []
 	for (const course of props.courses) {
 		if (course.evaluator) {
 			courses.push({
@@ -164,7 +164,7 @@ const getCourses = () => {
 		}
 	}

-	if (courses.length == 1) {
+	if (courses.length === 1) {
 		evaluation.course = courses[0].value
 	}

--- a/frontend/src/components/Modals/FeedbackModal.vue
+++ b/frontend/src/components/Modals/FeedbackModal.vue
@@ -0,0 +1,115 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			size: '4xl',
+		}"
+	>
+		<template #body>
+			<div class="p-5 min-h-[300px]">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Training Feedback') }}
+				</div>
+				<ListView
+					:columns="feedbackColumns"
+					:rows="feedbackList"
+					row-key="name"
+					:options="{
+						showTooltip: false,
+						rowHeight: 'h-16',
+						selectable: false,
+					}"
+				>
+					<ListHeader
+						class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+					></ListHeader>
+					<ListRows>
+						<ListRow
+							:row="row"
+							v-for="row in feedbackList"
+							class="group feedback-list"
+						>
+							<template #default="{ column, item }">
+								<ListRowItem
+									:item="row[column.key]"
+									:align="column.align"
+									class="text-sm"
+								>
+									<template #prefix>
+										<div v-if="column.key == 'member_name'">
+											<Avatar
+												class="flex"
+												:image="row['member_image']"
+												:label="item"
+												size="sm"
+											/>
+										</div>
+									</template>
+									<div v-if="ratingKeys.includes(column.key)">
+										<Rating v-model="row[column.key]" :readonly="true" />
+									</div>
+									<div v-else class="leading-5">
+										{{ row[column.key] }}
+									</div>
+								</ListRowItem>
+							</template>
+						</ListRow>
+					</ListRows>
+				</ListView>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import {
+	Dialog,
+	ListView,
+	Avatar,
+	ListHeader,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Rating,
+} from 'frappe-ui'
+import { reactive, computed } from 'vue'
+
+const show = defineModel()
+const ratingKeys = ['content', 'instructors', 'value']
+
+const props = defineProps({
+	feedbackList: {
+		type: Array,
+		required: true,
+	},
+})
+
+const feedbackColumns = computed(() => {
+	return [
+		{
+			label: 'Member',
+			key: 'member_name',
+			width: '10rem',
+		},
+		{
+			label: 'Feedback',
+			key: 'feedback',
+			width: '15rem',
+		},
+		{
+			label: 'Content',
+			key: 'content',
+			width: '9rem',
+		},
+		{
+			label: 'Instructors',
+			key: 'instructors',
+			width: '9rem',
+		},
+		{
+			label: 'Value',
+			key: 'value',
+			width: '9rem',
+		},
+	]
+})
+</script>
--- a/frontend/src/components/Modals/ReviewModal.vue
+++ b/frontend/src/components/Modals/ReviewModal.vue
@@ -15,26 +15,20 @@
 	>
 		<template #body-content>
 			<div class="flex flex-col gap-4">
-				<div>
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Rating') }}
-					</div>
-					<Rating v-model="review.rating" />
-				</div>
-				<div>
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Review') }}
-					</div>
-					<Textarea type="text" size="md" rows="5" v-model="review.review" />
-				</div>
+				<Rating v-model="review.rating" :label="__('Rating')" />
+				<FormControl
+					:label="__('Review')"
+					type="textarea"
+					v-model="review.review"
+					:rows="5"
+				/>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Textarea, createResource, toast } from 'frappe-ui'
+import { Dialog, FormControl, createResource, toast, Rating } from 'frappe-ui'
 import { reactive } from 'vue'
-import Rating from '@/components/Controls/Rating.vue'

 const show = defineModel()
 const reviews = defineModel('reloadReviews')
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -51,6 +51,11 @@
 						:label="activeTab.label"
 						:description="activeTab.description"
 					/>
+					<EmailTemplates
+						v-else-if="activeTab.label === 'Email Templates'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+					/>
 					<PaymentSettings
 						v-else-if="activeTab.label === 'Payment Gateway'"
 						:label="activeTab.label"
@@ -86,6 +91,7 @@ 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 EmailTemplates from '@/components/EmailTemplates.vue'
 import BrandSettings from '@/components/BrandSettings.vue'
 import PaymentSettings from '@/components/PaymentSettings.vue'

@@ -122,7 +128,7 @@ const tabsStructure = computed(() => {
 							label: 'Enable Learning Paths',
 							name: 'enable_learning_paths',
 							description:
-								'This will enforce students to go through programs assigned to them in the correct order.',
+								'This will ensure students follow the assigned programs in order.',
 							type: 'checkbox',
 						},
 						{
@@ -139,11 +145,26 @@ const tabsStructure = computed(() => {
 								'If enabled, it sends google calendar invite to the student for evaluations.',
 							type: 'checkbox',
 						},
+						{
+							type: 'Column Break',
+						},
+						{
+							label: 'Batch Confirmation Template',
+							name: 'batch_confirmation_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
+						{
+							label: 'Certification Template',
+							name: 'certification_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
 						{
 							label: 'Unsplash Access Key',
 							name: 'unsplash_access_key',
 							description:
-								'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
+								'Allows users to pick a profile cover image from Unsplash. https://unsplash.com/documentation#getting-started.',
 							type: 'password',
 						},
 					],
@@ -160,6 +181,12 @@ const tabsStructure = computed(() => {
 					description:
 						'Configure the payment gateway and other payment related settings',
 					fields: [
+						{
+							label: 'Default Currency',
+							name: 'default_currency',
+							type: 'Link',
+							doctype: 'Currency',
+						},
 						{
 							label: 'Payment Gateway',
 							name: 'payment_gateway',
@@ -167,10 +194,7 @@ const tabsStructure = computed(() => {
 							doctype: 'Payment Gateway',
 						},
 						{
-							label: 'Default Currency',
-							name: 'default_currency',
-							type: 'Link',
-							doctype: 'Currency',
+							type: 'Column Break',
 						},
 						{
 							label: 'Apply GST for India',
@@ -207,9 +231,14 @@ const tabsStructure = computed(() => {
 				},
 				{
 					label: 'Categories',
-					description: 'Manage the members of your learning system',
+					description: 'Double click to edit the category',
 					icon: 'Network',
 				},
+				{
+					label: 'Email Templates',
+					description: 'Manage the email templates for your learning system',
+					icon: 'MailPlus',
+				},
 			],
 		},
 		{
@@ -235,28 +264,6 @@ const tabsStructure = computed(() => {
 							name: 'favicon',
 							type: 'Upload',
 						},
-						{
-							label: 'Footer Logo',
-							name: 'footer_logo',
-							type: 'Upload',
-						},
-						{
-							label: 'Address',
-							name: 'address',
-							type: 'textarea',
-							rows: 2,
-						},
-						{
-							label: 'Footer "Powered By"',
-							name: 'footer_powered',
-							type: 'textarea',
-							rows: 4,
-						},
-						{
-							label: 'Copyright',
-							name: 'copyright',
-							type: 'text',
-						},
 					],
 				},
 				{
@@ -299,24 +306,6 @@ const tabsStructure = computed(() => {
 						},
 					],
 				},
-				{
-					label: 'Email Templates',
-					icon: 'MailPlus',
-					fields: [
-						{
-							label: 'Batch Confirmation Template',
-							name: 'batch_confirmation_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
-						{
-							label: 'Certification Template',
-							name: 'certification_template',
-							doctype: 'Email Template',
-							type: 'Link',
-						},
-					],
-				},
 				{
 					label: 'Signup',
 					icon: 'LogIn',
--- a/frontend/src/components/PaymentSettings.vue
+++ b/frontend/src/components/PaymentSettings.vue
@@ -12,13 +12,13 @@
            /> -->
 		</div>
 		<div class="overflow-y-scroll">
-			<div class="flex space-x-4">
-				<SettingFields :fields="fields" :data="data.doc" class="w-1/2" />
+			<div class="flex flex-col divide-y">
+				<SettingFields :fields="fields" :data="data.doc" />
 				<SettingFields
 					v-if="paymentGateway.data"
 					:fields="paymentGateway.data.fields"
 					:data="paymentGateway.data.data"
-					class="w-1/2"
+					class="pt-5 my-0"
 				/>
 			</div>
 		</div>
@@ -60,9 +60,28 @@ const paymentGateway = createResource({
 			payment_gateway: props.data.doc.payment_gateway,
 		}
 	},
+	transform(data) {
+		arrangeFields(data.fields)
+		return data
+	},
 	auto: true,
 })

+const arrangeFields = (fields) => {
+	fields = fields.sort((a, b) => {
+		if (a.type === 'Upload' && b.type !== 'Upload') {
+			return 1
+		} else if (a.type !== 'Upload' && b.type === 'Upload') {
+			return -1
+		}
+		return 0
+	})
+
+	fields.splice(3, 0, {
+		type: 'Column Break',
+	})
+}
+
 const saveSettings = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
--- a/frontend/src/components/SettingFields.vue
+++ b/frontend/src/components/SettingFields.vue
@@ -6,7 +6,7 @@
 		<div v-for="(column, index) in columns" :key="index">
 			<div
 				class="flex flex-col space-y-5"
-				:class="columns.length > 1 ? 'w-72' : 'w-full'"
+				:class="columns.length > 1 ? 'w-[21rem]' : 'w-1/2'"
 			>
 				<div v-for="field in column">
 					<Link
@@ -14,6 +14,7 @@
 						v-model="data[field.name]"
 						:doctype="field.doctype"
 						:label="__(field.label)"
+						:description="__(field.description)"
 					/>

 					<div v-else-if="field.type == 'Code'">
@@ -54,11 +55,11 @@
 						<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 bg-white w-[10rem] py-2"
+									class="flex items-center justify-center rounded border border-outline-gray-1 bg-surface-gray-2 px-20 py-5"
 								>
 									<img
 										:src="data[field.name]?.file_url || data[field.name]"
-										class="w-[80%] rounded"
+										class="size-6 rounded"
 									/>
 								</div>
 								<div class="flex flex-col flex-wrap">
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -88,56 +88,61 @@
 									:scrollToBottom="false"
 								/>
 							</div>
-							<div v-else-if="tab.label == 'Feedback'">
-								<BatchFeedback :batch="batch.data.name" />
-							</div>
 						</div>
 					</template>
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-ink-gray-7 font-semibold mb-4">
-					{{ __('About this batch') }}:
-				</div>
-				<div
-					v-html="batch.data.description"
-					class="leading-5 mb-4 text-ink-gray-7"
-				></div>
-
-				<div class="flex items-center avatar-group overlap mb-5">
-					<div
-						class="h-6 mr-1"
-						:class="{
-							'avatar-group overlap': batch.data.instructors.length > 1,
-						}"
-					>
-						<UserAvatar
-							v-for="instructor in batch.data.instructors"
-							:user="instructor"
-						/>
+				<div class="mb-10">
+					<div class="text-ink-gray-7 font-semibold mb-2">
+						{{ __('About this batch') }}
+					</div>
+					<div
+						v-html="batch.data.description"
+						class="leading-5 mb-4 text-ink-gray-7"
+					></div>
+
+					<div class="flex items-center avatar-group overlap mb-5">
+						<div
+							class="h-6 mr-1"
+							:class="{
+								'avatar-group overlap': batch.data.instructors.length > 1,
+							}"
+						>
+							<UserAvatar
+								v-for="instructor in batch.data.instructors"
+								:user="instructor"
+							/>
+						</div>
+						<CourseInstructors :instructors="batch.data.instructors" />
+					</div>
+					<DateRange
+						:startDate="batch.data.start_date"
+						:endDate="batch.data.end_date"
+						class="mb-3"
+					/>
+					<div class="flex items-center mb-4 text-ink-gray-7">
+						<Clock class="h-4 w-4 stroke-1.5 mr-2" />
+						<span>
+							{{ formatTime(batch.data.start_time) }} -
+							{{ formatTime(batch.data.end_time) }}
+						</span>
+					</div>
+					<div
+						v-if="batch.data.timezone"
+						class="flex items-center mb-4 text-ink-gray-7"
+					>
+						<Globe class="h-4 w-4 stroke-1.5 mr-2" />
+						<span>
+							{{ batch.data.timezone }}
+						</span>
 					</div>
-					<CourseInstructors :instructors="batch.data.instructors" />
 				</div>
-				<DateRange
-					:startDate="batch.data.start_date"
-					:endDate="batch.data.end_date"
-					class="mb-3"
-				/>
-				<div class="flex items-center mb-4 text-ink-gray-7">
-					<Clock class="h-4 w-4 stroke-1.5 mr-2" />
-					<span>
-						{{ formatTime(batch.data.start_time) }} -
-						{{ formatTime(batch.data.end_time) }}
-					</span>
-				</div>
-				<div
-					v-if="batch.data.timezone"
-					class="flex items-center mb-4 text-ink-gray-7"
-				>
-					<Globe class="h-4 w-4 stroke-1.5 mr-2" />
-					<span>
-						{{ batch.data.timezone }}
-					</span>
+				<div v-if="dayjs().isSameOrAfter(dayjs(batch.data.start_date))">
+					<div class="text-ink-gray-7 font-semibold mb-2">
+						{{ __('Feedback') }}
+					</div>
+					<BatchFeedback :batch="batch.data?.name" />
 				</div>
 			</div>
 			<AnnouncementModal
@@ -234,6 +239,7 @@ import Discussions from '@/components/Discussions.vue'
 import DateRange from '@/components/Common/DateRange.vue'
 import BulkCertificates from '@/components/Modals/BulkCertificates.vue'
 import BatchFeedback from '@/components/BatchFeedback.vue'
+import dayjs from 'dayjs/esm'

 const user = inject('$user')
 const showAnnouncementModal = ref(false)
@@ -277,11 +283,6 @@ const tabs = computed(() => {
 		label: 'Discussions',
 		icon: MessageCircle,
 	})
-
-	batchTabs.push({
-		label: 'Feedback',
-		icon: ClipboardPen,
-	})
 	return batchTabs
 })

--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -37,14 +37,7 @@
 					<BatchOverlay :batch="batch" />
 				</div>
 			</div>
-			<!-- <div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
-				<div class="order-2 lg:order-none">
-					
-				</div>
-				<div class="order-1 lg:order-none">
-					<BatchOverlay :batch="batch" />
-				</div>
-			</div> -->
+			<BatchOverlay :batch="batch" class="md:hidden mt-5" />
 			<div v-if="batch.data.courses.length">
 				<div class="flex items-center mt-10">
 					<div class="text-2xl font-semibold">
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -153,6 +153,11 @@
 							doctype="Email Template"
 							:label="__('Email Template')"
 							v-model="batch.confirmation_email_template"
+							:onCreate="
+								(value, close) => {
+									openSettings('Email Templates', close)
+								}
+							"
 						/>
 					</div>
 					<div class="space-y-5">
--- a/frontend/src/pages/Batches.vue
+++ b/frontend/src/pages/Batches.vue
@@ -20,14 +20,12 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="batchCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Batches') }}
 			</div>
 			<div
-				v-if="batches.data?.length || batchCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons
@@ -115,12 +113,10 @@ const is_student = computed(() => user.data?.is_student)
 const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
 const orderBy = ref('start_date')
 const readOnlyMode = window.read_only_mode
-const batchCount = ref(0)

 onMounted(() => {
 	setFiltersFromQuery()
 	updateBatches()
-	getBatchCount()
 	categories.value = [
 		{
 			label: '',
@@ -298,14 +294,6 @@ const canCreateBatch = () => {
 	return false
 }

-const getBatchCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Batch',
-	}).then((data) => {
-		batchCount.value = data
-	})
-}
-
 const breadcrumbs = computed(() => [
 	{
 		label: __('Batches'),
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -20,7 +20,7 @@
 							:text="__('Average Rating')"
 							class="flex items-center"
 						>
-							<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
+							<Star class="size-4 text-transparent fill-yellow-500" />
 							<span class="ml-1 text-ink-gray-7">
 								{{ course.data.rating }}
 							</span>
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -20,14 +20,12 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="courseCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Courses') }}
 			</div>
 			<div
-				v-if="courses.data?.length || courseCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons :buttons="courseTabs" v-model="currentTab" />
@@ -172,6 +170,8 @@ const identifyUserPersona = async () => {
 }

 const getCourseCount = () => {
+	if (!user.data) return
+
 	call('frappe.client.get_count', {
 		doctype: 'LMS Course',
 	}).then((data) => {
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -561,3 +561,24 @@ export const openSettings = (category, close) => {
 	settingsStore.activeTab = category
 	settingsStore.isSettingsOpen = true
 }
+
+export const cleanError = (message) => {
+	// Remove HTML tags but keep the text within the tags
+
+	const cleanMessage = message.replace(/<[^>]+>/g, (match) => {
+		return match.replace(/<\/?[^>]+(>|$)/g, '')
+	})
+	return cleanMessage
+		.replace(/&nbsp;/g, ' ')
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot;/g, '"')
+		.replace(/&#39;/g, "'")
+		.replace(/&amp;/g, '&')
+		.replace(/&#x60;/g, '`')
+		.replace(/&#x3D;/g, '=')
+		.replace(/&#x2F;/g, '/')
+		.replace(/&#x2C;/g, ',')
+		.replace(/&#x3B;/g, ';')
+		.replace(/&#x3A;/g, ':')
+}