finalized LOA systems

ui/src/components/loa/loaList.vue

@@ -8,8 +8,16 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { Badge } from '@/components/ui/badge'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Ellipsis } from "lucide-vue-next";
 import { getAllLOAs, LOARequest } from "@/api/loa";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 
 const LOAList = ref<LOARequest[]>([]);
 
@@ -25,6 +33,32 @@ function formatDate(dateStr: string): string {
         day: "numeric",
     });
 }
+
+function loaStatus(loa: {
+    start_date: string;
+    end_date: string;
+    deleted?: number;
+}): "Upcoming" | "Active" | "Expired" | "Cancelled" {
+    if (loa.deleted) return "Cancelled";
+
+    const now = new Date();
+    const start = new Date(loa.start_date);
+    const end = new Date(loa.end_date);
+
+    if (now < start) return "Upcoming";
+    if (now >= start && now <= end) return "Active";
+    if (now > end) return "Expired";
+
+    return "Expired"; // fallback
+}
+
+function sortByStartDate(loas: LOARequest[]): LOARequest[] {
+    return [...loas].sort(
+        (a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
+    );
+}
+
+const sortedLoas = computed(() => sortByStartDate(LOAList.value));
 </script>
 
 <template>
@@ -37,14 +71,11 @@ function formatDate(dateStr: string): string {
                     <TableHead>End</TableHead>
                     <TableHead>Reason</TableHead>
                     <TableHead>Posted on</TableHead>
+                    <TableHead>Status</TableHead>
                 </TableRow>
             </TableHeader>
             <TableBody>
-                <TableRow
-                    v-for="post in LOAList"
-                    :key="post.id"
-                    class="hover:bg-muted/50"
-                >
+                <TableRow v-for="post in sortedLoas" :key="post.id" class="hover:bg-muted/50">
                     <TableCell class="font-medium">
                         {{ post.name }}
                     </TableCell>
@@ -52,6 +83,23 @@ function formatDate(dateStr: string): string {
                     <TableCell>{{ formatDate(post.end_date) }}</TableCell>
                     <TableCell>{{ post.reason }}</TableCell>
                     <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
+                    <TableCell>
+                        <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-500">Upcoming</Badge>
+                        <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
+                        <Badge v-else-if="loaStatus(post) === 'Expired'" class="bg-gray-400">Expired</Badge>
+                        <Badge v-else class="bg-red-500">Cancelled</Badge>
+                    </TableCell>
+                    <TableCell @click.stop="console.log('hi')" class="text-right">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger class="cursor-pointer">
+                                <Ellipsis></Ellipsis>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem :variant="'destructive'">Cancel</DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </TableCell>
+
                 </TableRow>
             </TableBody>
         </Table>