// Vukasi's widgets: At-Risk Accounts, Neglected Accounts, My Tasks, // Creative Log Gaps, Account Wins, plus the Next-Steps modal body. const { Monogram, WidgetCard, Sparkline, Empty, ExtArrow } = window.DC; // ── At-Risk Accounts ──────────────────────────────────────────────────────── function AtRiskAccounts({ accounts, onOpenSteps }) { if (!accounts || accounts.length === 0) { return ( ); } const trendIsBad = (s) => s[s.length-1] > s[0]; // CPL going up = bad. We assume series is the "bad" metric return ( {accounts.length} flagged}>
{accounts.map(a => { const bad = trendIsBad(a.metricSeries); return (
{a.name}
{a.metricName}

{a.issue}

{a.metricSeries[0]} → {a.metricSeries[a.metricSeries.length-1]} lo {Math.min(...a.metricSeries)} · hi {Math.max(...a.metricSeries)}
); })}
); } // ── Next Steps Modal ──────────────────────────────────────────────────────── function NextStepsModal({ account, onClose }) { const [checked, setChecked] = useState({}); if (!account) return null; const toggle = (id) => setChecked(c => ({ ...c, [id]: !c[id] })); return (
Recommended actions

{account.name}

{/* The recs */}
    {account.nextSteps.map(s => (
  1. Action 0{s.priority}
    {s.text}
    2. ))}
{/* Evidence */}
Why · the data
{account.evidence.metrics.map(m => (
{m.k}
{m.v}
{m.delta}
))}
{account.evidence.recentCreatives && account.evidence.recentCreatives.length > 0 && (
Recent creatives
    {account.evidence.recentCreatives.map((c, i) => (
  • {c.name} {c.type} 14 ? 'var(--status-amber)' : 'var(--ink-soft)' }}>{c.age}d old
    • ))}
)} {account.evidence.recentClickup && account.evidence.recentClickup.length > 0 && (
ClickUp activity
    {account.evidence.recentClickup.map((a, i) => (
  • {a.date} {a.text}
    • ))}
)}
); } // ── Neglected Accounts ────────────────────────────────────────────────────── function NeglectedAccounts({ rows, onPickClient }) { const [sortKey, setSortKey] = useState('daysNeglected'); const [sortDir, setSortDir] = useState('desc'); const sorted = useMemo(() => { const a = [...rows]; a.sort((x, y) => { const xv = x[sortKey], yv = y[sortKey]; if (xv === yv) return 0; const cmp = xv < yv ? -1 : 1; return sortDir === 'asc' ? cmp : -cmp; }); return a; }, [rows, sortKey, sortDir]); const hdr = (k, l) => ( { if (sortKey === k) setSortDir(d => d === 'asc' ? 'desc' : 'asc'); else { setSortKey(k); setSortDir('desc'); } }} style={{ textAlign: 'left', padding: '8px 10px', fontWeight: 600, fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-soft)', borderBottom: '1px solid var(--border)' }}> {l}{sortKey === k ? {sortDir === 'asc' ? '↑' : '↓'} : null} ); if (rows.length === 0) { return ; } return ( {rows.length} accounts > 14d quiet}>
{hdr('name', 'Account')} {hdr('daysNeglected', 'Days neglected')} {hdr('lastActivity', 'Last activity')} {hdr('lastActivityDate', 'On')} {sorted.map(r => ( onPickClient(r.slug)} style={{ cursor: 'pointer', borderBottom: '1px solid var(--border-soft)' }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--paper-100)'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}> ))}
{r.name} 18 ? 'var(--status-red)' : r.daysNeglected > 14 ? 'var(--status-amber)' : 'var(--ink)', fontWeight: 600 }}>{r.daysNeglected}d {r.lastActivity} {r.lastActivityDate}
); } // ── My Tasks ──────────────────────────────────────────────────────────────── function MyTasks({ tasks }) { const sections = [ { k: 'overdue', l: 'Overdue', color: 'var(--status-red)' }, { k: 'today', l: 'Due today', color: 'var(--status-amber)' }, { k: 'this_week', l: 'This week', color: 'var(--ink-soft)' }, ]; return (
{sections.map(s => { const items = tasks.filter(t => t.status === s.k); if (items.length === 0) return null; return (
{s.l} {items.length}
); })} {tasks.length === 0 && }
); } // ── Creative Log Gaps (sortable table) ────────────────────────────────────── function CreativeLogGaps({ rows }) { const [sortKey, setSortKey] = useState('daysSinceLastCreative'); const [sortDir, setSortDir] = useState('desc'); const sorted = useMemo(() => { const a = [...rows]; a.sort((x, y) => { const xv = x[sortKey], yv = y[sortKey]; if (xv === yv) return 0; const cmp = xv < yv ? -1 : 1; return sortDir === 'asc' ? cmp : -cmp; }); return a; }, [rows, sortKey, sortDir]); const hdr = (k, l) => ( { if (sortKey === k) setSortDir(d => d === 'asc' ? 'desc' : 'asc'); else { setSortKey(k); setSortDir('desc'); } }} style={{ textAlign: 'left', padding: '8px 10px', fontWeight: 600, fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-soft)', borderBottom: '1px solid var(--border)' }}> {l}{sortKey === k ? {sortDir === 'asc' ? '↑' : '↓'} : null} ); return (
{hdr('name', 'Account')} {hdr('daysSinceLastCreative', 'Days since')} {hdr('lastCreativeType', 'Last type')} {sorted.map(r => ( 14 ? 'var(--status-amber-soft)' : 'transparent', }}> ))}
{r.name} 14 ? '#7a5605' : 'var(--ink)' }}>{r.daysSinceLastCreative}d {r.lastCreativeType}
{rows.length === 0 && } ); } // ── Account Wins ──────────────────────────────────────────────────────────── function AccountWins({ wins }) { if (!wins || wins.length === 0) { return ; } return ( {wins.length} above target}>
{wins.map(w => (
{w.name}
{w.value} {w.vsTarget}
{w.metric}
))}
); } window.DC = Object.assign(window.DC || {}, { AtRiskAccounts, NextStepsModal, NeglectedAccounts, MyTasks, CreativeLogGaps, AccountWins, });