setup for rank change page

ui/src/pages/Application.vue

@@ -2,8 +2,10 @@
 import ApplicationChat from '@/components/application/ApplicationChat.vue';
 import ApplicationForm from '@/components/application/ApplicationForm.vue';
 import { onMounted, ref } from 'vue';
-import { ApplicationData, loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
+import { ApplicationData, approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
 import { useRoute } from 'vue-router';
+import Button from '@/components/ui/button/Button.vue';
+import { CheckIcon, XIcon } from 'lucide-vue-next';
 
 const appData = ref<ApplicationData>(null);
 const appID = ref<number | null>(null);
@@ -59,6 +61,14 @@ async function postApp(appData) {
     // TODO: Handle fail to post
 }
 
+async function handleApprove(id) {
+    console.log("hi");
+    await approveApplication(id);
+}
+
+async function handleDeny(id) {
+    await denyApplication(id);
+}
 </script>
 
 <template>
@@ -90,16 +100,24 @@ async function postApp(appData) {
                         hour: "2-digit",
                         minute: "2-digit"
                     }) }}</p>
+                <div class="mt-2" v-else>
+                    <Button variant="success" class="mr-2" :onclick="() => {handleApprove(appID)}">
+                        <CheckIcon></CheckIcon>
+                    </Button>
+                    <Button variant="destructive" :onClick="() => {handleDeny(appID)}">
+                        <XIcon></XIcon>
+                    </Button>
+                </div>
             </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>
         </div>
-        <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => {postApp(e)}" class="mb-7">
+        <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7">
         </ApplicationForm>
         <div v-if="!newApp">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
-                <ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
+            <ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
         </div>
     </div>
     <!-- TODO: Implement some kinda loading screen -->