// ============================================================= // Dashboard — KPIs, charts, AI insights, recent activity. All live. // ============================================================= const KpiCard = ({ label, value, delta, deltaKind = 'up', spark, color = '#E07A5F' }) => (
{label} {delta && ( {delta} )}
{value}
{spark &&
}
); const RevenueChart = () => { const data = window.REVENUE_BY_MONTH || []; if (!data.length) return
No data yet
; const W = 720, H = 220, pad = 32; const max = Math.max(...data.map((d) => Math.max(d.booked, d.target)), 1) * 1.1; const bw = (W - pad * 2) / data.length; return ( {[0, 0.25, 0.5, 0.75, 1].map((p, i) => ( {Math.round(max * p / 1000)}k ))} {data.map((d, i) => { const x = pad + bw * i + bw * 0.2; const w = bw * 0.6; const bh = (d.booked / max) * (H - pad * 2); const th = (d.target / max) * (H - pad * 2); const isPartial = i === data.length - 1; return ( {d.m} ); })} — target ); }; const FunnelChart = () => { const data = window.FUNNEL || []; if (!data.length) return null; const max = data[0].count || 1; return (
{data.map((d, i) => { const w = (d.count / max) * 100; const conv = i === 0 ? 100 : (d.count / Math.max(1, data[i - 1].count)) * 100; return (
{d.stage}
{d.count.toLocaleString()}
{conv.toFixed(0)}%
); })}
); }; const SourcesPie = () => { const data = window.SOURCES || []; if (!data.length) return
No sources yet
; const total = data.reduce((s, x) => s + x.value, 0) || 1; let acc = 0; const cx = 70, cy = 70, r = 55, ir = 36; return (
{data.map((s, i) => { const a0 = (acc / total) * Math.PI * 2 - Math.PI / 2; acc += s.value; const a1 = (acc / total) * Math.PI * 2 - Math.PI / 2; const x0 = cx + Math.cos(a0) * r, y0 = cy + Math.sin(a0) * r; const x1 = cx + Math.cos(a1) * r, y1 = cy + Math.sin(a1) * r; const xi0 = cx + Math.cos(a0) * ir, yi0 = cy + Math.sin(a0) * ir; const xi1 = cx + Math.cos(a1) * ir, yi1 = cy + Math.sin(a1) * ir; const large = (a1 - a0) > Math.PI ? 1 : 0; const d = `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${ir} ${ir} 0 ${large} 0 ${xi0} ${yi0} Z`; return ; })}
{data.map((s, i) => (
{s.src}
{s.value}%
))}
); }; const ActivityFeed = ({ items }) => (
{items.map((a, i) => { const iconMap = { email: 'mail', meeting: 'meeting', note: 'note', deal: 'money', call: 'phone', ai: 'sparkle' }; const colorMap = { email: '#3D5A80', meeting: '#6B4E71', note: '#7A7670', deal: '#588157', call: '#D4A373', ai: '#E07A5F' }; return (
{a.title}
{a.body &&
{a.body}
}
{a.time}
); })}
); // ───────────────────────────────────────────────────────────────────────── // Lead-focused dashboard widgets (vendor pipeline, calls, follow-ups, etc.) // ───────────────────────────────────────────────────────────────────────── const startOfDay = (d = new Date()) => { const x = new Date(d); x.setHours(0,0,0,0); return x.getTime(); }; const startOfWeek = () => { const x = new Date(); x.setDate(x.getDate() - x.getDay()); x.setHours(0,0,0,0); return x.getTime(); }; const LeadKpiCard = ({ label, value, sub, accent, icon, onClick, deltaKind, delta }) => (
{icon && } {label}
{delta != null && {delta}}
{value}
{sub &&
{sub}
}
); const HBars = ({ rows, color = 'var(--accent)' }) => { const max = Math.max(1, ...rows.map((r) => r.value)); return (
{rows.map((r, i) => (
{r.label}
{r.value}
))} {rows.length === 0 &&
No data yet.
}
); }; const fmtRelDay = (ms) => { if (!ms) return '—'; const d = Math.floor((Date.now() - ms) / 86_400_000); if (d <= 0) return 'today'; if (d === 1) return 'yesterday'; if (d < 7) return d + 'd ago'; if (d < 30) return Math.floor(d / 7) + 'w ago'; return new Date(ms).toLocaleDateString(); }; const Dashboard = ({ openAI, setRoute }) => { const summary = window.DASH_SUMMARY || {}; const insights = window.AI_INSIGHTS || []; const today = new Date(); const weekday = today.toLocaleDateString('en-US', { weekday: 'long' }); const month = today.toLocaleDateString('en-US', { month: 'long', day: 'numeric' }); const me = (window.TEAM || []).find((u) => (u.name || '').startsWith('You')); const myFirstName = me ? me.name.replace(/^You \(/, '').replace(/\)$/, '').split(' ')[0] : 'there'; const pipe = summary.pipeline_value || 0; // ── Lead metrics derived from the loaded store ────────────────────────── const contacts = window.CONTACTS || []; const deals = window.DEALS || []; const stages = window.STAGES || []; const tasks = window.TASKS || []; const contactsByStatus = React.useMemo(() => { const m = new Map(); contacts.forEach((c) => { const k = c.status || 'new'; m.set(k, (m.get(k) || 0) + 1); }); return m; }, [contacts]); const cityRows = React.useMemo(() => { const m = new Map(); contacts.forEach((c) => { if (c.city) m.set(c.city, (m.get(c.city) || 0) + 1); }); return [...m.entries()].sort((a, b) => b[1] - a[1]).slice(0, 8).map(([label, value]) => ({ label, value })); }, [contacts]); const stageRows = React.useMemo(() => { return stages.map((s) => ({ label: s.name, value: deals.filter((d) => d.stage === s.id).length, color: s.color, })); }, [stages, deals]); const wonStageIds = new Set(stages.filter((s) => s.isWon).map((s) => s.id)); const lostStageIds = new Set(stages.filter((s) => s.isLost).map((s) => s.id)); const openDeals = deals.filter((d) => !wonStageIds.has(d.stage) && !lostStageIds.has(d.stage)); const wonDeals = deals.filter((d) => wonStageIds.has(d.stage)); const lostDeals = deals.filter((d) => lostStageIds.has(d.stage)); const openPipelineValue = openDeals.reduce((s, d) => s + (d.amount || 0), 0); const wonValue = wonDeals.reduce((s, d) => s + (d.amount || 0), 0); const conversionPct = contacts.length ? Math.round((wonDeals.length / contacts.length) * 100) : 0; const todayMs = startOfDay(); const tomorrowMs = todayMs + 86_400_000; const weekMs = startOfWeek(); const overdueTasks = tasks.filter((t) => !t.done && t.due && new Date(t.due).getTime() < todayMs); const todayTasks = tasks.filter((t) => !t.done && t.due && new Date(t.due).getTime() >= todayMs && new Date(t.due).getTime() < tomorrowMs); const upcomingFollowups = tasks .filter((t) => !t.done && t.due) .sort((a, b) => new Date(a.due).getTime() - new Date(b.due).getTime()) .slice(0, 6); // ── Calls — fetched once on mount ────────────────────────────────────── const [calls, setCalls] = React.useState([]); React.useEffect(() => { api('/api/calls?limit=200').then(setCalls).catch(() => setCalls([])); }, [contacts.length]); // re-fetch if contacts change (e.g. after refreshStore) const callsToday = calls.filter((c) => c.created_at >= todayMs).length; const callsWeek = calls.filter((c) => c.created_at >= weekMs).length; const talkSecToday = calls.filter((c) => c.created_at >= todayMs).reduce((s, c) => s + (c.duration_sec || 0), 0); const interestedToday = calls.filter((c) => c.created_at >= todayMs && c.outcome === 'interested').length; // Daily call volume for last 7 days (sparkline) const dailyCalls = React.useMemo(() => { const days = Array.from({ length: 7 }, (_, i) => startOfDay(new Date(Date.now() - (6 - i) * 86_400_000))); return days.map((dStart) => calls.filter((c) => c.created_at >= dStart && c.created_at < dStart + 86_400_000).length); }, [calls]); const recentLeads = [...contacts].sort((a, b) => (b.raw_id || 0) - (a.raw_id || 0)).slice(0, 6); const recentCalls = calls.slice(0, 6); const tasksOpen = tasks.filter((t) => !t.done).slice(0, 5); const fmtTalk = (sec) => { if (!sec) return '0m'; const m = Math.floor(sec / 60), s = sec % 60; return m + 'm' + (s ? ' ' + s + 's' : ''); }; return (
{weekday}, {month} · Live data

Good morning, {myFirstName}.

{contacts.length} leads, {openDeals.length} open deals,{' '} {callsToday} calls today, {overdueTasks.length} overdue.
{/* ── Lead KPI grid (8 cards) ─────────────────────────────────────── */}
setRoute('contacts')} /> setRoute('deals')} /> setRoute('deals')} />
setRoute('contacts')} /> setRoute('followUps')} /> setRoute('followUps')} />
{/* ── Lead-state breakdown row ────────────────────────────────────── */}
Leads by status
{contacts.length}
r.value > 0)} />
Pipeline by stage
{deals.length} deals
r.value > 0)} />
Top cities
{cityRows.length}
{/* ── Daily call volume + Recent leads + Recent calls ─────────────── */}
Calls · last 7 days
{dailyCalls.reduce((s, n) => s + n, 0)}
6d ago5d4d3d2d1dtoday
Recent leads
{recentLeads.map((c, i) => (
setRoute('contacts')}>
{c.name}
{c.businessType || c.title || '—'} · {c.city || '—'}
{c.status}
))} {recentLeads.length === 0 &&
No leads yet.
}
Recent calls
{calls.length}
{recentCalls.map((h, i) => (
{h.vendor_name || '—'}
{h.disposition || '—'} · {fmtTalk(h.duration_sec)} · {fmtRelDay(h.created_at)}
{h.outcome && {h.outcome}}
))} {recentCalls.length === 0 &&
No calls logged yet.
}
{/* ── Upcoming follow-ups + Overdue ──────────────────────────────── */}
Upcoming follow-ups
{upcomingFollowups.map((t, i) => (
{ await api(`/api/tasks/${t.raw_id}`, { method: 'PUT', body: { completed: true } }); await refreshStore(); }} />
{t.title}
{t.due || 'no due date'} · {t.type}
{t.priority}
))} {upcomingFollowups.length === 0 &&
Nothing pending. 🎉
}
Overdue · {overdueTasks.length}
{overdueTasks.length > 0 && action needed}
{overdueTasks.slice(0, 6).map((t, i) => (
{ await api(`/api/tasks/${t.raw_id}`, { method: 'PUT', body: { completed: true } }); await refreshStore(); }} />
{t.title}
{t.due ? 'Due ' + fmtRelDay(new Date(t.due).getTime()) : 'no due date'}
{t.priority}
))} {overdueTasks.length === 0 &&
Nothing overdue. ✨
}
Revenue vs target
Booked revenue against monthly quota — last 7 months
Booked Target
Pipeline sources
{insights.length > 0 && (
AI Insights {insights.length} things to consider
{insights.slice(0, 3).map((c, i) => (
{c.title}
{c.body}
))}
)}
Funnel · last 90 days
{(window.FUNNEL || [])[0]?.count.toLocaleString() || 0} → {(window.FUNNEL || []).slice(-1)[0]?.count.toLocaleString() || 0}
Today & tomorrow
{tasksOpen.map((t, i) => (
{ await api(`/api/tasks/${t.raw_id}`, { method: 'PUT', body: { completed: true } }); await refreshStore(); }} />
{t.title}
{t.due || 'no due date'} · {t.owner}
{t.priority}
))} {tasksOpen.length === 0 &&
Nothing due. 🌤
}
Recent activity
); }; window.Dashboard = Dashboard; window.ActivityFeed = ActivityFeed; window.FunnelChart = FunnelChart;