feat: batch card price and seat count

frontend/src/components/BatchCard.vue

@@ -1,5 +1,11 @@
 <template>
-    <div class="border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
+    <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>
@@ -7,14 +13,23 @@
             {{ batch.description }}
         </div>
         <div class="mt-auto">
-            <div class="flex items-center mb-1">
+            <div v-if="batch.amount" class="font-semibold text-lg mb-4">
-                <Calendar class="h-4 w-4 stroke-1 mr-2" />
+                {{ 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 mr-2" />
+                <Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
                 <span>
                     {{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
                 </span>
@@ -23,8 +38,9 @@
     </div>
 </template>
 <script setup>
-import { Calendar, Clock } from "lucide-vue-next"
+import { Calendar, Clock, BookOpen } from "lucide-vue-next"
 import { inject } from "vue"
+import { Badge } from "frappe-ui"
 
 const dayjs = inject("$dayjs")
 const props = defineProps({

frontend/src/components/CourseCard.vue

@@ -11,17 +11,17 @@
         <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 text-gray-700" />
+                    <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 text-gray-700" />
+                    <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 text-gray-700" />
+                    <Star class="h-4 w-4 stroke-1.5 text-gray-700" />
                     <span> {{ course.avg_rating }} </span>
                 </div>
 

frontend/src/components/SidebarLink.vue

@@ -6,7 +6,7 @@
             <Tooltip :text="label" placement="right">
                 <slot name="icon">
                     <span class="grid h-5 w-6 flex-shrink-0 place-items-center">
-                        <component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
+                        <component :is="icon" class="h-4 w-4 stroke-1.5 text-gray-700" />
                     </span>
                 </slot>
             </Tooltip>

frontend/tailwind.config.js

@@ -7,7 +7,11 @@ module.exports = {
 		'../node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
 	],
 	theme: {
-		extend: {},
+		extend: {
+			strokeWidth: {
+				1.5: '1.5',
+			},
+		},
 	},
 	plugins: [],
 }

lms/lms/utils.py

@@ -1213,8 +1213,6 @@ def get_course_details(course):
 		course_details.price = fmt_money(
 			course_details.course_price, 0, course_details.currency
 		)
-	else:
-		course_details.price = _("Free")
 
 	if frappe.session.user == "Guest":
 		course_details.membership = None
@@ -1361,8 +1359,19 @@ def get_batches():
 			"end_time",
 			"seat_count",
 			"published",
+			"amount",
+			"currency",
 		],
 	)
+	for batch in batches:
+		batch.courses = frappe.db.count("Batch Course", {"parent": batch.name})
+		batch.price = fmt_money(batch.amount, 0, batch.currency)
+		if batch.seat_count:
+			students_enrolled = frappe.db.count(
+				"Batch Student",
+				{"parent": batch.name},
+			)
+			batch.seats_left = batch.seat_count - students_enrolled
 	batches = categorize_batches(batches)
 	return batches