Did more stuff than I even wanna write. Notably:

- Auth/account management
- Navigation system
- Admin views for LOA stuff

ui/src/pages/memberList.vue

@@ -11,22 +11,24 @@ import {
 import {
     DropdownMenu,
     DropdownMenuContent,
-    DropdownMenuGroup,
     DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuPortal,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
 import { computed, ref } from "vue";
 import { Member, getMembers } from "@/api/member";
 import { useRouter } from 'vue-router';
 import { Ellipsis } from "lucide-vue-next";
 import Input from "@/components/ui/input/Input.vue";
+import LoaForm from "@/components/loa/loaForm.vue";
 
 const members = ref<Member[]>([]);
 const router = useRouter();
@@ -46,9 +48,24 @@ const searchedMembers = computed(() => {
     return members.value.filter(member => member.member_name.toLowerCase().includes(searchVal.value.toLowerCase()));
 });
 
+// page state systems
+const showLOADialog = ref(false);
+const LOAuserId = ref<number | null>(null);
 </script>
 
 <template>
+    <Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>LOA Menu</DialogTitle>
+                <DialogDescription>
+                    Something something flavor text.
+                </DialogDescription>
+            </DialogHeader>
+            <LoaForm :adminMode="true"></LoaForm>
+        </DialogContent>
+    </Dialog>
+
     <!-- table menu -->
     <div class="w-4xl mx-auto">
         <div class="flex justify-between mb-4">
@@ -72,6 +89,8 @@ const searchedMembers = computed(() => {
                     </TableCell>
                     <TableCell>{{ member.rank }}</TableCell>
                     <TableCell>{{ member.status }}</TableCell>
+                    <TableCell>{{ member.status }}</TableCell>
+                    <TableCell>{{ member.status }}</TableCell>
                     <TableCell @click.stop="console.log('hi')" class="text-right">
                         <DropdownMenu>
                             <DropdownMenuTrigger class="cursor-pointer">
@@ -80,7 +99,7 @@ const searchedMembers = computed(() => {
                             <DropdownMenuContent>
                                 <DropdownMenuItem>Change Rank</DropdownMenuItem>
                                 <DropdownMenuItem>Transfer</DropdownMenuItem>
-                                <DropdownMenuItem>LOA</DropdownMenuItem>
+                                <DropdownMenuItem @click="showLOADialog = true">LOA</DropdownMenuItem>
                                 <DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
                             </DropdownMenuContent>
                         </DropdownMenu>