@escalated-dev/escalated 0.8.0 → 0.11.1

package/src/pages/Admin/Newsletters/Show.vue

@@ -0,0 +1,140 @@
+<template>
+    <EscalatedLayout title="Newsletter">
+        <div class="show">
+            <header>
+                <div>
+                    <h1>{{ newsletter.subject }}</h1>
+                    <div class="show__meta">
+                        {{ $t('newsletters.detail.from') }}
+                        {{
+                            newsletter.from_name
+                                ? `${newsletter.from_name} <${newsletter.from_email}>`
+                                : newsletter.from_email
+                        }}
+                        → {{ newsletter.target_list.name }}
+                    </div>
+                </div>
+                <div class="show__status">
+                    <span :class="`status status--${newsletter.status}`">{{ newsletter.status }}</span>
+                </div>
+            </header>
+
+            <nav class="show__tabs">
+                <Link
+                    :href="`/admin/newsletters/${newsletter.id}?tab=overview`"
+                    :class="{ active: tab === 'overview' }"
+                >
+                    {{ $t('newsletters.detail.tabs.overview') }}
+                </Link>
+                <Link
+                    :href="`/admin/newsletters/${newsletter.id}?tab=deliveries`"
+                    :class="{ active: tab === 'deliveries' }"
+                >
+                    {{ $t('newsletters.detail.tabs.deliveries') }}
+                </Link>
+                <Link
+                    :href="`/admin/newsletters/${newsletter.id}?tab=analytics`"
+                    :class="{ active: tab === 'analytics' }"
+                >
+                    {{ $t('newsletters.detail.tabs.analytics') }}
+                </Link>
+            </nav>
+
+            <section v-if="tab === 'overview'">
+                <SummaryTiles :summary="summary" />
+            </section>
+
+            <section v-else-if="tab === 'deliveries'">
+                <DeliveriesTable :rows="deliveries.data" @filter="onFilter" @export="onExport" />
+            </section>
+
+            <section v-else-if="tab === 'analytics'">
+                <AnalyticsTiles :summary="summary" :top-clicks="topClicks" />
+            </section>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import SummaryTiles from '../../../components/admin/newsletters/SummaryTiles.vue';
+import DeliveriesTable from '../../../components/admin/newsletters/DeliveriesTable.vue';
+import AnalyticsTiles from '../../../components/admin/newsletters/AnalyticsTiles.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    newsletter: { type: Object, required: true },
+    deliveries: { type: Object, required: true },
+    topClicks: { type: Array, default: () => [] },
+    tab: { type: String, default: 'overview' },
+});
+
+const summary = computed(() => ({
+    total: props.newsletter.summary_total ?? 0,
+    sent: props.newsletter.summary_sent ?? 0,
+    opened: props.newsletter.summary_opened ?? 0,
+    clicked: props.newsletter.summary_clicked ?? 0,
+    bounced: props.newsletter.summary_bounced ?? 0,
+    complained: props.newsletter.summary_complained ?? 0,
+}));
+
+function onFilter(status) {
+    router.get(`/admin/newsletters/${props.newsletter.id}?tab=deliveries&status=${status}`);
+}
+function onExport() {
+    window.location.href = `/admin/newsletters/${props.newsletter.id}/deliveries.csv`;
+}
+</script>
+
+<style scoped>
+.show header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16px;
+}
+.show__meta {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 14px;
+    margin-top: 4px;
+}
+.show__tabs {
+    display: flex;
+    gap: 16px;
+    border-bottom: 1px solid var(--escalated-border, #e2e8f0);
+    margin-bottom: 16px;
+}
+.show__tabs a {
+    padding: 8px 4px;
+    color: var(--escalated-text-muted, #64748b);
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+}
+.show__tabs a.active {
+    color: var(--escalated-text, #0f172a);
+    border-bottom-color: var(--escalated-accent, #2563eb);
+}
+.status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.status--draft {
+    background: #f1f5f9;
+}
+.status--scheduled,
+.status--sending {
+    background: #e0f2fe;
+}
+.status--sent {
+    background: #dcfce7;
+}
+.status--paused {
+    background: #fef3c7;
+}
+.status--failed {
+    background: #fee2e2;
+}
+</style>

package/src/pages/Admin/Newsletters/Templates/Create.vue

@@ -0,0 +1,11 @@
+<template>
+    <TemplateShow :template="emptyTemplate" :themes="themes" :is-new="true" />
+</template>
+
+<script setup>
+import TemplateShow from './Show.vue';
+
+defineProps({ themes: { type: Array, required: true } });
+
+const emptyTemplate = { id: null, name: '', theme: 'default', subject_template: '', body_markdown: '' };
+</script>

package/src/pages/Admin/Newsletters/Templates/Index.vue

@@ -0,0 +1,54 @@
+<template>
+    <EscalatedLayout title="Templates">
+        <div class="templates-index">
+            <header>
+                <h1>{{ $t('newsletters.templates.title') }}</h1>
+                <Link href="/admin/newsletters/templates/new" class="button button--primary">
+                    {{ $t('newsletters.templates.new') }}
+                </Link>
+            </header>
+            <div class="templates-index__grid">
+                <Link v-for="t in templates" :key="t.id" :href="`/admin/newsletters/templates/${t.id}`" class="card">
+                    <h3>{{ t.name }}</h3>
+                    <div class="card__meta">Theme: {{ t.theme }}</div>
+                    <div class="card__meta">Updated: {{ new Date(t.updated_at).toLocaleDateString() }}</div>
+                </Link>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps({ templates: { type: Array, required: true } });
+</script>
+
+<style scoped>
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.templates-index__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 12px;
+}
+.card {
+    display: block;
+    padding: 16px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 8px;
+    background: white;
+    text-decoration: none;
+    color: inherit;
+}
+.card__meta {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+    margin-top: 4px;
+}
+</style>

package/src/pages/Admin/Newsletters/Templates/Show.vue

@@ -0,0 +1,65 @@
+<template>
+    <EscalatedLayout :title="isNew ? 'New template' : template.name">
+        <form class="templates-show" @submit.prevent="save">
+            <header>
+                <h1>{{ isNew ? $t('newsletters.templates.new') : template.name }}</h1>
+            </header>
+            <label>
+                {{ $t('newsletters.templates.columns.name') }}
+                <input v-model="form.name" required />
+            </label>
+            <label>
+                {{ $t('newsletters.templates.theme') }}
+                <select v-model="form.theme">
+                    <option v-for="t in themes" :key="t" :value="t">{{ t }}</option>
+                </select>
+            </label>
+            <label>
+                {{ $t('newsletters.templates.subject_template') }}
+                <input v-model="form.subject_template" />
+            </label>
+            <div class="editor-section">
+                <div class="editor-toolbar"><MergeFieldDropdown @insert="onInsert" /></div>
+                <MarkdownEditor ref="editorRef" v-model="form.body_markdown" />
+            </div>
+            <button type="submit">{{ $t('form.save') }}</button>
+        </form>
+    </EscalatedLayout>
+</template>
+
+<script setup>
+import EscalatedLayout from '../../../../components/EscalatedLayout.vue';
+import MarkdownEditor from '../../../../components/admin/newsletters/MarkdownEditor.vue';
+import MergeFieldDropdown from '../../../../components/admin/newsletters/MergeFieldDropdown.vue';
+import { reactive, ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    template: { type: Object, required: true },
+    themes: { type: Array, required: true },
+    isNew: { type: Boolean, default: false },
+});
+
+const form = reactive({ ...props.template });
+const editorRef = ref(null);
+
+function save() {
+    if (props.isNew) router.post('/admin/newsletters/templates', form);
+    else router.put(`/admin/newsletters/templates/${props.template.id}`, form);
+}
+function onInsert(path) {
+    editorRef.value?.insertMergeField(path);
+}
+</script>
+
+<style scoped>
+.templates-show {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 800px;
+}
+.editor-toolbar {
+    margin-bottom: 8px;
+}
+</style>

package/src/pages/Admin/Newsletters/usePreview.js

@@ -0,0 +1,44 @@
+import { ref, watch } from 'vue';
+
+/**
+ * Debounced HTTP preview composable for the newsletter compose form.
+ *
+ * @param {import('vue').Ref<object>} formRef — reactive form snapshot to POST as the preview payload
+ * @param {string} endpoint — POST URL that returns `{ html: string }`
+ */
+export function usePreview(formRef, endpoint) {
+    const html = ref('<p>(empty)</p>');
+    const loading = ref(false);
+    let timer = null;
+
+    watch(
+        formRef,
+        () => {
+            clearTimeout(timer);
+            loading.value = true;
+            timer = setTimeout(async () => {
+                try {
+                    const res = await fetch(endpoint, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest',
+                        },
+                        body: JSON.stringify(formRef.value),
+                    });
+                    if (res.ok) {
+                        const data = await res.json();
+                        html.value = data.html;
+                    }
+                } catch {
+                    // Swallow — preview is best-effort
+                } finally {
+                    loading.value = false;
+                }
+            }, 500);
+        },
+        { deep: true, immediate: true },
+    );
+
+    return { html, loading };
+}

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

@@ -5,6 +5,10 @@ import { ref, computed } from 'vue';
 
 const props = defineProps({
     plugins: { type: Array, default: () => [] },
+    // Backends that load plugins from uploaded ZIPs (e.g. Laravel) support the
+    // upload flow; backends where plugins are compiled host modules registered
+    // in config (e.g. Phoenix) pass can_upload: false to hide it.
+    can_upload: { type: Boolean, default: true },
 });
 
 const confirmingDelete = ref(null);
@@ -93,7 +97,7 @@ function statusLabel(plugin) {
                     {{ activePlugins.length }} active, {{ inactivePlugins.length }} inactive
                 </p>
             </div>
-            <div>
+            <div v-if="can_upload">
                 <input ref="fileInput" type="file" accept=".zip" class="hidden" @change="handleUpload" />
                 <button
                     :disabled="uploading"
@@ -144,9 +148,12 @@ function statusLabel(plugin) {
                 />
             </svg>
             <h3 class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">No plugins installed</h3>
-            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+            <p v-if="can_upload" class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
                 Upload a plugin ZIP to extend Escalated with custom functionality.
             </p>
+            <p v-else class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                Register a plugin in the host application to extend Escalated with custom functionality.
+            </p>
         </div>
 
         <!-- Plugin cards -->
@@ -234,6 +241,7 @@ function statusLabel(plugin) {
                                 </svg>
                                 Installed {{ plugin.installed_at }}
                             </span>
+                            <span v-if="plugin.module" class="font-mono">{{ plugin.module }}</span>
                         </div>
 
                         <!-- Provided extensions summary -->

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

@@ -1,132 +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>
+<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>