@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/pages/Admin/Reports.vue

@@ -1,101 +1,206 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import StatsCard from '../../components/StatsCard.vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    period_days: Number,
-    total_tickets: Number,
-    resolved_tickets: Number,
-    avg_first_response_hours: Number,
-    sla_breach_count: Number,
-    by_status: Object,
-    by_priority: Object,
-    csat: { type: Object, default: () => ({}) },
-});
-
-function changePeriod(days) {
-    router.get(route('escalated.admin.reports'), { days }, { preserveState: true });
-}
-
-function renderStars(rating) {
-    return Array.from({ length: 5 }, (_, i) => i < Math.round(rating) ? 'filled' : 'empty');
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Reports">
-        <div class="mb-6 flex gap-2">
-            <button v-for="d in [7, 30, 90]" :key="d" @click="changePeriod(d)"
-                    :class="['rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all', period_days === d
-                        ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-black/20'
-                        : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200']">
-                Last {{ d }} days
-            </button>
-        </div>
-        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
-            <StatsCard label="Total Tickets" :value="total_tickets" color="indigo" />
-            <StatsCard label="Resolved" :value="resolved_tickets" color="green" />
-            <StatsCard label="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
-            <StatsCard label="SLA Breaches" :value="sla_breach_count" color="red" />
-        </div>
-        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Status</h3>
-                <template v-if="by_status && Object.keys(by_status).length">
-                    <div v-for="(count, status) in by_status" :key="status" class="mb-2.5 flex items-center justify-between">
-                        <span class="text-sm capitalize text-neutral-400">{{ status.replace('_', ' ') }}</span>
-                        <span class="text-sm font-semibold text-white">{{ count }}</span>
-                    </div>
-                </template>
-                <div v-else class="flex flex-col items-center py-6 text-center">
-                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
-                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
-                </div>
-            </div>
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Priority</h3>
-                <template v-if="by_priority && Object.keys(by_priority).length">
-                    <div v-for="(count, priority) in by_priority" :key="priority" class="mb-2.5 flex items-center justify-between">
-                        <span class="text-sm capitalize text-neutral-400">{{ priority }}</span>
-                        <span class="text-sm font-semibold text-white">{{ count }}</span>
-                    </div>
-                </template>
-                <div v-else class="flex flex-col items-center py-6 text-center">
-                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>
-                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
-                </div>
-            </div>
-            <!-- CSAT -->
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">Customer Satisfaction</h3>
-                <template v-if="csat?.total > 0">
-                    <div class="mb-3 flex items-center gap-2">
-                        <div class="flex items-center gap-0.5">
-                            <svg v-for="(star, i) in renderStars(csat.average)" :key="i"
-                                 class="h-5 w-5" :class="star === 'filled' ? 'text-amber-400' : 'text-neutral-700'"
-                                 fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                            </svg>
-                        </div>
-                        <span class="text-lg font-bold text-white">{{ csat.average }}</span>
-                        <span class="text-sm text-neutral-500">({{ csat.total }} ratings)</span>
-                    </div>
-                    <div v-if="csat.breakdown && Object.keys(csat.breakdown).length" class="space-y-1.5">
-                        <div v-for="rating in [5, 4, 3, 2, 1]" :key="rating" class="flex items-center gap-2">
-                            <span class="w-3 text-xs text-neutral-500">{{ rating }}</span>
-                            <div class="h-2 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
-                                <div class="h-full rounded-full bg-amber-400" :style="{ width: `${csat.total ? ((csat.breakdown[rating] || 0) / csat.total) * 100 : 0}%` }"></div>
-                            </div>
-                            <span class="w-6 text-right text-xs text-neutral-500">{{ csat.breakdown[rating] || 0 }}</span>
-                        </div>
-                    </div>
-                </template>
-                <div v-else class="flex flex-col items-center py-6 text-center">
-                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg>
-                    <p class="text-sm text-neutral-500">No ratings for this period</p>
-                </div>
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatsCard from '../../components/StatsCard.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+defineProps({
+    period_days: Number,
+    total_tickets: Number,
+    resolved_tickets: Number,
+    avg_first_response_hours: Number,
+    sla_breach_count: Number,
+    by_status: Object,
+    by_priority: Object,
+    csat: { type: Object, default: () => ({}) },
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports'), { days }, { preserveState: true });
+}
+
+function renderStars(rating) {
+    return Array.from({ length: 5 }, (_, i) => (i < Math.round(rating) ? 'filled' : 'empty'));
+}
+
+const { getPageComponents } = usePluginExtensions();
+</script>
+
+<template>
+    <EscalatedLayout title="Reports">
+        <!-- Sub-report navigation -->
+        <div
+            class="mb-6 flex items-center gap-3 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-3"
+        >
+            <span class="text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                >Detailed Reports:</span
+            >
+            <Link
+                :href="route('escalated.admin.reports.dashboard')"
+                class="rounded-md px-3 py-1.5 text-sm text-[var(--esc-panel-text-tertiary)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                Dashboard
+            </Link>
+            <Link
+                :href="route('escalated.admin.reports.agents')"
+                class="rounded-md px-3 py-1.5 text-sm text-[var(--esc-panel-text-tertiary)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                Agent Metrics
+            </Link>
+            <Link
+                :href="route('escalated.admin.reports.sla')"
+                class="rounded-md px-3 py-1.5 text-sm text-[var(--esc-panel-text-tertiary)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                SLA Report
+            </Link>
+            <Link
+                :href="route('escalated.admin.reports.csat')"
+                class="rounded-md px-3 py-1.5 text-sm text-[var(--esc-panel-text-tertiary)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                CSAT Report
+            </Link>
+        </div>
+
+        <div class="mb-6 flex gap-2">
+            <button
+                v-for="d in [7, 30, 90]"
+                :key="d"
+                :class="[
+                    'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                    period_days === d
+                        ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
+                        : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
+                ]"
+                @click="changePeriod(d)"
+            >
+                Last {{ d }} days
+            </button>
+        </div>
+        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <StatsCard label="Total Tickets" :value="total_tickets" color="indigo" />
+            <StatsCard label="Resolved" :value="resolved_tickets" color="green" />
+            <StatsCard label="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
+            <StatsCard label="SLA Breaches" :value="sla_breach_count" color="red" />
+        </div>
+        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">By Status</h3>
+                <template v-if="by_status && Object.keys(by_status).length">
+                    <div
+                        v-for="(count, status) in by_status"
+                        :key="status"
+                        class="mb-2.5 flex items-center justify-between"
+                    >
+                        <span class="text-sm capitalize text-[var(--esc-panel-text-tertiary)]">{{
+                            status.replace('_', ' ')
+                        }}</span>
+                        <span class="text-sm font-semibold text-[var(--esc-panel-text)]">{{ count }}</span>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg
+                        class="mb-2 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+                        />
+                    </svg>
+                    <p class="text-sm text-[var(--esc-panel-text-muted)]">No ticket data for this period</p>
+                </div>
+            </div>
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">By Priority</h3>
+                <template v-if="by_priority && Object.keys(by_priority).length">
+                    <div
+                        v-for="(count, priority) in by_priority"
+                        :key="priority"
+                        class="mb-2.5 flex items-center justify-between"
+                    >
+                        <span class="text-sm capitalize text-[var(--esc-panel-text-tertiary)]">{{ priority }}</span>
+                        <span class="text-sm font-semibold text-[var(--esc-panel-text)]">{{ count }}</span>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg
+                        class="mb-2 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
+                        />
+                    </svg>
+                    <p class="text-sm text-[var(--esc-panel-text-muted)]">No ticket data for this period</p>
+                </div>
+            </div>
+            <!-- CSAT -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Customer Satisfaction</h3>
+                <template v-if="csat?.total > 0">
+                    <div class="mb-3 flex items-center gap-2">
+                        <div class="flex items-center gap-0.5">
+                            <svg
+                                v-for="(star, i) in renderStars(csat.average)"
+                                :key="i"
+                                class="h-5 w-5"
+                                :class="star === 'filled' ? 'text-amber-400' : 'text-[var(--esc-panel-text-muted)]'"
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                            >
+                                <path
+                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                                />
+                            </svg>
+                        </div>
+                        <span class="text-lg font-bold text-[var(--esc-panel-text)]">{{ csat.average }}</span>
+                        <span class="text-sm text-[var(--esc-panel-text-muted)]">({{ csat.total }} ratings)</span>
+                    </div>
+                    <div v-if="csat.breakdown && Object.keys(csat.breakdown).length" class="space-y-1.5">
+                        <div v-for="rating in [5, 4, 3, 2, 1]" :key="rating" class="flex items-center gap-2">
+                            <span class="w-3 text-xs text-[var(--esc-panel-text-muted)]">{{ rating }}</span>
+                            <div class="h-2 flex-1 overflow-hidden rounded-full bg-[var(--esc-panel-hover)]">
+                                <div
+                                    class="h-full rounded-full bg-amber-400"
+                                    :style="{
+                                        width: `${csat.total ? ((csat.breakdown[rating] || 0) / csat.total) * 100 : 0}%`,
+                                    }"
+                                ></div>
+                            </div>
+                            <span class="w-6 text-right text-xs text-[var(--esc-panel-text-muted)]">{{
+                                csat.breakdown[rating] || 0
+                            }}</span>
+                        </div>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg
+                        class="mb-2 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+                        />
+                    </svg>
+                    <p class="text-sm text-[var(--esc-panel-text-muted)]">No ratings for this period</p>
+                </div>
+            </div>
+        </div>
+        <PluginSlot slot="admin.reports.footer" :components="getPageComponents('admin.reports', 'footer')" />
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Roles/Form.vue

@@ -0,0 +1,71 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import PermissionMatrix from '../../../components/PermissionMatrix.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    role: { type: Object, default: null },
+    permissions: { type: Object, default: () => ({}) },
+});
+
+const form = useForm({
+    name: props.role?.name || '',
+    description: props.role?.description || '',
+    permissions: props.role?.permissions?.map((p) => p.id) || [],
+});
+
+function submit() {
+    if (props.role) {
+        form.put(route('escalated.admin.roles.update', props.role.id));
+    } else {
+        form.post(route('escalated.admin.roles.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="role ? 'Edit Role' : 'New Role'">
+        <form
+            class="mx-auto max-w-3xl space-y-5 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            @submit.prevent="submit"
+        >
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    required
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <div v-if="form.errors.name" class="mt-1 text-sm text-rose-400">{{ form.errors.name }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Description</label>
+                <textarea
+                    v-model="form.description"
+                    rows="2"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                ></textarea>
+            </div>
+
+            <div>
+                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Permissions</label>
+                <PermissionMatrix v-model="form.permissions" :permissions="permissions" />
+                <div v-if="form.errors.permissions" class="mt-1 text-sm text-rose-400">
+                    {{ form.errors.permissions }}
+                </div>
+            </div>
+
+            <div class="flex justify-end">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-5 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    {{ role ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Roles/Index.vue

@@ -0,0 +1,122 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ roles: Array });
+
+function destroy(role) {
+    if (role.is_system) return;
+    if (confirm('Delete this role?')) {
+        router.delete(route('escalated.admin.roles.destroy', role.id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Roles">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.roles.create')"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+            >
+                Add Role
+            </Link>
+        </div>
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Name
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Description
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Users
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Type
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!roles?.length">
+                        <td colspan="5" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No roles defined yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create roles with specific permissions to control agent access
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="role in roles"
+                        :key="role.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ role.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ role.description || '-' }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ role.users_count }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                v-if="role.is_system"
+                                class="inline-flex items-center rounded-full bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400 ring-1 ring-amber-500/20"
+                                >System</span
+                            >
+                            <span
+                                v-else
+                                class="inline-flex items-center rounded-full bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Custom</span
+                            >
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.roles.edit', role.id)"
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                Edit
+                            </Link>
+                            <button
+                                v-if="!role.is_system"
+                                class="ml-3 text-rose-400 hover:text-rose-300"
+                                @click="destroy(role)"
+                            >
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>