/* screen_marketing_clipping.jsx Marketing · Clipping — observatório de presença externa. Menções, sentimento, share of voice, concorrência, alertas. Expõe window.MktClippingScreen. Nomes JSX únicos (Clip*) — Babel partilha scope entre scripts. */ const CLIP_BASE = '/api/marketing/clipping'; const CLIP_MARCAS = [ { slug: 'mimaki', label: 'Mimaki' }, { slug: 'biond', label: 'BIOND' }, { slug: 'decal', label: 'Decal' }, { slug: 'sensek', label: 'Sensek' }, { slug: 'alldecor', label: 'AllDecor' }, { slug: 'netscreen', label: 'NetScreen' }, ]; const CLIP_MARCA_TOKEN = { mimaki: 'var(--danger)', biond: 'var(--success)', decal: 'var(--warning)', sensek: 'var(--ai-500)', alldecor: 'var(--brand-500)', netscreen: 'var(--brand-700)', }; const CLIP_MARCA_LABEL = Object.fromEntries(CLIP_MARCAS.map(m => [m.slug, m.label])); const CLIP_FONTES = [ ['web', 'Web'], ['imprensa', 'Imprensa'], ['linkedin', 'LinkedIn'], ['instagram', 'Instagram'], ['facebook', 'Facebook'], ['twitter', 'X / Twitter'], ['tiktok', 'TikTok'], ['reddit', 'Reddit'], ['forum', 'Fórum'], ['google_alerts', 'Google Alerts'], ]; const CLIP_FONTE_LABEL = Object.fromEntries(CLIP_FONTES); const CLIP_SENT = { positivo: { label: 'Positivo', color: 'var(--success)', bg: 'color-mix(in oklch, var(--success) 14%, transparent)' }, neutro: { label: 'Neutro', color: 'var(--text-dim)', bg: 'var(--bg-sunken)' }, negativo: { label: 'Negativo', color: 'var(--danger)', bg: 'color-mix(in oklch, var(--danger) 14%, transparent)' }, }; const CLIP_INSIGHT = { amplificar: { label: 'Amplificar', color: 'var(--success)' }, responder: { label: 'Responder', color: 'var(--warning)' }, crisis: { label: 'Crise', color: 'var(--danger)' }, oportunidade_pr: { label: 'Oportunidade PR', color: 'var(--ai-500)' }, movimento_concorrente: { label: 'Movimento concorrente', color: 'var(--brand-700)' }, monitorizar: { label: 'Monitorizar', color: 'var(--text-dim)' }, }; const CLIP_ALERT_TIPOS = [ ['keyword', 'Keyword'], ['sentiment_negativo', 'Sentimento negativo'], ['volume_pico', 'Volume pico'], ['concorrente_menciona', 'Concorrente menciona'], ['crisis', 'Crise'], ]; const CLIP_INPUT = { fontSize: 12, padding: '7px 10px', borderRadius: 6, background: 'var(--bg-elev)', border: '1px solid var(--border)', color: 'var(--text)', width: '100%', boxSizing: 'border-box', fontFamily: 'inherit', }; const CLIP_LABEL = { fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 4, fontFamily: 'var(--font-mono)', }; const CLIP_TH = { textAlign: 'left', padding: '8px 12px', fontSize: 10, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--text-muted)', whiteSpace: 'nowrap', }; async function clipApiCall(url, options = {}) { let res; try { res = await fetch(url, { headers: { 'Content-Type': 'application/json' }, ...options }); } catch (e) { throw new Error(`Erro de rede: ${e.message}`); } if (!res.ok) { let body = {}; try { body = await res.json(); } catch {} throw new Error(body.error || `HTTP ${res.status}`); } if (res.status === 204) return { ok: true }; return res.json(); } const ClipAPI = { dashboard: (p) => clipApiCall(`${CLIP_BASE}/dashboard?${new URLSearchParams(p || {})}`), mencoes: (p) => clipApiCall(`${CLIP_BASE}/mencoes?${new URLSearchParams(p || {})}`), mencao: (id) => clipApiCall(`${CLIP_BASE}/mencoes/${id}`), criarMencao: (body) => clipApiCall(`${CLIP_BASE}/mencoes`, { method: 'POST', body: JSON.stringify(body) }), patchMencao: (id, body) => clipApiCall(`${CLIP_BASE}/mencoes/${id}`, { method: 'PATCH', body: JSON.stringify(body) }), delMencao: (id) => clipApiCall(`${CLIP_BASE}/mencoes/${id}`, { method: 'DELETE' }), reanalyze: (id) => clipApiCall(`${CLIP_BASE}/mencoes/${id}/reanalyze`, { method: 'POST', body: '{}' }), alertas: () => clipApiCall(`${CLIP_BASE}/alertas`), criarAlerta: (body) => clipApiCall(`${CLIP_BASE}/alertas`, { method: 'POST', body: JSON.stringify(body) }), patchAlerta: (id, body) => clipApiCall(`${CLIP_BASE}/alertas/${id}`, { method: 'PATCH', body: JSON.stringify(body) }), delAlerta: (id) => clipApiCall(`${CLIP_BASE}/alertas/${id}`, { method: 'DELETE' }), disparos: () => clipApiCall(`${CLIP_BASE}/disparos`), ack: (alertaId, body) => clipApiCall(`${CLIP_BASE}/alertas/${alertaId}/ack`, { method: 'POST', body: JSON.stringify(body) }), concorrencia: (p) => clipApiCall(`${CLIP_BASE}/concorrencia?${new URLSearchParams(p || {})}`), addConc: (body) => clipApiCall(`${CLIP_BASE}/concorrencia`, { method: 'POST', body: JSON.stringify(body) }), patchConc: (id, body) => clipApiCall(`${CLIP_BASE}/concorrencia/${id}`, { method: 'PATCH', body: JSON.stringify(body) }), sov: (p) => clipApiCall(`${CLIP_BASE}/share-of-voice?${new URLSearchParams(p || {})}`), relatorios: (p) => clipApiCall(`${CLIP_BASE}/relatorios?${new URLSearchParams(p || {})}`), gerarRel: (body) => clipApiCall(`${CLIP_BASE}/relatorios/gerar`, { method: 'POST', body: JSON.stringify(body) }), insights: (p) => clipApiCall(`${CLIP_BASE}/insights?${new URLSearchParams(p || {})}`), patchInsight: (id, action) => clipApiCall(`${CLIP_BASE}/insights/${id}`, { method: 'PATCH', body: JSON.stringify({ action }) }), briefing: (id, body) => clipApiCall(`${CLIP_BASE}/insights/${id}/briefing`, { method: 'POST', body: JSON.stringify(body || {}) }), collect: () => clipApiCall(`${CLIP_BASE}/collect`, { method: 'POST', body: '{}' }), status: () => clipApiCall(`${CLIP_BASE}/status`), }; function clipFmtDate(iso) { if (!iso) return '—'; const s = String(iso); const hit = s.match(/(\d{4})-(\d{2})-(\d{2})/); if (hit) return `${hit[3]}/${hit[2]}/${hit[1]}`; const d = new Date(iso); if (Number.isNaN(d.getTime())) return s.slice(0, 10); return d.toLocaleDateString('pt-PT'); } function clipQs(obj) { const o = {}; Object.entries(obj || {}).forEach(([k, v]) => { if (v !== undefined && v !== '' && v !== null && v !== false) o[k] = v; }); return o; } const ClipBadge = ({ label, color, bg }) => ( {label} ); const ClipMarcaChip = ({ slug }) => { const c = CLIP_MARCA_TOKEN[slug] || 'var(--ai-500)'; return ( {CLIP_MARCA_LABEL[slug] || slug} ); }; const ClipSentBadge = ({ sent }) => { const cfg = CLIP_SENT[sent] || CLIP_SENT.neutro; return ; }; const ClipSelect = ({ value, onChange, options, placeholder = 'Todos' }) => ( ); function ClipSentimentBar({ pos = 0, neu = 0, neg = 0 }) { const t = pos + neu + neg; const w = (n) => t ? `${(n / t) * 100}%` : '0%'; return (
); } function ClipVolumeChart({ volume, height = 160 }) { const marcas = CLIP_MARCAS.map(m => m.slug); const days = [...new Set((volume || []).map(v => String(v.dia).slice(0, 10)))].sort(); if (!days.length) { return
Sem volume no período.
; } const by = {}; let max = 1; for (const v of volume || []) { const dia = String(v.dia).slice(0, 10); if (!by[v.marca_slug]) by[v.marca_slug] = {}; by[v.marca_slug][dia] = v.n; if (v.n > max) max = v.n; } const W = Math.max(520, days.length * 18); const H = height; const pad = { l: 28, r: 8, t: 12, b: 22 }; const iw = W - pad.l - pad.r; const ih = H - pad.t - pad.b; const x = (i) => pad.l + (days.length === 1 ? iw / 2 : (i / (days.length - 1)) * iw); const y = (n) => pad.t + ih - (n / max) * ih; return (
{[0, 0.5, 1].map(p => ( ))} {marcas.map(slug => { const pts = days.map((d, i) => `${x(i)},${y(by[slug]?.[d] || 0)}`).join(' '); return ( ); })} {clipFmtDate(days[0])} {clipFmtDate(days[days.length - 1])}
); } function clipPolar(cx, cy, r, a) { const rad = (a - 90) * Math.PI / 180; return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)]; } function ClipPie({ slices, size = 180 }) { const total = (slices || []).reduce((s, x) => s + (x.n || 0), 0); if (!total) return
Sem dados de SoV.
; const cx = size / 2, cy = size / 2, r = size / 2 - 8; let a = 0; const paths = slices.filter(s => s.n > 0).map((s, i) => { const sweep = (s.n / total) * 360; const start = a; const end = a + sweep; a = end; const [x1, y1] = clipPolar(cx, cy, r, start); const [x2, y2] = clipPolar(cx, cy, r, end); const large = sweep > 180 ? 1 : 0; const d = sweep >= 359.9 ? `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - 0.01} ${cy - r} Z` : `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`; return ; }); return ( {paths} ); } const ClipModal = ({ title, onClose, children, footer, width = 480 }) => { React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return ReactDOM.createPortal( <>
{title}
{children}
{footer && (
{footer}
)}
, document.body ); }; const ClipMencaoDrawer = ({ id, onClose, onChanged, userName }) => { const [data, setData] = React.useState(null); const [loading, setLoading] = React.useState(true); const [busy, setBusy] = React.useState(false); const [sentEdit, setSentEdit] = React.useState(''); const load = React.useCallback(() => { setLoading(true); ClipAPI.mencao(id).then(d => { setData(d); setSentEdit(d.sentimento || ''); setLoading(false); }) .catch(() => setLoading(false)); }, [id]); React.useEffect(() => { load(); }, [load]); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); async function act(fn) { setBusy(true); try { await fn(); load(); if (onChanged) onChanged(); } catch (e) { alert(e.message); } finally { setBusy(false); } } return ( <>
); }; const ClipNovaMencaoModal = ({ onClose, onSaved, defaultMarca }) => { const [marca, setMarca] = React.useState(defaultMarca && defaultMarca !== 'todas' ? defaultMarca : 'mimaki'); const [titulo, setTitulo] = React.useState(''); const [conteudo, setConteudo] = React.useState(''); const [url, setUrl] = React.useState(''); const [fonte, setFonte] = React.useState('web'); const [pais, setPais] = React.useState('PT'); const [dataPub, setDataPub] = React.useState(new Date().toISOString().slice(0, 16)); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); async function save() { if (!titulo.trim()) { setErr('Título obrigatório'); return; } setBusy(true); setErr(''); try { await ClipAPI.criarMencao({ marca_slug: marca, titulo: titulo.trim(), conteudo, url, fonte, pais, data_publicacao: dataPub ? new Date(dataPub).toISOString() : new Date().toISOString(), }); onSaved(); } catch (e) { setErr(e.message); setBusy(false); } } return ( }>
{err &&
{err}
}
setTitulo(e.target.value)} style={CLIP_INPUT} />