feat: lesson page

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 {