From 79177b5f5b1b7c886486230055f75240025eb440 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 6 Jan 2025 15:42:44 +0530
Subject: [PATCH 1/2] feat: students heatmap

---
 frontend/src/components/BatchDashboard.vue    |   7 +-
 .../Modals/BatchStudentProgress.vue           | 100 ++++++++----------
 frontend/src/components/StudentHeatmap.vue    |  90 ++++++++++++++++
 .../src/components/UpcomingEvaluations.vue    |  18 ++--
 lms/lms/api.py                                |  63 ++++++++++-
 5 files changed, 209 insertions(+), 69 deletions(-)
 create mode 100644 frontend/src/components/StudentHeatmap.vue

diff --git a/frontend/src/components/BatchDashboard.vue b/frontend/src/components/BatchDashboard.vue
index 3c1b6aad9..b4d51bc4b 100644
--- a/frontend/src/components/BatchDashboard.vue
+++ b/frontend/src/components/BatchDashboard.vue
@@ -1,17 +1,18 @@
 <template>
-	<div>
+	<div class="space-y-10">
+		<Assessments :batch="batch.data.name" />
 		<UpcomingEvaluations
 			:batch="batch.data.name"
 			:endDate="batch.data.evaluation_end_date"
 			:courses="batch.data.courses"
-			:isStudent="isStudent"
 		/>
-		<Assessments :batch="batch.data.name" />
+		<StudentHeatmap :batch="batch.data.name" />
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
+import StudentHeatmap from '@/components/StudentHeatmap.vue'
 
 const props = defineProps({
 	batch: {
diff --git a/frontend/src/components/Modals/BatchStudentProgress.vue b/frontend/src/components/Modals/BatchStudentProgress.vue
index 6e7266659..e1c30857a 100644
--- a/frontend/src/components/Modals/BatchStudentProgress.vue
+++ b/frontend/src/components/Modals/BatchStudentProgress.vue
@@ -20,67 +20,59 @@
 				</div>
 
 				<!-- Assessments -->
-				<div>
-					<div>
-						<div
-							class="grid grid-cols-[70%,30%] border-b pl-2 pb-1 mb-2 text-xs text-gray-700 font-medium"
-						>
-							<span>
-								{{ __('Assessment') }}
-							</span>
-							<span>
-								{{ __('Progress') }}
-							</span>
-						</div>
-						<div
-							v-for="assessment in Object.keys(student.assessments)"
-							class="grid grid-cols-[70%,30%] pl-2 mb-2 text-gray-700 font-medium"
-						>
-							<span>
-								{{ assessment }}
-							</span>
-							<span v-if="isAssignment(student.assessments[assessment])">
-								<Badge :theme="getStatusTheme(student.assessments[assessment])">
-									{{ student.assessments[assessment] }}
-								</Badge>
-							</span>
-							<span v-else>
+				<div class="space-y-4 text-sm">
+					<div
+						class="flex items-center border-b pb-1 text-xs text-gray-700 font-medium"
+					>
+						<span class="flex-1">
+							{{ __('Assessment') }}
+						</span>
+						<span>
+							{{ __('Progress') }}
+						</span>
+					</div>
+					<div
+						v-for="assessment in Object.keys(student.assessments)"
+						class="flex items-center text-gray-700 font-medium"
+					>
+						<span class="flex-1">
+							{{ assessment }}
+						</span>
+						<span v-if="isAssignment(student.assessments[assessment])">
+							<Badge :theme="getStatusTheme(student.assessments[assessment])">
 								{{ student.assessments[assessment] }}
-							</span>
-						</div>
+							</Badge>
+						</span>
+						<span v-else>
+							{{ student.assessments[assessment] }}
+						</span>
 					</div>
 				</div>
 
 				<!-- Courses -->
-				<div>
-					<div>
-						<div
-							class="grid grid-cols-[70%,30%] mb-2 text-xs text-gray-700 border-b pl-2 pb-1 font-medium"
-						>
-							<span>
-								{{ __('Courses') }}
-							</span>
-							<span>
-								{{ __('Progress') }}
-							</span>
-						</div>
-						<div
-							v-for="course in Object.keys(student.courses)"
-							class="grid grid-cols-[70%,30%] pl-2 mb-2 text-gray-700 font-medium"
-						>
-							<span>
-								{{ course }}
-							</span>
-							<span>
-								{{ Math.floor(student.courses[course]) }}
-							</span>
-						</div>
+				<div class="space-y-4 text-sm">
+					<div
+						class="flex items-center text-xs text-gray-700 border-b pb-1 font-medium"
+					>
+						<span class="flex-1">
+							{{ __('Courses') }}
+						</span>
+						<span>
+							{{ __('Progress') }}
+						</span>
+					</div>
+					<div
+						v-for="course in Object.keys(student.courses)"
+						class="flex items-center text-gray-700 font-medium"
+					>
+						<span class="flex-1">
+							{{ course }}
+						</span>
+						<span>
+							{{ Math.floor(student.courses[course]) }}
+						</span>
 					</div>
 				</div>
-
-				<!-- <span class="mt-4">
-                    {{ student }}
-                </span> -->
 			</div>
 		</template>
 	</Dialog>
diff --git a/frontend/src/components/StudentHeatmap.vue b/frontend/src/components/StudentHeatmap.vue
new file mode 100644
index 000000000..e7f0d1c67
--- /dev/null
+++ b/frontend/src/components/StudentHeatmap.vue
@@ -0,0 +1,90 @@
+<template>
+	<ApexChart
+		v-if="heatmap.data"
+		:options="chartOptions"
+		:series="chartSeries"
+		height="350"
+	/>
+	{{ heatmap.data }}
+</template>
+<script setup>
+import { createResource } from 'frappe-ui'
+import { computed, inject } from 'vue'
+import ApexChart from 'vue3-apexcharts'
+
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: String,
+		required: true,
+	},
+})
+
+const heatmap = createResource({
+	url: 'lms.lms.api.get_heatmap_data',
+	auto: true,
+	cache: ['heatmap', user.data?.name],
+})
+
+const chartOptions = computed(() => {
+	return {
+		chart: {
+			type: 'heatmap',
+			height: 50,
+			toolbar: {
+				show: false,
+			},
+		},
+		plotOptions: {
+			heatmap: {
+				shadeIntensity: 0.5,
+				enableShades: true,
+				colorScale: {
+					ranges: [
+						{ from: 0, to: 0, color: '#e3f2fd' }, // No activity
+						{ from: 1, to: 5, color: '#81c784' }, // Low activity
+						{ from: 6, to: 15, color: '#66bb6a' }, // Medium activity
+						{ from: 16, to: 30, color: '#388e3c' }, // High activity
+						{ from: 31, to: 100, color: '#1b5e20' }, // Very high activity
+					],
+				},
+			},
+		},
+		dataLabels: {
+			enabled: false,
+		},
+		xaxis: {
+			type: 'category',
+			labels: { rotate: -45 },
+		},
+		yaxis: {
+			type: 'category',
+			categories: [
+				'Monday',
+				'Tuesday',
+				'Wednesday',
+				'Thursday',
+				'Friday',
+				'Saturday',
+				'Sunday',
+			],
+		},
+		tooltip: {
+			y: { formatter: (value) => `${value} activities` },
+		},
+		colors: ['#008FFB'],
+	}
+})
+
+const chartSeries = computed(() => {
+	let series = []
+	heatmap.data?.forEach((week) => {
+		series.push({
+			name: week.name,
+			data: week.data,
+		})
+	})
+	return series
+})
+</script>
diff --git a/frontend/src/components/UpcomingEvaluations.vue b/frontend/src/components/UpcomingEvaluations.vue
index c24c56d62..288d1244e 100644
--- a/frontend/src/components/UpcomingEvaluations.vue
+++ b/frontend/src/components/UpcomingEvaluations.vue
@@ -1,10 +1,12 @@
 <template>
-	<div class="mb-10">
-		<Button v-if="isStudent" @click="openEvalModal" class="float-right">
-			{{ __('Schedule Evaluation') }}
-		</Button>
-		<div class="text-lg font-semibold mb-4">
-			{{ __('Upcoming Evaluations') }}
+	<div>
+		<div class="flex items-center justify-between mb-4">
+			<div class="text-lg font-semibold">
+				{{ __('Upcoming Evaluations') }}
+			</div>
+			<Button @click="openEvalModal">
+				{{ __('Schedule Evaluation') }}
+			</Button>
 		</div>
 		<div v-if="upcoming_evals.data?.length">
 			<div class="grid grid-cols-2 gap-4">
@@ -67,10 +69,6 @@ const props = defineProps({
 		type: Array,
 		default: [],
 	},
-	isStudent: {
-		type: Boolean,
-		default: false,
-	},
 	endDate: {
 		type: String,
 		default: null,
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 347e3ac1f..28dc183a3 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -13,7 +13,15 @@
 from frappe import _
 from frappe.query_builder import DocType
 from frappe.query_builder.functions import Count
-from frappe.utils import time_diff, now_datetime, get_datetime, flt
+from frappe.utils import (
+	time_diff,
+	now_datetime,
+	get_datetime,
+	flt,
+	now,
+	add_days,
+	format_date,
+)
 from typing import Optional
 from lms.lms.utils import get_average_rating, get_lesson_count
 from xml.dom.minidom import parseString
@@ -594,7 +602,7 @@ def get_categories(doctype, filters):
 def get_members(start=0, search=""):
 	"""Get members for the given search term and start index.
 	Args: start (int): Start index for the query.
-	        search (str): Search term to filter the results.
+	                search (str): Search term to filter the results.
 	Returns: List of members.
 	"""
 
@@ -1043,3 +1051,54 @@ def mark_lesson_progress(course, chapter_number, lesson_number):
 		"Lesson Reference", {"parent": chapter_name, "idx": lesson_number}, "lesson"
 	)
 	save_progress(lesson_name, course)
+
+
+@frappe.whitelist()
+def get_heatmap_data(member=None):
+	if not member:
+		member = frappe.session.user
+
+	last_90_days = [add_days(now(), -i) for i in range(90)]
+	date_count = {format_date(day, "YYYY-MM-dd"): 0 for day in last_90_days}
+
+	def count_dates(data):
+		for entry in data:
+			date = format_date(entry.creation, "YYYY-MM-dd")
+			if date in date_count:
+				date_count[date] += 1
+
+	lesson_completions = frappe.get_all(
+		"LMS Course Progress",
+		fields=["creation"],
+		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+	)
+
+	quiz_submissions = frappe.get_all(
+		"LMS Quiz Submission",
+		fields=["creation"],
+		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+	)
+
+	assigment_submissions = frappe.get_all(
+		"LMS Assignment Submission",
+		fields=["creation"],
+		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+	)
+
+	count_dates(lesson_completions)
+	count_dates(quiz_submissions)
+	count_dates(assigment_submissions)
+
+	weekMap = {}
+	heatmap_data = []
+
+	for date, count in date_count.items():
+		week = get_datetime(date).strftime("%U")
+		if week not in weekMap:
+			weekMap[week] = []
+		weekMap[week].append({"x": date, "y": count})
+
+	for week in weekMap.keys():
+		heatmap_data.update({"name": week, "data": weekMap[week]})
+
+	return heatmap_data

From fb40b627fcc104a26f73239b341a2276001bd1b6 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 7 Jan 2025 18:15:59 +0530
Subject: [PATCH 2/2] feat: show student progress heatmap on moderators
 dashboard

---
 frontend/src/components/Assessments.vue       |   2 +-
 frontend/src/components/BatchDashboard.vue    |   4 +-
 frontend/src/components/BatchStudents.vue     |  66 ++++------
 .../Modals/BatchStudentProgress.vue           | 110 ++++++++--------
 frontend/src/components/StudentHeatmap.vue    | 122 ++++++++++++------
 frontend/src/pages/Batch.vue                  |   6 +-
 frontend/src/pages/Programs.vue               |   6 +-
 frontend/src/utils/theme.js                   |   5 +
 frontend/vite.config.js                       |   8 +-
 lms/lms/api.py                                | 121 +++++++++++++----
 10 files changed, 285 insertions(+), 165 deletions(-)
 create mode 100644 frontend/src/utils/theme.js

diff --git a/frontend/src/components/Assessments.vue b/frontend/src/components/Assessments.vue
index 18dd5f2a2..2edf99849 100644
--- a/frontend/src/components/Assessments.vue
+++ b/frontend/src/components/Assessments.vue
@@ -11,7 +11,7 @@
 				{{ __('Add') }}
 			</Button>
 		</div>
-		<div v-if="assessments.data?.length">
+		<div v-if="assessments.data?.length" class="text-sm">
 			<ListView
 				:columns="getAssessmentColumns()"
 				:rows="assessments.data"
diff --git a/frontend/src/components/BatchDashboard.vue b/frontend/src/components/BatchDashboard.vue
index b4d51bc4b..196cbf887 100644
--- a/frontend/src/components/BatchDashboard.vue
+++ b/frontend/src/components/BatchDashboard.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="space-y-10">
-		<Assessments :batch="batch.data.name" />
 		<UpcomingEvaluations
 			:batch="batch.data.name"
 			:endDate="batch.data.evaluation_end_date"
 			:courses="batch.data.courses"
 		/>
-		<StudentHeatmap :batch="batch.data.name" />
+		<Assessments :batch="batch.data.name" />
+		<StudentHeatmap />
 	</div>
 </template>
 <script setup>
diff --git a/frontend/src/components/BatchStudents.vue b/frontend/src/components/BatchStudents.vue
index 8a6d520a9..649d096eb 100644
--- a/frontend/src/components/BatchStudents.vue
+++ b/frontend/src/components/BatchStudents.vue
@@ -8,10 +8,10 @@
 		<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">
-					<User class="w-18 h-18 stroke-1.5 text-gray-700" />
+					<User class="w-5 h-5 stroke-1.5 text-gray-700" />
 				</div>
-				<div class="flex flex-col">
-					<span class="text-xl font-semibold mb-1">
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
 						{{ students.data?.length }}
 					</span>
 					<span class="text-gray-700">
@@ -22,10 +22,10 @@
 
 			<div class="flex items-center shadow py-2 px-3 rounded-md">
 				<div class="p-2 rounded-md bg-gray-100 mr-3">
-					<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
+					<BookOpen class="w-5 h-5 stroke-1.5 text-gray-700" />
 				</div>
-				<div class="flex flex-col">
-					<span class="text-xl font-semibold mb-1">
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
 						{{ batch.courses?.length }}
 					</span>
 					<span class="text-gray-700">
@@ -36,10 +36,10 @@
 
 			<div class="flex items-center shadow py-2 px-3 rounded-md">
 				<div class="p-2 rounded-md bg-gray-100 mr-3">
-					<ShieldCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
+					<ShieldCheck class="w-5 h-5 stroke-1.5 text-gray-700" />
 				</div>
-				<div class="flex flex-col">
-					<span class="text-xl font-semibold mb-1">
+				<div class="flex items-center space-x-2">
+					<span class="font-semibold">
 						{{ assessmentCount }}
 					</span>
 					<span class="text-gray-700">
@@ -48,28 +48,33 @@
 				</div>
 			</div>
 		</div>
-		<div class="mb-8">
+		<div v-if="showProgressChart" class="mb-8">
 			<div class="text-gray-600 font-medium">
 				{{ __('Progress') }}
 			</div>
 			<ApexChart
-				v-if="showProgressChart"
 				:options="chartOptions"
 				:series="chartData"
 				type="bar"
-				height="350"
+				height="200"
 			/>
 			<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: #0f736b"></div>
+					<div
+						class="w-3 h-3 rounded-sm"
+						:style="{ 'background-color': theme.colors.green[600] }"
+					></div>
 					<div>
 						{{ __('Courses') }}
 					</div>
 				</div>
 				<div class="flex items-center space-x-2">
-					<div class="w-3 h-3" style="background-color: #0070cc"></div>
+					<div
+						class="w-3 h-3 rounded-sm"
+						:style="{ 'background-color': theme.colors.blue[600] }"
+					></div>
 					<div>
 						{{ __('Assessments') }}
 					</div>
@@ -147,16 +152,6 @@
 									<ProgressBar :progress="row[column.key]" size="sm" />
 									<div class="text-xs">{{ row[column.key] }}%</div>
 								</div>
-								<div
-									v-else-if="column.key == 'copy'"
-									class="invisible group-hover:visible"
-								>
-									<Button variant="ghost" @click="copyEmail(row)">
-										<template #icon>
-											<Clipboard class="h-4 w-4 stroke-1.5" />
-										</template>
-									</Button>
-								</div>
 								<div v-else>
 									{{ row[column.key] }}
 								</div>
@@ -221,6 +216,7 @@ import { showToast } from '@/utils'
 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)
@@ -271,10 +267,6 @@ const getStudentColumns = () => {
 			align: 'center',
 			icon: 'clock',
 		},
-		{
-			label: '',
-			key: 'copy',
-		},
 	]
 
 	return columns
@@ -357,8 +349,8 @@ const getChartData = () => {
 }
 
 const getChartOptions = (categories) => {
-	const courseColor = '#0F736B'
-	const assessmentColor = '#0070CC'
+	const courseColor = theme.colors.green[700]
+	const assessmentColor = theme.colors.blue[700]
 	const maxY =
 		students.data?.length % 5
 			? students.data?.length + (5 - (students.data?.length % 5))
@@ -367,7 +359,6 @@ const getChartOptions = (categories) => {
 	return {
 		chart: {
 			type: 'bar',
-			height: 50,
 			toolbar: {
 				show: false,
 			},
@@ -375,9 +366,10 @@ const getChartOptions = (categories) => {
 		plotOptions: {
 			bar: {
 				distributed: true,
-				borderRadius: 0,
+				borderRadius: 3,
+				borderRadiusApplication: 'end',
 				horizontal: true,
-				barHeight: '30%',
+				barHeight: '40%',
 			},
 		},
 		colors: Object.values(categories).map((item) =>
@@ -391,7 +383,7 @@ const getChartOptions = (categories) => {
 				},
 				rotate: 0,
 				formatter: function (value) {
-					return value.length > 20 ? `${value.substring(0, 20)}...` : value // Trim long labels
+					return value.length > 30 ? `${value.substring(0, 30)}...` : value // Trim long labels
 				},
 			},
 		},
@@ -400,15 +392,11 @@ const getChartOptions = (categories) => {
 			min: 0,
 			stepSize: 10,
 			tickAmount: maxY / 5,
+			/* reversed: true */
 		},
 	}
 }
 
-const copyEmail = (row) => {
-	navigator.clipboard.writeText(row.email)
-	showToast(__('Success'), __('Email copied to clipboard'), 'check')
-}
-
 watch(students, () => {
 	if (students.data?.length) {
 		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
diff --git a/frontend/src/components/Modals/BatchStudentProgress.vue b/frontend/src/components/Modals/BatchStudentProgress.vue
index e1c30857a..88478609c 100644
--- a/frontend/src/components/Modals/BatchStudentProgress.vue
+++ b/frontend/src/components/Modals/BatchStudentProgress.vue
@@ -1,7 +1,12 @@
 <template>
-	<Dialog v-model="show" :options="{}">
+	<Dialog
+		v-model="show"
+		:options="{
+			size: 'xl',
+		}"
+	>
 		<template #body>
-			<div class="p-5 space-y-8 text-base">
+			<div class="p-5 space-y-10 text-base">
 				<div class="flex items-center space-x-2">
 					<Avatar :image="student.user_image" size="3xl" />
 					<div class="space-y-1">
@@ -19,67 +24,68 @@
 					</div>
 				</div>
 
-				<!-- Assessments -->
-				<div class="space-y-4 text-sm">
-					<div
-						class="flex items-center border-b pb-1 text-xs text-gray-700 font-medium"
-					>
-						<span class="flex-1">
-							{{ __('Assessment') }}
-						</span>
-						<span>
-							{{ __('Progress') }}
-						</span>
-					</div>
-					<div
-						v-for="assessment in Object.keys(student.assessments)"
-						class="flex items-center text-gray-700 font-medium"
-					>
-						<span class="flex-1">
-							{{ assessment }}
-						</span>
-						<span v-if="isAssignment(student.assessments[assessment])">
-							<Badge :theme="getStatusTheme(student.assessments[assessment])">
+				<div class="space-y-8">
+					<!-- Assessments -->
+					<div class="space-y-2 text-sm">
+						<div class="flex items-center border-b pb-1 font-medium">
+							<span class="flex-1">
+								{{ __('Assessment') }}
+							</span>
+							<span>
+								{{ __('Progress') }}
+							</span>
+						</div>
+						<div
+							v-for="assessment in Object.keys(student.assessments)"
+							class="flex items-center text-gray-700 font-medium"
+						>
+							<span class="flex-1">
+								{{ assessment }}
+							</span>
+							<span v-if="isAssignment(student.assessments[assessment])">
+								<Badge :theme="getStatusTheme(student.assessments[assessment])">
+									{{ student.assessments[assessment] }}
+								</Badge>
+							</span>
+							<span v-else>
 								{{ student.assessments[assessment] }}
-							</Badge>
-						</span>
-						<span v-else>
-							{{ student.assessments[assessment] }}
-						</span>
+							</span>
+						</div>
 					</div>
-				</div>
 
-				<!-- Courses -->
-				<div class="space-y-4 text-sm">
-					<div
-						class="flex items-center text-xs text-gray-700 border-b pb-1 font-medium"
-					>
-						<span class="flex-1">
-							{{ __('Courses') }}
-						</span>
-						<span>
-							{{ __('Progress') }}
-						</span>
-					</div>
-					<div
-						v-for="course in Object.keys(student.courses)"
-						class="flex items-center text-gray-700 font-medium"
-					>
-						<span class="flex-1">
-							{{ course }}
-						</span>
-						<span>
-							{{ Math.floor(student.courses[course]) }}
-						</span>
+					<!-- Courses -->
+					<div class="space-y-2 text-sm">
+						<div class="flex items-center border-b pb-1 font-medium">
+							<span class="flex-1">
+								{{ __('Courses') }}
+							</span>
+							<span>
+								{{ __('Progress') }}
+							</span>
+						</div>
+						<div
+							v-for="course in Object.keys(student.courses)"
+							class="flex items-center text-gray-700 font-medium"
+						>
+							<span class="flex-1">
+								{{ course }}
+							</span>
+							<span>
+								{{ Math.floor(student.courses[course]) }}
+							</span>
+						</div>
 					</div>
 				</div>
+
+				<!-- Heatmap -->
+				<StudentHeatmap :member="student.email" :base_days="120" />
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
 import { Avatar, Badge, Dialog } from 'frappe-ui'
-import ProgressBar from '@/components/ProgressBar.vue'
+import StudentHeatmap from '@/components/StudentHeatmap.vue'
 
 const show = defineModel()
 const props = defineProps({
diff --git a/frontend/src/components/StudentHeatmap.vue b/frontend/src/components/StudentHeatmap.vue
index e7f0d1c67..5654e4c0f 100644
--- a/frontend/src/components/StudentHeatmap.vue
+++ b/frontend/src/components/StudentHeatmap.vue
@@ -1,52 +1,91 @@
 <template>
-	<ApexChart
-		v-if="heatmap.data"
-		:options="chartOptions"
-		:series="chartSeries"
-		height="350"
-	/>
-	{{ heatmap.data }}
+	<div v-if="heatmap.data">
+		<div class="text-lg font-semibold mb-2">
+			{{ heatmap.data.total_activities }}
+			{{
+				heatmap.data.total_activities > 1 ? __('activities') : __('activity')
+			}}
+			{{ __('in the last') }}
+			{{ heatmap.data.weeks }}
+			{{ __('weeks') }}
+		</div>
+
+		<ApexChart :options="chartOptions" :series="chartSeries" height="240" />
+	</div>
 </template>
 <script setup>
 import { createResource } from 'frappe-ui'
-import { computed, inject } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import ApexChart from 'vue3-apexcharts'
+import { theme } from '@/utils/theme'
 
 const user = inject('$user')
+const labels = ref([])
+const memberName = ref(null)
 
 const props = defineProps({
-	batch: {
+	member: {
 		type: String,
-		required: true,
+	},
+	base_days: {
+		type: Number,
+		default: 200,
 	},
 })
 
+onMounted(() => {
+	memberName.value = props.member || user.data?.name
+})
+
 const heatmap = createResource({
 	url: 'lms.lms.api.get_heatmap_data',
-	auto: true,
-	cache: ['heatmap', user.data?.name],
+	makeParams(values) {
+		return {
+			member: values.member,
+			base_days: props.base_days,
+		}
+	},
+	auto: false,
+	cache: ['heatmap', memberName.value],
+})
+
+watch(memberName, (newVal) => {
+	heatmap.reload(
+		{
+			member: newVal,
+		},
+		{
+			onSuccess(data) {
+				labels.value = data.labels
+			},
+		}
+	)
 })
 
 const chartOptions = computed(() => {
 	return {
 		chart: {
 			type: 'heatmap',
-			height: 50,
 			toolbar: {
 				show: false,
 			},
 		},
+		highlightOnHover: false,
+		grid: {
+			show: false,
+		},
 		plotOptions: {
 			heatmap: {
-				shadeIntensity: 0.5,
+				radius: 8,
+				shadeIntensity: 0.2,
 				enableShades: true,
 				colorScale: {
 					ranges: [
-						{ from: 0, to: 0, color: '#e3f2fd' }, // No activity
-						{ from: 1, to: 5, color: '#81c784' }, // Low activity
-						{ from: 6, to: 15, color: '#66bb6a' }, // Medium activity
-						{ from: 16, to: 30, color: '#388e3c' }, // High activity
-						{ from: 31, to: 100, color: '#1b5e20' }, // Very high activity
+						{ from: 0, to: 0, color: theme.colors.gray[400] },
+						{ from: 1, to: 5, color: theme.colors.green[200] },
+						{ from: 6, to: 15, color: theme.colors.green[500] },
+						{ from: 16, to: 30, color: theme.colors.green[700] },
+						{ from: 31, to: 100, color: theme.colors.green[800] },
 					],
 				},
 			},
@@ -56,34 +95,43 @@ const chartOptions = computed(() => {
 		},
 		xaxis: {
 			type: 'category',
-			labels: { rotate: -45 },
+			categories: labels.value,
+			position: 'top',
+			axisBorder: {
+				show: false,
+			},
+			axisTicks: {
+				show: false,
+			},
+			tooltip: {
+				enabled: false,
+			},
 		},
 		yaxis: {
 			type: 'category',
-			categories: [
-				'Monday',
-				'Tuesday',
-				'Wednesday',
-				'Thursday',
-				'Friday',
-				'Saturday',
-				'Sunday',
-			],
+			categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+			reversed: true,
+			tooltip: {
+				enabled: false,
+			},
 		},
 		tooltip: {
-			y: { formatter: (value) => `${value} activities` },
+			custom: ({ series, seriesIndex, dataPointIndex, w }) => {
+				return `<div class="text-xs bg-gray-900 text-white font-medium p-1">
+					<div class="text-center">${heatmap.data.heatmap_data[seriesIndex].data[dataPointIndex].label}</div>
+				</div>`
+			},
 		},
-		colors: ['#008FFB'],
 	}
 })
 
 const chartSeries = computed(() => {
-	let series = []
-	heatmap.data?.forEach((week) => {
-		series.push({
-			name: week.name,
-			data: week.data,
-		})
+	if (!heatmap.data) return []
+	let series = heatmap.data.heatmap_data.map((row) => {
+		return {
+			name: row.name,
+			data: row.data.map((value) => value.count),
+		}
 	})
 	return series
 })
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
index 511e4b2e3..a1a3d5f6b 100644
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -89,10 +89,10 @@
 				</Tabs>
 			</div>
 			<div class="p-5">
-				<div class="text-xl font-semibold mb-2">
-					{{ batch.data.title }}
+				<div class="text-gray-700 font-semibold mb-4">
+					{{ __('About this batch') }}:
 				</div>
-				<div v-html="batch.data.description" class="leading-5 mb-2"></div>
+				<div v-html="batch.data.description" class="leading-5 mb-4"></div>
 
 				<div class="flex items-center avatar-group overlap mb-5">
 					<div
diff --git a/frontend/src/pages/Programs.vue b/frontend/src/pages/Programs.vue
index ef5137bd8..8ae9e4f7f 100644
--- a/frontend/src/pages/Programs.vue
+++ b/frontend/src/pages/Programs.vue
@@ -28,9 +28,7 @@
 						size="lg"
 					>
 						{{ program.members }}
-						{{
-							program.members == 1 ? __(singularize('members')) : __('members')
-						}}
+						{{ program.members == 1 ? __('member') : __('members') }}
 					</Badge>
 					<Badge
 						v-if="program.progress"
@@ -133,7 +131,7 @@ import { computed, inject, onMounted, ref } from 'vue'
 import { BookOpen, Edit, Plus, LockKeyhole } from 'lucide-vue-next'
 import CourseCard from '@/components/CourseCard.vue'
 import { useRouter } from 'vue-router'
-import { showToast, singularize } from '@/utils'
+import { showToast } from '@/utils'
 import { useSettings } from '@/stores/settings'
 
 const user = inject('$user')
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
new file mode 100644
index 000000000..8566f5161
--- /dev/null
+++ b/frontend/src/utils/theme.js
@@ -0,0 +1,5 @@
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from 'tailwind.config.js'
+
+export const config = resolveConfig(tailwindConfig)
+export const theme = config.theme
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index fe194fa2c..0ed48a959 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, 'src'),
+			'tailwind.config.js': path.resolve(__dirname, 'tailwind.config.js'),
 		},
 	},
 	build: {
@@ -36,6 +37,11 @@ export default defineConfig({
 		},
 	},
 	optimizeDeps: {
-		include: ['frappe-ui > feather-icons', 'showdown', 'engine.io-client'],
+		include: [
+			'feather-icons',
+			'showdown',
+			'engine.io-client',
+			'tailwind.config.js',
+		],
 	},
 })
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 28dc183a3..93e4268e3 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -17,10 +17,12 @@
 	time_diff,
 	now_datetime,
 	get_datetime,
+	cint,
 	flt,
 	now,
 	add_days,
 	format_date,
+	days_diff,
 )
 from typing import Optional
 from lms.lms.utils import get_average_rating, get_lesson_count
@@ -602,7 +604,7 @@ def get_categories(doctype, filters):
 def get_members(start=0, search=""):
 	"""Get members for the given search term and start index.
 	Args: start (int): Start index for the query.
-	                search (str): Search term to filter the results.
+	                                search (str): Search term to filter the results.
 	Returns: List of members.
 	"""
 
@@ -1054,51 +1056,118 @@ def mark_lesson_progress(course, chapter_number, lesson_number):
 
 
 @frappe.whitelist()
-def get_heatmap_data(member=None):
+def get_heatmap_data(member=None, base_days=200):
 	if not member:
 		member = frappe.session.user
 
-	last_90_days = [add_days(now(), -i) for i in range(90)]
-	date_count = {format_date(day, "YYYY-MM-dd"): 0 for day in last_90_days}
+	base_date, start_date, number_of_days, days = calculate_date_ranges(base_days)
+	date_count = initialize_date_count(days)
+
+	lesson_completions, quiz_submissions, assignment_submissions = fetch_activity_data(
+		member, start_date
+	)
+	count_dates(lesson_completions, date_count)
+	count_dates(quiz_submissions, date_count)
+	count_dates(assignment_submissions, date_count)
+
+	heatmap_data, labels, total_activities, weeks = prepare_heatmap_data(
+		start_date, number_of_days, date_count
+	)
+
+	return {
+		"heatmap_data": heatmap_data,
+		"labels": labels,
+		"total_activities": total_activities,
+		"weeks": weeks,
+	}
+
+
+def calculate_date_ranges(base_days):
+	today = format_date(now(), "YYYY-MM-dd")
+	day_today = get_datetime(today).strftime("%w")
+	padding_end = 6 - cint(day_today)
+
+	base_date = add_days(today, -base_days)
+	day_of_base_date = cint(get_datetime(base_date).strftime("%w"))
+	start_date = add_days(base_date, -day_of_base_date)
+	number_of_days = base_days + day_of_base_date + padding_end
+	days = [add_days(start_date, i) for i in range(number_of_days + 1)]
+
+	return base_date, start_date, number_of_days, days
+
+
+def initialize_date_count(days):
+	return {format_date(day, "YYYY-MM-dd"): 0 for day in days}
 
-	def count_dates(data):
-		for entry in data:
-			date = format_date(entry.creation, "YYYY-MM-dd")
-			if date in date_count:
-				date_count[date] += 1
 
+def fetch_activity_data(member, start_date):
 	lesson_completions = frappe.get_all(
 		"LMS Course Progress",
 		fields=["creation"],
-		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+		filters={"member": member, "creation": [">=", start_date]},
 	)
 
 	quiz_submissions = frappe.get_all(
 		"LMS Quiz Submission",
 		fields=["creation"],
-		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+		filters={"member": member, "creation": [">=", start_date]},
 	)
 
-	assigment_submissions = frappe.get_all(
+	assignment_submissions = frappe.get_all(
 		"LMS Assignment Submission",
 		fields=["creation"],
-		filters={"member": member, "creation": [">", add_days(now(), -90)]},
+		filters={"member": member, "creation": [">=", start_date]},
 	)
 
-	count_dates(lesson_completions)
-	count_dates(quiz_submissions)
-	count_dates(assigment_submissions)
+	return lesson_completions, quiz_submissions, assignment_submissions
 
-	weekMap = {}
-	heatmap_data = []
 
-	for date, count in date_count.items():
-		week = get_datetime(date).strftime("%U")
-		if week not in weekMap:
-			weekMap[week] = []
-		weekMap[week].append({"x": date, "y": count})
+def count_dates(data, date_count):
+	for entry in data:
+		date = format_date(entry.creation, "YYYY-MM-dd")
+		if date in date_count:
+			date_count[date] += 1
+
+
+def prepare_heatmap_data(start_date, number_of_days, date_count):
+	days_of_week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+	heatmap_data = {day: [] for day in days_of_week}
+	week_count = -(number_of_days // -7)
+	labels = [None] * week_count
+	last_seen_month = None
+	sorted_dates = sorted(date_count.keys())
+
+	for date in sorted_dates:
+		activity_count = date_count[date]
+		day_of_week = get_datetime(date).strftime("%a")
+		current_month = get_datetime(date).strftime("%b")
+		column_index = get_week_difference(start_date, date)
+
+		if 0 <= column_index < week_count:
+			heatmap_data[day_of_week].append(
+				{
+					"date": date,
+					"count": activity_count,
+					"label": f"{activity_count} activities on {format_date(date, 'dd MMM')}",
+				}
+			)
+
+			if last_seen_month != current_month:
+				labels[column_index] = current_month
+				last_seen_month = current_month
+
+	for (index, label) in enumerate(labels):
+		if not label:
+			labels[index] = ""
+
+	formatted_heatmap_data = [
+		{"name": day, "data": heatmap_data[day]} for day in days_of_week
+	]
+
+	total_activities = sum(date_count.values())
+	return formatted_heatmap_data, labels, total_activities, week_count
 
-	for week in weekMap.keys():
-		heatmap_data.update({"name": week, "data": weekMap[week]})
 
-	return heatmap_data
+def get_week_difference(start_date, current_date):
+	diff_in_days = days_diff(current_date, start_date)
+	return diff_in_days // 7