/* global React, Icon, formatCOP, formatCompactCOP, Switch, EstadoPill, LegalDot,
VENTURES, CAMPAIGNS, DEALS, STAGES, STAGE_PROB, CHANNELS, CHANNEL_COLOR,
ventureName, ventureIcon */
const { useState: useStateC, useMemo: useMemoC } = React;
/* Filter chips reused by both centers */
function ScopeChips({ scope, setScope, ids }) {
const opts = [{ id: "all", name: "Todos los ventures", icon: "LayoutGrid" }]
.concat(ids.map((id) => ({ id, name: ventureName(id), icon: ventureIcon(id) })));
return (
{opts.map((o) => {
const active = scope === o.id;
return (
);
})}
);
}
function CenterKpi({ label, value, sub, accent }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
function Stepper({ value, onChange, step = 500_000 }) {
return (
{formatCompactCOP(value)}
);
}
/* ============================== MARKETING =============================== */
function MarketingCenter({ scope, setScope }) {
const [camps, setCamps] = useStateC(() => CAMPAIGNS.map((c) => ({ ...c })));
const ids = useMemoC(() => [...new Set(CAMPAIGNS.map((c) => c.venture))], []);
const shown = camps.filter((c) => scope === "all" || c.venture === scope);
const activas = shown.filter((c) => c.activa);
const presupuesto = activas.reduce((a, c) => a + c.presupuesto, 0);
const leads = activas.reduce((a, c) => a + c.leads, 0);
const cpl = leads ? presupuesto / leads : 0;
const byChannel = CHANNELS.map((ch) => ({
canal: ch,
leads: activas.filter((c) => c.canal === ch).reduce((a, c) => a + c.leads, 0),
})).filter((x) => x.leads > 0).sort((a, b) => b.leads - a.leads);
const maxCh = Math.max(1, ...byChannel.map((x) => x.leads));
const update = (id, patch) => setCamps((cs) => cs.map((c) => (c.id === id ? { ...c, ...patch } : c)));
return (
Marketing — control central
Activa campañas, ajusta presupuestos y mide leads de todos los ventures en un solo lugar.
{/* Campaign control table */}
Campañas
| Campaña |
Canal |
Presupuesto / mes |
Leads |
Activa |
{shown.map((c) => (
|
{c.nombre}
{ventureName(c.venture)}
|
{c.canal}
|
update(c.id, { presupuesto: v })} /> |
{c.leads} |
update(c.id, { activa: v })} /> |
))}
{/* Channel breakdown */}
Leads por canal
Solo campañas activas
{byChannel.length === 0 &&
Sin campañas activas en este filtro.
}
{byChannel.map((x) => (
))}
);
}
/* ============================== VENTAS / CRM ============================ */
function VentasCenter({ scope, setScope }) {
const [deals, setDeals] = useStateC(() => DEALS.map((d) => ({ ...d })));
const ids = useMemoC(() => [...new Set(DEALS.map((d) => d.venture))], []);
const shown = deals.filter((d) => scope === "all" || d.venture === scope);
const abiertos = shown.filter((d) => d.etapa !== "Cerrado");
const pipeline = abiertos.reduce((a, d) => a + d.valor, 0);
const ponderado = abiertos.reduce((a, d) => a + d.valor * STAGE_PROB[d.etapa], 0);
const cerrados = shown.filter((d) => d.etapa === "Cerrado");
const valorCerrado = cerrados.reduce((a, d) => a + d.valor, 0);
const move = (id, dir) => setDeals((ds) => ds.map((d) => {
if (d.id !== id) return d;
const i = STAGES.indexOf(d.etapa);
const ni = Math.min(STAGES.length - 1, Math.max(0, i + dir));
return { ...d, etapa: STAGES[ni] };
}));
return (
Ventas / CRM — pipeline global
Mueve los negocios entre etapas y controla el pipeline de todos los ventures.
{/* Kanban */}
{STAGES.map((stage) => {
const col = shown.filter((d) => d.etapa === stage);
const total = col.reduce((a, d) => a + d.valor, 0);
return (
{stage}
{col.length}
{formatCompactCOP(total)}
{col.map((d) => {
const i = STAGES.indexOf(d.etapa);
return (
{d.cliente}
{ventureName(d.venture)}
{formatCompactCOP(d.valor)}
);
})}
{col.length === 0 &&
—
}
);
})}
);
}
Object.assign(window, { MarketingCenter, VentasCenter });