From 47a30763a098f748d2d9c04c1999eba26a7b5c95 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 4 Mar 2025 17:02:47 +0530
Subject: [PATCH 1/2] refactor: course list fetching and filters

---
 frontend/src/components/CourseCard.vue     |   2 +-
 frontend/src/pages/Courses.vue             | 555 +++++++++++----------
 frontend/tailwind.config.js                |   2 +-
 lms/lms/doctype/lms_course/lms_course.json |   6 +-
 lms/lms/utils.py                           | 121 ++++-
 5 files changed, 401 insertions(+), 285 deletions(-)

diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 1f805d56..b4794bcf 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -16,7 +16,7 @@
 					{{ __('Featured') }}
 				</Badge>
 				<div
-					v-for="tag in course.tags"
+					v-for="tag in course.tags?.split(',')"
 					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
 				>
 					{{ tag }}
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index e8556db1..cf52fd37 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -1,316 +1,323 @@
 <template>
-	<div v-if="courses.data">
-		<header
-			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	<header
+		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
+			v-if="user.data?.is_moderator"
+			:to="{
+				name: 'CourseForm',
+				params: { courseName: 'new' },
+			}"
 		>
-			<Breadcrumbs
-				class="h-7"
-				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
-			/>
-			<div class="flex space-x-2 justify-end">
-				<div class="w-40 md:w-44">
-					<FormControl
-						v-if="categories.data?.length"
-						type="select"
-						v-model="currentCategory"
-						:options="categories.data"
-						:placeholder="__('Category')"
-					/>
-				</div>
-				<div class="w-28 md:w-36">
+			<Button variant="solid">
+				<template #prefix>
+					<Plus class="h-4 w-4 stroke-1.5" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</router-link>
+	</header>
+	<div class="p-5 pb-10">
+		<div
+			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
+		>
+			<div class="text-lg font-semibold">
+				{{ __('All Courses') }}
+			</div>
+			<div
+				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
+			>
+				<TabButtons
+					v-if="user.data"
+					:buttons="courseTabs"
+					v-model="currentTab"
+				/>
+				<FormControl
+					v-model="certification"
+					:label="__('Certification')"
+					type="checkbox"
+					@change="updateCourses()"
+				/>
+				<div class="grid grid-cols-2 gap-2">
 					<FormControl
+						v-model="title"
+						:placeholder="__('Search by Title')"
 						type="text"
-						placeholder="Search"
-						v-model="searchQuery"
-						@input="courses.reload()"
-					>
-						<template #prefix>
-							<Search
-								class="w-4 h-4 stroke-1.5 text-ink-gray-5"
-								name="search"
-							/>
-						</template>
-					</FormControl>
-				</div>
-				<router-link
-					v-if="user.data?.is_moderator || user.data?.is_instructor"
-					:to="{
-						name: 'CourseForm',
-						params: {
-							courseName: 'new',
-						},
-					}"
-				>
-					<Button variant="solid">
-						<template #prefix>
-							<Plus class="h-4 w-4" />
-						</template>
-						{{ __('New') }}
-					</Button>
-				</router-link>
-			</div>
-		</header>
-		<div class="">
-			<Tabs
-				v-if="hasCourses"
-				as="div"
-				v-model="tabIndex"
-				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
-				:tabs="makeTabs"
-			>
-				<template #tab="{ tab, selected }">
-					<div>
-						<button
-							class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
-							:class="{ 'text-ink-gray-9': selected }"
-						>
-							<component v-if="tab.icon" :is="tab.icon" class="h-5" />
-							{{ __(tab.label) }}
-							<Badge theme="gray">
-								{{ tab.count }}
-							</Badge>
-						</button>
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+						@input="updateCourses()"
+					/>
+					<div class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40">
+						<Select
+							v-if="categories.length"
+							v-model="currentCategory"
+							:options="categories"
+							:placeholder="__('Category')"
+							@change="updateCourses()"
+						/>
 					</div>
-				</template>
-				<template #tab-panel="{ tab }">
-					<div
-						v-if="tab.courses && tab.courses.value.length"
-						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-7 my-5 mx-5"
-					>
-						<router-link
-							v-for="course in tab.courses.value"
-							:to="
-								course.membership && course.current_lesson
-									? {
-											name: 'Lesson',
-											params: {
-												courseName: course.name,
-												chapterNumber: course.current_lesson.split('-')[0],
-												lessonNumber: course.current_lesson.split('-')[1],
-											},
-									  }
-									: course.membership
-									? {
-											name: 'Lesson',
-											params: {
-												courseName: course.name,
-												chapterNumber: 1,
-												lessonNumber: 1,
-											},
-									  }
-									: {
-											name: 'CourseDetail',
-											params: { courseName: course.name },
-									  }
-							"
-						>
-							<CourseCard :course="course" />
-						</router-link>
-					</div>
-					<div v-else class="p-5 italic text-ink-gray-4">
-						{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
-					</div>
-				</template>
-			</Tabs>
-			<div
-				v-else-if="
-					!courses.loading &&
-					(user.data?.is_moderator || user.data?.is_instructor)
-				"
-				class="grid grid-cols-3 p-5"
-			>
-				<router-link
-					:to="{
-						name: 'CourseForm',
-						params: {
-							courseName: 'new',
-						},
-					}"
-				>
-					<div class="bg-surface-menu-bar py-32 px-5 rounded-md">
-						<div class="flex flex-col items-center text-center space-y-2">
-							<Plus
-								class="size-10 stroke-1 text-ink-gray-8 p-1 rounded-full border bg-surface-white"
-							/>
-							<div class="font-medium">
-								{{ __('Create a Course') }}
-							</div>
-							<span class="text-ink-gray-7 text-sm leading-4">
-								{{ __('You can add chapters and lessons to it.') }}
-							</span>
-						</div>
-					</div>
-				</router-link>
-			</div>
-			<div
-				v-else-if="!courses.loading && !hasCourses"
-				class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
-			>
-				<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-				<div class="text-xl font-medium">
-					{{ __('No courses found') }}
-				</div>
-				<div class="leading-5">
-					{{
-						__(
-							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
-						)
-					}}
 				</div>
 			</div>
 		</div>
+		<div
+			v-if="courses.data?.length"
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-5"
+		>
+			<router-link
+				v-for="course in courses.data"
+				:to="{ name: 'CourseDetail', params: { courseName: course.name } }"
+			>
+				<CourseCard :course="course" />
+			</router-link>
+		</div>
+		<div
+			v-else-if="!courses.list.loading"
+			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
+		>
+			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+			<div class="text-lg font-medium mb-1">
+				{{ __('No courses found') }}
+			</div>
+			<div class="leading-5 w-2/5 text-center">
+				{{
+					__(
+						'There are no courses matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
+					)
+				}}
+			</div>
+		</div>
+		<div
+			v-if="!courses.list.loading && courses.hasNextPage"
+			class="flex justify-center mt-5"
+		>
+			<Button @click="courses.next()">
+				{{ __('Load More') }}
+			</Button>
+		</div>
 	</div>
 </template>
-
 <script setup>
 import {
-	Badge,
 	Breadcrumbs,
 	Button,
-	call,
-	createResource,
+	createListResource,
 	FormControl,
-	Tabs,
+	Select,
+	TabButtons,
 } from 'frappe-ui'
-import CourseCard from '@/components/CourseCard.vue'
-import { BookOpen, Plus, Search } from 'lucide-vue-next'
-import { ref, computed, inject, onMounted, watch } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
+import { BookOpen, Plus } from 'lucide-vue-next'
 import { updateDocumentTitle } from '@/utils'
-import { useRouter } from 'vue-router'
-import { useSettings } from '@/stores/settings'
+import CourseCard from '@/components/CourseCard.vue'
 
 const user = inject('$user')
-const searchQuery = ref('')
+const dayjs = inject('$dayjs')
+const start = ref(0)
+const pageLength = ref(30)
+const categories = ref([])
 const currentCategory = ref(null)
-const hasCourses = ref(false)
-const router = useRouter()
-const settings = useSettings()
+const title = ref('')
+const certification = ref(false)
+const filters = ref({})
+const currentTab = ref('Live')
 
 onMounted(() => {
-	checkLearningPath()
-	let queries = new URLSearchParams(location.search)
-	if (queries.has('category')) {
-		currentCategory.value = queries.get('category')
-	}
+	setFiltersFromQuery()
+	updateCourses()
+	categories.value = [
+		{
+			label: '',
+			value: null,
+		},
+	]
 })
 
-const checkLearningPath = () => {
-	if (
-		settings.learningPaths.data &&
-		(!user.data?.is_moderator || !user.data?.is_instructor)
-	) {
-		router.push({ name: 'Programs' })
+const setFiltersFromQuery = () => {
+	let queries = new URLSearchParams(location.search)
+	title.value = queries.get('title') || ''
+	currentCategory.value = queries.get('category') || null
+	certification.value = queries.get('certification') || false
+}
+
+const courses = createListResource({
+	doctype: 'LMS Course',
+	url: 'lms.lms.utils.get_courses',
+	cache: ['courses', user.data?.name],
+	pageLength: pageLength.value,
+	start: start.value,
+	onSuccess(data) {
+		let allCategories = data.map((course) => course.category)
+		allCategories = allCategories.filter(
+			(category, index) => allCategories.indexOf(category) === index && category
+		)
+		if (categories.value.length <= allCategories.length) {
+			updateCategories(data)
+		}
+	},
+})
+
+const updateCourses = () => {
+	updateFilters()
+	courses.update({
+		filters: filters.value,
+	})
+	courses.reload()
+}
+
+const updateFilters = () => {
+	updateCategoryFilter()
+	updateTitleFilter()
+	updateCertificationFilter()
+	updateTabFilter()
+	updateStudentFilter()
+	setQueryParams()
+}
+
+const updateCategoryFilter = () => {
+	if (currentCategory.value) {
+		filters.value['category'] = currentCategory.value
+	} else {
+		delete filters.value['category']
 	}
 }
 
-const courses = createResource({
-	url: 'lms.lms.utils.get_courses',
-	cache: ['courses', user.data?.email],
-	auto: true,
+const updateTitleFilter = () => {
+	if (title.value) {
+		filters.value['title'] = ['like', `%${title.value}%`]
+	} else {
+		delete filters.value['title']
+	}
+}
+
+const updateCertificationFilter = () => {
+	if (certification.value) {
+		filters.value['certification'] = 1
+	} else {
+		delete filters.value['certification']
+	}
+}
+
+const updateTabFilter = () => {
+	if (!user.data) {
+		return
+	}
+	delete filters.value['live']
+	delete filters.value['created']
+	delete filters.value['published_on']
+	delete filters.value['upcoming']
+	if (currentTab.value == 'Enrolled' && user.data?.is_student) {
+		filters.value['enrolled'] = 1
+		delete filters.value['published']
+	} else if (user.data?.is_student) {
+		delete filters.value['enrolled']
+	} else {
+		delete filters.value['published']
+		if (currentTab.value == 'Live') {
+			filters.value['published'] = 1
+			filters.value['upcoming'] = 0
+			filters.value['live'] = 1
+		} else if (currentTab.value == 'Upcoming') {
+			filters.value['upcoming'] = 1
+			filters.value['published'] = 1
+		} else if (currentTab.value == 'New') {
+			filters.value['published'] = 1
+			filters.value['published_on'] = [
+				'>=',
+				dayjs().add(-3, 'month').format('YYYY-MM-DD'),
+			]
+		} else if (currentTab.value == 'Created') {
+			filters.value['created'] = 1
+		}
+	}
+}
+
+const updateStudentFilter = () => {
+	if (!user.data || (user.data?.is_student && currentTab.value != 'Enrolled')) {
+		filters.value['published'] = 1
+	}
+}
+
+const setQueryParams = () => {
+	let queries = new URLSearchParams(location.search)
+	let filterKeys = {
+		title: title.value,
+		category: currentCategory.value,
+		certification: certification.value,
+	}
+
+	Object.keys(filterKeys).forEach((key) => {
+		if (filterKeys[key]) {
+			queries.set(key, filterKeys[key])
+		} else {
+			queries.delete(key)
+		}
+	})
+
+	history.replaceState({}, '', `${location.pathname}?${queries.toString()}`)
+}
+
+const updateCategories = (data) => {
+	data.forEach((course) => {
+		if (
+			course.category &&
+			!categories.value.find((category) => category.value === course.category)
+		)
+			categories.value.push({
+				label: course.category,
+				value: course.category,
+			})
+	})
+}
+
+watch(currentTab, () => {
+	updateCourses()
 })
 
-const tabIndex = ref(0)
-let tabs
+const courseType = computed(() => {
+	let types = [
+		{ label: __(''), value: null },
+		{ label: __('New'), value: 'New' },
+		{ label: __('Upcoming'), value: 'Upcoming' },
+	]
+	if (user.data?.is_student) {
+		types.push({ label: __('Enrolled'), value: 'Enrolled' })
+	} else {
+		types.push({ label: __('Created'), value: 'Created' })
+	}
+	return types
+})
 
-const makeTabs = computed(() => {
-	tabs = []
-	addToTabs('Live')
-	addToTabs('New')
-	addToTabs('Upcoming')
-
-	if (user.data) {
-		addToTabs('Enrolled')
-
-		if (
-			user.data.is_moderator ||
-			user.data.is_instructor ||
-			courses.data?.created?.length
-		) {
-			addToTabs('Created')
-		}
-
-		if (user.data.is_moderator) {
-			addToTabs('Under Review')
-		}
+const courseTabs = computed(() => {
+	let tabs = [
+		{
+			label: __('Live'),
+		},
+		{
+			label: __('New'),
+		},
+		{
+			label: __('Upcoming'),
+		},
+	]
+	if (user.data?.is_student) {
+		tabs.push({ label: __('Enrolled') })
+	} else {
+		tabs.push({ label: __('Created') })
 	}
 	return tabs
 })
 
-const addToTabs = (label) => {
-	let courses = getCourses(label.toLowerCase().split(' ').join('_'))
-	tabs.push({
-		label,
-		courses: computed(() => courses),
-		count: computed(() => courses.length),
-	})
-}
-
-const getCourses = (type) => {
-	let courseList = courses.data[type]
-	if (searchQuery.value) {
-		let query = searchQuery.value.toLowerCase()
-		courseList = courseList.filter(
-			(course) =>
-				course.title.toLowerCase().includes(query) ||
-				course.short_introduction.toLowerCase().includes(query) ||
-				course.tags.filter((tag) => tag.toLowerCase().includes(query)).length
-		)
-	}
-	if (currentCategory.value && currentCategory.value != '') {
-		courseList = courseList.filter(
-			(course) => course.category == currentCategory.value
-		)
-	}
-	return courseList
-}
-
-const categories = createResource({
-	url: 'lms.lms.api.get_categories',
-	makeParams() {
-		return {
-			doctype: 'LMS Course',
-			filters: {
-				published: 1,
-			},
-		}
+const breadcrumbs = computed(() => [
+	{
+		label: __('Courses'),
+		route: { name: 'Courses' },
 	},
-	cache: ['courseCategories'],
-	auto: true,
-	transform(data) {
-		data.unshift({
-			label: '',
-			value: null,
-		})
-	},
-})
-
-watch(courses, () => {
-	if (courses.data) {
-		Object.keys(courses.data).forEach((section) => {
-			if (courses.data[section].length) {
-				hasCourses.value = true
-			}
-		})
-	}
-})
-
-watch(
-	() => currentCategory.value,
-	() => {
-		let queries = new URLSearchParams(location.search)
-		if (currentCategory.value) {
-			queries.set('category', currentCategory.value)
-		} else {
-			queries.delete('category')
-		}
-		history.pushState(null, '', `${location.pathname}?${queries.toString()}`)
-	}
-)
+])
 
 const pageMeta = computed(() => {
 	return {
 		title: 'Courses',
-		description: 'All Courses divided by categories',
+		description: 'All published courses.',
 	}
 })
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index edd8f9b5..0f6fe469 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -12,7 +12,7 @@ module.exports = {
 				1.5: '1.5',
 			},
 			screens: {
-				'2xl': '1536px',
+				'2xl': '1600px',
 				'3xl': '1920px',
 			},
 		},
diff --git a/lms/lms/doctype/lms_course/lms_course.json b/lms/lms/doctype/lms_course/lms_course.json
index d43de922..90e900d0 100644
--- a/lms/lms/doctype/lms_course/lms_course.json
+++ b/lms/lms/doctype/lms_course/lms_course.json
@@ -242,14 +242,14 @@
   {
    "default": "0",
    "fieldname": "enrollments",
-   "fieldtype": "Data",
+   "fieldtype": "Int",
    "label": "Enrollments",
    "read_only": 1
   },
   {
    "default": "0",
    "fieldname": "lessons",
-   "fieldtype": "Data",
+   "fieldtype": "Int",
    "label": "Lessons",
    "read_only": 1
   },
@@ -298,7 +298,7 @@
   }
  ],
  "make_attachments_public": 1,
- "modified": "2025-02-24 11:50:58.325804",
+ "modified": "2025-03-04 15:43:25.151554",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course",
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index a031ee72..6ccd8ed4 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -985,17 +985,126 @@ def change_currency(amount, currency, country=None):
 
 
 @frappe.whitelist(allow_guest=True)
-def get_courses():
+def get_courses(filters=None, start=0, page_length=20):
 	"""Returns the list of courses."""
-	courses = []
-	course_list = frappe.get_all("LMS Course", pluck="name")
-	for course in course_list:
-		courses.append(get_course_details(course))
 
-	courses = get_categorized_courses(courses)
+	if not filters:
+		filters = {}
+
+	filters, or_filters, show_featured = update_course_filters(filters)
+	fields = get_course_fields()
+
+	courses = frappe.get_all(
+		"LMS Course",
+		filters=filters,
+		fields=fields,
+		or_filters=or_filters,
+		order_by="enrollments desc",
+		start=start,
+		page_length=page_length,
+	)
+	if show_featured:
+		courses = get_featured_courses(filters, or_filters, fields) + courses
+
+	courses = get_course_card_details(courses)
 	return courses
 
 
+def get_course_card_details(courses):
+	for course in courses:
+		course.instructors = get_instructors(course.name)
+
+		if course.paid_course and course.published == 1:
+			course.amount, course.currency = check_multicurrency(
+				course.course_price, course.currency, None, course.amount_usd
+			)
+			course.price = fmt_money(course.amount, 0, course.currency)
+
+	return courses
+
+
+def get_course_or_filters(filters):
+	or_filters = {}
+	or_filters.update({"title": filters.get("title")})
+	or_filters.update({"short_introduction": filters.get("title")})
+	or_filters.update({"description": filters.get("title")})
+	or_filters.update({"tags": filters.get("title")})
+	return or_filters
+
+
+def update_course_filters(filters):
+	or_filters = {}
+	show_featured = False
+
+	if filters.get("title"):
+		or_filters = get_course_or_filters(filters)
+		del filters["title"]
+
+	if filters.get("enrolled"):
+		enrolled_courses = frappe.get_all(
+			"LMS Enrollment", {"member": frappe.session.user}, pluck="course"
+		)
+		filters.update({"name": ["in", enrolled_courses]})
+		del filters["enrolled"]
+
+	if filters.get("created"):
+		created_courses = frappe.get_all(
+			"Course Instructor", {"instructor": frappe.session.user}, pluck="parent"
+		)
+		filters.update({"name": ["in", created_courses]})
+		del filters["created"]
+
+	if filters.get("live"):
+		filters.update({"featured": 0})
+		show_featured = True
+		del filters["live"]
+
+	if filters.get("certification"):
+		or_filters.update({"enable_certification": 1})
+		or_filters.update({"paid_certificate": 1})
+		del filters["certification"]
+
+	return filters, or_filters, show_featured
+
+
+def get_featured_courses(filters, or_filters, fields):
+	filters.update({"featured": 1})
+	featured_courses = frappe.get_all(
+		"LMS Course",
+		filters=filters,
+		fields=fields,
+		or_filters=or_filters,
+		order_by="enrollments desc",
+	)
+	return featured_courses
+
+
+def get_course_fields():
+	return [
+		"name",
+		"title",
+		"tags",
+		"image",
+		"short_introduction",
+		"published",
+		"upcoming",
+		"featured",
+		"disable_self_learning",
+		"published_on",
+		"category",
+		"status",
+		"paid_course",
+		"paid_certificate",
+		"course_price",
+		"currency",
+		"amount_usd",
+		"enable_certification",
+		"lessons",
+		"enrollments",
+		"rating",
+	]
+
+
 @frappe.whitelist(allow_guest=True)
 def get_course_details(course):
 	course_details = frappe.db.get_value(

From 22a9169f87a0d3d3729d04fd6a69d6a4a162f485 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 4 Mar 2025 17:14:01 +0530
Subject: [PATCH 2/2] fix: show progress bar for enrolled courses

---
 frontend/src/components/CourseCard.vue |  3 ++-
 frontend/src/pages/Courses.vue         |  6 ++++--
 lms/lms/utils.py                       | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index b4794bcf..d26f5130 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -16,7 +16,8 @@
 					{{ __('Featured') }}
 				</Badge>
 				<div
-					v-for="tag in course.tags?.split(',')"
+					v-if="course.tags"
+					v-for="tag in course.tags?.split(', ')"
 					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
 				>
 					{{ tag }}
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index cf52fd37..4512e820 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -201,17 +201,19 @@ const updateTabFilter = () => {
 	if (!user.data) {
 		return
 	}
+
 	delete filters.value['live']
 	delete filters.value['created']
 	delete filters.value['published_on']
 	delete filters.value['upcoming']
+
 	if (currentTab.value == 'Enrolled' && user.data?.is_student) {
 		filters.value['enrolled'] = 1
 		delete filters.value['published']
-	} else if (user.data?.is_student) {
-		delete filters.value['enrolled']
 	} else {
 		delete filters.value['published']
+		delete filters.value['enrolled']
+
 		if (currentTab.value == 'Live') {
 			filters.value['published'] = 1
 			filters.value['upcoming'] = 0
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 6ccd8ed4..b1a73e86 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1006,6 +1006,7 @@ def get_courses(filters=None, start=0, page_length=20):
 	if show_featured:
 		courses = get_featured_courses(filters, or_filters, fields) + courses
 
+	courses = get_enrollment_details(courses)
 	courses = get_course_card_details(courses)
 	return courses
 
@@ -1067,6 +1068,24 @@ def update_course_filters(filters):
 	return filters, or_filters, show_featured
 
 
+def get_enrollment_details(courses):
+	for course in courses:
+		filters = {
+			"course": course.name,
+			"member": frappe.session.user,
+		}
+
+		if frappe.db.exists("LMS Enrollment", filters):
+			course.membership = frappe.db.get_value(
+				"LMS Enrollment",
+				filters,
+				["name", "course", "current_lesson", "progress", "member"],
+				as_dict=1,
+			)
+
+	return courses
+
+
 def get_featured_courses(filters, or_filters, fields):
 	filters.update({"featured": 1})
 	featured_courses = frappe.get_all(