implemented pagination, header polish, and new display fixes

ui/src/components/loa/loaList.vue

@@ -33,6 +33,15 @@ import {
 } from "@internationalized/date"
 import { el } from "@fullcalendar/core/internal-common";
 import MemberCard from "../members/MemberCard.vue";
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationNext,
+    PaginationPrevious,
+} from '@/components/ui/pagination'
+import { pagination } from "@shared/types/pagination";
 
 const props = defineProps<{
     adminMode?: boolean
@@ -46,7 +55,9 @@ onMounted(async () => {
 
 async function loadLOAs() {
     if (props.adminMode) {
-        LOAList.value = await getAllLOAs();
+        let result = await getAllLOAs(pageNum.value, pageSize.value);
+        LOAList.value = result.data;
+        pageData.value = result.pagination;
     } else {
         LOAList.value = await getMyLOAs();
     }
@@ -76,12 +87,6 @@ function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed
     return "Overdue"; // fallback
 }
 
-function sortByStartDate(loas: LOARequest[]): LOARequest[] {
-    return [...loas].sort(
-        (a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
-    );
-}
-
 async function cancelAndReload(id: number) {
     await cancelLOA(id, props.adminMode);
     await loadLOAs();
@@ -107,6 +112,23 @@ async function commitExtend() {
 
 const expanded = ref<number | null>(null);
 const hoverID = ref<number | null>(null);
+
+const pageNum = ref<number>(1);
+const pageData = ref<pagination>();
+
+const pageSize = ref<number>(15)
+const pageSizeOptions = [10, 15, 30]
+
+function setPageSize(size: number) {
+    pageSize.value = size
+    pageNum.value = 1;
+    loadLOAs();
+}
+
+function setPage(pagenum: number) {
+    pageNum.value = pagenum;
+    loadLOAs();
+}
 </script>
 
 <template>
@@ -229,6 +251,34 @@ const hoverID = ref<number | null>(null);
                     </template>
                 </TableBody>
             </Table>
+            <div class="mt-5 flex justify-between">
+                <div></div>
+                <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
+                    :default-page="2" :page="pageNum" @update:page="setPage">
+                    <PaginationContent v-slot="{ items }">
+                        <PaginationPrevious />
+                        <template v-for="(item, index) in items" :key="index">
+                            <PaginationItem v-if="item.type === 'page'" :value="item.value"
+                                :is-active="item.value === page">
+                                {{ item.value }}
+                            </PaginationItem>
+                        </template>
+                        <PaginationEllipsis :index="4" />
+                        <PaginationNext />
+                    </PaginationContent>
+                </Pagination>
+                <div class="flex items-center gap-3 text-sm">
+                    <p class="text-muted-foreground text-nowrap">Per page:</p>
+
+                    <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
+                        class="px-2 py-1 rounded transition-colors" :class="{
+                            'bg-muted font-semibold': pageSize === size,
+                            'hover:bg-muted/50': pageSize !== size
+                        }">
+                        {{ size }}
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 </template>