@escalated-dev/escalated 0.6.0 → 0.7.1

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

@@ -0,0 +1,141 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import MetricComparison from '../../../components/MetricComparison.vue';
+import ReportChart from '../../../components/ReportChart.vue';
+import PeriodSelector from '../../../components/PeriodSelector.vue';
+import ReportExportButton from '../../../components/ReportExportButton.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    period_days: { type: Number, default: 30 },
+    current: {
+        type: Object,
+        default: () => ({
+            total_tickets: 0,
+            resolved_tickets: 0,
+            avg_frt: 0,
+            avg_resolution: 0,
+            sla_compliance: 0,
+            csat: 0,
+            breach_count: 0,
+            volume_trend: [],
+        }),
+    },
+    previous: {
+        type: Object,
+        default: () => ({
+            total_tickets: 0,
+            resolved_tickets: 0,
+            avg_frt: 0,
+            avg_resolution: 0,
+            sla_compliance: 0,
+            csat: 0,
+            breach_count: 0,
+            volume_trend: [],
+        }),
+    },
+});
+
+const periodDays = ref(props.period_days);
+
+function changePeriod(days) {
+    periodDays.value = days;
+    router.get(route('escalated.admin.reports.comparison'), { days }, { preserveState: true });
+}
+
+const overlayCurrentData = computed(() => {
+    return (props.current?.volume_trend || []).map((d) => ({
+        ...d,
+        label: d.label || d.date,
+    }));
+});
+
+const overlayPreviousData = computed(() => {
+    return (props.previous?.volume_trend || []).map((d) => ({
+        ...d,
+        label: d.label || d.date,
+    }));
+});
+</script>
+
+<template>
+    <EscalatedLayout title="Period Comparison">
+        <div class="mb-6 flex items-center justify-between">
+            <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
+            <div class="flex items-center gap-3">
+                <ReportExportButton report-name="comparison" :period-days="periodDays" />
+                <Link
+                    :href="route('escalated.admin.reports')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back
+                </Link>
+            </div>
+        </div>
+
+        <!-- Period Labels -->
+        <div class="mb-6 flex items-center gap-4">
+            <div class="flex items-center gap-2">
+                <span class="inline-block h-3 w-3 rounded-full bg-cyan-500"></span>
+                <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                    >Current Period ({{ periodDays }}d)</span
+                >
+            </div>
+            <div class="flex items-center gap-2">
+                <span class="inline-block h-3 w-3 rounded-full bg-[var(--esc-panel-text-muted)]"></span>
+                <span class="text-sm font-medium text-[var(--esc-panel-text-muted)]">Previous Period</span>
+            </div>
+        </div>
+
+        <!-- Comparison Metrics -->
+        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <MetricComparison
+                label="Total Tickets"
+                :value="current?.total_tickets ?? 0"
+                :previous-value="previous?.total_tickets"
+            />
+            <MetricComparison
+                label="Resolved"
+                :value="current?.resolved_tickets ?? 0"
+                :previous-value="previous?.resolved_tickets"
+            />
+            <MetricComparison
+                label="Avg FRT"
+                :value="current?.avg_frt ?? 0"
+                :previous-value="previous?.avg_frt"
+                format="h"
+                :invert-color="true"
+            />
+            <MetricComparison
+                label="Avg Resolution"
+                :value="current?.avg_resolution ?? 0"
+                :previous-value="previous?.avg_resolution"
+                format="h"
+                :invert-color="true"
+            />
+        </div>
+
+        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-3">
+            <MetricComparison
+                label="SLA Compliance"
+                :value="current?.sla_compliance ?? 0"
+                :previous-value="previous?.sla_compliance"
+                format="%"
+            />
+            <MetricComparison label="CSAT" :value="current?.csat ?? 0" :previous-value="previous?.csat" />
+            <MetricComparison
+                label="SLA Breaches"
+                :value="current?.breach_count ?? 0"
+                :previous-value="previous?.breach_count"
+                :invert-color="true"
+            />
+        </div>
+
+        <!-- Volume Overlay -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <ReportChart type="line" title="Current Period Volume" :data="overlayCurrentData" :colors="['#06b6d4']" />
+            <ReportChart type="line" title="Previous Period Volume" :data="overlayPreviousData" :colors="['#6b7280']" />
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,127 @@
+<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';
+
+defineProps({
+    period_days: Number,
+    csat_average: Number,
+    response_rate: Number,
+    total_ratings: Number,
+    by_agent: Array,
+    over_time: Array,
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.csat'), { days }, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Customer Satisfaction 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>
+            <div class="flex items-center gap-3">
+                <Link
+                    :href="route('escalated.admin.settings.csat')"
+                    class="text-sm text-[var(--esc-panel-accent)] hover:text-[var(--esc-panel-accent)]"
+                >
+                    CSAT Settings
+                </Link>
+                <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>
+        </div>
+
+        <!-- KPIs -->
+        <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+            <KpiCard
+                label="Average Rating"
+                :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'"
+            />
+            <KpiCard
+                label="Response Rate"
+                :value="`${response_rate}%`"
+                :icon="'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z'"
+            />
+            <KpiCard
+                label="Total Ratings"
+                :value="total_ratings"
+                :icon="'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'"
+            />
+        </div>
+
+        <!-- Charts -->
+        <div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2">
+            <ChartWidget title="CSAT Over Time" :data="over_time" color="amber" />
+
+            <!-- By Agent -->
+            <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)]">Ratings by Agent</h3>
+                <div v-if="by_agent?.length" class="space-y-3">
+                    <div v-for="agent in by_agent" :key="agent.agent_id" class="flex items-center justify-between">
+                        <div class="flex items-center gap-3">
+                            <div
+                                class="flex h-8 w-8 items-center justify-center rounded-md bg-[var(--esc-panel-hover)] text-xs font-semibold text-[var(--esc-panel-text-tertiary)]"
+                            >
+                                {{ agent.agent_name?.charAt(0)?.toUpperCase() || '?' }}
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                                    {{ agent.agent_name }}
+                                </div>
+                                <div class="text-xs text-[var(--esc-panel-text-muted)]">
+                                    {{ agent.total_ratings }} ratings
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <div class="flex items-center gap-0.5">
+                                <svg
+                                    v-for="n in 5"
+                                    :key="n"
+                                    class="h-3.5 w-3.5"
+                                    :class="
+                                        n <= Math.round(agent.avg_rating)
+                                            ? '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-sm font-bold text-[var(--esc-panel-text)]">{{ agent.avg_rating }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="py-6 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                    No agent ratings for this period.
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,226 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import KpiCard from '../../../components/KpiCard.vue';
+import ChartWidget from '../../../components/ChartWidget.vue';
+import PeriodSelector from '../../../components/PeriodSelector.vue';
+import ReportExportButton from '../../../components/ReportExportButton.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+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' },
+];
+
+const advancedReports = [
+    { label: 'SLA Trends', route: 'escalated.admin.reports.sla-trends' },
+    { label: 'Response Times', route: 'escalated.admin.reports.response-times' },
+    { label: 'Resolution Times', route: 'escalated.admin.reports.resolution-times' },
+    { label: 'Agent Rankings', route: 'escalated.admin.reports.agent-ranking' },
+    { label: 'Cohorts', route: 'escalated.admin.reports.cohorts' },
+    { label: 'Comparison', route: 'escalated.admin.reports.comparison' },
+];
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.dashboard'), { days }, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Reports Dashboard">
+        <!-- Period selector & export -->
+        <div class="mb-6 flex items-center justify-between">
+            <PeriodSelector :model-value="period_days" @update:model-value="changePeriod" />
+            <div class="flex items-center gap-3">
+                <ReportExportButton report-name="dashboard" :period-days="period_days" />
+                <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>
+        </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>
+
+        <!-- Advanced Reports Navigation -->
+        <div class="mt-8 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)]">Advanced Reports</h3>
+            <div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
+                <Link
+                    v-for="report in advancedReports"
+                    :key="report.route"
+                    :href="route(report.route, { days: period_days })"
+                    class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-4 py-3 text-center text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-all hover:border-[var(--esc-panel-accent)]/30 hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    {{ report.label }}
+                </Link>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,164 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import KpiCard from '../../../components/KpiCard.vue';
+import ReportChart from '../../../components/ReportChart.vue';
+import PeriodSelector from '../../../components/PeriodSelector.vue';
+import ReportExportButton from '../../../components/ReportExportButton.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    period_days: { type: Number, default: 30 },
+    avg_resolution: { type: Number, default: 0 },
+    median_resolution: { type: Number, default: 0 },
+    p90_resolution: { type: Number, default: 0 },
+    pct_under_target: { type: Number, default: 0 },
+    distribution: { type: Array, default: () => [] },
+    trend: { type: Array, default: () => [] },
+    by_agent: { type: Array, default: () => [] },
+    by_department: { type: Array, default: () => [] },
+    by_channel: { type: Array, default: () => [] },
+    target_hours: { type: Number, default: 24 },
+});
+
+const periodDays = ref(props.period_days);
+const sortColumn = ref('avg');
+const sortDir = ref('asc');
+
+function changePeriod(days) {
+    periodDays.value = days;
+    router.get(route('escalated.admin.reports.resolution-times'), { days }, { preserveState: true });
+}
+
+function resColor(value) {
+    if (value <= props.target_hours * 0.5) return 'text-emerald-400';
+    if (value <= props.target_hours) return 'text-amber-400';
+    return 'text-red-400';
+}
+
+const sortedAgents = computed(() => {
+    const agents = [...(props.by_agent || [])];
+    agents.sort((a, b) => {
+        const aVal = a[sortColumn.value] ?? 0;
+        const bVal = b[sortColumn.value] ?? 0;
+        return sortDir.value === 'asc' ? aVal - bVal : bVal - aVal;
+    });
+    return agents;
+});
+
+function toggleSort(col) {
+    if (sortColumn.value === col) {
+        sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+    } else {
+        sortColumn.value = col;
+        sortDir.value = 'asc';
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Resolution Time Analysis">
+        <div class="mb-6 flex items-center justify-between">
+            <PeriodSelector :model-value="periodDays" @update:model-value="changePeriod" />
+            <div class="flex items-center gap-3">
+                <ReportExportButton report-name="resolution-times" :period-days="periodDays" />
+                <Link
+                    :href="route('escalated.admin.reports')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back
+                </Link>
+            </div>
+        </div>
+
+        <!-- KPI Cards -->
+        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <KpiCard
+                label="Avg Resolution"
+                :value="`${avg_resolution}h`"
+                :icon="'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+            <KpiCard
+                label="Median Resolution"
+                :value="`${median_resolution}h`"
+                :icon="'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5'"
+            />
+            <KpiCard
+                label="P90 Resolution"
+                :value="`${p90_resolution}h`"
+                :icon="'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.75z'"
+            />
+            <KpiCard
+                label="Under Target"
+                :value="`${pct_under_target}%`"
+                :icon="'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+        </div>
+
+        <!-- Charts -->
+        <div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <ReportChart
+                type="histogram"
+                title="Resolution Time Distribution"
+                :data="distribution"
+                :colors="['#8b5cf6']"
+                x-label="Resolution Time Buckets"
+            />
+            <ReportChart type="line" title="Avg Resolution Time Trend" :data="trend" :colors="['#06b6d4']" />
+            <ReportChart type="bar" title="Resolution by Department" :data="by_department" :colors="['#f59e0b']" />
+            <ReportChart type="bar" title="Resolution by Channel" :data="by_channel" :colors="['#10b981']" />
+        </div>
+
+        <!-- Agent 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)]">Resolution Time by Agent</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)]"
+                        >
+                            Agent
+                        </th>
+                        <th
+                            v-for="col in [
+                                { key: 'avg', label: 'Avg' },
+                                { key: 'median', label: 'Median' },
+                                { key: 'p90', label: 'P90' },
+                            ]"
+                            :key="col.key"
+                            class="cursor-pointer px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                            @click="toggleSort(col.key)"
+                        >
+                            {{ col.label }}
+                            <span v-if="sortColumn === col.key">{{ sortDir === 'asc' ? ' &#9650;' : ' &#9660;' }}</span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-for="agent in sortedAgents" :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 font-medium" :class="resColor(agent.avg)">
+                            {{ agent.avg ?? '—' }}h
+                        </td>
+                        <td class="px-4 py-3 text-sm font-medium" :class="resColor(agent.median)">
+                            {{ agent.median ?? '—' }}h
+                        </td>
+                        <td class="px-4 py-3 text-sm font-medium" :class="resColor(agent.p90)">
+                            {{ agent.p90 ?? '—' }}h
+                        </td>
+                    </tr>
+                    <tr v-if="!sortedAgents.length">
+                        <td colspan="4" 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>
+    </EscalatedLayout>
+</template>