API integration stuff

api/index.js

@@ -50,7 +50,11 @@ app.get('/application/me', async (req, res) => {
     const applicationId = 1;
 
     const rows = await pool.query(
-      'SELECT * FROM applications WHERE id = ?',
+      `SELECT app.*,
+          member.name AS member_name
+      FROM applications AS app
+          INNER JOIN members AS member ON member.id = app.member_id
+      WHERE app.member_id = ?;`,
       [applicationId]
     );
 
@@ -65,6 +69,29 @@ app.get('/application/me', async (req, res) => {
   }
 });
 
+app.get('/application/:id', async (req, res) => {
+  const appID = req.params.id;
+  try {
+    const rows = await pool.query(
+      `SELECT app.*,
+          member.name AS member_name
+      FROM applications AS app
+          INNER JOIN members AS member ON member.id = app.member_id
+      WHERE app.id = 1;`,
+      [appID]
+    );
+
+    if (!Array.isArray(rows) || rows.length === 0) {
+      return res.send(404).json("Application Not Found");
+    }
+
+    return res.status(200).json(rows[0]);
+  }
+  catch (err) {
+    console.error('Query failed:', err);
+    return res.status(500).json({ error: 'Failed to load application' });
+  }
+})
 
 app.get('/application/all', async (req, res) => {
   try {

ui/src/api/application.ts

@@ -15,10 +15,44 @@ export type ApplicationDto = Partial<{
   aknowledgeRules: boolean
 }>
 
-type ApplicationFull = Partial<{
-  app: ApplicationDto,
-  messages: object[]
-}>
+export interface ApplicationData {
+  dob: string;
+  name: string;
+  playtime: number;
+  hobbies: string;
+  military: boolean;
+  communities: string;
+  joinReason: string;
+  milsimAttraction: string;
+  referral: string;
+  steamProfile: string;
+  timezone: string;
+  canAttendSaturday: boolean;
+  interests: string;
+  aknowledgeRules: boolean;
+}
+
+export interface ApplicationRow {
+  id: number;
+  member_id: number;
+  app_version: number;
+  app_data: ApplicationData;
+
+  submitted_at: string;        // ISO datetime from DB (e.g., "2025-08-25T18:04:29.000Z")
+  updated_at: string | null;
+  approved_at: string | null;
+  denied_at: string | null;
+
+  app_status: Status;       // generated column
+  decision_at: string | null;  // generated column
+
+  // present when you join members (e.g., SELECT a.*, m.name AS member_name)
+  member_name: string;
+}
+
+export type ApplicationFull = ApplicationRow & {
+  messages?: object[];
+};
 
 export enum Status {
   Pending = "Pending",
@@ -68,7 +102,7 @@ export async function getAllApplications() {
   const res = await fetch(`http://${addr}/application/all`)
 
   if (res.ok) {
-    return await res.json();
+    return res.json()
   } else {
     console.error("Something went wrong approving the application")
   }

ui/src/components/application/ApplicationForm.vue

@@ -16,6 +16,7 @@ import { Form } from 'vee-validate';
 import { onMounted, ref } from 'vue';
 import * as z from 'zod';
 import DateInput from '../form/DateInput.vue';
+import { ApplicationData } from '@/api/application';
 
 const formSchema = toTypedSchema(z.object({
   dob: z.string().refine(v => v, { message: "A date of birth is required." }),
@@ -45,7 +46,7 @@ const fallbackInitials = {
 
 const props = defineProps<{
   readOnly: boolean,
-  data: object,
+  data: ApplicationData,
 }>()
 
 const emit = defineEmits(['submit']);
@@ -57,8 +58,8 @@ async function onSubmit(val: any) {
 }
 
 onMounted(() => {
-  if (props.data) {
-    initialValues.value = { ...props.data, ...fallbackInitials }
+  if (props.data !== null) {
+    initialValues.value = { ...props.data }
   } else {
     initialValues.value = { ...fallbackInitials }
   }

ui/src/pages/Application.vue

@@ -2,43 +2,58 @@
 import ApplicationChat from '@/components/application/ApplicationChat.vue';
 import ApplicationForm from '@/components/application/ApplicationForm.vue';
 import { onMounted, ref } from 'vue';
-import { loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
+import { ApplicationData, loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
 
-const appData = ref<Record<string, unknown> | null>(null);
+const appData = ref<ApplicationData>(null);
 const chatData = ref<object[]>([])
 const readOnly = ref<boolean>(false);
 const newApp = ref<boolean>(true);
-const status = ref<Status>(Status.Pending);
-
+const status = ref<Status>(null);
+const decisionDate = ref<Date | null>(null);
+const submitDate = ref<Date | null>(null);
+const loading = ref<boolean>(true);
+const member_name = ref<string>();
 onMounted(async () => {
     try {
         const data = await loadApplication()
+        console.log(data);
         if (data) {
-            appData.value = data.app;
+            appData.value = data.app_data;
             chatData.value = data.messages;
+            status.value = data.app_status;
+            decisionDate.value = new Date(data.decision_at);
+            submitDate.value = data.decision_at ? new Date(data.submitted_at) : null;
+            member_name.value = data.member_name;
             readOnly.value = true;
         } else {
-            appData.value = {}
+            appData.value = null
             newApp.value = false;
         }
     } catch (e) {
         console.error(e)
     }
+    loading.value = false;
 })
 
 </script>
 
 <template>
-    <div class="max-w-3xl mx-auto my-20">
+    <div v-if="!loading" class="max-w-3xl mx-auto my-20">
         <div v-if="newApp" class="flex flex-row justify-between items-center py-2 mb-8">
             <!-- Application header -->
-            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Application Name</h3>
-            <h3 :class="[
+            <div>
+                <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
+                <p class="text-muted-foreground">Submitted: {{ submitDate.toLocaleString("en-US") }}</p>
+            </div>
+            <div>
+                <h3 class="text-right" :class="[
                     'font-semibold',
                     status === Status.Pending && 'text-yellow-500',
                     status === Status.Approved && 'text-green-500',
                     status === Status.Denied && 'text-red-500'
                 ]">{{ status }}</h3>
+                <p class="text-muted-foreground">{{ status }}: {{ decisionDate.toLocaleString("en-US") }}</p>
+            </div>
         </div>
         <div v-else class="flex flex-row justify-between items-center py-2 mb-8">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>