{/* Sidebar — narrow icon rail */}

{[ { i: , label: "Dashboard", active: true, href: "/" }, { i: , label: "Reports", active: false, href: "/report-agent" }]. map((it, i) => )}

{/* Main */}

{/* Topbar */}

Reports · Overview

Dashboard Tiket

Cari tiket, customer, agent... ⌘K

Hari ini · 19 Mei

{/* Content */}

{/* Combined KPI Strip — single horizontal card */}

{kpis.map((k, i) =>

{k.val}

{k.trendUp === true ? "↑" : k.trendUp === false ? "↑" : ""} {k.trend}

{k.label}

{k.hint}

{kpiMode === "spark" && } {kpiMode === "compare" && (

kemarin

{k.prev}

)}

{i < kpis.length - 1 &&

} )}

{/* Middle: Status Table + Issues per Agent */}

{/* Running Tickets Table */}

Status Tiket Berjalan

{D.running.length} tiket aktif sedang ditangani agent

{["All", "Open", "Pending", "Snoozed"].map((tab, i) => )}

{D.running.map((r) => { const ag = D.agents.find((a) => a.name === r.agent) || {}; return ( ); })}

No	Tiket	Subject	Agent	Priority	Status
{r.no}	{r.ticket}	{r.subject}	{r.agent}

{/* Issues per Agent */}

Issue per Agent

Jumlah issue diambil hari ini

{D.agents.reduce((a, b) => a + b.taken, 0)} total

{[...D.agents].sort((a, b) => b.taken - a.taken).map((a, i) => { const max = Math.max(...D.agents.map((x) => x.taken)); const pct = a.taken / max * 100; return (

{a.name}

{a.taken}

{a.resolved} closed

); })}

{/* Bottom: Unassigned + Closed */}

{/* Unassigned */}

Tiket Belum Di-Assign

{D.unassigned.length} tiket menunggu agent

{D.unassigned.slice(0, 5).map((u, i) =>

{u.id}

{u.subject}

{u.customer}

{u.age}

)}

{/* Closed */}

Tiket Sudah Closed

Diselesaikan dalam 24 jam terakhir

{D.stats.closed} closed

{D.closed.slice(0, 5).map((u, i) => { const ag = D.agents.find((a) => a.initials === u.agent) || {}; return (

{u.id}

{u.subject}

{u.agentName} · {u.resolvedIn}

{[1, 2, 3, 4, 5].map((n) => )}

); })}

); } function rowHead(C, rowPad) { return { textAlign: "left", padding: rowPad, fontSize: 10, fontWeight: 700, color: C.textMuted, textTransform: "uppercase", letterSpacing: 0.6 }; } function rowCell(C, rowPad) { return { padding: rowPad, fontSize: 12, color: C.text, verticalAlign: "middle" }; } function shiftColor(hex, pct) { const h = hex.replace("#", ""); const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); const f = (c) => Math.max(0, Math.min(255, Math.round(c + pct / 100 * 255))); return `#${[f(r), f(g), f(b)].map((x) => x.toString(16).padStart(2, "0")).join("")}`; } Object.assign(window, { DashboardClassic, ChatwootAvatar: Avatar, ChatwootStatusPill: StatusPill, ChatwootPriorityDot: PriorityDot, ChatwootPriorityPill: PriorityPill, ChatwootChannelIcon: ChannelIcon, ChatwootSpark: Spark, ChatwootIcons: { IconDashboard, IconChat, IconInbox, IconContacts, IconReports, IconCampaign, IconSettings, IconWA, IconMail, IconGlobe } });