feat: lesson page

frontend/src/components/AppSidebar.vue

@@ -25,7 +25,8 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
-import { BookOpen, Users, TrendingUp, Search, Bell, Briefcase, Settings } from 'lucide-vue-next'
+import { BookOpen, Users, TrendingUp, Briefcase } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const links = [
     {
@@ -50,5 +51,5 @@ const links = [
     },
 ]
 
-const isSidebarCollapsed = useStorage('sidebar_is_collapsed', false)
+let isSidebarCollapsed = ref(useStorage("sidebar_is_collapsed", false))
 </script>

frontend/src/components/BatchCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shadow rounded-md p-4 h-full" style="min-height: 150px;">
+    <div class="border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
         <div class="text-xl font-semibold mb-1">
             {{ batch.title }}
         </div>
@@ -9,11 +9,15 @@
         <div class="mt-auto">
             <div class="flex items-center mb-1">
                 <Calendar class="h-4 w-4 stroke-1 mr-2" />
-                {{ dayjs(batch.start_date).format("DD MMM YYYY") }} - {{ dayjs(batch.end_date).format("DD MMM YYYY") }}
+                <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 mr-2" />
-                {{ batch.start_time }} - {{ batch.end_time }}
+                <span>
+                    {{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
+                </span>
             </div>
         </div>
     </div>
@@ -29,6 +33,23 @@ const props = defineProps({
         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/BatchDetail.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+<script setup>
+const props = defineProps({
+    batchName: {
+        type: Object,
+        required: true,
+    },
+})
+</script>

frontend/src/components/CourseCardOverlay.vue

@@ -2,7 +2,12 @@
     <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">
-            <Button variant="solid" class="w-full mb-3">
+            <Button v-if="course.data.membership" variant="solid" class="w-full mb-3">
+                <span>
+                    {{ __("Continue Learning") }}
+                </span>
+            </Button>
+            <Button v-else variant="solid" class="w-full mb-3" >
                 <span>
                     {{ __("Start Learning") }}
                 </span>
@@ -31,6 +36,7 @@
 <script setup>
 import { BookOpen, Users, Star } from 'lucide-vue-next'
 import { computed } from 'vue'
+import { Button } from "frappe-ui"
 const props = defineProps({
     course: {
         type: Object,

frontend/src/components/CourseOutline.vue

@@ -1,24 +1,19 @@
 <template>
-    <div class="text-base mt-10">
-        <div class="text-2xl font-semibold">
-            {{ __("Course Content") }}
-        </div>
+    <div class="text-base">
         <div class="mt-4">
-            <Disclosure v-slot="{ open }" v-for="chapter in outline.data" :key="chapter.name">
-                <DisclosureButton
-                    class="flex w-full px-2 pt-2 pb-2"
-                    >
-                    <ChevronUp
-                        :class="open ? 'rotate-180 transform' : ''"
+            <Disclosure v-slot="{ open }" v-for="(chapter, index) in outline.data" :key="chapter.name">
+                <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-lg font-medium">
                         {{ chapter.title }}
                     </div>
                 </DisclosureButton>
-                <DisclosurePanel class="px-10 pb-2">
+                <DisclosurePanel class="px-10 pb-4" :static="index == 0">
                     <div v-for="lesson in chapter.lessons" :key="lesson.name">
-                        <div class="flex items-center text-lg mb-4">
+                        <div class="flex items-center text-base mb-2">
                             <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"/>
@@ -33,7 +28,7 @@
 <script setup>
 import { createResource } from "frappe-ui";
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
-import { ChevronUp, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
+import { ChevronRight, MonitorPlay, HelpCircle, FileText } from 'lucide-vue-next';
 
 const props = defineProps({
     courseName: {