@escalated-dev/escalated 0.6.0 → 0.7.1

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

@@ -0,0 +1,132 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import MetricComparison from '../../../components/MetricComparison.vue';
+import ReportChart from '../../../components/ReportChart.vue';
+import PercentileChart from '../../../components/PercentileChart.vue';
+import PeriodSelector from '../../../components/PeriodSelector.vue';
+import ReportExportButton from '../../../components/ReportExportButton.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    period_days: { type: Number, default: 30 },
+    agent: { type: Object, default: () => ({}) },
+    total_tickets: { type: Number, default: 0 },
+    resolved_tickets: { type: Number, default: 0 },
+    avg_frt: { type: Number, default: 0 },
+    avg_resolution: { type: Number, default: 0 },
+    csat_score: { type: [Number, String], default: '—' },
+    response_percentiles: { type: Object, default: () => ({ p50: 0, p75: 0, p90: 0, p95: 0, p99: 0 }) },
+    productivity: { type: Array, default: () => [] },
+    workload: { type: Array, default: () => [] },
+    csat_breakdown: { type: Array, default: () => [] },
+    prev_total_tickets: { type: Number, default: null },
+    prev_resolved_tickets: { type: Number, default: null },
+    prev_avg_frt: { type: Number, default: null },
+    prev_avg_resolution: { type: Number, default: null },
+    prev_csat_score: { type: [Number, String], default: null },
+});
+
+const periodDays = ref(props.period_days);
+
+function changePeriod(days) {
+    periodDays.value = days;
+    router.get(
+        route('escalated.admin.reports.agent-detail', { id: props.agent?.id }),
+        { days },
+        { preserveState: true },
+    );
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="`Agent: ${agent?.name || 'Unknown'}`">
+        <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="`agent-${agent?.id}`" :period-days="periodDays" />
+                <Link
+                    :href="route('escalated.admin.reports.agent-ranking', { days: periodDays })"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back to Rankings
+                </Link>
+            </div>
+        </div>
+
+        <!-- Agent Header -->
+        <div
+            class="mb-6 flex items-center gap-4 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5"
+        >
+            <div
+                class="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-xl font-bold text-white"
+            >
+                {{ agent?.name?.charAt(0)?.toUpperCase() || '?' }}
+            </div>
+            <div>
+                <h2 class="text-lg font-bold text-[var(--esc-panel-text)]">{{ agent?.name || 'Unknown Agent' }}</h2>
+                <p class="text-sm text-[var(--esc-panel-text-muted)]">{{ agent?.email || '' }}</p>
+            </div>
+        </div>
+
+        <!-- KPI Cards with comparison -->
+        <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-5">
+            <MetricComparison
+                label="Total Tickets"
+                :value="total_tickets"
+                :previous-value="prev_total_tickets"
+                :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'"
+            />
+            <MetricComparison
+                label="Resolved"
+                :value="resolved_tickets"
+                :previous-value="prev_resolved_tickets"
+                :icon="'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+            <MetricComparison
+                label="Avg FRT"
+                :value="avg_frt"
+                :previous-value="prev_avg_frt"
+                format="h"
+                :invert-color="true"
+                :icon="'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'"
+            />
+            <MetricComparison
+                label="Avg Resolution"
+                :value="avg_resolution"
+                :previous-value="prev_avg_resolution"
+                format="h"
+                :invert-color="true"
+                :icon="'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5'"
+            />
+            <MetricComparison
+                label="CSAT Score"
+                :value="csat_score"
+                :previous-value="prev_csat_score"
+                :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>
+
+        <!-- Percentile & Productivity Charts -->
+        <div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <PercentileChart title="Response Time Percentiles" :percentiles="response_percentiles" unit="h" />
+            <ReportChart
+                type="bar"
+                title="Productivity (Replies & Resolutions per Day)"
+                :data="productivity"
+                :colors="['#06b6d4', '#8b5cf6']"
+            />
+        </div>
+
+        <!-- Workload & CSAT -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <ReportChart type="area" title="Workload Over Time" :data="workload" :colors="['#f59e0b']" />
+            <ReportChart
+                type="pie"
+                title="CSAT Breakdown"
+                :data="csat_breakdown"
+                :colors="['#ef4444', '#f97316', '#f59e0b', '#10b981', '#06b6d4']"
+            />
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,115 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import AgentPerformanceCard from '../../../components/AgentPerformanceCard.vue';
+import { router, Link } from '@inertiajs/vue3';
+
+defineProps({
+    period_days: Number,
+    agents: Array,
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.agents'), { days }, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Performance Metrics">
+        <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>
+
+        <!-- Agent Table -->
+        <div class="mb-8 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)]"
+                        >
+                            Total 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 agents" :key="agent.agent_id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="px-4 py-3">
+                            <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>
+                                <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">{{
+                                    agent.agent_name
+                                }}</span>
+                            </div>
+                        </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="!agents?.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>
+
+        <!-- Agent Cards (visual) -->
+        <div v-if="agents?.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <AgentPerformanceCard v-for="agent in agents" :key="agent.agent_id" :agent="agent" />
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,246 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.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 },
+    agents: { type: Array, default: () => [] },
+});
+
+const periodDays = ref(props.period_days);
+const sortColumn = ref('composite_score');
+const sortDir = ref('desc');
+
+function changePeriod(days) {
+    periodDays.value = days;
+    router.get(route('escalated.admin.reports.agent-ranking'), { days }, { preserveState: true });
+}
+
+const sortedAgents = computed(() => {
+    const list = [...(props.agents || [])];
+    list.sort((a, b) => {
+        const aVal = a[sortColumn.value] ?? 0;
+        const bVal = b[sortColumn.value] ?? 0;
+        return sortDir.value === 'asc' ? aVal - bVal : bVal - aVal;
+    });
+    return list;
+});
+
+const topPerformers = computed(() => sortedAgents.value.slice(0, 3));
+const needsAttention = computed(() => {
+    return [...(props.agents || [])].sort((a, b) => (a.composite_score ?? 0) - (b.composite_score ?? 0)).slice(0, 3);
+});
+
+function toggleSort(col) {
+    if (sortColumn.value === col) {
+        sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+    } else {
+        sortColumn.value = col;
+        sortDir.value = 'desc';
+    }
+}
+
+function scoreColor(score) {
+    if (score >= 80) return 'text-emerald-400';
+    if (score >= 60) return 'text-amber-400';
+    return 'text-red-400';
+}
+
+function renderSparkline(points) {
+    if (!points?.length) return '';
+    const max = Math.max(...points, 1);
+    const w = 80;
+    const h = 24;
+    const step = w / Math.max(points.length - 1, 1);
+    return points
+        .map((v, i) => {
+            const x = i * step;
+            const y = h - (v / max) * h;
+            return `${i === 0 ? 'M' : 'L'}${x},${y}`;
+        })
+        .join(' ');
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Performance Rankings">
+        <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="agent-ranking" :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>
+
+        <!-- Top / Needs Attention -->
+        <div v-if="agents?.length" class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div class="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-5">
+                <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-emerald-400">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.996.178-1.768.654-2.127 1.38a8.69 8.69 0 00-.808 3.06c0 2.625 1.418 4.9 3.524 6.13M18.75 4.236c.996.178 1.768.654 2.127 1.38a8.69 8.69 0 01.808 3.06c0 2.625-1.418 4.9-3.524 6.13"
+                        />
+                    </svg>
+                    Top Performers
+                </h3>
+                <div class="space-y-2">
+                    <div
+                        v-for="(agent, idx) in topPerformers"
+                        :key="agent.agent_id"
+                        class="flex items-center justify-between rounded-lg bg-emerald-500/5 px-3 py-2"
+                    >
+                        <div class="flex items-center gap-3">
+                            <span
+                                class="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/20 text-xs font-bold text-emerald-400"
+                            >
+                                {{ idx + 1 }}
+                            </span>
+                            <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">{{
+                                agent.agent_name
+                            }}</span>
+                        </div>
+                        <span class="text-sm font-bold text-emerald-400">{{ agent.composite_score }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="rounded-xl border border-red-500/20 bg-red-500/5 p-5">
+                <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-red-400">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="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"
+                        />
+                    </svg>
+                    Needs Attention
+                </h3>
+                <div class="space-y-2">
+                    <div
+                        v-for="agent in needsAttention"
+                        :key="agent.agent_id"
+                        class="flex items-center justify-between rounded-lg bg-red-500/5 px-3 py-2"
+                    >
+                        <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">{{
+                            agent.agent_name
+                        }}</span>
+                        <span class="text-sm font-bold text-red-400">{{ agent.composite_score }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Ranked Table -->
+        <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)]"
+                        >
+                            #
+                        </th>
+                        <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: 'composite_score', label: 'Score' },
+                                { key: 'resolution_rate', label: 'Resolution %' },
+                                { key: 'avg_frt', label: 'Avg FRT' },
+                                { key: 'avg_resolution', label: 'Avg Res' },
+                                { key: 'csat', label: 'CSAT' },
+                                { key: 'volume', label: 'Volume' },
+                            ]"
+                            :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>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Trend
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr
+                        v-for="(agent, idx) in sortedAgents"
+                        :key="agent.agent_id"
+                        class="cursor-pointer hover:bg-[var(--esc-panel-hover)]"
+                        @click="
+                            router.visit(
+                                route('escalated.admin.reports.agent-detail', { id: agent.agent_id, days: periodDays }),
+                            )
+                        "
+                    >
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-muted)]">{{ idx + 1 }}</td>
+                        <td class="px-4 py-3">
+                            <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>
+                                <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">{{
+                                    agent.agent_name
+                                }}</span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3 text-sm font-bold" :class="scoreColor(agent.composite_score)">
+                            {{ agent.composite_score ?? '—' }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.resolution_rate ?? '—' }}%
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.avg_frt ?? '—' }}h
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.avg_resolution ?? '—' }}h
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.csat ?? '—' }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.volume ?? 0 }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <svg v-if="agent.sparkline?.length" width="80" height="24" class="overflow-visible">
+                                <path
+                                    :d="renderSparkline(agent.sparkline)"
+                                    fill="none"
+                                    stroke="#06b6d4"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                            <span v-else class="text-xs text-[var(--esc-panel-text-muted)]">--</span>
+                        </td>
+                    </tr>
+                    <tr v-if="!sortedAgents.length">
+                        <td colspan="9" 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>

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

@@ -0,0 +1,180 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.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 },
+    by_tag: { type: Array, default: () => [] },
+    by_department: { type: Array, default: () => [] },
+    by_channel: { type: Array, default: () => [] },
+    by_type: { type: Array, default: () => [] },
+    by_priority: { type: Array, default: () => [] },
+});
+
+const periodDays = ref(props.period_days);
+const activeTab = ref('department');
+const sortColumn = ref('volume');
+const sortDir = ref('desc');
+
+const tabs = [
+    { key: 'department', label: 'By Department' },
+    { key: 'tag', label: 'By Tag' },
+    { key: 'channel', label: 'By Channel' },
+    { key: 'type', label: 'By Type' },
+    { key: 'priority', label: 'By Priority' },
+];
+
+function changePeriod(days) {
+    periodDays.value = days;
+    router.get(route('escalated.admin.reports.cohorts'), { days }, { preserveState: true });
+}
+
+const activeCohortData = computed(() => {
+    const map = {
+        tag: props.by_tag,
+        department: props.by_department,
+        channel: props.by_channel,
+        type: props.by_type,
+        priority: props.by_priority,
+    };
+    return map[activeTab.value] || [];
+});
+
+const sortedCohorts = computed(() => {
+    const data = [...activeCohortData.value];
+    data.sort((a, b) => {
+        const aVal = a[sortColumn.value] ?? 0;
+        const bVal = b[sortColumn.value] ?? 0;
+        return sortDir.value === 'asc' ? aVal - bVal : bVal - aVal;
+    });
+    return data;
+});
+
+const chartData = computed(() => {
+    return activeCohortData.value.map((c) => ({
+        label: c.name || c.label,
+        value: c.volume || 0,
+    }));
+});
+
+function toggleSort(col) {
+    if (sortColumn.value === col) {
+        sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+    } else {
+        sortColumn.value = col;
+        sortDir.value = 'desc';
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Cohort 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="cohorts" :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>
+
+        <!-- Tab Selector -->
+        <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>
+
+        <!-- Chart -->
+        <div class="mb-6">
+            <ReportChart
+                type="bar"
+                :title="`Volume ${tabs.find((t) => t.key === activeTab)?.label || ''}`"
+                :data="chartData"
+                :colors="['#8b5cf6', '#06b6d4', '#f59e0b', '#10b981', '#ef4444']"
+            />
+        </div>
+
+        <!-- Cohort Table -->
+        <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)]"
+                        >
+                            Name
+                        </th>
+                        <th
+                            v-for="col in [
+                                { key: 'volume', label: 'Volume' },
+                                { key: 'avg_resolution', label: 'Avg Resolution' },
+                                { key: 'breach_rate', label: 'Breach Rate' },
+                                { key: 'csat', label: 'CSAT' },
+                            ]"
+                            :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="cohort in sortedCohorts"
+                        :key="cohort.name || cohort.label"
+                        class="hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ cohort.name || cohort.label }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ cohort.volume ?? 0 }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ cohort.avg_resolution ?? '—' }}h
+                        </td>
+                        <td
+                            class="px-4 py-3 text-sm"
+                            :class="
+                                (cohort.breach_rate ?? 0) > 20
+                                    ? 'text-red-400'
+                                    : 'text-[var(--esc-panel-text-tertiary)]'
+                            "
+                        >
+                            {{ cohort.breach_rate ?? '—' }}%
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ cohort.csat ?? '—' }}
+                        </td>
+                    </tr>
+                    <tr v-if="!sortedCohorts.length">
+                        <td colspan="5" class="px-4 py-8 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No data for this cohort type.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>