Did more stuff than I even wanna write. Notably:

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

ui/src/components/loa/loaList.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { getAllLOAs, LOARequest } from "@/api/loa";
+import { onMounted, ref } from "vue";
+
+const LOAList = ref<LOARequest[]>([]);
+
+onMounted(async () => {
+    LOAList.value = await getAllLOAs();
+});
+
+function formatDate(dateStr: string): string {
+    if (!dateStr) return "";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+}
+</script>
+
+<template>
+    <div class="w-5xl mx-auto">
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead class="w-[100px]">Member</TableHead>
+                    <TableHead>Start</TableHead>
+                    <TableHead>End</TableHead>
+                    <TableHead>Reason</TableHead>
+                    <TableHead>Posted on</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <TableRow
+                    v-for="post in LOAList"
+                    :key="post.id"
+                    class="hover:bg-muted/50"
+                >
+                    <TableCell class="font-medium">
+                        {{ post.name }}
+                    </TableCell>
+                    <TableCell>{{ formatDate(post.start_date) }}</TableCell>
+                    <TableCell>{{ formatDate(post.end_date) }}</TableCell>
+                    <TableCell>{{ post.reason }}</TableCell>
+                    <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    </div>
+</template>