feat: lesson page

frontend/src/pages/Batches.vue

@@ -13,22 +13,81 @@
                 </Button>
             </div>
         </header>
-        <div class="mx-5 my-10">
-            <div class="grid grid-cols-4 gap-8 mt-5">
-                <BatchCard v-for="batch in batches.data" :batch="batch" />
-            </div>
+        <div class="mx-5 py-5">
+          <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
+            <template #tab="{ tab, selected }">
+              <div>
+                <button
+                    class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+                    :class="{ 'text-gray-900': selected }">
+                    <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+                    {{ __(tab.label) }}
+                    <Badge :class="{ 'text-gray-900 border border-gray-900': selected }" variant="subtle" theme="gray"
+                        size="sm">
+                        {{ tab.count }}
+                    </Badge>
+                </button>
+              </div>
+            </template>
+            <template #default="{ tab }">
+              <div v-if="tab.batches && tab.batches.value.length" class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-8 mt-5">
+                <router-link v-for="batch in tab.batches.value"
+                    :to="{ name: 'BatchDetail', params: { batchName: batch.name } }">
+                    <BatchCard :batch="batch" />
+                </router-link>
+              </div>
+              <div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
+                <div class="flex flex-col items-center justify-center mt-4">
+                    <div>
+                        {{ __("No {0} batches found").format(tab.label.toLowerCase()) }}
+                    </div>
+                </div>
+              </div>
+            </template>
+          </Tabs>
         </div>
     </div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs } from "frappe-ui";
+import { createResource, Breadcrumbs, Button, Tabs, Badge } from "frappe-ui";
 import { Plus } from "lucide-vue-next"
 import BatchCard from '@/components/BatchCard.vue';
+import { inject, ref, computed } from "vue";
 
+const user = inject("$user")
 const batches = createResource({
     url: "lms.lms.utils.get_batches",
-    cache: ["batches"],
+    cache: ["batches", user?.data?.email],
     auto: true,
 });
-console.log(batches)
+
+const tabIndex = ref(0)
+const tabs = [
+    {
+        label: "Upcoming",
+        batches: computed(() => batches.data?.upcoming || []),
+        count: computed(() => batches.data?.upcoming?.length),
+    },
+];
+
+if (user.data?.is_moderator) {
+    tabs.push({
+        label: "Archived",
+        batches: computed(() => batches.data?.archived),
+        count: computed(() => batches.data?.archived?.length),
+    });
+    tabs.push({
+        label: "Private",
+        batches: computed(() => batches.data?.private),
+        count: computed(() => batches.data?.private?.length),
+    })
+}
+if (user.data) {
+    tabs.push({
+        label: "Enrolled",
+        batches: computed(() => batches.data?.enrolled),
+        count: computed(() => batches.data?.enrolled?.length)
+    })
+}
+
 </script>