did a whole ton of shit with calendars and roles system

ui/src/App.vue

@@ -51,9 +51,9 @@ function formatDate(dateStr) {
         <RouterLink to="/">
           <Button variant="link">Home</Button>
         </RouterLink>
-        <!-- <RouterLink to="/">
+        <RouterLink to="/calendar">
           <Button variant="link">Calendar</Button>
-        </RouterLink> -->
+        </RouterLink>
         <RouterLink to="/members">
           <Button variant="link">Members</Button>
         </RouterLink>
@@ -87,6 +87,9 @@ function formatDate(dateStr) {
             <RouterLink to="/administration/applications">
               <Button variant="link">Recruitment</Button>
             </RouterLink>
+            <RouterLink to="/administration/roles">
+              <Button variant="link">Role Management</Button>
+            </RouterLink>
           </PopoverContent>
         </Popover>
 
@@ -112,14 +115,14 @@ function formatDate(dateStr) {
       </div>
     </div>
     <Separator></Separator>
-    <Alert class="m-2 mx-auto w-5xl" variant="info">
+    <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
       <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
         <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
         <Button variant="secondary">End LOA</Button>
       </AlertDescription>
     </Alert>
 
-    <RouterView></RouterView>
+    <RouterView class=""></RouterView>
   </div>
 </template>
 

ui/src/api/roles.ts

@@ -0,0 +1,95 @@
+export type Role = {
+    id: number;
+    name: string;
+    color: string;
+    description: string | null;
+    members: any[];
+};
+
+//  @ts-ignore
+const addr = import.meta.env.VITE_APIHOST;
+
+export async function getRoles(): Promise<Role[]> {
+    const res = await fetch(`${addr}/roles`)
+
+    if (res.ok) {
+        return res.json() as Promise<Role[]>;
+    } else {
+        console.error("Something went wrong approving the application")
+        return [];
+    }
+}
+
+export async function createRole(name: string, color: string, description: string | null): Promise<Role | null> {
+    const res = await fetch(`${addr}/roles`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            name,
+            color,
+            description
+        })
+    });
+
+    if (res.ok) {
+        return res.json() as Promise<Role>;
+    } else {
+        console.error("Something went wrong creating the role");
+        return null;
+    }
+}
+
+export async function addMemberToRole(member_id: number, role_id: number): Promise<boolean> {
+    const res = await fetch(`${addr}/memberRoles`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            member_id,
+            role_id
+        })
+    });
+
+    if (res.ok) {
+        return true;
+    } else {
+        console.error("Something went wrong adding the member to the role");
+        return false;
+    }
+}
+
+export async function removeMemberFromRole(member_id: number, role_id: number): Promise<boolean> {
+    const res = await fetch(`${addr}/memberRoles`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            member_id,
+            role_id
+        })
+    });
+
+    if (res.ok) {
+        return true;
+    } else {
+        console.error("Something went wrong removing the member from the role");
+        return false;
+    }
+}
+
+export async function deleteRole(role_id: number): Promise<boolean> {
+    const res = await fetch(`${addr}/roles/${role_id}`, {
+        method: "DELETE"
+    });
+
+    if (res.ok) {
+        return true;
+    } else {
+        console.error("Something went wrong deleting the role");
+        return false;
+    }
+}

ui/src/pages/Calendar.vue

@@ -0,0 +1,451 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, computed } from 'vue'
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import { X, Clock, MapPin, User, ListTodo } from 'lucide-vue-next'
+
+
+type CalEvent = {
+    id: string
+    title: string
+    start: string
+    end?: string
+    extendedProps?: Record<string, any>
+}
+
+const events = ref<CalEvent[]>([
+    { id: '1', title: 'Squad Training', start: '2025-10-08T19:00:00', extendedProps: { trainer: 'Alex', location: 'Range A', color: '#88C4FF' } },
+    { id: '2', title: 'Ops Briefing', start: '2025-10-09T20:30:00', extendedProps: { owner: 'CO', agenda: ['Weather', 'Route', 'Risks'], color: '#dba42c' } },
+])
+
+const panelOpen = ref(false)
+const activeEvent = ref<CalEvent | null>(null)
+const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
+
+function onEventClick(arg: any) {
+    activeEvent.value = {
+        id: arg.event.id,
+        title: arg.event.title,
+        start: arg.event.startStr,
+        end: arg.event.endStr,
+        extendedProps: arg.event.extendedProps
+    }
+    panelOpen.value = true
+}
+
+// NEW: handle day/time slot clicks to start creating an event
+function onDateClick(arg: { dateStr: string }) {
+    // For now, just open the panel with a draft payload.
+    activeEvent.value = {
+        id: '__draft__',
+        title: 'New event',
+        start: arg.dateStr,
+        extendedProps: { draft: true }
+    }
+    panelOpen.value = true
+}
+
+const calendarOptions = ref({
+    plugins: [dayGridPlugin, interactionPlugin],
+    initialView: 'dayGridMonth',
+    height: '100%',
+    expandRows: true,
+    headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: ''
+    },
+    events,
+    selectable: false,
+    navLinks: false,
+    dateClick: onDateClick,
+    eventClick: onEventClick,
+    editable: true,
+
+    // force block-mode in dayGrid so we can lay it out on one line
+    eventDisplay: 'block',
+
+    // compact time like "19:00"
+    eventTimeFormat: {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true
+    } as const,
+
+    // custom renderer -> one-line pill
+    eventContent(arg) {
+        const ext = arg.event.extendedProps || {}
+        const c = ext.color || arg.backgroundColor || arg.borderColor || ''
+
+        const wrap = document.createElement('div')
+        wrap.className = 'ev-pill'
+        if (c) wrap.style.setProperty('--ev-color', String(c)) // dot color
+
+        const dot = document.createElement('span')
+        dot.className = 'ev-dot'
+
+        const time = document.createElement('span')
+        time.className = 'ev-time'
+        time.textContent = arg.timeText
+
+        const title = document.createElement('span')
+        title.className = 'ev-title'
+        title.textContent = arg.event.title
+
+        wrap.append(dot, time, title)
+        return { domNodes: [wrap] }
+    },
+})
+
+watch(panelOpen, async () => {
+    await nextTick()
+    calendarRef.value?.getApi().updateSize()
+})
+
+
+const startFmt = new Intl.DateTimeFormat(undefined, {
+    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
+    hour: 'numeric', minute: '2-digit'
+})
+const endFmt = new Intl.DateTimeFormat(undefined, {
+    hour: 'numeric', minute: '2-digit'
+})
+
+const whenText = computed(() => {
+    if (!activeEvent.value?.start) return ''
+    const s = new Date(activeEvent.value.start)
+    const e = activeEvent.value?.end ? new Date(activeEvent.value.end) : null
+    return e
+        ? `${startFmt.format(s)} – ${endFmt.format(e)}`
+        : `${startFmt.format(s)}`
+})
+
+const ext = computed(() => activeEvent.value?.extendedProps ?? {})
+</script>
+
+<template>
+    <div class="flex">
+        <div class="flex-1 min-h-0 mt-5">
+            <div class="h-[80vh] min-h-0">
+                <FullCalendar ref="calendarRef" :options="calendarOptions" />
+            </div>
+        </div>
+
+        <aside v-if="panelOpen" class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
+            :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
+            <!-- Header -->
+            <div class="flex items-center justify-between gap-3 border-b px-4 py-3">
+                <h2 class="text-lg font-semibold line-clamp-2">
+                    {{ activeEvent?.title || 'Event' }}
+                </h2>
+                <button
+                    class="inline-flex size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition"
+                    aria-label="Close" @click="panelOpen = false">
+                    <X class="size-4" />
+                </button>
+            </div>
+
+            <!-- Body -->
+            <div class="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-6">
+                <!-- When -->
+                <section v-if="whenText" class="space-y-2">
+                    <div class="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm">
+                        <Clock class="size-4 opacity-80" />
+                        <span class="font-medium">{{ whenText }}</span>
+                    </div>
+                </section>
+
+                <!-- Quick meta chips -->
+                <section class="flex flex-wrap gap-2">
+                    <span v-if="ext.location"
+                        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
+                        <MapPin class="size-3.5 opacity-80" />
+                        <span class="font-medium">{{ ext.location }}</span>
+                    </span>
+                    <span v-if="ext.owner" class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
+                        <User class="size-3.5 opacity-80" />
+                        <span class="font-medium">Owner: {{ ext.owner }}</span>
+                    </span>
+                    <span v-if="ext.trainer"
+                        class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
+                        <User class="size-3.5 opacity-80" />
+                        <span class="font-medium">Trainer: {{ ext.trainer }}</span>
+                    </span>
+                </section>
+
+                <!-- Agenda (special-cased array) -->
+                <section v-if="Array.isArray(ext.agenda) && ext.agenda.length" class="space-y-2">
+                    <div class="flex items-center gap-2 text-sm font-medium">
+                        <ListTodo class="size-4 opacity-80" />
+                        Agenda
+                    </div>
+                    <ul class="space-y-1.5">
+                        <li v-for="(item, i) in ext.agenda" :key="i" class="flex items-start gap-2 text-sm">
+                            <span class="mt-1.5 size-1.5 rounded-full bg-foreground/50"></span>
+                            <span>{{ item }}</span>
+                        </li>
+                    </ul>
+                </section>
+
+                <!-- Generic details (extendedProps minus the ones above) -->
+                <section v-if="ext && Object.keys(ext).length" class="space-y-3">
+                    <div class="text-sm font-medium opacity-80">Details</div>
+                    <dl class="grid grid-cols-1 gap-y-3">
+                        <template v-for="(val, key) in ext" :key="key">
+                            <template v-if="!['agenda', 'owner', 'trainer', 'location'].includes(String(key))">
+                                <div class="grid grid-cols-[120px_1fr] items-start gap-3">
+                                    <dt class="text-xs uppercase tracking-wide opacity-60">{{ key }}</dt>
+                                    <dd class="text-sm">
+                                        <span v-if="Array.isArray(val)">{{ val.join(', ') }}</span>
+                                        <span v-else>{{ String(val) }}</span>
+                                    </dd>
+                                </div>
+                            </template>
+                        </template>
+                    </dl>
+                </section>
+            </div>
+
+            <!-- Footer (optional actions) -->
+            <div class="border-t px-4 py-3 flex items-center justify-end gap-2">
+                <button class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40 transition">
+                    Edit
+                </button>
+                <button
+                    class="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm hover:opacity-90 transition">
+                    Open details
+                </button>
+            </div>
+        </aside>
+
+    </div>
+</template>
+
+<style scoped>
+/* ---------- Optional container "card" around the calendar ---------- */
+:global(.fc) {
+    height: 100% !important;
+}
+
+.calendar-card {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-sm);
+    padding: 12px;
+}
+
+@media (min-width: 640px) {
+    .calendar-card {
+        padding: 16px;
+    }
+}
+
+/* ---------- FullCalendar base ---------- */
+:global(.fc) {
+    color: var(--color-foreground);
+    background: transparent;
+    font-family: var(--font-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    font-size: 0.94rem;
+    /* compact */
+}
+
+:global(.fc .fc-daygrid .fc-scroller) {
+    overflow: visible !important;
+    /* no internal scroll for month grid */
+}
+
+/* Subtle borders everywhere */
+:global(.fc .fc-scrollgrid),
+:global(.fc .fc-scrollgrid td),
+:global(.fc .fc-scrollgrid th) {
+    border-color: var(--color-border);
+}
+
+/* ---------- Built-in toolbar (if you keep it) ---------- */
+:global(.fc .fc-toolbar) {
+    gap: 8px;
+}
+
+:global(.fc .fc-toolbar-title) {
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--color-foreground);
+}
+
+:global(.fc .fc-button) {
+    background: transparent;
+    color: var(--color-foreground);
+    border: 1px solid var(--color-border);
+    border-radius: calc(var(--radius-lg) + 2px);
+    box-shadow: none;
+    padding: 6px 15px;
+    line-height: 1;
+    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+}
+
+:global(.fc .fc-button:hover) {
+    background: color-mix(in oklab, var(--color-foreground) 5%, transparent);
+}
+
+:global(.fc .fc-button:focus) {
+    outline: none;
+    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-ring) 55%, transparent);
+}
+
+:global(.fc .fc-button.fc-button-active) {
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
+    border-color: var(--color-primary);
+}
+
+/* ---------- Month header + day numbers ---------- */
+:global(.fc .fc-col-header-cell-cushion) {
+    color: var(--color-muted-foreground);
+    font-weight: 600;
+    padding: 8px 12px;
+    text-decoration: none;
+}
+
+:global(.fc .fc-daygrid-day-top) {
+    padding: 8px 8px 0 8px;
+}
+
+:global(.fc .fc-daygrid-day-number) {
+    color: var(--color-muted-foreground);
+    font-weight: 600;
+    font-size: 12px;
+    text-decoration: none;
+}
+
+/* Today: soft background + stronger number */
+:global(.fc .fc-day-today) {
+    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+}
+
+:global(.fc .fc-day-today .fc-daygrid-day-number) {
+    color: var(--color-foreground);
+}
+
+/* Hover affordance inside a day cell (very subtle) */
+:global(.fc .fc-daygrid-day:hover) {
+    background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
+}
+
+/* ---------- Event chips (dayGrid) ---------- */
+:global(.fc .fc-daygrid-event) {
+    display: block;
+    border: none;
+    background: transparent;
+    color: var(--color-foreground);
+    border-radius: 4px;
+    padding: 4px 8px;
+    margin: 2px 6px;
+    text-decoration: none;
+    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+:global(.fc .fc-daygrid-event:hover) {
+    background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
+    border-color: color-mix(in oklab, var(--color-foreground) 12%, var(--color-border));
+}
+
+/* One-line custom pill content (our renderer) */
+:global(.ev-pill) {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    color: inherit;
+}
+
+:global(.ev-dot) {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+    background: var(--ev-color, currentColor);
+    margin-right: 4px;
+}
+
+:global(.ev-time) {
+    font-weight: 600;
+    margin-right: 4px;
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+:global(.ev-title) {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* One-line custom pill */
+.ev-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 4px 8px;
+    border-radius: 14px;
+    border: 1px solid var(--color-border);
+    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
+    color: var(--color-foreground);
+    text-decoration: none;
+    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.ev-pill:hover {
+    background: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border));
+}
+
+.ev-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+}
+
+.ev-time {
+    font-weight: 600;
+    margin-right: 4px;
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+.ev-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ev-pill.is-colored {
+    color: var(--color-primary-foreground);
+}
+
+/* --- Replace the default today highlight with a round badge --- */
+:global(.fc .fc-daygrid-day.fc-day-today) {
+    background: transparent;
+}
+
+:global(.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number) {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    background: color-mix(in oklab, var(--color-primary) 100%, transparent);
+    font-weight: 700;
+    text-decoration: none;
+    color: var(--color-primary-foreground);
+}
+
+:global(.fc .fc-daygrid-day:hover) {
+    background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
+}
+</style>

ui/src/pages/ManageRoles.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card'
+import { onMounted, ref, computed, reactive, watch } from 'vue';
+import { addMemberToRole, createRole, deleteRole, getRoles, removeMemberFromRole, Role } from '@/api/roles';
+import Badge from '@/components/ui/badge/Badge.vue';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog'
+
+import {
+    Combobox,
+    ComboboxAnchor,
+    ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxItemIndicator,
+    ComboboxList,
+} from '@/components/ui/combobox'
+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, Member } from '@/api/member';
+
+const roles = ref<Role[]>([])
+const activeRole = ref<Role | null>(null)
+const showDialog = ref(false);
+const showCreateGroupDialog = ref(false);
+const addingMember = ref(false);
+const memberToAdd = ref<Member | null>(null);
+
+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
+        )
+    );
+})
+
+type RoleDraft = {
+    name: string
+    description: string
+    color: string // whatever you store, e.g. a hex string or a semantic tag
+}
+
+const roleDraft = reactive<RoleDraft>({
+    name: "",
+    description: "",
+    color: "", // e.g. "#FF8A00" or "orange"
+})
+
+const draftErrors = reactive<{ name?: string; color?: string }>({})
+const creating = ref(false)
+
+function resetRoleDraft() {
+    roleDraft.name = ""
+    roleDraft.description = ""
+    roleDraft.color = ""
+    draftErrors.name = undefined
+    draftErrors.color = undefined
+}
+
+watch(showCreateGroupDialog, (open) => {
+    if (!open) resetRoleDraft()
+})
+
+
+function validateRoleDraft(): boolean {
+    draftErrors.name = !roleDraft.name.trim() ? "Group name is required" : undefined
+    // If color is required or must be hex, validate it here:
+    if (!roleDraft.color.trim()) {
+        draftErrors.color = "Color is required"
+    } else if (!/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(roleDraft.color)) {
+        draftErrors.color = "Use a valid hex color like #FF8A00"
+    } else {
+        draftErrors.color = undefined
+    }
+
+    return !draftErrors.name && !draftErrors.color
+}
+
+async function handleCreateGroup() {
+    if (!validateRoleDraft()) return
+
+    try {
+        creating.value = true
+
+        // If your createRole API already accepts a payload:
+        await createRole(roleDraft.name, roleDraft.color, roleDraft.description)
+
+        // Refresh list, close, reset
+        roles.value = await getRoles()
+        showCreateGroupDialog.value = false
+        resetRoleDraft()
+    } catch (err) {
+        console.error("Failed to create role:", err)
+        // optionally surface a toast/error UI here
+    } finally {
+        creating.value = false
+    }
+}
+
+function handleAddMember() {
+    //guard
+    if (memberToAdd.value == null)
+        return;
+
+    addMemberToRole(memberToAdd.value.member_id, activeRole.value.id);
+}
+
+function handleRemoveMember(memberId: number) {
+    removeMemberFromRole(memberId, activeRole.value.id);
+}
+
+async function handleDeleteRole() {
+    await deleteRole(activeRole.value.id);
+}
+
+onMounted(async () => {
+    roles.value = await getRoles();
+    allMembers.value = await getMembers();
+})
+</script>
+<template>
+    <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" />
+                                    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
+                                        <Search class="size-4 text-muted-foreground" />
+                                    </span>
+                                </div>
+                            </ComboboxAnchor>
+                            <ComboboxList>
+                                <ComboboxEmpty>
+                                    No Members.
+                                </ComboboxEmpty>
+                                <ComboboxGroup>
+                                    <ComboboxItem v-for="member in availableMembers" :key="member.member_id"
+                                        :value="member">
+                                        {{ member.member_name }}
+                                        <ComboboxItemIndicator>
+                                            <Check class="ml-auto size-4" />
+                                        </ComboboxItemIndicator>
+                                    </ComboboxItem>
+                                </ComboboxGroup>
+                            </ComboboxList>
+                        </Combobox>
+                        <Button variant="secondary" @click="addingMember = false">Cancel</Button>
+                        <Button @click="handleAddMember">Save</Button>
+                    </div>
+                </ul>
+            </div>
+            <DialogFooter>
+                <!-- <Button variant="secondary" @click="showDialog = false">Cancel</Button> -->
+                <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>
+                    <!-- If you like a native color picker: -->
+                    <Input id="group-color" type="color" v-model="roleDraft.color" />
+                    <!-- Or stick to hex text input: -->
+                    <!-- <Input id="group-color" placeholder="#FF8A00" v-model="roleDraft.color"
+                        :aria-invalid="!!draftErrors.color" />
+                    <p v-if="draftErrors.color" class="text-destructive text-sm mt-1">{{ draftErrors.color }}</p> -->
+                </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>
+                <!-- <CardContent>
+                    Card Content
+                </CardContent> -->
+                <CardFooter>
+                    <p class="text-muted-foreground">{{ value.members.length }} members</p>
+                </CardFooter>
+            </Card>
+        </div>
+    </div>
+</template>

ui/src/router/index.js

@@ -9,6 +9,7 @@ const router = createRouter({
     { path: '/members', component: () => import('@/pages/memberList.vue') },
     { path: '/loa', component: () => import('@/pages/SubmitLOA.vue') },
     { path: '/transfer', component: () => import('@/pages/Transfer.vue') },
+    { path: '/calendar', component: () => import('@/pages/Calendar.vue') },
     {
       path: '/administration',
       children: [
@@ -31,6 +32,10 @@ const router = createRouter({
         {
           path: 'loa',
           component: () => import('@/pages/ManageLOA.vue')
+        },
+        {
+          path: 'roles',
+          component: () => import('@/pages/ManageRoles.vue')
         }
       ]
     }