Added support for application statuses

ui/src/pages/Application.vue

@@ -2,12 +2,13 @@
 import ApplicationChat from '@/components/application/ApplicationChat.vue';
 import ApplicationForm from '@/components/application/ApplicationForm.vue';
 import { onMounted, ref } from 'vue';
-import { loadApplication, postApplication, postChatMessage } from '@/api/application';
+import { loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
 
 const appData = ref<Record<string, unknown> | null>(null);
 const chatData = ref<object[]>([])
 const readOnly = ref<boolean>(false);
 const newApp = ref<boolean>(true);
+const status = ref<Status>(Status.Pending);
 
 onMounted(async () => {
     try {
@@ -29,6 +30,19 @@ onMounted(async () => {
 
 <template>
     <div 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="[
+                'font-semibold',
+                status === Status.Pending && 'text-yellow-500',
+                status === Status.Approved && 'text-green-500',
+                status === Status.Denied && 'text-red-500'
+            ]">{{ status }}</h3>
+        </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>
+        </div>
         <ApplicationForm v-if="appData" :read-only="readOnly" :data="appData" @submit="(e) => { postApplication(e) }"
             class="mb-7"></ApplicationForm>
         <div v-if="newApp">