Fixed hardcoded id in /me query (whoops)

ui/src/App.vue

@@ -11,6 +11,8 @@ import {
 } from './components/ui/dropdown-menu';
 import { onMounted } from 'vue';
 import { useUserStore } from './stores/user';
+import Alert from './components/ui/alert/Alert.vue';
+import AlertDescription from './components/ui/alert/AlertDescription.vue';
 
 const userStore = useUserStore();
 
@@ -30,6 +32,15 @@ async function logout() {
 
   userStore.user = null;
 }
+
+function formatDate(dateStr) {
+  if (!dateStr) return "";
+  return new Date(dateStr).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
 </script>
 
 <template>
@@ -85,7 +96,7 @@ async function logout() {
           <DropdownMenuTrigger class="cursor-pointer">
             <p>{{ userStore.user.name }}</p>
           </DropdownMenuTrigger>
-          <DropdownMenuContent> 
+          <DropdownMenuContent>
             <DropdownMenuItem>My Profile</DropdownMenuItem>
             <DropdownMenuItem>Settings</DropdownMenuItem>
             <DropdownMenuItem>
@@ -101,6 +112,12 @@ async function logout() {
       </div>
     </div>
     <Separator></Separator>
+    <Alert class="m-2 mx-auto w-5xl" variant="info">
+      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+        <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
+        <Button variant="secondary">End LOA</Button>
+      </AlertDescription>
+    </Alert>
 
     <RouterView></RouterView>
   </div>