Upgraded handling of duplicate member roles Close #56

api/src/routes/ranks.ts

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

api/src/routes/roles.ts

@@ -5,7 +5,8 @@ const ur = express.Router();
 import { MemberState } from '@app/shared/types/member';
 import pool from '../db';
 import { requireLogin, requireMemberState, requireRole } from '../middleware/auth';
-import { assignUserGroup, createGroup } from '../services/rolesService';
+import { assignUserGroup, createGroup, getAllRoles, getRole, getUsersWithRole } from '../services/rolesService';
+import { Request, Response } from 'express';
 
 r.use(requireLogin)
 ur.use(requireLogin)
@@ -15,10 +16,16 @@ ur.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administ
     try {
         const body = req.body;
 
-        assignUserGroup(body.member_id, body.role_id);
+        await assignUserGroup(body.member_id, body.role_id);
 
         res.sendStatus(201);
     } catch (err) {
+        if (err?.code === 'ER_DUP_ENTRY') {
+            return res.status(400).json({
+                error: 'Member already has this role',
+            });
+        }
+
         console.error('Insert failed:', err);
         res.status(500).json({ error: 'Failed to add to group' });
     }
@@ -44,45 +51,39 @@ ur.delete('/', [requireMemberState(MemberState.Member), requireRole("17th Admini
 //get all roles
 r.get('/', [requireMemberState(MemberState.Member)], async (req, res) => {
     try {
-        var con = await pool.getConnection();
-
-        // Get all roles
-        const roles = await con.query('SELECT * FROM roles;');
-
-        // Get all members for each role
-        const membersRoles = await con.query(`
-            SELECT mr.role_id, v.*
-            FROM members_roles mr
-            JOIN view_member_rank_unit_status_latest v ON mr.member_id = v.member_id
-            `);
-
-
-        // Group members by role_id
-        const roleIdToMembers = {};
-        for (const row of membersRoles) {
-            if (!roleIdToMembers[row.role_id]) roleIdToMembers[row.role_id] = [];
-            // Remove role_id from member object
-            const { role_id, ...member } = row;
-            roleIdToMembers[role_id].push(member);
-        }
-
-        // Attach members to each role
-        const result = roles.map(role => ({
-            ...role,
-            members: roleIdToMembers[role.id] || []
-        }));
-
-        res.json(result);
+        const roles = await getAllRoles();
+        res.status(200).json(roles);
     } catch (err) {
         console.error(err);
-        res.status(500).json({ error: 'Internal server error' });
-    } finally {
-        con.release();
+        res.sendStatus(500);
     }
 });
 
+r.get('/:id/members', [requireMemberState(MemberState.Member)], async (req: Request, res: Response) => {
+    try {
+        const members = await getUsersWithRole(Number(req.params.id));
+        res.status(200).json(members);
+    } catch (err) {
+        console.error(err);
+        res.sendStatus(500);
+    }
+})
+
+
+r.get('/:id', [requireMemberState(MemberState.Member)], async (req: Request, res: Response) => {
+    try {
+        const role = await getRole(Number(req.params.id));
+        res.status(200).json(role);
+    } catch (err) {
+        console.error(err);
+        res.sendStatus(500);
+    }
+})
+
+
+
 //create a new role
-r.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req, res) => {
+r.post('/', [requireMemberState(MemberState.Member), requireRole("dev")], async (req, res) => {
     try {
         const { name, color, description } = req.body;
         if (!name || !color) {
@@ -103,7 +104,7 @@ r.post('/', [requireMemberState(MemberState.Member), requireRole("17th Administr
     }
 })
 
-r.delete('/:id', [requireMemberState(MemberState.Member), requireRole("17th Administrator")], async (req, res) => {
+r.delete('/:id', [requireMemberState(MemberState.Member), requireRole("dev")], async (req, res) => {
     try {
         const id = req.params.id;
 

api/src/services/memberService.ts

@@ -1,5 +1,6 @@
+import { Role } from "@app/shared/types/roles";
 import pool from "../db";
-import { Member, MemberLight, memberSettings, MemberState } from '@app/shared/types/member'
+import { Member, MemberCardDetails, MemberLight, memberSettings, MemberState } from '@app/shared/types/member'
 
 export async function getUserData(userID: number): Promise<Member> {
   const sql = `SELECT * FROM view_member_rank_unit_status_latest WHERE member_id = ?`;
@@ -60,10 +61,50 @@ export async function getAllMembersLite(): Promise<MemberLight[]> {
   return res;
 }
 
-export async function getMembersFull(ids: number[]): Promise<Member[]> {
-  const sql = `SELECT * FROM view_member_rank_unit_status_latest WHERE member_id IN (?);`;
-  const res: Member[] = await pool.query(sql, [ids]);
-  return res;
+export async function getMembersFull(ids: number[]): Promise<MemberCardDetails[]> {
+  const sql = `
+    SELECT m.*,
+      COALESCE(
+        JSON_ARRAYAGG(
+          CASE
+            WHEN r.id IS NOT NULL THEN JSON_OBJECT(
+              'id', r.id,
+              'name', r.name,
+              'color', r.color,
+              'description', r.description
+            )
+          END
+        ),
+        JSON_ARRAY()
+      ) AS roles
+    FROM view_member_rank_unit_status_latest m
+    LEFT JOIN members_roles mr ON m.member_id = mr.member_id
+    LEFT JOIN roles r ON mr.role_id = r.id
+    WHERE m.member_id IN (?)
+    GROUP BY m.member_id;
+  `;
+
+  const rows: any[] = await pool.query(sql, [ids]);
+
+  return rows.map(row => {
+    const member: Member = {
+      member_id: 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,
+    };
+
+    // roles comes as array of strings; parse each one
+    const roles: Role[] = JSON.parse(row.roles).map((r: string) => JSON.parse(r));
+
+    return { member, roles };
+  });
 }
 
 export async function mapDiscordtoID(id: number): Promise<number | null> {

api/src/services/rankService.ts

@@ -1,8 +1,4 @@
-import { BatchPromotion, BatchPromotionMember } from "@app/shared/schemas/promotionSchema";
-import { PromotionDetails, PromotionSummary } from "@app/shared/types/rank"
 import pool from "../db";
-import { PagedData } from "@app/shared/types/pagination";
-import { toDateTime } from "@app/shared/utils/time";
 
 export async function getAllRanks() {
     const rows = await pool.query(
@@ -34,75 +30,3 @@ export async function insertMemberRank(member_id: number, rank_id: number, date?
 
     await pool.query(sql, params);
 }
-
-
-export async function batchInsertMemberRank(promos: BatchPromotionMember[], author: number) {
-    try {
-        var con = await pool.getConnection();
-        console.log(promos);
-        promos.forEach(p => {
-            con.query(`CALL sp_update_member_rank(?, ?, ?, ?, ?, ?)`, [p.member_id, p.rank_id, author, author, "Rank Change", toDateTime(new Date(p.start_date))])
-        });
-
-        con.commit();
-        return
-    } catch (error) {
-        throw error; //pass it up
-    } finally {
-        con.release();
-    }
-}
-
-export async function getPromotionHistorySummary(page: number = 1, pageSize: number = 15): Promise<PagedData<PromotionSummary>> {
-
-    const offset = (page - 1) * pageSize;
-
-    let sql = `SELECT
-                    DATE(start_date) AS entry_day
-                FROM
-                    members_ranks
-                WHERE reason = 'Rank Change'
-                GROUP BY
-                    entry_day
-                ORDER BY
-                    entry_day DESC
-                LIMIT ? OFFSET ?;`
-
-    let promoList: PromotionSummary[] = await pool.query(sql, [pageSize, offset]) as PromotionSummary[];
-
-    let loaCount = Number((await pool.query(`SELECT
-                                                COUNT(*) AS total_grouped_days_count
-                                            FROM
-                                                (
-                                                    SELECT DISTINCT DATE(start_date)
-                                                    FROM members_ranks
-                                                    WHERE reason = 'Rank Change'
-                                                ) AS grouped_days;`))[0]);
-
-    console.log(loaCount);
-    let pageCount = loaCount / pageSize;
-
-    let output: PagedData<PromotionSummary> = { data: promoList, pagination: { page: page, pageSize: pageSize, total: loaCount, totalPages: pageCount } }
-    return output;
-}
-
-export async function getPromotionsOnDay(day: Date): Promise<PromotionDetails[]> {
-
-    const dayString = toDateTime(day);
-
-    // SQL query to fetch all records from members_unit for the specified day
-    let sql = `
-        SELECT 
-        mr.member_id,
-            mr.created_by_id,
-            r.short_name
-        FROM members_ranks AS mr
-            LEFT JOIN ranks AS r ON r.id = mr.rank_id
-        WHERE DATE(mr.start_date) = ? && mr.reason = 'Rank Change'
-        ORDER BY mr.start_date ASC;
-    `;
-
-    let batchPromotion = await pool.query(sql, [dayString]) as PromotionDetails[];
-
-    return batchPromotion;
-}

api/src/services/rolesService.ts

@@ -1,8 +1,8 @@
+import { MemberLight } from '@app/shared/types/member';
 import pool from '../db';
-import { Role } from '@app/shared/types/roles'
+import { Role, RoleSummary } from '@app/shared/types/roles'
 
 export async function assignUserGroup(userID: number, roleID: number) {
-
     const sql = `INSERT INTO members_roles (member_id, role_id) VALUES (?, ?);`;
     const params = [userID, roleID];
 
@@ -24,4 +24,34 @@ export async function getUserRoles(userID: number): Promise<Role[]> {
         WHERE mr.member_id = ?;`;
 
     return await pool.query(sql, [userID]);
+}
+
+export async function getRole(id: number): Promise<Role> {
+    let res = await pool.query(`SELECT * FROM roles WHERE id = ?`, [id])
+    return res[0] as Role;
+}
+
+export async function getAllRoles(): Promise<RoleSummary> {
+    return await pool.query(`SELECT id, name, color FROM roles`);
+}
+
+export async function getUsersWithRole(roleId: number): Promise<MemberLight[]> {
+    const out = await pool.query(
+        `
+    SELECT
+      m.member_id   AS id,
+      m.member_name AS username,
+      m.displayName,
+      u.color
+    FROM members_roles mr
+    JOIN view_member_rank_unit_status_latest m
+      ON m.member_id = mr.member_id
+    LEFT JOIN units u
+      ON u.name = m.unit
+    WHERE mr.role_id = ?
+    `,
+        [roleId]
+    )
+
+    return out as MemberLight[]
 }

shared/schemas/promotionSchema.ts

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

shared/types/member.ts

@@ -34,6 +34,11 @@ export interface MemberLight {
     color: string
 }
 
+export interface MemberCardDetails {
+    member: Member;
+    roles: Role[];
+}
+
 export interface myData {
     member: Member;
     LOAs: LOARequest[];

shared/types/rank.ts

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

shared/types/roles.ts

@@ -1,6 +1,14 @@
+import { MemberLight } from "./member";
+
 export interface Role {
     id: number;
     name: string;
     color?: string;
     description?: string;
+}
+
+export interface RoleSummary {
+    id: number;
+    name: string;
+    color?: string;
 }

ui/src/api/member.ts

@@ -1,4 +1,4 @@
-import { memberSettings, Member, MemberLight } from "@shared/types/member";
+import { memberSettings, Member, MemberLight, MemberCardDetails } from "@shared/types/member";
 
 //  @ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
@@ -71,7 +71,7 @@ export async function getLightMembers(ids: number[]): Promise<MemberLight[]> {
     return response.json();
 }
 
-export async function getFullMembers(ids: number[]): Promise<Member[]> {
+export async function getFullMembers(ids: number[]): Promise<MemberCardDetails[]> {
 
     if (ids.length === 0) return [];
 

ui/src/api/rank.ts

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

ui/src/api/roles.ts

@@ -1,10 +1,5 @@
-export type Role = {
-    id: number;
-    name: string;
-    color: string;
-    description: string | null;
-    members: any[];
-};
+import { Member, MemberLight } from "@shared/types/member";
+import { Role } from "@shared/types/roles";
 
 //  @ts-ignore
 const addr = import.meta.env.VITE_APIHOST;
@@ -22,6 +17,30 @@ export async function getRoles(): Promise<Role[]> {
     }
 }
 
+export async function getRoleDetails(id: number): Promise<Role> {
+    const res = await fetch(`${addr}/roles/${id}`, {
+        credentials: 'include',
+    })
+
+    if (res.ok) {
+        return res.json() as Promise<Role>;
+    } else {
+        throw new Error("Could not load role");
+    }
+}
+
+export async function getRoleMembers(id: number): Promise<MemberLight[]> {
+    const res = await fetch(`${addr}/roles/${id}/members`, {
+        credentials: 'include',
+    })
+
+    if (res.ok) {
+        return res.json();
+    } else {
+        throw new Error("Could not load members");
+    }
+}
+
 export async function createRole(name: string, color: string, description: string | null): Promise<Role | null> {
     const res = await fetch(`${addr}/roles`, {
         method: "POST",

ui/src/components/members/MemberCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useMemberDirectory } from '@/stores/memberDirectory';
 import { ref, onMounted, computed } from 'vue';
-import { Member, type MemberLight } from '@shared/types/member'
+import { Member, MemberCardDetails, type MemberLight } from '@shared/types/member'
 import Popover from '../ui/popover/Popover.vue';
 import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
 import PopoverContent from '../ui/popover/PopoverContent.vue';
@@ -9,6 +9,7 @@ import { cn } from '@/lib/utils.js'
 import { watch } from 'vue';
 import { format } from 'path';
 import Spinner from '../ui/spinner/Spinner.vue';
+import { Dot } from 'lucide-vue-next';
 
 
 // Props
@@ -21,7 +22,7 @@ const props = defineProps({
 
 // Local state
 const memberLight = ref<MemberLight | null>(null);
-const memberFull = ref<Member | null>(null)
+const memberFull = ref<MemberCardDetails | null>(null)
 const loadingFull = ref(false)
 const membersStore = useMemberDirectory();
 
@@ -63,7 +64,7 @@ const hasFullInfo = computed(() => {
     if (!memberFull.value) return false
 
     // check if any field has a value
-    const { rank, unit, status } = memberFull.value
+    const { rank, unit, status } = memberFull.value.member
     return !!(rank || unit || status)
 })
 
@@ -90,7 +91,7 @@ function formatDate(date: Date): string {
                 {{ displayName }}
             </p>
         </PopoverTrigger>
-        <PopoverContent class="w-72 p-0 overflow-hidden">
+        <PopoverContent class="w-80 p-0 overflow-hidden">
             <!-- Loading -->
             <div v-if="loadingFull" class="p-4 text-sm text-muted-foreground mx-auto flex justify-center my-5">
                 <Spinner></Spinner>
@@ -114,26 +115,36 @@ function formatDate(date: Date): string {
                 <div class="p-4 space-y-3 text-sm">
                     <!-- Full info -->
                     <template v-if="hasFullInfo">
-                        <div v-if="memberFull.loa_until"
+                        <div v-if="memberFull.member.loa_until"
                             class=" rounded-md text-center bg-yellow-500/10 px-2 py-1 text-xs text-yellow-600">
-                            On Leave of Absence until {{ formatDate(memberFull.loa_until) }}
+                            On Leave of Absence until {{ formatDate(memberFull.member.loa_until) }}
                         </div>
 
-                        <div v-if="memberFull.rank" class="flex justify-between">
+
+                        <div v-if="memberFull.member.rank" class="flex justify-between">
                             <span class="text-muted-foreground">Rank</span>
-                            <span class="font-medium">{{ memberFull.rank }}</span>
+                            <span class="font-medium">{{ memberFull.member.rank }}</span>
                         </div>
 
-                        <div v-if="memberFull.unit" class="flex justify-between">
+                        <div v-if="memberFull.member.unit" class="flex justify-between items-center">
                             <span class="text-muted-foreground">Unit</span>
-                            <span class="font-medium">{{ memberFull.unit }}</span>
+                            <span class="font-medium flex items-center gap-2">
+                                <span class="w-2 h-2 rounded-full" :style="{ backgroundColor: textColor }"></span>
+                                {{ memberFull.member.unit }}
+                            </span>
                         </div>
 
-                        <div v-if="memberFull.status" class="flex justify-between">
+                        <div v-if="memberFull.member.status" class="flex justify-between">
                             <span class="text-muted-foreground">Status</span>
-                            <span class="font-medium">{{ memberFull.status }}</span>
+                            <span class="font-medium">{{ memberFull.member.status }}</span>
                         </div>
 
+
+                        <div class="flex gap-2 flex-wrap mt-6">
+                            <div v-for="role in memberFull.roles" class="border rounded-full px-3 text-nowrap">
+                                {{ role.name }}
+                            </div>
+                        </div>
                     </template>
 
                     <!-- No info fallback -->

ui/src/components/promotions/promotionForm.vue

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

ui/src/components/promotions/promotionList.vue

@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import { pagination } from '@shared/types/pagination';
-import { PromotionSummary } from '@shared/types/rank';
-import { onMounted, ref } from 'vue';
-import {
-    Pagination,
-    PaginationContent,
-    PaginationEllipsis,
-    PaginationItem,
-    PaginationNext,
-    PaginationPrevious,
-} from '@/components/ui/pagination'
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table"
-import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-import Button from '../ui/button/Button.vue';
-import { getPromoHistory } from '@/api/rank';
-import Spinner from '../ui/spinner/Spinner.vue';
-import PromotionListDay from './promotionListDay.vue';
-
-
-const loading = ref(true);
-const batchList = ref<PromotionSummary[]>();
-
-onMounted(async () => {
-    await loadHistory();
-    loading.value = false;
-})
-
-async function loadHistory() {
-    let d = await getPromoHistory(pageNum.value, pageSize.value);
-    batchList.value = d.data;
-    pageData.value = d.pagination;
-}
-
-const expanded = ref<number | null>(null);
-const hoverID = ref<number | null>(null);
-
-const pageNum = ref<number>(1);
-const pageData = ref<pagination>();
-
-const pageSize = ref<number>(15)
-const pageSizeOptions = [10, 15, 30]
-
-function setPageSize(size: number) {
-    pageSize.value = size
-    pageNum.value = 1;
-    loadHistory();
-}
-
-function setPage(pagenum: number) {
-    pageNum.value = pagenum;
-    loadHistory();
-}
-
-function formatDate(date: Date): string {
-    if (!date) return "";
-    date = typeof date === 'string' ? new Date(date) : date;
-    return date.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-    });
-}
-</script>
-<template>
-    <div class="flex flex-col max-w-7xl w-full">
-        <p class="scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
-            Promotion History
-        </p>
-        <div class="w-full mx-auto">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Date</TableHead>
-                        <TableHead></TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    <template v-for="(batch, index) in batchList" :key="index">
-                        <TableRow class="hover:bg-muted/50 cursor-pointer" @click="expanded = index"
-                            @mouseenter="hoverID = index" @mouseleave="hoverID = null" :class="{
-                                'border-b-0': expanded === index,
-                                'bg-muted/50': hoverID === index
-                            }">
-                            <TableCell class="font-medium">
-                                {{ formatDate(new Date(batch.entry_day)) }}
-                            </TableCell>
-                            <TableCell class="text-right">
-                                <Button v-if="expanded === index" @click.stop="expanded = null" size="icon"
-                                    variant="ghost">
-                                    <ChevronUp class="size-6" />
-                                </Button>
-                                <Button v-else @click.stop="expanded = index" size="icon" variant="ghost">
-                                    <ChevronDown class="size-6" />
-                                </Button>
-                            </TableCell>
-                        </TableRow>
-                        <TableRow v-if="expanded === index" @mouseenter="hoverID = index" @mouseleave="hoverID = null"
-                            :class="{ 'bg-muted/50 border-t-0': hoverID === index }">
-                            <TableCell :colspan="8" class="p-0">
-                                <div class="w-full p-2 mb-6 space-y-3">
-                                    <PromotionListDay :date="new Date(batch.entry_day)"></PromotionListDay>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-
-                    </template>
-                </TableBody>
-            </Table>
-            <div v-if="loading" class="w-full flex mx-auto justify-center my-15">
-                <Spinner class="size-7"></Spinner>
-            </div>
-            <div class="mt-5 flex justify-between">
-                <div></div>
-                <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
-                    :default-page="2" :page="pageNum" @update:page="setPage">
-                    <PaginationContent v-slot="{ items }">
-                        <PaginationPrevious />
-                        <template v-for="(item, index) in items" :key="index">
-                            <PaginationItem v-if="item.type === 'page'" :value="item.value"
-                                :is-active="item.value === page">
-                                {{ item.value }}
-                            </PaginationItem>
-                        </template>
-                        <PaginationEllipsis :index="4" />
-                        <PaginationNext />
-                    </PaginationContent>
-                </Pagination>
-                <div class="flex items-center gap-3 text-sm">
-                    <p class="text-muted-foreground text-nowrap">Per page:</p>
-
-                    <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
-                        class="px-2 py-1 rounded transition-colors" :class="{
-                            'bg-muted font-semibold': pageSize === size,
-                            'hover:bg-muted/50': pageSize !== size
-                        }">
-                        {{ size }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

ui/src/components/promotions/promotionListDay.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { getPromotionsOnDay } from '@/api/rank';
-import { onMounted, ref } from 'vue';
-import MemberCard from '../members/MemberCard.vue';
-import Spinner from '../ui/spinner/Spinner.vue';
-import { PromotionDetails } from '@shared/types/rank';
-
-
-const props = defineProps<{
-    date: Date
-}>()
-
-const promoList = ref<PromotionDetails[]>();
-const loading = ref(true);
-
-onMounted(async () => {
-    promoList.value = await getPromotionsOnDay(props.date);
-    loading.value = false;
-})
-
-</script>
-
-<template>
-    <div class="overflow-x-auto">
-        <table v-if="!loading" class="min-w-full text-left border-collapse">
-            <thead>
-                <tr class="border-b-2 border-gray-200 bg-white/10">
-                    <th class="px-4 py-3 text-sm font-semibold">Member</th>
-                    <th class="px-4 py-3 text-sm font-semibold">Rank</th>
-                    <th class="px-4 py-3 text-sm font-semibold text-right">Approved By</th>
-                </tr>
-            </thead>
-
-            <tbody>
-                <tr v-for="p in promoList" :key="p.member_id" class="border-b transition-colors">
-                    <td class="px-2 py-2">
-                        <MemberCard :member-id="p.member_id" />
-                    </td>
-                    <td class="px-4 py-2 text-sm">
-                        {{ p.short_name }}
-                    </td>
-                    <td class="px-2 py-2 text-sm text-right">
-                        <MemberCard :member-id="p.created_by_id" />
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <div v-else class="overflow-hidden mx-auto flex w-full">
-            <Spinner class="size-7"></Spinner>
-        </div>
-    </div>
-</template>

ui/src/components/roles/addMember.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { addMemberToRole, removeMemberFromRole } from '@/api/roles';
+import { MemberLight } from '@shared/types/member';
+import { Role } from '@shared/types/roles';
+import { computed, ref } from 'vue';
+import Dialog from '../ui/dialog/Dialog.vue'
+import DialogContent from '../ui/dialog/DialogContent.vue'
+import DialogHeader from '../ui/dialog/DialogHeader.vue'
+import DialogTitle from '../ui/dialog/DialogTitle.vue'
+import DialogDescription from '../ui/dialog/DialogDescription.vue'
+import DialogFooter from '../ui/dialog/DialogFooter.vue'
+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';
+
+const props = defineProps<{
+    allMembers: MemberLight[],
+    role: Role
+}>()
+
+const emit = defineEmits(['submit'])
+
+const showAddMemberDialog = ref(false)
+const memberToAdd = ref<MemberLight | null>(null)
+const searchQuery = ref('')
+
+const filteredMembers = computed(() => {
+    const q = searchQuery.value.trim().toLowerCase()
+    if (!q) return props.allMembers
+
+    return props.allMembers.filter(m =>
+        m.displayName?.toLowerCase().includes(q) ||
+        m.username?.toLowerCase().includes(q)
+    )
+})
+
+defineExpose({
+    openDialog,
+})
+
+function openDialog() {
+    showAddMemberDialog.value = true;
+}
+
+
+async function handleAddMember() {
+    //guard
+    if (memberToAdd.value == null)
+        return;
+
+    await addMemberToRole(memberToAdd.value.id, props.role.id);
+    emit('submit');
+    showAddMemberDialog.value = false;
+}
+
+</script>
+
+<template>
+    <Dialog v-model:open="showAddMemberDialog">
+        <DialogContent class="sm:max-w-md">
+            <DialogHeader>
+                <DialogTitle>Add member to {{ props.role?.name }}</DialogTitle>
+                <DialogDescription>
+                    Search for a member to add to this group.
+                </DialogDescription>
+            </DialogHeader>
+
+            <!-- Search -->
+            <InputGroup>
+                <InputGroupAddon>
+                    <SearchIcon class="h-4 w-4 text-muted-foreground" />
+                </InputGroupAddon>
+                <input v-model="searchQuery" type="text" placeholder="Search members…"
+                    class="flex-1 bg-transparent outline-none text-sm" />
+            </InputGroup>
+
+            <!-- Results -->
+            <div class="mt-3 h-64 overflow-y-auto scrollbar-themed rounded-md border">
+                <ul class="divide-y">
+                    <li v-for="member in filteredMembers" :key="member.id" @click="memberToAdd = member"
+                        class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-muted"
+                        :class="memberToAdd?.id === member.id && 'bg-muted'">
+                        <span>{{ member.displayName || member.username }}</span>
+
+                        <span v-if="memberToAdd?.id === member.id" class="text-xs text-muted-foreground">
+                            Selected
+                        </span>
+                    </li>
+                </ul>
+            </div>
+
+            <DialogFooter>
+                <Button variant="secondary" @click="showAddMemberDialog = false">
+                    Cancel
+                </Button>
+                <Button :disabled="!memberToAdd" @click="handleAddMember">
+                    Add
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>

ui/src/components/roles/roleView.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { addMemberToRole, getRoleDetails, getRoleMembers, removeMemberFromRole } from '@/api/roles'
+import type { MemberLight } from '@shared/types/member'
+import type { Role } from '@shared/types/roles'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import Button from '@/components/ui/button/Button.vue'
+import Separator from '@/components/ui/separator/Separator.vue'
+import { Plus, SearchIcon, X } from 'lucide-vue-next'
+import MemberCard from '../members/MemberCard.vue'
+import InputGroup from '../ui/input-group/InputGroup.vue'
+import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue'
+
+import AddMember from './addMember.vue'
+
+const route = useRoute()
+
+const roleData = ref<Role | null>(null)
+const roleMembers = ref<MemberLight[]>([])
+const loading = ref(true)
+
+async function loadRole() {
+    const id = Number(route.params.id)
+    roleData.value = await getRoleDetails(id)
+    roleMembers.value = await getRoleMembers(id)
+
+    loading.value = false
+}
+
+const searchQuery = ref('')
+const roleMembersFiltered = computed(() => {
+    if (!searchQuery.value) return roleMembers.value
+    const query = searchQuery.value.toLowerCase()
+    return roleMembers.value.filter(member =>
+        member.displayName?.toLowerCase().includes(query) ||
+        member.username?.toLowerCase().includes(query)
+    )
+})
+
+const props = defineProps<{
+    allMembers: MemberLight[]
+}>()
+
+
+const availableMembers = computed(() =>
+    props.allMembers.filter(
+        m => !roleMembers.value.some(rm => rm.id === m.id)
+    )
+)
+
+async function handleRemoveMember(memberId: number) {
+    await removeMemberFromRole(memberId, Number(route.params.id));
+    await loadRole();
+}
+
+const addMemberRef = ref<InstanceType<typeof AddMember> | null>(null)
+
+onMounted(loadRole)
+watch(() => route.params.id, loadRole)
+</script>
+
+<template>
+    <AddMember ref="addMemberRef" :all-members="availableMembers" :role="roleData" @submit="loadRole"></AddMember>
+    <div class="h-full px-6 py-2">
+        <!-- Loading -->
+        <div v-if="loading" class="text-muted-foreground">
+            Loading group…
+        </div>
+
+        <!-- No role selected -->
+        <div v-else-if="!roleData" class="text-muted-foreground">
+            Select a group to view details
+        </div>
+
+        <!-- Role details -->
+        <div v-else class="space-y-6">
+            <!-- Header -->
+            <div class="flex items-start justify-between">
+                <div class="space-y-1">
+                    <div class="flex items-center gap-3">
+                        <span class="h-3 w-3 rounded-full" :style="{ backgroundColor: roleData.color }" />
+                        <h2 class="text-2xl font-semibold tracking-tight">
+                            {{ roleData.name }}
+                        </h2>
+                    </div>
+
+                    <p class="text-sm text-muted-foreground">
+                        {{ roleData.description || 'No description provided.' }}
+                    </p>
+                </div>
+
+                <!-- <Button variant="ghost" size="sm" class="text-destructive">
+                    Delete
+                </Button> -->
+            </div>
+
+            <Separator />
+
+            <!-- Members -->
+            <div class="space-y-3">
+                <div class="flex items-center justify-between">
+                    <h3 class="text-sm font-medium">
+                        Members ({{ roleMembers.length }})
+                    </h3>
+                    <div class="flex items-center gap-5">
+                        <InputGroup class="w-64">
+                            <InputGroupAddon>
+                                <SearchIcon class="h-4 w-4 text-muted-foreground" />
+                            </InputGroupAddon>
+
+                            <input v-model="searchQuery" type="text" placeholder="Search members…"
+                                class="flex-1 bg-transparent outline-none text-sm" />
+                        </InputGroup>
+                        <Button variant="secondary" @click="addMemberRef.openDialog()">
+                            <Plus class="mr-2 h-4 w-4" />
+                            Add Member
+                        </Button>
+                    </div>
+                </div>
+
+                <!-- Empty state -->
+                <div v-if="roleMembers.length === 0" class="text-sm text-muted-foreground py-6 text-center">
+                    No members in this group yet.
+                </div>
+
+                <div class="overflow-y-auto max-h-[55dvh] pr-1 scrollbar-themed">
+                    <ul class="space-y-1">
+                        <li v-for="member in roleMembersFiltered" :key="member.id"
+                            class="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted/50">
+                            <MemberCard :member-id="member.id" />
+
+                            <Button variant="ghost" size="icon" class="text-muted-foreground"
+                                @click="handleRemoveMember(member.id)">
+                                <X class="h-4 w-4" />
+                            </Button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

ui/src/components/ui/input-group/index.js

@@ -2,10 +2,10 @@ import { cva } from "class-variance-authority";
 
 export { default as InputGroup } from "./InputGroup.vue";
 export { default as InputGroupAddon } from "./InputGroupAddon.vue";
-export { default as InputGroupButton } from "./InputGroupButton.vue";
-export { default as InputGroupInput } from "./InputGroupInput.vue";
-export { default as InputGroupText } from "./InputGroupText.vue";
-export { default as InputGroupTextarea } from "./InputGroupTextarea.vue";
+// export { default as InputGroupButton } from "./InputGroupButton.vue";
+// export { default as InputGroupInput } from "./InputGroupInput.vue";
+// export { default as InputGroupText } from "./InputGroupText.vue";
+// export { default as InputGroupTextarea } from "./InputGroupTextarea.vue";
 
 export const inputGroupAddonVariants = cva(
   "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",

ui/src/components/ui/input/Input.vue

@@ -22,7 +22,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     data-slot="input"
     :class="
       cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         props.class,

ui/src/pages/ManageRoles.vue

@@ -9,7 +9,7 @@ import {
     CardTitle,
 } from '@/components/ui/card'
 import { onMounted, ref, computed, reactive, watch } from 'vue';
-import { addMemberToRole, createRole, deleteRole, getRoles, removeMemberFromRole, Role } from '@/api/roles';
+import { addMemberToRole, createRole, deleteRole, getRoles, removeMemberFromRole } from '@/api/roles';
 import Badge from '@/components/ui/badge/Badge.vue';
 import {
     Dialog,
@@ -34,8 +34,11 @@ import { Plus, X } from 'lucide-vue-next';
 import Separator from '@/components/ui/separator/Separator.vue';
 import Input from '@/components/ui/input/Input.vue';
 import Label from '@/components/ui/label/Label.vue';
-import { getMembers } from '@/api/member';
-import { Member } from '@shared/types/member';
+import { getAllLightMembers, getMembers } from '@/api/member';
+import { Member, MemberLight } from '@shared/types/member';
+import { Role } from '@shared/types/roles';
+import RoleView from '@/components/roles/roleView.vue';
+import { useRoute } from 'vue-router';
 
 const roles = ref<Role[]>([])
 const activeRole = ref<Role | null>(null)
@@ -43,16 +46,9 @@ const showDialog = ref(false);
 const showCreateGroupDialog = ref(false);
 const addingMember = ref(false);
 const memberToAdd = ref<Member | null>(null);
+const route = useRoute();
 
-const allMembers = ref<Member[]>([])
-const availableMembers = computed(() => {
-    if (!activeRole.value) return [];
-    return allMembers.value.filter(
-        member => !activeRole.value!.members.some(
-            roleMember => roleMember.member_id === member.member_id
-        )
-    );
-})
+const allMembers = ref<MemberLight[]>([])
 
 type RoleDraft = {
     name: string
@@ -117,141 +113,40 @@ async function handleCreateGroup() {
     }
 }
 
-async function handleAddMember() {
-    //guard
-    if (memberToAdd.value == null)
-        return;
 
-    await addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
-    roles.value = await getRoles();
-}
-
-async function handleRemoveMember(memberId: number) {
-    removeMemberFromRole(memberId, activeRole.value.id);
-    roles.value = await getRoles();
-}
-
-async function handleDeleteRole() {
-    await deleteRole(activeRole.value.id);
-}
 
 onMounted(async () => {
     roles.value = await getRoles();
-    allMembers.value = await getMembers();
+    allMembers.value = await getAllLightMembers();
 })
 </script>
 <template>
-    <div>
-        <Dialog v-model:open="showDialog"
-            v-on:update:open="() => { showDialog = false; addingMember = false; memberToAdd = null; }">
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle class="flex justify-between items-center">{{ activeRole.name }}
-                        <Badge class="mr-5">
-                            {{ activeRole.color }}
-                        </Badge>
-                    </DialogTitle>
-                    <DialogDescription>
-                        {{ activeRole.description }}
-                    </DialogDescription>
-                </DialogHeader>
-                <div class="mt-5">
-                    <div class="flex justify-between items-center">
-                        <p>Members with this role</p>
-                    </div>
-                    <Separator class="my-2"></Separator>
-                    <ul class="flex flex-col gap-2">
-                        <li v-for="member in activeRole.members" class="flex justify-between items-center">
-                            <p>{{ member.member_name }}</p>
-                            <X class="text-muted-foreground" @click="handleRemoveMember(member.member_id)"></X>
-                        </li>
-                        <div v-if="!addingMember" @click="addingMember = true"
-                            class="flex gap-2 text-muted-foreground hover:text-primary hover:cursor-pointer">
-                            <Plus :size="20"></Plus>Add Member
-                        </div>
-                        <div v-else class="flex gap-2">
-                            <Combobox v-model="memberToAdd" by="value">
-                                <ComboboxAnchor>
-                                    <div class="relative w-full max-w-sm items-center">
-                                        <ComboboxInput class="pl-9"
-                                            :display-value="(member: Member) => member?.member_name"
-                                            placeholder="Search Members" />
-                                    </div>
-                                </ComboboxAnchor>
-                                <ComboboxList>
-                                    <ComboboxEmpty>
-                                        No Members.
-                                    </ComboboxEmpty>
-                                    <ComboboxGroup>
-                                        <ComboboxItem v-for="member in availableMembers" :key="member.member_id"
-                                            :value="member">
-                                            {{ member.member_name }}
-                                        </ComboboxItem>
-                                    </ComboboxGroup>
-                                </ComboboxList>
-                            </Combobox>
-                            <Button variant="secondary" @click="addingMember = false">Cancel</Button>
-                            <Button @click="handleAddMember">Save</Button>
-                        </div>
-                    </ul>
+    <div class="max-w-7xl mx-auto w-full my-[0.2dvh] h-[0.8dvh]">
+        <div class="flex items-center justify-between">
+            <p class="scroll-m-20 text-2xl font-semibold tracking-tight my-5">Role Management</p>
+        </div>
+        <div class="grid grid-cols-[minmax(400px,280px)_1fr] gap-5">
+            <div class="w-full pr-5 border-r">
+                <div class="space-y-1">
+                    <p class="px-3 py-2 text-xs font-medium text-muted-foreground uppercase">
+                        Roles
+                    </p>
+
+                    <button v-for="r in roles" :key="r.id" @click="$router.push(`/administration/roles/${r.id}`)"
+                        :class="[
+                            'flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors cursor-pointer',
+                            Number(route.params.id) == r.id
+                                ? 'bg-muted font-medium'
+                                : 'hover:bg-muted/50'
+                        ]">
+                        <span class="h-2 w-2 rounded-full shrink-0" :style="{ backgroundColor: r.color }" />
+                        <span class="truncate">{{ r.name }}</span>
+                    </button>
                 </div>
-                <DialogFooter>
-                    <!-- <Button @click="handleDeleteRole">Delete Group</Button> -->
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-        <Dialog v-model:open="showCreateGroupDialog" v-on:update:open="() => { showCreateGroupDialog = false; }">
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle class="flex justify-between items-center">Create Group</DialogTitle>
-                    <DialogDescription>Create a new group of members</DialogDescription>
-                </DialogHeader>
-                <form class="mt-5 space-y-5" @submit.prevent="handleCreateGroup">
-                    <div>
-                        <Label class="mb-2 block" for="group-name">Group Name</Label>
-                        <Input id="group-name" v-model="roleDraft.name" :aria-invalid="!!draftErrors.name" />
-                        <p v-if="draftErrors.name" class="text-destructive text-sm mt-1">{{ draftErrors.name }}</p>
-                    </div>
-                    <div>
-                        <Label class="mb-2 block" for="group-desc">Description</Label>
-                        <Input id="group-desc" v-model="roleDraft.description" />
-                    </div>
-                    <div>
-                        <Label class="mb-2 block" for="group-color">Color</Label>
-                        <Input id="group-color" type="color" v-model="roleDraft.color" />
-                    </div>
-                    <DialogFooter>
-                        <Button type="button" variant="secondary" @click="showCreateGroupDialog = false"
-                            :disabled="creating">
-                            Cancel
-                        </Button>
-                        <Button type="submit" :disabled="creating">
-                            {{ creating ? "Saving..." : "Save" }}
-                        </Button>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
-        <div class="max-w-5xl mx-auto">
-            <div class="flex items-center justify-between my-4">
-                <p>Groups</p>
-                <!-- <Button @click="showCreateGroupDialog = true">+ Add New Group</Button> -->
+
             </div>
-            <div class="grid grid-cols-3 gap-5">
-                <Card v-for="value in roles" :key="value.id" @click="activeRole = value; showDialog = true"
-                    class="cursor-pointer">
-                    <CardHeader>
-                        <CardTitle class="flex justify-between items-center">{{ value.name }}
-                            <Badge>
-                                {{ value.color }}
-                            </Badge>
-                        </CardTitle>
-                        <CardDescription>{{ value.description }}</CardDescription>
-                    </CardHeader>
-                    <CardFooter>
-                        <p class="text-muted-foreground">{{ value.members.length }} members</p>
-                    </CardFooter>
-                </Card>
+            <div>
+                <RoleView :all-members="allMembers"></RoleView>
             </div>
         </div>
     </div>

ui/src/pages/RankChange.vue

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

ui/src/router/index.js

@@ -40,7 +40,8 @@ const router = createRouter({
         { path: 'applications/:id', component: () => import('@/pages/Application.vue') },
         { path: 'transfer', component: () => import('@/pages/ManageTransfers.vue') },
         { path: 'loa', component: () => import('@/pages/ManageLOA.vue') },
-        { path: 'roles', component: () => import('@/pages/ManageRoles.vue') }
+        { path: 'roles', component: () => import('@/pages/ManageRoles.vue') },
+        { path: 'roles/:id', component: () => import('@/pages/ManageRoles.vue') }
       ]
     },
 

ui/src/stores/memberDirectory.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import type { MemberLight, Member } from "@shared/types/member"
+import type { MemberLight, Member, MemberCardDetails } from "@shared/types/member"
 import { getLightMembers, getFullMembers } from "@/api/member"
 import { reactive, ref } from "vue"
 import { resolve } from "path"
@@ -7,7 +7,7 @@ import { rejects } from "assert"
 
 export const useMemberDirectory = defineStore('memberDirectory', () => {
     const light = reactive<Record<number, MemberLight>>({});
-    const full = reactive<Record<number, Member>>({})
+    const full = reactive<Record<number, MemberCardDetails>>({})
 
     function getLight(id: number): Promise<MemberLight> {
         if (light[id]) return Promise.resolve(light[id]);
@@ -24,7 +24,7 @@ export const useMemberDirectory = defineStore('memberDirectory', () => {
         })
     }
 
-    function getFull(id: number): Promise<Member> {
+    function getFull(id: number): Promise<MemberCardDetails> {
         if (full[id]) return Promise.resolve(full[id])
 
         if (!fullWaiters.has(id)) {
@@ -34,7 +34,7 @@ export const useMemberDirectory = defineStore('memberDirectory', () => {
 
         scheduleBatch()
 
-        return new Promise<Member>((resolve, reject) => {
+        return new Promise<MemberCardDetails>((resolve, reject) => {
             fullWaiters.get(id)!.push({ resolve, reject })
         })
     }
@@ -50,7 +50,7 @@ export const useMemberDirectory = defineStore('memberDirectory', () => {
 
     // promises
     const lightWaiters = new Map<number, Array<{ resolve: (m: MemberLight) => void; reject: (e: any) => void }>>()
-    const fullWaiters = new Map<number, Array<{ resolve: (m: Member) => void; reject: (e: any) => void }>>()
+    const fullWaiters = new Map<number, Array<{ resolve: (m: MemberCardDetails) => void; reject: (e: any) => void }>>()
 
     let batchTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -105,12 +105,13 @@ export const useMemberDirectory = defineStore('memberDirectory', () => {
                 try {
                     const res = await getFullMembers(ids);
                     for (const m of res) {
-                        full[m.member_id] = m;
+                        console.log(m)
+                        full[m.member.member_id] = m;
 
-                        const waiters = fullWaiters.get(m.member_id);
+                        const waiters = fullWaiters.get(m.member.member_id);
                         if (waiters) {
                             for (const w of waiters) w.resolve(m)
-                            fullWaiters.delete(m.member_id);
+                            fullWaiters.delete(m.member.member_id);
                         }
                     }