From 3a33f047f57e16d4b14c73136d63ca6a9a10434a Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 5 Jan 2024 18:22:03 +0530
Subject: [PATCH] feat: batch details

---
 .pre-commit-config.yaml                       |   2 +-
 frontend/src/components/AppSidebar.vue        |  99 ++--
 frontend/src/components/BatchCard.vue         | 124 ++--
 frontend/src/components/BatchOverlay.vue      |  81 +++
 frontend/src/components/CourseCard.vue        | 241 +++++---
 frontend/src/components/CourseCardOverlay.vue | 203 ++++---
 frontend/src/components/CourseOutline.vue     | 141 +++--
 frontend/src/pages/Batch.vue                  |  70 +++
 frontend/src/pages/BatchDetail.vue            | 126 +++-
 frontend/src/pages/CourseDetail.vue           | 205 ++++---
 frontend/src/pages/Lesson.vue                 | 542 +++++++++++-------
 frontend/src/router.js                        |   9 +-
 frontend/src/utils/index.js                   |  28 +
 lms/lms/api.py                                |   5 +-
 lms/lms/utils.py                              |   1 +
 15 files changed, 1215 insertions(+), 662 deletions(-)
 create mode 100644 frontend/src/components/BatchOverlay.vue
 create mode 100644 frontend/src/pages/Batch.vue

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index b2ac7630..26145761 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -32,7 +32,7 @@ repos:
     rev: v2.7.1
     hooks:
       - id: prettier
-        types_or: [javascript]
+        types_or: [javascript, vue]
         # Ignore any files that might contain jinja / bundles
         exclude: |
             (?x)^(
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index bfb56346..2a192cd1 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,23 +1,37 @@
 <template>
-    <div class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
-        :class="isSidebarCollapsed ? 'w-12' : 'w-56'">
-        <div class="flex flex-col overflow-hidden">
-            <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
-            <div class="flex flex-col overflow-y-auto">
-                <SidebarLink v-for="link in links" :icon="link.icon" :label="link.label" :to="link.to"
-                    :isCollapsed="isSidebarCollapsed" class="mx-2 my-0.5" />
-            </div>
-        </div>
-        <SidebarLink :label="isSidebarCollapsed ? 'Expand' : 'Collapse'" :isCollapsed="isSidebarCollapsed"
-            @click="isSidebarCollapsed = !isSidebarCollapsed" class="m-2">
-            <template #icon>
-                <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-                    <CollapseSidebar class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
-                        :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }" />
-                </span>
-            </template>
-        </SidebarLink>
-    </div>
+	<div
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
+		:class="isSidebarCollapsed ? 'w-12' : 'w-56'"
+	>
+		<div class="flex flex-col overflow-hidden">
+			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+			<div class="flex flex-col overflow-y-auto">
+				<SidebarLink
+					v-for="link in links"
+					:icon="link.icon"
+					:label="link.label"
+					:to="link.to"
+					:isCollapsed="isSidebarCollapsed"
+					class="mx-2 my-0.5"
+				/>
+			</div>
+		</div>
+		<SidebarLink
+			:label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
+			:isCollapsed="isSidebarCollapsed"
+			@click="isSidebarCollapsed = !isSidebarCollapsed"
+			class="m-2"
+		>
+			<template #icon>
+				<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+					<CollapseSidebar
+						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+					/>
+				</span>
+			</template>
+		</SidebarLink>
+	</div>
 </template>
 
 <script setup>
@@ -26,30 +40,33 @@ import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
 import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const links = [
-    {
-        label: 'Courses',
-        icon: BookOpen,
-        to: 'Courses',
-    },
-    {
-        label: "Batches",
-        icon: Users,
-        to: 'Batches',
-    },
-    {
-        label: "Statistics",
-        icon: TrendingUp,
-        to: 'Statistics',
-    },
-    {
-        label: "Jobs",
-        icon: Briefcase,
-        to: 'Jobs',
-    },
+	{
+		label: 'Courses',
+		icon: BookOpen,
+		to: 'Courses',
+	},
+	{
+		label: 'Batches',
+		icon: Users,
+		to: 'Batches',
+	},
+	{
+		label: 'Statistics',
+		icon: TrendingUp,
+		to: 'Statistics',
+	},
+	{
+		label: 'Jobs',
+		icon: Briefcase,
+		to: 'Jobs',
+	},
 ]
+const getSidebarFromStorage = () => {
+	return useStorage('sidebar_is_collapsed', false)
+}
 
-let isSidebarCollapsed = ref(useStorage("sidebar_is_collapsed", false))
+let isSidebarCollapsed = ref(getSidebarFromStorage())
 </script>
diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index e21941fd..23ab8981 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -1,71 +1,65 @@
 <template>
-    <div class="flex flex-col border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
-        <Badge v-if="batch.seat_count && batch.seats_left > 0" theme="green" class="self-start mb-2">
-            {{ batch.seats_left }} {{ __("Seat Left") }}
-        </Badge>
-        <Badge v-else-if="batch.seat_count && batch.seats_left <= 0" theme="red" class="self-start mb-2">
-            {{ __("Sold Out") }}
-        </Badge>
-        <div class="text-xl font-semibold mb-1">
-            {{ batch.title }}
-        </div>
-        <div class="short-introduction">
-            {{ batch.description }}
-        </div>
-        <div class="mt-auto">
-            <div v-if="batch.amount" class="font-semibold text-lg mb-4">
-                {{ batch.price }}
-            </div>
-            <div class="flex items-center mb-3">
-                <BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700"/>
-                <span>
-                    {{ batch.courses }} {{ __("Courses") }}
-                </span>
-            </div>
-            <div class="flex items-center mb-3">
-                <Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
-                <span>
-                    {{ dayjs(batch.start_date).format("DD MMM YYYY") }} - {{ dayjs(batch.end_date).format("DD MMM YYYY") }}
-                </span>
-            </div>
-            <div class="flex items-center">
-                <Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
-                <span>
-                    {{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
-                </span>
-            </div>
-        </div>
-    </div>
+	<div
+		class="flex flex-col border border-gray-200 rounded-md p-4 h-full"
+		style="min-height: 150px"
+	>
+		<Badge
+			v-if="batch.seat_count && batch.seats_left > 0"
+			theme="green"
+			class="self-start mb-2"
+		>
+			{{ batch.seats_left }} {{ __('Seat Left') }}
+		</Badge>
+		<Badge
+			v-else-if="batch.seat_count && batch.seats_left <= 0"
+			theme="red"
+			class="self-start mb-2"
+		>
+			{{ __('Sold Out') }}
+		</Badge>
+		<div class="text-xl font-semibold mb-1">
+			{{ batch.title }}
+		</div>
+		<div class="short-introduction">
+			{{ batch.description }}
+		</div>
+		<div class="mt-auto">
+			<div v-if="batch.amount" class="font-semibold text-lg mb-4">
+				{{ batch.price }}
+			</div>
+			<div class="flex items-center mb-3">
+				<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				<span> {{ batch.courses }} {{ __('Courses') }} </span>
+			</div>
+			<div class="flex items-center mb-3">
+				<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				<span>
+					{{ dayjs(batch.start_date).format('DD MMM YYYY') }} -
+					{{ dayjs(batch.end_date).format('DD MMM YYYY') }}
+				</span>
+			</div>
+			<div class="flex items-center">
+				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				<span>
+					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
+				</span>
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
-import { Calendar, Clock, BookOpen } from "lucide-vue-next"
-import { inject } from "vue"
-import { Badge } from "frappe-ui"
+import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
+import { inject } from 'vue'
+import { Badge } from 'frappe-ui'
+import { formatTime } from '../utils'
 
-const dayjs = inject("$dayjs")
+const dayjs = inject('$dayjs')
 const props = defineProps({
-    batch: {
-        type: Object,
-        default: null,
-    },
-});
-
-function formatTime(timeString) {
-    if (!timeString) return "";
-    const [hour, minute] = timeString.split(":").map(Number);
-
-    // Create a Date object with dummy values for day, month, and year
-    const dummyDate = new Date(0, 0, 0, hour, minute);
-
-    // Use Intl.DateTimeFormat to format the time in 12-hour format
-    const formattedTime = new Intl.DateTimeFormat("en-US", {
-        hour: "numeric",
-        minute: "numeric",
-        hour12: true,
-    }).format(dummyDate);
-
-    return formattedTime;
-}
+	batch: {
+		type: Object,
+		default: null,
+	},
+})
 </script>
 <style>
 .short-introduction {
@@ -76,6 +70,6 @@ function formatTime(timeString) {
 	width: 100%;
 	overflow: hidden;
 	margin: 0.25rem 0 1.25rem;
-    line-height: 1.5;
+	line-height: 1.5;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
new file mode 100644
index 00000000..cd32fcea
--- /dev/null
+++ b/frontend/src/components/BatchOverlay.vue
@@ -0,0 +1,81 @@
+<template>
+	<div class="shadow rounded-md p-5" style="width: 300px">
+		<Badge
+			v-if="batch.doc.seat_count && seats_left > 0"
+			theme="green"
+			class="self-start mb-2 float-right"
+		>
+			{{ seats_left }} {{ __('Seat Left') }}
+		</Badge>
+		<Badge
+			v-else-if="batch.doc.seat_count && seats_left <= 0"
+			theme="red"
+			class="self-start mb-2 float-right"
+		>
+			{{ __('Sold Out') }}
+		</Badge>
+		<div v-if="batch.doc.amount" class="text-lg font-semibold mb-3">
+			{{ formatNumberIntoCurrency(batch.doc.amount, batch.doc.currency) }}
+		</div>
+		<div class="flex items-center mb-3">
+			<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span> {{ batch.doc.courses.length }} {{ __('Courses') }} </span>
+		</div>
+		<div class="flex items-center mb-3">
+			<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span>
+				{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
+				{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
+			</span>
+		</div>
+		<div class="flex items-center">
+			<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span>
+				{{ formatTime(batch.doc.start_time) }} -
+				{{ formatTime(batch.doc.end_time) }}
+			</span>
+		</div>
+		<Button v-if="user?.data?.is_moderator" class="w-full mt-4">
+			<span>
+				{{ __('Manage Batch') }}
+			</span>
+		</Button>
+		<Button
+			v-else-if="batch.doc.paid_batch"
+			class="w-full mt-4"
+			variant="solid"
+		>
+			<span>
+				{{ __('Register Now') }}
+			</span>
+		</Button>
+		<Button v-if="user?.data?.is_moderator" class="w-full mt-2">
+			<span>
+				{{ __('Edit') }}
+			</span>
+		</Button>
+	</div>
+</template>
+<script setup>
+import { formatNumberIntoCurrency, formatTime } from '@/utils'
+import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
+import { inject, computed } from 'vue'
+import { Badge, Button } from 'frappe-ui'
+
+const dayjs = inject('$dayjs')
+const user = inject('$user')
+
+const props = defineProps({
+	batch: {
+		type: Object,
+		default: null,
+	},
+})
+
+const seats_left = computed(() => {
+	if (props.batch.doc.seat_count) {
+		return props.batch.doc.seat_count - props.batch.doc.students.length
+	}
+	return null
+})
+</script>
diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue
index 43438150..135c88d5 100644
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -1,97 +1,156 @@
 <template>
-    <div class="flex flex-col border border-gray-200 h-full rounded-md shadow-sm text-base overflow-auto" style="min-height: 320px;">
-        <div class="course-image" :class="{ 'default-image': !course.image }" :style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }">
-            <div class="flex relative top-4 left-4 w-fit">
-                <div class="course-card-pills rounded-md border border-gray-200" v-for="tag in course.tags">
-                    {{ tag }}
-                </div>
-            </div>
-            <div v-if="!course.image" class="image-placeholder">{{ course.title[0] }}</div>
-        </div>
-        <div class="flex flex-col flex-auto p-4">
-            <div class="flex items-center justify-between mb-2">
-                <div v-if="course.lesson_count" class="flex items-center space-x-1 py-1">
-                    <BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
-                    <span> {{ course.lesson_count }} </span>
-                </div>
+	<div
+		v-if="course.title"
+		class="flex flex-col border border-gray-200 h-full rounded-md shadow-sm text-base overflow-auto"
+		style="min-height: 320px"
+	>
+		<div
+			class="course-image"
+			:class="{ 'default-image': !course.image }"
+			:style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }"
+		>
+			<div class="flex relative top-4 left-4 w-fit">
+				<div
+					class="course-card-pills rounded-md border border-gray-200"
+					v-for="tag in course.tags"
+				>
+					{{ tag }}
+				</div>
+			</div>
+			<div v-if="!course.image" class="image-placeholder">
+				{{ course.title[0] }}
+			</div>
+		</div>
+		<div class="flex flex-col flex-auto p-4">
+			<div class="flex items-center justify-between mb-2">
+				<div
+					v-if="course.lesson_count"
+					class="flex items-center space-x-1 py-1"
+				>
+					<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
+					<span> {{ course.lesson_count }} </span>
+				</div>
 
-                <div v-if="course.enrollment_count" class="flex items-center space-x-1 py-1">
-                    <Users class="h-4 w-4 stroke-1.5 text-gray-700" />
-                    <span> {{ course.enrollment_count }} </span>
-                </div>
+				<div
+					v-if="course.enrollment_count"
+					class="flex items-center space-x-1 py-1"
+				>
+					<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
+					<span> {{ course.enrollment_count }} </span>
+				</div>
 
-                <div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
-                    <Star class="h-4 w-4 stroke-1.5 text-gray-700" />
-                    <span> {{ course.avg_rating }} </span>
-                </div>
+				<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
+					<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
+					<span> {{ course.avg_rating }} </span>
+				</div>
 
-                <div v-if="course.status != 'Approved'">
-                    <Badge variant="solid" :theme="course.status === 'Under Review' ? 'orange' : 'blue'" size="sm">
-                        {{ course.status }}
-                    </Badge>
-                </div>
-            </div>
-        
-            <div class="text-xl font-semibold">
-                {{ course.title }}
-            </div>
+				<div v-if="course.status != 'Approved'">
+					<Badge
+						variant="solid"
+						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
+						size="sm"
+					>
+						{{ course.status }}
+					</Badge>
+				</div>
+			</div>
 
-            <div class="short-introduction">
-                {{ course.short_introduction }}
-            </div>
-            <div v-if="user && course.membership" class="w-full bg-gray-200 rounded-full h-1 mb-2">
-                <div class="bg-gray-900 h-1 rounded-full" :style="{ width: Math.ceil(course.membership.progress) + '%' }"></div>
-            </div>
-            <div v-if="user && course.membership" class="text-sm mb-4">
-                {{ Math.ceil(course.membership.progress) }}% completed
-            </div>
+			<div class="text-xl font-semibold">
+				{{ course.title }}
+			</div>
 
-            <div class="flex items-center justify-between mt-auto">
-                <div class="flex avatar-group overlap">
-                    <div class="mr-1" :class="{ 'avatar-group overlap': course.instructors.length > 1 }">
-                        <UserAvatar v-for="instructor in course.instructors" :user="instructor"/>
-                    </div>
-                    <span v-if="course.instructors.length == 1">
-                        {{ course.instructors[0].full_name }}
-                    </span>
-                    <span v-if="course.instructors.length == 2">
-                        {{ course.instructors[0].first_name }} and {{ course.instructors[1].first_name }}
-                    </span>
-                    <span v-if="course.instructors.length > 2">
-                        {{ course.instructors[0].first_name }} and {{ course.instructors.length - 1 }} others
-                    </span>
-                </div>
+			<div class="short-introduction">
+				{{ course.short_introduction }}
+			</div>
+			<div
+				v-if="user && course.membership"
+				class="w-full bg-gray-200 rounded-full h-1 mb-2"
+			>
+				<div
+					class="bg-gray-900 h-1 rounded-full"
+					:style="{ width: Math.ceil(course.membership.progress) + '%' }"
+				></div>
+			</div>
+			<div v-if="user && course.membership" class="text-sm mb-4">
+				{{ Math.ceil(course.membership.progress) }}% completed
+			</div>
 
-                <div class="font-semibold">
-                    {{ course.price }}
-                </div>
-            </div>
-        </div>
-    </div>
+			<div class="flex items-center justify-between mt-auto">
+				<div class="flex avatar-group overlap">
+					<div
+						class="mr-1"
+						:class="{ 'avatar-group overlap': course.instructors.length > 1 }"
+					>
+						<UserAvatar
+							v-for="instructor in course.instructors"
+							:user="instructor"
+						/>
+					</div>
+					<span v-if="course.instructors.length == 1">
+						{{ course.instructors[0].full_name }}
+					</span>
+					<span v-if="course.instructors.length == 2">
+						{{ course.instructors[0].first_name }} and
+						{{ course.instructors[1].first_name }}
+					</span>
+					<span v-if="course.instructors.length > 2">
+						{{ course.instructors[0].first_name }} and
+						{{ course.instructors.length - 1 }} others
+					</span>
+				</div>
+
+				<div class="font-semibold">
+					{{ course.price }}
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
-import { Badge } from "frappe-ui"
+import { Badge, createResource } from 'frappe-ui'
+import { ref, watchEffect } from 'vue'
 
-const { isLoggedIn, user } = sessionStore()
+const { user } = sessionStore()
+let course = ref({})
 
 const props = defineProps({
-    course: {
-        type: Object,
-        default: null,
-    },
-});
+	course: {
+		type: [Object, String],
+		default: null,
+	},
+})
 
+const courseDetails = createResource({
+	url: 'lms.lms.utils.get_course_details',
+	cache: ['course', props.courseName],
+	makeParams() {
+		return {
+			course: props.course,
+		}
+	},
+	transform(data) {
+		course.value = data
+	},
+})
+
+/* watchEffect(() => {
+    if (props.course && typeof props.course === "object") {
+        course.value = props.course;
+    } else {
+        courseDetails.reload();
+    }
+}); */
 </script>
 <style>
 .course-image {
-    height: 168px;
-    width: 100%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+	height: 168px;
+	width: 100%;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
 }
 
 .course-card-pills {
@@ -108,31 +167,31 @@ const props = defineProps({
 }
 
 .default-image {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: theme('colors.gray.200');
-    color: theme('colors.gray.700');
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: theme('colors.gray.200');
+	color: theme('colors.gray.700');
 }
 
 .avatar-group {
-    display: inline-flex;
-    align-items: center;
+	display: inline-flex;
+	align-items: center;
 }
 
 .avatar-group .avatar {
 	transition: margin 0.1s ease-in-out;
 }
 .image-placeholder {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    font-size: 5rem;
-    color: theme('colors.gray.700');
-    font-weight: 600;
+	display: flex;
+	align-items: center;
+	flex: 1;
+	font-size: 5rem;
+	color: theme('colors.gray.700');
+	font-weight: 600;
 }
 .avatar-group.overlap .avatar + .avatar {
-    margin-left: calc(-8px);
+	margin-left: calc(-8px);
 }
 
 .short-introduction {
@@ -143,6 +202,6 @@ const props = defineProps({
 	width: 100%;
 	overflow: hidden;
 	margin: 0.25rem 0 1.25rem;
-    line-height: 1.5;
+	line-height: 1.5;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index 5f8d82c4..b02ad176 100644
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -1,101 +1,132 @@
 <template>
-    <div class="shadow rounded-md"  style="width: 300px;">
-        <iframe v-if="course.data.video_link" :src="video_link" class="rounded-t-md" />
-        <div class="p-5">
-            <router-link v-if="course.data.membership && course.data.current_lesson"
-                :to="{name: 'Lesson', params: {
-                    courseName: course.name,
-                    chapterNumber: course.data.current_lesson.split('.')[0],
-                    lessonNumber: course.data.current_lesson.split('.')[1]
-                }}">
-                <Button variant="solid" class="w-full mb-3">
-                    <span>
-                        {{ __("Continue Learning") }}
-                    </span>
-                </Button>
-            </router-link>
-            <Button v-else @click="enrollStudent()" variant="solid" class="w-full mb-3">
-                <span>
-                    {{ __("Start Learning") }}
-                </span>
-            </Button>
-            <Button v-if="user?.data?.is_moderator" variant="subtle" class="w-full mb-3">
-                <span>
-                    {{ __("Edit") }}
-                </span>
-            </Button>
-            <div class="flex items-center mb-3">
-                <Users class="h-4 w-4 text-gray-700"/>
-                <span class="ml-1">
-                    {{ course.data.enrollment_count_formatted }} {{ __("Enrolled") }}
-                </span>
-            </div>
-            <div class="flex items-center mb-3">
-                <BookOpen class="h-4 w-4 text-gray-700"/>
-                <span class="ml-1">
-                    {{ course.data.lesson_count }} {{ __("Lessons") }}
-                </span>
-            </div>
-            <div class="flex items-center">
-                    <Star class="h-4 w-4 fill-orange-500 text-gray-100"/>
-                    <span class="ml-1">
-                        {{ course.data.avg_rating }} {{ __("Rating") }}
-                    </span>
-                </div>
-        </div>
-    </div>
+	<div class="shadow rounded-md" style="width: 300px">
+		<iframe
+			v-if="course.data.video_link"
+			:src="video_link"
+			class="rounded-t-md"
+		/>
+		<div class="p-5">
+			<router-link
+				v-if="course.data.membership"
+				:to="{
+					name: 'Lesson',
+					params: {
+						courseName: course.name,
+						chapterNumber: course.data.current_lesson
+							? course.data.current_lesson.split('.')[0]
+							: 1,
+						lessonNumber: course.data.current_lesson
+							? course.data.current_lesson.split('.')[1]
+							: 1,
+					},
+				}"
+			>
+				<Button variant="solid" class="w-full mb-3">
+					<span>
+						{{ __('Continue Learning') }}
+					</span>
+				</Button>
+			</router-link>
+			<Button
+				v-else
+				@click="enrollStudent()"
+				variant="solid"
+				class="w-full mb-3"
+			>
+				<span>
+					{{ __('Start Learning') }}
+				</span>
+			</Button>
+			<Button
+				v-if="user?.data?.is_moderator"
+				variant="subtle"
+				class="w-full mb-3"
+			>
+				<span>
+					{{ __('Edit') }}
+				</span>
+			</Button>
+			<div class="flex items-center mb-3">
+				<Users class="h-4 w-4 text-gray-700" />
+				<span class="ml-1">
+					{{ course.data.enrollment_count_formatted }} {{ __('Enrolled') }}
+				</span>
+			</div>
+			<div class="flex items-center mb-3">
+				<BookOpen class="h-4 w-4 text-gray-700" />
+				<span class="ml-1">
+					{{ course.data.lesson_count }} {{ __('Lessons') }}
+				</span>
+			</div>
+			<div class="flex items-center">
+				<Star class="h-4 w-4 fill-orange-500 text-gray-100" />
+				<span class="ml-1">
+					{{ course.data.avg_rating }} {{ __('Rating') }}
+				</span>
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource } from "frappe-ui"
-import { createToast } from "@/utils/"
+import { Button, createResource } from 'frappe-ui'
+import { createToast } from '@/utils/'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
-const user = inject("$user");
+const user = inject('$user')
 
 const props = defineProps({
-    course: {
-        type: Object,
-        default: null,
-    },
-});
+	course: {
+		type: Object,
+		default: null,
+	},
+})
 
 const video_link = computed(() => {
-    if (props.course.data.video_link) {
-        return "https://www.youtube.com/embed/" + props.course.data.video_link;
-    }
-    return null;
-});
+	if (props.course.data.video_link) {
+		return 'https://www.youtube.com/embed/' + props.course.data.video_link
+	}
+	return null
+})
 
 function enrollStudent() {
-    if (!user.data) {
-        createToast({
-            title: "Please Login",
-            icon: 'alert-circle',
-            iconClasses: 'text-yellow-600 bg-yellow-100',
-        })
-        setTimeout(() => {
-            window.location.href = `/login?redirect-to=${window.location.pathname}`
-        }, 3000)
-    } else {
-        const enrollStudentResource = createResource({
-            url: "lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership"
-        })
-        console.log(props.course)
-        enrollStudentResource.submit({
-            course: props.course.data.name
-        }).then(() => {
-            createToast({
-                title: "Enrolled Successfully",
-                icon: 'check',
-                iconClasses: 'text-green-600 bg-green-100',
-            })
-            setTimeout(() => {
-                router.push({ name: 'Lesson', params: { courseName: props.course.data.name, chapterNumber: 1, lessonNumber: 1 } })
-            }, 3000)
-        })
-    }
+	if (!user.data) {
+		createToast({
+			title: 'Please Login',
+			icon: 'alert-circle',
+			iconClasses: 'text-yellow-600 bg-yellow-100',
+		})
+		setTimeout(() => {
+			window.location.href = `/login?redirect-to=${window.location.pathname}`
+		}, 3000)
+	} else {
+		const enrollStudentResource = createResource({
+			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
+		})
+		console.log(props.course)
+		enrollStudentResource
+			.submit({
+				course: props.course.data.name,
+			})
+			.then(() => {
+				createToast({
+					title: 'Enrolled Successfully',
+					icon: 'check',
+					iconClasses: 'text-green-600 bg-green-100',
+				})
+				setTimeout(() => {
+					router.push({
+						name: 'Lesson',
+						params: {
+							courseName: props.course.data.name,
+							chapterNumber: 1,
+							lessonNumber: 1,
+						},
+					})
+				}, 3000)
+			})
+	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index 0ac83fe1..caf5e23a 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -1,67 +1,96 @@
 <template>
-    <div class="course-outline text-base">
-        <div class="mt-4">
-            <Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name" :defaultOpen="chapter.idx == route.params.chapterNumber">
-                <DisclosureButton class="flex w-full px-2 pt-2 pb-3">
-                    <ChevronRight
-                        :class="{'rotate-90 transform duration-200' : open, 'duration-200' : !open, 'open': index == 1}"
-                        class="h-5 w-5 text-gray-900 stroke-1 mr-2"
-                    />
-                    <div class="text-base font-medium">
-                        {{ chapter.title }}
-                    </div>
-                </DisclosureButton>
-                <DisclosurePanel class="pb-2">
-                    <div v-for="lesson in chapter.lessons" :key="lesson.name">
-                        <div class="outline-lesson mb-2 pl-9">
-                            <router-link :to='{
-                                name: "Lesson",
-                                params: {
-                                    courseName: courseName,
-                                    chapterNumber: lesson.number.split(".")[0],
-                                    lessonNumber: lesson.number.split(".")[1],
-                                }
-                            }'>
-                                <div class="flex items-center text-sm">
-                                    <MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
-                                    <HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
-                                    <FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
-                                    {{ lesson.title }}
-                                </div>
-                            </router-link>
-                        </div>
-                    </div>
-                </DisclosurePanel>
-            </Disclosure>
-        </div>
-    </div>
+	<div class="course-outline text-base">
+		<div class="mt-4">
+			<Disclosure
+				v-slot="{ open }"
+				v-for="(chapter, index) in outline.data"
+				:key="chapter.name"
+				:defaultOpen="openChapter(chapter.idx)"
+			>
+				<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
+					<ChevronRight
+						:class="{
+							'rotate-90 transform duration-200': open,
+							'duration-200': !open,
+							open: index == 1,
+						}"
+						class="h-5 w-5 text-gray-900 stroke-1 mr-2"
+					/>
+					<div class="text-base">
+						{{ chapter.title }}
+					</div>
+				</DisclosureButton>
+				<DisclosurePanel class="pb-2">
+					<div v-for="lesson in chapter.lessons" :key="lesson.name">
+						<div class="outline-lesson mb-2 pl-9">
+							<router-link
+								:to="{
+									name: 'Lesson',
+									params: {
+										courseName: courseName,
+										chapterNumber: lesson.number.split('.')[0],
+										lessonNumber: lesson.number.split('.')[1],
+									},
+								}"
+							>
+								<div class="flex items-center text-sm">
+									<MonitorPlay
+										v-if="lesson.icon === 'icon-youtube'"
+										class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+									/>
+									<HelpCircle
+										v-else-if="lesson.icon === 'icon-quiz'"
+										class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+									/>
+									<FileText
+										v-else-if="lesson.icon === 'icon-list'"
+										class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+									/>
+									{{ lesson.title }}
+								</div>
+							</router-link>
+						</div>
+					</div>
+				</DisclosurePanel>
+			</Disclosure>
+		</div>
+	</div>
 </template>
 <script setup>
-import { createResource } from "frappe-ui";
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
-import { ChevronRight, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
-import { useRoute } from "vue-router";
+import { createResource } from 'frappe-ui'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import {
+	ChevronRight,
+	MonitorPlay,
+	HelpCircle,
+	FileText,
+} from 'lucide-vue-next'
+import { useRoute } from 'vue-router'
 
-const route = useRoute();
+const route = useRoute()
 const props = defineProps({
-    courseName: {
-        type: String,
-        required: true,
-    },
-});
+	courseName: {
+		type: String,
+		required: true,
+	},
+})
 
 const outline = createResource({
-    url: "lms.lms.utils.get_course_outline",
-    cache: ["course_outline", props.courseName],
-    params: {
-        course: props.courseName
-    },
-    auto: true,
-});
+	url: 'lms.lms.utils.get_course_outline',
+	cache: ['course_outline', props.courseName],
+	params: {
+		course: props.courseName,
+	},
+	auto: true,
+})
+
+const openChapter = (index) => {
+	return index == route.params.chapterNumber || index == 1
+}
 </script>
 <style>
 .outline-lesson:has(.router-link-active) {
-    background-color: theme('colors.gray.100');
-    padding: 0.5rem 0 0.5rem 2rem;
+	background-color: theme('colors.gray.100');
+	padding: 0.5rem 0 0.5rem 2rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
new file mode 100644
index 00000000..0f307523
--- /dev/null
+++ b/frontend/src/pages/Batch.vue
@@ -0,0 +1,70 @@
+<template>
+	<div class="h-screen text-base">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs class="h-7" :items="breadcrumbs" />
+		</header>
+		<div v-if="batch.doc">
+			<div class="grid grid-cols-[70%,30%] h-full">
+				<div class="border-r-2"></div>
+				<div class="p-5">
+					<div class="text-2xl font-semibold mb-3">
+						{{ batch.doc.title }}
+					</div>
+					<div class="flex items-center mb-2">
+						<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+						<span>
+							{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
+							{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
+						</span>
+					</div>
+					<div class="flex items-center mb-6">
+						<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+						<span>
+							{{ formatTime(batch.doc.start_time) }} -
+							{{ formatTime(batch.doc.end_time) }}
+						</span>
+					</div>
+					<div v-html="batch.doc.description"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Breadcrumbs, createDocumentResource } from 'frappe-ui'
+import { computed, inject } from 'vue'
+import { Calendar, Clock } from 'lucide-vue-next'
+import { formatTime } from '@/utils'
+
+const dayjs = inject('$dayjs')
+
+const props = defineProps({
+	batchName: {
+		type: String,
+		required: true,
+	},
+})
+
+const batch = createDocumentResource({
+	doctype: 'LMS Batch',
+	name: props.batchName,
+	cache: ['batch', props.batchName],
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{ label: 'All Batches', route: { name: 'Batches' } },
+		{
+			label: 'Batch Details',
+			route: { name: 'BatchDetail', params: { batchName: props.batchName } },
+		},
+		{
+			label: batch?.doc?.title,
+			route: { name: 'Batch', params: { batchName: props.batchName } },
+		},
+	]
+})
+</script>
diff --git a/frontend/src/pages/BatchDetail.vue b/frontend/src/pages/BatchDetail.vue
index 28441353..3789634b 100644
--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -1,13 +1,123 @@
 <template>
-    <div class="h-screen">
-        this is a batch
-    </div>
+	<div v-if="batch.doc" class="h-screen text-base">
+		<header class="sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5">
+			<Breadcrumbs :items="breadcrumbs" />
+		</header>
+		<div class="m-5 pb-10">
+			<div>
+				<div class="text-3xl font-semibold">
+					{{ batch.doc.title }}
+				</div>
+				<div class="my-3">
+					{{ batch.doc.description }}
+				</div>
+				<div class="flex items-center justify-between w-1/2">
+					<div class="flex items-center">
+						<BookOpen class="h-4 w-4 text-gray-700 mr-2" />
+						<span> {{ batch.doc.courses.length }} {{ __('Courses') }} </span>
+					</div>
+					<span v-if="batch.doc.courses">&middot;</span>
+					<div class="flex items-center">
+						<Calendar class="h-4 w-4 text-gray-700 mr-2" />
+						<span>
+							{{ dayjs(batch.doc.start_date).format('DD MMM YYYY') }} -
+							{{ dayjs(batch.doc.end_date).format('DD MMM YYYY') }}
+						</span>
+					</div>
+					<span v-if="batch.doc.start_date">&middot;</span>
+					<div class="flex items-center">
+						<Clock class="h-4 w-4 text-gray-700 mr-2" />
+						<span>
+							{{ formatTime(batch.doc.start_time) }} -
+							{{ formatTime(batch.doc.end_time) }}
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
+				<div class="">
+					<div v-html="batch.doc.batch_details" class="batch-description"></div>
+				</div>
+				<div>
+					<BatchOverlay :batch="batch" />
+				</div>
+			</div>
+			<div>
+				<div class="text-2xl font-semibold">
+					{{ __('Courses') }}
+				</div>
+				<div
+					v-if="batch.doc.courses"
+					v-for="course in batch.doc.courses"
+					:key="course.course"
+					class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5"
+				>
+					<router-link
+						:to="{
+							name: 'CourseDetail',
+							params: {
+								courseName: course.course,
+							},
+						}"
+					>
+						<CourseCard :course="course.course" :key="course.course" />
+					</router-link>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
+import { Breadcrumbs, createDocumentResource } from 'frappe-ui'
+import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
+import { formatTime } from '../utils'
+import { computed, inject } from 'vue'
+import BatchOverlay from '@/components/BatchOverlay.vue'
+import CourseCard from '@/components/CourseCard.vue'
+
+const dayjs = inject('$dayjs')
+
 const props = defineProps({
-    batchName: {
-        type: String,
-        required: true,
-    },
+	batchName: {
+		type: String,
+		required: true,
+	},
 })
-</script>
\ No newline at end of file
+
+const batch = createDocumentResource({
+	doctype: 'LMS Batch',
+	name: props.batchName,
+	cache: ['batch', props.batchName],
+	auto: true,
+})
+
+const breadcrumbs = computed(() => {
+	let items = [{ label: 'All Batches', route: { name: 'Batches' } }]
+	items.push({
+		label: batch?.doc?.title,
+		route: { name: 'BatchDetail', params: { batchName: batch?.doc?.name } },
+	})
+	return items
+})
+</script>
+<style>
+.batch-description p {
+	margin-bottom: 1rem;
+	line-height: 1.7;
+}
+
+.batch-description li {
+	line-height: 1.7;
+}
+
+.batch-description ol {
+	list-style: auto;
+	margin: revert;
+	padding: revert;
+}
+
+.batch-description strong {
+	font-weight: 600;
+	color: theme('colors.gray.900') !important;
+}
+</style>
diff --git a/frontend/src/pages/CourseDetail.vue b/frontend/src/pages/CourseDetail.vue
index 3364a9ec..771f1bc7 100644
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -1,123 +1,140 @@
 <template>
-    <div v-if="course.data" class="h-screen text-base">
-        <header class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5">
-            <Breadcrumbs
-                class="h-7"
-                :items="breadcrumbs"
-            />
-        </header>
-        <div class="m-5">
-            <div>
-                <div class="text-3xl font-semibold">
-                    {{ course.data.title }}
-                </div>
-                 <div class="mt-1">
-                    {{ course.data.short_introduction }}
-                </div>
-                <div class="flex items-center justify-between mt-3 w-1/3">
-                    <div v-if="course.data.avg_rating" class="flex items-center">
-                        <Star class="h-5 w-5 text-gray-100 fill-orange-500"/>
-                        <span class="ml-1">
-                            {{ course.data.avg_rating }}
-                        </span>
-                    </div>
-                    <span v-if="course.data.avg_rating">&middot;</span>
-                    <div v-if="course.data.enrollment_count" class="flex items-center">
-                        <Users class="h-4 w-4 text-gray-700"/>
-                        <span class="ml-1">
-                            {{ course.data.enrollment_count_formatted }}
-                        </span>
-                    </div>
-                    <span v-if="course.data.enrollment_count">&middot;</span>
-                    <div class="flex items-center">
-                        <span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
-                            <UserAvatar v-for="instructor in course.data.instructors" :user="instructor"/>
-                        </span>
-                        <span v-if="course.data.instructors.length == 1">
-                            {{ course.data.instructors[0].full_name }}
-                        </span>
-                        <span v-if="course.data.instructors.length == 2">
-                            {{ course.data.instructors[0].first_name }} and {{ course.data.instructors[1].first_name }}
-                        </span>
-                        <span v-if="course.data.instructors.length > 2">
-                            {{ course.data.instructors[0].first_name }} and {{ course.data.instructors.length - 1 }} others
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="grid grid-cols-[60%,20%] gap-20 mt-10">
-                <div class="">
-                    <div v-html="course.data.description" class="course-description"></div>
-                    <div class="mt-10">
-                         <div class="text-2xl font-semibold">
-                            {{ __("Course Content") }}
-                        </div>
-                        <CourseOutline :courseName="course.data.name"/>
-                    </div>
-                    <CourseReviews v-if="course.data.avg_rating" :courseName="course.data.name" :avg_rating="course.data.avg_rating" :membership="course.data.membership"/>
-                </div>
-                <div>
-                    <CourseCardOverlay :course="course"/>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div v-if="course.data" class="h-screen text-base">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs class="h-7" :items="breadcrumbs" />
+		</header>
+		<div class="m-5">
+			<div>
+				<div class="text-3xl font-semibold">
+					{{ course.data.title }}
+				</div>
+				<div class="my-3">
+					{{ course.data.short_introduction }}
+				</div>
+				<div class="flex items-center justify-between w-1/3">
+					<div v-if="course.data.avg_rating" class="flex items-center">
+						<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
+						<span class="ml-1">
+							{{ course.data.avg_rating }}
+						</span>
+					</div>
+					<span v-if="course.data.avg_rating">&middot;</span>
+					<div v-if="course.data.enrollment_count" class="flex items-center">
+						<Users class="h-4 w-4 text-gray-700" />
+						<span class="ml-1">
+							{{ course.data.enrollment_count_formatted }}
+						</span>
+					</div>
+					<span v-if="course.data.enrollment_count">&middot;</span>
+					<div class="flex items-center">
+						<span
+							class="mr-1"
+							:class="{
+								'avatar-group overlap': course.data.instructors.length > 1,
+							}"
+						>
+							<UserAvatar
+								v-for="instructor in course.data.instructors"
+								:user="instructor"
+							/>
+						</span>
+						<span v-if="course.data.instructors.length == 1">
+							{{ course.data.instructors[0].full_name }}
+						</span>
+						<span v-if="course.data.instructors.length == 2">
+							{{ course.data.instructors[0].first_name }} and
+							{{ course.data.instructors[1].first_name }}
+						</span>
+						<span v-if="course.data.instructors.length > 2">
+							{{ course.data.instructors[0].first_name }} and
+							{{ course.data.instructors.length - 1 }} others
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="grid grid-cols-[60%,20%] gap-20 mt-10">
+				<div class="">
+					<div
+						v-html="course.data.description"
+						class="course-description"
+					></div>
+					<div class="mt-10">
+						<div class="text-2xl font-semibold">
+							{{ __('Course Content') }}
+						</div>
+						<CourseOutline :courseName="course.data.name" />
+					</div>
+					<CourseReviews
+						v-if="course.data.avg_rating"
+						:courseName="course.data.name"
+						:avg_rating="course.data.avg_rating"
+						:membership="course.data.membership"
+					/>
+				</div>
+				<div>
+					<CourseCardOverlay :course="course" />
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs } from "frappe-ui";
-import { computed } from "vue";
+import { createResource, Breadcrumbs } from 'frappe-ui'
+import { computed } from 'vue'
 import { Users, Star } from 'lucide-vue-next'
-import CourseCardOverlay from '@/components/CourseCardOverlay.vue';
-import CourseOutline from '@/components/CourseOutline.vue';
-import CourseReviews from '@/components/CourseReviews.vue';
+import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
+import CourseOutline from '@/components/CourseOutline.vue'
+import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 
 const props = defineProps({
-    courseName: {
-        type: String,
-        required: true,
-    },
+	courseName: {
+		type: String,
+		required: true,
+	},
 })
 
 const course = createResource({
-    url: "lms.lms.utils.get_course_details",
-    cache: ["course", props.courseName],
-    params: {
-        course: props.courseName
-    },
-    auto: true,
-});
+	url: 'lms.lms.utils.get_course_details',
+	cache: ['course', props.courseName],
+	params: {
+		course: props.courseName,
+	},
+	auto: true,
+})
 
 const breadcrumbs = computed(() => {
-    let items = [{ label: "All Courses", route: { name: "Courses" } }]
-    items.push({
-        label: course?.data?.title,
-        route: { name: "CourseDetail", params: { course: course?.data?.name } },
-    })
-    return items
+	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
+	items.push({
+		label: course?.data?.title,
+		route: { name: 'CourseDetail', params: { course: course?.data?.name } },
+	})
+	return items
 })
 </script>
 <style>
 .course-description p {
-    margin-bottom: 1rem;
-    line-height: 1.7;
+	margin-bottom: 1rem;
+	line-height: 1.7;
 }
 .course-description li {
-    line-height: 1.7;
+	line-height: 1.7;
 }
 
 .course-description ol {
-    list-style: auto;
-    margin: revert;
-    padding: revert;
+	list-style: auto;
+	margin: revert;
+	padding: revert;
 }
 
 .avatar-group {
-    display: inline-flex;
-    align-items: center;
+	display: inline-flex;
+	align-items: center;
 }
 
 .avatar-group .avatar {
 	transition: margin 0.1s ease-in-out;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/pages/Lesson.vue b/frontend/src/pages/Lesson.vue
index 3c0c2414..d9126ec3 100644
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -1,276 +1,388 @@
 <template>
-    <div v-if="lesson.data && course.data" class="h-screen text-base">
-        <header class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5">
-            <Breadcrumbs class="h-7" :items="breadcrumbs" />
-        </header>
-        <div class="grid grid-cols-[70%,30%] h-full">
-            <div v-if="lesson.data.no_preview" class="border-r-2 text-center pt-10">
-                <p class="mb-4">
-                    {{ __("This lesson is not available for preview. Please enroll in the course to access it.") }}
-                </p>
-                <router-link :to='{ name: "CourseDetail", params: { courseName: courseName } }'>
-                    <Button variant="solid">
-                        {{ __("Start Learning") }}
-                    </Button>
-                </router-link>
-            </div>
-            <div v-else class="border-r-2 container pt-5 pb-10">
-                <div class="flex items-center justify-between">
-                     <div class="text-3xl font-semibold">
-                        {{ lesson.data.title }}
-                    </div>
-                    <div>
-                        <router-link v-if="lesson.data.prev" :to='{name: "Lesson", params: {
-                            courseName: courseName,
-                            chapterNumber: lesson.data.prev.split(".")[0],
-                            lessonNumber: lesson.data.prev.split(".")[1]
-                        }}'>
-                            <Button class="mr-2">
-                                <ChevronLeft class="w-4 h-4 stroke-1"/>
-                            </Button>
-                        </router-link>
-                        <router-link v-if="lesson.data.next" :to='{name: "Lesson", params: {
-                            courseName: courseName,
-                            chapterNumber: lesson.data.next.split(".")[0],
-                            lessonNumber: lesson.data.next.split(".")[1]
-                        }}'>
-                            <Button>
-                                <ChevronRight class="w-4 h-4 stroke-1"/>
-                            </Button>
-                        </router-link>
-                    </div>
-                </div>
-               
-                <div class="flex items-center mt-2">
-                    <span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
-                        <UserAvatar v-for="instructor in course.data.instructors" :user="instructor" />
-                    </span>
-                    <span v-if="course.data.instructors.length == 1">
-                        {{ course.data.instructors[0].full_name }}
-                    </span>
-                    <span v-if="course.data.instructors.length == 2">
-                        {{ course.data.instructors[0].first_name }} and {{ course.data.instructors[1].first_name }}
-                    </span>
-                    <span v-if="course.data.instructors.length > 2">
-                        {{ course.data.instructors[0].first_name }} and {{ course.data.instructors.length - 1 }} others
-                    </span>
-                </div>
-                <!-- <div v-html="lesson.data.rendered_content" class="lesson-content mt-6"></div> -->
-                <div class="lesson-content mt-6">
-                    <div v-for="block in lesson.data.body.split('\n\n')">
-                        <div v-if='block.includes("{{ YouTubeVideo")'>
-                            <iframe class="youtube-video" :src="getYouTubeVideoSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
-                        </div>
-                        <div v-else-if='block.includes("{{ Quiz")'>
-                            <Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
-                            <div v-else class="border rounded-md text-center py-20">
-                                <div>
-                                    {{ __("Please login to access the quiz.") }}
-                                </div>
-                                <Button @click="redirectToLogin()" class="mt-2">
-                                    <span>
-                                        {{ __("Login") }}
-                                    </span>
-                                </Button>
-                            </div>
-                        </div>
-                        <div v-else-if='block.includes("{{ Video")'>
-                            <video controls width='100%' controlsList='nodownload'>
-                                <source :src="getId(block)" type='video/mp4'>
-                            </video>
-                        </div>
-                        <div v-else-if='block.includes("{{ PDF")'>
-                            <iframe :src="getPDFSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
-                        </div>
-                        <div v-else-if='block.includes("{{ Audio")'>
-                            <audio width='100%' controls controlsList='nodownload'>
-                                <source :src="getId(block)" type='audio/mp3'>
-                            </audio>
-                        </div>
-                        <div v-else-if='block.includes("{{ Embed")'>
-                            <iframe width="100%" height="400" :src="getId(block)" frameborder="0" allowfullscreen>
-                            </iframe>
-                        </div>
-                        <div v-else v-html="markdown.render(block)">
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="sticky top-10">
-                <div class="bg-gray-50 p-5 border-b-2">
-                    <div class="text-lg font-semibold">
-                        {{ course.data.title }}
-                    </div>
-                    <div v-if="user && course.data.membership" class="text-sm mt-3">
-                        {{ Math.ceil(course.data.membership.progress) }}% completed
-                    </div>
-                    <div v-if="user && course.data.membership" class="w-full bg-gray-200 rounded-full h-1 my-2">
-                        <div class="bg-gray-900 h-1 rounded-full"
-                            :style="{ width: Math.ceil(course.data.membership.progress) + '%' }"></div>
-                    </div>
-                </div>
-                <CourseOutline :courseName="courseName" :key="chapterNumber" />
-            </div>
-        </div>
-    </div>
+	<div v-if="lesson.data && course.data" class="h-screen text-base">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs class="h-7" :items="breadcrumbs" />
+		</header>
+		<div class="grid grid-cols-[70%,30%] h-full">
+			<div v-if="lesson.data.no_preview" class="border-r-2 text-center pt-10">
+				<p class="mb-4">
+					{{
+						__(
+							'This lesson is not available for preview. Please enroll in the course to access it.'
+						)
+					}}
+				</p>
+				<router-link
+					:to="{ name: 'CourseDetail', params: { courseName: courseName } }"
+				>
+					<Button variant="solid">
+						{{ __('Start Learning') }}
+					</Button>
+				</router-link>
+			</div>
+			<div v-else class="border-r-2 container pt-5 pb-10">
+				<div class="flex items-center justify-between">
+					<div class="text-3xl font-semibold">
+						{{ lesson.data.title }}
+					</div>
+					<div>
+						<router-link
+							v-if="lesson.data.prev"
+							:to="{
+								name: 'Lesson',
+								params: {
+									courseName: courseName,
+									chapterNumber: lesson.data.prev.split('.')[0],
+									lessonNumber: lesson.data.prev.split('.')[1],
+								},
+							}"
+						>
+							<Button class="mr-2">
+								<ChevronLeft class="w-4 h-4 stroke-1" />
+							</Button>
+						</router-link>
+						<router-link
+							v-if="lesson.data.next"
+							:to="{
+								name: 'Lesson',
+								params: {
+									courseName: courseName,
+									chapterNumber: lesson.data.next.split('.')[0],
+									lessonNumber: lesson.data.next.split('.')[1],
+								},
+							}"
+						>
+							<Button>
+								<ChevronRight class="w-4 h-4 stroke-1" />
+							</Button>
+						</router-link>
+					</div>
+				</div>
+
+				<div class="flex items-center mt-2">
+					<span
+						class="mr-1"
+						:class="{
+							'avatar-group overlap': course.data.instructors.length > 1,
+						}"
+					>
+						<UserAvatar
+							v-for="instructor in course.data.instructors"
+							:user="instructor"
+						/>
+					</span>
+					<span v-if="course.data.instructors.length == 1">
+						{{ course.data.instructors[0].full_name }}
+					</span>
+					<span v-if="course.data.instructors.length == 2">
+						{{ course.data.instructors[0].first_name }} and
+						{{ course.data.instructors[1].first_name }}
+					</span>
+					<span v-if="course.data.instructors.length > 2">
+						{{ course.data.instructors[0].first_name }} and
+						{{ course.data.instructors.length - 1 }} others
+					</span>
+				</div>
+				<div class="lesson-content mt-6">
+					<div v-if="lesson.data.youtube">
+						<iframe
+							class="youtube-video"
+							:src="getYouTubeVideoSource(lesson.data.youtube)"
+							width="100%"
+							height="400"
+							frameborder="0"
+							allowfullscreen
+						></iframe>
+					</div>
+					<div v-for="block in lesson.data.body.split('\n\n')">
+						<div v-if="block.includes('{{ YouTubeVideo')">
+							<iframe
+								class="youtube-video"
+								:src="getYouTubeVideoSource(block)"
+								width="100%"
+								height="400"
+								frameborder="0"
+								allowfullscreen
+							></iframe>
+						</div>
+						<div v-else-if="block.includes('{{ Quiz')">
+							<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
+							<div v-else class="border rounded-md text-center py-20">
+								<div>
+									{{ __('Please login to access the quiz.') }}
+								</div>
+								<Button @click="redirectToLogin()" class="mt-2">
+									<span>
+										{{ __('Login') }}
+									</span>
+								</Button>
+							</div>
+						</div>
+						<div v-else-if="block.includes('{{ Video')">
+							<video controls width="100%" controlsList="nodownload">
+								<source :src="getId(block)" type="video/mp4" />
+							</video>
+						</div>
+						<div v-else-if="block.includes('{{ PDF')">
+							<iframe
+								:src="getPDFSource(block)"
+								width="100%"
+								height="400"
+								frameborder="0"
+								allowfullscreen
+							></iframe>
+						</div>
+						<div v-else-if="block.includes('{{ Audio')">
+							<audio width="100%" controls controlsList="nodownload">
+								<source :src="getId(block)" type="audio/mp3" />
+							</audio>
+						</div>
+						<div v-else-if="block.includes('{{ Embed')">
+							<iframe
+								width="100%"
+								height="400"
+								:src="getId(block)"
+								frameborder="0"
+								allowfullscreen
+							>
+							</iframe>
+						</div>
+						<div v-else v-html="markdown.render(block)"></div>
+					</div>
+					<div v-if="lesson.data.quiz_id">
+						<Quiz v-if="user.data" :quizName="getId(block)"></Quiz>
+						<div v-else class="border rounded-md text-center py-20">
+							<div>
+								{{ __('Please login to access the quiz.') }}
+							</div>
+							<Button @click="redirectToLogin()" class="mt-2">
+								<span>
+									{{ __('Login') }}
+								</span>
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="sticky top-10">
+				<div class="bg-gray-50 p-5 border-b-2">
+					<div class="text-lg font-semibold">
+						{{ course.data.title }}
+					</div>
+					<div v-if="user && course.data.membership" class="text-sm mt-3">
+						{{ Math.ceil(course.data.membership.progress) }}% completed
+					</div>
+					<div
+						v-if="user && course.data.membership"
+						class="w-full bg-gray-200 rounded-full h-1 my-2"
+					>
+						<div
+							class="bg-gray-900 h-1 rounded-full"
+							:style="{
+								width: Math.ceil(course.data.membership.progress) + '%',
+							}"
+						></div>
+					</div>
+				</div>
+				<CourseOutline :courseName="courseName" :key="chapterNumber" />
+			</div>
+		</div>
+	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button } from "frappe-ui";
-import { computed, watch, onBeforeMount, onUnmounted, inject } from "vue";
+import { createResource, Breadcrumbs, Button } from 'frappe-ui'
+import { computed, watch, onBeforeMount, onUnmounted, inject } from 'vue'
 import { useStorage } from '@vueuse/core'
-import CourseOutline from '@/components/CourseOutline.vue';
-import UserAvatar from '@/components/UserAvatar.vue';
-import { useRoute } from "vue-router";
-import MarkdownIt from "markdown-it";
-import { ChevronLeft, ChevronRight } from "lucide-vue-next";
-import Quiz from '@/components/Quiz.vue';
+import CourseOutline from '@/components/CourseOutline.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import { useRoute } from 'vue-router'
+import MarkdownIt from 'markdown-it'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import Quiz from '@/components/Quiz.vue'
 
-const user = inject("$user");
-const route = useRoute();
+const user = inject('$user')
+const route = useRoute()
 const markdown = new MarkdownIt({
-    html: true,
-    linkify: true,
-});
-
-onBeforeMount(() => {
-    localStorage.setItem("sidebar_is_collapsed", true);
+	html: true,
+	linkify: true,
 })
 
 const props = defineProps({
-    courseName: {
-        type: String,
-        required: true,
-    },
-    chapterNumber: {
-        type: String,
-        required: true,
-    },
-    lessonNumber: {
-        type: String,
-        required: true,
-    },
-});
+	courseName: {
+		type: String,
+		required: true,
+	},
+	chapterNumber: {
+		type: String,
+		required: true,
+	},
+	lessonNumber: {
+		type: String,
+		required: true,
+	},
+})
 
 const lesson = createResource({
-    url: "lms.lms.utils.get_lesson",
-    cache: ["lesson", props.courseName, props.chapterNumber, props.lessonNumber],
-    makeParams(values) {
-        return {
-            course: props.courseName,
-            chapter: values ? values.chapter : props.chapterNumber,
-            lesson: values ? values.lesson : props.lessonNumber,
-        }
-    },
-    auto: true,
-});
+	url: 'lms.lms.utils.get_lesson',
+	cache: ['lesson', props.courseName, props.chapterNumber, props.lessonNumber],
+	makeParams(values) {
+		return {
+			course: props.courseName,
+			chapter: values ? values.chapter : props.chapterNumber,
+			lesson: values ? values.lesson : props.lessonNumber,
+		}
+	},
+	auto: true,
+	onSuccess(data) {
+		if (data.membership) {
+			current_lesson.submit({
+				name: data.membership.name,
+				lesson_name: data.name,
+			})
+		}
+	},
+})
+
+const current_lesson = createResource({
+	url: 'frappe.client.set_value',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Enrollment',
+			name: values.name,
+			fieldname: 'current_lesson',
+			value: values.lesson_name,
+		}
+	},
+})
 
 const course = createResource({
-    url: "lms.lms.utils.get_course_details",
-    cache: ["course", props.courseName],
-    params: {
-        course: props.courseName
-    },
-    auto: true,
-});
+	url: 'lms.lms.utils.get_course_details',
+	cache: ['course', props.courseName],
+	params: {
+		course: props.courseName,
+	},
+	auto: true,
+})
 
 const breadcrumbs = computed(() => {
-    let items = [{ label: "All Courses", route: { name: "Courses" } }]
-    items.push({
-        label: course?.data?.title,
-        route: { name: "CourseDetail", params: { course: props.courseName } },
-    })
-    items.push({
-        label: lesson?.data?.title,
-        route: { name: "Lesson", params: { course: props.courseName, chapterNumber: props.chapterNumber, lessonNumber: props.lessonNumber } },
-    })
-    return items
-});
+	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
+	items.push({
+		label: course?.data?.title,
+		route: { name: 'CourseDetail', params: { course: props.courseName } },
+	})
+	items.push({
+		label: lesson?.data?.title,
+		route: {
+			name: 'Lesson',
+			params: {
+				course: props.courseName,
+				chapterNumber: props.chapterNumber,
+				lessonNumber: props.lessonNumber,
+			},
+		},
+	})
+	return items
+})
+
+onBeforeMount(() => {
+	localStorage.setItem('sidebar_is_collapsed', true)
+})
+
 onUnmounted(() => {
-    useStorage("sidebar_is_collapsed", false);
-});
+	localStorage.setItem('sidebar_is_collapsed', false)
+})
 
 watch(
-    [() => route.params.chapterNumber, () => route.params.lessonNumber],
-    ([newChapterNumber, newLessonNumber], [oldChapterNumber, oldLessonNumber]) => {
-       lesson.submit({
-            chapter: newChapterNumber,
-            lesson: newLessonNumber,
-       })
-    }
-);
+	[() => route.params.chapterNumber, () => route.params.lessonNumber],
+	(
+		[newChapterNumber, newLessonNumber],
+		[oldChapterNumber, oldLessonNumber]
+	) => {
+		if (newChapterNumber && newLessonNumber) {
+			lesson.submit({
+				chapter: newChapterNumber,
+				lesson: newLessonNumber,
+			})
+		}
+	}
+)
 
 const getYouTubeVideoSource = (block) => {
-    return `https://www.youtube.com/embed/${getId(block)}`;
+	if (block.includes('{{')) {
+		block = getId(block)
+	}
+	return `https://www.youtube.com/embed/${block}`
 }
 
 const getPDFSource = (block) => {
-    return `${getId(block)}#toolbar=0`;
+	return `${getId(block)}#toolbar=0`
 }
 
 const getId = (block) => {
-    return block.match(/\(["']([^"']+?)["']\)/)[1];
+	return block.match(/\(["']([^"']+?)["']\)/)[1]
 }
 
 const redirectToLogin = () => {
-    window.location.href = `/login?redirect_to=/courses/${props.courseName}/learn/${route.params.chapterNumber}-${route.params.lessonNumber}`;
+	window.location.href = `/login?redirect_to=/courses/${props.courseName}/learn/${route.params.chapterNumber}-${route.params.lessonNumber}`
 }
 </script>
 <style>
-
 .avatar-group {
-    display: inline-flex;
-    align-items: center;
+	display: inline-flex;
+	align-items: center;
 }
 
 .avatar-group .avatar {
-    transition: margin 0.1s ease-in-out;
+	transition: margin 0.1s ease-in-out;
 }
 
 iframe {
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
+	border: 1px solid #ddd;
+	border-radius: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .lesson-content p {
-    margin-bottom: 1rem;
-    line-height: 1.7;
+	margin-bottom: 1rem;
+	line-height: 1.7;
 }
 
 .lesson-content li {
-    line-height: 1.7;
+	line-height: 1.7;
 }
 
 .lesson-content ol {
-    list-style: auto;
-    margin: revert;
-    padding: 1rem;
+	list-style: auto;
+	margin: revert;
+	padding: 1rem;
 }
 
 .lesson-content ul {
-    list-style: auto;
-    padding: 1rem;
-    margin: revert;
+	list-style: auto;
+	padding: 1rem;
+	margin: revert;
 }
 
 .lesson-content img {
-    border: 1px solid theme("colors.gray.200");
-    border-radius: 0.5rem;
+	border: 1px solid theme('colors.gray.200');
+	border-radius: 0.5rem;
 }
 
 .lesson-content code {
-    display: block;
-    overflow-x: auto;
-    padding: 1rem 1.25rem;
-    background: #011627;
-    color: #d6deeb;
-    border-radius: 0.5rem;
-    margin-bottom: 1rem;
+	display: block;
+	overflow-x: auto;
+	padding: 1rem 1.25rem;
+	background: #011627;
+	color: #d6deeb;
+	border-radius: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .lesson-content a {
-    color: theme("colors.gray.900");
-    text-decoration: underline;
-    font-weight: 500;
+	color: theme('colors.gray.900');
+	text-decoration: underline;
+	font-weight: 500;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 775ba88e..483fce14 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -32,9 +32,16 @@ const routes = [
 		component: () => import('@/pages/Batches.vue'),
 	},
 	{
-		path: '/batches/:batchName',
+		path: '/batches/details/:batchName',
 		name: 'BatchDetail',
 		component: () => import('@/pages/BatchDetail.vue'),
+		props: true,
+	},
+	{
+		path: '/batches/:batchName',
+		name: 'Batch',
+		component: () => import('@/pages/Batch.vue'),
+		props: true,
 	},
 ]
 
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 6f23afe5..a103dcf7 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -11,3 +11,31 @@ export function createToast(options) {
 export function timeAgo(date) {
 	return useTimeAgo(date).value
 }
+
+export function formatTime(timeString) {
+	if (!timeString) return ''
+	const [hour, minute] = timeString.split(':').map(Number)
+
+	// Create a Date object with dummy values for day, month, and year
+	const dummyDate = new Date(0, 0, 0, hour, minute)
+
+	// Use Intl.DateTimeFormat to format the time in 12-hour format
+	const formattedTime = new Intl.DateTimeFormat('en-US', {
+		hour: 'numeric',
+		minute: 'numeric',
+		hour12: true,
+	}).format(dummyDate)
+
+	return formattedTime
+}
+
+export function formatNumberIntoCurrency(number, currency) {
+	if (number) {
+		return number.toLocaleString('en-IN', {
+			maximumFractionDigits: 0,
+			style: 'currency',
+			currency: currency,
+		})
+	}
+	return ''
+}
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 5c475262..c681c900 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -39,10 +39,7 @@ def save_current_lesson(course_name, lesson_name):
 	)
 	if not name:
 		return
-	doc = frappe.get_doc("LMS Enrollment", name)
-	doc.current_lesson = lesson_name
-	doc.save()
-	return {"current_lesson": doc.current_lesson}
+	frappe.db.set_value("LMS Enrollment", name, "current_lesson", lesson_name)
 
 
 @frappe.whitelist()
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index d9577b28..eb4b29eb 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1322,6 +1322,7 @@ def get_lesson(course, chapter, lesson):
 	neighbours = get_neighbour_lesson(course, chapter, lesson)
 	lesson_details.next = neighbours["next"]
 	lesson_details.prev = neighbours["prev"]
+	lesson_details.membership = membership
 	return lesson_details