fix: legends

frontend/src/components/BatchStudents.vue

@@ -1,5 +1,10 @@
 <template>
 	<div class="">
+		<div class="w-full flex items-center justify-between border-b pb-4">
+			<div class="font-medium text-gray-600">
+				{{ __('Statistics') }}
+			</div>
+		</div>
 		<div class="grid grid-cols-3 gap-5 mb-8">
 			<div class="flex items-center shadow py-2 px-3 rounded-md">
 				<div class="p-2 rounded-md bg-gray-100 mr-3">
@@ -44,7 +49,7 @@
 			</div>
 		</div>
 		<div class="mb-8">
-			<div class="text-lg font-semibold">
+			<div class="text-gray-600 font-medium">
 				{{ __('Progress') }}
 			</div>
 			<ApexChart
@@ -54,9 +59,28 @@
 				type="bar"
 				height="350"
 			/>
+			<div
+				class="flex items-center justify-center text-sm text-gray-700 space-x-4"
+			>
+				<div class="flex items-center space-x-2">
+					<div class="w-3 h-3" style="background-color: #0289f7"></div>
+					<div>
+						{{ __('Courses') }}
 					</div>
+				</div>
+				<div class="flex items-center space-x-2">
+					<div class="w-3 h-3" style="background-color: #e03636"></div>
+					<div>
+						{{ __('Assessments') }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold">
+			<div class="text-gray-600 font-medium">
 				{{ __('Students') }}
 			</div>
 			<Button @click="openStudentModal()">
@@ -66,7 +90,7 @@
 				{{ __('Add') }}
 			</Button>
 		</div>
-	</div>
+
 		<div v-if="students.data?.length">
 			<ListView
 				:columns="getStudentColumns()"
@@ -140,6 +164,8 @@
 		<div v-else class="text-sm italic text-gray-600">
 			{{ __('There are no students in this batch.') }}
 		</div>
+	</div>
+
 	<StudentModal
 		:batch="props.batch.name"
 		v-model="showStudentModal"
@@ -267,6 +293,7 @@ const getChartData = () => {
 		categories[course] = {
 			value: 0,
 			type: 'course',
+			label: course,
 		}
 	})
 
@@ -274,6 +301,7 @@ const getChartData = () => {
 		categories[assessment] = {
 			value: 0,
 			type: 'assessment',
+			label: assessment,
 		}
 	})
 
@@ -294,15 +322,15 @@ const getChartData = () => {
 	chartOptions.value = getChartOptions(categories)
 	return [
 		{
-			name: __('Student Progress'),
+			name: __('Completed by Students'),
 			data: Object.values(categories).map((item) => item.value),
 		},
 	]
 }
 
 const getChartOptions = (categories) => {
-	const courseColor = '#318AD8'
+	const courseColor = '#0289F7'
-	const assessmentColor = '#F683AE'
+	const assessmentColor = '#E03636'
 	const maxY = Math.ceil(students.data?.length / 10) * 10
 
 	return {
@@ -325,21 +353,17 @@ const getChartOptions = (categories) => {
 			item.type === 'course' ? courseColor : assessmentColor
 		),
 		legends: {
-			show: true,
+			show: false,
-			markers: {
-				fillColors: [courseColor, assessmentColor],
-			},
 		},
 		xaxis: {
-			categories: ['Courses', 'Assessments'],
+			categories: Object.values(categories).map((item) => item.label),
-			overwriteCategories: Object.keys(categories),
 			labels: {
 				style: {
 					fontSize: '10px',
 				},
 				rotate: 0,
 				formatter: function (value) {
-					return value.length > 25 ? `${value.substring(0, 25)}...` : value // Trim long labels
+					return value.length > 22 ? `${value.substring(0, 22)}...` : value // Trim long labels
 				},
 			},
 		},
@@ -358,3 +382,8 @@ watch(students, () => {
 	}
 })
 </script>
+<style>
+.apexcharts-legend {
+	display: none !important;
+}
+</style>

frontend/src/pages/Batch.vue

@@ -59,15 +59,17 @@
 							<div v-if="tab.label == 'Courses'">
 								<BatchCourses :batch="batch.data.name" />
 							</div>
-							<div v-else-if="tab.label == 'Dashboard'">
+							<div v-else-if="tab.label == 'Dashboard' && isStudent">
 								<BatchDashboard :batch="batch" :isStudent="isStudent" />
 							</div>
+							<div
+								v-else-if="tab.label == 'Dashboard' && user.data?.is_moderator"
+							>
+								<BatchStudents :batch="batch.data" />
+							</div>
 							<div v-else-if="tab.label == 'Live Class'">
 								<LiveClass :batch="batch.data.name" />
 							</div>
-							<div v-else-if="tab.label == 'Students'">
-								<BatchStudents :batch="batch.data" />
-							</div>
 							<div v-else-if="tab.label == 'Assessments'">
 								<Assessments :batch="batch.data.name" />
 							</div>
@@ -259,34 +261,33 @@ const isStudent = computed(() => {
 const tabIndex = ref(0)
 const tabs = computed(() => {
 	let batchTabs = []
-	if (isStudent.value) {
 	batchTabs.push({
 		label: 'Dashboard',
 		icon: LayoutDashboard,
 	})
-	}
+
-	if (user.data?.is_moderator) {
 	batchTabs.push({
-			label: 'Students',
+		label: 'Courses',
-			icon: Contact2,
+		icon: BookOpen,
 	})
+
+	batchTabs.push({
+		label: 'Live Class',
+		icon: Laptop,
+	})
+
+	if (user.data?.is_moderator) {
 		batchTabs.push({
 			label: 'Assessments',
 			icon: BookOpenCheck,
 		})
 	}
-	batchTabs.push({
+
-		label: 'Live Class',
-		icon: Laptop,
-	})
-	batchTabs.push({
-		label: 'Courses',
-		icon: BookOpen,
-	})
 	batchTabs.push({
 		label: 'Announcements',
 		icon: Mail,
 	})
+
 	batchTabs.push({
 		label: 'Discussions',
 		icon: MessageCircle,