reduced log spam from client polling

Reviewed-on: #112

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/routes/ranks.ts

@@ -1,7 +1,6 @@
 import { MemberState } from "@app/shared/types/member";
 import { requireLogin, requireMemberState, requireRole } from "../middleware/auth";
-import { batchInsertMemberRank, getAllRanks, getPromotionHistorySummary, getPromotionsOnDay, insertMemberRank } from "../services/rankService";
-import { BatchPromotion, BatchPromotionMember } from '@app/shared/schemas/promotionSchema'
+import { getAllRanks, insertMemberRank } from "../services/rankService";
 
 import express = require('express');
 const r = express.Router();
@@ -12,13 +11,11 @@ r.use(requireLogin)
 ur.use(requireLogin)
 
 //insert a new latest rank for a user
-ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), requireMemberState(MemberState.Member)], async (req: express.Request, res: express.Response) => {
+ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), requireMemberState(MemberState.Member)], async (req, res) => {
+    3
     try {
-        const change = req.body.promotions as BatchPromotionMember[];
-        const author = req.user.id;
-        if (!change) res.sendStatus(400);
-
-        await batchInsertMemberRank(change, author);
+        const change = req.body?.change;
+        await insertMemberRank(change.member_id, change.rank_id, change.date);
 
         res.sendStatus(201);
     } catch (err) {
@@ -27,31 +24,6 @@ ur.post('/', [requireRole(["17th Command", "17th Administrator", "17th HQ"]), re
     }
 });
 
-ur.get('/', async (req: express.Request, res: express.Response) => {
-    try {
-        const promos = await getPromotionHistorySummary();
-        console.log(promos);
-        res.status(200).json(promos);
-    } catch (err) {
-        console.error(err);
-        res.status(500).json({ error: 'Internal server error' });
-    }
-});
-
-ur.get('/:day', async (req: express.Request, res: express.Response) => {
-    try {
-        if (!req.params.day) res.sendStatus(400);
-
-        let day = new Date(req.params.day)
-        const promos = await getPromotionsOnDay(day);
-        console.log(promos);
-        res.status(200).json(promos);
-    } catch (err) {
-        console.error(err);
-        res.status(500).json({ error: 'Internal server error' });
-    }
-})
-
 //get all ranks
 r.get('/', async (req, res) => {
     try {

api/src/services/applicationService.ts

@@ -32,6 +32,8 @@ export async function getApplicationByID(appID: number): Promise<ApplicationRow>
 }
 
 export async function getApplicationList(page: number = 1, pageSize: number = 25): Promise<ApplicationListRow[]> {
+  const offset = (page - 1) * pageSize;
+
   const sql = `SELECT
       member.name AS member_name,
       app.id,
@@ -44,7 +46,7 @@ export async function getApplicationList(page: number = 1, pageSize: number = 25
     ORDER BY app.submitted_at DESC
     LIMIT ? OFFSET ?;`
 
-  const rows: ApplicationListRow[] = await pool.query(sql, [pageSize, page]);
+  const rows: ApplicationListRow[] = await pool.query(sql, [pageSize, offset]);
   return rows;
 }
 

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[]> {

api/src/services/rankService.ts

@@ -1,8 +1,4 @@
-import { BatchPromotion, BatchPromotionMember } from "@app/shared/schemas/promotionSchema";
-import { PromotionSummary } from "@app/shared/types/rank"
 import pool from "../db";
-import { PagedData } from "@app/shared/types/pagination";
-import { toDateTime } from "@app/shared/utils/time";
 
 export async function getAllRanks() {
     const rows = await pool.query(
@@ -34,78 +30,3 @@ export async function insertMemberRank(member_id: number, rank_id: number, date?
 
     await pool.query(sql, params);
 }
-
-
-export async function batchInsertMemberRank(promos: BatchPromotionMember[], author: number) {
-    try {
-        var con = await pool.getConnection();
-        console.log(promos);
-        promos.forEach(p => {
-            con.query(`CALL sp_update_member_rank(?, ?, ?, ?, ?, ?)`, [p.member_id, p.rank_id, author, author, "Rank Change", toDateTime(new Date(p.start_date))])
-        });
-
-        con.commit();
-        return
-    } catch (error) {
-        throw error; //pass it up
-    } finally {
-        con.release();
-    }
-}
-
-export async function getPromotionHistorySummary(page: number = 1, pageSize: number = 15): Promise<PagedData<PromotionSummary>> {
-
-    const offset = (page - 1) * pageSize;
-
-    let sql = `SELECT
-                    DATE(start_date) AS entry_day
-                FROM
-                    members_ranks
-                GROUP BY
-                    entry_day
-                ORDER BY
-                    entry_day DESC
-                LIMIT ? OFFSET ?;`
-
-    let promoList: PromotionSummary[] = await pool.query(sql, [pageSize, offset]) as PromotionSummary[];
-
-    let loaCount = Number((await pool.query(`SELECT
-                                                COUNT(*) AS total_grouped_days_count
-                                            FROM
-                                                (
-                                                    SELECT DISTINCT DATE(start_date)
-                                                    FROM members_ranks
-                                                ) AS grouped_days;`))[0]);
-
-    console.log(loaCount);
-    let pageCount = loaCount / pageSize;
-
-    let output: PagedData<PromotionSummary> = { data: promoList, pagination: { page: page, pageSize: pageSize, total: loaCount, totalPages: pageCount } }
-    return output;
-}
-
-export async function getPromotionsOnDay(day: Date): Promise<BatchPromotion[]> {
-
-    // Convert the Date object to a 'YYYY-MM-DD' string for the SQL filter
-    // This assumes pool.query is used with a database that accepts this format for comparison.
-    const dayString = day.toISOString().split('T')[0];
-
-    // SQL query to fetch all records from members_unit for the specified day
-    let sql = `
-        SELECT
-            member_id,
-            unit_id AS rank_id,  -- Using unit_id as a proxy for rank_id based on the data structure
-            start_date
-        FROM
-            members_unit
-        WHERE
-            DATE(start_date) = ?
-        ORDER BY
-            start_date ASC;
-    `;
-
-
-    let batchPromotion = await pool.query(sql, [dayString]) as BatchPromotion[];
-
-    return batchPromotion;
-}

shared/schemas/promotionSchema.ts

@@ -1,32 +0,0 @@
-import { z } from "zod";
-
-export const batchPromotionMemberSchema = z.object({
-    member_id: z.number({ invalid_type_error: "Must select a member" }).int().positive(),
-    rank_id: z.number({ invalid_type_error: "Must select a rank" }).int().positive(),
-    start_date: z.string().refine((val) => !isNaN(Date.parse(val)), {
-        message: "Must be a valid date",
-    }),
-});
-
-export const batchPromotionSchema = z.object({
-    promotions: z.array(batchPromotionMemberSchema, { message: "At least one promotion is required" }).nonempty({ message: "At least one promotion is required" }),
-
-})
-    .superRefine((data, ctx) => {
-        // optional: check for duplicate member_ids
-        const memberCounts = new Map<number, number>();
-        data.promotions.forEach((p, index) => {
-            memberCounts.set(p.member_id, (memberCounts.get(p.member_id) ?? 0) + 1);
-            if (memberCounts.get(p.member_id)! > 1) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    path: ["promotions", index, "member_id"],
-                    message: "Duplicate member in batch is not allowed",
-                });
-            }
-        });
-    });
-
-
-export type BatchPromotion = z.infer<typeof batchPromotionSchema>;
-export type BatchPromotionMember = z.infer<typeof batchPromotionMemberSchema>;

shared/types/rank.ts

@@ -1,11 +0,0 @@
-export type Rank = {
-  id: number
-  name: string
-  short_name: string
-  category: string
-  sortOrder: number
-}
-
-export interface PromotionSummary {
-  entry_day: Date;
-}

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/api/rank.ts

@@ -1,35 +1,38 @@
-import { BatchPromotion } from '@shared/schemas/promotionSchema';
-import { Rank } from '@shared/types/rank'
+export type Rank = {
+  id: number
+  name: string
+  short_name: string
+  sortOrder: number
+}
 
 //  @ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
 
-export async function getAllRanks(): Promise<Rank[]> {
-  const res = await fetch(`${addr}/ranks`, {
-    credentials: 'include'
-  })
+export async function getRanks(): Promise<Rank[]> {
+  const res = await fetch(`${addr}/ranks`)
 
   if (res.ok) {
     return res.json()
   } else {
     console.error("Something went wrong approving the application")
   }
+
 }
 
 // Placeholder: submit a rank change
-export async function submitRankChange(promo: BatchPromotion) {
+export async function submitRankChange(member_id: number, rank_id: number, date: string): Promise<{ ok: boolean }> {
   const res = await fetch(`${addr}/memberRanks`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    credentials: 'include',
-    body: JSON.stringify(promo),
+    body: JSON.stringify({ change: { member_id, rank_id, date } }),
   })
 
   if (res.ok) {
-    return
+    return { ok: true }
   } else {
-    throw new Error("Failed to submit rank change: Server error");
+    console.error("Failed to submit rank change")
+    return { ok: false }
   }
 }

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

@@ -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'])"
@@ -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>
@@ -157,22 +173,24 @@ const maxEndDate = computed(() => {
                                         <ComboboxInput placeholder="Search members..." class="w-full pl-3"
                                             :display-value="(id) => {
                                                 const m = members.find(mem => mem.member_id === id)
-                                                return m ?  m.displayName || m.member_name : ''
-                                            }" />
+                                                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">
-                                                <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 }}
-                                                    <ComboboxItemIndicator
-                                                        class="absolute left-2 inline-flex items-center">
-                                                        <Check class="h-4 w-4" />
-                                                    </ComboboxItemIndicator>
-                                                </ComboboxItem>
-                                            </template>
+                                            <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 }}
+                                                        <ComboboxItemIndicator
+                                                            class="absolute left-2 inline-flex items-center">
+                                                            <Check class="h-4 w-4" />
+                                                        </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/promotions/promotionForm.vue

@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import { batchPromotionSchema } from '@shared/schemas/promotionSchema';
-import { useForm, Field as VeeField, FieldArray as VeeFieldArray } from 'vee-validate';
-import { toTypedSchema } from '@vee-validate/zod';
-import FieldSet from '../ui/field/FieldSet.vue';
-import FieldLegend from '../ui/field/FieldLegend.vue';
-import FieldDescription from '../ui/field/FieldDescription.vue';
-import FieldGroup from '../ui/field/FieldGroup.vue';
-import Combobox from '../ui/combobox/Combobox.vue';
-import ComboboxAnchor from '../ui/combobox/ComboboxAnchor.vue';
-import ComboboxInput from '../ui/combobox/ComboboxInput.vue';
-import ComboboxList from '../ui/combobox/ComboboxList.vue';
-import ComboboxEmpty from '../ui/combobox/ComboboxEmpty.vue';
-import ComboboxGroup from '../ui/combobox/ComboboxGroup.vue';
-import ComboboxItem from '../ui/combobox/ComboboxItem.vue';
-import ComboboxItemIndicator from '../ui/combobox/ComboboxItemIndicator.vue';
-import { computed, onMounted, ref } from 'vue';
-import { MemberLight } from '@shared/types/member';
-import { Check, Plus, X } from 'lucide-vue-next';
-import Button from '../ui/button/Button.vue';
-import FieldError from '../ui/field/FieldError.vue';
-import { getAllLightMembers } from '@/api/member';
-import { Rank } from '@shared/types/rank';
-import { getAllRanks, submitRankChange } from '@/api/rank';
-import { error } from 'console';
-import Input from '../ui/input/Input.vue';
-import Field from '../ui/field/Field.vue';
-
-const { handleSubmit, errors, values, resetForm } = useForm({
-    validationSchema: toTypedSchema(batchPromotionSchema),
-    validateOnMount: false,
-})
-
-const submitForm = handleSubmit(
-    async (vals) => {
-        try {
-            let output = vals;
-            output.promotions.map(p => p.start_date = new Date(p.start_date).toISOString())
-            await submitRankChange(output);
-            formSubmitted.value = true;
-        } catch (error) {
-            submitError.value = error;
-            console.error(error);
-        }
-    }
-);
-
-const submitError = ref<string>(null);
-const formSubmitted = ref(false);
-
-const allmembers = ref<MemberLight[]>([]);
-const allRanks = ref<Rank[]>([]);
-
-const memberById = computed(() => {
-    const map = new Map<number, MemberLight>();
-    for (const m of allmembers.value) {
-        map.set(m.id, m);
-    }
-    return map;
-});
-
-const rankById = computed(() => {
-    const map = new Map<number, Rank>();
-    for (const r of allRanks.value) {
-        map.set(r.id, r);
-    }
-    return map;
-});
-
-const memberSearch = ref('');
-const rankSearch = ref('');
-
-const filteredMembers = computed(() => {
-    const q = memberSearch?.value?.toLowerCase() ?? ""
-    const results: MemberLight[] = []
-
-    for (const m of allmembers.value ?? []) {
-        if (!q || (m.displayName || m.username).toLowerCase().includes(q)) {
-            results.push(m)
-            if (results.length >= 50) break
-        }
-    }
-
-    return results
-})
-
-const filteredRanks = computed(() =>
-    filterRanks(rankSearch.value)
-);
-
-function filterRanks(query: string): Rank[] {
-    if (!query) return allRanks.value;
-
-    const q = query.toLowerCase();
-    return allRanks.value.filter(r =>
-        r.name.toLowerCase().includes(q) ||
-        r.short_name.toLowerCase().includes(q)
-    );
-}
-
-onMounted(async () => {
-    allmembers.value = await getAllLightMembers()
-    allRanks.value = await getAllRanks();
-})
-
-
-
-</script>
-
-<template>
-    <div class="w-xl">
-        <form v-if="!formSubmitted" id="trainingForm" @submit.prevent="submitForm"
-            class="w-full min-w-0 flex flex-col gap-6">
-            <VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
-                <FieldSet class="w-full min-w-0">
-                    <div class="flex flex-col gap-2">
-                        <div>
-                            <FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
-                                Promotion Form
-                            </FieldLegend>
-                            <div class="h-6">
-                                <p v-if="errors.promotions && typeof errors.promotions === 'string'"
-                                    class="text-sm text-red-500">
-                                    {{ errors.promotions }}
-                                </p>
-                            </div>
-                        </div>
-                        <!-- TABLE SHELL -->
-                        <div class="">
-                            <FieldGroup class="">
-                                <!-- HEADER -->
-                                <div class="grid grid-cols-[200px_200px_150px_1fr_auto]
-                           gap-3 px-1 -mb-4
-                           text-sm font-medium text-muted-foreground">
-                                    <div>Member</div>
-                                    <div>Rank</div>
-                                    <div>Date</div>
-                                    <div></div>
-                                    <div></div>
-                                </div>
-                                <!-- BODY -->
-                                <div class="flex flex-col gap-2">
-                                    <div v-for="(row, index) in fields" :key="row.key" class="grid grid-cols-[200px_200px_150px_1fr_auto]
-                             gap-3 items-start">
-                                        <!-- Member -->
-                                        <VeeField :name="`promotions[${index}].member_id`" v-slot="{ field, errors }">
-                                            <div class="flex flex-col min-w-0">
-                                                <Combobox :model-value="field.value" @update:model-value="field.onChange"
-                                                    :ignore-filter="true">
-                                                    <ComboboxAnchor>
-                                                        <ComboboxInput class="w-full pl-3" placeholder="Search members…"
-                                                            :display-value="id =>
-                                                                memberById.get(id)?.displayName ||
-                                                                memberById.get(id)?.username
-                                                                " @input="memberSearch = $event.target.value" />
-                                                    </ComboboxAnchor>
-                                                    <ComboboxList>
-                                                        <ComboboxEmpty>No results</ComboboxEmpty>
-                                                        <ComboboxGroup>
-                                                            <div
-                                                                class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
-                                                                <ComboboxItem v-for="member in filteredMembers"
-                                                                    :key="member.id" :value="member.id">
-                                                                    {{ member.displayName || member.username }}
-                                                                    <ComboboxItemIndicator>
-                                                                        <Check />
-                                                                    </ComboboxItemIndicator>
-                                                                </ComboboxItem>
-                                                            </div>
-                                                        </ComboboxGroup>
-                                                    </ComboboxList>
-                                                </Combobox>
-                                                <div class="h-5">
-                                                    <FieldError v-if="errors.length" :errors="errors" />
-                                                </div>
-                                            </div>
-                                        </VeeField>
-                                        <!-- Rank -->
-                                        <VeeField :name="`promotions[${index}].rank_id`" v-slot="{ field, errors }">
-                                            <div class="flex flex-col min-w-0">
-                                                <Combobox :model-value="field.value" @update:model-value="field.onChange"
-                                                    :ignore-filter="true">
-                                                    <ComboboxAnchor>
-                                                        <ComboboxInput class="w-full pl-3" placeholder="Select rank…"
-                                                            :display-value="id => rankById.get(id)?.name"
-                                                            @input="rankSearch = $event.target.value" />
-                                                    </ComboboxAnchor>
-                                                    <ComboboxList>
-                                                        <ComboboxEmpty>No results</ComboboxEmpty>
-                                                        <ComboboxGroup>
-                                                            <div
-                                                                class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
-                                                                <ComboboxItem v-for="rank in filteredRanks" :key="rank.id"
-                                                                    :value="rank.id">
-                                                                    {{ rank.name }}
-                                                                    <ComboboxItemIndicator>
-                                                                        <Check />
-                                                                    </ComboboxItemIndicator>
-                                                                </ComboboxItem>
-                                                            </div>
-                                                        </ComboboxGroup>
-                                                    </ComboboxList>
-                                                </Combobox>
-                                                <div class="h-5">
-                                                    <FieldError v-if="errors.length" :errors="errors" />
-                                                </div>
-                                            </div>
-                                        </VeeField>
-                                        <!-- Date -->
-                                        <VeeField :name="`promotions[${index}].start_date`" v-slot="{ field, errors }">
-                                            <Field>
-                                                <div>
-                                                    <Input type="date" v-bind="field" />
-                                                    <div class="h-5">
-                                                        <FieldError v-if="errors.length" :errors="errors" />
-                                                    </div>
-                                                </div>
-                                            </Field>
-                                        </VeeField>
-                                        <!-- Remove -->
-                                        <div class="flex justify-end">
-                                            <Button type="button" variant="ghost" size="icon" @click="remove(index)">
-                                                <X />
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </FieldGroup>
-                        </div>
-                        <Button type="button" @click="push({})" class="w-full" variant="outline">
-                            <Plus /> Member
-                        </Button>
-                    </div>
-                </FieldSet>
-            </VeeFieldArray>
-            <div class="flex justify-end items-center gap-5">
-                <p v-if="submitError" class="text-destructive">{{ submitError }}</p>
-                <Button type="submit">Submit</Button>
-            </div>
-        </form>
-        <div v-else>
-            <div class="flex flex-col max-w-sm justify-center gap-4 py-24 mx-auto">
-                <div class="text-left">
-                    <h2 class="text-2xl font-semibold mb-2">Successfully Submitted</h2>
-                    <p class="text-muted-foreground">Your promotions have been recorded.</p>
-                </div>
-                <Button @click="() => { formSubmitted = false; resetForm(); }" variant="secondary">
-                    Submit Another
-                </Button>
-            </div>
-        </div>
-    </div>
-</template>

ui/src/components/promotions/promotionList.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { pagination } from '@shared/types/pagination';
-import { ref } from 'vue';
-
-const expanded = ref<number | null>(null);
-const hoverID = ref<number | null>(null);
-
-const pageNum = ref<number>(1);
-const pageData = ref<pagination>();
-
-const pageSize = ref<number>(15)
-const pageSizeOptions = [10, 15, 30]
-
-function setPageSize(size: number) {
-    pageSize.value = size
-    pageNum.value = 1;
-    // loadLOAs();
-}
-
-function setPage(pagenum: number) {
-    pageNum.value = pagenum;
-    // loadLOAs();
-}
-</script>
-<template>
-    <div>
-        <Dialog :open="isExtending" @update:open="(val) => isExtending = val">
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
-                </DialogHeader>
-                <div class="flex gap-5">
-                    <Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
-                        :min-value="toCalendarDate(targetEnd)"
-                        :max-value="toCalendarDate(targetEnd).add({ years: 1 })" />
-                    <div class="flex flex-col w-full gap-3 px-2">
-                        <p>Quick Options</p>
-                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
-                            Week</Button>
-                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
-                            Month</Button>
-                    </div>
-                </div>
-                <div class="flex justify-end gap-4">
-                    <Button variant="outline" @click="isExtending = false">Cancel</Button>
-                    <Button @click="commitExtend">Extend</Button>
-                </div>
-            </DialogContent>
-        </Dialog>
-        <div class="max-w-7xl w-full mx-auto">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Member</TableHead>
-                        <TableHead>Type</TableHead>
-                        <TableHead>Start</TableHead>
-                        <TableHead>End</TableHead>
-                        <!-- <TableHead class="w-[500px]">Reason</TableHead> -->
-                        <TableHead>Posted on</TableHead>
-                        <TableHead>Status</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    <template v-for="post in LOAList" :key="post.id">
-                        <TableRow class="hover:bg-muted/50 cursor-pointer" @click="expanded = post.id"
-                            @mouseenter="hoverID = post.id" @mouseleave="hoverID = null" :class="{
-                                'border-b-0': expanded === post.id,
-                                'bg-muted/50': hoverID === post.id
-                            }">
-                            <TableCell class="font-medium">
-                                <MemberCard :member-id="post.member_id"></MemberCard>
-                            </TableCell>
-                            <TableCell>{{ post.type_name }}</TableCell>
-                            <TableCell>{{ formatDate(post.start_date) }}</TableCell>
-                            <TableCell>{{ post.extended_till ? formatDate(post.extended_till) :
-                                formatDate(post.end_date) }}
-                            </TableCell>
-                            <!-- <TableCell>{{ post.reason }}</TableCell> -->
-                            <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
-                            <TableCell>
-                                <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge>
-                                <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
-                                <Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
-                                <Badge v-else class="bg-gray-400">Ended</Badge>
-                            </TableCell>
-                            <TableCell @click.stop="" class="text-right">
-                                <DropdownMenu>
-                                    <DropdownMenuTrigger class="cursor-pointer">
-                                        <Button variant="ghost">
-                                            <Ellipsis class="size-6"></Ellipsis>
-                                        </Button>
-                                    </DropdownMenuTrigger>
-                                    <DropdownMenuContent>
-                                        <DropdownMenuItem v-if="!post.closed && props.adminMode"
-                                            @click="isExtending = true; targetLOA = post">
-                                            Extend
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
-                                            @click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
-                                                'Cancel' :
-                                                'End' }}
-                                        </DropdownMenuItem>
-                                        <!-- Fallback: no actions available -->
-                                        <p v-if="post.closed || (!props.adminMode && post.closed)"
-                                            class="p-2 text-center text-sm">
-                                            No actions
-                                        </p>
-                                    </DropdownMenuContent>
-                                </DropdownMenu>
-                            </TableCell>
-                            <TableCell>
-                                <Button v-if="expanded === post.id" @click.stop="expanded = null" variant="ghost">
-                                    <ChevronUp class="size-6" />
-                                </Button>
-                                <Button v-else @click.stop="expanded = post.id" variant="ghost">
-                                    <ChevronDown class="size-6" />
-                                </Button>
-                            </TableCell>
-                        </TableRow>
-                        <TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
-                            @mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
-                            <TableCell :colspan="8" class="p-0">
-                                <div class="w-full p-3 mb-6 space-y-3">
-                                    <div class="flex justify-between items-start gap-4">
-                                        <div class="flex-1">
-                                            <!-- Title -->
-                                            <p class="text-md font-semibold text-foreground">
-                                                Reason
-                                            </p>
-
-                                            <!-- Content -->
-                                            <p
-                                                class="mt-1 text-md whitespace-pre-wrap leading-relaxed text-muted-foreground">
-                                                {{ post.reason }}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-
-                    </template>
-                </TableBody>
-            </Table>
-            <div class="mt-5 flex justify-between">
-                <div></div>
-                <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
-                    :default-page="2" :page="pageNum" @update:page="setPage">
-                    <PaginationContent v-slot="{ items }">
-                        <PaginationPrevious />
-                        <template v-for="(item, index) in items" :key="index">
-                            <PaginationItem v-if="item.type === 'page'" :value="item.value"
-                                :is-active="item.value === page">
-                                {{ item.value }}
-                            </PaginationItem>
-                        </template>
-                        <PaginationEllipsis :index="4" />
-                        <PaginationNext />
-                    </PaginationContent>
-                </Pagination>
-                <div class="flex items-center gap-3 text-sm">
-                    <p class="text-muted-foreground text-nowrap">Per page:</p>
-
-                    <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
-                        class="px-2 py-1 rounded transition-colors" :class="{
-                            'bg-muted font-semibold': pageSize === size,
-                            'hover:bg-muted/50': pageSize !== size
-                        }">
-                        {{ size }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

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.
-            </p>
-            <Button @click="goToApplication" class="px-6 py-3 text-lg">
-                Begin Application
-            </Button>
+        <div v-if="user.state == 'member'" class="mt-10">
+            <div ref="welcomeRef" class="bookstack-container">
+                <!-- bookstack -->
+            </div>
         </div>
-        <div v-else>
-            HOMEPAGEEEEEEEEEEEEEEEEEEE
+        <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>
+                        </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>
     </div>
 </template>

ui/src/pages/RankChange.vue

@@ -1,24 +1,115 @@
 <script setup lang="ts">
-import PromotionForm from "@/components/promotions/promotionForm.vue";
-import PromotionList from "@/components/promotions/promotionList.vue";
+import { Check, Search } from "lucide-vue-next"
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { getRanks, Rank, submitRankChange } from "@/api/rank"
+import { onMounted, ref } from "vue";
+import { Member, getMembers } from "@/api/member";
+import { cn } from "@/lib/utils"
+import { CalendarIcon } from "lucide-vue-next"
+
+import {
+    DateFormatter,
+
+    DateValue,
+
+    getLocalTimeZone,
+    today,
+} from "@internationalized/date"
+
+import Button from "@/components/ui/button/Button.vue";
+import Calendar from "@/components/ui/calendar/Calendar.vue";
+
+const members = ref<Member[]>([])
+const ranks = ref<Rank[]>([])
+const date = ref<DateValue>(today(getLocalTimeZone()))
+
+
+const currentMember = ref<Member | null>(null);
+const currentRank = ref<Rank | null>(null);
+onMounted(async () => {
+    members.value = await getMembers();
+    ranks.value = await getRanks();
+});
+
+const df = new DateFormatter("en-US", {
+    dateStyle: "long",
+})
+
+function submit() {
+    submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
+        .then(() => {
+            alert("Rank change submitted!");
+            currentMember.value = null;
+            currentRank.value = null;
+            date.value = today(getLocalTimeZone());
+        })
+        .catch((err) => {
+            console.error(err);
+            alert("Failed to submit rank change.");
+        });
+}
+
 </script>
 
 <template>
-    <div class="mx-auto mt-10 max-w-7xl px-8">
-        <div class="flex max-h-[70vh] gap-8">
+    <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
+        <Combobox v-model="currentMember">
+            <ComboboxAnchor class="w-[300px]">
+                <ComboboxInput placeholder="Search members..." class="w-full pl-9"
+                    :display-value="(v) => v ? v.member_name : ''" />
+            </ComboboxAnchor>
+            <ComboboxList class="w-[300px]">
+                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
+                <ComboboxGroup>
+                    <template v-for="member in members" :key="member.member_id">
+                        <ComboboxItem :value="member"
+                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
+                            {{ member.member_name }}
+                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
+                                <Check class="h-4 w-4" />
+                            </ComboboxItemIndicator>
+                        </ComboboxItem>
+                    </template>
+                </ComboboxGroup>
+            </ComboboxList>
+        </Combobox>
 
-            <!-- LEFT COLUMN -->
-            <div class="flex-1 border-r pr-8">
-                <!-- <PromotionList></PromotionList> -->
-            </div>
-
-            <!-- RIGHT COLUMN -->
-            <div class="flex-1 flex justify-center pl-8">
-                <div class="w-full max-w-3xl">
-                    <PromotionForm />
-                </div>
-            </div>
-
-        </div>
+        <!-- Rank Combobox -->
+        <Combobox v-model="currentRank">
+            <ComboboxAnchor class="w-[300px]">
+                <ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
+                    :display-value="(v) => v ? v.short_name : ''" />
+            </ComboboxAnchor>
+            <ComboboxList class="w-[300px]">
+                <ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
+                <ComboboxGroup>
+                    <template v-for="rank in ranks" :key="rank.id">
+                        <ComboboxItem :value="rank"
+                            class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
+                            {{ rank.short_name }}
+                            <ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
+                                <Check class="h-4 w-4" />
+                            </ComboboxItemIndicator>
+                        </ComboboxItem>
+                    </template>
+                </ComboboxGroup>
+            </ComboboxList>
+        </Combobox>
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn(
+                    'w-[280px] justify-start text-left font-normal',
+                    !date && 'text-muted-foreground',
+                )">
+                    <CalendarIcon class="mr-2 h-4 w-4" />
+                    {{ date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date" }}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <Calendar v-model="date" initial-focus />
+            </PopoverContent>
+        </Popover>
+        <Button @click="submit">Submit</Button>
     </div>
-</template>
+</template>