Merge branch 'develop' into fix/markdown-paste-render

2026-01-19 15:39:15 +05:30
parent 36d813b90f c310460727
commit 1e0e10ca59
44 changed files with 1137 additions and 846 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -15,7 +15,6 @@ import { useScreenSize } from './utils/composables'
 import { usersStore } from '@/stores/user'
 import { useSettings } from '@/stores/settings'
 import { useRouter } from 'vue-router'
-import { posthogSettings } from '@/telemetry'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
 import NoSidebarLayout from './components/NoSidebarLayout.vue'
@@ -49,10 +48,4 @@ const Layout = computed(() => {
 onUnmounted(() => {
 	noSidebar.value = false
 })
-
-watch(userResource, () => {
-	if (userResource.data) {
-		posthogSettings.reload()
-	}
-})
 </script>
--- a/frontend/src/components/AdminBatchDashboard.vue
+++ b/frontend/src/components/AdminBatchDashboard.vue
@@ -8,7 +8,7 @@
 		<div class="grid grid-cols-2 md:grid-cols-4 gap-5 mb-8">
 			<NumberChart
 				class="border rounded-md"
-				:config="{ title: __('Students'), value: students.data?.length || 0 }"
+				:config="{ title: __('Students'), value: studentCount.data || 0 }"
 			/>

 			<NumberChart
@@ -29,7 +29,7 @@

 			<NumberChart
 				class="border rounded-md"
-				:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
+				:config="{ title: __('Assessments'), value: assessmentCount.data || 0 }"
 			/>
 		</div>

@@ -37,7 +37,7 @@
 			v-if="showProgressChart"
 			class="border"
 			:config="{
-				data: chartData || [],
+				data: filteredChartData,
 				title: __('Batch Summary'),
 				subtitle: __('Progress of students in courses and assessments'),
 				xAxis: {
@@ -64,96 +64,55 @@
 </template>
 <script setup lang="ts">
 import { AxisChart, createResource, NumberChart } from 'frappe-ui'
-import { ref, watch } from 'vue'
-
-const chartData = ref<null | any[]>(null)
-const showProgressChart = ref(false)
-const assessmentCount = ref(0)
+import { computed } from 'vue'

 const props = defineProps<{
 	batch: { [key: string]: any } | null
 }>()

-const students = createResource({
-	url: 'lms.lms.utils.get_batch_students',
+const studentCount = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['batch_student_count', props.batch?.data?.name],
+	params: {
+		doctype: 'LMS Batch Enrollment',
+		filters: { batch: props.batch?.data?.name },
+	},
+	auto: true,
+})
+
+const assessmentCount = createResource({
+	url: 'lms.lms.utils.get_batch_assessment_count',
+	cache: ['batch_assessment_count', props.batch?.data?.name],
 	params: {
 		batch: props.batch?.data?.name,
 	},
 	auto: true,
-	onSuccess(data: any[]) {
-		chartData.value = getChartData()
-		showProgressChart.value =
-			data.length &&
-			(props.batch?.data?.courses?.length || assessmentCount.value)
-	},
 })

-const getChartData = () => {
-	let tasks: any[] = []
-	let data: { task: any; value: any }[] = []
-
-	students.data.forEach((row: any) => {
-		tasks = countAssessments(row, tasks)
-		tasks = countCourses(row, tasks)
-	})
-
-	tasks.forEach((task) => {
-		data.push({
-			task: task.label,
-			value: task.value,
-		})
-	})
-	return data
-}
-
-const countAssessments = (
-	row: { assessments: { [x: string]: { result: string } } },
-	tasks: any[]
-) => {
-	Object.keys(row.assessments).forEach((assessment) => {
-		if (row.assessments[assessment].result === 'Pass') {
-			tasks.filter((task) => task.label === assessment).length
-				? tasks.filter((task) => task.label === assessment)[0].value++
-				: tasks.push({
-						value: 1,
-						label: assessment,
-				  })
-		}
-	})
-	return tasks
-}
-
-const countCourses = (
-	row: { courses: { [x: string]: number } },
-	tasks: any[]
-) => {
-	Object.keys(row.courses).forEach((course) => {
-		if (row.courses[course] === 100) {
-			tasks.filter((task) => task.label === course).length
-				? tasks.filter((task) => task.label === course)[0].value++
-				: tasks.push({
-						value: 1,
-						label: course,
-				  })
-		}
-	})
-	return tasks
-}
+const chartData = createResource({
+	url: 'lms.lms.utils.get_batch_chart_data',
+	cache: ['batch_chart_data', props.batch?.data?.name],
+	params: { batch: props.batch?.data?.name },
+	auto: true,
+})

 const certificationCount = createResource({
 	url: 'frappe.client.get_count',
+	cache: ['batch_certificate_count', props.batch?.data?.name],
 	params: {
 		doctype: 'LMS Certificate',
-		filters: {
-			batch_name: props.batch?.data?.name,
-		},
+		filters: { batch_name: props.batch?.data?.name },
 	},
 	auto: true,
 })

-watch(students, () => {
-	if (students.data?.length) {
-		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
-	}
-})
+const filteredChartData = computed(() =>
+	(chartData.data || []).filter((item: { value: number }) => item.value > 0)
+)
+
+const showProgressChart = computed(
+	() =>
+		studentCount.data &&
+		(props.batch?.data?.courses?.length || assessmentCount.data)
+)
 </script>
--- a/frontend/src/components/BatchStudents.vue
+++ b/frontend/src/components/BatchStudents.vue
@@ -2,7 +2,7 @@
 	<div>
 		<div class="flex items-center justify-between mb-4">
 			<div class="text-ink-gray-9 font-medium">
-				{{ students.data?.length }} {{ __('Students') }}
+				{{ studentCount.data ?? 0 }} {{ __('Students') }}
 			</div>
 			<Button v-if="!readOnlyMode" @click="openStudentModal()">
 				<template #prefix>
@@ -15,7 +15,7 @@
 		<div v-if="students.data?.length">
 			<ListView
 				class="max-h-[75vh]"
-				:columns="getStudentColumns()"
+				:columns="studentColumns"
 				:rows="students.data"
 				row-key="name"
 				:options="{
@@ -27,7 +27,7 @@
 				>
 					<ListHeaderItem
 						:item="item"
-						v-for="item in getStudentColumns()"
+						v-for="item in studentColumns"
 						:title="item.label"
 					>
 						<template #prefix="{ item }">
@@ -88,6 +88,11 @@
 						</div>
 					</template>
 				</ListSelectBanner>
+				<div class="mt-4" v-if="students.hasNextPage">
+					<Button @click="students.next()">
+						{{ __('Load More') }}
+					</Button>
+				</div>
 			</ListView>
 		</div>
 		<div v-else-if="!students.loading" class="text-sm italic text-ink-gray-5">
@@ -110,6 +115,7 @@
 import {
 	Avatar,
 	Button,
+	createListResource,
 	createResource,
 	FeatherIcon,
 	ListHeader,
@@ -139,39 +145,48 @@ const props = defineProps({
 	},
 })

-const students = createResource({
-	url: 'lms.lms.utils.get_batch_students',
+const studentCount = createResource({
+	url: 'frappe.client.get_count',
+	cache: ['batch_student_count', props.batch?.data?.name],
 	params: {
+		doctype: 'LMS Batch Enrollment',
+		filters: { batch: props.batch?.data?.name },
+	},
+	auto: true,
+})
+
+const students = createListResource({
+	doctype: 'LMS Batch Enrollment',
+	url: 'lms.lms.utils.get_batch_students',
+	cache: ['batch_students', props.batch?.data?.name],
+	pageLength: 50,
+	filters: {
 		batch: props.batch?.data?.name,
 	},
 	auto: true,
 })

-const getStudentColumns = () => {
-	let columns = [
-		{
-			label: 'Full Name',
-			key: 'full_name',
-			width: '20rem',
-			icon: 'user',
-		},
-		{
-			label: 'Progress',
-			key: 'progress',
-			width: '15rem',
-			icon: 'activity',
-		},
-		{
-			label: 'Last Active',
-			key: 'last_active',
-			width: '10rem',
-			align: 'center',
-			icon: 'clock',
-		},
-	]
-
-	return columns
-}
+const studentColumns = [
+	{
+		label: 'Full Name',
+		key: 'full_name',
+		width: '20rem',
+		icon: 'user',
+	},
+	{
+		label: 'Progress',
+		key: 'progress',
+		width: '15rem',
+		icon: 'activity',
+	},
+	{
+		label: 'Last Active',
+		key: 'last_active',
+		width: '10rem',
+		align: 'center',
+		icon: 'clock',
+	},
+]

 const openStudentModal = () => {
 	showStudentModal.value = true
@@ -200,6 +215,7 @@ const removeStudents = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				students.reload()
+				studentCount.reload()
 				props.batch.reload()
 				toast.success(__('Students deleted successfully'))
 				unselectAll()
--- a/frontend/src/components/Controls/ChildTable.vue
+++ b/frontend/src/components/Controls/ChildTable.vue
@@ -3,55 +3,56 @@
 		<div class="text-xs text-ink-gray-5 mb-2">
 			{{ label }}
 		</div>
-		<div class="overflow-x-auto overflow-y-visible border rounded-md">
-			<div
-				class="grid items-center space-x-4 p-2 border-b"
-				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
-			>
+		<div class="overflow-visible border rounded-md">
+			<div class="overflow-x-auto">
 				<div
-					v-for="(column, index) in columns"
-					:key="index"
-					class="text-sm text-ink-gray-5"
+					class="grid items-center space-x-4 p-2 border-b"
+					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
-					{{ column }}
-				</div>
-				<div></div>
-			</div>
-			<div
-				v-for="(row, rowIndex) in rows"
-				:key="rowIndex"
-				class="grid items-center space-x-4 p-2"
-				:style="{ gridTemplateColumns: getGridTemplateColumns() }"
-			>
-				<template v-for="key in Object.keys(row)" :key="key">
-					<input
-						v-if="showKey(key)"
-						v-model="row[key]"
-						class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
-					/>
-				</template>
-
-				<div class="relative" ref="menuRef">
-					<Button
-						variant="ghost"
-						@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+					<div
+						v-for="(column, index) in columns"
+						:key="index"
+						class="text-sm text-ink-gray-5"
 					>
-						<template #icon>
-							<Ellipsis
-								class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
-							/>
-						</template>
-					</Button>
+						{{ column }}
+					</div>
+					<div></div>
+				</div>
+				<div
+					v-for="(row, rowIndex) in rows"
+					:key="rowIndex"
+					class="grid items-center space-x-4 p-2"
+					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
+				>
+					<template v-for="key in Object.keys(row)" :key="key">
+						<input
+							v-if="showKey(key)"
+							v-model="row[key]"
+							class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
+						/>
+					</template>
+
+					<div class="relative">
+						<Button
+							variant="ghost"
+							@click="(event: MouseEvent) => toggleMenu(rowIndex, event)"
+						>
+							<template #icon>
+								<Ellipsis
+									class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
+								/>
+							</template>
+						</Button>

-					<Teleport to="body">
 						<div
 							v-if="menuOpenIndex === rowIndex"
-							:style="{
-								position: 'absolute',
-								top: menuTopPosition,
-								left: menuLeftPosition,
-							}"
-							class="top-5 mt-1 w-32 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+							ref="menuRef"
+							class="absolute right-0 w-32 z-50 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+							:class="
+								rowIndex == (rows?.length ?? 0) - 1
+									? 'bottom-full mb-1'
+									: 'top-full mt-1'
+							"
 						>
 							<button
 								@click="deleteRow(rowIndex)"
@@ -63,7 +64,7 @@
 								</span>
 							</button>
 						</div>
-					</Teleport>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -154,10 +155,7 @@ const getGridTemplateColumns = () => {
 }

 const toggleMenu = (index: number, event: MouseEvent) => {
-	const rect = (event.target as HTMLElement).getBoundingClientRect()
-	menuOpenIndex.value = index
-	menuTopPosition.value = rect.bottom + 'px'
-	menuLeftPosition.value = rect.right + 'px'
+	menuOpenIndex.value = menuOpenIndex.value === index ? null : index
 }

 onClickOutside(menuRef, () => {
--- a/frontend/src/components/Controls/Uploader.vue
+++ b/frontend/src/components/Controls/Uploader.vue
@@ -70,7 +70,7 @@ const props = withDefaults(
 		modelValue: string
 		label?: string
 		description?: string
-		type: 'image' | 'video'
+		type?: 'image' | 'video'
 		required?: boolean
 	}>(),
 	{
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -189,15 +189,16 @@ import {
 import { computed, inject, ref } from 'vue'
 import { Badge, Button, call, createResource, toast } from 'frappe-ui'
 import { formatAmount } from '@/utils/'
-import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 import CertificationLinks from '@/components/CertificationLinks.vue'
 import CourseProgressSummary from '@/components/Modals/CourseProgressSummary.vue'
+import { useTelemetry } from 'frappe-ui/frappe'

 const router = useRouter()
 const user = inject('$user')
 const showProgressModal = ref(false)
 const readOnlyMode = window.read_only_mode
+const { capture } = useTelemetry()

 const props = defineProps({
 	course: {
@@ -215,7 +216,7 @@ const video_link = computed(() => {

 function enrollStudent() {
 	if (!user.data) {
-		toast.success(__('You need to login first to enroll for this course'))
+		toast.warning(__('You need to login first to enroll for this course'))
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
 		}, 500)
--- a/frontend/src/components/LiveClass.vue
+++ b/frontend/src/components/LiveClass.vue
@@ -107,7 +107,11 @@
 		v-model:reloadLiveClasses="liveClasses"
 	/>

-	<LiveClassAttendance v-model="showAttendance" :live_class="attendanceFor" />
+	<LiveClassAttendance
+		v-if="showAttendance"
+		v-model="showAttendance"
+		:live_class="attendanceFor"
+	/>
 </template>
 <script setup>
 import { createListResource, Button, Tooltip } from 'frappe-ui'
--- a/frontend/src/components/Modals/ChapterModal.vue
+++ b/frontend/src/components/Modals/ChapterModal.vue
@@ -80,13 +80,13 @@ import {
 } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
 import { getFileSize } from '@/utils/'
-import { capture } from '@/telemetry'
 import { FileText, X } from 'lucide-vue-next'
-import { useOnboarding } from 'frappe-ui/frappe'
+import { useOnboarding, useTelemetry } from 'frappe-ui/frappe'

 const show = defineModel()
 const outline = defineModel('outline')
 const user = inject('$user')
+const { capture } = useTelemetry()
 const { updateOnboardingStep } = useOnboarding('learning')

 const props = defineProps({
--- a/frontend/src/components/Modals/Event.vue
+++ b/frontend/src/components/Modals/Event.vue
@@ -22,7 +22,10 @@
 							</div>
 						</Tooltip>
 						<Tooltip :text="__('Course')">
-							<div class="flex items-center space-x-2 w-fit">
+							<div
+								class="flex space-x-2 w-fit cursor-pointer"
+								@click="openLink('course', event.course)"
+							>
 								<BookOpen class="h-4 w-4 stroke-1.5" />
 								<span>
 									{{ event.course_title }}
@@ -30,7 +33,10 @@
 							</div>
 						</Tooltip>
 						<Tooltip v-if="event.batch_title" :text="__('Batch')">
-							<div class="flex items-center space-x-2 w-fit">
+							<div
+								class="flex space-x-2 w-fit cursor-pointer"
+								@click="openLink('batch', event.batch_name)"
+							>
 								<Users class="h-4 w-4 stroke-1.5" />
 								<span>
 									{{ event.batch_title }}
@@ -334,7 +340,7 @@ const certificateDetails = createResource({
 		}
 	},
 	onError(err) {
-		certificate.template = defaultTemplate.data.value
+		certificate.template = defaultTemplate.data?.value
 	},
 	auto: false,
 })
@@ -377,6 +383,16 @@ const openCertificate = (certificate) => {
 	)
 }

+const openLink = (type, name) => {
+	let url = ''
+	if (type === 'course') {
+		url = `/lms/courses/${name}`
+	} else if (type === 'batch') {
+		url = `/lms/batches/${name}#students`
+	}
+	window.open(url, '_blank')
+}
+
 const statusOptions = computed(() => {
 	return [
 		{
--- a/frontend/src/components/Modals/ZoomAccountModal.vue
+++ b/frontend/src/components/Modals/ZoomAccountModal.vue
@@ -66,6 +66,7 @@ import { inject, reactive, watch } from 'vue'
 import { User } from '@/components/Settings/types'
 import { openSettings, cleanError } from '@/utils'
 import Link from '@/components/Controls/Link.vue'
+import { useTelemetry } from 'frappe-ui/frappe'

 interface ZoomAccount {
 	name: string
@@ -97,6 +98,7 @@ interface ZoomAccounts {
 const show = defineModel('show')
 const user = inject<User | null>('$user')
 const zoomAccounts = defineModel<ZoomAccounts>('zoomAccounts')
+const { capture } = useTelemetry()

 const account = reactive({
 	name: '',
@@ -154,6 +156,7 @@ const createAccount = (close: () => void) => {
 		},
 		{
 			onSuccess() {
+				capture('zoom_account_linked')
 				zoomAccounts.value?.reload()
 				close()
 				toast.success(__('Zoom Account created successfully'))
--- a/frontend/src/components/Sidebar/AppSidebar.vue
+++ b/frontend/src/components/Sidebar/AppSidebar.vue
@@ -199,7 +199,6 @@ import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
 import { Button, call, createResource, Tooltip, toast } 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 {
@@ -233,6 +232,7 @@ import {
 	showHelpModal,
 	minimize,
 	IntermediateStepModal,
+	useTelemetry,
 } from 'frappe-ui/frappe'
 import InviteIcon from '@/components/Icons/InviteIcon.vue'
 import UserDropdown from '@/components/Sidebar/UserDropdown.vue'
@@ -246,6 +246,7 @@ let sidebarStore = useSidebar()
 const socket = inject('$socket')
 const unreadCount = ref(0)
 const sidebarLinks = ref(null)
+const { capture } = useTelemetry()
 const showPageModal = ref(false)
 const isModerator = ref(false)
 const isInstructor = ref(false)
--- a/frontend/src/components/UpcomingEvaluations.vue
+++ b/frontend/src/components/UpcomingEvaluations.vue
@@ -190,7 +190,7 @@ const evaluationCourses = computed(() => {

 const canScheduleEvals = computed(() => {
 	return (
-		upcoming_evals.data?.length != evaluationCourses.length &&
+		upcoming_evals.data?.length != evaluationCourses.value?.length &&
 		!props.forHome &&
 		!endDateHasPassed.value
 	)
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -9,6 +9,7 @@ import translationPlugin from './translation'
 import { usersStore } from './stores/user'
 import { initSocket } from './socket'
 import { FrappeUI, setConfig, frappeRequest, pageMetaPlugin } from 'frappe-ui'
+import { telemetryPlugin } from 'frappe-ui/frappe'

 let pinia = createPinia()
 let app = createApp(App)
@@ -18,6 +19,7 @@ app.use(FrappeUI)
 app.use(pinia)
 app.use(router)
 app.use(translationPlugin)
+app.use(telemetryPlugin, { app_name: 'lms' })
 app.use(pageMetaPlugin)
 app.provide('$dayjs', dayjs)
 app.provide('$socket', initSocket())
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -281,22 +281,13 @@ import {
 import {
 	Breadcrumbs,
 	FormControl,
-	FileUploader,
 	Button,
 	TextEditor,
 	createResource,
 	usePageMeta,
 	toast,
 	call,
-	Toast,
 } from 'frappe-ui'
-import { useRouter } from 'vue-router'
-import { Image, Trash2 } from 'lucide-vue-next'
-import { capture } from '@/telemetry'
-import { useOnboarding } from 'frappe-ui/frappe'
-import { sessionStore } from '../stores/session'
-import MultiSelect from '@/components/Controls/MultiSelect.vue'
-import Link from '@/components/Controls/Link.vue'
 import {
 	escapeHTML,
 	getMetaInfo,
@@ -304,7 +295,13 @@ import {
 	sanitizeHTML,
 	updateMetaInfo,
 } from '@/utils'
+import { useRouter } from 'vue-router'
+import { Trash2 } from 'lucide-vue-next'
+import { useOnboarding, useTelemetry } from 'frappe-ui/frappe'
+import { sessionStore } from '../stores/session'
 import Uploader from '@/components/Controls/Uploader.vue'
+import MultiSelect from '@/components/Controls/MultiSelect.vue'
+import Link from '@/components/Controls/Link.vue'

 const router = useRouter()
 const user = inject('$user')
@@ -312,6 +309,7 @@ const { brand } = sessionStore()
 const { updateOnboardingStep } = useOnboarding('learning')
 const instructors = ref([])
 const app = getCurrentInstance()
+const { capture } = useTelemetry()
 const { $dialog } = app.appContext.config.globalProperties

 const props = defineProps({
--- a/frontend/src/pages/Batches.vue
+++ b/frontend/src/pages/Batches.vue
@@ -130,7 +130,6 @@
 import {
 	Breadcrumbs,
 	Button,
-	call,
 	createListResource,
 	Dropdown,
 	FormControl,
@@ -185,24 +184,27 @@ const batches = createListResource({
 	cache: ['batches', user.data?.name],
 	pageLength: pageLength.value,
 	start: start.value,
-	onSuccess(data) {
-		let allCategories = data.map((batch) => batch.category)
-		allCategories = allCategories.filter(
-			(category, index) => allCategories.indexOf(category) === index && category
-		)
-		if (categories.value.length <= allCategories.length) {
-			updateCategories(data)
-		}
-	},
 })

+const setCategories = (data) => {
+	let allCategories = data.map((batch) => batch.category)
+	allCategories = allCategories.filter(
+		(category, index) => allCategories.indexOf(category) === index && category
+	)
+	if (categories.value.length <= allCategories.length) {
+		updateCategories(data)
+	}
+}
+
 const updateBatches = () => {
 	updateFilters()
 	batches.update({
 		filters: filters.value,
 		orderBy: orderBy.value,
 	})
-	batches.reload()
+	batches.reload().then((data) => {
+		setCategories(data)
+	})
 }

 const updateFilters = () => {
--- a/frontend/src/pages/Billing.vue
+++ b/frontend/src/pages/Billing.vue
@@ -234,10 +234,12 @@ import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
 import { X } from 'lucide-vue-next'
+import { useTelemetry } from 'frappe-ui/frappe'

 const user = inject('$user')
 const { brand } = sessionStore()
 const showConsentWarning = ref(false)
+const { capture } = useTelemetry()

 onMounted(() => {
 	const script = document.createElement('script')
@@ -339,6 +341,7 @@ const generatePaymentLink = () => {
 				return validateAddress()
 			},
 			onSuccess(data) {
+				capture('checkout_initiated', { type: props.type })
 				window.location.href = data
 			},
 			onError(err) {
--- a/frontend/src/pages/CertifiedParticipants.vue
+++ b/frontend/src/pages/CertifiedParticipants.vue
@@ -3,7 +3,7 @@
 		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<router-link :to="{ name: 'Batches', query: { certification: true } }">
+		<router-link :to="{ name: 'Courses', query: { certification: true } }">
 			<Button>
 				<template #prefix>
 					<GraduationCap class="h-4 w-4 stroke-1.5" />
--- a/frontend/src/pages/CourseForm.vue
+++ b/frontend/src/pages/CourseForm.vue
@@ -75,58 +75,11 @@
 							</div>
 						</div>
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-							<div class="mb-4">
-								<div class="text-xs text-ink-gray-5 mb-2">
-									{{ __('Course Image') }}
-								</div>
-								<FileUploader
-									v-if="!course.course_image"
-									:fileTypes="['image/*']"
-									:validateFile="validateFile"
-									@success="(file) => saveImage(file)"
-								>
-									<template
-										v-slot="{ file, progress, uploading, openFileSelector }"
-									>
-										<div class="flex items-center">
-											<div
-												class="border rounded-md w-fit py-5 px-20 cursor-pointer"
-												@click="openFileSelector"
-											>
-												<Image class="size-5 stroke-1 text-ink-gray-7" />
-											</div>
-											<div class="ml-4">
-												<Button @click="openFileSelector">
-													{{ __('Upload') }}
-												</Button>
-												<div class="mt-1 text-ink-gray-5 text-sm leading-5">
-													{{
-														__('Appears on the course card in the course list')
-													}}
-												</div>
-											</div>
-										</div>
-									</template>
-								</FileUploader>
-								<div v-else class="mb-4">
-									<div class="flex items-center">
-										<img
-											:src="course.course_image.file_url"
-											class="border rounded-md w-40"
-										/>
-										<div class="ml-4">
-											<Button @click="removeImage()">
-												{{ __('Remove') }}
-											</Button>
-											<div class="mt-2 text-ink-gray-5 text-sm">
-												{{
-													__('Appears on the course card in the course list')
-												}}
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
+							<Uploader
+								v-model="course.image"
+								:label="__('Course Image')"
+								:required="false"
+							/>

 							<ColorSwatches
 								v-model="course.card_gradient"
@@ -333,7 +286,6 @@ import {
 	Button,
 	createResource,
 	FormControl,
-	FileUploader,
 	usePageMeta,
 	toast,
 } from 'frappe-ui'
@@ -347,23 +299,22 @@ import {
 	watch,
 	getCurrentInstance,
 } from 'vue'
-import { Image, Trash2, X } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
-import { capture, startRecording, stopRecording } from '@/telemetry'
-import { useOnboarding } from 'frappe-ui/frappe'
-import { sessionStore } from '../stores/session'
 import {
 	escapeHTML,
 	getMetaInfo,
 	openSettings,
 	sanitizeHTML,
 	updateMetaInfo,
-	validateFile,
 } from '@/utils'
+import { Trash2, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useOnboarding, useTelemetry } from 'frappe-ui/frappe'
+import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import ColorSwatches from '@/components/Controls/ColorSwatches.vue'
+import Uploader from '@/components/Controls/Uploader.vue'

 const user = inject('$user')
 const newTag = ref('')
@@ -372,6 +323,7 @@ const router = useRouter()
 const instructors = ref([])
 const related_courses = ref([])
 const app = getCurrentInstance()
+const { capture } = useTelemetry()
 const { updateOnboardingStep } = useOnboarding('learning')
 const { $dialog } = app.appContext.config.globalProperties

@@ -386,7 +338,7 @@ const course = reactive({
 	short_introduction: '',
 	description: '',
 	video_link: '',
-	course_image: null,
+	image: null,
 	card_gradient: '',
 	tags: '',
 	category: '',
@@ -418,7 +370,6 @@ onMounted(() => {
 		fetchCourseInfo()
 	} else {
 		capture('course_form_opened')
-		startRecording()
 	}
 	window.addEventListener('keydown', keyboardShortcut)
 })
@@ -441,7 +392,6 @@ const keyboardShortcut = (e) => {

 onBeforeUnmount(() => {
 	window.removeEventListener('keydown', keyboardShortcut)
-	stopRecording()
 })

 const courseCreationResource = createResource({
@@ -450,7 +400,7 @@ const courseCreationResource = createResource({
 		return {
 			doc: {
 				doctype: 'LMS Course',
-				image: course.course_image?.file_url || '',
+				image: course.image,
 				instructors: instructors.value.map((instructor) => ({
 					instructor: instructor,
 				})),
@@ -471,7 +421,7 @@ const courseEditResource = createResource({
 			doctype: 'LMS Course',
 			name: values.course,
 			fieldname: {
-				image: course.course_image?.file_url || '',
+				image: course.image,
 				instructors: instructors.value.map((instructor) => ({
 					instructor: instructor,
 				})),
@@ -521,24 +471,10 @@ const courseResource = createResource({
 			course[key] = course[key] ? true : false
 		}

-		if (data.image) imageResource.reload({ image: data.image })
 		check_permission()
 	},
 })

-const imageResource = createResource({
-	url: 'lms.lms.api.get_file_info',
-	makeParams(values) {
-		return {
-			file_url: values.image,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		course.course_image = data
-	},
-})
-
 const validateFields = () => {
 	course.description = sanitizeHTML(course.description)

@@ -655,14 +591,6 @@ const removeTag = (tag) => {
 	newTag.value = ''
 }

-const saveImage = (file) => {
-	course.course_image = file
-}
-
-const removeImage = () => {
-	course.course_image = null
-}
-
 const check_permission = () => {
 	let user_is_instructor = false
 	if (user.data?.is_moderator) return
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -168,9 +168,6 @@ const courses = createListResource({
 	cache: ['courses', user.data?.name],
 	pageLength: pageLength.value,
 	start: start.value,
-	onSuccess(data) {
-		setCategories(data)
-	},
 })

 const setCategories = (data) => {
@@ -205,7 +202,7 @@ const identifyUserPersona = async () => {

 const getCourseCount = () => {
 	if (!user.data) return
-
+	if (!user.data.is_moderator) return
 	call('frappe.client.get_count', {
 		doctype: 'LMS Course',
 	}).then((data) => {
@@ -219,7 +216,9 @@ const updateCourses = () => {
 	courses.update({
 		filters: filters.value,
 	})
-	courses.reload()
+	courses.reload().then((data) => {
+		setCategories(data)
+	})
 }

 const updateFilters = () => {
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -83,47 +83,11 @@
 							class="mb-4"
 							:required="true"
 						/>
-						<label class="block text-ink-gray-5 text-xs mb-1 mt-4">
-							{{ __('Company Logo') }}
-							<span class="text-ink-red-3">*</span>
-						</label>
-						<FileUploader
-							v-if="!job.image"
-							:fileTypes="['image/*']"
-							:validateFile="validateFile"
-							@success="(file) => saveImage(file)"
-						>
-							<template
-								v-slot="{ file, progress, uploading, openFileSelector }"
-							>
-								<div class="mb-4">
-									<Button @click="openFileSelector" :loading="uploading">
-										{{
-											uploading ? `Uploading ${progress}%` : 'Upload an image'
-										}}
-									</Button>
-								</div>
-							</template>
-						</FileUploader>
-						<div v-else class="">
-							<div class="flex items-center">
-								<div class="border rounded-md p-2 mr-2">
-									<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
-								</div>
-								<div class="flex flex-col">
-									<span>
-										{{ job.image.file_name }}
-									</span>
-									<span class="text-sm text-ink-gray-4 mt-1">
-										{{ getFileSize(job.image.file_size) }}
-									</span>
-								</div>
-								<X
-									@click="removeImage()"
-									class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-								/>
-							</div>
-						</div>
+						<Uploader
+							v-model="job.company_logo"
+							:label="__('Company Logo')"
+							:required="true"
+						/>
 					</div>
 				</div>
 			</div>
@@ -150,15 +114,14 @@ import {
 	createResource,
 	Button,
 	TextEditor,
-	FileUploader,
 	usePageMeta,
 	toast,
 } from 'frappe-ui'
 import { computed, onMounted, reactive, inject } from 'vue'
-import { FileText, X } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { useRouter } from 'vue-router'
-import { escapeHTML, getFileSize, sanitizeHTML, validateFile } from '@/utils'
+import { escapeHTML, sanitizeHTML } from '@/utils'
+import Uploader from '@/components/Controls/Uploader.vue'

 const user = inject('$user')
 const router = useRouter()
@@ -177,7 +140,7 @@ const newJob = createResource({
 		return {
 			doc: {
 				doctype: 'Job Opportunity',
-				company_logo: job.image?.file_url,
+				company_logo: job.company_logo,
 				...job,
 			},
 		}
@@ -191,7 +154,7 @@ const updateJob = createResource({
 			doctype: 'Job Opportunity',
 			name: props.jobName,
 			fieldname: {
-				company_logo: job.image.file_url,
+				company_logo: job.company_logo,
 				...job,
 			},
 		}
@@ -215,20 +178,6 @@ const jobDetail = createResource({
 		Object.keys(data).forEach((key) => {
 			if (Object.hasOwn(job, key)) job[key] = data[key]
 		})
-		if (data.company_logo) imageResource.reload({ image: data.company_logo })
-	},
-})
-
-const imageResource = createResource({
-	url: 'lms.lms.api.get_file_info',
-	makeParams(values) {
-		return {
-			file_url: values.image,
-		}
-	},
-	auto: false,
-	onSuccess(data) {
-		job.image = data
 	},
 })

@@ -241,7 +190,7 @@ const job = reactive({
 	status: 'Open',
 	company_name: '',
 	company_website: '',
-	image: null,
+	company_logo: null,
 	description: '',
 	company_email_address: '',
 })
@@ -322,14 +271,6 @@ const validateJobFields = () => {
 	})
 }

-const saveImage = (file) => {
-	job.image = file
-}
-
-const removeImage = () => {
-	job.image = null
-}
-
 const jobTypes = computed(() => {
 	return [
 		{ label: 'Full Time', value: 'Full Time' },
--- a/frontend/src/pages/LessonForm.vue
+++ b/frontend/src/pages/LessonForm.vue
@@ -99,14 +99,14 @@ import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
 import { getEditorTools, enablePlyr } from '@/utils'
-import { capture, startRecording, stopRecording } from '@/telemetry'
-import { useOnboarding } from 'frappe-ui/frappe'
+import { useOnboarding, useTelemetry } from 'frappe-ui/frappe'

 const { brand } = sessionStore()
 const editor = ref(null)
 const instructorEditor = ref(null)
 const user = inject('$user')
 const openInstructorEditor = ref(false)
+const { capture } = useTelemetry()
 const { updateOnboardingStep } = useOnboarding('learning')
 let autoSaveInterval
 let showSuccessMessage = false
@@ -131,7 +131,6 @@ onMounted(() => {
 		window.location.href = '/login'
 	}
 	capture('lesson_form_opened')
-	startRecording()
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
 	window.addEventListener('keydown', keyboardShortcut)
@@ -226,7 +225,6 @@ const keyboardShortcut = (e) => {
 onBeforeUnmount(() => {
 	clearInterval(autoSaveInterval)
 	window.removeEventListener('keydown', keyboardShortcut)
-	stopRecording()
 })

 const newLessonResource = createResource({
--- a/frontend/src/pages/Notifications.vue
+++ b/frontend/src/pages/Notifications.vue
@@ -26,7 +26,7 @@
 			class="flex space-x-2 px-2 py-4"
 			:class="{
 				'cursor-pointer': log.link,
-				'items-center': !showDetails(log) && !isMention(log),
+				'items-center': !showDetails(log) && !isMentionOrComment(log),
 			}"
 			@click="navigateToPage(log)"
 		>
@@ -56,9 +56,9 @@
 					</div>
 				</div>
 				<div
-					v-if="isMention(log)"
+					v-if="isMentionOrComment(log)"
 					v-html="log.email_content"
-					class="bg-surface-gray-2 rounded-md px-3 py-2"
+					class="bg-surface-gray-2 rounded-md px-3 py-2 line-clamp-3 overflow-hidden"
 				></div>
 				<div
 					v-else-if="showDetails(log)"
@@ -260,7 +260,7 @@ const navigateToPage = (log) => {
 	}
 }

-const isMention = (log) => {
+const isMentionOrComment = (log) => {
 	if (log.type == 'Mention') {
 		return true
 	}
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
@@ -1,12 +1,17 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '5xl' }">
+	<Dialog v-model="show" :options="{ size: '4xl' }">
 		<template #body-title>
-			<div class="text-xl font-semibold text-ink-gray-9">
-				{{
-					props.exerciseID === 'new'
-						? __('Create Programming Exercise')
-						: __('Edit Programming Exercise')
-				}}
+			<div class="flex items-center space-x-2">
+				<div class="text-xl font-semibold text-ink-gray-9">
+					{{
+						props.exerciseID === 'new'
+							? __('Create Programming Exercise')
+							: __('Edit Programming Exercise')
+					}}
+				</div>
+				<Badge v-if="isDirty" theme="orange">
+					{{ __('Not Saved') }}
+				</Badge>
 			</div>
 		</template>
 		<template #body-content>
@@ -59,7 +64,6 @@
 					@click="deleteExercise(close)"
 					variant="outline"
 					theme="red"
-					class="invisible group-hover:visible"
 				>
 					<template #prefix>
 						<Trash2 class="size-4 stroke-1.5" />
@@ -108,6 +112,7 @@
 import { computed, ref, watch } from 'vue'
 import { escapeHTML } from '@/utils'
 import {
+	Badge,
 	Button,
 	createListResource,
 	Dialog,
@@ -125,6 +130,8 @@ import ChildTable from '@/components/Controls/ChildTable.vue'

 const show = defineModel()
 const exercises = defineModel<ProgrammingExercises>('exercises')
+const isDirty = ref(false)
+const originalTestCaseCount = ref(0)

 const exercise = ref<ProgrammingExercise>({
 	title: '',
@@ -172,6 +179,7 @@ const setExerciseData = () => {
 			test_cases: [],
 		}
 	}
+	isDirty.value = false
 }

 const testCases = createListResource({
@@ -180,6 +188,14 @@ const testCases = createListResource({
 	cache: ['testCases', props.exerciseID],
 	parent: 'LMS Programming Exercise',
 	orderBy: 'idx',
+	onSuccess(data: TestCase[]) {
+		isDirty.value = false
+		originalTestCaseCount.value = data.length
+	},
+	onError(err: any) {
+		toast.error(__(err.messages?.[0] || err))
+		console.error('Error loading testCases:', err)
+	},
 })

 const fetchTestCases = () => {
@@ -191,13 +207,28 @@ const fetchTestCases = () => {
 		},
 	})
 	testCases.reload()
+	originalTestCaseCount.value = testCases.data.length
 }

 const validateTitle = () => {
 	exercise.value.title = escapeHTML(exercise.value.title.trim())
 }

-const saveExercise = (close: () => void) => {
+watch(
+	exercise,
+	() => {
+		isDirty.value = true
+	},
+	{ deep: true }
+)
+
+watch(testCases, () => {
+	if (testCases.data.length !== originalTestCaseCount.value) {
+		isDirty.value = true
+	}
+})
+
+const updateTestCasesInExercise = () => {
 	exercise.value.test_cases = testCases.data.map(
 		(tc: TestCase, index: number) => ({
 			input: tc.input,
@@ -205,7 +236,11 @@ const saveExercise = (close: () => void) => {
 			idx: index + 1,
 		})
 	)
+}
+
+const saveExercise = (close: () => void) => {
 	validateTitle()
+	updateTestCasesInExercise()
 	if (props.exerciseID == 'new') createNewExercise(close)
 	else updateExercise(close)
 }
@@ -218,6 +253,7 @@ const createNewExercise = (close: () => void) => {
 		{
 			onSuccess() {
 				close()
+				isDirty.value = false
 				exercises.value?.reload()
 				toast.success(__('Programming Exercise created successfully'))
 			},
@@ -237,6 +273,7 @@ const updateExercise = (close: () => void) => {
 		{
 			onSuccess() {
 				close()
+				isDirty.value = false
 				exercises.value?.reload()
 				toast.success(__('Programming Exercise updated successfully'))
 			},
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmissions.vue
@@ -6,27 +6,26 @@
 	</header>
 	<div class="p-6">
 		<div class="flex items-center justify-between space-x-32 mb-5">
-			<div class="text-xl font-semibold text-ink-gray-7">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{
 					submissions.data?.length
 						? __('{0} Submissions').format(submissions.data.length)
 						: __('No Submissions')
 				}}
 			</div>
-			<div
-				v-if="submissions.data?.length"
-				class="grid grid-cols-3 gap-5 flex-1"
-			>
+			<div v-if="submissions.data?.length" class="grid grid-cols-3 gap-5">
 				<Link
 					doctype="LMS Programming Exercise"
 					v-model="filters.exercise"
 					:placeholder="__('Filter by Exercise')"
+					class="w-40"
 				/>
 				<Link
 					doctype="User"
 					v-model="filters.member"
 					:placeholder="__('Filter by Member')"
 					:readonly="isStudent"
+					class="w-40"
 				/>
 				<FormControl
 					v-model="filters.status"
@@ -37,6 +36,7 @@
 						{ label: __('Failed'), value: 'Failed' },
 					]"
 					:placeholder="__('Filter by Status')"
+					class="w-40"
 				/>
 			</div>
 		</div>
@@ -47,6 +47,7 @@
 			rowKey="name"
 			:options="{
 				selectable: true,
+				showTooltip: false,
 			}"
 		>
 			<ListHeader
@@ -73,7 +74,7 @@
 						},
 					}"
 				>
-					<ListRow :row="row">
+					<ListRow :row="row" class="hover:bg-surface-gray-1">
 						<template #default="{ column, item }">
 							<ListRowItem :item="row[column.key]" :align="column.align">
 								<template #prefix>
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExercises.vue
@@ -33,50 +33,80 @@
 			</Button>
 		</div>
 	</header>
-	<div class="md:w-4/5 md:mx-auto p-5">
+	<div class="p-5">
 		<div class="flex items-center justify-between mb-5">
-			<div v-if="exerciseCount" class="text-lg font-semibold text-ink-gray-9">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('{0} Exercises').format(exerciseCount) }}
 			</div>
-			<div
-				v-if="exercises.data?.length || exerciseCount > 0"
-				class="grid grid-cols-2 gap-5"
-			>
-				<!-- <FormControl
-                    v-model="titleFilter"
-                    :placeholder="__('Search by title')"
-                />
-                <FormControl
-                    v-model="typeFilter"
-                    type="select"
-                    :options="assignmentTypes"
-                    :placeholder="__('Type')"
-                /> -->
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl
+					v-model="titleFilter"
+					:placeholder="__('Search by Title')"
+					@input="updateList"
+				/>
+				<FormControl
+					v-model="languageFilter"
+					type="select"
+					:options="languages"
+					:placeholder="__('Type')"
+					@update:modelValue="updateList"
+				/>
 			</div>
 		</div>

-		<div
-			v-if="exercises.data?.length"
-			class="grid grid-cols-1 md:grid-cols-3 gap-4"
-		>
-			<div
-				v-for="exercise in exercises.data"
-				:key="exercise.name"
-				@click="
-					() => {
-						exerciseID = exercise.name
+		<div v-if="exercises.data?.length">
+			<ListView
+				:columns="columns"
+				:rows="exercises.data"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					selectable: true,
+					onRowClick: (row: any) => {
+						if (readOnlyMode) return
+						exerciseID = row.name
 						showForm = true
-					}
-				"
-				class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-3 space-y-2 cursor-pointer"
+					},
+				}"
 			>
-				<div class="text-lg font-semibold text-ink-gray-9">
-					{{ exercise.title }}
-				</div>
-				<div class="text-sm text-ink-gray-7">
-					{{ exercise.language }}
-				</div>
-			</div>
+				<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 exercises.data"
+						class="hover:bg-surface-gray-1"
+					>
+						<template #default="{ column, item }">
+							<ListRowItem :item="row[column.key]" :align="column.align">
+								<div
+									v-if="column.key == 'modified'"
+									class="text-sm text-ink-gray-5"
+								>
+									{{ dayjs(row[column.key]).format('MMM D, YYYY') }}
+								</div>
+								<div v-else>
+									{{ row[column.key] }}
+								</div>
+							</ListRowItem>
+						</template>
+					</ListRow>
+				</ListRows>
+				<ListSelectBanner>
+					<template #actions="{ unselectAll, selections }">
+						<div class="flex gap-2">
+							<Button
+								variant="ghost"
+								@click="showDeleteConfirmation(selections, unselectAll)"
+							>
+								<FeatherIcon name="trash-2" class="h-4 w-4 stroke-1.5" />
+							</Button>
+						</div>
+					</template>
+				</ListSelectBanner>
+			</ListView>
 		</div>
 		<EmptyState v-else type="Programming Exercises" />
 		<div
@@ -95,12 +125,22 @@
 	/>
 </template>
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue'
 import {
 	Breadcrumbs,
 	Button,
 	call,
 	createListResource,
+	dayjs,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	FeatherIcon,
+	ListSelectBanner,
+	toast,
 	usePageMeta,
 } from 'frappe-ui'
 import { ClipboardList, Plus } from 'lucide-vue-next'
@@ -114,7 +154,11 @@ const { brand } = sessionStore()
 const showForm = ref<boolean>(false)
 const exerciseID = ref<string | null>('new')
 const user = inject<any>('$user')
+const titleFilter = ref<string>('')
+const languageFilter = ref<string>('')
 const router = useRouter()
+const app = getCurrentInstance()
+const { $dialog } = app?.appContext.config.globalProperties

 onMounted(() => {
 	validatePermissions()
@@ -133,9 +177,10 @@ const validatePermissions = () => {
 	}
 }

-const getExerciseCount = () => {
+const getExerciseCount = (filters: any = {}) => {
 	call('frappe.client.get_count', {
 		doctype: 'LMS Programming Exercise',
+		filters: filters,
 	})
 		.then((count: number) => {
 			exerciseCount.value = count
@@ -148,11 +193,98 @@ const getExerciseCount = () => {
 const exercises = createListResource({
 	doctype: 'LMS Programming Exercise',
 	cache: ['programmingExercises'],
-	fields: ['name', 'title', 'language', 'problem_statement'],
+	fields: ['name', 'title', 'language', 'problem_statement', 'modified'],
 	auto: true,
 	orderBy: 'modified desc',
 })

+const updateList = () => {
+	let filters = getFilters()
+	exercises.update({
+		filters: filters,
+	})
+	exercises.reload()
+	getExerciseCount(filters)
+}
+
+const getFilters = () => {
+	let filters: any = {}
+	if (titleFilter.value) {
+		filters['title'] = ['like', `%${titleFilter.value}%`]
+	}
+	if (languageFilter.value && languageFilter.value.trim() !== '') {
+		filters['language'] = languageFilter.value
+	}
+	return filters
+}
+
+const showDeleteConfirmation = (
+	selections: Set<string>,
+	unselectAll: () => void
+) => {
+	$dialog({
+		title: __('Confirm Your Action'),
+		message: __(
+			'Deleting these exercises will permanently remove them from the system, along with all associated submissions. This action is irreversible. Are you sure you want to proceed?'
+		),
+		actions: [
+			{
+				label: __('Delete'),
+				theme: 'red',
+				variant: 'solid',
+				onClick(close: () => void) {
+					deleteExercises(selections, unselectAll)
+					close()
+				},
+			},
+		],
+	})
+}
+
+const deleteExercises = (selections: Set<string>, unselectAll: () => void) => {
+	Array.from(selections).forEach(async (exerciseName) => {
+		call('lms.lms.api.delete_programming_exercise', {
+			exercise: exerciseName,
+		})
+			.then(() => {
+				toast.success(__('Exercise deleted successfully'))
+				updateList()
+			})
+			.catch((error: any) => {
+				toast.error(__(error.message || error))
+				console.error('Error deleting exercise:', error)
+			})
+	})
+	unselectAll()
+}
+
+const languages = [
+	{ label: ' ', value: ' ' },
+	{ label: 'Python', value: 'Python' },
+	{ label: 'JavaScript', value: 'JavaScript' },
+]
+
+const columns = computed(() => {
+	return [
+		{
+			label: __('Title'),
+			key: 'title',
+			width: 3,
+		},
+		{
+			label: __('Language'),
+			key: 'language',
+			width: 2,
+			align: 'left',
+		},
+		{
+			label: __('Updated On'),
+			key: 'modified',
+			width: 1,
+		},
+	]
+})
+
 usePageMeta(() => {
 	return {
 		title: __('Programming Exercises'),
--- a/frontend/src/pages/QuizForm.vue
+++ b/frontend/src/pages/QuizForm.vue
@@ -258,9 +258,7 @@ onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
 		router.push({ name: 'Courses' })
 	}
-	if (props.quizID !== 'new') {
-		quizDetails.reload()
-	}
+	quizDetails.reload()
 	window.addEventListener('keydown', keyboardShortcut)
 })

@@ -403,7 +401,7 @@ const breadcrumbs = computed(() => {
 	]

 	crumbs.push({
-		label: props.quizID == 'new' ? __('New Quiz') : quizDetails.doc?.title,
+		label: quizDetails.doc?.title,
 		route: { name: 'QuizForm', params: { quizID: props.quizID } },
 	})
 	return crumbs
@@ -411,7 +409,7 @@ const breadcrumbs = computed(() => {

 usePageMeta(() => {
 	return {
-		title: props.quizID == 'new' ? __('New Quiz') : quizDetails.doc?.title,
+		title: quizDetails.doc?.title,
 		icon: brand.favicon,
 	}
 })
--- a/frontend/src/pages/Quizzes.vue
+++ b/frontend/src/pages/Quizzes.vue
@@ -144,9 +144,11 @@ import { computed, inject, onMounted, ref, watch } from 'vue'
 import { Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { escapeHTML } from '@/utils'
+import { useTelemetry } from 'frappe-ui/frappe'
 import EmptyState from '@/components/EmptyState.vue'

 const { brand } = sessionStore()
+const { capture } = useTelemetry()
 const user = inject('$user')
 const dayjs = inject('$dayjs')
 const router = useRouter()
@@ -216,6 +218,7 @@ const insertQuiz = (close) => {
 				toast.success(__('Quiz created successfully'))
 				close()
 				title.value = ''
+				capture('quiz_created')
 				router.push({
 					name: 'QuizForm',
 					params: {
--- a/frontend/src/telemetry.ts
+++ b/frontend/src/telemetry.ts
@@ -1,90 +0,0 @@
-import '../../../frappe/frappe/public/js/lib/posthog.js'
-import { createResource } from 'frappe-ui'
-
-declare global {
-  interface Window {
-    posthog: any
-  }
-}
-
-type PosthogSettings = {
-  posthog_project_id: string
-  posthog_host: string
-  enable_telemetry: boolean
-  telemetry_site_age: number
-}
-
-interface CaptureOptions {
-  data: {
-    user: string
-    [key: string]: string | number | boolean | object
-  }
-}
-
-let posthog: typeof window.posthog = window.posthog
-
-// Posthog Settings
-let posthogSettings = createResource({
-  url: 'lms.lms.telemetry.get_posthog_settings',
-  cache: 'posthog_settings',
-  onSuccess: (ps: PosthogSettings) => initPosthog(ps),
-})
-
-let isTelemetryEnabled = () => {
-  if (!posthogSettings.data) return false
-
-  return (
-    posthogSettings.data.enable_telemetry &&
-    posthogSettings.data.posthog_project_id &&
-    posthogSettings.data.posthog_host
-  )
-}
-
-// Posthog Initialization
-function initPosthog(ps: PosthogSettings) {
-  if (!isTelemetryEnabled()) return
-
-  posthog.init(ps.posthog_project_id, {
-    api_host: ps.posthog_host,
-    person_profiles: 'identified_only',
-    autocapture: false,
-    capture_pageview: true,
-    capture_pageleave: true,
-    enable_heatmaps: false,
-    disable_session_recording: false,
-    loaded: (ph: typeof posthog) => {
-      window.posthog = ph
-      ph.identify(window.location.hostname)
-    },
-  })
-}
-
-// Posthog Functions
-function capture(
-  event: string,
-  options: CaptureOptions = { data: { user: '' } },
-) {
-  if (!isTelemetryEnabled()) return
-  window.posthog.capture(`lms_${event}`, options)
-}
-
-function startRecording() {
-}
-
-function stopRecording() {
-}
-
-// Posthog Plugin
-function posthogPlugin(app: any) {
-    app.config.globalProperties.posthog = posthog
-    if (!window.posthog?.length) posthogSettings.fetch()
-}
-
-export {
-  posthog,
-  posthogSettings,
-  posthogPlugin,
-  capture,
-  startRecording,
-  stopRecording,
-}
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -529,6 +529,13 @@ const getSidebarItems = () => {
 					condition: () => {
 						return isAdmin()
 					},
+					activeFor: [
+						'Quizzes',
+						'QuizForm',
+						'QuizPage',
+						'QuizSubmissionList',
+						'QuizSubmission',
+					],
 				},
 				{
 					label: 'Assignments',
@@ -537,6 +544,11 @@ const getSidebarItems = () => {
 					condition: () => {
 						return isAdmin()
 					},
+					activeFor: [
+						'Assignments',
+						'AssignmentSubmissionList',
+						'AssignmentSubmission',
+					],
 				},
 				{
 					label: 'Programming Exercises',
@@ -545,6 +557,11 @@ const getSidebarItems = () => {
 					condition: () => {
 						return isAdmin()
 					},
+					activeFor: [
+						'ProgrammingExercises',
+						'ProgrammingExerciseSubmissions',
+						'ProgrammingExerciseSubmission',
+					],
 				},
 			],
 		},