// Report Screen — KPI grid, creator cards/table, strategy panel function KpiCard({ label, value, sublabel, tone = 'neutral' }) { const accent = { neutral:'var(--ink-900)', brand:'var(--lime-500)', approve:'var(--approve-solid)', maybe:'var(--maybe-solid)', reject:'var(--reject-solid)', pending:'var(--pending-solid)' }[tone]; return (
{label} {value} {sublabel && {sublabel}}
); } function Avatar({ name='', platform }) { const PAL = [['#E7F0C8','#5C6B14'],['#DCEBF3','#2A5C7C'],['#F7DDD4','#93311F'],['#FAEBCF','#8A5A0C'],['#DCF3E3','#146B3A']]; let h=0; for(let i=0;i>>0; const [bg,fg]=PAL[h%PAL.length]; const clean=name.replace(/^@/,'').replace(/[._-]+/g,' ').trim(); const parts=clean.split(/\s+/); const init=((parts[0]?.[0]||'')+(parts[1]?.[0]||'')).toUpperCase()||clean.slice(0,2).toUpperCase(); return (
{init}
{platform && {platform==='ig'?'IG':'TT'}}
); } function ScoreBar({ label, value, tone='auto' }) { const pct = Math.max(0, Math.min(100, value)); const c = { auto: pct>=80?'var(--approve-solid)':pct>=60?'var(--maybe-solid)':pct>=40?'var(--pending-solid)':'var(--reject-solid)', brand:'var(--lime-500)' }[tone] || (pct>=80?'var(--approve-solid)':pct>=60?'var(--maybe-solid)':'var(--reject-solid)'); return (
{label}{value}
); } function CreatorCardFull({ creator }) { const [expanded, setExpanded] = React.useState(false); const [shortlisted, setShortlisted] = React.useState(false); const fmt = n => n>=1e6?(n/1e6).toFixed(1)+'M':n>=1e3?(n/1e3).toFixed(n%1e3===0?0:1)+'K':String(n); return (
{/* Header */}
{creator.username} {creator.platform==='ig'?'Instagram':'TikTok'}
{fmt(creator.followers)} Follower {creator.engagement!=null && <>·{creator.engagement}% ER}
{/* Scores */}
{/* DNA */} {creator.dna &&
Creator DNA

{creator.dna}

} {/* Expanded */} {expanded && (
{creator.reasoning && (
AI Reasoning

{creator.reasoning}

)} {creator.risks?.length > 0 && (
Risiko-Hinweise
{creator.risks.map((r,i) => (
{Icons.warn}{r}
))}
)}
)} {/* Contact */}
{creator.email ? {creator.email} : {creator.contact||'Keine E-Mail'}}
creator.email && navigator.clipboard?.writeText(creator.email)} /> creator.platformUrl && window.open(creator.platformUrl, '_blank', 'noopener,noreferrer')} />
{/* Actions */}
setShortlisted(s=>!s)} style={{ flex:1 }}> {shortlisted ? '✓ Shortlist' : 'Zur Shortlist'} setExpanded(e=>!e)} style={{ flex:1 }}>{expanded?'Weniger':'Details'} Ablehnen
); } function TableView({ creators }) { const fmt = n => n>=1e3?(n/1e3).toFixed(n%1e3===0?0:1)+'K':String(n); return (
{['Plattform','Username','Follower','Match','Priority','ER','Empfehlung','E-Mail','Aktion'].map(h => ( ))} {creators.map((c, ri) => ( ))}
{h}
{c.platform==='ig'?'IG':'TT'} {c.username} {fmt(c.followers)} {c.matchScore} {c.priorityScore} {c.engagement}% {c.email ? ✓ : '—'}
c.platformUrl && window.open(c.platformUrl, '_blank', 'noopener,noreferrer')} /> c.email && navigator.clipboard?.writeText(c.email)} />
); } function StrategyPanel({ campaign }) { return (
Kampagne
{[ ['Brief', campaign.brief], ['Plattformen', Array.isArray(campaign.platforms) ? campaign.platforms.join(' & ') : campaign.platforms], ['Region', campaign.region], ['Follower', `${campaign.followerMin || 0} – ${campaign.followerMax || '∞'}`], ['Modus', campaign.analysisMode], ].map(([k,v]) => (
{k} {v}
))}
Generierte Hashtags
{campaign.hashtags.map(h => ( {h} ))}
Ideale Creator-Persona

{campaign.persona}

Content Red Flags
{campaign.redFlags.map(f => ( {f} ))}
); } function EmptyReport({ normalized, onNew }) { return (
Kein echter Report vorhanden
Es werden keine Sample- oder Platzhalterdaten angezeigt.
Neue Kampagne
{Icons.info}
Empty State

Starte einen Preflight-bestätigten Job oder öffne einen vorhandenen Run. Ohne Backend-Ergebnis bleibt der Report leer.

{normalized.stopReason &&
Stop-Grund
{normalized.stopReason}
} {normalized.missing?.length > 0 &&
Missing Config
{normalized.missing.map((item)=> {item})}
} {normalized.diagnostics?.length > 0 &&
Diagnostics
{normalized.diagnostics.map((item)=> {item})}
} {normalized.campaign?.hashtags?.length > 0 &&
Suchqueries
{normalized.campaign.hashtags.map((item)=> {item})}
}
); } function downloadText(filename, text, type='application/json') { const blob = new Blob([text], { type }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); } function csvEscape(value) { return `"${String(value ?? '').replace(/"/g, '""')}"`; } function ReportScreen({ onNew, reportData }) { const [view, setView] = React.useState('cards'); const normalized = window.DiscoveryApi.normalizeReport(reportData); const { creators, campaign, kpis } = normalized; const hasReport = Boolean(reportData) && (creators.length > 0 || normalized.status !== 'empty'); const downloadJson = () => downloadText(`${normalized.runId || 'discovery-report'}.json`, JSON.stringify(reportData, null, 2)); const downloadCsv = () => { const rows = [['platform','username','followers','matchScore','priorityScore','email','profileUrl'], ...creators.map((c)=>[c.platform,c.username,c.followers,c.matchScore,c.priorityScore,c.email,c.platformUrl])]; downloadText(`${normalized.runId || 'discovery-creators'}.csv`, rows.map((row)=>row.map(csvEscape).join(',')).join('\n'), 'text/csv'); }; if (!hasReport || creators.length === 0) return ; return (
{/* Top bar */}
Report — Influencer Discovery
{Array.isArray(campaign.platforms) ? campaign.platforms.join(' & ') : campaign.platforms} · {campaign.region} · {campaign.followerMin || 0}–{campaign.followerMax || '∞'} Follower · {campaign.analysisMode}
CSV JSON Neue Kampagne
{/* KPIs */}
{/* Tabs */}
{[['cards','Creator-Karten'],['table','Tabellenansicht'],['strategy','Suchstrategie']].map(([id,lbl]) => ( ))}
{/* Content */} {view === 'cards' && (
{creators.map(c => )}
)} {view === 'table' && } {view === 'strategy' && }
); } Object.assign(window, { ReportScreen });