/* screen_comercial_daily_prospect_carteira_v2.jsx
Prospect Carteira V2 — Expansão via share de famílias ERP (consumíveis).
Expõe window.ScreenProspectCarteiraV2. */
// ── Helpers ───────────────────────────────────────────────────────────────────
const pcv2Fmt = v => {
const n = Number(v) || 0;
if (Math.abs(n) >= 1000) return (n / 1000).toFixed(1).replace('.', ',') + 'k€';
return n.toFixed(0) + '€';
};
// Urgência → cor (igual ao daily_prospect_carteira)
const pcv2UrgColor = {
hoje: 'var(--dgd-red-700,#B53B3B)',
semana: 'var(--dgd-pumpkin-500,#FF9A40)',
monitorizar: 'var(--dgd-fg-3)',
};
// Nome clicável — mesmo estilo do ecrã existente
const pcv2ClickNome = {
fontWeight: 600, color: 'var(--dgd-fg-1)', cursor: 'pointer',
borderBottom: '1px dashed var(--dgd-fg-3)', paddingBottom: 1,
};
// ── Badge numerado (header de bloco) ──────────────────────────────────────────
const Pcv2BlocoBadge = ({ n, color = 'var(--dgd-primary-500,#61A9FF)' }) => (
{n}
);
// ── Badge de acção numerada ────────────────────────────────────────────────────
const pcv2AcaoColors = [
'var(--dgd-green-700,#1F8A52)',
'var(--dgd-primary-500,#61A9FF)',
'var(--dgd-pumpkin-500,#FF9A40)',
'var(--dgd-red-700,#B53B3B)',
];
const Pcv2AcaoBadge = ({ n }) => {
const color = pcv2AcaoColors[(n - 1) % pcv2AcaoColors.length];
return (
{n}
);
};
// ── Hero ──────────────────────────────────────────────────────────────────────
function Pcv2Hero({ date, onRegenerate, loading, prospect, userName }) {
const firstName = (userName || '').split(' ')[0] || '';
const mensagem = prospect?.hero?.mensagem || null;
return (
COMERCIAL · CONSUMÍVEIS · EXPANSÃO
{firstName ? `${firstName}, ` : ''}aqui estão as oportunidades de expansão.
{mensagem && (
{mensagem}
)}
⚡ DIGI · AGENTE AI DIGIDELTA
{loading ? 'A gerar…' : 'Regenerar'}
{date}
);
}
// ── KPI Cards ─────────────────────────────────────────────────────────────────
function Pcv2KPIs({ metricas }) {
if (!metricas) return null;
const cards = [
{ label: 'Mono-família', value: metricas.mono_familia_count || 0, color: 'var(--dgd-primary-500,#61A9FF)' },
{ label: 'Famílias Perdidas', value: metricas.familias_perdidas_count || 0, color: 'var(--dgd-pumpkin-500,#FF9A40)' },
{ label: 'Novos Clientes', value: metricas.novos_clientes_count || 0, color: 'var(--dgd-green-700,#1F8A52)' },
{ label: 'Clientes Ativos', value: metricas.clientes_ativos || 0, color: 'var(--dgd-fg-2)' },
];
return (
{cards.map((c, i) => (
))}
CROSS-SELL — MONO-FAMÍLIA DE ALTO VOLUME
{['Cliente', 'YTD 2026', 'Família Atual → Proposta', 'Argumento', 'Urg.'].map(h => (
{h}
))}
{bloco1.map((r, i) => (
onClienteClick(r.cliente)}>{r.cliente}
{pcv2Fmt(r.total_2026_k)}
{r.familia_atual || '—'}
→
{r.familia_proposta || '—'}
{r.argumento}
))}
);
}
// ── Bloco 2 — Famílias perdidas ───────────────────────────────────────────────
function Pcv2Bloco2({ bloco2, onClienteClick }) {
if (!bloco2?.length) return null;
return (
FAMÍLIAS PERDIDAS — RECOVERY
{['Cliente', 'Família', 'Val. 2025', 'Abordagem'].map(h => (
{h}
))}
{bloco2.map((r, i) => (
onClienteClick(r.cliente)}>{r.cliente}
{r.familia}
{pcv2Fmt(r.val_2025_k ?? r.val_2025)}
{r.abordagem}
))}
);
}
// ── Bloco 3 — Novos clientes ──────────────────────────────────────────────────
function Pcv2Bloco3({ bloco3, onClienteClick }) {
if (!bloco3?.length) return null;
return (
NOVOS CLIENTES 2026 — JANELA QUENTE
{['Cliente', 'YTD 2026', 'Entrada por', 'Próxima Família', 'Janela'].map(h => (
{h}
))}
{bloco3.map((r, i) => (
onClienteClick(r.cliente)}>{r.cliente}
{pcv2Fmt(r.val_2026_k)}
{r.familia_entrada || '—'}
{r.proxima_familia || '—'}
{r.janela}
))}
);
}
// ── Bloco 4 — Acções da semana ────────────────────────────────────────────────
function Pcv2Bloco4({ bloco4, onClienteClick }) {
if (!bloco4) return null;
const acoes = bloco4.acoes_prioritarias || [];
return (
{bloco4.conclusao && (
{bloco4.conclusao}
)}
{acoes.map((a, i) => {
const uColor = pcv2UrgColor[a.urgencia] || 'var(--dgd-fg-3)';
return (
{a.cliente && (
onClienteClick(a.cliente)}>
{a.cliente}
)}
{a.familia_proposta && (
· {a.familia_proposta}
)}
{a.acao && — {a.acao} }
{a.argumentos && (
{a.argumentos}
)}
);
})}
);
}
// ── Regra do dia ──────────────────────────────────────────────────────────────
function Pcv2RegraDia({ texto }) {
if (!texto) return null;
return (
);
}
// ── Main screen ───────────────────────────────────────────────────────────────
function ScreenProspectCarteiraV2({ vendedorId, userName }) {
const [state, setState] = React.useState({ data: null, loading: false, error: null });
const [selectedCliente, setSelectedCliente] = React.useState(null);
const onClienteClick = name => setSelectedCliente(name);
const fetchProspect = React.useCallback((force = false) => {
if (!vendedorId) return;
setState(s => ({ ...s, loading: true, error: null }));
fetch(`/api/comercial/prospect-carteira-v2/${encodeURIComponent(vendedorId)}${force ? '?force=true' : ''}`)
.then(r => r.json())
.then(json => {
if (json.error) throw new Error(json.error);
setState({ data: json, loading: false, error: null });
})
.catch(err => setState({ data: null, loading: false, error: err.message }));
}, [vendedorId]);
React.useEffect(() => { fetchProspect(false); }, [fetchProspect]);
const { data, loading, error } = state;
const prospect = data?.prospect || null;
const metricas = data?.metricas || null;
const today = new Date().toISOString().slice(0, 10);
if (!vendedorId) return (
Sem vendedor seleccionado.
);
return (
{(() => {
const M = window.ProspectClienteModal;
return M && selectedCliente
?
setSelectedCliente(null)} />
: null;
})()}
fetchProspect(true)}
loading={loading}
prospect={prospect}
userName={userName}
/>
{loading && !data && (
A gerar prospect de expansão…
)}
{error && (
Erro ao gerar prospect: {error}
)}
{prospect?._parse_error && (
Aviso: resposta AI com erro de parsing.
)}
{metricas &&
{data.cached ? 'Cache' : 'Gerado agora'} · fonte: ERP Primavera (comercial_ytd_snap)
)}