finalized LOA systems

ui/src/pages/ManageLOA.vue

@@ -1,12 +1,42 @@
 <script setup lang="ts">
 import LoaForm from '@/components/loa/loaForm.vue';
 import LoaList from '@/components/loa/loaList.vue';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import Button from '@/components/ui/button/Button.vue';
+import { ref } from 'vue';
 
+const showLOADialog = ref(false);
 </script>
 
 <template>
+    <Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Post LOA</DialogTitle>
+                <DialogDescription>
+                    Post an LOA on behalf of a member.
+                </DialogDescription>
+            </DialogHeader>
+            <LoaForm :admin-mode="true" class="my-5 w-full"></LoaForm>
+            <!-- <DialogFooter>
+                <Button variant="secondary" @click="showLOADialog = false">Cancel</Button>
+                <Button>Apply</Button>
+            </DialogFooter> -->
+        </DialogContent>
+    </Dialog>
+
     <div class="max-w-5xl mx-auto pt-10">
-        <!-- <LoaForm class="m-10"></LoaForm> -->
+        <div class="flex justify-end mb-4">
+            <Button @click="showLOADialog = true">Post LOA</Button>
+        </div>
         <h1>LOA Log</h1>
         <LoaList></LoaList>
     </div>