implemented some recruiter view features

ui/src/pages/ManageApplications.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { getAllApplications, approveApplication, denyApplication, Status } from '@/api/application';
 import {
     Table,
     TableBody,
@@ -8,32 +9,84 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table'
+import Button from '@/components/ui/button/Button.vue';
+import { onMounted, ref } from 'vue';
 
+const appList = ref([]);
+const now = Date.now();
+// relative time formatter (uses user locale)
+const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+// exact date/time for tooltip
+const exactFmt = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium', timeStyle: 'short', timeZone: 'America/Toronto'
+})
+
+function formatAgo(iso) {
+    const d = new Date(iso)
+    if (isNaN(d)) return ''
+    let diff = (d.getTime() - now) / 1000 // seconds relative to page load
+    const divisions = [
+        { amount: 60, name: 'second' },
+        { amount: 60, name: 'minute' },
+        { amount: 24, name: 'hour' },
+        { amount: 7, name: 'day' },
+        { amount: 4.34524, name: 'week' }, // avg weeks per month
+        { amount: 12, name: 'month' },
+        { amount: Infinity, name: 'year' },
+    ]
+    for (const div of divisions) {
+        if (Math.abs(diff) < div.amount) {
+            return rtf.format(Math.round(diff), div.name)
+        }
+        diff /= div.amount
+    }
+}
+
+function formatExact(iso) {
+    const d = new Date(iso)
+    return isNaN(d) ? '' : exactFmt.format(d)
+}
+
+async function handleApprove(id) {
+    await approveApplication(id);
+    appList.value = await getAllApplications();
+}
+
+async function handleDeny(id) {
+    await denyApplication(id);
+    appList.value = await getAllApplications();
+}
+
+
+onMounted(async () => {
+    appList.value = await getAllApplications();
+})
 </script>
 <template>
     <Table>
-        <TableCaption>A list of your recent invoices.</TableCaption>
+        <!-- <TableCaption>A list of your recent invoices.</TableCaption> -->
         <TableHeader>
             <TableRow>
-                <TableHead class="w-[100px]">
-                    Invoice
-                </TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Method</TableHead>
-                <TableHead class="text-right">
-                    Amount
-                </TableHead>
+                <TableHead class="w-[100px]">User</TableHead>
+                <TableHead>Date Submitted</TableHead>
+                <TableHead class="text-right">Status</TableHead>
             </TableRow>
         </TableHeader>
         <TableBody>
-            <TableRow>
-                <TableCell class="font-medium">
-                    INV001
+            <TableRow v-for="app in appList" :key="app.id">
+                <TableCell class="font-medium">{{ app.member_name }}</TableCell>
+                <TableCell :title="formatExact(app.submitted_at)">
+                    {{ formatAgo(app.submitted_at) }}
                 </TableCell>
-                <TableCell>Paid</TableCell>
-                <TableCell>Credit Card</TableCell>
-                <TableCell class="text-right">
-                    $250.00
+                <TableCell v-if="app.app_status != 'Pending'" class="text-right" :class="[
+                    'font-semibold',
+                    app.app_status === Status.Pending && 'text-yellow-500',
+                    app.app_status === Status.Approved && 'text-success',
+                    app.app_status === Status.Denied && 'text-destructive'
+                ]">{{ app.app_status }}</TableCell>
+                <TableCell v-else class="inline-flex items-end gap-2">
+                    <Button variant="success" :onClick="() => { handleApprove(app.id) }">Approve</Button>
+                    <Button variant="destructive" :onClick="() => { handleDeny(app.id) }">Deny</Button>
                 </TableCell>
             </TableRow>
         </TableBody>