Sem campanhas no ar.
;
return (
{list.map((r, i) => {
const v = Number(r[valueKey]) || 0;
const w = Math.max(4, (v / max) * 100);
return (
{r[labelKey]}
{mktInicioEur(v)}
0 ? 'var(--danger)' : color, opacity: 0.85 }} />
);
})}
);
};
const MktInicioGauge = ({ pct, light }) => {
const p = Number.isFinite(Number(pct)) ? Math.max(0, Number(pct)) : null;
if (p == null) return
sem objectivo
;
const color = (light && MKT_INICIO_LIGHT[light]) || 'var(--ai-500)';
const r = 42, cx = 56, cy = 52;
const circ = Math.PI * r;
const dash = (Math.min(100, p) / 100) * circ;
return (
);
};
const MktInicioHeat14 = ({ dias, selected, onSelect, hoje }) => {
const list = dias || [];
const max = Math.max(...list.map(d => (d.n_comm || 0) + (d.n_peca || 0) + (d.n_oh || 0)), 1);
return (
{list.map(d => {
const n = (d.n_comm || 0) + (d.n_peca || 0) + (d.n_oh || 0);
const intens = n / max;
const isSel = selected === d.ymd;
const isHoje = d.ymd === hoje;
return (
);
})}
);
};
const MktInicioDayBars = ({ dias }) => {
const list = dias || [];
const max = Math.max(...list.map(d => (d.n_comm || 0) + (d.n_peca || 0) + (d.n_oh || 0)), 1);
return (
{list.map(d => {
const n = (d.n_comm || 0) + (d.n_peca || 0) + (d.n_oh || 0);
const h = Math.max(n ? 4 : 2, (n / max) * 36);
return (
);
})}
);
};
const MktInicioMonthBars = ({ mensal }) => {
const list = mensal || [];
if (list.length < 1) return
sem série
;
const max = Math.max(...list.flatMap(m => [Number(m.bp) || 0, Number(m.real) || 0]), 1);
return (
{list.map(m => {
const bpH = Math.max(2, ((Number(m.bp) || 0) / max) * 80);
const realH = Math.max(2, ((Number(m.real) || 0) / max) * 80);
return (
);
})}
);
};
const MktInicioFunnelBars = ({ contrib }) => {
const etapas = [
{ k: 'leads', l: 'Leads', v: contrib?.leads },
{ k: 'mql', l: 'MQL', v: contrib?.mql },
{ k: 'sql', l: 'SQL', v: contrib?.sql },
{ k: 'won', l: 'WON', v: contrib?.won },
];
if (etapas.every(e => !e.v)) return null;
const max = Math.max(...etapas.map(e => Number(e.v) || 0), 1);
return (
);
};
const MktInicioKpiTile = ({ label, value, spark, sparkColor }) => (
{label}
{value}
{spark ?
: null}
);
const MktInicioPriBadge = ({ prioridade }) => {
const cfg = MKT_INICIO_PRI[prioridade] || MKT_INICIO_PRI.normal;
return (
{prioridade || 'normal'}
);
};
const MKT_INICIO_ORIGEM = {
peca_falhou: { label: 'Publicação', icon: 'alert' },
clipping_critica: { label: 'Clipping', icon: 'flag' },
insight_p0: { label: 'Insight', icon: 'sparkle' },
briefing: { label: 'Briefing', icon: 'doc' },
copy: { label: 'Copy', icon: 'copy' },
prompt: { label: 'Prompt', icon: 'sparkle' },
peca: { label: 'Peça', icon: 'image' },
oh: { label: 'Open House', icon: 'calendar' },
plano_atraso: { label: 'Plano', icon: 'doc' },
plano_item: { label: 'Plano', icon: 'doc' },
notificacao: { label: 'Aviso', icon: 'bell' },
comm_plan: { label: 'Calendário', icon: 'calendar' },
peca_agendada: { label: 'Agendada', icon: 'calendar' },
peca_publicada: { label: 'No ar', icon: 'check' },
peca_agendar: { label: 'Agendar', icon: 'flag' },
peca_rever: { label: 'Rever', icon: 'image' },
};
const MKT_INICIO_PULSE_TONE = {
critico: { color: 'var(--danger)', bg: 'color-mix(in oklch, var(--danger) 10%, transparent)' },
atencao: { color: 'var(--warning)', bg: 'color-mix(in oklch, var(--warning) 10%, transparent)' },
ok: { color: 'var(--success)', bg: 'transparent' },
};
function mktInicioDayNum(ymd) {
const n = String(ymd || '').slice(8, 10);
return n.replace(/^0/, '') || n;
}
const MktInicioInboxRow = ({ item, onOpen, onDismiss }) => {
const meta = MKT_INICIO_ORIGEM[item.origem] || MKT_INICIO_ORIGEM[item.tipo] || { label: item.origem || item.tipo, icon: 'flag' };
return (
{item.dismissable && (
)}
);
};
const MktInicioEventRow = ({ item, onOpen }) => {
const meta = MKT_INICIO_ORIGEM[item.tipo] || { label: item.tipo, icon: 'calendar' };
return (
);
};
const MktInicioWeekStrip = ({ semana, selected, onSelect }) => (
{(semana || []).map(d => {
const active = d.ymd === selected;
const tone = d.n_atrasado ? 'var(--warning)' : (d.hoje ? 'var(--ai-500)' : 'var(--border)');
return (
);
})}
);
const MktInicioPulseMini = ({ pulse, onOpen }) => {
const tone = MKT_INICIO_PULSE_TONE[pulse.status] || MKT_INICIO_PULSE_TONE.ok;
return (
);
};
function mktInicioDigiQs(userEmail) {
const p = new URLSearchParams(window.location.search || '');
const email = userEmail || window.currentUser?.email || '';
if (email && !p.get('email')) p.set('email', email);
const s = p.toString();
return s ? `?${s}` : '';
}
function MktInicioDigiChanIcon({ ch, size = 12 }) {
const s = size;
if (ch === 'wa') return (
);
if (ch === 'email') return (
);
return (
);
}
const MKT_INICIO_DIGI_PRI_C = { p0: 'var(--danger)', p1: 'var(--warning)', p2: 'var(--ai-500)' };
const MKT_INICIO_DIGI_PRI_L = { p0: 'Crítico', p1: 'Alto', p2: 'Info' };
const MktInicioDigiInsightCard = ({ id, priority = 'p1', category = 'nova_campanha', title, summary, onDismiss, onAccept }) => {
const pc = MKT_INICIO_DIGI_PRI_C[priority] || MKT_INICIO_DIGI_PRI_C.p2;
const catL = { nova_campanha: 'Nova campanha', melhoria_live: 'Melhoria live', alerta_crm: 'Alerta CRM', reactivacao: 'Reactivação', campanha_sugerida: 'Campanha', hot_sem_t0: 'Leads HOT', externos_pendentes: 'Matching', audiencia_inactiva: 'Audiência' };
return (
{MKT_INICIO_DIGI_PRI_L[priority] || priority}
{catL[category] || category}
{title}
{summary}
{(category === 'reactivacao' || category === 'campanha_sugerida' || category === 'melhoria_live' || category === 'nova_campanha') && (
)}
{category === 'hot_sem_t0' && }
{category === 'externos_pendentes' && }
{category === 'audiencia_inactiva' && }
{!['reactivacao', 'campanha_sugerida', 'melhoria_live', 'nova_campanha', 'hot_sem_t0', 'externos_pendentes', 'audiencia_inactiva'].includes(category) && (
)}
);
};
const MktInicioDigiWaSendCard = ({ action, msgId, onSent, userEmail }) => {
const initial = action.sent ? 'sent' : (action.cancelled ? 'cancelled' : 'pending');
const [state, setState] = React.useState(initial);
const names = { fabio: 'Fábio Costa', paulino: 'João Paulino', rui: 'Rui Leitão', armando: 'Armando Mota', bruno: 'Bruno Rosa' };
const send = async () => {
setState('sending');
try {
const r = await fetch(`/api/marketing/digi/wa/send${mktInicioDigiQs(userEmail)}`, {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ to: action.to, message: action.message }),
});
if (!r.ok) throw new Error('Erro');
setState('sent');
if (onSent) onSent(msgId);
} catch (_) { setState('error'); }
};
return (
Enviar WA
para {names[action.to] || action.to}
"{action.message}"
{state === 'pending' && (
)}
{state === 'sending' &&
A enviar...
}
{state === 'sent' &&
Enviado.
}
{state === 'error' &&
Erro ao enviar. Verifica o backend.
}
{state === 'cancelled' &&
Cancelado.
}
);
};
const MktInicioDigiMsgBubble = ({ msg, showHeader = true, onWaSent, userEmail }) => {
const isUser = msg.role === 'user';
return (
{!isUser && showHeader && (
)}
{!!(msg.text || '') && (
{(msg.text || '').split('\n\n').map((para, pi) => (
{para.split('\n').map((line, li) => li === 0 ? line : [React.createElement('br', { key: li }), line])}
))}
)}
{msg.ts && (
{new Date(msg.ts).toLocaleDateString('pt-PT', { day: '2-digit', month: '2-digit' })} {new Date(msg.ts).toLocaleTimeString('pt-PT', { hour: '2-digit', minute: '2-digit' })}
)}
{!isUser && msg.waAction && (
)}
);
};
const MktInicioDigiTimelineDay = ({ day, events }) => (
{day}
{events.map((ev, i) => (
{ev.summary}
{ev.time}
{ev.typeLabel}
))}
);
const MktInicioDigiChat = ({ userName, userEmail, dashboardState, seedInsights, onInsightDismissed, onInsightAccepted }) => {
const [open, setOpen] = React.useState(false);
const [expanded, setExpanded] = React.useState(false);
const [mode, setMode] = React.useState('chat');
const [msgs, setMsgs] = React.useState([]);
const [inp, setInp] = React.useState('');
const [loading, setLoad] = React.useState(false);
const _sessKey = `digi_inicio_sess_${(userEmail || userName || 'anon').replace(/\s+/g, '_')}`;
const [sessId, setSessId] = React.useState(() => {
try { return localStorage.getItem(_sessKey) || null; } catch { return null; }
});
const panelRef = React.useRef(null);
const fabRef = React.useRef(null);
const timeoutsRef = React.useRef([]);
const [insights, setInsights] = React.useState(() => seedInsights || []);
const [timelineEvs, setTimeline] = React.useState(null);
const bodyRef = React.useRef(null);
const qs = mktInicioDigiQs(userEmail);
React.useEffect(() => {
if (open && mode === 'chat' && bodyRef.current) {
bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
}
}, [msgs, open, mode]);
React.useEffect(() => {
if (!open) return;
let cancelled = false;
const saudacao = mktInicioSaudacao();
const firstName = (userName || '').split(' ')[0] || '';
const nameStr = firstName ? `, ${firstName}` : '';
fetch(`/api/marketing/digi/events${qs}`)
.then(r => r.ok ? r.json() : { events: [] })
.then(d => { if (!cancelled) setTimeline(d.events || []); })
.catch(() => { if (!cancelled) setTimeline([]); });
const storedSess = (() => { try { return localStorage.getItem(_sessKey); } catch { return null; } })();
const sessionPromise = storedSess
? fetch(`/api/marketing/digi/sessions/${storedSess}${qs}`).then(r => r.ok ? r.json() : null).catch(() => null)
: Promise.resolve(null);
const insightsPromise = fetch(`/api/marketing/digi/insights${qs}`)
.then(r => r.ok ? r.json() : { insights: [] })
.catch(() => ({ insights: [] }));
Promise.all([sessionPromise, insightsPromise]).then(([sessionData, insightsData]) => {
if (cancelled) return;
const ins = insightsData.insights || [];
setInsights(ins);
const restored = sessionData?.messages?.length
? sessionData.messages.filter(m => m.role !== 'system').map((m, i) => ({
id: `hist_${i}`, role: m.role === 'assistant' ? 'digi' : 'user', text: m.content, ts: m.ts,
}))
: [];
setMsgs(prev => {
if (prev.length > 0) return prev;
if (restored.length > 0) return restored;
const p0 = ins.filter(i => i.priority === 'p0').length;
const n = dashboardState?.pending_approvals || 0;
let text;
if (p0 > 0) text = `${saudacao}${nameStr}. Tenho ${p0} alerta${p0 > 1 ? 's' : ''} crítico${p0 > 1 ? 's' : ''} que precisam de atenção imediata.`;
else if (ins.length) text = `${saudacao}${nameStr}. Tenho ${ins.length} insight${ins.length > 1 ? 's' : ''} com oportunidades — vê abaixo.`;
else if (n > 0) text = `${saudacao}${nameStr}. Tens ${n} aprovação${n !== 1 ? 'ões' : ''} à espera. Por onde queres começar?`;
else text = `${saudacao}${nameStr}. Dashboard sincronizado. Em que posso ajudar?`;
return [{ id: 'greeting', role: 'digi', text, ts: new Date().toISOString() }];
});
});
return () => { cancelled = true; };
}, [open]);
React.useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === 'Escape') {
if (expanded) setExpanded(false);
else setOpen(false);
}
};
const onClick = (e) => {
if (expanded) return;
if (panelRef.current && !panelRef.current.contains(e.target) &&
fabRef.current && !fabRef.current.contains(e.target)) {
setOpen(false);
}
};
document.addEventListener('keydown', onKey);
document.addEventListener('mousedown', onClick);
return () => {
document.removeEventListener('keydown', onKey);
document.removeEventListener('mousedown', onClick);
};
}, [open, expanded]);
React.useEffect(() => {
if (!open) {
timeoutsRef.current.forEach(clearTimeout);
timeoutsRef.current = [];
}
}, [open]);
const parseWaAction = (str) => {
const start = str.indexOf('[WA_SEND:');
if (start < 0) return { action: null, cleanStart: -1, cleanEnd: -1 };
let depth = 0, i = start + 9;
const jsonStart = i;
for (; i < str.length; i++) {
if (str[i] === '{') depth++;
else if (str[i] === '}') { depth--; if (depth === 0) { i++; break; } }
}
if (str[i] !== ']') return { action: null, cleanStart: -1, cleanEnd: -1 };
try {
const action = JSON.parse(str.slice(jsonStart, i));
return { action, cleanStart: start, cleanEnd: i + 1 };
} catch (_) { return { action: null, cleanStart: -1, cleanEnd: -1 }; }
};
const handleSend = async (text) => {
const t = (text || inp).trim();
if (!t || loading) return;
setMsgs(m => [...m, { id: Date.now(), role: 'user', text: t, ts: new Date().toISOString() }]);
setInp('');
setLoad(true);
try {
const resp = await fetch(`/api/marketing/digi/crm/chat${qs}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message: t,
session_id: sessId,
context: {
tab: 'marketing-inicio',
user_email: userEmail || undefined,
dashboard_state: dashboardState || {},
},
}),
});
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
const reader = resp.body.getReader();
const decoder = new TextDecoder();
let buf = '', accumulated = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buf += decoder.decode(value, { stream: true });
const lines = buf.split('\n');
buf = lines.pop() || '';
for (const line of lines) {
if (!line.startsWith('data: ')) continue;
try {
const evt = JSON.parse(line.slice(6));
if (evt.type === 'delta') accumulated += evt.text;
else if (evt.type === 'done') {
setSessId(evt.session_id);
try { localStorage.setItem(_sessKey, evt.session_id); } catch {}
const { action: waAction, cleanStart, cleanEnd } = parseWaAction(accumulated);
const cleanText = cleanStart >= 0
? (accumulated.slice(0, cleanStart) + accumulated.slice(cleanEnd)).trim()
: accumulated;
const paras = (cleanText || accumulated).split('\n\n').map(p => p.trim()).filter(Boolean);
if (paras.length === 0 && !waAction) { setLoad(false); return; }
const base = Date.now();
const tsNow = new Date().toISOString();
if (paras[0]) setMsgs(m => [...m, { id: base, role: 'digi', text: paras[0], ts: tsNow }]);
for (let i = 1; i < paras.length; i++) {
const idx = i;
const tid = setTimeout(() => {
setMsgs(m => [...m, { id: base + idx, role: 'digi', text: paras[idx], ts: new Date().toISOString() }]);
if (idx === paras.length - 1 && !waAction) setLoad(false);
}, idx * 420);
timeoutsRef.current.push(tid);
}
const lastDelay = paras.length > 1 ? (paras.length - 1) * 420 : 0;
if (waAction) {
const tid = setTimeout(() => {
setMsgs(m => [...m, {
id: base + 9999, role: 'digi', text: '',
waAction: { to: waAction.to, message: waAction.message, sent: false },
ts: new Date().toISOString(),
}]);
setLoad(false);
}, lastDelay + 100);
timeoutsRef.current.push(tid);
} else if (paras.length <= 1) {
setLoad(false);
}
} else if (evt.type === 'error') {
setMsgs(m => [...m, { id: Date.now() + 1, role: 'digi', text: `Erro: ${evt.message}`, ts: new Date().toISOString() }]);
setLoad(false);
await reader.cancel().catch(() => {});
return;
}
} catch (_) {}
}
}
} catch (e) {
setMsgs(m => [...m, { id: Date.now() + 1, role: 'digi', text: 'Sem ligação ao servidor. Verifica que o backend está activo.' }]);
setLoad(false);
}
};
const handleKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } };
const mBtn = (active) => ({
padding: '3px 11px', borderRadius: 6, border: 'none', cursor: 'pointer',
fontSize: 11, fontFamily: 'var(--font-mono)', fontWeight: 600, letterSpacing: '.04em',
background: active ? 'var(--ai-500)' : 'transparent',
color: active ? 'var(--text-on-ai, #fff)' : 'var(--text-muted)', transition: 'all .15s',
});
const iconBtn = (title, onClick, children) => (
);
const quickActs = ['O que rever hoje?', 'Insights P0', 'Campanhas em curso', 'Ajuda'];
const DigiHeader = ({ isExpanded }) => (
Digi AI
Início
Dashboard · contexto do dia
{iconBtn(isExpanded ? 'Reduzir' : 'Expandir', () => setExpanded(e => !e),
isExpanded
?
:
)}
{isExpanded && iconBtn('Fechar', () => { setOpen(false); setExpanded(false); },
)}
);
const DigiChat = ({ isExpanded }) => (
<>
{insights.length > 0 && (
{insights.length} insight{insights.length > 1 ? 's' : ''} activo{insights.length > 1 ? 's' : ''}
{insights.map(ins => (
{
const prev = insights;
setInsights(p => p.filter(i => i.id !== ins.id));
const r = await fetch(`/api/marketing/digi/insights/${ins.id}/dismiss${qs}`, { method: 'POST' }).catch(() => null);
if (!r || !r.ok) setInsights(prev);
else if (onInsightDismissed) onInsightDismissed(ins.id);
}}
onAccept={async () => {
const prev = insights;
setInsights(p => p.filter(i => i.id !== ins.id));
const r = await fetch(`/api/marketing/digi/insights/${ins.id}/accept${qs}`, { method: 'POST' }).catch(() => null);
if (!r || !r.ok) setInsights(prev);
else if (onInsightAccepted) onInsightAccepted(ins);
}}
/>
))}
)}
{msgs.map((m, i) => (
setMsgs(prev => prev.map(x => x.id === id ? { ...x, waAction: { ...x.waAction, sent: true } } : x))}
/>
))}
{loading && (
{[0, 1, 2].map(i => (
))}
)}
{quickActs.map(a => (
))}