added policy system and self LOA management

ui/src/components/loa/loaForm.vue

@@ -90,7 +90,9 @@ onMounted(async () => {
     }
     try {
         if (!props.adminMode) {
-            policyString.value = await getLoaPolicy();
+            let policy = await getLoaPolicy() as any;
+            policyString.value = policy;
+            policyRef.value.innerHTML = policyString.value;
         }
     } catch (error) {
         console.error(error);
@@ -101,6 +103,8 @@ onMounted(async () => {
     resetForm({ values: { member_id: currentMember.value?.member_id } });
 });
 
+const policyRef = ref<HTMLElement>(null);
+
 const defaultPlaceholder = today(getLocalTimeZone())
 
 const minEndDate = computed(() => {
@@ -123,14 +127,10 @@ const maxEndDate = computed(() => {
 
 <template>
     <div class="flex flex-row-reverse gap-6 mx-auto w-full" :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">
-                    LOA Policy
-                </p>
-                <p class="text-sm text-muted-foreground">
-                    Policy goes here.
-                </p>
+        <div v-if="!adminMode" class="flex-1 flex flex-col space-x-4 rounded-md border p-4">
+            <p class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Policy</p>
+            <div ref="policyRef">
+                <!-- LOA policy gets loaded here -->
             </div>
         </div>
         <div class="flex-1 flex flex-col gap-5">
@@ -200,7 +200,7 @@ const maxEndDate = computed(() => {
                                 <Popover>
                                     <PopoverTrigger as-child>
                                         <Button variant="outline" :class="cn(
-                                            'w-[280px] justify-start text-left font-normal',
+                                            'w-full justify-start text-left font-normal',
                                             !field.value && 'text-muted-foreground',
                                         )">
                                             <CalendarIcon class="mr-2 h-4 w-4" />
@@ -228,7 +228,7 @@ const maxEndDate = computed(() => {
                                 <Popover>
                                     <PopoverTrigger as-child>
                                         <Button variant="outline" :class="cn(
-                                            'w-[280px] justify-start text-left font-normal',
+                                            'w-full justify-start text-left font-normal',
                                             !field.value && 'text-muted-foreground',
                                         )">
                                             <CalendarIcon class="mr-2 h-4 w-4" />

ui/src/components/loa/loaList.vue

@@ -16,7 +16,7 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Ellipsis } from "lucide-vue-next";
-import { cancelLOA, extendLOA, getAllLOAs } from "@/api/loa";
+import { cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa";
 import { onMounted, ref, computed } from "vue";
 import { LOARequest } from "@shared/types/loa";
 import Dialog from "../ui/dialog/Dialog.vue";
@@ -31,7 +31,11 @@ import {
     CalendarDate,
     getLocalTimeZone,
 } from "@internationalized/date"
+import { el } from "@fullcalendar/core/internal-common";
 
+const props = defineProps<{
+    adminMode?: boolean
+}>()
 
 const LOAList = ref<LOARequest[]>([]);
 
@@ -40,9 +44,11 @@ onMounted(async () => {
 });
 
 async function loadLOAs() {
-    // const unsort = await getAllLOAs();
-    // LOAList.value = sortByStartDate(unsort);
-    LOAList.value = await getAllLOAs();
+    if (props.adminMode) {
+        LOAList.value = await getAllLOAs();
+    } else {
+        LOAList.value = await getMyLOAs();
+    }
 }
 
 function formatDate(date: Date): string {
@@ -76,7 +82,7 @@ function sortByStartDate(loas: LOARequest[]): LOARequest[] {
 }
 
 async function cancelAndReload(id: number) {
-    await cancelLOA(id, true);
+    await cancelLOA(id, props.adminMode);
     await loadLOAs();
 }
 
@@ -160,11 +166,17 @@ async function commitExtend() {
                                     <Ellipsis></Ellipsis>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>
-                                    <DropdownMenuItem v-if="!post.closed" @click="isExtending = true; targetLOA = post">
+                                    <DropdownMenuItem v-if="!post.closed && props.adminMode"
+                                        @click="isExtending = true; targetLOA = post">
                                         Extend
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem :variant="'destructive'" @click="cancelAndReload(post.id)">End
+                                    <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
+                                        @click="cancelAndReload(post.id)">End
                                     </DropdownMenuItem>
+                                    <!-- Fallback: no actions available -->
+                                    <p v-if="post.closed || (!props.adminMode && post.closed)" class="p-2 text-center text-sm">
+                                        No actions
+                                    </p>
                                 </DropdownMenuContent>
                             </DropdownMenu>
                         </TableCell>