Improved promotion page readability on mobile

.gitignore

@@ -32,5 +32,3 @@ coverage
 *.sql
 .env
 *.db
-
-db_data

api/.gitignore

@@ -1,3 +1 @@
 built
-
-!migrations/*/*.sql

api/database.json

@@ -1,20 +0,0 @@
-{
-    "dev": {
-        "driver": "mysql",
-        "user": "root",
-        "password": "root",
-        "host": "localhost",
-        "database": "ranger_unit_tracker",
-        "port": "3306",
-        "multipleStatements": true
-    },
-    "prod": {
-        "driver": "mysql",
-        "user": {"ENV" : "DB_USERNAME"},
-        "password": {"ENV" : "DB_PASSWORD"},
-        "host": {"ENV" : "DB_HOST"},
-        "database": {"ENV" : "DB_DATABASE"},
-        "port": {"ENV" : "DB_PORT"},
-        "multipleStatements": true
-    }
-}

api/migrations/20260201154439-initial.js

@@ -1,53 +0,0 @@
-'use strict';
-
-var dbm;
-var type;
-var seed;
-var fs = require('fs');
-var path = require('path');
-var Promise;
-
-/**
-  * We receive the dbmigrate dependency from dbmigrate initially.
-  * This enables us to not have to rely on NODE_PATH.
-  */
-exports.setup = function(options, seedLink) {
-  dbm = options.dbmigrate;
-  type = dbm.dataType;
-  seed = seedLink;
-  Promise = options.Promise;
-};
-
-exports.up = function(db) {
-  var filePath = path.join(__dirname, 'sqls', '20260201154439-initial-up.sql');
-  return new Promise( function( resolve, reject ) {
-    fs.readFile(filePath, {encoding: 'utf-8'}, function(err,data){
-      if (err) return reject(err);
-      console.log('received data: ' + data);
-
-      resolve(data);
-    });
-  })
-  .then(function(data) {
-    return db.runSql(data);
-  });
-};
-
-exports.down = function(db) {
-  var filePath = path.join(__dirname, 'sqls', '20260201154439-initial-down.sql');
-  return new Promise( function( resolve, reject ) {
-    fs.readFile(filePath, {encoding: 'utf-8'}, function(err,data){
-      if (err) return reject(err);
-      console.log('received data: ' + data);
-
-      resolve(data);
-    });
-  })
-  .then(function(data) {
-    return db.runSql(data);
-  });
-};
-
-exports._meta = {
-  "version": 1
-};

api/migrations/sqls/20260201154439-initial-down.sql

@@ -1 +0,0 @@
-/* Replace with your SQL commands */

api/package.json

@@ -9,33 +9,26 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "tsc && tsc-alias && node ./built/api/src/index.js",
-    "prod": "tsc && tsc-alias && node ./built/api/src/index.js",
+    "build": "tsc && tsc-alias"
-    "build": "tsc && tsc-alias",
-    "seed": "node ./scripts/seed.js"
   },
   "dependencies": {
-    "@rsol/hashmig": "^1.0.7",
     "@sentry/node": "^10.27.0",
     "@types/express-session": "^1.18.2",
     "connect-sqlite3": "^0.9.16",
     "cors": "^2.8.5",
-    "db-migrate": "^0.11.14",
+    "dotenv": "^17.2.1",
-    "db-migrate-mysql": "^3.0.0",
-    "dotenv": "16.6.1",
     "express": "^5.1.0",
     "express-session": "^1.18.2",
     "mariadb": "^3.4.5",
     "morgan": "^1.10.1",
     "mysql2": "^3.14.3",
     "passport": "^0.7.0",
-    "passport-custom": "^1.1.1",
     "passport-openidconnect": "^0.1.2"
   },
   "devDependencies": {
     "@types/express": "^5.0.3",
     "@types/morgan": "^1.9.10",
     "@types/node": "^24.8.1",
-    "cross-env": "^10.1.0",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3"
   }

api/scripts/migrate.js

@@ -1,29 +0,0 @@
-const dotenv = require('dotenv');
-const path = require('path');
-const { execSync } = require('child_process');
-
-dotenv.config({ path: path.resolve(process.cwd(), `.env`) });
-
-const db = {
-    user: process.env.DB_USERNAME,
-    pass: process.env.DB_PASSWORD,
-    host: process.env.DB_MIGRATION_HOST,
-    port: process.env.DB_PORT,
-    name: process.env.DB_DATABASE,
-};
-const dbUrl = `mysql://${db.user}:${db.pass}@tcp(${db.host}:${db.port})/${db.name}`;
-
-const args = process.argv.slice(2).join(" ");
-const migrations = path.join(process.cwd(), "migrations");
-
-const cmd = [
-    "docker run --rm",
-    `-v "${migrations}:/migrations"`,
-    "migrate/migrate",
-    "-path=/migrations",
-    `-database "mysql://${db.user}:${db.pass}@tcp(${db.host}:${db.port})/${db.name}"`, // Use double quotes
-    args,
-].join(" ");
-
-console.log(cmd);
-execSync(cmd, { stdio: "inherit" });

api/scripts/seed.js

@@ -1,33 +0,0 @@
-const dotenv = require("dotenv");
-const path = require("path");
-const mariadb = require("mariadb");
-const fs = require("fs");
-
-dotenv.config({ path: path.resolve(process.cwd(), `.env`) });
-
-const { DB_HOST, DB_PORT, DB_USERNAME, DB_PASSWORD, DB_DATABASE, APPLICATION_ENVIRONMENT } = process.env;
-
-//do not accidentally seed prod pls
-if (APPLICATION_ENVIRONMENT !== "dev") {
-    console.log("PLEASE DO NOT SEED PROD!!!!");
-    process.exit(0);
-}
-
-(async () => {
-    const conn = await mariadb.createConnection({
-        host: DB_HOST,
-        port: DB_PORT,
-        user: DB_USERNAME,
-        password: DB_PASSWORD,
-        database: DB_DATABASE,
-        multipleStatements: true,
-    });
-
-    const seedFile = path.join(process.cwd(), "migrations", "seed.sql");
-    const sql = fs.readFileSync(seedFile, "utf8");
-
-    await conn.query(sql);
-    await conn.end();
-
-    console.log("Seeded");
-})();

api/src/index.ts

@@ -102,7 +102,6 @@ import { roles, memberRoles } from './routes/roles';
 import { courseRouter, eventRouter } from './routes/course';
 import { calendarRouter } from './routes/calendar';
 import { docsRouter } from './routes/docs';
-import { units } from './routes/units';
 
 app.use('/application', applicationRouter);
 app.use('/ranks', ranks);
@@ -116,7 +115,6 @@ app.use('/memberRoles', memberRoles)
 app.use('/course', courseRouter)
 app.use('/courseEvent', eventRouter)
 app.use('/calendar', calendarRouter)
-app.use('/units', units)
 app.use('/docs', docsRouter)
 app.use('/', authRouter)
 

api/src/routes/auth.ts

@@ -14,33 +14,13 @@ import { toDateTime } from '@app/shared/utils/time';
 import { logger } from '../services/logging/logger';
 const querystring = require('querystring');
 import { performance } from 'perf_hooks';
-import { CacheService } from '../services/cache/cache';
-import { Strategy as CustomStrategy } from 'passport-custom';
 
 
 function parseJwt(token) {
     return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
 }
 
-const devLogin = (req: any, res: any, next: any) => {
+passport.use(new OpenIDConnectStrategy({
-    // The object here must match what your 'verify' function returns: { memberId }
-    const devUser = { memberId: 1 }; // Hardcoded ID
-
-    req.logIn(devUser, (err: any) => {
-        if (err) return next(err);
-        const redirectTo = req.session.redirectTo || process.env.CLIENT_URL;
-        delete req.session.redirectTo;
-        return res.redirect(redirectTo);
-    });
-};
-
-if (process.env.AUTH_MODE === "mock") {
-    passport.use('mock', new CustomStrategy(async (req, done) => {
-        const mockUser = { memberId: 1 };
-        return done(null, mockUser);
-    }))
-} else {
-    passport.use('oidc', new OpenIDConnectStrategy({
     issuer: process.env.AUTH_ISSUER,
     authorizationURL: process.env.AUTH_DOMAIN + '/authorize/',
     tokenURL: process.env.AUTH_DOMAIN + '/token/',
@@ -143,28 +123,18 @@ if (process.env.AUTH_MODE === "mock") {
         if (con) con.release();
     }
 }));
-}
 
 router.get('/login', (req, res, next) => {
-    req.session.redirectTo = req.query.redirect as string;
+    // Store redirect target in session if provided
+    req.session.redirectTo = req.query.redirect;
 
-    const strategy = process.env.AUTH_MODE === 'mock' ? 'mock' : 'oidc';
+    next();
+}, passport.authenticate('openidconnect'));
 
-    passport.authenticate(strategy, {
-        successRedirect: (req.session.redirectTo || process.env.CLIENT_URL),
-        failureRedirect: '/login'
-    })(req, res, next);
-});
 
 router.get('/callback', (req, res, next) => {
-
-    //escape if mocked
-    if (process.env.AUTH_MODE === 'mock') {
-        return res.redirect(process.env.CLIENT_URL || '/');
-    }
-
     const redirectURI = req.session.redirectTo;
-    passport.authenticate('oidc', (err, user) => {
+    passport.authenticate('openidconnect', (err, user) => {
         if (err) return next(err);
         if (!user) return res.redirect(process.env.CLIENT_URL);
 
@@ -181,7 +151,6 @@ router.get('/callback', (req, res, next) => {
 
 router.get('/logout', [requireLogin], function (req, res, next) {
     req.logout(function (err) {
-
         if (err) { return next(err); }
 
         req.session.destroy((err) => {
@@ -194,21 +163,16 @@ router.get('/logout', [requireLogin], function (req, res, next) {
                 sameSite: 'lax'
             });
 
-            if (process.env.AUTH_MODE === 'mock') {
-                return res.redirect(process.env.CLIENT_URL || '/');
-            }
-
             var params = {
                 client_id: process.env.AUTH_CLIENT_ID,
                 returnTo: process.env.CLIENT_URL
             };
 
-            const endSessionUri = process.env.AUTH_END_SESSION_URI;
+            logger.info('auth', `Member logged out`, {
-            if (endSessionUri) {
+                user: req.user.id,
-                return res.redirect(endSessionUri + '?' + querystring.stringify(params));
+            });
-            } else {
+
-                return res.redirect(process.env.CLIENT_URL || '/');
+            res.redirect(process.env.AUTH_END_SESSION_URI + '?' + querystring.stringify(params));
-            }
         })
     });
 });
@@ -228,31 +192,8 @@ passport.deserializeUser(function (user, cb) {
         let con;
 
         try {
-            //cache lookup
+            let t;
-            let t = performance.now();
-            const cachedData: UserData | undefined = userCache.Get(memberID);
-            timings.cache_lookup = performance.now() - t;
 
-            if (cachedData) {
-                timings.total = performance.now() - start;
-
-                logger.info(
-                    'profiling',
-                    'passport.deserializeUser (cache hit)',
-                    {
-                        memberId: memberID,
-                        cache_hit: true,
-                        source: 'cache',
-                        total_ms: timings.total,
-                        breakdown_ms: timings,
-                    },
-                    'profiling'
-                );
-
-                return cb(null, cachedData);
-            }
-
-            //cache miss, db load
             t = performance.now();
             con = await pool.getConnection();
             timings.getConnection = performance.now() - t;
@@ -264,30 +205,30 @@ passport.deserializeUser(function (user, cb) {
             );
             timings.memberQuery = performance.now() - t;
 
-            const userData: UserData = userResults[0];
+            const userData: {
+                id: number;
+                name: string;
+                roles: Role[];
+                state: MemberState;
+                discord_id?: string;
+            } = userResults[0];
 
             t = performance.now();
-            userData.roles = await getUserRoles(memberID) || [];
+            const userRoles = await getUserRoles(memberID);
             timings.roles = performance.now() - t;
+            userData.roles = userRoles || [];
 
             t = performance.now();
             userData.state = await getUserState(memberID);
             timings.state = performance.now() - t;
 
-            t = performance.now();
+            // 📊 PROFILING LOG
-            userCache.Set(userData.id, userData);
-            timings.cache_set = performance.now() - t;
-
-            timings.total = performance.now() - start;
-
             logger.info(
                 'profiling',
-                'passport.deserializeUser (db load)',
+                'passport.deserializeUser completed',
                 {
                     memberId: memberID,
-                    cache_hit: false,
+                    total_ms: performance.now() - start,
-                    source: 'db',
-                    total_ms: timings.total,
                     breakdown_ms: timings,
                 },
                 'profiling'
@@ -305,12 +246,14 @@ passport.deserializeUser(function (user, cb) {
                 }
             );
             return cb(error);
+
         } finally {
             if (con) con.release();
         }
     });
 });
 
+
 declare global {
     namespace Express {
         interface Request {
@@ -325,15 +268,5 @@ declare global {
     }
 }
 
-export interface UserData {
-    id: number;
-    name: string;
-    roles: Role[];
-    state: MemberState;
-    discord_id?: string;
-}
-
-const userCache = new CacheService<number, UserData>();
 
 export const authRouter = router;
-export const memberCache = userCache;

api/src/routes/members.ts

@@ -5,16 +5,12 @@ import { Request, Response } from 'express';
 import pool from '../db';
 import { requireLogin, requireMemberState, requireRole } from '../middleware/auth';
 import { getUserActiveLOA } from '../services/db/loaService';
-import { getAllMembersLite, getMemberSettings, getMembersFull, getMembersLite, getUserData, getUserState, setUserSettings, getFilteredMembers, setUserState } from '../services/db/memberService';
+import { getAllMembersLite, getMemberSettings, getMembersFull, getMembersLite, getUserData, getUserState, setUserSettings } from '../services/db/memberService';
 import { getUserRoles } from '../services/db/rolesService';
 import { memberSettings, MemberState, myData } from '@app/shared/types/member';
-import { Discharge } from '@app/shared/schemas/dischargeSchema';
 
 import { Performance } from 'perf_hooks';
 import { logger } from '../services/logging/logger';
-import { memberCache } from './auth';
-import { cancelLatestRank } from '../services/db/rankService';
-import { cancelLatestUnit } from '../services/db/unitService';
 
 //get all users
 router.get('/', [requireLogin, requireMemberState(MemberState.Member)], async (req, res) => {
@@ -46,27 +42,6 @@ router.get('/', [requireLogin, requireMemberState(MemberState.Member)], async (r
     }
 });
 
-router.get('/filtered', [requireLogin, requireMemberState(MemberState.Member)], async (req, res) => {
-    try {
-        // Extract Query Parameters
-        const page = parseInt(req.query.page as string) || 1;
-        const pageSize = parseInt(req.query.pageSize as string) || 15;
-        const search = req.query.search as string | undefined;
-        const status = req.query.status as string | undefined;
-        const unitId = req.query.unitId as string | undefined;
-
-        // Call the service function
-        const result = await getFilteredMembers(page, pageSize, search, status, unitId);
-
-        return res.status(200).json(result);
-    } catch (error) {
-        logger.error('app', 'Failed to get filtered users', {
-            error: error instanceof Error ? error.message : String(error),
-        });
-        return res.status(500).json({ error: 'Failed to fetch users' });
-    }
-});
-
 router.get('/me', [requireLogin], async (req: Request, res) => {
     if (!req.user) return res.sendStatus(401);
 
@@ -236,32 +211,5 @@ router.put('/:id/displayname', async (req, res) => {
     return res.status(501);
 });
 
-//discharge member
-router.post('/discharge', [requireLogin, requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req: Request, res: Response) => {
-    try {
-        var con = await pool.getConnection();
-
-        con.beginTransaction();
-
-        var data: Discharge = req.body;
-        setUserState(data.userID, MemberState.Retired, con);
-        cancelLatestRank(data.userID, con);
-        cancelLatestUnit(data.userID, con);
-        con.commit();
-        memberCache.Invalidate(data.userID);
-
-        res.sendStatus(200);
-    } catch (error) {
-        logger.error('app', 'Failed to discharge user', {
-            data: data,
-            caller: req.user.id,
-            error: error instanceof Error ? error.message : String(error),
-            stack: error instanceof Error ? error.stack : undefined,
-        })
-    } finally {
-        if (con)
-            con.release();
-    }
-});
 
 export const memberRouter = router;

api/src/routes/units.ts

@@ -1,29 +0,0 @@
-import express = require('express');
-const unitsRouter = express.Router();
-
-import pool from '../db';
-import { requireLogin } from '../middleware/auth';
-import { logger } from '../services/logging/logger';
-import { Unit } from '@app/shared/types/units';
-
-unitsRouter.use(requireLogin);
-
-//get all units
-unitsRouter.get('/', async (req, res) => {
-    try {
-        const result: Unit[] = await pool.query('SELECT * FROM units WHERE active = 1;');
-        res.json(result);
-    } catch (error) {
-        logger.error(
-            'app',
-            'Failed to get all units',
-            {
-                error: error instanceof Error ? error.message : String(error),
-                stack: error instanceof Error ? error.stack : undefined,
-            }
-        );
-        res.sendStatus(500);
-    }
-});
-
-export const units = unitsRouter;

api/src/services/cache/cache.ts

@@ -1,19 +0,0 @@
-export class CacheService<Key, Value> {
-    private cacheMap: Map<Key, Value>
-
-    constructor() {
-        this.cacheMap = new Map<Key, Value>();
-    }
-
-    public Get(key: Key): Value {
-        return this.cacheMap.get(key)
-    }
-
-    public Set(key: Key, value: Value) {
-        this.cacheMap.set(key, value);
-    }
-
-    public Invalidate(key: Key): boolean {
-        return this.cacheMap.delete(key);
-    }
-}

api/src/services/db/loaService.ts

@@ -69,7 +69,7 @@ export async function getUserActiveLOA(userId: number): Promise<LOARequest[]> {
             FROM leave_of_absences
             WHERE member_id = ?
             AND closed IS NULL
-            AND UTC_TIMESTAMP() > start_date;`
+            AND UTC_TIMESTAMP() BETWEEN start_date AND end_date;`
     const LOAData = await pool.query(sql, [userId]);
     return LOAData;
 }

api/src/services/db/memberService.ts

@@ -1,97 +1,6 @@
 import { Role } from "@app/shared/types/roles";
 import pool from "../../db";
-import { Member, MemberCardDetails, MemberLight, memberSettings, MemberState, PaginatedMembers } from '@app/shared/types/member'
+import { Member, MemberCardDetails, MemberLight, memberSettings, MemberState } from '@app/shared/types/member'
-import { logger } from "../logging/logger";
-import { memberCache } from "../../routes/auth";
-import * as mariadb from 'mariadb';
-
-export async function getFilteredMembers(
-  page: number = 1,
-  pageSize: number = 15,
-  search?: string,
-  status?: string,
-  unitId?: string
-): Promise<PaginatedMembers> {
-  try {
-    const offset = (page - 1) * pageSize;
-    const whereClauses: string[] = [];
-    const params: any[] = [];
-
-    if (status && status !== 'all') {
-      whereClauses.push(`m.state = ?`);
-      params.push(status);
-    }
-
-    if (search) {
-      whereClauses.push(`v.member_name LIKE ?`);
-      params.push(`%${search}%`);
-    }
-
-    if (unitId && unitId !== 'all') {
-      whereClauses.push(`v.unit = ?`);
-      params.push(unitId);
-    }
-
-    const whereClause = whereClauses.length > 0
-      ? ` WHERE ${whereClauses.join(' AND ')}`
-      : '';
-
-    // COUNT QUERY
-    const countQuery = `SELECT COUNT(*) as total FROM view_member_rank_unit_status_latest v INNER JOIN members m ON v.member_id = m.id ${whereClause}`;
-    const [countResults]: any[] = await pool.query(countQuery, params);
-    const total = Number(countResults?.total) || 0;
-
-    // DATA QUERY
-    const dataQuery = `
-      SELECT 
-        v.*,
-        CASE 
-          WHEN EXISTS (
-            SELECT 1 FROM leave_of_absences l 
-            WHERE l.member_id = v.member_id 
-              AND l.deleted = 0 
-              AND UTC_TIMESTAMP() BETWEEN l.start_date AND l.end_date
-          ) THEN 1 ELSE 0 
-        END AS on_loa
-      FROM view_member_rank_unit_status_latest v
-      INNER JOIN members m ON v.member_id = m.id
-      ${whereClause} -- Added back correctly
-      ORDER BY v.member_name ASC
-      LIMIT ? OFFSET ?
-    `;
-
-    const rows: any[] = await pool.query(dataQuery, [...params, pageSize, offset]);
-
-    // Map rows to Member type
-    const members: Member[] = rows.map(row => ({
-      member_id: Number(row.member_id),
-      member_name: row.member_name,
-      displayName: row.displayName,
-      rank: row.rank,
-      rank_date: row.rank_date,
-      unit: row.unit,
-      unit_date: row.unit_date,
-      status: row.status,
-      status_date: row.status_date,
-      loa_until: row.loa_until ? new Date(row.loa_until) : undefined,
-    }));
-
-    return {
-      data: members,
-      pagination: {
-        page,
-        pageSize,
-        total,
-        totalPages: Math.ceil(total / pageSize),
-      },
-    };
-  } catch (error) {
-    logger.error('app', 'Error fetching filtered members', {
-      error: error instanceof Error ? error.message : String(error),
-    });
-    throw error;
-  }
-}
 
 export async function getUserData(userID: number): Promise<Member> {
   const sql = `SELECT * FROM view_member_rank_unit_status_latest WHERE member_id = ?`;
@@ -99,17 +8,11 @@ export async function getUserData(userID: number): Promise<Member> {
   return res[0] ?? null;
 }
 
-export async function setUserState(userID: number, state: MemberState, con: mariadb.Pool | mariadb.Connection = pool) {
+export async function setUserState(userID: number, state: MemberState) {
-  try {
   const sql = `UPDATE members
         SET state = ?
         WHERE id = ?;`;
-    return await con.query(sql, [state, userID]);
+  return await pool.query(sql, [state, userID]);
-  } catch (error) {
-    logger.error('app', 'Error setting user state', error);
-  } finally {
-    memberCache.Invalidate(userID);
-  }
 }
 
 export async function getUserState(user: number): Promise<MemberState> {
@@ -196,8 +99,9 @@ export async function getMembersFull(ids: number[]): Promise<MemberCardDetails[]
       status_date: row.status_date,
       loa_until: row.loa_until ? new Date(row.loa_until) : undefined,
     };
+
     // roles comes as array of strings; parse each one
-    const roles: Role[] = row.roles;
+    const roles: Role[] = JSON.parse(row.roles).map((r: string) => JSON.parse(r));
 
     return { member, roles };
   });

api/src/services/db/rankService.ts

@@ -3,7 +3,6 @@ import { PromotionDetails, PromotionSummary } from "@app/shared/types/rank"
 import pool from "../../db";
 import { PagedData } from "@app/shared/types/pagination";
 import { toDate, toDateIgnoreZone, toDateTime } from "@app/shared/utils/time";
-import * as mariadb from 'mariadb';
 
 export async function getAllRanks() {
     const rows = await pool.query(
@@ -107,13 +106,3 @@ export async function getPromotionsOnDay(day: Date): Promise<PromotionDetails[]>
 
     return batchPromotion;
 }
-
-export async function cancelLatestRank(userID: number, con: mariadb.Pool | mariadb.Connection = pool): Promise<boolean> {
-    try {
-        let sql = `CALL sp_end_member_rank(?,NOW())`;
-        con.query(sql, [userID]);
-        return true;
-    } catch (error) {
-        throw error;
-    }
-}

api/src/services/db/rolesService.ts

@@ -1,20 +1,12 @@
 import { MemberLight } from '@app/shared/types/member';
 import pool from '../../db';
 import { Role, RoleSummary } from '@app/shared/types/roles'
-import { logger } from '../logging/logger';
-import { memberCache } from '../../routes/auth';
 
 export async function assignUserGroup(userID: number, roleID: number) {
-    try {
     const sql = `INSERT INTO members_roles (member_id, role_id) VALUES (?, ?);`;
     const params = [userID, roleID];
 
     return await pool.query(sql, params);
-    } catch (error) {
-        logger.error('app', 'Failed to assign user group', error);
-    } finally {
-        memberCache.Invalidate(userID);
-    }
 }
 
 export async function createGroup(name: string, color: string, description: string) {

api/src/services/db/unitService.ts

@@ -1,13 +0,0 @@
-import pool from "../../db";
-import * as mariadb from 'mariadb';
-
-
-export async function cancelLatestUnit(userID: number, con: mariadb.Pool | mariadb.Connection = pool): Promise<boolean> {
-    try {
-        let sql = `CALL sp_end_member_unit(?,NOW())`;
-        con.query(sql, [userID]);
-        return true;
-    } catch (error) {
-        throw error;
-    }
-}

docker-compose.dev.yml

@@ -1,13 +0,0 @@
-version: "3.9"
-services:
-  db:
-    image: mariadb:10.6.23-ubi9
-    environment:
-      MARIADB_ROOT_PASSWORD: root
-      MARIADB_DATABASE: ranger_unit_tracker
-      MARIADB_USER: dev
-      MARIADB_PASSWORD: dev
-    ports:
-      - "3306:3306"
-    volumes:
-      - ./db_data:/var/lib/mysql

readme.md

@@ -1,54 +0,0 @@
-## Prerequs
-
-* Node.js
-* npm
-* Docker + Docker Compose
-
-## Installation
-
-Install dependencies in each workspace:
-
-```
-cd ui && npm install
-cd ../api && npm install
-cd ../shared && npm install
-```
-
-## Local Development Setup
-
-From the project root, start required services:
-
-```
-docker compose -f docker-compose.dev.yml up
-```
-
-Run database setup from `/api`:
-
-```
-npm run migrate:up
-npm run migrate:seed
-```
-
-## Running the App
-
-Start the frontend:
-
-```
-cd ui
-npm run dev
-```
-
-Start the API:
-
-```
-cd api
-npm run dev
-```
-
-* UI runs via Vite
-* API runs on Node after TypeScript build
-
-## Notes
-
-* `shared` must have its dependencies installed for both UI and API to work
-* `docker-compose.dev.yml` is required for local dev dependencies (e.g. database)

shared/schemas/dischargeSchema.ts

@@ -1,10 +0,0 @@
-import z from "zod";
-
-export const dischargeSchema = z.object({
-    reason: z.string().min(1, "Please provide a valid reason for discharge").max(200),
-    // effectiveDate: z.string().min(1, "Date is required"),
-})
-
-export type Discharge = z.infer<typeof dischargeSchema> & {
-    userID: number;
-};

shared/types/member.ts

@@ -1,13 +1,10 @@
 import { LOARequest } from "./loa";
 import { Role } from "./roles";
-import { PagedData } from "./pagination";
 
 export interface memberSettings {
     displayName: string;
 }
 
-export type PaginatedMembers = PagedData<Member>;
-
 export enum MemberState {
     Guest = "guest",
     Applicant = "applicant",

shared/types/units.ts

@@ -1,7 +0,0 @@
-export interface Unit {
-    id: number;
-    name: string;
-    description?: string;
-    active: boolean;
-    color?: string;
-}

ui/src/App.vue

@@ -29,19 +29,15 @@ const version = import.meta.env.VITE_APPLICATION_VERSION;
       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 max-w-5xl" variant="info">
+      <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
-        <AlertDescription class="flex flex-row items-center text-wrap gap-5 mx-auto">
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
           <p>Development environment (v{{ version }}). Features may be incomplete or unavailable.</p>
         </AlertDescription>
       </Alert>
-      <Alert v-if="userStore.user?.LOAs?.[0]" class="m-2 mx-auto max-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 v-if="new Date(userStore.user?.LOAs?.[0].extended_till || userStore.user?.LOAs?.[0].end_date) > new Date()">
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till ||
-            LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till || userStore.user?.LOAs?.[0].end_date) }}</strong>
+            userStore.user?.LOAs?.[0].end_date) }}</strong></p>
-            </p>
-            <p v-else>
-            LOA expired on <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>

ui/src/api/member.ts

@@ -1,5 +1,4 @@
-import { Discharge } from "@shared/schemas/dischargeSchema";
+import { memberSettings, Member, MemberLight, MemberCardDetails } from "@shared/types/member";
-import { memberSettings, Member, MemberLight, MemberCardDetails, PaginatedMembers } from "@shared/types/member";
 
 //  @ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
@@ -14,33 +13,6 @@ export async function getMembers(): Promise<Member[]> {
     return response.json();
 }
 
-export async function getMembersFiltered(params: {
-    page?: number;
-    pageSize?: number;
-    search?: string;
-    status?: string;
-    unitId?: string;
-} = {}): Promise<PaginatedMembers> {
-
-    // Construct the query string dynamically
-    const query = new URLSearchParams();
-    if (params.page) query.append('page', params.page.toString());
-    if (params.pageSize) query.append('pageSize', params.pageSize.toString());
-    if (params.search) query.append('search', params.search);
-    if (params.status && params.status !== 'all') query.append('status', params.status);
-    if (params.unitId && params.unitId !== 'all') query.append('unitId', params.unitId);
-
-    const response = await fetch(`${addr}/members/filtered?${query.toString()}`, {
-        credentials: 'include'
-    });
-
-    if (!response.ok) {
-        throw new Error("Failed to fetch members");
-    }
-
-    return response.json();
-}
-
 export async function getMemberSettings(): Promise<memberSettings> {
     const response = await fetch(`${addr}/members/settings`, {
         credentials: 'include'
@@ -116,23 +88,3 @@ export async function getFullMembers(ids: number[]): Promise<MemberCardDetails[]
     }
     return response.json();
 }
-
-/**
- * Requests for the given member to be discharged
- * @param data discharge packet
- * @returns true on success
- */
-export async function dischargeMember(data: Discharge): Promise<boolean> {
-    const response = await fetch(`${addr}/members/discharge`, {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data)
-    });
-    if (!response.ok) {
-        throw new Error("Failed to discharge member");
-    }
-    return true;
-}

ui/src/api/units.ts

@@ -1,15 +0,0 @@
-import { memberSettings, Member, MemberLight, MemberCardDetails } from "@shared/types/member";
-import { Unit } from "@shared/types/units";
-
-//  @ts-ignore
-const addr = import.meta.env.VITE_APIHOST;
-
-export async function getUnits(): Promise<Unit[]> {
-    const response = await fetch(`${addr}/units`, {
-        credentials: 'include'
-    });
-    if (!response.ok) {
-        throw new Error("Failed to fetch units");
-    }
-    return response.json();
-}

ui/src/components/Navigation/Navbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
 import Separator from '../ui/separator/Separator.vue';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import {
@@ -18,9 +18,10 @@ import NavigationMenuTrigger from '../ui/navigation-menu/NavigationMenuTrigger.v
 import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue';
 import { navigationMenuTriggerStyle } from '../ui/navigation-menu/'
 import { useAuth } from '@/composables/useAuth';
-import { ArrowUpRight, CircleArrowOutUpRight } from 'lucide-vue-next';
+import { ArrowUpRight, ChevronDown, ChevronUp, CircleArrowOutUpRight, LogIn, LogOut, Menu, Settings, X } from 'lucide-vue-next';
 import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue';
 import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue';
+import { computed, nextTick, ref } from 'vue';
 
 const userStore = useUserStore();
 const auth = useAuth();
@@ -40,11 +41,135 @@ function blurAfter() {
         (document.activeElement as HTMLElement)?.blur();
     });
 }
+
+type NavItem = {
+    title: string;
+    to?: string;
+    href?: string;
+    status?: 'member' | 'guest';
+    isExternal?: boolean;
+    roles?: string[];
+    items?: NavItem[];
+};
+
+const navConfig: NavItem[] = [
+    {
+        title: 'Calendar',
+        to: '/calendar',
+    },
+    {
+        title: 'Documents',
+        href: 'https://docs.iceberg-gaming.com',
+        status: 'member',
+        isExternal: true
+    },
+    {
+        title: 'Forms',
+        status: 'member',
+        items: [
+            { title: 'Leave of Absence', to: '/loa' },
+            { title: 'Training Report', to: '/trainingReport' },
+        ]
+    },
+    {
+        title: 'Administration',
+        status: 'member',
+        roles: ['17th Administrator', '17th HQ', '17th Command', 'Recruiter'],
+        items: [
+            {
+                title: 'Leave of Absence',
+                to: '/administration/loa',
+                roles: ['17th Administrator', '17th HQ', '17th Command']
+            },
+            {
+                title: 'Promotions',
+                to: '/administration/rankChange',
+                roles: ['17th Administrator', '17th HQ', '17th Command']
+            },
+            {
+                title: 'Recruitment',
+                to: '/administration/applications',
+                roles: ['Recruiter']
+            },
+            {
+                title: 'Role Management',
+                to: '/administration/roles',
+                roles: ['17th Administrator']
+            },
+        ]
+    },
+    {
+        title: 'Join',
+        to: '/join',
+        status: 'guest',
+    },
+];
+
+const filteredNav = computed(() => {
+    return navConfig.flatMap(item => {
+        const filtered: NavItem[] = [];
+
+        // 1. Check Login Requirements
+        const isLoggedIn = userStore.isLoggedIn;
+
+        // 2. Determine visibility based on status
+        let shouldShow = false;
+
+        if (!item.status) {
+            // Public items - always show
+            shouldShow = true;
+        } else if (item.status === 'guest') {
+            // Show if NOT logged in OR logged in as guest (but NOT a member)
+            shouldShow = !isLoggedIn || auth.accountStatus.value === 'guest';
+        } else if (item.status === 'member') {
+            // Show ONLY if logged in as member
+            shouldShow = isLoggedIn && auth.accountStatus.value === 'member';
+        }
+
+        // 3. Check Role Requirements (if status check passed)
+        if (shouldShow && item.roles) {
+            shouldShow = auth.hasAnyRole(item.roles);
+        }
+
+        if (shouldShow) {
+            if (item.items) {
+                const filteredItems = item.items.filter(subItem =>
+                    !subItem.roles || auth.hasAnyRole(subItem.roles)
+                );
+                filtered.push({ ...item, items: filteredItems });
+            } else {
+                filtered.push(item);
+            }
+        }
+
+        return filtered;
+    });
+})
+
+const isMobileMenuOpen = ref(false);
+const expandedMenu = ref(null);
+
+const router = useRouter();
+
+function openMobileMenu() {
+    expandedMenu.value = null;
+    isMobileMenuOpen.value = true;
+}
+
+function closeMobileMenu() {
+    isMobileMenuOpen.value = false;
+    expandedMenu.value = null;
+}
+
+function mobileNavigateTo(to: string) {
+    closeMobileMenu();
+    router.push(to);
+}
 </script>
 
 <template>
     <div class="w-full border-b">
-        <div class="max-w-screen-3xl w-full mx-auto flex items-center justify-between pr-10 pl-7">
+        <div class="hidden lg:flex max-w-screen-3xl w-full mx-auto items-center justify-between pr-10 pl-7">
             <!-- left side -->
             <div class="flex items-center gap-7">
                 <RouterLink to="/">
@@ -138,12 +263,6 @@ function blurAfter() {
                                         </RouterLink>
                                     </NavigationMenuLink>
 
-                                    <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
-                                        <RouterLink to="/administration/members" @click="blurAfter">
-                                            Member Management
-                                        </RouterLink>
-                                    </NavigationMenuItem>
-
                                     <NavigationMenuLink v-if="auth.hasRole('17th Administrator')" as-child
                                         :class="navigationMenuTriggerStyle()">
                                         <RouterLink to="/administration/roles" @click="blurAfter">
@@ -152,6 +271,13 @@ function blurAfter() {
                                     </NavigationMenuLink>
                                 </NavigationMenuContent>
                             </NavigationMenuItem>
+
+                            <!-- <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
+                                <RouterLink to="/members" @click="blurAfter">
+                                    Members (debug)
+                                </RouterLink>
+                            </NavigationMenuItem> -->
+
                         </NavigationMenuList>
                     </NavigationMenu>
                 </div>
@@ -195,6 +321,109 @@ function blurAfter() {
                 <a v-else :href="APIHOST + '/login'">Login</a>
             </div>
         </div>
-        <!-- <Separator></Separator> -->
+
+        <!-- mobile navigation -->
+        <div class="flex flex-col lg:hidden w-full" :class="isMobileMenuOpen ? 'h-screen' : ''">
+            <div class="flex items-center justify-between w-full p-2">
+                <!-- <RouterLink to="/">
+                    <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
+                </RouterLink> -->
+                <button @click="mobileNavigateTo('/')">
+                    <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
+                </button>
+
+                <Button v-if="!isMobileMenuOpen" variant="ghost" size="icon" @click="openMobileMenu()">
+                    <Menu class="size-7" />
+                </Button>
+                <Button v-else variant="ghost" size="icon" @click="closeMobileMenu()">
+                    <X class="size-7" />
+                </Button>
+            </div>
+            <div v-if="isMobileMenuOpen" class="flex flex-col h-[calc(100vh-60px)] overflow-hidden">
+                <div class="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
+                    <div v-for="navItem in filteredNav" :key="navItem.title" class="group">
+
+                        <template v-if="!navItem.items">
+                            <a v-if="navItem.isExternal" :href="navItem.href" target="_blank"
+                                class="flex items-center justify-between w-full px-4 py-2.5 text-base font-medium rounded-md hover:bg-accent active:bg-accent transition-colors">
+                                <span class="flex items-center gap-2">
+                                    {{ navItem.title }}
+                                    <ArrowUpRight class="h-3.5 w-3.5 opacity-50" />
+                                </span>
+                            </a>
+                            <button v-else @click="mobileNavigateTo(navItem.to)"
+                                class="w-full text-left px-4 py-2.5 text-base font-medium rounded-md hover:bg-accent active:bg-accent transition-colors">
+                                {{ navItem.title }}
+                            </button>
+                        </template>
+
+                        <div v-else class="space-y-0.5">
+                            <button @click="expandedMenu = expandedMenu === navItem.title ? null : navItem.title"
+                                class="flex items-center justify-between w-full px-4 py-2.5 text-base font-medium rounded-md transition-colors"
+                                :class="expandedMenu === navItem.title ? 'bg-accent/50 text-primary' : 'hover:bg-accent'">
+                                {{ navItem.title }}
+                                <ChevronDown class="h-4 w-4 transition-transform duration-200"
+                                    :class="expandedMenu === navItem.title ? 'rotate-180' : ''" />
+                            </button>
+
+                            <div v-if="expandedMenu === navItem.title"
+                                class="ml-4 mr-2 border-l border-border space-y-0.5">
+                                <button v-for="subNavItem in navItem.items" :key="subNavItem.title"
+                                    @click="mobileNavigateTo(subNavItem.to)"
+                                    class="w-full text-left px-6 py-2 text-sm text-muted-foreground hover:text-foreground active:text-primary transition-colors">
+                                    {{ subNavItem.title }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="p-3 border-t bg-background mt-auto">
+                    <div v-if="userStore.isLoggedIn" class="space-y-3">
+                        <div class="flex items-center justify-between px-2">
+                            <div class="flex gap-3">
+                                <!-- <div
+                                    class="size-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-bold text-primary">
+                                    {{ userStore.displayName?.charAt(0) }}
+                                </div> -->
+                                <div class="flex flex-col leading-tight">
+                                    <span class="text-sm font-semibold">
+                                        {{ userStore.displayName || userStore.user.member.member_name }}
+                                    </span>
+                                    <span v-if="userStore.displayName"
+                                        class="text-[10px] uppercase tracking-wider text-muted-foreground">
+                                        {{ userStore.user.member.member_name }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="flex items-center gap-3">
+                                <Button variant="ghost" size="icon" @click="mobileNavigateTo('/profile')">
+                                    <Settings class="size-6"></Settings>
+                                </Button>
+                                <Button variant="ghost" size="icon" @click="logout()">
+                                    <LogOut class="size-6 text-destructive"></LogOut>
+                                </Button>
+                            </div>
+                        </div>
+
+                        <div class="flex gap-2">
+                            <!-- <Button variant="outline" size="xs" class="flex-1 h-8 text-xs"
+                                @click="mobileNavigateTo('/profile')">Profile</Button> -->
+                            <Button variant="secondary" size="xs" class="flex-1 h-8 text-xs"
+                                @click="mobileNavigateTo('/join')">My
+                                Application</Button>
+                            <Button variant="secondary" size="xs" class="flex-1 h-8 text-xs"
+                                @click="mobileNavigateTo('/applications')">Application History</Button>
+                        </div>
+                    </div>
+
+                    <a v-else :href="APIHOST + '/login'" class="block">
+                        <Button class="w-full text-sm h-10">
+                            <LogIn></LogIn> Login
+                        </Button>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 </template>

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -31,14 +31,9 @@ watch(
     { immediate: true }
 );
 
-watch(loaded, (value) => {
-    if (value) emit('load');
-});
-
 const emit = defineEmits<{
     (e: 'close'): void
     (e: 'reload'): void
-    (e: 'load'): void
     (e: 'edit', event: CalendarEvent): void
 }>()
 
@@ -184,7 +179,7 @@ defineExpose({ forceReload })
 <template>
     <div v-if="loaded">
         <!-- Header -->
-        <div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3 ">
+        <div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
             <h2 class="text-lg font-semibold break-after-all">
                 {{ activeEvent?.name || 'Event' }}
             </h2>
@@ -232,14 +227,14 @@ defineExpose({ forceReload })
                 </div>
             </section>
             <section v-if="isPast && userStore.state === 'member'" class="w-full">
-                <ButtonGroup class="flex w-full justify-center">
+                <ButtonGroup class="flex w-full">
-                    <Button variant="outline" class="flex-1"
+                    <Button variant="outline"
                         :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.Attending)">Going</Button>
-                    <Button variant="outline" class="flex-1"
+                    <Button variant="outline"
                         :class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 !border-l-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
-                    <Button variant="outline" class="flex-1"
+                    <Button variant="outline"
                         :class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 !border-l-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
                 </ButtonGroup>
@@ -264,7 +259,7 @@ defineExpose({ forceReload })
             <!-- Description -->
             <section class="space-y-2 w-full">
                 <p class="text-lg font-semibold">Description</p>
-                <p class="border border-border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
+                <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
                     {{ activeEvent.description }}
                 </p>
             </section>
@@ -278,8 +273,8 @@ defineExpose({ forceReload })
                         <p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
                     </div> -->
                 </div>
-                <div class="flex flex-col border border-border bg-muted/50 rounded-lg min-h-24 my-2">
+                <div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
-                    <div class="flex w-full pt-2 border-b border-border *:w-full *:text-center *:pb-1 *:cursor-pointer">
+                    <div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
                         <label :class="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                             @click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label>
                         <label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@@ -288,14 +283,14 @@ defineExpose({ forceReload })
                             @click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label>
                     </div>
                     <div class="pb-1 min-h-48">
-                        <div class="grid grid-cols-2 font-semibold text-muted-foreground border-b border-border py-1 px-3 mb-2">
+                        <div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2">
                             <p>Name</p>
                             <p class="text-right">Status</p>
                         </div>
 
                         <div v-for="person in attendanceList" :key="person.member_id"
-                            class="grid grid-cols-3 py-1 *:px-3 hover:bg-muted">
+                            class="grid grid-cols-2 py-1 *:px-3 hover:bg-muted">
-                            <div class="col-span-2">
+                            <div>
                                 <MemberCard :member-id="person.member_id"></MemberCard>
                             </div>
                             <p :class="statusColor(person.status)" class="text-right">
@@ -307,14 +302,11 @@ defineExpose({ forceReload })
             </section>
         </div>
     </div>
-    <div v-else class="relative flex justify-center items-center h-full">
+    <div v-else class="flex justify-center h-full items-center">
-        <!-- Close button (top-right) -->
+        <Button variant="ghost" size="icon" @click="emit('close')">
-        <Button variant="ghost" size="icon" class="absolute top-2 right-2" @click="emit('close')">
             <X class="size-5" />
         </Button>
 
-        <!-- Spinner (centered) -->
+        <Spinner class="size-8"></Spinner>
-        <Spinner class="size-8" />
     </div>
-
 </template>

ui/src/components/loa/loaForm.vue

@@ -66,19 +66,14 @@ import { loaSchema } from '@shared/schemas/loaSchema'
 import { toTypedSchema } from "@vee-validate/zod";
 import Calendar from "../ui/calendar/Calendar.vue";
 import { useUserStore } from "@/stores/user";
-import Spinner from "../ui/spinner/Spinner.vue";
 
 const { handleSubmit, values, resetForm } = useForm({
     validationSchema: toTypedSchema(loaSchema),
 })
 
 const formSubmitted = ref(false);
-const submitting = ref(false);
 
 const onSubmit = handleSubmit(async (values) => {
-    //catch double submit
-    if (submitting.value) return;
-    submitting.value = true;
     const out: LOARequest = {
         member_id: values.member_id,
         start_date: values.start_date,
@@ -93,7 +88,6 @@ const onSubmit = handleSubmit(async (values) => {
         userStore.loadUser();
     }
     formSubmitted.value = true;
-    submitting.value = false;
 })
 
 onMounted(async () => {
@@ -331,12 +325,7 @@ const filteredMembers = computed(() => {
                     </VeeField>
                 </div>
                 <div class="flex justify-end">
-                    <Button type="submit" :disabled="submitting" class="w-35">
+                    <Button type="submit">Submit</Button>
-                        <span class="flex items-center gap-2" v-if="submitting">
-                            <Spinner></Spinner> Submitting…
-                        </span>
-                        <span v-else>Submit</span>
-                    </Button>
                 </div>
             </form>
             <div v-else class="flex flex-col  gap-4 py-8 text-left">

ui/src/components/loa/loaList.vue

@@ -75,17 +75,15 @@ function formatDate(date: Date): string {
     });
 }
 
-function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Extended" | "Overdue" | "Closed" {
+function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
     if (loa.closed) return "Closed";
 
     const now = new Date();
     const start = new Date(loa.start_date);
     const end = new Date(loa.end_date);
-    const extension = new Date(loa.extended_till);
 
     if (now < start) return "Upcoming";
-    if (now >= start && (now <= end)) return "Active";
+    if (now >= start && now <= end) return "Active";
-    if (now >= start && (now <= extension)) return "Extended";
     if (now > loa.extended_till || end) return "Overdue";
 
     return "Overdue"; // fallback
@@ -193,7 +191,6 @@ function setPage(pagenum: number) {
                             <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) === 'Extended'" class="bg-green-500">Extended</Badge>
                                 <Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
                                 <Badge v-else class="bg-gray-400">Ended</Badge>
                             </TableCell>
@@ -235,34 +232,11 @@ function setPage(pagenum: number) {
                         <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-4 mb-6 space-y-4">
+                                <div class="w-full p-3 mb-6 space-y-3">
+                                    <div class="flex justify-between items-start gap-4">
+                                        <div class="space-y-3 w-full">
 
-                                    <!-- Dates -->
+                                            <!-- Header -->
-                                    <div class="grid grid-cols-3 gap-4 text-sm">
-                                        <div>
-                                            <p class="text-muted-foreground">Start</p>
-                                            <p class="font-medium">
-                                                {{ formatDate(post.start_date) }}
-                                            </p>
-                                        </div>
-
-                                        <div>
-                                            <p class="text-muted-foreground">Original end</p>
-                                            <p class="font-medium">
-                                                {{ formatDate(post.end_date) }}
-                                            </p>
-                                        </div>
-
-                                        <div class="">
-                                            <p class="text-muted-foreground">Extended to</p>
-                                            <p class="font-medium text-foreground">
-                                                {{post.extended_till ? formatDate(post.extended_till) : 'N/A' }}
-                                            </p>
-                                        </div>
-                                    </div>
-
-                                    <!-- Reason -->
-                                    <div class="space-y-2">
                                             <div class="flex items-center gap-2">
                                                 <h4 class="text-sm font-semibold text-foreground">
                                                     Reason
@@ -270,13 +244,16 @@ function setPage(pagenum: number) {
                                                 <Separator class="flex-1" />
                                             </div>
 
+                                            <!-- Content -->
                                             <div
-                                            class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
+                                                class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground w-full">
                                                 {{ post.reason || 'No reason provided.' }}
                                             </div>
+
                                         </div>
 
                                     </div>
+                                </div>
                             </TableCell>
                         </TableRow>
 

ui/src/components/members/DischargeMember.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { toTypedSchema } from '@vee-validate/zod'
-import { Form, Field as VeeField } from 'vee-validate'
-import * as z from 'zod'
-import { X, AlertTriangle } from 'lucide-vue-next'
-
-import { Button } from '@/components/ui/button'
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog'
-import { Field, FieldLabel, FieldError } from '@/components/ui/field'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import MemberCard from './MemberCard.vue'
-import { Member } from '@shared/types/member'
-import { Discharge, dischargeSchema } from '@shared/schemas/dischargeSchema';
-import { dischargeMember } from '@/api/member'
-
-const props = defineProps<{
-    open: boolean
-    member: Member | null
-}>()
-
-const emit = defineEmits(['update:open', 'discharged'])
-
-const formSchema = toTypedSchema(dischargeSchema);
-
-async function onSubmit(values: z.infer<typeof dischargeSchema>) {
-    const data: Discharge = { userID: props.member.member_id, reason: values.reason }
-    console.log('Discharging member:', props.member?.member_id)
-    console.log('Discharge Data:', data)
-
-    await dischargeMember(data);
-
-    // Notify parent to refresh/close
-    emit('discharged', { data })
-    emit('update:open', false)
-}
-</script>
-
-<template>
-    <Dialog :open="open" @update:open="emit('update:open', $event)">
-        <DialogContent class="sm:max-w-[425px]">
-            <DialogHeader>
-                <div class="flex items-center gap-2 mb-1">
-                    <!-- <AlertTriangle class="size-5" /> -->
-                    <DialogTitle>Discharge Member</DialogTitle>
-                </div>
-                <DialogDescription>
-                    You are initiating the discharge process for <MemberCard :member-id="member.member_id"></MemberCard>
-                    <!-- <span class="font-semibold text-foreground">{{ member }}</span> -->
-                </DialogDescription>
-            </DialogHeader>
-
-            <Form v-slot="{ handleSubmit }" as="" :validation-schema="formSchema">
-                <form id="dischargeForm" @submit="handleSubmit($event, onSubmit)" class="space-y-4 py-2">
-                    <VeeField v-slot="{ componentField, errors }" name="reason">
-                        <Field :data-invalid="!!errors.length">
-                            <FieldLabel>Reason for Discharge</FieldLabel>
-                            <Textarea placeholder="Retirement, inactivity, etc. " v-bind="componentField"
-                                class="resize-none" />
-                            <FieldError v-if="errors.length" :errors="errors" />
-                        </Field>
-                    </VeeField>
-
-                    <!-- <VeeField v-slot="{ componentField, errors }" name="effectiveDate">
-                        <Field :data-invalid="!!errors.length">
-                            <FieldLabel>Effective Date</FieldLabel>
-                            <Input type="date" v-bind="componentField" />
-                            <FieldError v-if="errors.length" :errors="errors" />
-                        </Field>
-                    </VeeField> -->
-                </form>
-            </Form>
-
-            <DialogFooter class="gap-2">
-                <Button variant="ghost" @click="emit('update:open', false)">
-                    Cancel
-                </Button>
-                <Button type="submit" form="dischargeForm" variant="destructive">
-                    Discharge
-                </Button>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
-</template>

ui/src/components/promotions/promotionForm.vue

@@ -31,12 +31,8 @@ const { handleSubmit, errors, values, resetForm, setFieldValue, submitCount } =
     validateOnMount: false,
 })
 
-const submitting = ref(false);
-
 const submitForm = handleSubmit(
     async (vals) => {
-        if (submitting.value) return;
-        submitting.value = true;
         try {
             let output = vals;
             output.promotions.map(p => p.start_date = new Date(p.start_date).toISOString())
@@ -46,8 +42,6 @@ const submitForm = handleSubmit(
         } catch (error) {
             submitError.value = error;
             console.error(error);
-        } finally {
-            submitting.value = false;
         }
     }
 );
@@ -135,11 +129,7 @@ function setAllToday() {
     <div class="w-xl">
         <form v-if="!formSubmitted" id="trainingForm" @submit.prevent="submitForm"
             class="w-full min-w-0 flex flex-col gap-4">
-            <div>
+
-                <FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
-                    Promotion Form
-                </FieldLegend>
-            </div>
             <VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
                 <FieldSet class="w-full min-w-0">
                     <div class="flex flex-col gap-2">
@@ -287,12 +277,7 @@ function setAllToday() {
                 </VeeField>
                 <div class="flex flex-col items-end gap-2">
                     <div class="h-6" />
-                    <Button type="submit" form="trainingForm" :disabled="submitting" class="w-35">
+                    <Button type="submit" class="w-min">Submit</Button>
-                        <span class="flex items-center gap-2" v-if="submitting">
-                            <Spinner></Spinner> Submitting…
-                        </span>
-                        <span v-else>Submit</span>
-                    </Button>
                     <p v-if="submitError" class="text-destructive">{{ submitError }}</p>
                     <div v-else class="h-6 flex justify-end">
                         <p v-if="submitCount > 0 && errors.promotions && typeof errors.promotions === 'string'"

ui/src/components/roles/addMember.vue

@@ -13,7 +13,6 @@ import Button from '../ui/button/Button.vue';
 import InputGroup from '../ui/input-group/InputGroup.vue';
 import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue';
 import { SearchIcon } from 'lucide-vue-next';
-import Spinner from '../ui/spinner/Spinner.vue';
 
 const props = defineProps<{
     allMembers: MemberLight[],
@@ -44,11 +43,8 @@ function openDialog() {
     showAddMemberDialog.value = true;
 }
 
-const submitting = ref(false);
+
 async function handleAddMember() {
-    //catch double submit
-    if (submitting.value) return;
-    submitting.value = true;
     //guard
     if (memberToAdd.value == null)
         return;
@@ -56,7 +52,6 @@ async function handleAddMember() {
     await addMemberToRole(memberToAdd.value.id, props.role.id);
     emit('submit');
     showAddMemberDialog.value = false;
-    submitting.value = false;
 }
 
 </script>
@@ -99,11 +94,8 @@ async function handleAddMember() {
                 <Button variant="secondary" @click="showAddMemberDialog = false">
                     Cancel
                 </Button>
-                <Button :disabled="!memberToAdd || submitting" @click="handleAddMember">
+                <Button :disabled="!memberToAdd" @click="handleAddMember">
-                    <span class="flex items-center gap-2" v-if="submitting">
+                    Add
-                        <Spinner></Spinner> Add
-                    </span>
-                    <span v-else>Add</span>
                 </Button>
             </DialogFooter>
         </DialogContent>

ui/src/components/trainingReport/trainingReportForm.vue

@@ -26,7 +26,6 @@ import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
 import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
 import Combobox from '../ui/combobox/Combobox.vue'
 import Tooltip from '../tooltip/Tooltip.vue'
-import Spinner from '../ui/spinner/Spinner.vue'
 
 
 const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
@@ -68,24 +67,19 @@ function toMySQLDateTime(date: Date): string {
         .replace("T", " ") + "000";    // becomes → 2025-11-19 00:00:00.000000
 }
 
-const submitting = ref(false);
+
-async function onSubmit(vals) {
+function onSubmit(vals) {
-    //catch double submit
-    if (submitting.value) return;
-    submitting.value = true;
     try {
         const clean: CourseEventDetails = {
             ...vals,
             event_date: new Date(vals.event_date),
         }
 
-        await postTrainingReport(clean).then((newID) => {
+        postTrainingReport(clean).then((newID) => {
             emit("submit", newID);
         });
     } catch (err) {
         console.error("There was an error submitting the training report", err);
-    } finally {
-        submitting.value = false;
     }
 }
 
@@ -408,12 +402,7 @@ const filteredMembers = computed(() => {
         </FieldGroup>
         <div class="flex gap-3 justify-end">
             <Button type="button" variant="outline" @click="resetForm">Reset</Button>
-            <Button type="submit" form="trainingForm" :disabled="submitting" class="w-35">
+            <Button type="submit" form="trainingForm">Submit</Button>
-                <span class="flex items-center gap-2" v-if="submitting">
-                    <Spinner></Spinner> Submitting…
-                </span>
-                <span v-else>Submit</span>
-            </Button>
         </div>
     </form>
 </template>

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

@@ -16,7 +16,7 @@ export const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent active:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         success:
           "bg-success text-success-foreground shadow-xs hover:bg-success/90",
         link: "text-primary underline-offset-4 hover:underline",

ui/src/pages/Calendar.vue

@@ -11,7 +11,6 @@ import { useRouter, useRoute } from 'vue-router'
 import { useCalendarEvents } from '@/composables/useCalendarEvents'
 import { useCalendarNavigation } from '@/composables/useCalendarNavigation'
 import { useUserStore } from '@/stores/user'
-import { CalendarOptions } from '@fullcalendar/core'
 
 const monthLabels = [
     'January', 'February', 'March', 'April', 'May', 'June',
@@ -54,10 +53,10 @@ function onDateClick(arg: { dateStr: string }) {
     dialogRef.value?.openDialog(arg.dateStr);
 }
 
-const calendarOptions = ref<CalendarOptions>({
+const calendarOptions = ref({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: 'dayGridMonth',
-    height: 'auto',
+    height: '100%',
     expandRows: true,
     headerToolbar: {
         left: '',
@@ -71,7 +70,6 @@ const calendarOptions = ref<CalendarOptions>({
     eventClick: onEventClick,
     editable: false,
 
-
     // force block-mode in dayGrid so we can lay it out on one line
     eventDisplay: 'block',
 
@@ -157,8 +155,8 @@ onMounted(() => {
     <div>
         <CreateCalendarEvent ref="dialogRef" @reload="loadEvents(); eventViewRef.forceReload();"></CreateCalendarEvent>
         <div class="flex">
-            <div class="flex-1 min-h-0 mt-5" :class="{ 'hidden md:block': panelOpen }">
+            <div class="flex-1 min-h-0 mt-5">
-                <div class="max-h-[80vh] overflow-y-auto min-h-0 scrollbar-themed p-2">
+                <div class="h-[80vh] min-h-0">
                     <!-- calendar header -->
                     <div class="flex items-center justify-between mx-5">
                         <!-- Left: title + pickers -->
@@ -210,49 +208,50 @@ onMounted(() => {
                 </div>
             </div>
             <aside v-if="panelOpen"
-                class="w-screen 3xl:w-lg 2xl:w-md lg:border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
+                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                 <ViewCalendarEvent ref="eventViewRef" :key="currentEventID" @close="() => { router.push('/calendar'); }"
-                    @reload="loadEvents()" @load="calendarRef.getApi().updateSize()"
+                    @reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
-                    @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
                 </ViewCalendarEvent>
             </aside>
         </div>
     </div>
 </template>
 
+<style scoped>
+/* Firefox */
+.scrollbar-themed {
+    scrollbar-width: thin;
+    scrollbar-color: #555 #1f1f1f;
+    padding-right: 6px;
+}
+
+/* Chrome, Edge, Safari */
+.scrollbar-themed::-webkit-scrollbar {
+    width: 10px;
+    /* slightly wider to allow padding look */
+}
+
+.scrollbar-themed::-webkit-scrollbar-track {
+    background: #1f1f1f;
+    margin-left: 6px;
+    /* ❗ adds space between content + scrollbar */
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 9999px;
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+</style>
+
 <style scoped>
 /* ---------- Optional container "card" around the calendar ---------- */
-/* Ensure the calendar fills the container properly */
 :global(.fc) {
     height: 100% !important;
-    --fc-border-color: var(--color-border);
-    --fc-button-bg-color: transparent;
-    --fc-button-border-color: var(--color-border);
-    --fc-button-hover-bg-color: var(--color-muted);
-}
-
-:global(.fc-theme-standard .fc-scrollgrid) {
-    border-radius: 8px;
-    overflow: hidden;
-    /* Rounds the corners of the grid */
-    border: 1px solid var(--color-border);
-}
-
-:global(.fc-daygrid-day-frame) {
-    display: flex;
-    flex-direction: column;
-    padding: 4px;
-}
-
-:global(.fc .fc-scroller-harness) {
-    background: transparent;
-}
-
-
-:global(.fc-daygrid-day-events) {
-    flex-grow: 1;
-    /* Pushes events to take up available space */
 }
 
 :global(.ev-pill.is-cancelled) {
@@ -345,9 +344,6 @@ onMounted(() => {
     text-decoration: none;
 }
 
-:global(#app > div > div.flex-1.min-h-0 > div > div > div > div.fc.fc-media-screen.fc-direction-ltr.fc-theme-standard > div.fc-view-harness.fc-view-harness-passive > div > table > thead > tr > th) {
-    background-color: transparent;
-}
 :global(.fc .fc-daygrid-day-top) {
     padding: 8px 8px 0 8px;
 }

ui/src/pages/RankChange.vue

@@ -1,29 +1,48 @@
+<script setup>
+import { ref } from 'vue'
+import { Plus, PlusIcon, X } from 'lucide-vue-next'
+import PromotionForm from '@/components/promotions/promotionForm.vue'
+import PromotionList from '@/components/promotions/promotionList.vue'
+import DialogContent from '@/components/ui/dialog/DialogContent.vue'
+import Dialog from '@/components/ui/dialog/Dialog.vue'
+import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
+import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
+import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const isFormOpen = ref(false)
+const listRef = ref(null)
+
+const isMobileFormOpen = ref(false);
+</script>
+
 <template>
     <div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
 
-        <div class="flex items-center justify-between mb-6 lg:hidden">
+        <div class="flex flex-col items-center justify-between mb-6 lg:hidden">
-            <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
+            <div v-if="isMobileFormOpen">
-
+                <div class="mb-4 flex justify-between items-center">
-            <Dialog v-model:open="isFormOpen">
+                    <p class="scroll-m-20 text-2xl font-semibold tracking-tight">
-                <DialogTrigger as-child>
+                        Promotion Form
-                    <Button size="sm" class="gap-2">
+                    </p>
-                        <Plus class="size-4" />
+                    <Button variant="ghost" size="icon" @click="isMobileFormOpen = false">
-                        Promote
+                        <X v-if="isMobileFormOpen" class="size-6"></X>
                     </Button>
-                </DialogTrigger>
-                <DialogContent class="w-full h-full max-w-none m-0 rounded-none flex flex-col">
-                    <DialogHeader class="flex-row items-center justify-between border-b pb-4">
-                        <DialogTitle>New Promotion</DialogTitle>
-                    </DialogHeader>
-
-                    <div class="flex-1 overflow-y-auto pt-6">
-                        <PromotionForm @submitted="handleMobileSubmit" />
                 </div>
-                </DialogContent>
+                <PromotionForm @submitted="listRef?.refresh" />
-            </Dialog>
+            </div>
+            <div v-else>
+                <div class="flex justify-between w-full">
+                    <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
+                    <Button @click="isMobileFormOpen = true">
+                        <PlusIcon />Submit
+                    </Button>
+                </div>
+                <PromotionList></PromotionList>
+            </div>
         </div>
 
-        <div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
+        <div class="hidden lg:flex flex-row lg:max-h-[70vh] gap-8">
             <div class="flex-1 lg:border-r lg:pr-8 w-full lg:min-w-2xl">
                 <p class="hidden lg:block scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
                     Promotion History
@@ -42,24 +61,3 @@
         </div>
     </div>
 </template>
-
-<script setup>
-import { ref } from 'vue'
-import { Plus } from 'lucide-vue-next'
-import PromotionForm from '@/components/promotions/promotionForm.vue'
-import PromotionList from '@/components/promotions/promotionList.vue'
-import DialogContent from '@/components/ui/dialog/DialogContent.vue'
-import Dialog from '@/components/ui/dialog/Dialog.vue'
-import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
-import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
-import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
-import Button from '@/components/ui/button/Button.vue'
-
-const isFormOpen = ref(false)
-const listRef = ref(null)
-
-const handleMobileSubmit = () => {
-    isFormOpen.value = false // Close the "Whole page" modal
-    listRef.value?.refresh()  // Refresh the list behind it
-}
-</script>

ui/src/pages/memberList.vue

@@ -1,311 +1,98 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from "vue";
-import { useRouter } from 'vue-router';
 import {
-    Ellipsis, Search, Trash2, UserX,
+    Table,
-    X,
+    TableBody,
-} from "lucide-vue-next";
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
 import {
-    Pagination,
+    DropdownMenu,
-    PaginationContent,
+    DropdownMenuContent,
-    PaginationEllipsis,
+    DropdownMenuItem,
-    PaginationItem,
+    DropdownMenuTrigger,
-    PaginationNext,
+} from "@/components/ui/dropdown-menu"
-    PaginationPrevious,
+import {
-} from '@/components/ui/pagination'
+    Dialog,
-
+    DialogContent,
-// API & Types
+    DialogDescription,
-import { getMembersFiltered } from "@/api/member";
+    DialogFooter,
-import { getUnits } from "@/api/units";
+    DialogHeader,
-import type { Member } from "@shared/types/member";
+    DialogTitle,
-import { MemberState } from "@shared/types/member";
+    DialogTrigger,
-import type { Unit } from "@shared/types/units";
+} from "@/components/ui/dialog"
-import type { pagination as PaginationType } from "@shared/types/pagination";
-
-// UI Components
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Button } from "@/components/ui/button";
 import Badge from "@/components/ui/badge/Badge.vue";
+import { computed, ref } from "vue";
+import { Member, getMembers } from "@/api/member";
+import { useRouter } from 'vue-router';
+import { Ellipsis } from "lucide-vue-next";
 import Input from "@/components/ui/input/Input.vue";
-import Spinner from "@/components/ui/spinner/Spinner.vue";
+import LoaForm from "@/components/loa/loaForm.vue";
-import DischargeMember from "@/components/members/DischargeMember.vue";
-import MemberCard from "@/components/members/MemberCard.vue";
 
-// --- State ---
-const router = useRouter();
 const members = ref<Member[]>([]);
-const units = ref<Unit[]>([]);
+const router = useRouter();
-const isLoaded = ref(false);
-const pagination = ref<PaginationType>({
-    page: 1,
-    pageSize: 15,
-    total: 0,
-    totalPages: 0,
-});
 
-const filters = ref<{ search: string; status: "all" | MemberState; unitId: string }>({
-    search: "",
-    status: MemberState.Member,
-    unitId: "all"
-});
-
-// Pagination State
-const pageNum = ref(1);
-const pageSize = ref(15);
-const pageSizeOptions = [10, 15, 30];
-
-const MEMBER_STATUSES = Object.values(MemberState);
-
-// --- Methods ---
 const fetchMembers = async () => {
-    isLoaded.value = false;
+    members.value = await getMembers();
-    try {
+};
-        const result = await getMembersFiltered({
+
-            page: pageNum.value,
+function viewMember(id) {
-            pageSize: pageSize.value,
+    router.push(`/member/${id}`)
-            search: filters.value.search || undefined,
-            status: filters.value.status,
-            unitId: filters.value.unitId,
-        });
-        members.value = result.data;
-        pagination.value = result.pagination;
-    } catch (error) {
-        console.error('Failed to fetch members:', error);
-        members.value = [];
-    } finally {
-        isLoaded.value = true;
 }
-};
 
-const fetchUnits = async () => {
-    try {
-        units.value = await getUnits();
-    } catch (error) {
-        console.error('Failed to fetch units:', error);
-    }
-};
-
-const navigateToMember = (id: string | number) => router.push(`/member/${id}`);
-
-const setPage = (num: number) => {
-    pageNum.value = num;
-};
-
-const setPageSize = (size: number) => {
-    pageSize.value = size;
-    pageNum.value = 1;
-};
-
-// --- Computed ---
-const paginatedMembers = computed(() => members.value);
-const totalItems = computed(() => pagination.value.total);
-
-let debounceTimer: ReturnType<typeof setTimeout> | null = null;
-// Watch pagination (Immediate)
-watch([pageNum, pageSize], () => {
-    if (debounceTimer) clearTimeout(debounceTimer);
 fetchMembers();
+
+const searchVal = ref<string>("");
+const searchedMembers = computed(() => {
+    return members.value.filter(member => member.member_name.toLowerCase().includes(searchVal.value.toLowerCase()));
 });
 
-// Watch filters (Debounced)
-watch(filters, () => {
-    if (debounceTimer) clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-        fetchMembers();
-    }, 300);
-}, { deep: true });
-
-function clearFilters() {
-    filters.value = {
-        search: "",
-        status: "all",
-        unitId: "all"
-    }
-}
-
-
-onMounted(() => {
-    fetchUnits();
-    fetchMembers();
-});
-
-//discharge form logic
-const isDischargeOpen = ref(false)
-const targetMember = ref(null)
-
-function openDischargeModal(member) {
-    targetMember.value = member
-    isDischargeOpen.value = true
-}
-
-function handleDischargeSuccess(data) {
-    fetchMembers();
-}
 </script>
 
 <template>
-    <div>
+
-        <DischargeMember v-model:open="isDischargeOpen" :member="targetMember" @discharged="handleDischargeSuccess">
+    <!-- table menu -->
-        </DischargeMember>
+    <div class="w-4xl mx-auto">
-        <div class="mx-auto max-w-7xl w-full py-10 px-4">
+        <div class="flex justify-between mb-4">
-            <div class="flex flex-col gap-2">
+            <Input v-model="searchVal" placeholder="search..."></Input>
-                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
-                    <div class="space-y-0.5">
-                        <h1 class="text-2xl font-bold tracking-tight text-foreground">Member Management</h1>
-                        <p class="text-muted-foreground text-sm">Directory of all personnel and unit assignments.</p>
         </div>
-                </div>
-                <div
-                    class="flex flex-col gap-4 sm:flex-row sm:items-center justify-between border-y border-border/40 py-3">
-                    <div class="flex items-center gap-2">
-                        <Select v-model="filters.status">
-                            <SelectTrigger
-                                class="h-8 w-fit min-w-[110px] border-none bg-muted/50 hover:bg-muted transition-colors text-xs capitalize">
-                                <SelectValue placeholder="Status" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">All Statuses</SelectItem>
-                                <SelectItem v-for="s in MEMBER_STATUSES" :key="s" :value="s">
-                                    <span class="capitalize">{{ s }}</span>
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
-                        <Select v-model="filters.unitId">
-                            <SelectTrigger
-                                class="h-8 w-fit min-w-[110px] border-none bg-muted/50 hover:bg-muted transition-colors text-xs">
-                                <SelectValue placeholder="Unit" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">All Units</SelectItem>
-                                <SelectItem v-for="u in units" :key="u.id" :value="u.name">
-                                    {{ u.name }}
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
-                        <div v-if="filters.status !== 'all' || filters.unitId !== 'all'"
-                            class="h-4 w-[1px] bg-border mx-1" />
-                        <Button v-if="filters.status !== MemberState.Member || filters.unitId !== 'all'" variant="ghost" size="sm"
-                            class="h-8 px-2 text-xs text-muted-foreground"
-                            @click="filters.status = MemberState.Member; filters.unitId = 'all'">
-                            Clear Filters
-                        </Button>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <div class="relative w-full sm:w-[260px]">
-                            <Search
-                                class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50" />
-                            <Input v-model="filters.search" placeholder="Search members..."
-                                class="h-8 pl-9 pr-8 bg-background text-xs focus-visible:ring-1" />
-                            <button v-if="filters.search" @click="filters.search = ''"
-                                class="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/60 hover:text-foreground transition-colors">
-                                <X class="size-3.5" />
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="min-h-[500px]">
         <Table>
             <TableHeader>
-                        <TableRow class="hover:bg-transparent border-b">
+                <TableRow>
-                            <TableHead class="w-[200px]">Member</TableHead>
+                    <TableHead class="w-[100px]">
+                        Member
+                    </TableHead>
                     <TableHead>Rank</TableHead>
                     <TableHead>Unit</TableHead>
                     <TableHead>Status</TableHead>
-                            <TableHead></TableHead>
-                            <TableHead class="text-right">Actions</TableHead>
                 </TableRow>
             </TableHeader>
             <TableBody>
-                        <template v-if="isLoaded">
+                <TableRow v-for="member in searchedMembers" :key="member.member_id"
-                            <TableRow v-for="member in paginatedMembers" :key="member.member_id"
+                    :onClick="() => { viewMember(member.member_id) }" class="cursor-pointer">
-                                class="group cursor-pointer hover:bg-muted/30 transition-colors">
                     <TableCell class="font-medium">
-                                    <MemberCard :member-id="member.member_id"></MemberCard>
+                        {{ member.member_name }}
                     </TableCell>
-                                <!-- <TableCell class="font-medium py-4">{{ member.displayName || member.member_name }}</TableCell> -->
                     <TableCell>{{ member.rank }}</TableCell>
                     <TableCell>{{ member.unit }}</TableCell>
-                                <TableCell>
+                    <TableCell>{{ member.status }}</TableCell>
-                                    <Badge variant="outline" class="capitalize font-normal">{{ member.status }}</Badge>
+                    <TableCell><Badge v-if="member.on_loa">On LOA</Badge></TableCell>
-                                </TableCell>
+                    <TableCell @click.stop="" class="text-right">
-                                <TableCell>
-                                    <Badge v-if="member.loa_until" variant="secondary"
-                                        class="bg-yellow-500/10 text-yellow-600 border-none">On LOA</Badge>
-                                </TableCell>
-                                <TableCell class="text-right" @click.stop>
                         <DropdownMenu>
-                                        <DropdownMenuTrigger as-child>
+                            <DropdownMenuTrigger class="cursor-pointer">
-                                            <Button variant="ghost" size="icon" class="hover:bg-muted">
+                                <Ellipsis></Ellipsis>
-                                                <Ellipsis class="size-5" />
-                                            </Button>
                             </DropdownMenuTrigger>
-                                        <DropdownMenuContent align="end" class="w-48">
+                            <DropdownMenuContent>
-                                            <!-- <DropdownMenuItem @click="navigateToMember(member.member_id)">
+                                <DropdownMenuItem>Change Rank</DropdownMenuItem>
-                                                View Profile
+                                <DropdownMenuItem>Transfer</DropdownMenuItem>
-                                            </DropdownMenuItem> -->
+                                <DropdownMenuItem :variant="'destructive'">Retire</DropdownMenuItem>
-                                            <DropdownMenuItem @click="openDischargeModal(member)"
-                                                class="text-destructive focus:bg-destructive focus:text-destructive-foreground font-medium">
-                                                Discharge Member
-                                            </DropdownMenuItem>
                             </DropdownMenuContent>
                         </DropdownMenu>
                     </TableCell>
                 </TableRow>
-                            <TableRow v-if="paginatedMembers.length === 0" class="hover:bg-transparent">
-                                <TableCell colspan="6" class="h-64 text-center">
-                                    <div class="flex flex-col items-center justify-center gap-2 text-muted-foreground">
-                                        <UserX class="size-10 opacity-20 mb-2" />
-                                        <p class="font-medium">No results found</p>
-                                        <p class="text-xs">Try adjusting your filters or search query.</p>
-                                    </div>
-                                </TableCell>
-                            </TableRow>
-                        </template>
-                        <TableRow v-else>
-                            <TableCell colspan="6" class="h-64 text-center">
-                                <div class="flex flex-col items-center justify-center gap-4 text-muted-foreground">
-                                    <Spinner class="size-8" />
-                                </div>
-                            </TableCell>
-                        </TableRow>
             </TableBody>
         </Table>
     </div>
-            <div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-4 border-t pt-6">
-                <div class="flex items-center gap-3 text-sm">
-                    <p class="text-muted-foreground text-nowrap">Items per page:</p>
-                    <div class="flex bg-muted/50 p-1 rounded-md">
-                        <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
-                            class="px-3 py-1 rounded transition-all text-xs"
-                            :class="pageSize === size ? 'bg-background shadow-sm font-bold' : 'hover:text-foreground opacity-60'">
-                            {{ size }}
-                        </button>
-                    </div>
-                </div>
-                <Pagination v-if="totalItems > 0" :total="totalItems" :items-per-page="pageSize" :page="pageNum"
-                    :sibling-count="1" :show-edges="true" @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 === pageNum">
-                                <Button variant="ghost" size="sm" :class="{ 'bg-muted': pageNum === item.value }"
-                                    @click="setPage(item.value)">
-                                    {{ item.value }}
-                                </Button>
-                            </PaginationItem>
-                            <PaginationEllipsis v-else-if="item.type === 'ellipsis'" :key="`ellipsis-${index}`" />
-                        </template>
-                        <PaginationNext />
-                    </PaginationContent>
-                </Pagination>
-                <p class="text-xs text-muted-foreground w-[100px] text-right">
-                    Total: {{ totalItems }}
-                </p>
-            </div>
-        </div>
-    </div>
 </template>

ui/src/router/index.js

@@ -13,6 +13,7 @@ const router = createRouter({
     { path: '/', component: () => import('@/pages/Homepage.vue') },
 
     // MEMBER ROUTES
+    { path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/profile', component: () => import('@/pages/MyProfile.vue'), meta: { requiresAuth: true } },
 
@@ -38,8 +39,7 @@ const router = createRouter({
         { path: 'applications/:id', component: () => import('@/pages/Application.vue') },
         { path: 'loa', component: () => import('@/pages/ManageLOA.vue') },
         { path: 'roles', component: () => import('@/pages/ManageRoles.vue') },
-        { path: 'roles/:id', component: () => import('@/pages/ManageRoles.vue') },
+        { path: 'roles/:id', component: () => import('@/pages/ManageRoles.vue') }
-        { path: 'members', component: () => import('@/pages/memberList.vue') },
       ]
     },