added submit feedback to LOA form

shared/types/member.ts

@@ -14,6 +14,7 @@ export enum MemberState {
 export type Member = {
     member_id: number;
     member_name: string;
+    displayName?: string;
     rank: string | null;
     rank_date: string | null;
     unit: string | null;

ui/src/components/loa/loaForm.vue

@@ -2,7 +2,8 @@
 import { Check, Search } from "lucide-vue-next"
 import { ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
 import { computed, onMounted, ref, watch } from "vue";
-import { Member, getMembers } from "@/api/member";
+import { getMembers } from "@/api/member";
+import { Member } from "@shared/types/member";
 import Button from "@/components/ui/button/Button.vue";
 import {
     CalendarDate,
@@ -70,6 +71,8 @@ const { handleSubmit, values, resetForm } = useForm({
     validationSchema: toTypedSchema(loaSchema),
 })
 
+const formSubmitted = ref(false);
+
 const onSubmit = handleSubmit(async (values) => {
     console.log(values);
     const out: LOARequest = {
@@ -85,6 +88,7 @@ const onSubmit = handleSubmit(async (values) => {
         await submitLOA(out);
         userStore.loadUser();
     }
+    formSubmitted.value = true;
 })
 
 onMounted(async () => {
@@ -137,7 +141,7 @@ const maxEndDate = computed(() => {
             </div>
         </div>
         <div class="flex-1 flex flex-col gap-5">
-            <form @submit="onSubmit" class="flex flex-col gap-2">
+            <form v-if="!formSubmitted" @submit="onSubmit" class="flex flex-col gap-2">
                 <div class="flex w-full gap-5">
                     <VeeField v-slot="{ field, errors }" name="member_id">
                         <Field>
@@ -272,6 +276,24 @@ const maxEndDate = computed(() => {
                     <Button type="submit">Submit</Button>
                 </div>
             </form>
+            <div v-else class="flex flex-col  gap-4 py-8 text-left">
+                <h2 class="text-xl font-semibold">
+                    LOA Request Submitted
+                </h2>
+
+                <p class="max-w-md text-muted-foreground">
+                    Your Leave of Absence request has been submitted successfully.
+                    It will take effect on your selected start date.
+                </p>
+
+
+                <div class="flex gap-3 mt-4">
+                    <Button variant="secondary" @click="formSubmitted = false">
+                        Submit another request
+                    </Button>
+                </div>
+            </div>
+
         </div>
     </div>
 </template>