feat: batch details

.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)^(

frontend/src/components/AppSidebar.vue

@@ -1,19 +1,33 @@
 <template>
-    <div class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
+	<div
-        :class="isSidebarCollapsed ? 'w-12' : 'w-56'">
+		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"
+				<SidebarLink
-                    :isCollapsed="isSidebarCollapsed" class="mx-2 my-0.5" />
+					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"
+		<SidebarLink
-            @click="isSidebarCollapsed = !isSidebarCollapsed" class="m-2">
+			: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"
+					<CollapseSidebar
-                        :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }" />
+						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+						:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+					/>
 				</span>
 			</template>
 		</SidebarLink>
@@ -26,7 +40,7 @@ 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 = [
 	{
@@ -35,21 +49,24 @@ const links = [
 		to: 'Courses',
 	},
 	{
-        label: "Batches",
+		label: 'Batches',
 		icon: Users,
 		to: 'Batches',
 	},
 	{
-        label: "Statistics",
+		label: 'Statistics',
 		icon: TrendingUp,
 		to: 'Statistics',
 	},
 	{
-        label: "Jobs",
+		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>

frontend/src/components/BatchCard.vue

@@ -1,10 +1,21 @@
 <template>
-    <div class="flex flex-col border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
+	<div
-        <Badge v-if="batch.seat_count && batch.seats_left > 0" theme="green" class="self-start mb-2">
+		class="flex flex-col border border-gray-200 rounded-md p-4 h-full"
-            {{ batch.seats_left }} {{ __("Seat Left") }}
+		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">
+		<Badge
-            {{ __("Sold Out") }}
+			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 }}
@@ -18,14 +29,13 @@
 			</div>
 			<div class="flex items-center mb-3">
 				<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
-                <span>
+				<span> {{ batch.courses }} {{ __('Courses') }} </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") }}
+					{{ dayjs(batch.start_date).format('DD MMM YYYY') }} -
+					{{ dayjs(batch.end_date).format('DD MMM YYYY') }}
 				</span>
 			</div>
 			<div class="flex items-center">
@@ -38,34 +48,18 @@
 	</div>
 </template>
 <script setup>
-import { Calendar, Clock, BookOpen } from "lucide-vue-next"
+import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
-import { inject } from "vue"
+import { inject } from 'vue'
-import { Badge } from "frappe-ui"
+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;
-}
 </script>
 <style>
 .short-introduction {

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>

frontend/src/components/CourseCard.vue

@@ -1,21 +1,40 @@
 <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
-        <div class="course-image" :class="{ 'default-image': !course.image }" :style="{ backgroundImage: 'url(' + encodeURI(course.image) + ')' }">
+		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">
+				<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 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">
+				<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">
+				<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>
@@ -26,7 +45,11 @@
 				</div>
 
 				<div v-if="course.status != 'Approved'">
-                    <Badge variant="solid" :theme="course.status === 'Under Review' ? 'orange' : 'blue'" size="sm">
+					<Badge
+						variant="solid"
+						:theme="course.status === 'Under Review' ? 'orange' : 'blue'"
+						size="sm"
+					>
 						{{ course.status }}
 					</Badge>
 				</div>
@@ -39,8 +62,14 @@
 			<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
-                <div class="bg-gray-900 h-1 rounded-full" :style="{ width: Math.ceil(course.membership.progress) + '%' }"></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
@@ -48,17 +77,25 @@
 
 			<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 }">
+					<div
-                        <UserAvatar v-for="instructor in course.instructors" :user="instructor"/>
+						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 }}
+						{{ 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
+						{{ course.instructors[0].first_name }} and
+						{{ course.instructors.length - 1 }} others
 					</span>
 				</div>
 
@@ -73,17 +110,39 @@
 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,
+		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 {

frontend/src/components/CourseCardOverlay.vue

@@ -1,45 +1,67 @@
 <template>
-    <div class="shadow rounded-md"  style="width: 300px;">
+	<div class="shadow rounded-md" style="width: 300px">
-        <iframe v-if="course.data.video_link" :src="video_link" class="rounded-t-md" />
+		<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"
+			<router-link
-                :to="{name: 'Lesson', params: {
+				v-if="course.data.membership"
+				:to="{
+					name: 'Lesson',
+					params: {
 						courseName: course.name,
-                    chapterNumber: course.data.current_lesson.split('.')[0],
+						chapterNumber: course.data.current_lesson
-                    lessonNumber: course.data.current_lesson.split('.')[1]
+							? 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") }}
+						{{ __('Continue Learning') }}
 					</span>
 				</Button>
 			</router-link>
-            <Button v-else @click="enrollStudent()" variant="solid" class="w-full mb-3">
+			<Button
+				v-else
+				@click="enrollStudent()"
+				variant="solid"
+				class="w-full mb-3"
+			>
 				<span>
-                    {{ __("Start Learning") }}
+					{{ __('Start Learning') }}
 				</span>
 			</Button>
-            <Button v-if="user?.data?.is_moderator" variant="subtle" class="w-full mb-3">
+			<Button
+				v-if="user?.data?.is_moderator"
+				variant="subtle"
+				class="w-full mb-3"
+			>
 				<span>
-                    {{ __("Edit") }}
+					{{ __('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") }}
+					{{ 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") }}
+					{{ 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") }}
+					{{ course.data.avg_rating }} {{ __('Rating') }}
 				</span>
 			</div>
 		</div>
@@ -48,31 +70,31 @@
 <script setup>
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource } from "frappe-ui"
+import { Button, createResource } from 'frappe-ui'
-import { createToast } from "@/utils/"
+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,
 	},
-});
+})
 
 const video_link = computed(() => {
 	if (props.course.data.video_link) {
-        return "https://www.youtube.com/embed/" + props.course.data.video_link;
+		return 'https://www.youtube.com/embed/' + props.course.data.video_link
 	}
-    return null;
+	return null
-});
+})
 
 function enrollStudent() {
 	if (!user.data) {
 		createToast({
-            title: "Please Login",
+			title: 'Please Login',
 			icon: 'alert-circle',
 			iconClasses: 'text-yellow-600 bg-yellow-100',
 		})
@@ -81,19 +103,28 @@ function enrollStudent() {
 		}, 3000)
 	} else {
 		const enrollStudentResource = createResource({
-            url: "lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership"
+			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
 		})
 		console.log(props.course)
-        enrollStudentResource.submit({
+		enrollStudentResource
-            course: props.course.data.name
+			.submit({
-        }).then(() => {
+				course: props.course.data.name,
+			})
+			.then(() => {
 				createToast({
-                title: "Enrolled Successfully",
+					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 } })
+					router.push({
+						name: 'Lesson',
+						params: {
+							courseName: props.course.data.name,
+							chapterNumber: 1,
+							lessonNumber: 1,
+						},
+					})
 				}, 3000)
 			})
 	}

frontend/src/components/CourseOutline.vue

@@ -1,31 +1,51 @@
 <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">
+			<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="{
+							'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">
+					<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='{
+							<router-link
-                                name: "Lesson",
+								:to="{
+									name: 'Lesson',
 									params: {
 										courseName: courseName,
-                                    chapterNumber: lesson.number.split(".")[0],
+										chapterNumber: lesson.number.split('.')[0],
-                                    lessonNumber: lesson.number.split(".")[1],
+										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"/>
+									<MonitorPlay
-                                    <HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
+										v-if="lesson.icon === 'icon-youtube'"
-                                    <FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
+										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>
@@ -37,27 +57,36 @@
 	</div>
 </template>
 <script setup>
-import { createResource } from "frappe-ui";
+import { createResource } from 'frappe-ui'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
-import { ChevronRight, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
+import {
-import { useRoute } from "vue-router";
+	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,
 	},
-});
+})
 
 const outline = createResource({
-    url: "lms.lms.utils.get_course_outline",
+	url: 'lms.lms.utils.get_course_outline',
-    cache: ["course_outline", props.courseName],
+	cache: ['course_outline', props.courseName],
 	params: {
-        course: props.courseName
+		course: props.courseName,
 	},
 	auto: true,
-});
+})
+
+const openChapter = (index) => {
+	return index == route.params.chapterNumber || index == 1
+}
 </script>
 <style>
 .outline-lesson:has(.router-link-active) {

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>

frontend/src/pages/BatchDetail.vue

@@ -1,13 +1,123 @@
 <template>
-    <div class="h-screen">
+	<div v-if="batch.doc" class="h-screen text-base">
-        this is a batch
+		<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,
 	},
 })
+
+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>

frontend/src/pages/CourseDetail.vue

@@ -1,20 +1,19 @@
 <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">
+		<header
-            <Breadcrumbs
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
-                class="h-7"
+		>
-                :items="breadcrumbs"
+			<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">
+				<div class="my-3">
 					{{ course.data.short_introduction }}
 				</div>
-                <div class="flex items-center justify-between mt-3 w-1/3">
+				<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">
@@ -30,31 +29,49 @@
 					</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 }">
+						<span
-                            <UserAvatar v-for="instructor in course.data.instructors" :user="instructor"/>
+							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 }}
+							{{ 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
+							{{ 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
+						v-html="course.data.description"
+						class="course-description"
+					></div>
 					<div class="mt-10">
 						<div class="text-2xl font-semibold">
-                            {{ __("Course Content") }}
+							{{ __('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"/>
+					<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" />
@@ -64,12 +81,12 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs } from "frappe-ui";
+import { createResource, Breadcrumbs } from 'frappe-ui'
-import { computed } from "vue";
+import { computed } from 'vue'
 import { Users, Star } from 'lucide-vue-next'
-import CourseCardOverlay from '@/components/CourseCardOverlay.vue';
+import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
-import CourseOutline from '@/components/CourseOutline.vue';
+import CourseOutline from '@/components/CourseOutline.vue'
-import CourseReviews from '@/components/CourseReviews.vue';
+import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 
 const props = defineProps({
@@ -80,19 +97,19 @@ const props = defineProps({
 })
 
 const course = createResource({
-    url: "lms.lms.utils.get_course_details",
+	url: 'lms.lms.utils.get_course_details',
-    cache: ["course", props.courseName],
+	cache: ['course', props.courseName],
 	params: {
-        course: props.courseName
+		course: props.courseName,
 	},
 	auto: true,
-});
+})
 
 const breadcrumbs = computed(() => {
-    let items = [{ label: "All Courses", route: { name: "Courses" } }]
+	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
 	items.push({
 		label: course?.data?.title,
-        route: { name: "CourseDetail", params: { course: course?.data?.name } },
+		route: { name: 'CourseDetail', params: { course: course?.data?.name } },
 	})
 	return items
 })

frontend/src/pages/Lesson.vue

@@ -1,16 +1,24 @@
 <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">
+		<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.") }}
+					{{
+						__(
+							'This lesson is not available for preview. Please enroll in the course to access it.'
+						)
+					}}
 				</p>
-                <router-link :to='{ name: "CourseDetail", params: { courseName: courseName } }'>
+				<router-link
+					:to="{ name: 'CourseDetail', params: { courseName: courseName } }"
+				>
 					<Button variant="solid">
-                        {{ __("Start Learning") }}
+						{{ __('Start Learning') }}
 					</Button>
 				</router-link>
 			</div>
@@ -20,20 +28,32 @@
 						{{ lesson.data.title }}
 					</div>
 					<div>
-                        <router-link v-if="lesson.data.prev" :to='{name: "Lesson", params: {
+						<router-link
+							v-if="lesson.data.prev"
+							:to="{
+								name: 'Lesson',
+								params: {
 									courseName: courseName,
-                            chapterNumber: lesson.data.prev.split(".")[0],
+									chapterNumber: lesson.data.prev.split('.')[0],
-                            lessonNumber: lesson.data.prev.split(".")[1]
+									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: {
+						<router-link
+							v-if="lesson.data.next"
+							:to="{
+								name: 'Lesson',
+								params: {
 									courseName: courseName,
-                            chapterNumber: lesson.data.next.split(".")[0],
+									chapterNumber: lesson.data.next.split('.')[0],
-                            lessonNumber: lesson.data.next.split(".")[1]
+									lessonNumber: lesson.data.next.split('.')[1],
-                        }}'>
+								},
+							}"
+						>
 							<Button>
 								<ChevronRight class="w-4 h-4 stroke-1" />
 							</Button>
@@ -42,56 +62,106 @@
 				</div>
 
 				<div class="flex items-center mt-2">
-                    <span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
+					<span
-                        <UserAvatar v-for="instructor in course.data.instructors" :user="instructor" />
+						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 }}
+						{{ 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
+						{{ 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="lesson.data.youtube">
-                        <div v-if='block.includes("{{ YouTubeVideo")'>
+						<iframe
-                            <iframe class="youtube-video" :src="getYouTubeVideoSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
+							class="youtube-video"
+							:src="getYouTubeVideoSource(lesson.data.youtube)"
+							width="100%"
+							height="400"
+							frameborder="0"
+							allowfullscreen
+						></iframe>
 					</div>
-                        <div v-else-if='block.includes("{{ Quiz")'>
+					<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.") }}
+									{{ __('Please login to access the quiz.') }}
 								</div>
 								<Button @click="redirectToLogin()" class="mt-2">
 									<span>
-                                        {{ __("Login") }}
+										{{ __('Login') }}
 									</span>
 								</Button>
 							</div>
 						</div>
-                        <div v-else-if='block.includes("{{ Video")'>
+						<div v-else-if="block.includes('{{ Video')">
-                            <video controls width='100%' controlsList='nodownload'>
+							<video controls width="100%" controlsList="nodownload">
-                                <source :src="getId(block)" type='video/mp4'>
+								<source :src="getId(block)" type="video/mp4" />
 							</video>
 						</div>
-                        <div v-else-if='block.includes("{{ PDF")'>
+						<div v-else-if="block.includes('{{ PDF')">
-                            <iframe :src="getPDFSource(block)" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
+							<iframe
+								:src="getPDFSource(block)"
+								width="100%"
+								height="400"
+								frameborder="0"
+								allowfullscreen
+							></iframe>
 						</div>
-                        <div v-else-if='block.includes("{{ Audio")'>
+						<div v-else-if="block.includes('{{ Audio')">
-                            <audio width='100%' controls controlsList='nodownload'>
+							<audio width="100%" controls controlsList="nodownload">
-                                <source :src="getId(block)" type='audio/mp3'>
+								<source :src="getId(block)" type="audio/mp3" />
 							</audio>
 						</div>
-                        <div v-else-if='block.includes("{{ Embed")'>
+						<div v-else-if="block.includes('{{ Embed')">
-                            <iframe width="100%" height="400" :src="getId(block)" frameborder="0" allowfullscreen>
+							<iframe
+								width="100%"
+								height="400"
+								:src="getId(block)"
+								frameborder="0"
+								allowfullscreen
+							>
 							</iframe>
 						</div>
-                        <div v-else v-html="markdown.render(block)">
+						<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>
@@ -104,9 +174,16 @@
 					<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
-                        <div class="bg-gray-900 h-1 rounded-full"
+						v-if="user && course.data.membership"
-                            :style="{ width: Math.ceil(course.data.membership.progress) + '%' }"></div>
+						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" />
@@ -115,25 +192,21 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button } from "frappe-ui";
+import { createResource, Breadcrumbs, Button } from 'frappe-ui'
-import { computed, watch, onBeforeMount, onUnmounted, inject } from "vue";
+import { computed, watch, onBeforeMount, onUnmounted, inject } from 'vue'
 import { useStorage } from '@vueuse/core'
-import CourseOutline from '@/components/CourseOutline.vue';
+import CourseOutline from '@/components/CourseOutline.vue'
-import UserAvatar from '@/components/UserAvatar.vue';
+import UserAvatar from '@/components/UserAvatar.vue'
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router'
-import MarkdownIt from "markdown-it";
+import MarkdownIt from 'markdown-it'
-import { ChevronLeft, ChevronRight } from "lucide-vue-next";
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import Quiz from '@/components/Quiz.vue';
+import Quiz from '@/components/Quiz.vue'
 
-const user = inject("$user");
+const user = inject('$user')
-const route = useRoute();
+const route = useRoute()
 const markdown = new MarkdownIt({
 	html: true,
 	linkify: true,
-});
-
-onBeforeMount(() => {
-    localStorage.setItem("sidebar_is_collapsed", true);
 })
 
 const props = defineProps({
@@ -149,11 +222,11 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
-});
+})
 
 const lesson = createResource({
-    url: "lms.lms.utils.get_lesson",
+	url: 'lms.lms.utils.get_lesson',
-    cache: ["lesson", props.courseName, props.chapterNumber, props.lessonNumber],
+	cache: ['lesson', props.courseName, props.chapterNumber, props.lessonNumber],
 	makeParams(values) {
 		return {
 			course: props.courseName,
@@ -162,61 +235,100 @@ const lesson = createResource({
 		}
 	},
 	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",
+	url: 'lms.lms.utils.get_course_details',
-    cache: ["course", props.courseName],
+	cache: ['course', props.courseName],
 	params: {
-        course: props.courseName
+		course: props.courseName,
 	},
 	auto: true,
-});
+})
 
 const breadcrumbs = computed(() => {
-    let items = [{ label: "All Courses", route: { name: "Courses" } }]
+	let items = [{ label: 'All Courses', route: { name: 'Courses' } }]
 	items.push({
 		label: course?.data?.title,
-        route: { name: "CourseDetail", params: { course: props.courseName } },
+		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 } },
+		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]) => {
+	(
+		[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;
@@ -229,6 +341,7 @@ const redirectToLogin = () => {
 iframe {
 	border: 1px solid #ddd;
 	border-radius: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .lesson-content p {
@@ -253,7 +366,7 @@ iframe {
 }
 
 .lesson-content img {
-    border: 1px solid theme("colors.gray.200");
+	border: 1px solid theme('colors.gray.200');
 	border-radius: 0.5rem;
 }
 
@@ -268,9 +381,8 @@ iframe {
 }
 
 .lesson-content a {
-    color: theme("colors.gray.900");
+	color: theme('colors.gray.900');
 	text-decoration: underline;
 	font-weight: 500;
 }
-
 </style>

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,
 	},
 ]
 

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 ''
+}

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)
+	frappe.db.set_value("LMS Enrollment", name, "current_lesson", lesson_name)
-	doc.current_lesson = lesson_name
-	doc.save()
-	return {"current_lesson": doc.current_lesson}
 
 
 @frappe.whitelist()

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