first pass of new UI

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/roles/roleView.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { getRoleDetails, getRoleMembers } from '@/api/roles'
+import type { MemberLight } from '@shared/types/member'
+import type { Role } from '@shared/types/roles'
+import { 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, X } from 'lucide-vue-next'
+import MemberCard from '../members/MemberCard.vue'
+
+const route = useRoute()
+
+const roleData = ref<Role | null>(null)
+const roleMembers = ref<MemberLight[]>([])
+const loading = ref(true)
+
+async function loadRole() {
+    loading.value = true
+    const id = Number(route.params.id)
+    console.log(id);
+    roleData.value = await getRoleDetails(id)
+    roleMembers.value = await getRoleMembers(id)
+
+    loading.value = false
+}
+
+// const availableMembers = computed(() => {
+//     if (!activeRole.value) return [];
+//     return allMembers.value.filter(
+//         member => !activeRole.value!.members.some(
+//             roleMember => roleMember.member_id === member.member_id
+//         )
+//     );
+// })
+
+
+onMounted(loadRole)
+watch(() => route.params.id, loadRole)
+</script>
+
+<template>
+    <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>
+
+                    <Button size="sm" variant="secondary">
+                        <Plus class="mr-2 h-4 w-4" />
+                        Add Member
+                    </Button>
+                </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 pr-1">
+                    <ul class="space-y-1">
+                        <li v-for="member in roleMembers" :key="member.id"
+                            class="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted">
+                            <MemberCard :member-id="member.id" />
+
+                            <Button variant="ghost" size="icon" class="text-muted-foreground hover:text-destructive">
+                                <X class="h-4 w-4" />
+                            </Button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

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
@@ -137,121 +133,36 @@ async function handleDeleteRole() {
 
 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 text-sm 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/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') }
       ]
     },