{(value*100).toFixed(0)}%

); } function SortHeader({ col, sort, setSort }){ const active = sort.id===col.id; return ( ); } function AdSetRow({ as, accent, toggleStatus, readOnly }){ const paused = as.status === 'paused'; return (

AS {as.name}

toggleStatus(as.id)} size="sm"/>

—

{fmt(as.spend,'currency')}

{fmt(as.cpa,'currency2')}

{!roasHidden() && }

{fmt(as.cpc,'currency2')}

{(as.ctr||0).toFixed(2)}%

{(as.conv||0).toLocaleString()}

); } function CampaignRow({ c, expanded, toggleExpand, toggleStatus, readOnly }){ const paused = c.status === 'paused'; const accent = (PLATFORMS.find(p=>p.id===c.platform)||PLATFORMS[0]).tone; /* No synthetic sparklines — cells show real range values only. */ const funnel = useMemo(()=>campaignFunnel(c), [c.id, c.spend, c.conv]); return (

{!paused && } {paused && } {c.name} {(()=>{ const parts = String(c.id||'').split('_'); return parts.length >= 2 ? parts[parts.length-2] + '-' + parts[parts.length-1] : (c.id || ''); })()}

toggleStatus(c.id)} size="sm"/> {paused?'Paused':'Active'}

{fmt(c.budget,'currency')}

{fmt(c.spend,'currency')} {fmt(c.cpa,'currency2')} {!roasHidden() && } {fmt(c.cpc,'currency2')} {(c.ctr||0).toFixed(2)}% {(c.conv||0).toLocaleString()}

{expanded && (

{/* Funnel strip */} {/* Ad sets */}

Ad sets · {(c.adsets||[]).length}

{(c.adsets||[]).map(as => )}

)}

); } function CampaignTable({ accountId, platformId, search='', onOpenColumns, canEdit=true }){ const readOnly = !canEdit; const baseCampaigns = useMemo(()=>getCampaigns(accountId, platformId), [accountId, platformId]); /* Local state: status & expansion */ const [statusMap, setStatusMap] = useState({}); // id -> 'active' | 'paused' useEffect(()=>{ setStatusMap({}); setExpanded({}); }, [accountId, platformId]); const [expanded, setExpanded] = useState({}); const toggleExpand = (id)=> setExpanded(s => ({...s, [id]: !s[id]})); const toggleStatus = (id) => { if(readOnly) return; setStatusMap(s => { const current = s[id]; const all = [...baseCampaigns, ...baseCampaigns.flatMap(c=>c.adsets||[])]; const it = all.find(x => x.id===id); const base = it?.status; const isActive = current ? current === 'active' : base === 'active'; return { ...s, [id]: isActive ? 'paused' : 'active' }; }); }; const applyStatus = (it) => { const ov = statusMap[it.id]; return ov ? { ...it, status: ov } : it; }; const campaigns = useMemo(()=>baseCampaigns.map(c=>{ const cc = applyStatus(c); cc.adsets = (c.adsets||[]).map(applyStatus); return cc; }), [baseCampaigns, statusMap]); /* Sort */ const [sort, setSort] = useState({ id:'spend', dir:'desc' }); const sorted = useMemo(()=>{ const arr = [...campaigns]; arr.sort((a,b)=>{ const va = a[sort.id], vb = b[sort.id]; if (typeof va === 'string') return sort.dir==='asc' ? va.localeCompare(vb) : vb.localeCompare(va); return sort.dir==='asc' ? (va||0) - (vb||0) : (vb||0) - (va||0); }); return arr; }, [campaigns, sort]); /* Search filter */ const filtered = useMemo(()=>{ if (!search.trim()) return sorted; const q = search.toLowerCase(); return sorted.filter(c => (c.name||'').toLowerCase().includes(q) || (c.adsets||[]).some(a => (a.name||'').toLowerCase().includes(q))); }, [sorted, search]); /* Totals */ const totals = useMemo(()=>{ return filtered.reduce((t,c)=>({ spend: t.spend + (c.spend||0), conv: t.conv + (c.conv||0), budget:t.budget+ (c.budget||0), }), { spend:0, conv:0, budget:0 }); }, [filtered]); return (

{/* Header bar */}

Campaigns

{filtered.length} of {baseCampaigns.length} Spend {fmt(totals.spend,'currency')} · Conv. {totals.conv.toLocaleString()}

Filters Columns New campaign

{/* Column headers + body share ONE horizontal scroll container so columns stay aligned */}

{DEFAULT_COLS.filter(col => !(col.id==='roas' && roasHidden())).map(col => (

))}

{/* Body */}

{filtered.length === 0 && (

{baseCampaigns.length === 0 ? <>No campaigns yet — connect a data source or import data in Admin → Integrations. : <>No campaigns match "{search}"}

)} {filtered.map(c => ( ))}

); } Object.assign(window, { CampaignTable, MicroSpark, RoasCell, NumCell });