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">