added the recruiter view

api/index.js

@@ -7,38 +7,33 @@ app.use(express.json())
 
 const port = 3000
 
-var application;
-var applicationMessages = [];
-var applicationStatus;
+let applicationData = {
+  app: null,
+  messages: [],
+  status: null,
+};
 
 app.post('/application', (req, res) => {
-  data = req.body
-  application = data.App;
-  applicationStatus = "Pending";
-  console.log(data);
-  res.send('Application received')
+  const data = req.body;
+  applicationData.app = data.App;
+  applicationData.status = "Pending";
+  console.log(applicationData);
+  res.send('Application received');
 });
 
 app.get('/application/me', (req, res) => {
-  if (application) {
-    let data = {
-      "app": application,
-      "messages": applicationMessages,
-      "Status": applicationStatus,
-    }
-    res.send(data);
-  }
-  else {
+  if (applicationData.app) {
+    res.send(applicationData);
+  } else {
     res.status(204).send();
   }
 });
 
 app.post('/application/message', (req, res) => {
-  data = req.body
-  applicationMessages.push(data);
-  res.status(200);
-})
-
+  const data = req.body;
+  applicationData.messages.push(data);
+  res.status(200).send();
+});
 
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`)

ui/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.11",
+        "@tanstack/vue-table": "^8.21.3",
         "@vee-validate/zod": "^4.15.1",
         "@vueuse/core": "^13.7.0",
         "class-variance-authority": "^0.7.1",
@@ -1621,6 +1622,19 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.13.12",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
@@ -1631,6 +1645,25 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/vue-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.21.3.tgz",
+      "integrity": "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2"
+      }
+    },
     "node_modules/@tanstack/vue-virtual": {
       "version": "3.13.12",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",

ui/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/vue-table": "^8.21.3",
     "@vee-validate/zod": "^4.15.1",
     "@vueuse/core": "^13.7.0",
     "class-variance-authority": "^0.7.1",

ui/src/App.vue

@@ -4,6 +4,7 @@ import Separator from './components/ui/separator/Separator.vue';
 import Button from './components/ui/button/Button.vue';
 import Application from './pages/Application.vue';
 import AutoForm from './components/form/AutoForm.vue';
+import ManageApplications from './pages/ManageApplications.vue';
 </script>
 
 <template>
@@ -16,6 +17,7 @@ import AutoForm from './components/form/AutoForm.vue';
     </div>
     <Separator></Separator>
     <Application></Application>
+    <!-- <ManageApplications></ManageApplications> -->
      <!-- <AutoForm class="max-w-3xl mx-auto my-20"></AutoForm> -->
   </div>
 </template>

ui/src/components/ui/table/Table.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-auto">
+    <table
+      data-slot="table"
+      :class="cn('w-full caption-bottom text-sm', props.class)"
+    >
+      <slot />
+    </table>
+  </div>
+</template>

ui/src/components/ui/table/TableBody.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>

ui/src/components/ui/table/TableCaption.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>

ui/src/components/ui/table/TableCell.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

ui/src/components/ui/table/TableEmpty.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+import TableCell from "./TableCell.vue";
+import TableRow from "./TableRow.vue";
+
+const props = defineProps({
+  class: { type: null, required: false },
+  colspan: { type: Number, required: false, default: 1 },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

ui/src/components/ui/table/TableFooter.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="
+      cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)
+    "
+  >
+    <slot />
+  </tfoot>
+</template>

ui/src/components/ui/table/TableHead.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="
+      cn(
+        'text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </th>
+</template>

ui/src/components/ui/table/TableHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <thead data-slot="table-header" :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>

ui/src/components/ui/table/TableRow.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="
+      cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </tr>
+</template>

ui/src/components/ui/table/index.js

@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue";
+export { default as TableBody } from "./TableBody.vue";
+export { default as TableCaption } from "./TableCaption.vue";
+export { default as TableCell } from "./TableCell.vue";
+export { default as TableEmpty } from "./TableEmpty.vue";
+export { default as TableFooter } from "./TableFooter.vue";
+export { default as TableHead } from "./TableHead.vue";
+export { default as TableHeader } from "./TableHeader.vue";
+export { default as TableRow } from "./TableRow.vue";

ui/src/components/ui/table/utils.js

@@ -0,0 +1,7 @@
+import { isFunction } from "@tanstack/vue-table";
+
+export function valueUpdater(updaterOrValue, ref) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue;
+}

ui/src/pages/ManageApplications.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table'
+
+</script>
+<template>
+    <Table>
+        <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>
+            </TableRow>
+        </TableHeader>
+        <TableBody>
+            <TableRow>
+                <TableCell class="font-medium">
+                    INV001
+                </TableCell>
+                <TableCell>Paid</TableCell>
+                <TableCell>Credit Card</TableCell>
+                <TableCell class="text-right">
+                    $250.00
+                </TableCell>
+            </TableRow>
+        </TableBody>
+    </Table>
+</template>