Create dossier

Reviewed-on: #52

ui/src/App.vue

@@ -22,18 +22,20 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
 
 <template>
   <div class="flex flex-col min-h-screen">
-    <Navbar class="flex"></Navbar>
-    <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
-      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-        <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
-      </AlertDescription>
-    </Alert>
-    <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
-      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-        <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
-        <Button variant="secondary">End LOA</Button>
-      </AlertDescription>
-    </Alert>
+    <div class="sticky top-0 bg-background z-50">
+      <Navbar class="flex"></Navbar>
+      <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+          <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
+        </AlertDescription>
+      </Alert>
+      <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
+          <Button variant="secondary">End LOA</Button>
+        </AlertDescription>
+      </Alert>
+    </div>
 
     <RouterView class="flex-1 min-h-0"></RouterView>
   </div>

ui/src/pages/Dossier.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+
+</script>
+
+
+
+<template>
+  <div class="px-10 py-6 max-w-7xl mx-auto w-full">
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-semibold tracking-tight">Member Deployments</h1>
+      <div class="text-muted-foreground">Unit / Dossier / Deployments</div>
+    </div>
+
+
+    <!-- Summary Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+      <div class="p-5 rounded-xl border bg-card shadow-sm">
+        <p class="text-muted-foreground text-sm">Total Deployments</p>
+        <p class="text-3xl font-bold mt-2">123</p>
+      </div>
+      <div class="p-5 rounded-xl border bg-card shadow-sm">
+        <p class="text-muted-foreground text-sm">Total Hours</p>
+        <p class="text-3xl font-bold mt-2">456h</p>
+      </div>
+      <div class="p-5 rounded-xl border bg-card shadow-sm">
+        <p class="text-muted-foreground text-sm">Avg. Attendance</p>
+        <p class="text-3xl font-bold mt-2">87%</p>
+      </div>
+    </div>
+
+
+    <!-- Filters & Search -->
+    <div class="flex justify-between items-end mb-4 flex-wrap gap-4">
+      <div class="flex gap-4 flex-wrap">
+        <div>
+          <label class="block text-sm text-muted-foreground mb-1">Operation Type</label>
+          <select class="border rounded-md px-3 py-2 w-48 bg-background">
+            <option>All</option>
+            <option>Deployment</option>
+            <option>Training</option>
+          </select>
+        </div>
+
+
+        <div>
+          <label class="block text-sm text-muted-foreground mb-1">Sort By</label>
+          <select class="border rounded-md px-3 py-2 w-48 bg-background">
+            <option>Date (Newest)</option>
+            <option>Date (Oldest)</option>
+            <option>Longest Duration</option>
+          </select>
+        </div>
+      </div>
+
+
+      <div>
+        <label class="block text-sm text-muted-foreground mb-1">Search</label>
+        <input type="text" placeholder="Search deployments..." class="border rounded-md px-3 py-2 w-56 bg-background" />
+      </div>
+    </div>
+
+
+    <!-- Deployment List -->
+    <div class="rounded-xl border divide-y bg-card shadow-sm">
+      <!-- Row -->
+      <div class="p-5 hover:bg-accent cursor-pointer flex justify-between items-center">
+        <div>
+          <p class="font-semibold text-lg">Operation Dawn Strike</p>
+          <div class="text-sm text-muted-foreground flex gap-6 mt-1">
+            <span>Date: 2024-08-14</span>
+            <span>Duration: 3.4h</span>
+            <span>Role: Rifleman</span>
+          </div>
+        </div>
+        <div class="text-right">
+          <p class="font-medium">Status: <span class="text-green-500 font-semibold">Completed</span></p>
+        </div>
+      </div>
+      <div class="p-5 hover:bg-accent cursor-pointer flex justify-between items-center">
+        <div>
+          <p class="font-semibold text-lg">Operation Iron Resolve</p>
+          <div class="text-sm text-muted-foreground flex gap-6 mt-1">
+            <span>Date: 2024-08-02</span>
+            <span>Duration: 2.1h</span>
+            <span>Role: Machine Gunner</span>
+          </div>
+        </div>
+        <div class="text-right">
+          <p class="font-medium">Status: <span class="text-yellow-500 font-semibold">Partial</span></p>
+        </div>
+      </div>
+
+
+      <div class="p-5 hover:bg-accent cursor-pointer flex justify-between items-center">
+        <div>
+          <p class="font-semibold text-lg">Operation Midnight Gale</p>
+          <div class="text-sm text-muted-foreground flex gap-6 mt-1">
+            <span>Date: 2024-07-22</span>
+            <span>Duration: 4.8h</span>
+            <span>Role: Squad Leader</span>
+          </div>
+        </div>
+        <div class="text-right">
+          <p class="font-medium">Status: <span class="text-red-500 font-semibold">No‑Show</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

ui/src/pages/Join.vue

@@ -116,7 +116,7 @@ const finalPanel = ref<'app' | 'message'>('message');
         </div>
 
         <!-- Content -->
-        <div class="mt-12 mb-20 flex w-full justify-center">
+        <div class="mt-12 mb-20 flex w-full max-w-6xl justify-center">
             <div v-if="currentStep === 1" class="w-full max-w-2xl p-8">
                 <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
                     Create your account
@@ -133,7 +133,7 @@ const finalPanel = ref<'app' | 'message'>('message');
             </div>
             <Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application>
             <Application v-else-if="currentStep === 3" :mode="'view-self'"></Application>
-            <div v-if="currentStep === 5" class="w-full max-w-4xl p-8 pt-0">
+            <div v-if="currentStep === 5" class="w-full p-8 pt-0">
                 <div class="mb-5">
                     <div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
                         <label :class="finalPanel === 'message' ? 'border-b-3 border-foreground' : 'mb-[2px]'"

ui/src/pages/Unauthorized.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="min-h-screen flex flex-col items-center justify-center text-center px-6">
+    <div class="flex flex-col items-center justify-center text-center px-6">
         <h1 class="text-5xl font-bold mb-4">Unauthorized</h1>
         <p class="text-lg text-muted-foreground max-w-md mb-6">
             You don't have permission to access this page.

ui/src/router/index.js

@@ -23,6 +23,9 @@ const router = createRouter({
     { path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
 
+    // Personnel File
+    { path: '/dossier', component: () => import('@/pages/Dossier.vue'), meta: { requiresAuth: false, memberOnly: false } },
+
     // ADMIN / STAFF ROUTES
     {
       path: '/administration',