improved visuals for notfound application state

ui/src/pages/Application.vue

@@ -20,6 +20,7 @@ const decisionDate = ref<Date | null>(null);
 const submitDate = ref<Date | null>(null);
 const loading = ref<boolean>(true);
 const member_name = ref<string>();
+const notFound = ref<boolean>(false);
 
 const props = defineProps<{
     mode?: "create" | "view-self" | "view-recruiter" | "view-self-id"
@@ -29,6 +30,11 @@ const finalMode = ref<"create" | "view-self" | "view-recruiter" | "view-self-id"
 
 function loadData(raw: ApplicationFull) {
 
+    if (!raw) {
+        notFound.value = true;
+        return;
+    }
+
     const data = raw.application;
 
     appID.value = data.id;
@@ -129,6 +135,10 @@ async function handleDeny(id) {
         <div v-if="unauthorized" class="flex justify-center w-full my-10">
             You do not have permission to view this application.
         </div>
+        <div v-else-if="notFound" class="flex justify-center w-full my-10 text-muted-foreground">
+            Looks like you dont have an application, reach out to the administration team if you believe this is an
+            error.
+        </div>
         <div v-else>
             <div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
                 <!-- Application header -->
@@ -183,6 +193,6 @@ async function handleDeny(id) {
     </div>
     <!-- TODO: Implement some kinda loading screen -->
     <div v-else class="flex items-center justify-center h-full">
-        <Spinner class="size-8"/>
+        <Spinner class="size-8" />
     </div>
 </template>