/* ════════════════════════════════════════════════════════════
DASHBOARD KPIs T1 · Vacaciones
Fase 1 visual + Fase 2 datos reales (HubSpot · GA4 · Gemini)
Reemplazo operativo durante el periodo de vacaciones
════════════════════════════════════════════════════════════ */
const { useState, useEffect } = React;
const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } = Recharts;
/* ── DESIGN TOKENS · Nexus V2.0 (Manrope · Oxford · Brand Red) ── */
const C = {
// Brand
brandRed: '#DB3B2B', // Botón primario dashboard
brandRedDk: '#CC0000', // Hover destructivo
oxford: '#4C4C4C', // Texto principal
// Gray scale
bg: '#F8F8F8', // gray-50 → background página
bgAlt: '#F3F3F3', // gray-100 → hover suave, table header
card: '#FFFFFF', // white
line: '#E7E7E7', // gray-200 → borders, dividers
lineDk: '#DBDBDB', // gray-300
sub: '#6B7280', // gray-700 → texto secundario
subLt: '#9CA3AF', // gray-600 → placeholders, eyebrow
ink: '#1F2937', // gray-900 → headings
// Semantic
verde: '#16A34A', // green-700
ambar: '#CC5200', // orange-700
rojo: '#CC0000', // red-700
azul: '#2180FF', // blue-500
// Backgrounds suaves (alertas/banners)
bgVerde: '#F0FDF4',
bgAmbar: '#FFF0E5',
bgRojo: '#FEF4F4',
bgAzul: '#F0F8FF',
bgAmarillo: '#FFF4BF',
// Product accents
tienda: '#16A34A',
pagos: '#2180FF',
envios: '#CC5200',
};
const FONT_STACK = "'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
/* ── HELPERS ───────────────────────────────────────────────── */
const fmt = n => n==null||isNaN(n) ? '—' : new Intl.NumberFormat('es-MX').format(Math.round(n));
const mxn = n => n==null||isNaN(n) ? '—' : '$'+new Intl.NumberFormat('es-MX').format(Math.round(n));
// mxnDec: preserva centavos (2 decimales) — útil para inversión donde el reporte de Google Ads viene con $X,XXX.XX
const mxnDec = n => n==null||isNaN(n) ? '—' : '$'+new Intl.NumberFormat('es-MX', { minimumFractionDigits:2, maximumFractionDigits:2 }).format(Number(n));
const pct = n => n==null||isNaN(n) ? '—' : n.toFixed(1)+'%';
const colorEst = {verde:C.verde, ambar:C.ambar, rojo:C.rojo, na:C.subLt};
const bgEst = {verde:C.bgVerde, ambar:C.bgAmbar, rojo:C.bgRojo, na:C.bgAlt};
const txtEst = {verde:'Sano', ambar:'Atención', rojo:'Crítico', na:'Sin dato'};
/* ── SLICING LOCAL ───────────────────────────────────────────
Filtra el snapshot ya cargado por un rango visible y re-computa
los totales. Permite que los presets/date-pickers respondan
instantáneo sin pegarle al backend. */
const MARGEN_ENVIOS = 0.281;
const PAGOS_COMISION_PCT = 0.045;
const PAGOS_COMISION_FIJA = 1;
const PAGOS_MARGEN = 0.30;
function _suma(arr, key) { return arr.reduce((s,x) => s + (Number(x[key])||0), 0); }
function recomputarTotalEnvios(semanas){
const t = {
reg: _suma(semanas,'reg'), calif: _suma(semanas,'calif'), cli: _suma(semanas,'cli'),
inv: _suma(semanas,'inv'), saldoT1: _suma(semanas,'saldoT1'), saldoPrec: _suma(semanas,'saldoPrec')
};
t.cpr = t.reg ? t.inv / t.reg : 0;
t.cpa = t.cli ? t.inv / t.cli : 0;
t.pctCalif = t.reg ? (t.calif / t.reg) * 100 : 0;
t.pctCli = t.reg ? (t.cli / t.reg) * 100 : 0;
t.precProm = t.cli ? t.saldoPrec / t.cli : 0;
t.roiSemanal = t.inv ? (t.saldoT1 * MARGEN_ENVIOS) / t.inv : 0;
return t;
}
function recomputarTotalTienda(semanas){
const t = {
reg:_suma(semanas,'reg'), calif:_suma(semanas,'calif'), cli:_suma(semanas,'cli'),
checkIni:_suma(semanas,'checkIni'), visitasPlanes:_suma(semanas,'visitasPlanes'),
inv:_suma(semanas,'inv'), gmv:_suma(semanas,'gmv'),
google:_suma(semanas,'google'), meta:_suma(semanas,'meta'),
tiktok:_suma(semanas,'tiktok'), webinar:_suma(semanas,'webinar'), paginas:_suma(semanas,'paginas')
};
t.cpr = t.reg ? t.inv/t.reg : 0;
t.cpa = t.cli ? t.inv/t.cli : 0;
t.pctCalif = t.reg ? (t.calif/t.reg)*100 : 0;
t.pctCheckIni = t.reg ? (t.checkIni/t.reg)*100 : 0;
t.pctVisitasPlanes = t.reg ? (t.visitasPlanes/t.reg)*100 : 0;
t.pctCli = t.reg ? (t.cli /t.reg)*100 : 0;
t.roi = t.inv ? t.gmv/t.inv : 0;
return t;
}
function recomputarTotalPagos(semanas){
const t = {
reg:_suma(semanas,'reg'), calif:_suma(semanas,'calif'), cli:_suma(semanas,'cli'),
inv:_suma(semanas,'inv'), montoTrans:_suma(semanas,'montoTrans'),
docSinEnviar:_suma(semanas,'docSinEnviar'),
docEnviada:_suma(semanas,'docEnviada'),
docRevision:_suma(semanas,'docRevision'),
docAprobada:_suma(semanas,'docAprobada'),
docRechazada:_suma(semanas,'docRechazada'),
primTx:_suma(semanas,'primTx'), primLiq:_suma(semanas,'primLiq')
};
t.cpr = t.reg ? t.inv/t.reg : 0;
t.cpa = t.cli ? t.inv/t.cli : 0;
t.pctCalif = t.reg ? (t.calif/t.reg)*100 : 0;
t.pctCli = t.reg ? (t.cli /t.reg)*100 : 0;
const comision = t.montoTrans * PAGOS_COMISION_PCT + t.cli * PAGOS_COMISION_FIJA;
t.roi = t.inv ? (comision * PAGOS_MARGEN) / t.inv : 0;
return t;
}
const RECOMPUTAR = { envios: recomputarTotalEnvios, tienda: recomputarTotalTienda, pagos: recomputarTotalPagos };
function sliceKpisProducto(producto, kpis, vistaDesde, vistaHasta){
if (!kpis?.semanas) return kpis;
// Una semana queda dentro de la vista si solapa con el rango.
const semanas = kpis.semanas.filter(s => s.hasta >= vistaDesde && s.desde <= vistaHasta);
// Cross-product de Envíos: filtra paralelo si existe
const cross = kpis.cross ? kpis.cross.filter((_, i) => {
const s = kpis.semanas[i]; return s && s.hasta >= vistaDesde && s.desde <= vistaHasta;
}) : kpis.cross;
// Clientes Pagos: filtrar por fecha de creación dentro del rango visible
const clientes = kpis.clientes
? kpis.clientes.filter(c => c.fechaCreacion && c.fechaCreacion >= vistaDesde && c.fechaCreacion <= vistaHasta)
: kpis.clientes;
// Usuarios Tienda: idem
const usuarios = kpis.usuarios
? kpis.usuarios.filter(u => u.fechaCreacion && u.fechaCreacion >= vistaDesde && u.fechaCreacion <= vistaHasta)
: kpis.usuarios;
const fn = RECOMPUTAR[producto];
const total = fn ? fn(semanas) : kpis.total;
return { ...kpis, semanas, cross, clientes, usuarios, total };
}
// ¿El rango visible cabe dentro del rango cargado?
function vistaDentroDeCargado(vistaDesde, vistaHasta, cargadoDesde, cargadoHasta){
return vistaDesde >= cargadoDesde && vistaHasta <= cargadoHasta;
}
// Etiqueta legible del rango: "15-21 may" / "01 abr-17 may" / "últimos 7 días".
const MESES_ES = ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
function labelRango(desde, hasta){
if (!desde || !hasta) return '';
const [y1,m1,d1] = desde.split('-').map(Number);
const [y2,m2,d2] = hasta.split('-').map(Number);
const dias = Math.round((Date.UTC(y2,m2-1,d2) - Date.UTC(y1,m1-1,d1)) / 86400000) + 1;
const fmt = (d,m) => `${String(d).padStart(2,'0')} ${MESES_ES[m-1]}`;
const rangoStr = m1 === m2
? `${String(d1).padStart(2,'0')}-${String(d2).padStart(2,'0')} ${MESES_ES[m1-1]}`
: `${fmt(d1,m1)}-${fmt(d2,m2)}`;
return `${rangoStr} · ${dias} día${dias>1?'s':''}`;
}
// Una semana está "en curso" si su `hasta` (Domingo) es >= hoy CDMX.
function isEnCurso(semana, hoyStr) { return semana && semana.hasta >= hoyStr; }
// Última semana COMPLETA del array; si todas están en curso, devuelve la última.
function ultimaSemanaCompleta(semanas, hoyStr){
for (let i = semanas.length - 1; i >= 0; i--) {
if (!isEnCurso(semanas[i], hoyStr)) return semanas[i];
}
return semanas[semanas.length-1] || {};
}
// Análisis automático de la tendencia. Devuelve observaciones derivadas de los datos.
function analizarTendencia(semanas, hoyStr, { metricaReg = 'reg', metricaCli = 'cli' } = {}){
const completas = semanas.filter(s => !isEnCurso(s, hoyStr));
if (completas.length < 2) return { dir: 'sin-datos', narrativa: ['Datos insuficientes para análisis de tendencia.'] };
const regs = completas.map(s => s[metricaReg] || 0);
const promReg = regs.reduce((a,b)=>a+b,0) / regs.length;
// Pico
let piMax = 0; for (let i = 1; i < regs.length; i++) if (regs[i] > regs[piMax]) piMax = i;
const pico = { sem: completas[piMax].sem, valor: regs[piMax], factor: regs[piMax] / Math.max(promReg, 1) };
// Dirección: comparar promedio de las primeras N/2 vs últimas N/2 (excluyendo en curso)
const mid = Math.floor(regs.length / 2);
const promIni = regs.slice(0, mid).reduce((a,b)=>a+b,0) / Math.max(mid, 1);
const promFin = regs.slice(mid).reduce((a,b)=>a+b,0) / (regs.length - mid);
const deltaPct = promIni ? ((promFin - promIni) / promIni) * 100 : 0;
let dir = 'estable';
if (deltaPct > 15) dir = 'subiendo';
else if (deltaPct < -15) dir = 'bajando';
// Última completa vs promedio
const ult = completas[completas.length - 1];
const ultReg = ult[metricaReg] || 0;
const deltaUlt = promReg ? ((ultReg - promReg) / promReg) * 100 : 0;
// Caída/pico fuerte semana a semana
let mayorCambio = null;
for (let i = 1; i < regs.length; i++) {
if (regs[i-1] === 0) continue;
const d = ((regs[i] - regs[i-1]) / regs[i-1]) * 100;
if (!mayorCambio || Math.abs(d) > Math.abs(mayorCambio.pct)) {
mayorCambio = { de: completas[i-1].sem, a: completas[i].sem, pct: d, valDe: regs[i-1], valA: regs[i] };
}
}
// Conversión promedio
const sumReg = regs.reduce((a,b)=>a+b,0);
const sumCli = completas.map(s => s[metricaCli]||0).reduce((a,b)=>a+b,0);
const conv = sumReg ? (sumCli / sumReg) * 100 : 0;
const narrativa = [];
// 1) Tendencia general
if (dir === 'subiendo') narrativa.push(`Tendencia al alza: el promedio de la segunda mitad del periodo (${Math.round(promFin)}/sem) está ${Math.abs(deltaPct).toFixed(0)}% arriba de la primera (${Math.round(promIni)}/sem).`);
else if (dir === 'bajando') narrativa.push(`Tendencia a la baja: el promedio de la segunda mitad del periodo (${Math.round(promFin)}/sem) está ${Math.abs(deltaPct).toFixed(0)}% abajo de la primera (${Math.round(promIni)}/sem).`);
else narrativa.push(`Comportamiento estable: el promedio de las dos mitades del periodo varía menos de 15% (${Math.round(promIni)} → ${Math.round(promFin)}/sem).`);
// 2) Pico
if (pico.factor > 1.3) narrativa.push(`Pico en ${pico.sem}: ${pico.valor} registros, ${(pico.factor*100-100).toFixed(0)}% sobre el promedio (${Math.round(promReg)}/sem).`);
// 3) Cambio semana a semana mayor
if (mayorCambio && Math.abs(mayorCambio.pct) >= 30) {
const verbo = mayorCambio.pct > 0 ? 'subió' : 'cayó';
narrativa.push(`Mayor cambio semana a semana: ${verbo} ${Math.abs(mayorCambio.pct).toFixed(0)}% de ${mayorCambio.de} (${mayorCambio.valDe}) a ${mayorCambio.a} (${mayorCambio.valA}).`);
}
// 4) Última completa
if (Math.abs(deltaUlt) >= 15) {
const verbo = deltaUlt > 0 ? 'arriba' : 'abajo';
narrativa.push(`Última semana completa (${ult.sem}): ${ultReg} registros, ${Math.abs(deltaUlt).toFixed(0)}% ${verbo} del promedio.`);
}
// 5) Conversión
if (sumCli > 0) {
narrativa.push(`Conversión global del periodo: ${conv.toFixed(1)}% (${sumCli} clientes en ${sumReg} registros).`);
} else if (sumReg > 0) {
narrativa.push(`Sin clientes en el periodo: ${sumReg} registros, 0 conversiones. Revisar funnel post-registro.`);
}
return { dir, narrativa, pico, promReg, ult, deltaUlt };
}
function AnalisisTendencia({semanas, hoyStr, color, metricaReg='reg', metricaCli='cli'}){
const a = analizarTendencia(semanas, hoyStr, { metricaReg, metricaCli });
const dirColor = a.dir === 'subiendo' ? C.verde : a.dir === 'bajando' ? C.rojo : C.subLt;
const dirLabel = a.dir === 'subiendo' ? 'AL ALZA' : a.dir === 'bajando' ? 'A LA BAJA' : a.dir === 'estable' ? 'ESTABLE' : 'SIN DATOS';
return (
Lectura de la tendencia
{dirLabel}
{a.narrativa.map((t,i)=>
{t}
)}
);
}
async function api(path, opts = {}) {
let r;
try {
r = await fetch(`/api/vacaciones${path}`, {
credentials: 'include',
headers: { 'Content-Type': 'application/json', ...(opts.headers||{}) },
...opts
});
} catch (networkErr) {
// fetch falló sin respuesta (server caído, sin internet, DNS, etc.)
const e = new Error('No se pudo conectar con el servidor. Verifica que esté arriba.');
e.status = 0;
e.networkError = true;
throw e;
}
if (!r.ok) {
let msg = `Error ${r.status}`;
try { const j = await r.json(); msg = j.error || j.message || msg; } catch {}
const e = new Error(msg); e.status = r.status;
// 401 = sesión expirada. Dispara un evento global para que el App component
// pueda redirigir a login automáticamente sin importar qué función llamó la API.
if (r.status === 401) {
try { window.dispatchEvent(new CustomEvent('t1:session-expired')); } catch {}
}
throw e;
}
return r.json();
}
async function loginWithGoogle() {
// 1) Popup de Google (Firebase) → ID token. 2) Lo canjeamos en el backend,
// que valida el token y que el email esté pre-aprobado, y setea la cookie de sesión.
let idToken;
try {
idToken = await window.signInWithGoogle();
} catch (e) {
if (e?.code === 'auth/popup-closed-by-user') throw new Error('Cerraste la ventana de Google');
throw new Error('No se pudo iniciar sesión con Google');
}
const r = await fetch('/api/auth/google', {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ idToken })
});
if (!r.ok) {
let msg = 'No autorizado';
try { const j = await r.json(); msg = j.error || msg; if (j.detail) msg += ` — ${j.detail}`; } catch {}
await window.firebaseSignOut?.();
throw new Error(msg);
}
return r.json();
}
async function logout() {
await window.firebaseSignOut?.();
await fetch('/api/auth/logout', { method:'POST', credentials:'include' });
}
/* ── PERSISTENCIA LOCAL (stale-while-revalidate) ──────────────
Guarda el snap en localStorage para que al refresh del browser
el dashboard hidrate instantáneamente sin spinner. Si pasa más
de 5 min, hace fetch en background. */
const STORAGE_KEY = 't1-vacaciones-snap-v1';
// Bump cuando cambia la lógica de cohortes / patches de histórico para invalidar el cache local
// del usuario sin que tenga que limpiar localStorage a mano.
const CACHE_VERSION = '2026-05-29-slicing-fix';
function loadSnapCache() {
try {
const c = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
if (!c?.snap) return null;
if (c.version !== CACHE_VERSION) return null;
return c;
} catch { return null; }
}
function saveSnapCache(snap) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ snap, savedAt: Date.now(), version: CACHE_VERSION })); } catch {}
}
function clearSnapCache() {
try { localStorage.removeItem(STORAGE_KEY); } catch {}
}
function tiempoTranscurrido(ts) {
if (!ts) return '';
const min = Math.floor((Date.now() - ts) / 60000);
if (min < 1) return 'recién';
if (min < 60) return `hace ${min} min`;
const hr = Math.floor(min / 60);
if (hr < 24) return `hace ${hr}h`;
return `hace ${Math.floor(hr/24)}d`;
}
/* ── CURADURÍA (textos analíticos · sección 12.4 PRD) ──────── */
const CURATED = {
envios: {
nombre:'T1 Envíos', color:C.envios, periodo:'últimas 6 semanas',
defCliente:'Saldo T1Envíos > 0', defCalif:'Flag "Realizó cotización" = SI',
margen:0.281, breakeven:'1.0×',
salud:{ estado:'verde', titulo:'Rentable · ROI 8 sem por encima del breakeven',
detalle:'ROI 8 semanas (rolling) = 2.58 → producto rentable, muy por encima del breakeven 1.0×. El ROI semanal de las últimas 2-3 cohortes baja a ~0.77 por maduración (cohorte aún no completó recargas adicionales) — NO es problema de adquisición, es lectura desactualizada esperada.' },
funciona:[
'Google Search es el motor estructural: la mayor parte de los clientes con ratio reg→cliente estable.',
'La calidad del lead se mantiene sana — el ratio calificado→cliente es récord histórico.',
'Unidad económica cerca del breakeven: brecha de solo 2×, alcanzable con palancas operativas.',
'Las campañas de Envíos también generan valor cross-ecosistema: una parte de los registros termina en T1 Tienda.'
],
atencion:[
'Meta no escala como canal de adquisición — múltiples iteraciones de audiencia/creativo sin resultado.',
'El % de calificación se ve bajo desde el batch de propiedades de abril (medición, no calidad).',
'Dependencia alta de un solo canal: Google Search concentra el grueso de clientes.',
'Caída del ratio reg→cliente la semana 27 abr-03 may sin causa identificada.'
],
breakevenTabla:[
{ palanca:'Saldo promedio nuevos clientes', actual:'$1,907', meta:'$3,851', factor:'2.0×' },
{ palanca:'Clientes nuevos por semana', actual:'34', meta:'67', factor:'2.0×' }
],
faq:[
{ q:'¿Cómo cerró Envíos el periodo?',
a:'Google Search sostiene el grueso del volumen. La última semana fue récord. CPR estable en ~$270, CPA en ~$876, ratio reg→cliente ~31%.' },
{ q:'¿Por qué Meta no escala?',
a:'Causa estructural, no táctica. T1 Envíos se descubre por búsqueda activa de solución a un dolor operativo, no por exposición. Múltiples iteraciones no han movido la aguja.' },
{ q:'¿Por qué el % de calificación se ve bajo en mayo?',
a:'No es calidad de lead. El batch de propiedades de Tienda publicado el 20-26 abr probablemente genera rate limit en HubSpot que afecta el flag_cotizacion. Lo confirma que el ratio calificado→cliente subió a récord histórico. Solución: incluir Envíos en el batch.' },
{ q:'¿Es viable Envíos al ROI actual?',
a:'Sí. ROI semanal ~0.5, brecha al breakeven de 2× — alcanzable con cashback de primera recarga y escalado de Google Search.' },
{ q:'¿Por qué el ROI de las semanas tempranas se ve tan alto?',
a:'Es aging de cohorte, no performance. El saldo_t1envios es acumulado actual: las cohortes de abril llevan semanas recargando. La lectura comparable es la última semana. El saldo de 1ª recarga sí es comparable.' },
{ q:'¿Qué pasó la semana 27 abr-03 may?',
a:'Dos efectos: % calificación cayó por el batch (causa identificada); ratio reg→cliente cayó a 22% sin causa identificada — pendiente investigar.' }
],
notas:[
'Cifras con atribución cross-product (por UTM de campaña de Envíos).',
'El "Saldo T1Envíos" es acumulado actual — la lectura de ROI comparable es la última semana.',
'Batch de propiedades pendiente de incluir Envíos — afecta la medición del flag de cotización.',
'Caída del ratio reg→cliente la semana 27 abr-03 may sin causa identificada.'
]
},
tienda: {
nombre:'T1 Tienda', color:C.tienda, periodo:'últimas 6 semanas',
defCliente:'tienda_plan_estatus = activo', defCalif:'tienda_usuario_calificado = SI',
salud:{ estado:'ambar', titulo:'Baseline sano, conversión a plan en primera medición',
detalle:'El always-on (Google + Meta) corre en banda predecible. La conversión a plan pagado entra en su ventana de primera medición real cuando venzan los trials de la cohorte de abril.' },
funciona:[
'Baseline predecible: always-on (Google+Meta) corre en banda estrecha de variación.',
'Atribución limpia: UTMs bien mapeados, sin leaks entre productos ni canales.',
'El algoritmo de Google aprende solo: conversion rate sube sin intervención manual.',
'Picos puntuales identificados (TikTok Spark, webinar) — no son riesgo de degradación.'
],
atencion:[
'Conversión global a cliente muy baja en primera medición — entra ventana post-trial.',
'Dos perfiles mezclados: curiosos sin negocio real (store_name default) e interesados con fricción.',
'TikTok Spark: alto volumen de registros sin calificación — awareness, no demanda.',
'Meta: buena tasa de checkout iniciado pero pagos confirmados muy bajos.'
],
faq:[
{ q:'¿Cómo cerró Tienda el periodo?',
a:'El always-on corre en banda predecible. Picos puntuales explicados (TikTok Spark, webinar, Smart Bidding). La conversión a plan pagado llega a su primera medición real con vencimiento de trials de abril.' },
{ q:'¿El Spark de TikTok ayudó a Google Search?',
a:'No hubo halo. Cero búsquedas de marca relacionadas al creador. El Spark genera awareness del influencer, no demanda de producto.' },
{ q:'¿Por qué la conversión a cliente es tan baja?',
a:'Producto recién entra en su primera ventana de medición: cohortes de abril vencen trial en la segunda quincena de mayo. Si no escala a 5-8% en junio, el problema es de modelo freemium o pricing.' }
],
notas:[
'El reporte separa baseline always-on (Google+Meta) de iniciativas (TikTok/Webinar/T1 Páginas).',
'La conversión a plan pagado entra en su primera medición real con vencimiento de trials de abril.',
'Trial de 30 días: los usuarios no aparecen como clientes hasta el mes siguiente.'
]
},
pagos: {
nombre:'T1 Pagos', color:C.pagos, periodo:'últimas 6 semanas',
defCliente:'Primera transacción / liquidación', defCalif:'pagos_links_creados ≥ 1',
salud:{ estado:'ambar', titulo:'Funnel detallado pendiente de conexión',
detalle:'El detalle de funnel (documentación, links, transacciones) se completa al consolidar las propiedades de Pagos en HubSpot.' },
funciona:[
'Cohorte paid identificado y limpio en la ventana actual.',
'Vertical Belleza/Cabello mostró señal positiva en los tests de mayo (CPR ≈$16.75).'
],
atencion:[
'Margen estructuralmente bajo (1.12%) — brecha al breakeven amplia por diseño del producto.',
'Backlog de documentos de aprobación sin procesar desde el 22 abr — bloquea clientes.'
],
faq:[
{ q:'¿Cómo cerró Pagos el periodo?',
a:'Cohorte paid identificado. El detalle de funnel se completa al consolidar propiedades en HubSpot.' },
{ q:'¿Por qué la brecha al breakeven es tan grande?',
a:'El margen de Pagos es muy bajo (1.12% promedio). Aun con buen volumen de tx, el ROI requiere mucho más monto transado.' },
{ q:'¿Qué vertical mostró señal positiva?',
a:'Belleza/Cabello — el mejor CPR de los tests de mayo. Volumen aún insuficiente para concluir estadísticamente.' }
],
notas:[
'Funnel detallado pendiente — se completa al consolidar propiedades de Pagos en HubSpot.',
'Backlog de documentos de aprobación bloquea clientes adicionales.',
'Margen bajo (1.12%) hace la brecha al breakeven estructuralmente amplia.'
]
}
};
/* ── COMPONENTES UI · Nexus tokens ─────────────────────────── */
function KPI({label, valor, sub, estado, accent}){
const accentColor = estado ? colorEst[estado] : (accent || null);
// Tamaño del valor: si es muy largo (ej. $163,201.76), reduce para que quepa sin truncar.
const valorStr = String(valor || '');
const fontSize = valorStr.length > 11 ? 22 : valorStr.length > 9 ? 25 : 28;
return (
{accentColor &&
}
{label}
{valor}
{sub &&
{sub}
}
);
}
function FallbackBanner({persistedAt}){
if (!persistedAt) return null;
const fecha = new Date(persistedAt).toLocaleString('es-MX', { dateStyle:'short', timeStyle:'short' });
return (
💾
MOSTRANDO DATOS PERSISTIDOS
La fuente está temporalmente fallando. Estos son los últimos datos exitosos guardados en disco: {fecha}.
Cuando la fuente vuelva, los datos se refrescan automáticamente. Para forzar reintento ahora dale "↻ Refrescar este producto".
);
}
function ToolbarProducto({fuente, refrescar, cargando, color}){
return (
Fuente:{fuente}
);
}
function FuenteError({fuente, error}){
// Mensaje específico según el tipo de error para que la pantalla diga la verdad.
const esRateLimit = /rate-?limited|status=429/i.test(error || '');
const esAuth = /no autenticado|401|unauthorized/i.test(error || '') && !esRateLimit;
const explicacion = esRateLimit
? `HubSpot está temporalmente rate-limited (HubSpot Free permite ~4 req/s y excedimos burst). Se cura solo en 30-60 segundos. NO es un error de credenciales.`
: esAuth
? `Tu sesión expiró. Cierra sesión (botón power arriba derecha) y vuelve a entrar.`
: `${error}. Los otros productos no se ven afectados.`;
return (
⚠️
FUENTE NO DISPONIBLE · {fuente}
{explicacion} {esRateLimit ? 'Espera 1 minuto y dale "Refrescar este producto".' : esAuth ? '' : 'Vuelve a darle Aplicar en unos segundos para reintentar.'}
);
}
function Banner({estado, titulo, detalle}){
return (
{txtEst[estado].toUpperCase()} · {titulo}
{detalle}
);
}
/* ── TENDENCIA MENSUAL ──────────────────────────────────────────
Reusable en Envíos/Tienda/Pagos. Lee de /api/vacaciones/historico/:producto
(data congelada en disco; reg/calif/inv inmutables, cli/saldo refrescados c/lunes).
Muestra:
• Tabla por mes con promedio semanal de registros + min-max + variación
• Mini gráfica línea (avg reg/sem por mes)
• Banner contextual: última semana vs promedio del mes
─────────────────────────────────────────────────────────────── */
function TendenciaMensual({producto, color}){
const [data, setData] = useState(null);
const [err, setErr] = useState(null);
const [cargando, setCargando] = useState(true);
useEffect(() => {
api(`/historico/${producto}`)
.then(setData).catch(e => setErr(e.message)).finally(() => setCargando(false));
}, [producto]);
if (cargando) return
Sin histórico cargado. Corre node backend/scripts/backfill-historico.js para llenar Jan-mayo.
);
}
// Etiqueta del mes (ej. "Ene 2026")
const MESES = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
const labelMes = (ym) => {
const [y, m] = ym.split('-').map(Number);
return `${MESES[m-1]} ${y}`;
};
// Banner: comparación de la última semana COMPLETA vs su mes
const semanasOrdenadas = (data.semanas || []).slice().sort((a,b)=>a.desde.localeCompare(b.desde));
// Filtrar la "en curso" (hasta >= hoy)
const hoy = new Date().toISOString().slice(0,10);
const ultimaCompleta = [...semanasOrdenadas].reverse().find(s => s.hasta < hoy);
let banner = null;
if (ultimaCompleta) {
const mesUlt = ultimaCompleta.desde.slice(0,7);
const mesData = data.meses.find(m => m.mes === mesUlt);
if (mesData && mesData.regProm > 0) {
const diffPct = ((ultimaCompleta.reg - mesData.regProm) / mesData.regProm) * 100;
const tono = Math.abs(diffPct) < 5 ? 'estable' : diffPct > 0 ? 'sobre' : 'bajo';
const color2 = tono === 'estable' ? C.sub : diffPct > 0 ? C.verde : C.ambar;
banner = {
sem: ultimaCompleta.sem, reg: ultimaCompleta.reg, regProm: mesData.regProm,
diffPct: diffPct.toFixed(1), mes: labelMes(mesUlt), color: color2, tono
};
}
}
// Datos del chart (línea de promedio semanal por mes)
const chartData = data.meses.map(m => ({ mes: labelMes(m.mes).split(' ')[0], promedio: m.regProm, min: m.regMin, max: m.regMax }));
// Etiqueta de estabilidad legible en lugar de ±X%
const etiquetaEstabilidad = (regProm, regMin, regMax, nSemanas) => {
if (nSemanas <= 1) return { txt: 'Una semana', color: C.sub, tooltip: 'Solo 1 semana de datos en este mes — no hay variación que medir' };
const varPct = regProm ? ((regMax - regMin) / regProm) * 100 : 0;
if (varPct < 20) return { txt: 'Estable', color: C.verde, tooltip: `Las semanas de este mes oscilan en un rango chico (${varPct.toFixed(0)}% de variación entre min y max)` };
if (varPct < 50) return { txt: 'Volátil', color: C.ambar, tooltip: `${varPct.toFixed(0)}% de variación entre la mejor y peor semana del mes` };
return { txt: 'Muy volátil', color: C.rojo, tooltip: `${varPct.toFixed(0)}% de variación — semanas muy disparejas entre sí` };
};
return (
{/* Encabezado explicativo */}
¿Qué muestra esta sección? Cuántos registros llegan en promedio por semana en cada mes, qué tan estables son esas semanas entre sí, y cuánto cuesta cada registro. Útil para detectar caídas o saltos por algoritmo, estacionalidad o cambios de estrategia.
{Math.abs(banner.diffPct) < 5
? <>Está en línea con el promedio de {banner.mes} ({banner.regProm} reg/sem).
: <>Eso es {banner.diffPct > 0 ? '+' : ''}{banner.diffPct}% {banner.diffPct > 0 ? 'arriba' : 'abajo'} del promedio de {banner.mes} ({banner.regProm} reg/sem).}
Semana en curso {data.semanaEnCurso.sem}: {data.semanaEnCurso.reg} reg · {data.semanaEnCurso.calif} calificados · {data.semanaEnCurso.cli} clientes
(no se cuenta en los promedios del mes porque aún no termina)
)}
{/* Tabla por mes */}
Mes
Semanas
Registros por semana (prom)
Rango (min→max)
Estabilidad
Inv/semana
CPR
CPA
% a cliente
Clientes/sem (prom)
{data.meses.map((m,i)=>{
const est = etiquetaEstabilidad(m.regProm, m.regMin, m.regMax, m.nSemanas);
return (
Cómo leer: Si un mes dice «120 registros/sem · Estable · CPR $224», significa que cada semana entró un volumen parecido de prospectos a un costo consistente. Si dice «93 reg/sem · Muy volátil · CPR $230», hay semanas con cero y semanas con 139 — algo (Hot Sale, pausa de pauta, fin de mes) está moviendo fuerte. Registros e inversión se cierran semana a semana con una ventana de gracia de 14 días para capturar contactos tardíos.
);
}
// Botón "?" reusable. Click muestra popover con explicación contextual.
function HelpIcon({text, label, align='left'}){
const [open, setOpen] = useState(false);
if (!text) return null;
return (
{open && (
{text}
)}
);
}
function Sec({titulo, nota, help, children}){
return (
{titulo}
{help && }
{nota && {nota}}
{children}
);
}
function ListaSalud({items, color, signo}){
return (
);
}
function LecturaSalud({funciona, atencion}){
return (
Lo que funciona
Lo que requiere atención
);
}
/* ── VISTA ENVÍOS ──────────────────────────────────────────── */
function VistaEnvios({d, roi8, hoyStr, error, refrescar, cargando, semaforos, periodoLabel, fallbackAt}){
const k = d.total;
const ult = ultimaSemanaCompleta(d.semanas, hoyStr);
const roiUlt = ult.inv ? (ult.saldoT1 * d.margen) / ult.inv : 0;
const chart = d.semanas.map(s=>({sem:s.sem, Registros:s.reg, Clientes:s.cli, enCurso:isEnCurso(s,hoyStr)}));
const sem = semaforos || {};
// Salud dinámica basada en ROI 8 semanas real (no hardcoded).
// Lectura estable: el rolling 8 sem ya promedia maduración de cohorte.
const roi8Val = roi8?.total?.roi;
const saludDinamica = roi8Val == null ? d.salud : (
roi8Val >= 1.5 ? { estado:'verde', titulo:`Rentable · ROI 8 sem ${roi8Val.toFixed(2)}× por encima del breakeven`,
detalle:`ROI 8 semanas (rolling) = ${roi8Val.toFixed(2)} → producto rentable, ${(roi8Val).toFixed(1)}× sobre el breakeven 1.0. El ROI semanal de las últimas 2-3 cohortes (${roiUlt.toFixed(2)}) refleja maduración pendiente, NO problema de adquisición.` } :
roi8Val >= 1.0 ? { estado:'verde', titulo:`En breakeven · ROI 8 sem ${roi8Val.toFixed(2)}`,
detalle:`ROI 8 semanas = ${roi8Val.toFixed(2)}, justo en o sobre el breakeven 1.0. Hay margen para crecer optimizando saldo prom. por cliente o reduciendo CPA.` } :
roi8Val >= 0.7 ? { estado:'ambar', titulo:`Cerca del breakeven · ROI 8 sem ${roi8Val.toFixed(2)}`,
detalle:`ROI 8 semanas = ${roi8Val.toFixed(2)} — bajo breakeven 1.0. Investigar si baja saldo prom. por cliente o aumenta CPA. Verificar cohortes maduras (>6 sem) para confirmar tendencia.` } :
{ estado:'rojo', titulo:`Bajo breakeven · ROI 8 sem ${roi8Val.toFixed(2)}`,
detalle:`ROI 8 semanas = ${roi8Val.toFixed(2)} — significativamente bajo el breakeven. Acción urgente: revisar canales con peor CPA y considerar pausar inversión en los menos rentables.` }
);
return (
{s.sem}
{enCurso && En curso}
{ultimaComp && Lectura limpia}
{fmt(s.cli)}
{mxnDec(s.saldoT1)}
{mxnDec(s.saldoPrec)}
{mxnDec(precProm)}
{roi.toFixed(2)}
);
})}
⚠ El "Saldo T1Envíos" es acumulado actual — las cohortes tempranas llevan semanas recargando, las recientes apenas días. Su ROI alto es aging de cohorte, no performance. La lectura comparable es la última semana. El saldo de 1ª recarga sí es comparable entre semanas.
{roi8 &&
ROI últimas 8 semanas
{roi8.total.roi.toFixed(2)}
Lectura estable: la ventana de 8 semanas promedia aging de cohorte y refleja el estado real del negocio. El ROI semanal es la foto de la cohorte más reciente sin tiempo de madurar — no usar para juzgar rentabilidad.
ROI = tienda_pagos_acumulado / inversión (ingreso directo, sin margen). Las cohortes recientes pueden tener ROI bajo porque el plan se cobra mensual.
{`${fmt(t.cli)} clientes en ${fmt(t.reg)} registros (${pct(t.pctCli)})`}
El producto entra en su ventana de primera medición real: las cohortes de abril vencen trial en la segunda quincena de mayo. Si el % no escala a 5-8% en junio, el problema es de modelo freemium o pricing.
Columnas: SinEnv = sin enviar docs (estatus vacío o "pendiente") · Rev = en revisión · Apr = aprobada ⭐ · Rec = rechazada ⚠ · 1ªTx = primera transacción · 1ªLiq = primera liquidación · Cli = tx O liq (= cliente).
El monto transado vive en el Excel que Álvaro mantiene.
{funnel.map((f,i)=>{
const ind = f.e.startsWith(' ');
const colorBar = f.color || d.color;
// Last semana cerrada del rango — usamos el rango total para los conteos del funnel
const rangoCompleto = { sem: 'periodo completo', desde: d.semanas[0]?.desde, hasta: d.semanas[d.semanas.length-1]?.hasta };
const clickable = f.key && f.n > 0;
return (
Cada producto tiene su pestaña con KPIs, comportamiento semanal, lectura de salud y un bloque de preguntas frecuentes que responde lo que se le preguntaría a Marketing.
Los semáforos indican salud: verde sano, ámbar atención, rojo crítico.
Las notas de contexto explican lo que los números no dicen solos — conviene leerlas antes de concluir.
Las cifras se actualizan desde HubSpot vía API. La pestaña Tráfico se alimenta de GA4 Data API; la inversión se carga subiendo el export de Google Ads o Meta.
);
}
/* ── VISTA TRÁFICO (GA4) ───────────────────────────────────── */
// Calcula desde a partir de un preset y hasta dado
function rangoDesdePreset(preset, hastaYmd){
const [y,m,d] = hastaYmd.split('-').map(Number);
const dt = new Date(Date.UTC(y, m-1, d));
const dias = preset === '7d' ? 6 : preset === '14d' ? 13 : preset === '30d' ? 29 : preset === '60d' ? 59 : preset === '90d' ? 89 : null;
if (dias === null) return null;
dt.setUTCDate(dt.getUTCDate() - dias);
return `${dt.getUTCFullYear()}-${String(dt.getUTCMonth()+1).padStart(2,'0')}-${String(dt.getUTCDate()).padStart(2,'0')}`;
}
// Chips de preset + date pickers calendario. Cambia un rango (desde,hasta) según preset relativo a `hastaRef`
// o por selección directa de fechas calendario (cualquier rango arbitrario).
function PresetRangoChips({rango, onChange, hastaRef, presets = ['7d','14d','30d','60d','global'], defaultGlobal}){
// Estado local para los inputs date (para no disparar fetch en cada tecla, solo al click Aplicar)
const [localDesde, setLocalDesde] = useState(rango.desde);
const [localHasta, setLocalHasta] = useState(rango.hasta);
// Sync local con prop cuando cambia desde fuera (ej. global reset)
useEffect(() => { setLocalDesde(rango.desde); setLocalHasta(rango.hasta); }, [rango.desde, rango.hasta]);
// Detecta cuál preset matchea el rango actual
const match = (() => {
if (defaultGlobal && rango.desde === defaultGlobal.desde && rango.hasta === defaultGlobal.hasta) return 'global';
for (const p of presets) {
if (p === 'global') continue;
const d = rangoDesdePreset(p, rango.hasta);
if (d === rango.desde) return p;
}
return null;
})();
const inputStyle = { padding:'4px 8px', border:`1px solid ${C.line}`, borderRadius:5, fontSize:11.5, fontFamily:'inherit', color:C.ink, background:C.card };
const pendiente = localDesde !== rango.desde || localHasta !== rango.hasta;
const aplicarFechas = () => {
if (localDesde && localHasta && localDesde <= localHasta) onChange({ desde: localDesde, hasta: localHasta });
};
return (
);
}
/* ── VISTA AYUDA · instructivo para Natalia ────────────────── */
function VistaAyuda(){
const Q = ({titulo, children}) => (
{titulo}
{children}
);
return (
1. Verifica el rango en el header (por default: últimos 42 días terminando hoy).
2. Mira la pestaña Resumen: las 3 cards te dicen el estado de cada producto.
3. Si un producto tiene la salud en ámbar o rojo, entra a su pestaña para ver el detalle.
4. La sección Lectura de la tendencia debajo de cada gráfica te explica lo que está pasando.
Pestaña Inversión → botón 📂 Subir CSV (o "o pegar texto"). Tres formatos auto-detectados:
Google Ads (recomendado): exporta el reporte de Google Ads tal cual. Si incluye la dimensión Día, se guarda con granularidad diaria — el chat puede responder CPR/CPA por fecha exacta.
Long: 3 columnas — Campaña, Fecha, Gasto.
Wide: filas = campañas en orden de la tabla, columnas = semanas.
Cuando guardas, los CPR/CPA/ROI se recalculan al instante.
En la UI de Google Ads → vista de Campañas → arriba haz click en Día en la barra de Periodo/Segmento (o agrega "Día" como segmento). Exporta el CSV. Cada campaña va a aparecer un row por día con su Costo. Sube ese archivo y el parser distribuye automáticamente.
Las semanas corren Lunes-Domingo. La semana en curso (si hoy es martes, sería esta semana) está marcada con un pill naranja "EN CURSO" y los datos están incompletos por definición — su ROI puede verse bajo simplemente porque no han terminado las recargas.
La última completa es la lectura limpia para juzgar performance.
Verde: dentro de banda normal (±15% del promedio reciente).
Ámbar: variación entre 15-30%. Vale la pena revisar.
Rojo: variación > 30%. Atender.
Para CPR/CPA, "subida" es lo malo (más caro). Para Registros/Clientes, "bajada" es lo malo.
El semáforo se calcula contra el promedio de las 3-4 semanas previas (excluyendo la en curso).
Son fuentes diferentes:
T1 Envíos → HubSpot directo. Tarda 30-90s la primera carga (paginado).
T1 Tienda + Pagos → T1 API. Mucho más rápido (5-20s).
Tráfico → GA4 Data API. Rápido pero solo carga al entrar a esa pestaña.
Si rate-limita una fuente, las otras siguen funcionando. Cada vista de producto tiene su propio botón "↻ Refrescar este producto".
1. Verifica el rango en el header — los filtros aplican a todo.
2. Ve a la pestaña UTMs sin mapear — si aparece una UTM con `T1*` en el nombre, es una campaña nueva que falta agregar al catálogo.
3. Compara contra HubSpot UI (segmento de Rebeca u otro) y mándame el número que esperabas vs el que se muestra.
Botón "Consultar ✦" arriba a la derecha. Abre el chat de Gemini, que responde con base en los KPIs cargados.
Si la pregunta no se puede responder con los datos, te lo dice claramente ("no tengo ese dato") — no inventa.
Cada producto cachea su data por 5 minutos. El botón "Aplicar (3 productos)" del header fuerza fresh fetch.
Hay también un cron automático que pre-calienta el snapshot a las 8 AM CDMX y cada 2h en horario laboral, así que cuando llegues a trabajar ya estará listo.
T1 Envíos sí tiene campañas paid activas. No es baseline operativo.
El saldo_t1envios es acumulado actual — las cohortes tempranas reflejan aging.
El funnel comercial no es secuencial: los flags son eventos independientes.
Variaciones <±20% pueden ser ruido normal.
Atribución por UTM de campaña (cross-product).
);
}
/* ── VISTA UTMs SIN MAPEAR (interactiva) ──────────────────────
Permite al usuario asignar UTMs sin clasificar a un producto T1 o
descartarlas. La asignación se guarda en cohortes-overrides.json y
dispara un rebuild del snap + sync histórico (background, ~2 min).
Match exacto por los 5 campos UTM. */
const CANALES = ['meta','google','tiktok','youtube','webinar','otro'];
function FilaAsignar({utm, n, providers, sampleEmails, catalogo, onAplicar, busy}) {
const [producto, setProducto] = useState('');
const [canal, setCanal] = useState('');
const [campana, setCampana] = useState('');
const campanasFiltradas = catalogo.filter(c =>
(!producto || c.producto === producto) && (!canal || c.canal === canal)
);
const puedeAsignar = producto && canal && campana && !busy;
const puedeDescartar = !busy;
const reset = () => { setProducto(''); setCanal(''); setCampana(''); };
const asignar = async () => {
await onAplicar({ utm, accion: 'asignar', producto, canal, campana });
reset();
};
const descartar = async () => {
if (!confirm(`¿Descartar ${n} contactos con esta UTM? No contarán en ningún producto.`)) return;
await onAplicar({ utm, accion: 'descartar' });
};
const provStr = Object.entries(providers||{}).map(([k,v])=>`${k}=${v}`).join(' · ');
return (
{fmt(n)}
source:{utm.utm_source || '—'}
medium:{utm.utm_medium || '—'}
campaign:{utm.utm_campaign || '—'}
content:{utm.utm_content || '—'}
term:{utm.utm_term || '—'}
providers: {provStr}
{sampleEmails?.length > 0 &&
ejemplos: {sampleEmails.slice(0,2).join(' · ')}
}
);
}
function VistaUtms({desde, hasta}){
const [data,setData] = useState(null);
const [err,setErr] = useState(null);
const [busy,setBusy] = useState(false);
const [msg,setMsg] = useState(null);
const [overridesData,setOverridesData] = useState({overrides: [], catalogo: []});
const cargar = async () => {
setErr(null);
try {
const [vivo, ov] = await Promise.all([
api(`/utms-sinclasificar-vivo?desde=${desde}&hasta=${hasta}`),
api(`/cohortes-overrides`)
]);
setData(vivo);
setOverridesData(ov);
} catch (e) { setErr(e.message); }
};
useEffect(() => { setData(null); cargar(); }, [desde, hasta]);
// Después de POST/DELETE NO refetcheamos /utms-sinclasificar-vivo (es lento).
// Actualizamos el estado local: la fila desaparece de items y el override aparece en la lista.
// El rebuild en background del backend ya está actualizando snap + histórico.
const aplicarOverride = async ({utm, accion, producto, canal, campana}) => {
setBusy(true); setMsg(null);
try {
const body = { ...utm, accion, producto, canal, campana };
const resp = await api('/cohortes-overrides', { method:'POST', body: JSON.stringify(body) });
// Quitar la fila de items locales (match por los 5 campos UTM)
const keyOf = u => `${u.utm_source||''}|||${u.utm_medium||''}|||${u.utm_campaign||''}|||${u.utm_content||''}|||${u.utm_term||''}`;
const k = keyOf(utm);
setData(prev => prev ? { ...prev, items: prev.items.filter(x => keyOf(x.utm) !== k) } : prev);
// Agregar override a la lista local
setOverridesData(prev => ({ ...prev, overrides: [...(prev.overrides||[]), resp.override] }));
setMsg({ tipo: 'ok', txt: `${accion === 'descartar' ? 'Descartada' : 'Asignada'} ✓ — el rebuild del snap+histórico corre en background (2-3 min). Los KPIs viejos se recalculan automático.` });
} catch (e) {
setMsg({ tipo: 'err', txt: e.message });
} finally { setBusy(false); }
};
const eliminarOverride = async (idx) => {
if (!confirm('¿Quitar este override? Los contactos que matcheaban con la regla manual volverán a su clasificación original.')) return;
setBusy(true); setMsg(null);
try {
await api(`/cohortes-overrides/${idx}`, { method:'DELETE' });
// Quitar de la lista local
setOverridesData(prev => ({ ...prev, overrides: (prev.overrides||[]).filter((_, i) => i !== idx) }));
setMsg({ tipo: 'ok', txt: 'Override removido — rebuild en background. La UTM volverá a aparecer en la tabla al próximo refresh.' });
} catch (e) { setMsg({ tipo: 'err', txt: e.message }); } finally { setBusy(false); }
};
// Botón opcional: forzar refetch desde HubSpot/T1 (lento, ~30-60s).
const refrescarUtms = async () => {
setData(null);
setMsg(null);
try {
const fresh = await api(`/utms-sinclasificar-vivo?desde=${desde}&hasta=${hasta}&fresh=1`);
setData(fresh);
} catch (e) { setMsg({ tipo: 'err', txt: e.message }); }
};
if (err) return
);
}
/* ── VISTA INVERSIÓN (hoja de admin) ───────────────────────── */
const MESES_LARGO = ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
function labelMes(ym){ const [y,m] = ym.split('-').map(Number); return `${MESES_LARGO[m-1]} ${y}`; }
// Input de moneda: muestra $X,XXX.XX cuando no tiene foco, raw (con decimales) al editar.
// Preserva centavos — el reporte de Google Ads viene con dos decimales y los queremos exactos.
function CurrencyCell({value, onChange, width=90}){
const [focus, setFocus] = useState(false);
const n = Number(value);
const tieneVal = value !== '' && value != null && !isNaN(n) && n !== 0;
// En modo edición mostramos el número con decimales si los tiene, sin notación científica.
const rawStr = (() => {
if (!tieneVal) return '';
// Evita 0.04 → "0.040000000001" type artifacts: redondea a 2 decimales
const rounded = Math.round(n * 100) / 100;
return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(2);
})();
const display = focus ? rawStr : (tieneVal ? mxnDec(n) : '');
return (
onChange(e.target.value.replace(/[^\d.]/g, ''))}
onFocus={()=>setFocus(true)}
onBlur={()=>setFocus(false)}
placeholder="$0.00"
style={{width,padding:'5px 7px',border:`1px solid ${C.line}`,borderRadius:4,fontSize:12,textAlign:'right',fontFamily:'inherit',background:C.card,color:tieneVal?C.ink:C.subLt}}
/>
);
}
function VistaInversion({desde, hasta, onSaved}){
const [data,setData] = useState(null);
const [err,setErr] = useState(null);
const [cargando,setCargando] = useState(false);
const [guardando,setGuardando] = useState(false);
const [valores,setValores] = useState({});
const [pegando,setPegando] = useState(false);
const [pasteText,setPasteText] = useState('');
const [modo,setModo] = useState('semanal'); // 'semanal' | 'mensual'
useEffect(() => {
setData(null); setErr(null); setCargando(true);
api(`/inversion/grid?desde=${desde}&hasta=${hasta}&futuras=5`)
.then(d => { setData(d); setValores(d.valores || {}); })
.catch(e => setErr(e.message))
.finally(() => setCargando(false));
}, [desde, hasta]);
// Construye las columnas según el modo. En mensual, agrupa por YYYY-MM del Lunes de la semana.
const columnas = (() => {
if (!data?.semanas) return [];
if (modo === 'semanal') return data.semanas.map(s => ({ ...s, key: s.desde, semanasDelMes: [s] }));
const meses = new Map();
data.semanas.forEach(s => {
const ym = s.desde.slice(0,7);
if (!meses.has(ym)) meses.set(ym, { key: ym, sem: labelMes(ym), desde: s.desde, hasta: s.hasta, semanasDelMes: [] });
const m = meses.get(ym);
m.semanasDelMes.push(s);
if (s.hasta > m.hasta) m.hasta = s.hasta;
});
return [...meses.values()];
})();
// Obtiene el valor de una celda según modo (suma de semanas si mensual).
const getValor = (campKey, col) => {
if (modo === 'semanal') return valores[campKey]?.[col.desde] ?? '';
const total = col.semanasDelMes.reduce((s, w) => s + (Number(valores[campKey]?.[w.desde]) || 0), 0);
return total > 0 ? total : '';
};
// Limpia una sola columna (semana/mes) para TODAS las campañas — útil para borrar un upload mal hecho sin perder otras semanas.
const limpiarColumna = (col) => {
if (!confirm(`¿Borrar la inversión de "${col.sem}" para TODAS las campañas? Solo afecta esta columna; las demás semanas se conservan. No se guarda hasta que le des Guardar.`)) return;
setValores(prev => {
const next = { ...prev };
for (const campKey of Object.keys(next)) {
if (!next[campKey]) continue;
const camp = { ...next[campKey] };
// En modo semanal: borrar la celda de col.desde y los __dias dentro de la semana.
// En modo mensual: borrar todas las semanas que componen el mes.
const semanasABorrar = modo === 'mensual' ? (col.semanasDelMes || []) : [col];
for (const sem of semanasABorrar) {
delete camp[sem.desde];
if (camp.__dias) {
for (const fecha of Object.keys(camp.__dias)) {
if (fecha >= sem.desde && fecha <= sem.hasta) delete camp.__dias[fecha];
}
}
}
next[campKey] = camp;
}
return next;
});
};
// Descartar cambios: vuelve al estado del backend (lo último guardado).
const descartarCambios = () => {
if (!data) return;
if (!confirm('¿Descartar las ediciones no guardadas? Los valores vuelven al último estado guardado.')) return;
setValores(data.valores || {});
};
// En semanal: setea la celda directo. En mensual: distribuye el total equitativamente entre las semanas del mes.
const setCelda = (campKey, col, valor) => {
if (modo === 'semanal') {
setValores(prev => ({ ...prev, [campKey]: { ...(prev[campKey]||{}), [col.desde]: valor } }));
return;
}
const num = Number(valor) || 0;
const N = col.semanasDelMes.length;
const porSem = N > 0 ? num / N : 0;
setValores(prev => {
const next = { ...prev, [campKey]: { ...(prev[campKey]||{}) } };
col.semanasDelMes.forEach(w => { next[campKey][w.desde] = porSem; });
return next;
});
};
const guardar = async () => {
if (!data) return;
setGuardando(true); setErr(null);
const rows = [];
for (const camp of data.campanas) {
const dias = valores[camp.key]?.__dias;
if (dias && Object.keys(dias).length > 0) {
// Modo DIARIO: limpia la semana completa (rangoDesde→rangoHasta) y escribe entradas por día.
// Para limpiar usamos un row con rangoDesde/rangoHasta + gasto=0 (no se inserta porque gasto≤0).
for (const sem of data.semanas) {
rows.push({ campanaKey: camp.key, producto: camp.producto, canal: camp.canal,
fecha: sem.desde, rangoDesde: sem.desde, rangoHasta: sem.hasta, gasto: 0 });
}
for (const [fechaDia, gasto] of Object.entries(dias)) {
rows.push({ campanaKey: camp.key, producto: camp.producto, canal: camp.canal,
fecha: fechaDia, gasto: Number(gasto) || 0 });
}
} else {
// Modo SEMANAL: cada row representa la semana completa [sem.desde, sem.hasta].
// El backend borrará TODAS las filas existentes en ese rango antes de insertar.
for (const sem of data.semanas) {
const v = valores[camp.key]?.[sem.desde];
rows.push({
campanaKey: camp.key,
producto: camp.producto,
canal: camp.canal,
fecha: sem.desde,
rangoDesde: sem.desde, rangoHasta: sem.hasta,
gasto: Number(v) || 0
});
}
}
}
try {
const r = await api('/inversion/grid', { method:'POST', body: JSON.stringify({ rows }) });
onSaved && onSaved();
const fresh = await api(`/inversion/grid?desde=${desde}&hasta=${hasta}&futuras=5`);
setData(fresh); setValores(fresh.valores || {});
alert(`Guardado: ${r.guardadas} celdas · KPIs recalculados`);
} catch (e) {
setErr(e.message);
} finally {
setGuardando(false);
}
};
// Parser de fechas en español: "11 de mayo de 2026" → "2026-05-11"
const MES_NUM = { enero:1, febrero:2, marzo:3, abril:4, mayo:5, junio:6, julio:7, agosto:8, septiembre:9, octubre:10, noviembre:11, diciembre:12 };
const parseFechaES = (s) => {
const m = /(\d{1,2})\s*de\s*(\w+)\s*de\s*(\d{4})/i.exec(s);
if (!m) return null;
const dia = parseInt(m[1], 10);
const mes = MES_NUM[m[2].toLowerCase()];
const ano = parseInt(m[3], 10);
if (!mes) return null;
return `${ano}-${String(mes).padStart(2,'0')}-${String(dia).padStart(2,'0')}`;
};
const normalizarNombre = (s) => (s||'').replace(/\s+/g,' ').trim().toLowerCase();
// Auto-clasifica una campaña por prefijo de nombre (cuando no está en el catálogo).
// Ejemplo: 'T1Envios_Meta_Adquisicion_Conversion_Q1-26' → {producto:'envios', canal:'meta'}
function autoClasificarCampaña(nombre){
if (!nombre) return null;
const n = nombre.toLowerCase();
let producto = null;
if (/^t1envios|^t1\s*env|t1envios_|env[ií]os_/.test(n)) producto = 'envios';
else if (/^t1tienda|^t1\s*tien|t1tienda_|tienda_/.test(n)) producto = 'tienda';
else if (/^t1pagos|^t1\s*pag|t1pagos_|pagos_/.test(n)) producto = 'pagos';
if (!producto) return null;
let canal = 'otro';
if (/_meta_|_fb_|_facebook_|_instagram_/.test(n) || /\bmeta\b/.test(n)) canal = 'meta';
else if (/_google_|_search_|_pmax_|_adwords_/.test(n) || /google/.test(n)) canal = 'google';
else if (/_tiktok_|tiktok/.test(n)) canal = 'tiktok';
else if (/_youtube_|_yt_|youtube/.test(n)) canal = 'youtube';
return { producto, canal };
}
// Parser específico para reporte de Google Ads.
// Detecta: línea con "Informe de campaña" + rango "X de mes de año - Y de mes de año"
// + header con "Campaña" y "Costo" (o "Presupuesto" como fallback).
// Parser de fecha más flexible (Google Ads usa varios formatos)
const parseFechaCelda = (s) => {
if (!s) return null;
const t = String(s).trim();
// YYYY-MM-DD o YYYY/MM/DD
let m = /^(\d{4})[-/](\d{1,2})[-/](\d{1,2})$/.exec(t);
if (m) return `${m[1]}-${String(m[2]).padStart(2,'0')}-${String(m[3]).padStart(2,'0')}`;
// DD/MM/YYYY o DD-MM-YYYY
m = /^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/.exec(t);
if (m) return `${m[3]}-${String(m[2]).padStart(2,'0')}-${String(m[1]).padStart(2,'0')}`;
// ES "11 de mayo de 2026"
const esFecha = parseFechaES(t);
if (esFecha) return esFecha;
return null;
};
const parseGoogleAds = (lineas, sep) => {
// Buscar línea con rango de fechas (encabezado del reporte). Detecta start y end.
let fechaRango = null, fechaRangoFin = null;
for (const linea of lineas) {
for (const celda of linea) {
const m = /(\d{1,2}\s*de\s*\w+\s*de\s*\d{4})\s*-\s*(\d{1,2}\s*de\s*\w+\s*de\s*\d{4})/i.exec(celda);
if (m) { fechaRango = parseFechaES(m[1]); fechaRangoFin = parseFechaES(m[2]); break; }
}
if (fechaRango) break;
}
// Buscar header con "Campaña" / "Nombre de la campaña" + columna de costo + opcional fecha.
// Maneja Google Ads (header simple) y Meta Ads (headers más largos).
let headerRow = -1, idxCamp = -1, idxCosto = -1, idxDia = -1;
for (let i = 0; i < lineas.length; i++) {
const lc = lineas[i].map(c => (c||'').toLowerCase().trim());
const _idxCamp = lc.findIndex(h =>
h === 'campaña' || h === 'campana' ||
h === 'nombre de la campaña' || h === 'nombre de la campana' ||
h === 'nombre del conjunto de anuncios' || h === 'conjunto de anuncios' ||
h === 'campaign' || h === 'campaign name' || h === 'ad set name' || h === 'ad set'
);
const _idxCosto = lc.findIndex(h =>
h === 'costo' || h === 'coste' ||
h === 'importe gastado' || h === 'importe gastado (mxn)' ||
h === 'gasto' || h === 'amount spent' || h === 'cost'
);
const _idxPres = lc.findIndex(h => h === 'presupuesto');
const _idxDia = lc.findIndex(h =>
h === 'día' || h === 'dia' || h === 'date' || h === 'fecha' ||
h === 'inicio del informe' || h === 'fin del informe' ||
h === 'reporting starts' || h === 'reporting ends' || h === 'day'
);
if (_idxCamp >= 0 && (_idxCosto >= 0 || _idxPres >= 0)) {
headerRow = i; idxCamp = _idxCamp; idxCosto = _idxCosto >= 0 ? _idxCosto : _idxPres; idxDia = _idxDia;
break;
}
}
// Detectar si el export es de Meta Ads (headers en español típicos de Meta).
// Cuando es Meta, forzamos canal='meta' para todas las filas auto-clasificadas,
// independiente de si el nombre del ad set incluye '_Meta_' o no.
const esMetaExport = headerRow >= 0 && lineas[headerRow].some(h => {
const lh = (h||'').toLowerCase().trim();
return lh === 'importe gastado (mxn)' || lh === 'nombre del conjunto de anuncios' ||
lh === 'inicio del informe' || lh === 'amount spent (mxn)';
});
if (headerRow < 0) return null; // No es formato Google Ads
if (idxDia < 0 && !fechaRango) {
return { error: 'Reporte de Google Ads sin fecha. Agrega la dimensión "Día" o asegúrate que el reporte tenga el rango de fechas en el encabezado.' };
}
// Detectar si el rango global cubre varias semanas (>7 días) sin desglose diario.
const spanDias = (fechaRango && fechaRangoFin)
? Math.round((Date.UTC(...fechaRangoFin.split('-').map((v,i)=> i===1?+v-1:+v)) - Date.UTC(...fechaRango.split('-').map((v,i)=> i===1?+v-1:+v)))/86400000) + 1
: 1;
const multiSemana = idxDia < 0 && spanDias > 7;
// Si el reporte cubre >7 días sin Día, distribuiremos cada valor equitativamente entre las semanas que toca el rango.
const semanasEnRangoReporte = multiSemana
? data.semanas.filter(s => s.hasta >= fechaRango && s.desde <= fechaRangoFin)
: null;
const nuevo = { ...valores };
const mapped = [];
const unmatched = [];
const excluded = []; // YouTube / Remarketing — no son adquisición, no entran al grid
const fechasUsadas = new Set();
let llenadas = 0;
// Patrones de campañas NO adquisición que vienen del backend (cohortes.js).
// Filtramos ANTES de matchear contra catálogo o autoClasificarCampaña para que
// no terminen como filas "dinámicas" en el grid.
const excludedPatterns = (data.excluidasPatterns || []).map(src => new RegExp(src, 'i'));
const esExcluida = (nombre) => excludedPatterns.some(rx => rx.test(nombre));
// Determinar el rango del reporte para limpiar entradas previas dentro de ese rango.
// Esto evita que re-subir el mismo reporte duplique valores.
const rangoLimpiezaDesde = fechaRango;
const rangoLimpiezaHasta = fechaRangoFin || fechaRango;
const semanasEnLimpieza = (rangoLimpiezaDesde && rangoLimpiezaHasta)
? data.semanas.filter(s => s.hasta >= rangoLimpiezaDesde && s.desde <= rangoLimpiezaHasta)
: [];
const campsEnUpload = new Set(); // se llena durante el parseo
for (let i = headerRow + 1; i < lineas.length; i++) {
const row = lineas[i];
let nombre = (row[idxCamp] || '').trim();
// Saltar filas de Total / vacías / "--" típicas de Google Ads
if (!nombre || /^total/i.test(nombre) || nombre === '--' || nombre === '—') continue;
// Normalizar espacios duplicados (typos como "Competidores -Always On" → "Competidores -Always On")
nombre = nombre.replace(/\s+/g, ' ').trim();
const valor = Number((row[idxCosto] || '').replace(/[$,\s]/g, '')) || 0;
if (valor <= 0) continue;
// Excluir campañas NO adquisición (YouTube/Remarketing) — no entran al grid.
if (esExcluida(nombre)) { excluded.push({ nombre, valor }); continue; }
// Determinar fecha del row: si hay columna Día, úsala; si no, usa el rango.
const fechaRow = idxDia >= 0 ? parseFechaCelda(row[idxDia]) : fechaRango;
if (!fechaRow) continue;
// Canonizar alias antes de matchear contra el catálogo.
// aliasCampana: variantes de utm_campaign históricas → nombre canónico.
// aliasAdset: ad set Meta (lo que Meta exporta en CSV) → campaña Meta canónica.
const aliases = data.aliasCampana || {};
const adsetMap = data.aliasAdset || {};
const nombreCanonico = adsetMap[nombre] || aliases[nombre] || nombre;
const target = normalizarNombre(nombreCanonico);
let camp = data.campanas.find(c => normalizarNombre(c.campana) === target) ||
data.campanas.find(c => normalizarNombre(c.campana).startsWith(target.slice(0, Math.max(25, target.length-5)))) ||
data.campanas.find(c => target.startsWith(normalizarNombre(c.campana).slice(0, 25)));
// Auto-clasificar por prefijo del nombre si no matchea el catálogo.
// Patrones: T1Envios_* → envíos, T1Tienda_* → tienda, T1Pagos_* → pagos.
// Canal inferido del nombre: _Meta_ → meta, _Google_/_Search_ → google, etc.
// Si el export es Meta, forzamos canal='meta' aunque el nombre no lo diga.
if (!camp) {
const auto = autoClasificarCampaña(nombreCanonico);
if (auto) {
const canalFinal = esMetaExport ? 'meta' : auto.canal;
camp = { campana: nombreCanonico, canal: canalFinal, producto: auto.producto, key: nombreCanonico, _auto: true };
} else {
unmatched.push({ nombre, fecha: fechaRow, valor });
continue;
}
}
if (!nuevo[camp.key]) nuevo[camp.key] = {};
// En el primer toque de esta campaña en este upload, limpiamos sus entradas
// existentes dentro del rango del reporte. Evita duplicación al re-subir.
if (!campsEnUpload.has(camp.key)) {
campsEnUpload.add(camp.key);
for (const sem of semanasEnLimpieza) {
delete nuevo[camp.key][sem.desde];
}
if (nuevo[camp.key].__dias) {
for (const fecha of Object.keys(nuevo[camp.key].__dias)) {
if (fecha >= rangoLimpiezaDesde && fecha <= rangoLimpiezaHasta) {
delete nuevo[camp.key].__dias[fecha];
}
}
}
}
if (idxDia >= 0) {
// Granularidad diaria: una entrada por día exacto
const sem = data.semanas.find(s => fechaRow >= s.desde && fechaRow <= s.hasta);
if (!sem) continue;
const prev = Number(nuevo[camp.key][sem.desde]) || 0;
nuevo[camp.key][sem.desde] = prev + valor;
if (!nuevo[camp.key].__dias) nuevo[camp.key].__dias = {};
nuevo[camp.key].__dias[fechaRow] = (Number(nuevo[camp.key].__dias[fechaRow])||0) + valor;
mapped.push({ camp: camp.campana, fecha: fechaRow, valor });
fechasUsadas.add(fechaRow);
llenadas++;
} else if (multiSemana && semanasEnRangoReporte && semanasEnRangoReporte.length > 0) {
// Rango global de varias semanas sin desglose → distribuir equitativo
const porSem = valor / semanasEnRangoReporte.length;
for (const sem of semanasEnRangoReporte) {
const prev = Number(nuevo[camp.key][sem.desde]) || 0;
nuevo[camp.key][sem.desde] = prev + porSem;
fechasUsadas.add(sem.desde);
}
mapped.push({ camp: camp.campana, fecha: `${fechaRango}→${fechaRangoFin}`, valor, distribuido: semanasEnRangoReporte.length });
llenadas++;
} else {
// Rango de una sola semana: todo va a la semana que lo contiene
const sem = data.semanas.find(s => fechaRow >= s.desde && fechaRow <= s.hasta);
if (!sem) continue;
nuevo[camp.key][sem.desde] = valor;
mapped.push({ camp: camp.campana, fecha: fechaRow, valor });
fechasUsadas.add(fechaRow);
llenadas++;
}
}
const fechasOrden = [...fechasUsadas].sort();
return {
tipo: idxDia >= 0 ? 'googleAdsDiario' : (multiSemana ? 'googleAdsMultiSemana' : 'googleAds'),
llenadas, nuevo,
mapped, unmatched, excluded,
fechaInicio: fechaRango || fechasOrden[0],
fechaFin: fechaRangoFin || fechasOrden[fechasOrden.length-1],
diasUnicos: fechasUsadas.size,
spanDias,
semanasCubiertas: semanasEnRangoReporte ? semanasEnRangoReporte.length : 1
};
};
// Parser permisivo: detecta separador (tab o coma) y formato (long o wide).
// Long: 3 columnas con headers como campaña/fecha/gasto.
// Wide: filas = campañas (en el orden de la tabla), columnas = semanas (en el orden de la tabla).
const parseTexto = (texto) => {
if (!data || !texto?.trim()) return { llenadas: 0, nuevo: valores };
const sep = texto.includes('\t') ? '\t' : ',';
const lineas = texto.trim().split(/\r?\n/).map(l => l.split(sep).map(c => c.trim()));
// Intento 1: formato Google Ads (header "Campaña" + "Costo/Presupuesto" + línea de fecha).
const ga = parseGoogleAds(lineas, sep);
if (ga) return ga;
const nuevo = { ...valores };
let llenadas = 0;
// Detectar formato long: header tiene 'campa'/'camp', 'fecha'/'date'/'semana', 'gasto'/'costo'/'amount'
const head = (lineas[0] || []).map(s => s.toLowerCase());
const idxCamp = head.findIndex(h => /camp|nombre/i.test(h));
const idxFecha = head.findIndex(h => /fecha|date|semana|week/i.test(h));
const idxGasto = head.findIndex(h => /gasto|costo|spend|amount|cost|importe/i.test(h));
const esLong = idxCamp >= 0 && idxFecha >= 0 && idxGasto >= 0;
if (esLong) {
// Long format: skip header
for (let i = 1; i < lineas.length; i++) {
const row = lineas[i];
const campNombre = (row[idxCamp] || '').trim();
const fecha = (row[idxFecha] || '').trim();
const gasto = Number((row[idxGasto] || '').replace(/[$,\s]/g, '')) || 0;
if (!campNombre || !fecha || gasto <= 0) continue;
// Match campaña por nombre (case-insensitive, prefix match)
const camp = data.campanas.find(c => c.campana.toLowerCase() === campNombre.toLowerCase()) ||
data.campanas.find(c => c.campana.toLowerCase().includes(campNombre.toLowerCase().slice(0, 20)));
if (!camp) continue;
// Match fecha a la semana que la contiene
const sem = data.semanas.find(s => fecha >= s.desde && fecha <= s.hasta);
if (!sem) continue;
if (!nuevo[camp.key]) nuevo[camp.key] = {};
nuevo[camp.key][sem.desde] = gasto;
llenadas++;
}
} else {
// Wide: filas = campañas en orden, columnas = semanas en orden. Detecta y omite header si existe.
const filaInicio = lineas[0]?.[0] && isNaN(Number(lineas[0][0].replace(/[$,\s]/g,''))) && lineas.length > 1 ? 1 : 0;
const filas = lineas.slice(filaInicio);
filas.forEach((celdas, i) => {
if (i >= data.campanas.length) return;
const camp = data.campanas[i];
// Si primera celda es texto (nombre campaña), skip
const startJ = celdas[0] && isNaN(Number(celdas[0].replace(/[$,\s]/g,''))) ? 1 : 0;
if (!nuevo[camp.key]) nuevo[camp.key] = {};
celdas.slice(startJ).forEach((c, j) => {
if (j >= data.semanas.length) return;
const num = Number(c.replace(/[$,\s]/g, '')) || 0;
if (num > 0) { nuevo[camp.key][data.semanas[j].desde] = num; llenadas++; }
});
});
}
return { llenadas, nuevo, esLong };
};
const aplicarTexto = (texto) => {
const r = parseTexto(texto);
if (r.error) { alert(r.error); return; }
if (!r.llenadas) {
alert('No se detectaron celdas con valor. Formatos soportados:\n• Reporte de Google Ads (auto-detecta fecha + columna Costo)\n• Long: 3 columnas con headers Campaña, Fecha, Gasto\n• Wide: filas = campañas en orden de la tabla');
return;
}
setValores(r.nuevo);
setPegando(false); setPasteText('');
let msg = `✓ ${r.llenadas} celdas cargadas`;
if (r.tipo === 'googleAdsDiario') {
msg += ` (Google Ads diario · ${r.diasUnicos} día${r.diasUnicos>1?'s':''}: ${r.fechaInicio}${r.fechaFin!==r.fechaInicio?` → ${r.fechaFin}`:''}).`;
} else if (r.tipo === 'googleAdsMultiSemana') {
msg += ` (Google Ads sin desglose por Día · rango ${r.fechaInicio} → ${r.fechaFin} = ${r.spanDias} días.`+
`\n\n⚠ Tu reporte cubre ${r.semanasCubiertas} semanas pero no incluye la columna "Día". Distribuí cada valor EQUITATIVAMENTE entre las ${r.semanasCubiertas} semanas.`+
`\nPara que cada semana tenga su gasto exacto, vuelve a exportar Google Ads con la dimensión "Día" agregada.`;
} else if (r.tipo === 'googleAds') {
msg += ` (Google Ads · semana ${r.fechaInicio}).`;
} else {
msg += ` (formato ${r.esLong?'long':'wide'}).`;
}
if (r.excluded?.length) {
const excludedAgg = new Map();
for (const e of r.excluded) {
if (!excludedAgg.has(e.nombre)) excludedAgg.set(e.nombre, 0);
excludedAgg.set(e.nombre, excludedAgg.get(e.nombre) + e.valor);
}
const items = [...excludedAgg.entries()].sort((a,b) => b[1] - a[1]);
msg += `\n\n— ${items.length} campañas EXCLUIDAS (YouTube/Remarketing — no adquisición):\n` +
items.slice(0, 6).map(([n, v]) => ` • ${n} → ${mxnDec(v)}`).join('\n') +
(items.length > 6 ? `\n …y ${items.length - 6} más` : '');
}
if (r.unmatched?.length) {
msg += `\n\n⚠ ${r.unmatched.length} campañas no mapeadas (no están en el catálogo):\n` +
r.unmatched.slice(0, 8).map(u => ` • ${u.nombre} → ${mxnDec(u.valor)}`).join('\n') +
(r.unmatched.length > 8 ? `\n …y ${r.unmatched.length - 8} más` : '') +
'\n\n(Si son campañas paid nuevas, avisar a Bryant para agregarlas a cohortes.js.)';
}
msg += '\n\nDale Guardar para persistir.';
alert(msg);
};
// Upload de archivo: POST al backend /inversion/importar (parser robusto server-side).
// Acepta CSV/TSV/XLSX. Backend valida, parsea, mapea contra catálogo, escribe.
// Si no encuentra header válido → 400 con detalle (NO escribe nada).
// Esto reemplaza el parser client-side anterior que podía caer a "wide" y corromper.
const subirCSV = async (file) => {
if (!file) { alert('Selecciona un archivo.'); return; }
const fd = new FormData();
fd.append('archivo', file);
try {
const resp = await fetch('/api/vacaciones/inversion/importar', {
method: 'POST', body: fd, credentials: 'include'
});
const r = await resp.json();
if (!resp.ok || r.error) {
alert(`❌ Error procesando "${file.name}":\n\n${r.error || 'Error desconocido'}\n\nVerifica que el archivo tenga las columnas:\n• Nombre de la campaña (o Conjunto de anuncios)\n• Importe gastado (MXN) o Costo\n• Inicio del informe o Día`);
return;
}
let msg = `✓ ${r.importadas} filas importadas (total $${(r.totalImportado||0).toLocaleString('es-MX',{minimumFractionDigits:2,maximumFractionDigits:2})})`;
if (r.excluidas > 0) {
msg += `\n\n— ${r.excluidas} campañas EXCLUIDAS (YouTube/Remarketing/Páginas):\n` +
r.excludedSample.map(n => ` • ${n}`).join('\n');
}
if (r.sinMapear > 0) {
msg += `\n\n⚠ ${r.sinMapear} campañas no mapeadas (no están en el catálogo):\n` +
r.sinMapearSample.map(u => ` • ${u.nombre} → $${(u.gasto||0).toFixed(2)}`).join('\n') +
`\n\n(Si son campañas paid nuevas, avisar para agregarlas a cohortes.js.)`;
}
msg += `\n\nLos datos ya están guardados (server-side). Recarga el dashboard.`;
alert(msg);
// Refrescar el grid con los nuevos valores
const fresh = await api(`/inversion/grid?desde=${desde}&hasta=${hasta}&futuras=5`);
setData(fresh); setValores(fresh.valores || {});
onSaved && onSaved();
} catch (err) {
alert(`❌ Error en el upload:\n${err.message}`);
}
};
if (err) return
Error: {err}
;
if (cargando || !data) return
Cargando inversión…
;
const productos = ['envios','tienda','pagos'];
const labels = { envios:'T1 Envíos', tienda:'T1 Tienda', pagos:'T1 Pagos' };
const colors = { envios:C.envios, tienda:C.tienda, pagos:C.pagos };
// Totales por columna y por campaña (usa getValor para respetar el modo)
const totalCol = columnas.map(col =>
data.campanas.reduce((sum, c) => sum + (Number(getValor(c.key, col)) || 0), 0)
);
const grandTotal = totalCol.reduce((a,b) => a+b, 0);
return (
Las campañas mostradas son las del catálogo paid del PRD. Si una campaña nueva no aparece, será detectada automáticamente al refrescar el snapshot — y aparecerá aquí para asignarle inversión.