finalized LOA systems

ui/src/components/loa/loaForm.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Check, Search } from "lucide-vue-next"
 import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
-import { getRanks, Rank } from "@/api/rank"
 import { onMounted, ref } from "vue";
 import { Member, getMembers } from "@/api/member";
 import Button from "@/components/ui/button/Button.vue";
@@ -18,28 +17,28 @@ import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
 import { RangeCalendar } from "@/components/ui/range-calendar"
 import { cn } from "@/lib/utils";
 import { CalendarIcon } from "lucide-vue-next"
-import Input from "@/components/ui/input/Input.vue";
 import Textarea from "@/components/ui/textarea/Textarea.vue";
-import Separator from "@/components/ui/separator/Separator.vue";
-import { submitLOA } from "@/api/loa"; // <-- import the submit function
+import { LOARequest, submitLOA } from "@/api/loa"; // <-- import the submit function
 
 const members = ref<Member[]>([])
 const currentMember = ref<Member | null>(null);
 
-defineProps({
-    adminMode: {
-        type: Boolean,
-        default: false
-    }
-})
+const props = withDefaults(defineProps<{
+    adminMode?: boolean;
+    member?: Member | null;
+}>(), {
+    adminMode: false,
+    member: null,
+});
+
 
 const df = new DateFormatter("en-US", {
     dateStyle: "medium",
 })
 
 const value = ref({
-    start: new CalendarDate(2022, 1, 20),
-    end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+    // start: new CalendarDate(2022, 1, 20),
+    // end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
 }) as Ref<DateRange>
 
 const reason = ref(""); // <-- reason for LOA
@@ -48,6 +47,12 @@ const submitError = ref<string | null>(null);
 const submitSuccess = ref(false);
 
 onMounted(async () => {
+    if (props.member) {
+        currentMember.value = props.member;
+    }
+    if (props.adminMode) {
+        members.value = await getMembers();
+    }
     members.value = await getMembers();
 });
 
@@ -71,12 +76,12 @@ async function handleSubmit() {
         return;
     }
 
-    const req = {
-        member_id,
+    const req: LOARequest = {
         filed_date,
         start_date,
         end_date,
         reason: reason.value,
+        member_id
     };
 
     const result = await submitLOA(req);
@@ -96,7 +101,7 @@ function toMariaDBDatetime(date: Date): string {
 </script>
 
 <template>
-    <div class="flex flex-row-reverse gap-6  mx-auto " :class="!adminMode ? 'max-w-5xl' : 'max-w-2xl'">
+    <div class="flex flex-row-reverse gap-6 mx-auto " :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'">
         <div v-if="!adminMode" class="flex-1 flex space-x-4 rounded-md border p-4">
             <div class="flex-2 space-y-1">
                 <p class="text-sm font-medium leading-none">

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>