@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/pages/Admin/Reports/Dashboard.vue

@@ -0,0 +1,211 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import KpiCard from '../../../components/KpiCard.vue';
+import ChartWidget from '../../../components/ChartWidget.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    period_days: Number,
+    volume: Array,
+    by_status: Array,
+    by_priority: Array,
+    avg_response_hours: Number,
+    avg_resolution_hours: Number,
+    sla_compliance: Number,
+    csat_average: Number,
+    agent_performance: Array,
+});
+
+const activeTab = ref('overview');
+
+const tabs = [
+    { key: 'overview', label: 'Overview' },
+    { key: 'agents', label: 'Agents' },
+    { key: 'sla', label: 'SLA' },
+    { key: 'csat', label: 'CSAT' },
+];
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.dashboard'), { days }, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Reports Dashboard">
+        <!-- Period selector -->
+        <div class="mb-6 flex items-center justify-between">
+            <div class="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>
+            <Link
+                :href="route('escalated.admin.reports')"
+                class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                Classic View
+            </Link>
+        </div>
+
+        <!-- Tabs -->
+        <div class="mb-6 flex gap-1 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-1">
+            <button
+                v-for="tab in tabs"
+                :key="tab.key"
+                :class="[
+                    'rounded-md px-4 py-2 text-sm font-medium transition-all',
+                    activeTab === tab.key
+                        ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)]'
+                        : 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]',
+                ]"
+                @click="activeTab = tab.key"
+            >
+                {{ tab.label }}
+            </button>
+        </div>
+
+        <!-- Overview Tab -->
+        <div v-if="activeTab === 'overview'">
+            <!-- KPI Cards -->
+            <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+                <KpiCard
+                    label="Avg Response Time"
+                    :value="`${avg_response_hours}h`"
+                    :icon="'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'"
+                />
+                <KpiCard
+                    label="Avg Resolution Time"
+                    :value="`${avg_resolution_hours}h`"
+                    :icon="'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'"
+                />
+                <KpiCard
+                    label="SLA Compliance"
+                    :value="`${sla_compliance}%`"
+                    :icon="'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'"
+                />
+                <KpiCard
+                    label="CSAT Average"
+                    :value="csat_average || '—'"
+                    :icon="'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'"
+                />
+            </div>
+
+            <!-- Charts -->
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                <ChartWidget title="Ticket Volume" :data="volume" color="cyan" />
+                <ChartWidget title="By Status" :data="by_status" color="violet" />
+                <ChartWidget title="By Priority" :data="by_priority" color="amber" />
+            </div>
+        </div>
+
+        <!-- Agents Tab -->
+        <div v-if="activeTab === 'agents'">
+            <div class="mb-4 text-right">
+                <Link
+                    :href="route('escalated.admin.reports.agents', { days: period_days })"
+                    class="text-sm text-[var(--esc-panel-accent)] hover:text-[var(--esc-panel-accent)]"
+                >
+                    Full Agent Report &rarr;
+                </Link>
+            </div>
+            <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+                <table class="w-full">
+                    <thead>
+                        <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">
+                            <th
+                                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Agent
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Tickets
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Resolved
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Avg Response
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Avg Resolution
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                        <tr
+                            v-for="agent in agent_performance"
+                            :key="agent.agent_id"
+                            class="hover:bg-[var(--esc-panel-hover)]"
+                        >
+                            <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                                {{ agent.agent_name }}
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ agent.total_tickets }}
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ agent.resolved_tickets }}
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ agent.avg_response_hours ?? '—' }}h
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ agent.avg_resolution_hours ?? '—' }}h
+                            </td>
+                        </tr>
+                        <tr v-if="!agent_performance?.length">
+                            <td colspan="5" class="px-4 py-8 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                                No agent data for this period.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- SLA Tab -->
+        <div v-if="activeTab === 'sla'">
+            <div class="mb-4 flex items-center justify-between">
+                <KpiCard label="Overall SLA Compliance" :value="`${sla_compliance}%`" />
+                <Link
+                    :href="route('escalated.admin.reports.sla', { days: period_days })"
+                    class="text-sm text-[var(--esc-panel-accent)] hover:text-[var(--esc-panel-accent)]"
+                >
+                    Full SLA Report &rarr;
+                </Link>
+            </div>
+        </div>
+
+        <!-- CSAT Tab -->
+        <div v-if="activeTab === 'csat'">
+            <div class="mb-4 flex items-center justify-between">
+                <KpiCard label="Average CSAT" :value="csat_average || '—'" />
+                <Link
+                    :href="route('escalated.admin.reports.csat', { days: period_days })"
+                    class="text-sm text-[var(--esc-panel-accent)] hover:text-[var(--esc-panel-accent)]"
+                >
+                    Full CSAT Report &rarr;
+                </Link>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Reports/SlaReport.vue

@@ -0,0 +1,166 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import KpiCard from '../../../components/KpiCard.vue';
+import SlaComplianceChart from '../../../components/SlaComplianceChart.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    period_days: Number,
+    compliance_rate: Number,
+    compliance_by_policy: Array,
+    breaches: Array,
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.sla'), { days }, { preserveState: true });
+}
+
+const totalTickets = computed(() => {
+    return props.compliance_by_policy?.reduce((sum, p) => sum + p.total, 0) || 0;
+});
+
+const totalBreaches = computed(() => {
+    return props.compliance_by_policy?.reduce((sum, p) => sum + p.breached, 0) || 0;
+});
+
+const firstResponseBreaches = computed(() => {
+    return props.breaches?.filter((b) => b.sla_first_response_breached).length || 0;
+});
+
+const resolutionBreaches = computed(() => {
+    return props.breaches?.filter((b) => b.sla_resolution_breached).length || 0;
+});
+</script>
+
+<template>
+    <EscalatedLayout title="SLA Achievement Report">
+        <div class="mb-6 flex items-center justify-between">
+            <div class="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>
+            <Link
+                :href="route('escalated.admin.reports')"
+                class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                &larr; Back to Reports
+            </Link>
+        </div>
+
+        <!-- Summary KPIs -->
+        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <KpiCard
+                label="Total SLA Tickets"
+                :value="totalTickets"
+                :icon="'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z'"
+            />
+            <KpiCard
+                label="Compliance Rate"
+                :value="`${compliance_rate}%`"
+                :icon="'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'"
+            />
+            <KpiCard
+                label="First Response Breaches"
+                :value="firstResponseBreaches"
+                :icon="'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+            <KpiCard
+                label="Resolution Breaches"
+                :value="resolutionBreaches"
+                :icon="'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'"
+            />
+        </div>
+
+        <!-- Compliance by Policy -->
+        <div class="mb-8">
+            <SlaComplianceChart :data="compliance_by_policy" />
+        </div>
+
+        <!-- Breach Details Table -->
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+            <div class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-4 py-3">
+                <h3 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Breach Details</h3>
+            </div>
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-[var(--esc-panel-border)]">
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Ticket
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Subject
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            SLA Policy
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Breach Type
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Created
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-for="ticket in breaches" :key="ticket.id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="px-4 py-3 text-sm font-mono text-[var(--esc-panel-accent)]">
+                            {{ ticket.reference }}
+                        </td>
+                        <td class="max-w-xs truncate px-4 py-3 text-sm text-[var(--esc-panel-text-secondary)]">
+                            {{ ticket.subject }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ ticket.sla_policy?.name || '—' }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <div class="flex gap-1.5">
+                                <span
+                                    v-if="ticket.sla_first_response_breached"
+                                    class="inline-flex rounded-full border border-red-500/20 bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-400"
+                                >
+                                    Response
+                                </span>
+                                <span
+                                    v-if="ticket.sla_resolution_breached"
+                                    class="inline-flex rounded-full border border-red-500/20 bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-400"
+                                >
+                                    Resolution
+                                </span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-muted)]">
+                            {{ ticket.created_at ? new Date(ticket.created_at).toLocaleDateString() : '—' }}
+                        </td>
+                    </tr>
+                    <tr v-if="!breaches?.length">
+                        <td colspan="5" class="px-4 py-8 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No SLA breaches in this period.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Reports.vue

@@ -1,7 +1,9 @@
 <script setup>
 import EscalatedLayout from '../../components/EscalatedLayout.vue';
 import StatsCard from '../../components/StatsCard.vue';
-import { router } from '@inertiajs/vue3';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
 
 const props = defineProps({
     period_days: Number,
@@ -19,17 +21,59 @@ function changePeriod(days) {
 }
 
 function renderStars(rating) {
-    return Array.from({ length: 5 }, (_, i) => i < Math.round(rating) ? 'filled' : 'empty');
+    return Array.from({ length: 5 }, (_, i) => (i < Math.round(rating) ? 'filled' : 'empty'));
 }
+
+const { getPageComponents, reportWidgets } = 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" @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']">
+            <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>
@@ -40,62 +84,123 @@ function renderStars(rating) {
             <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>
+            <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-neutral-400">{{ status.replace('_', ' ') }}</span>
-                        <span class="text-sm font-semibold text-white">{{ count }}</span>
+                    <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-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>
+                    <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-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Priority</h3>
+            <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-neutral-400">{{ priority }}</span>
-                        <span class="text-sm font-semibold text-white">{{ count }}</span>
+                    <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-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>
+                    <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-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">Customer Satisfaction</h3>
+            <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-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
+                                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-white">{{ csat.average }}</span>
-                        <span class="text-sm text-neutral-500">({{ csat.total }} ratings)</span>
+                        <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-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>
+                            <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-neutral-500">{{ csat.breakdown[rating] || 0 }}</span>
+                            <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-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>
+                    <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>