From d575bfa0fb1334cf1f6ab2343aeccad072337c5e Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 25 Aug 2025 09:19:03 +0530
Subject: [PATCH] feat: streak details

---
 cypress/e2e/course_creation.cy.js  |  2 +-
 frontend/src/pages/Home/Home.vue   |  9 +++-
 frontend/src/pages/Home/Streak.vue | 79 ++++++++++++++++++++++++++++++
 lms/lms/utils.py                   |  6 +--
 4 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/Home/Streak.vue

diff --git a/cypress/e2e/course_creation.cy.js b/cypress/e2e/course_creation.cy.js
index a48a868b..f50acd03 100644
--- a/cypress/e2e/course_creation.cy.js
+++ b/cypress/e2e/course_creation.cy.js
@@ -98,7 +98,7 @@ describe("Course Creation", () => {
 
 		// View Course
 		cy.wait(1000);
-		cy.visit("/lms");
+		cy.visit("/lms/courses");
 		cy.closeOnboardingModal();
 
 		cy.url().should("include", "/lms/courses");
diff --git a/frontend/src/pages/Home/Home.vue b/frontend/src/pages/Home/Home.vue
index 1ca0fc64..c5a8216a 100644
--- a/frontend/src/pages/Home/Home.vue
+++ b/frontend/src/pages/Home/Home.vue
@@ -16,7 +16,11 @@
 			</div>
 			<div>
 				<TabButtons v-if="isAdmin" v-model="currentTab" :buttons="tabs" />
-				<div v-else class="bg-surface-amber-2 px-2 py-1 rounded-md">
+				<div
+					v-else
+					@click="showStreakModal = true"
+					class="bg-surface-amber-2 px-2 py-1 rounded-md cursor-pointer"
+				>
 					<span> 🔥 </span>
 					<span>
 						{{ streakInfo.data?.current_streak }}
@@ -32,6 +36,7 @@
 		/>
 		<StudentHome v-else :myLiveClasses="myLiveClasses" />
 	</div>
+	<Streak v-model="showStreakModal" :streakInfo="streakInfo" />
 </template>
 <script setup lang="ts">
 import { computed, inject, onMounted, ref } from 'vue'
@@ -45,11 +50,13 @@ import {
 import { sessionStore } from '@/stores/session'
 import StudentHome from '@/pages/Home/StudentHome.vue'
 import AdminHome from '@/pages/Home/AdminHome.vue'
+import Streak from '@/pages/Home/Streak.vue'
 
 const user = inject<any>('$user')
 const { brand } = sessionStore()
 const evalCount = ref(0)
 const currentTab = ref<'student' | 'instructor'>('instructor')
+const showStreakModal = ref(false)
 
 onMounted(() => {
 	call('lms.lms.utils.get_upcoming_evals').then((data: any) => {
diff --git a/frontend/src/pages/Home/Streak.vue b/frontend/src/pages/Home/Streak.vue
new file mode 100644
index 00000000..e52bc80f
--- /dev/null
+++ b/frontend/src/pages/Home/Streak.vue
@@ -0,0 +1,79 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Learning Consistency'),
+		}"
+	>
+		<template #body-content>
+			<div class="text-base">
+				<div class="text-center">
+					<div class="text-[30px]">🔥</div>
+					<div class="mt-3">
+						<div class="text-ink-gray-5 mb-1">
+							{{
+								streakInfo.data?.current_streak < 1
+									? __('You can do better,')
+									: streakInfo.data?.current_streak < 10
+									? __('Keep going,')
+									: __('You rock,')
+							}}
+							{{ __(' you are on a') }}
+						</div>
+						<div class="font-semibold text-xl">
+							{{ streakInfo.data?.current_streak }} {{ __('day streak') }}
+						</div>
+					</div>
+				</div>
+
+				<div
+					class="grid grid-cols-2 bg-surface-gray-1 px-2.5 py-2 rounded-md mt-8"
+				>
+					<div class="space-y-1 border-r border-outline-gray-2 mr-4">
+						<div class="text-ink-gray-6">
+							{{ __('Current Streak') }}
+						</div>
+						<div class="font-semibold text-lg">
+							{{ streakInfo.data?.current_streak }} {{ __('days') }}
+						</div>
+					</div>
+					<div class="space-y-1">
+						<div class="text-ink-gray-6">
+							{{ __('Longest Streak') }}
+						</div>
+						<div class="font-semibold text-lg">
+							{{ streakInfo.data?.longest_streak }} {{ __('days') }}
+						</div>
+					</div>
+				</div>
+
+				<div
+					class="text-ink-gray-7 border border-outline-gray-1 px-2.5 py-2 rounded-md text-xs leading-5 mt-5"
+				>
+					{{
+						__(
+							"A learning streak is the number of consecutive days you've completed a learning activity like completing a lesson, quiz or an assignment."
+						)
+					}}
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Dialog } from 'frappe-ui'
+import { Info } from 'lucide-vue-next'
+
+const show = defineModel<boolean>({
+	default: false,
+})
+
+const props = defineProps<{
+	streakInfo: {
+		data: {
+			current_streak: number
+			longest_streak: number
+		}
+	}
+}>()
+</script>
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index a14d0326..0ffb24f3 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -2400,7 +2400,7 @@ def get_streak_info():
 	all_dates = sorted(all_dates)
 
 	streak = 0
-	max_streak = 0
+	longest_streak = 0
 	prev_day = None
 
 	for d in all_dates:
@@ -2423,10 +2423,10 @@ def get_streak_info():
 		else:
 			streak = 1
 
-		max_streak = max(max_streak, streak)
+		longest_streak = max(longest_streak, streak)
 		prev_day = d
 
 	return {
 		"current_streak": streak,
-		"max_streak": max_streak,
+		"longest_streak": longest_streak,
 	}