/* CRM Dashboard view — live metrics, pipeline, and recent data from the API */
const { useState: useDs, useEffect: useDse } = React;
function Metric({ lbl, val, sub }) {
return (
{lbl}
{val}
{sub &&
{sub}
}
);
}
/* Tiny sparkline — kept for future historical data */
function Spark({ data, color = "var(--accent)" }) {
if (!data || data.length < 2) return null;
const max = Math.max(...data);
const min = Math.min(...data);
const w = 200, h = 48;
const pts = data.map((d, i) => {
const x = (i / (data.length - 1)) * w;
const y = h - ((d - min) / (max - min || 1)) * (h - 4) - 2;
return `${x},${y}`;
}).join(" ");
return (
);
}
function Pipeline({ stages, hasData }) {
if (!hasData) {
return (
NO PIPELINE DATA YET · ADD LEADS TO BUILD YOUR FUNNEL
);
}
return (
{stages.map((s, i) => (
0{i+1} · {s.name}
{s.count}
{s.deals.map((d, j) => (
{d.name}
{d.amt}
{d.meta}
))}
{s.count === 0 && (
EMPTY
)}
))}
§ 03 / RECENT CUSTOMERSSHOWING {rows.length} OF {total}
{rows.length === 0 ? (
NO CUSTOMERS YET
) : (
NAME
COMPANY
STATUS
NOTES
{rows.map((r, i) => (
{r.name}
{r.company}
{r.chipText} {r.notes}
))}
)}
);
}
function MiniAgentStrip({ agents }) {
return (
§ 02 / AGENT STATUS{agents.filter(a => a.status !== "idle").length} ACTIVE
{agents.map((a, i) => (
))}
);
}
function Dashboard() {
const [leads, setLeads] = useDs([]);
const [customers, setCustomers] = useDs([]);
const [tasks, setTasks] = useDs([]);
const [logs, setLogs] = useDs([]);
const [loading, setLoading] = useDs(true);
useDse(() => {
Promise.all([
fetch(window.API_BASE + "/api/leads/").then(r => r.json()).catch(() => []),
fetch(window.API_BASE + "/api/customers/").then(r => r.json()).catch(() => []),
fetch(window.API_BASE + "/api/tasks/").then(r => r.json()).catch(() => []),
fetch(window.API_BASE + "/api/agent-logs/").then(r => r.json()).catch(() => []),
]).then(([l, c, t, lg]) => {
setLeads(Array.isArray(l) ? l : []);
setCustomers(Array.isArray(c) ? c : []);
setTasks(Array.isArray(t) ? t : []);
setLogs(Array.isArray(lg) ? lg : []);
setLoading(false);
});
}, []);
/* ── Computed metrics ─────────────────────────────────────────────────────── */
const openLeads = leads.filter(l => !["won", "lost"].includes(l.stage));
const pipeline = openLeads.reduce((s, l) => s + parseFloat(l.value || 0), 0);
const wonLeads = leads.filter(l => l.stage === "won");
const openTasks = tasks.filter(t => t.status !== "done").length;
/* ── Pipeline kanban from live leads ──────────────────────────────────────── */
const STAGE_ORDER = ["new", "contacted", "qualified", "proposal", "won"];
const STAGE_LABELS = { new:"New", contacted:"Contacted", qualified:"Qualified", proposal:"Proposal", won:"Won" };
const stageMap = {};
STAGE_ORDER.forEach(s => { stageMap[s] = []; });
leads.forEach(l => { if (stageMap[l.stage]) stageMap[l.stage].push(l); });
const pipelineStages = STAGE_ORDER.map((key, i) => ({
name: STAGE_LABELS[key],
count: stageMap[key].length,
deals: stageMap[key].slice(0, 2).map(l => ({
name: l.company || l.name || "—",
amt: parseFloat(l.value) > 0 ? `$${parseInt(l.value).toLocaleString()}` : "—",
meta: l.stage.toUpperCase(),
})),
}));
/* ── Recent customers for dashboard table ─────────────────────────────────── */
const dashCustomers = customers.slice(0, 5).map(c => ({
name: c.name || "—",
company: c.company || "—",
chip: c.status === "active" ? "accent" : c.status === "inactive" ? "" : "solid-accent",
chipText: (c.status || "—").toUpperCase(),
notes: c.notes ? c.notes.slice(0, 35) : "—",
}));
/* ── Agent strip — most recent unique agents from logs ────────────────────── */
const AGENT_KINDS = { PROCUREMENT:"procurement", FINANCE:"finance", PRODUCTION:"production", CLIENT:"client", ARIS:"aris" };
const seenKinds = new Set();
const agentItems = [];
for (const log of logs) {
const kind = AGENT_KINDS[log.agent] || "aris";
if (kind === "aris") continue;
if (!seenKinds.has(kind)) {
seenKinds.add(kind);
agentItems.push({
kind,
name: log.agent.charAt(0) + log.agent.slice(1).toLowerCase(),
task: (log.description || "—").slice(0, 45),
status: "active",
});
if (agentItems.length === 4) break;
}
}
// Fill any missing slots with idle defaults
const idleDefaults = [
{ kind:"procurement", name:"Procurement" },
{ kind:"finance", name:"Finance" },
{ kind:"production", name:"Production" },
{ kind:"client", name:"Client" },
];
for (const def of idleDefaults) {
if (!seenKinds.has(def.kind)) {
agentItems.push({ ...def, task:"Awaiting input", status:"idle" });
}
if (agentItems.length === 4) break;
}
const fmt = (n) => n > 0 ? `$${(n / 1000).toFixed(1)}k` : "—";
return (
<>
§ 02 / DASHBOARD
FIG_002 · OVERVIEW · LIVE
This week, at a glance.
Export
+ New deal
c.status === "active").length} active`} />
§ 01 / PIPELINE · FIG_A{leads.length} LEADS · {pipeline > 0 ? fmt(pipeline) : "EMPTY"}
{/* Summary count cards — replaces sparkline placeholders */}
§ 04A / LEADSALL TIME
{leads.length || "—"}
{openLeads.length} OPEN · {wonLeads.length} WON
§ 04B / CUSTOMERSALL TIME
{customers.length || "—"}
{customers.filter(c => c.status === "active").length} ACTIVE · {customers.filter(c => c.status === "prospect").length} PROSPECT
§ 04C / AGENT SESSIONSARIS LOG
{logs.length || "—"}
DISPATCH LOG · ALL AGENTS
);
}
Object.assign(window, { Metric, Spark, Pipeline, DashCustomerTable, MiniAgentStrip, Dashboard });