fix: misc issues

frontend/src/components/BatchStudents.vue

@@ -1,70 +1,8 @@
 <template>
-	<div v-if="batch.data" class="">
-		<div class="w-full flex items-center justify-between pb-4">
-			<div class="font-medium text-ink-gray-7">
-				{{ __('Statistics') }}
-			</div>
-		</div>
-		<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 }"
-			/>
-
-			<NumberChart
-				class="border rounded-md"
-				:config="{
-					title: __('Certified'),
-					value: certificationCount.data || 0,
-				}"
-			/>
-
-			<NumberChart
-				class="border rounded-md"
-				:config="{
-					title: __('Courses'),
-					value: batch.data.courses?.length || 0,
-				}"
-			/>
-
-			<NumberChart
-				class="border rounded-md"
-				:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
-			/>
-		</div>
-
-		<AxisChart
-			v-if="showProgressChart"
-			:config="{
-				data: chartData,
-				title: __('Batch Summary'),
-				subtitle: __('Progress of students in courses and assessments'),
-				xAxis: {
-					key: 'task',
-					title: 'Tasks',
-					type: 'category',
-				},
-				yAxis: {
-					title: __('Number of Students'),
-					echartOptions: {
-						minInterval: 1,
-					},
-				},
-				swapXY: true,
-				series: [
-					{
-						name: 'value',
-						type: 'bar',
-					},
-				],
-			}"
-		/>
-	</div>
-
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-ink-gray-7 font-medium">
-				{{ __('Students') }}
+			<div class="text-ink-gray-9 font-medium">
+				{{ students.data?.length }} {{ __('Students') }}
 			</div>
 			<Button v-if="!readOnlyMode" @click="openStudentModal()">
 				<template #prefix>
@@ -76,6 +14,7 @@
 
 		<div v-if="students.data?.length">
 			<ListView
+				class="max-h-[75vh]"
 				:columns="getStudentColumns()"
 				:rows="students.data"
 				row-key="name"
@@ -151,7 +90,7 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
-		<div v-else class="text-sm italic text-ink-gray-5">
+		<div v-else-if="!students.loading" class="text-sm italic text-ink-gray-5">
 			{{ __('There are no students in this batch.') }}
 		</div>
 	</div>
@@ -170,7 +109,6 @@
 <script setup>
 import {
 	Avatar,
-	AxisChart,
 	Button,
 	createResource,
 	FeatherIcon,
@@ -181,30 +119,17 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	NumberChart,
 	toast,
 } from 'frappe-ui'
-import {
-	BookOpen,
-	GraduationCap,
-	Plus,
-	ShieldCheck,
-	Trash2,
-	User,
-} from 'lucide-vue-next'
-import { ref, watch } from 'vue'
+import { Plus, Trash2 } from 'lucide-vue-next'
+import { ref } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue'
-import ApexChart from 'vue3-apexcharts'
-import { theme } from '@/utils/theme'
 
 const showStudentModal = ref(false)
 const showStudentProgressModal = ref(false)
 const selectedStudent = ref(null)
-const chartData = ref(null)
-const showProgressChart = ref(false)
-const assessmentCount = ref(0)
 const readOnlyMode = window.read_only_mode
 
 const props = defineProps({
@@ -220,12 +145,6 @@ const students = createResource({
 		batch: props.batch?.data?.name,
 	},
 	auto: true,
-	onSuccess(data) {
-		chartData.value = getChartData()
-		showProgressChart.value =
-			data.length &&
-			(props.batch?.data?.courses?.length || assessmentCount.value)
-	},
 })
 
 const getStudentColumns = () => {
@@ -288,67 +207,4 @@ const removeStudents = (selections, unselectAll) => {
 		}
 	)
 }
-
-const getChartData = () => {
-	let tasks = []
-	let data = []
-
-	students.data.forEach((row) => {
-		tasks = countAssessments(row, tasks)
-		tasks = countCourses(row, tasks)
-	})
-
-	tasks.forEach((task) => {
-		data.push({
-			task: task.label,
-			value: task.value,
-		})
-	})
-	return data
-}
-
-const countAssessments = (row, tasks) => {
-	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, tasks) => {
-	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
-}
-
-watch(students, () => {
-	if (students.data?.length) {
-		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
-	}
-})
-
-const certificationCount = createResource({
-	url: 'frappe.client.get_count',
-	params: {
-		doctype: 'LMS Certificate',
-		filters: {
-			batch_name: props.batch?.data?.name,
-		},
-	},
-	auto: true,
-})
 </script>