Merge pull request 'homepage/welcome' (#113) from homepage/welcome into main

Reviewed-on: #113

api/src/index.ts

@@ -7,7 +7,7 @@ import morgan = require('morgan');
 const app = express()
 app.use(morgan('dev', {
   skip: (req) => {
-    return req.path === '/members/me';
+    return req.originalUrl === '/members/me';
   }
 }))
 
@@ -64,6 +64,7 @@ import { authRouter } from './routes/auth';
 import { roles, memberRoles } from './routes/roles';
 import { courseRouter, eventRouter } from './routes/course';
 import { calendarRouter } from './routes/calendar';
+import { docsRouter } from './routes/docs';
 
 app.use('/application', applicationRouter);
 app.use('/ranks', ranks);
@@ -77,6 +78,7 @@ app.use('/memberRoles', memberRoles)
 app.use('/course', courseRouter)
 app.use('/courseEvent', eventRouter)
 app.use('/calendar', calendarRouter)
+app.use('/docs', docsRouter)
 app.use('/', authRouter)
 
 app.get('/ping', (req, res) => {

api/src/routes/docs.ts

@@ -0,0 +1,24 @@
+const express = require('express');
+const router = express.Router();
+
+import { Request, Response } from 'express';
+import { requireLogin } from '../middleware/auth';
+
+router.get('/welcome', [requireLogin], async (req: Request, res: Response) => {
+    const output = await fetch(`${process.env.DOC_HOST}/api/pages/717`, {
+        headers: {
+            Authorization: `Token ${process.env.DOC_TOKEN_ID}:${process.env.DOC_TOKEN_SECRET}`,
+        }
+    })
+
+    if (output.ok) {
+        const out = await output.json();
+        res.status(200).json(out.html);
+    } else {
+        console.error("Failed to fetch LOA policy from bookstack");
+        res.sendStatus(500);
+    }
+})
+
+
+export const docsRouter = router;

api/src/routes/loa.ts

@@ -56,9 +56,13 @@ router.get("/me", async (req: Request, res: Response) => {
 
 //get my LOA history
 router.get("/history", async (req: Request, res: Response) => {
-    const user = req.user.id;
     try {
-        const result = await getUserLOA(user);
+        const user = req.user.id;
+
+        const page = Number(req.query.page) || undefined;
+        const pageSize = Number(req.query.pageSize) || undefined;
+
+        const result = await getUserLOA(user, page, pageSize);
         res.status(200).json(result)
     } catch (error) {
         console.error(error);

api/src/services/loaService.ts

@@ -36,7 +36,10 @@ export async function getAllLOA(page = 1, pageSize = 10): Promise<PagedData<LOAR
     return output;
 }
 
-export async function getUserLOA(userId: number): Promise<LOARequest[]> {
+export async function getUserLOA(userId: number, page = 1, pageSize = 10): Promise<PagedData<LOARequest>> {
+
+    const offset = (page - 1) * pageSize;
+
     const result: LOARequest[] = await pool.query(`
         SELECT loa.*, members.name, t.name AS type_name
             FROM leave_of_absences AS loa
@@ -53,8 +56,12 @@ export async function getUserLOA(userId: number): Promise<LOARequest[]> {
                     WHEN loa.closed IS NOT NULL THEN 4
                 END,
                 loa.start_date DESC
-            `, [userId])
-    return result;
+                LIMIT ? OFFSET ?;`, [userId, pageSize, offset])
+
+    let loaCount = Number((await pool.query(`SELECT COUNT(*) as count FROM leave_of_absences WHERE member_id = ?;`, [userId]))[0].count);
+    let pageCount = loaCount / pageSize;
+    let output: PagedData<LOARequest> = { data: result, pagination: { page: page, pageSize: pageSize, total: loaCount, totalPages: pageCount } }
+    return output;
 }
 
 export async function getUserActiveLOA(userId: number): Promise<LOARequest[]> {

ui/src/App.vue

@@ -22,7 +22,10 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
 </script>
 
 <template>
-  <div class="flex flex-col min-h-screen">
+  <div class="flex flex-col min-h-screen" style="background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('/bg.jpg'); 
+      background-size: contain; 
+      background-attachment: fixed;
+      background-position: center;">
     <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">
@@ -30,10 +33,12 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
           <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
         </AlertDescription>
       </Alert>
-      <Alert v-if="userStore.user?.LOAData?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+      <Alert v-if="userStore.user?.LOAs?.[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?.LOAData?.[0].end_date) }}</strong></p>
-          <Button variant="secondary" @click="async () => { await cancelLOA(userStore.user?.LOAData?.[0].id); userStore.loadUser(); }">End
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till ||
+            userStore.user?.LOAs?.[0].end_date) }}</strong></p>
+          <Button variant="secondary"
+            @click="async () => { await cancelLOA(userStore.user.LOAs?.[0].id); userStore.loadUser(); }">End
             LOA</Button>
         </AlertDescription>
       </Alert>

ui/src/api/docs.ts

@@ -0,0 +1,18 @@
+//  @ts-ignore
+const addr = import.meta.env.VITE_APIHOST;
+
+export async function getWelcomeMessage(): Promise<string> {
+    const res = await fetch(`${addr}/docs/welcome`, {
+        method: "GET",
+        credentials: 'include',
+    });
+    if (res.ok) {
+        const out = res.json();
+        if (!out) {
+            return null;
+        }
+        return out;
+    } else {
+        return null;
+    }
+}

ui/src/api/loa.ts

@@ -31,9 +31,9 @@ export async function adminSubmitLOA(request: LOARequest): Promise<{ id?: number
     });
 
     if (res.ok) {
-        return res.json();
+        return
     } else {
-        return { error: "Failed to submit LOA" };
+        throw new Error("Failed to submit LOA");
     }
 }
 
@@ -85,8 +85,18 @@ export async function getAllLOAs(page?: number, pageSize?: number): Promise<Page
     });
 }
 
-export function getMyLOAs(): Promise<LOARequest[]> {
-    return fetch(`${addr}/loa/history`, {
+export function getMyLOAs(page?: number, pageSize?: number): Promise<PagedData<LOARequest>> {
+    const params = new URLSearchParams();
+
+    if (page !== undefined) {
+        params.set("page", page.toString());
+    }
+
+    if (pageSize !== undefined) {
+        params.set("pageSize", pageSize.toString());
+    }
+
+    return fetch(`${addr}/loa/history?${params}`, {
         method: "GET",
         credentials: 'include',
         headers: {

ui/src/assets/base.css

@@ -4,7 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(0.2046 0 0);
+  --background: oklch(19.125% 0.00002 271.152);
   --foreground: oklch(0.9219 0 0);
   --card: oklch(23.075% 0.00003 271.152);
   --card-foreground: oklch(0.9219 0 0);

ui/src/components/Navigation/Navbar.vue

@@ -85,11 +85,11 @@ function blurAfter() {
                                         </RouterLink>
                                     </NavigationMenuLink>
 
-                                    <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
+                                    <!-- <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
                                         <RouterLink to="/transfer" @click="blurAfter">
                                             Transfer Request
                                         </RouterLink>
-                                    </NavigationMenuLink>
+                                    </NavigationMenuLink> -->
 
                                     <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
                                         <RouterLink to="/trainingReport" @click="blurAfter">
@@ -107,13 +107,13 @@ function blurAfter() {
                                 <NavigationMenuContent
                                     class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
 
-                                    <NavigationMenuLink
+                                    <!-- <NavigationMenuLink
                                         v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
                                         as-child :class="navigationMenuTriggerStyle()">
                                         <RouterLink to="/administration/rankChange" @click="blurAfter">
                                             Promotions
                                         </RouterLink>
-                                    </NavigationMenuLink>
+                                    </NavigationMenuLink> -->
 
                                     <NavigationMenuLink
                                         v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
@@ -123,13 +123,13 @@ function blurAfter() {
                                         </RouterLink>
                                     </NavigationMenuLink>
 
-                                    <NavigationMenuLink
+                                    <!-- <NavigationMenuLink
                                         v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
                                         as-child :class="navigationMenuTriggerStyle()">
                                         <RouterLink to="/administration/transfer" @click="blurAfter">
                                             Transfer Requests
                                         </RouterLink>
-                                    </NavigationMenuLink>
+                                    </NavigationMenuLink> -->
 
                                     <NavigationMenuLink v-if="auth.hasRole('Recruiter')" as-child
                                         :class="navigationMenuTriggerStyle()">
@@ -147,11 +147,11 @@ function blurAfter() {
                                 </NavigationMenuContent>
                             </NavigationMenuItem>
 
-                            <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
+                            <!-- <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
                                 <RouterLink to="/members" @click="blurAfter">
                                     Members (debug)
                                 </RouterLink>
-                            </NavigationMenuItem>
+                            </NavigationMenuItem> -->
 
                         </NavigationMenuList>
                     </NavigationMenu>

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -80,6 +80,7 @@ async function setAttendance(state: CalendarAttendance) {
 
 const canEditEvent = computed(() => {
     if (!userStore.isLoggedIn) return false;
+    if (userStore.state !== 'member') return false;
     if (userStore.user.member.member_id == activeEvent.value.creator_id)
         return true;
 });
@@ -215,7 +216,7 @@ defineExpose({ forceReload })
                     <CircleAlert></CircleAlert> This event has been cancelled
                 </div>
             </section>
-            <section v-if="isPast && userStore.isLoggedIn" class="w-full">
+            <section v-if="isPast && userStore.state === 'member'" class="w-full">
                 <ButtonGroup class="flex w-full">
                     <Button variant="outline"
                         :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"

ui/src/components/loa/loaForm.vue

@@ -134,6 +134,22 @@ const maxEndDate = computed(() => {
         return null;
     }
 })
+
+const memberFilter = ref('');
+
+const filteredMembers = computed(() => {
+    const q = memberFilter?.value?.toLowerCase() ?? ""
+    const results: Member[] = []
+
+    for (const m of members.value ?? []) {
+        if (!q || (m.displayName || m.member_name).toLowerCase().includes(q)) {
+            results.push(m)
+            if (results.length >= 50) break
+        }
+    }
+
+    return results
+})
 </script>
 
 <template>
@@ -158,12 +174,13 @@ const maxEndDate = computed(() => {
                                             :display-value="(id) => {
                                                 const m = members.find(mem => mem.member_id === id)
                                                 return m ? m.displayName || m.member_name : ''
-                                            }" />
+                                            }" @input="memberFilter = $event.target.value" />
                                     </ComboboxAnchor>
                                     <ComboboxList class="*:w-64">
                                         <ComboboxEmpty class="text-muted-foreground w-full">No results</ComboboxEmpty>
                                         <ComboboxGroup>
-                                            <template v-for="member in members" :key="member.member_id">
+                                            <div class="max-h-80 overflow-y-scroll scrollbar-themed min-w-3xs">
+                                                <template v-for="member in filteredMembers" :key="member.member_id">
                                                     <ComboboxItem :value="member.member_id"
                                                         class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5 w-full">
                                                         {{ member.displayName || member.member_name }}
@@ -173,6 +190,7 @@ const maxEndDate = computed(() => {
                                                         </ComboboxItemIndicator>
                                                     </ComboboxItem>
                                                 </template>
+                                            </div>
                                         </ComboboxGroup>
                                     </ComboboxList>
                                 </Combobox>
@@ -286,8 +304,10 @@ const maxEndDate = computed(() => {
                 </h2>
 
                 <p class="max-w-md text-muted-foreground">
-                    Your Leave of Absence request has been submitted successfully.
-                    It will take effect on your selected start date.
+                    {{ adminMode ? 'You have successfully submitted a Leave of Absence on behalf of another member.' :
+                        `Your Leave
+                    of Absence request has been submitted successfully.
+                    It will take effect on your selected start date.` }}
                 </p>
 
 

ui/src/components/loa/loaList.vue

@@ -59,7 +59,9 @@ async function loadLOAs() {
         LOAList.value = result.data;
         pageData.value = result.pagination;
     } else {
-        LOAList.value = await getMyLOAs();
+        let result = await getMyLOAs(pageNum.value, pageSize.value);
+        LOAList.value = result.data;
+        pageData.value = result.pagination;
     }
 }
 

ui/src/components/ui/button/index.js

@@ -8,7 +8,7 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/70",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

ui/src/pages/Calendar.vue

@@ -49,15 +49,8 @@ const dialogRef = ref<any>(null)
 // NEW: handle day/time slot clicks to start creating an event
 function onDateClick(arg: { dateStr: string }) {
     if (!userStore.isLoggedIn) return;
+    if (userStore.state !== 'member') return;
     dialogRef.value?.openDialog(arg.dateStr);
-    // For now, just open the panel with a draft payload.
-    // activeEvent.value = {
-    //     id: '__draft__',
-    //     title: 'New event',
-    //     start: arg.dateStr,
-    //     extendedProps: { draft: true }
-    // }
-    // panelOpen.value = true
 }
 
 const calendarOptions = ref({
@@ -203,7 +196,7 @@ onMounted(() => {
                                 @click="goToday">
                                 Today
                             </button>
-                            <button v-if="userStore.isLoggedIn"
+                            <button v-if="userStore.isLoggedIn && userStore.state === 'member'"
                                 class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
                                 @click="onCreateEvent">
                                 <Plus class="h-4 w-4" />

ui/src/pages/Homepage.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { getWelcomeMessage } from '@/api/docs';
 import { Button } from '@/components/ui/button'
 import { useUserStore } from '@/stores/user'
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -8,23 +10,126 @@ const router = useRouter()
 const user = useUserStore();
 
 function goToApplication() {
-    router.push('/apply') // change to your form route
+    router.push('/join') // change to your form route
 }
+
+onMounted(async () => {
+    if (user.state == 'member') {
+        let policy = await getWelcomeMessage() as any;
+        welcomeRef.value.innerHTML = policy;
+    }
+})
+
+const welcomeRef = ref<HTMLElement>(null);
 </script>
 
 <template>
     <div>
-        <div v-if="user.state == 'guest'" class="flex flex-col items-center justify-center">
-            <h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1>
-            <p class="text-neutral-400 mb-8 max-w-md">
-                To join our unit, please fill out an application to continue.
+        <div v-if="user.state == 'member'" class="mt-10">
+            <div ref="welcomeRef" class="bookstack-container">
+                <!-- bookstack -->
+            </div>
+        </div>
+        <div v-else class="text-foreground px-6 py-12 selection:bg-primary/10">
+            <div class="max-w-5xl mx-auto space-y-8">
+
+                <header class="space-y-4">
+                    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
+                        <div>
+                            <h1 class="text-4xl font-semibold tracking-tight">17th Ranger Battalion</h1>
+                        </div>
+                    </div>
+                    <div class="h-px bg-border w-full"></div>
+                </header>
+
+                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
+
+                    <div class="lg:col-span-7 space-y-6">
+                        <div class="space-y-2">
+                            <h2 class="text-sm font-medium uppercase tracking-wider text-primary">Unit Philosophy</h2>
+                            <p class="text-lg leading-relaxed font-normal">
+                                The 17th RBN emphasizes high-skill gameplay through real-world tactics, stripped of
+                                traditional military formalities. We prioritize effective coordination over enforced
+                                etiquette.
                             </p>
-            <Button @click="goToApplication" class="px-6 py-3 text-lg">
+                        </div>
+
+                        <p class="text-muted-foreground leading-relaxed">
+                            Our "Real Life First" mindset ensures participation remains a hobby, not a second job. With
+                            a consistent roster of 40–50 members for Saturday operations, we focus on effective
+                            coordination and mission success without the requirement of "Yes sir, no sir" protocols.
+                        </p>
+
+                        <div class="flex flex-wrap items-center gap-6 pt-4">
+                            <Button size="lg" @click="goToApplication" class="font-medium">
                                 Begin Application
                             </Button>
+                            <div class="flex flex-col">
+                                <span class="text-xs uppercase tracking-tighter text-muted-foreground">Age
+                                    Requirement</span>
+                                <span class="text-sm font-medium">18+</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-span-5 space-y-8">
+                        <section class="space-y-3">
+                            <h3 class="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                                Operational Schedule</h3>
+                            <div class="rounded-lg border bg-card p-4 shadow-sm">
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm font-medium">Main Operation</span>
+                                    <span class="text-sm font-mono text-primary">Sat 19:00 CST</span>
+                                </div>
+                            </div>
+                        </section>
+
+                        <section class="space-y-4">
+                            <h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+                                Force Structure
+                            </h3>
+                            <ul class="space-y-3">
+                                <li class="flex items-start gap-4">
+                                    <span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
+                                    <div class="space-y-1">
+                                        <p class="text-sm font-medium leading-none">Alpha Company</p>
+                                        <p class="text-[13px] text-muted-foreground leading-relaxed">
+                                            Rifleman, Medic, CLS, Anti-Tank, RTO, Leadership
+                                        </p>
+                                    </div>
+                                </li>
+
+                                <li class="flex items-start gap-4">
+                                    <span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
+                                    <div class="space-y-1">
+                                        <p class="text-sm font-medium leading-none">Echo Company</p>
+                                        <p class="text-[13px] text-muted-foreground leading-relaxed">
+                                            Logistics, CAS Pilot, Armor, Artillery, JTAC, Forward Observer
+                                        </p>
+                                    </div>
+                                </li>
+                            </ul>
+
+                            <p class="text-[12px] text-muted-foreground/70 border-t pt-2 border-border">
+                                Roles are fluid; specialization or weekly rotation is supported.
+                            </p>
+                        </section>
+                    </div>
+                </div>
+
+                <section class="space-y-4">
+                    <div class="relative rounded-xl border bg-card shadow-sm overflow-hidden">
+                        <div class="aspect-video">
+                            <iframe class="w-full h-full"
+                                src="https://www.youtube.com/embed/61L397HwmrU?si=oY9qf6vFv6hXo6Fk&controls=1&mute=1&start=102&end=152"
+                                title="YouTube video player" frameborder="0"
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                allowfullscreen>
+                            </iframe>
+                        </div>
+                    </div>
+                </section>
             </div>
-        <div v-else>
-            HOMEPAGEEEEEEEEEEEEEEEEEEE
         </div>
     </div>
 </template>