// Channels screen — paid media connection + unified performance const ChChannelCard = ({ brand, color, logo, accountId, tokenInfo, lastSync, stats, connected, onSync = () => {}, onDisconnect = () => {} }) => { if (!connected) return (
Connect a Channel
TikTok Ads, LinkedIn Ads, Pinterest —
coming soon
); return (
{logo}
{brand}
Connected
Account ID {accountId}
Token {tokenInfo.value}
Last synced {lastSync}
{stats.map(s => (
{s.value}
{s.label}
))}
); }; const ChKpi = ({ label, value, delta, dir, sparkSeed, color }) => (
{label}
{value}
{delta && (
{delta} vs prior
)}
); const ChDualChart = () => { const w = 640, h = 220, pad = 28; const n = 30; const spend = MOCK.spark(21).map(v => v * 0.8 + 0.4); const conv = MOCK.spark(22).map(v => v * 0.9 + 0.3); const maxS = Math.max(...spend), maxC = Math.max(...conv); const X = i => pad + (i / (n - 1)) * (w - pad * 2); const Ys = v => h - pad - (v / maxS) * (h - pad * 2); const Yc = v => h - pad - (v / maxC) * (h - pad * 2); const areaD = 'M' + X(0) + ' ' + Ys(spend[0]) + spend.slice(1).map((v, i) => ' L' + X(i + 1) + ' ' + Ys(v)).join('') + ` L ${X(n-1)} ${h-pad} L ${X(0)} ${h-pad} Z`; const lineD = 'M' + X(0) + ' ' + Yc(conv[0]) + conv.slice(1).map((v, i) => ' L' + X(i + 1) + ' ' + Yc(v)).join(''); return ( {[0, 0.25, 0.5, 0.75, 1].map(t => )} {conv.map((v, i) => )} ); }; const ChDonut = () => { const cx = 90, cy = 90, r = 60, sw = 18; const segs = [ { pct: 62, color: 'var(--accent)', label: 'Meta' }, { pct: 38, color: 'var(--cyan)', label: 'Google' }, ]; let off = 0; const circ = 2 * Math.PI * r; return ( {segs.map(s => { const len = (s.pct / 100) * circ; const el = ; off += len; return el; })} CONVERSIONS 1,247 ); }; // ── Multi-platform, multi-sub-tab table ────────────────────────────────────── const ChCampaignsTable = ({ platform = 'meta', sub = 'campaigns', statusFilter = 'all' }) => { const sf = statusFilter; const ctrC = v => v >= 2 ? 'var(--emerald)' : v >= 1 ? 'var(--amber)' : 'var(--rose)'; const roasC = v => v >= 3 ? '#c4b5fd' : v >= 1 ? 'var(--amber)' : 'var(--rose)'; const META_CAMPAIGNS = [ ['Q2 Prospecting — US', 'active', 'CONVERSIONS', 8420, 892000, 18400, 2.06, 412, 20.44, 4.2], ['Spring Retarget (meta)', 'active', 'CONVERSIONS', 5124, 412000, 11240, 2.73, 318, 16.11, 5.8], ['Lookalike 1% · Cart', 'active', 'CONVERSIONS', 4218, 389000, 7420, 1.91, 214, 19.71, 3.3], ['Brand Awareness — APAC', 'paused', 'REACH', 2980,1240000, 4210, 0.34, 18,165.55, 0.4], ['Holiday creative test', 'active', 'TRAFFIC', 1890, 184000, 5120, 2.78, 94, 20.11, 2.1], ['Cold audiences · Mobile', 'active', 'CONVERSIONS', 1215, 98000, 1840, 1.88, 52, 23.37, 2.8], ]; const META_ADSETS = [ ['US Prospecting · 25-44', 'Q2 Prospecting', 'active', 3200, 412000, 2.06, 182, 22.10], ['Retarget · Cart Abandoners', 'Spring Retarget', 'active', 1800, 298000, 1.84, 124, 14.52], ['Lookalike 1% · Purchasers', 'Q2 Prospecting', 'active', 2140, 184000, 2.73, 106, 20.19], ['Brand · 18-35 APAC', 'Brand Awareness APAC', 'paused', 980,1240000, 0.34, 18, 54.44], ['Cold · Mobile Shoppers', 'Cold · Mobile', 'active', 640, 98000, 1.88, 52, 12.31], ]; const META_ADS = [ ['Video 30s · Product Demo', 'US Prospecting · 25-44', 'active', 'VIDEO', 2840, 1.80, 98, 28.98], ['Carousel · 5 Products', 'Retarget · Cart Abandoners', 'active', 'CAROUSEL', 1920, 2.40,124, 15.48], ['Single Image · Price Promo', 'Lookalike 1%', 'active', 'IMAGE', 1102, 1.56, 64, 17.22], ['Story · Brand Awareness', 'Brand · 18-35 APAC', 'paused', 'STORY', 402, 0.28, 8, 50.25], ['Collection · Summer', 'Cold · Mobile', 'active', 'COLLECTION', 890, 1.91, 48, 18.54], ]; const META_AUDIENCES = [ ['Lookalike 1% · Purchasers', '2.1M', 'Lookalike', 'active', 412, 4.2], ['Custom · Website Visitors 30d', '48K', 'Custom', 'active', 318, 5.8], ['Lookalike 2% · Engagers', '4.8M', 'Lookalike', 'active', 214, 3.3], ['Saved · Brand Interest 25-44', '12.4M', 'Saved', 'active', 94, 2.1], ['Custom · Cart Abandoners 14d', '8.2K', 'Custom', 'paused', 52, 2.8], ]; const GOOGLE_CAMPAIGNS = [ ['Brand Search — US', 'active', 'SEARCH', 3124, 182000, 8420, 4.62, 284, 11.00, 6.2], ['Non-brand · Product Keywords','active', 'SEARCH', 2840, 98000, 4210, 4.30, 198, 14.34, 4.8], ['Shopping · All Products', 'active', 'SHOPPING', 2012, 412000, 5120, 1.24, 124, 16.23, 3.6], ['Performance Max · Summer', 'active', 'PMAX', 1840, 892000, 6840, 0.77, 84, 21.90, 3.1], ['RLSA · Past Purchasers', 'paused', 'SEARCH', 820, 28000, 1240, 4.43, 48, 17.08, 2.9], ['YouTube · Prospecting', 'active', 'VIDEO', 420,1240000, 2840, 0.23, 18, 23.33, 1.8], ]; const GOOGLE_KEYWORDS = [ ['marketing analytics software', 'Exact', 8, 412, 2.84, 48, 11.65, '$16.44'], ['customer journey tracking', 'Phrase', 7, 284, 2.40, 38, 13.38, '$17.74'], ['attribution software', 'Exact', 9, 198, 3.12, 32, 16.16, '$18.75'], ['ad performance dashboard', 'Broad', 6, 892, 1.84, 68, 7.62, '$24.12'], ['marketing os platform', 'Exact', 8, 124, 4.03, 22, 17.74, '$16.36'], ['multi-touch attribution', 'Phrase', 7, 312, 2.56, 40, 12.82, '$19.50'], ]; const GOOGLE_SEARCH = [ ['best marketing analytics tool 2025', 'Phrase', 284, 8420, 38, '$9.42'], ['customer journey analytics platform', 'Exact', 198, 4210, 32,'$14.38'], ['ad attribution tracking software', 'Broad', 124, 5120, 18,'$19.44'], ['multi-channel marketing analytics', 'Phrase', 312, 9840, 44,'$11.36'], ['marketing automation with AI', 'Broad', 892,28400, 64,'$13.94'], ['conversion tracking dashboard', 'Exact', 412,12000, 52, '$8.27'], ]; const GOOGLE_EXTENSIONS = [ ['Sitelink', 'Free Trial →', 1240, 3.84, 'active'], ['Sitelink', 'Pricing →', 892, 2.76, 'active'], ['Callout', 'AI-Powered Insights', 0, 0.00, 'active'], ['Structured Snippet','Features: Journey Map, Anomaly, AI Insights', 0, 0.00, 'active'], ['Image', 'Dashboard Hero', 412, 1.28, 'active'], ['Lead Form', 'Book a Demo', 284, 0.88, 'paused'], ]; const key = `${platform}:${sub}`; if (sub === 'campaigns') { const rows = (platform === 'meta' ? META_CAMPAIGNS : GOOGLE_CAMPAIGNS).filter(r => sf === 'all' || r[1] === sf); return (
{rows.map((r,i) => ( ))}
CampaignStatusObjective SpendImpr. ClicksCTR Conv.CPA ROAS
{r[0]} {r[1]} {r[2]} ${r[3].toLocaleString()} {(r[4]/1000).toFixed(0)}k {r[5].toLocaleString()} {r[6].toFixed(2)}% {r[7]} ${r[8].toFixed(2)} {r[9].toFixed(1)}x •••
); } if (key === 'meta:adsets') { const rows = META_ADSETS.filter(r => sf === 'all' || r[2] === sf); return (
{rows.map((r,i) => ( ))}
Ad SetCampaignStatusBudget/dReachCTRConv.CPA
{r[0]} {r[1]} {r[2]} ${r[3].toLocaleString()} {(r[4]/1000).toFixed(0)}k {r[5].toFixed(2)}% {r[6]} ${r[7].toFixed(2)}
); } if (key === 'meta:ads') { const rows = META_ADS.filter(r => sf === 'all' || r[2] === sf); return (
{rows.map((r,i) => ( ))}
Ad CreativeAd SetStatusFormatClicksCTRConv.CPA
{r[0]} {r[1]} {r[2]} {r[3]} {r[4].toLocaleString()} {r[5].toFixed(2)}% {r[6]} ${r[7].toFixed(2)}
); } if (key === 'meta:audiences') { const rows = META_AUDIENCES.filter(r => sf === 'all' || r[3] === sf); return (
{rows.map((r,i) => ( ))}
Audience NameSizeTypeStatusConv.ROAS
{r[0]} {r[1]} {r[2]} {r[3]} {r[4]} {r[5].toFixed(1)}x
); } if (key === 'google:keywords') { return (
{GOOGLE_KEYWORDS.map((r,i) => ( ))}
KeywordMatchQSClicksCPCConv.Conv. RateCPA
{r[0]} {r[1]} =8?'var(--emerald)':r[2]>=6?'var(--amber)':'var(--rose)',fontWeight:600}}>{r[2]}/10 {r[3].toLocaleString()} ${r[4].toFixed(2)} {r[5]} {r[6].toFixed(2)}% {r[7]}
); } if (key === 'google:search') { return (
{GOOGLE_SEARCH.map((r,i) => ( ))}
Search TermMatch TypeClicksImpr.Conv.CPA
{r[0]} {r[1]} {r[2].toLocaleString()} {r[3].toLocaleString()} {r[4]} {r[5]}
); } if (key === 'google:extensions') { const rows = GOOGLE_EXTENSIONS.filter(r => sf === 'all' || r[4] === sf); return (
{rows.map((r,i) => ( ))}
TypeContentClicksCTRStatus
{r[0]} {r[1]} {r[2].toLocaleString()} {r[3].toFixed(2)}% {r[4]}
); } return
No data available for this view.
; }; const ChannelsScreen = () => { const [tab, setTab] = React.useState('meta'); const [sub, setSub] = React.useState('campaigns'); const [dr, setDr] = React.useState('30d'); const [syncing, setSyncing] = React.useState(false); const [channelStatus, setChannelStatus] = React.useState(null); const [lastSync, setLastSync] = React.useState('2 hours ago'); const [syncError, setSyncError] = React.useState(null); const [performanceData, setPerformanceData] = React.useState(null); const [aiDismissed, setAiDismissed] = React.useState(false); const [statusFilter, setStatusFilter] = React.useState('all'); const [showAddModal, setShowAddModal] = React.useState(false); const [vsPrior, setVsPrior] = React.useState(true); const [requestingChannel, setRequestingChannel] = React.useState(null); const [requestSent, setRequestSent] = React.useState(false); React.useEffect(() => { arFetch('/v1/channels/status') .then(d => { if (d && typeof d === 'object') setChannelStatus(d); }) .catch(() => {}); }, []); React.useEffect(() => { const days = dr === '7d' ? 7 : dr === '90d' ? 90 : 30; const end = new Date(); const start = new Date(end.getTime() - days * 86400000); const fmt = d => d.toISOString().slice(0, 10); arFetch('/v1/channels/performance?start_date=' + fmt(start) + '&end_date=' + fmt(end)) .then(d => { if (Array.isArray(d) && d.length) setPerformanceData(d); }) .catch(() => {}); }, [dr]); const handleSyncAll = () => { setSyncing(true); setSyncError(null); arFetch('/v1/channels/sync', { method: 'POST', body: JSON.stringify({}) }) .then(() => arFetch('/v1/channels/status')) // FIX: only set lastSync after both fetches succeed .then(d => { if (d) setChannelStatus(d); setLastSync('just now'); }) .catch(err => { console.error('Channel sync failed:', err); setSyncError('Channel sync failed — API server offline. Showing cached data. (Pending: backend /v1/channels/sync endpoint)'); }) .finally(() => setSyncing(false)); }; // Switch platform tab and reset sub + filter to defaults const switchTab = (t) => { setTab(t); setSub('campaigns'); setStatusFilter('all'); }; return (
{/* Header */}
Platform / Channels
Channels
Manage paid media connections and AI-attributed performance
{syncError && (
⚠ {syncError} setSyncError(null)}>✕
)} {/* Status strip */}
Last sync: {channelStatus?.last_sync || lastSync}
Meta Ads Google Ads TikTok Ads
Next auto-sync: Tonight 02:00 UTC
{/* Connection cards */}
window.alert('Meta Ads disconnect is not yet available. Contact support to revoke access.')} /> window.alert('Google Ads disconnect is not yet available. Contact support to revoke access.')} />
{/* Performance overview header */}
Performance Overview
{['7d','30d','90d','Custom'].map(d => )}
vs prior period
setVsPrior(v => !v)} style={{cursor: 'pointer'}}/>
{/* KPI row */}
{/* AI Insights callout */} {!aiDismissed && ( Meta Ads contributed to 62% of conversions via multi-touch attribution — however, Google Search drove 3.1x higher-intent actors into your journey graph (avg 2.3 touchpoints before conversion). Consider reallocating 15% of Meta budget to Google Search.
)} {/* Charts */}
Spend vs Conversions
Last {dr === '7d' ? 7 : dr === '90d' ? 90 : 30} days · daily
Spend Conv. ROAS target
{['All','Meta Ads','Google Ads'].map(f => ( ))}
Channel Mix
Last 30 days
Meta Ads 62% · 773 · 3.9x
Google Ads 38% · 474 · 3.6x
Based on last-touch + AstraReach multi-touch model
{/* Deep dive tabs */}
{['meta','google'].map(t => ( ))}
{(tab==='meta' ? ['campaigns','adsets','ads','audiences'] : ['campaigns','keywords','search','extensions']).map(s => ( ))}
{['all','active','paused'].map(f => ( ))}
{/* Add Channel Modal */} {showAddModal && (
{ setShowAddModal(false); setRequestingChannel(null); setRequestSent(false); }}>
e.stopPropagation()}>
Add Channel
{requestSent ? (
✅
Request received!
We'll contact you within 2 business days about {requestingChannel} integration.
) : requestingChannel ? (
Request early access to {requestingChannel} integration. We'll configure your OAuth credentials and notify you when it's ready.
) : ( <>
Connect additional paid media platforms to unify performance data and AI attribution.
{[ {name:'TikTok Ads', logo:'♪', color:'#fff', bg:'#FE2C55', status:'early_access'}, {name:'LinkedIn Ads', logo:'in', color:'#fff', bg:'#0A66C2', status:'early_access'}, {name:'Pinterest Ads', logo:'P', color:'#fff', bg:'#E60023', status:'early_access'}, {name:'Snapchat Ads', logo:'👻', color:'#000', bg:'#FFFC00', status:'coming_soon'}, {name:'Twitter/X Ads', logo:'𝕏', color:'#fff', bg:'#000', status:'coming_soon'}, ].map(ch => (
{ch.logo}
{ch.name} {ch.status === 'early_access' ? ( ) : ( Coming Soon )}
))} )}
)}
); }; window.ChannelsScreen = ChannelsScreen;