);
}
function AttentionRail() {
const [showRecs, setShowRecs] = useState(false);
const cards = [
{ severity: "CRITICAL", headline: "Inbound calls dropped 18%", diagnostic: "411 vs 501 prior week", cta: "View actions", onCta: () => setShowRecs(true) },
{ severity: "WARNING", headline: "Avg wait time creeping up", diagnostic: "47s vs 32s last week", cta: "See queues" },
{ severity: "INSIGHT", headline: "Tuesday 2–4pm is your peak", diagnostic: "31% of weekly volume", cta: "Open schedule" },
{ severity: "POSITIVE", headline: "AI resolution up 8%", diagnostic: "62% auto-resolved · ~14 hrs saved", cta: "View details" }];
return (
AI Summary
{cards.map((c, i) => )}
{showRecs && setShowRecs(false)} />}
);
}
/* ────────────────────────────────────────────────────────────
Hero — primary metric + AI digest
──────────────────────────────────────────────────────────── */
function PrimaryMetric() {
const target = 70;
const value = 67;
return (
Service level todayOperations
{value}%
0%Target: {target}%
3% vs prior period
vs last week
);
}
function NarrativeDigest() {
const bullets = [
{ kind: "down", text: <>Service level slipped to 67% — below the 70% target for the first time in 6 weeks, driven by a 42% jump in missed calls. },
{ kind: "down", text: <>Tuesday 2–4pm peak is the pressure point — 31% of weekly volume lands there, and queue overflow caused most abandonment. },
{ kind: "up", text: <>CSAT climbed to 4.6 from 4.3 — fast answers are driving it: callers reached within 20s consistently rate calls higher. },
{ kind: "up", text: <>Sales dialer connect rate hit 34% vs 29% three weeks ago — local-presence numbers are paying off. }];
return (
{cols.flat().map((n) => {
const cy = labelPositions[n.id];
// Per-column label placement
let left, transformExtra = "";
if (n.col === 0) {
// Total Calls — sit just to the right of the bar (inside the chart)
left = `calc(${(n.x + nodeW) / w * 100}% + 8px)`;
} else if (n.col === 1) {
// Outbound / Inbound — 12px to the right of the bar
left = `calc(${(n.x + nodeW) / w * 100}% + 12px)`;
} else if (n.col === 3) {
// End column — pull labels closer to the bars
left = `calc(${(n.x + nodeW) / w * 100}% + 8px)`;
} else {
left = `calc(${(n.x + nodeW) / w * 100}% + 10px)`;
}
const top = `${cy / h * 100}%`;
const active = hover && (hover.kind === "node" ? hover.id === n.id :
(() => {
const p = paths.find((pp) => pp.key === hover.id);
return p && (p.flow.from.id === n.id || p.flow.to.id === n.id);
})());
return (
{n.label}
{fmt(n.value)}
);
})}
{hover &&
{hover.label}
{hover.value.toLocaleString()} calls · {Math.round(hover.value / 1200 * 100)}% of total
}
);
}
function CallActivity() {
return (
Call Activity
Call type distribution
Total 1,200 calls · this week
);
}
function ConversionTeam() {
return (
Operations & Team
);
}
// Mounted on demand by renderAnalyticsSub() when the Overview tab is opened.
// The surrounding sidebar and topbar come from the app shell in index.html —
// the original standalone version rendered its own copy, which is not used here.
window.mountAnalyticsOverview = function (el) {
if (!el || el.__mounted) return;
el.__mounted = true;
ReactDOM.createRoot(el).render();
};
})();