// mnm-components.jsx — Data + UI building blocks
const { useState, useRef, useEffect, useCallback } = React;
/* ─── DATA ─────────────────────────────────────────────────────────────────── */
const PERIOD_DATA = {
'Diciembre 2024': {
kpis: [
{ id:'utilidad', label:'Utilidad Neta', value:'$4,200', status:'green', change:'+12%', changeSuffix:'vs nov.', tooltip:'Lo que te queda después de restar todos los costos e impuestos a tus ingresos totales del período.' },
{ id:'margen', label:'Margen Bruto', value:'38.5%', status:'yellow', change:'−4 pts', changeSuffix:'vs nov.', tooltip:'Qué porcentaje de cada peso vendido te queda después de restar los costos directos de producción.' },
{ id:'flujo', label:'Flujo de Caja', value:'$2,800', status:'green', change:'+8%', changeSuffix:'vs nov.', tooltip:'El dinero real que entró y salió de tu negocio este período. Diferente a la utilidad contable.' },
{ id:'equilibrio', label:'Pto. de Equilibrio', value:'$18,500', status:'green', change:'día 14', changeSuffix:'alcanzado', tooltip:'Las ventas mínimas para cubrir todos tus costos fijos y variables. Si vendes más, estás en utilidad.' },
{ id:'ebitda', label:'EBITDA', value:'$5,100', status:'green', change:'14.2%', changeSuffix:'margen', tooltip:'Utilidad antes de intereses, impuestos y depreciación. Mide la rentabilidad operativa pura del negocio.' },
],
hallazgos: [
{ id:1, severity:'critico', title:'Margen bruto cayó 4 puntos vs. noviembre', detail:'De 42.5% a 38.5% — variación de −9.4%, supera el umbral del 15%.', category:'Costos variables / Insumos', context:'Los costos de insumos aumentaron $1,200 sin un ajuste correspondiente en los precios de venta. El proveedor principal subió precios en diciembre sin previo aviso.' },
{ id:2, severity:'advertencia', title:'Flujo de caja 33% menor a la utilidad neta', detail:'Posible acumulación de cuentas por cobrar no registradas.', category:'Liquidez', context:'Brecha de $1,400 entre utilidad neta y flujo real. Se detectan al menos 3 facturas de catering sin cobrar del período actual.' },
{ id:3, severity:'info', title:'Punto de equilibrio alcanzado el día 14', detail:'Mejor que noviembre (día 18) y el benchmark de la industria (día 16).', category:'Rendimiento', context:'Tendencia positiva sostenida: Oct. día 17 → Nov. día 18 → Dic. día 14. El ritmo de ventas mejora consistentemente.' },
],
},
'Noviembre 2024': {
kpis: [
{ id:'utilidad', label:'Utilidad Neta', value:'$3,750', status:'yellow', change:'+3%', changeSuffix:'vs oct.', tooltip:'Lo que te queda después de restar todos los costos e impuestos.' },
{ id:'margen', label:'Margen Bruto', value:'42.5%', status:'green', change:'+1 pt', changeSuffix:'vs oct.', tooltip:'Qué porcentaje de cada peso vendido te queda después de restar costos directos.' },
{ id:'flujo', label:'Flujo de Caja', value:'$2,600', status:'yellow', change:'−2%', changeSuffix:'vs oct.', tooltip:'El dinero real que entró y salió de tu negocio.' },
{ id:'equilibrio', label:'Pto. de Equilibrio', value:'$18,500', status:'yellow', change:'día 18', changeSuffix:'alcanzado', tooltip:'Las ventas mínimas para cubrir todos tus costos.' },
{ id:'ebitda', label:'EBITDA', value:'$4,800', status:'green', change:'13.1%', changeSuffix:'margen', tooltip:'Utilidad antes de intereses, impuestos y depreciación.' },
],
hallazgos: [
{ id:1, severity:'advertencia', title:'Flujo de caja por debajo de la utilidad neta', detail:'Brecha de $1,150 — cuentas por cobrar acumulándose.', category:'Liquidez', context:'Tres clientes corporativos con pagos pendientes mayores a 30 días.' },
{ id:2, severity:'info', title:'Margen bruto mejoró 1 punto vs. octubre', detail:'De 41.5% a 42.5% — tendencia positiva en control de costos.', category:'Eficiencia', context:'Reducción de desperdicio de insumos en cocina implementada exitosamente.' },
],
},
'Octubre 2024': {
kpis: [
{ id:'utilidad', label:'Utilidad Neta', value:'$3,640', status:'yellow', change:'−5%', changeSuffix:'vs sep.', tooltip:'Lo que te queda después de restar todos los costos e impuestos.' },
{ id:'margen', label:'Margen Bruto', value:'41.5%', status:'green', change:'0 pts', changeSuffix:'vs sep.', tooltip:'Qué porcentaje de cada peso vendido te queda después de restar costos directos.' },
{ id:'flujo', label:'Flujo de Caja', value:'$2,650', status:'yellow', change:'−8%', changeSuffix:'vs sep.', tooltip:'El dinero real que entró y salió de tu negocio.' },
{ id:'equilibrio', label:'Pto. de Equilibrio', value:'$18,500', status:'red', change:'día 17', changeSuffix:'alcanzado', tooltip:'Las ventas mínimas para cubrir todos tus costos.' },
{ id:'ebitda', label:'EBITDA', value:'$4,600', status:'yellow', change:'12.8%', changeSuffix:'margen', tooltip:'Utilidad antes de intereses, impuestos y depreciación.' },
],
hallazgos: [
{ id:1, severity:'critico', title:'Utilidad neta cayó 5% vs. septiembre', detail:'Descenso de $192 — patrón de erosión de margen en curso.', category:'Rentabilidad', context:'Aumento de costos de servicios públicos en temporada combinado con baja de ventas en primera semana.' },
{ id:2, severity:'advertencia', title:'Punto de equilibrio alcanzado tarde (día 17)', detail:'Por encima del benchmark de la industria (día 16).', category:'Rendimiento', context:'Flujo de clientes irregular en las primeras dos semanas del mes.' },
],
},
};
const BASE_ACCIONES = [
{ id:1, p:1, accion:'Revisar precio de insumos con proveedor principal', hallazgoId:1, status:'pendiente', fecha:'31 Ene 2025', notas:'' },
{ id:2, p:2, accion:'Implementar control de inventario semanal', hallazgoId:1, status:'en-progreso', fecha:'15 Feb 2025', notas:'Hablé con el equipo esta semana.' },
{ id:3, p:3, accion:'Registrar y gestionar cuentas por cobrar pendientes',hallazgoId:2, status:'pendiente', fecha:'10 Ene 2025', notas:'' },
{ id:4, p:4, accion:'Activar cobro automático para clientes corporativos', hallazgoId:2, status:'pendiente', fecha:'28 Feb 2025', notas:'' },
{ id:5, p:5, accion:'Mantener ritmo: punto de equilibrio antes del día 14',hallazgoId:3, status:'completado', fecha:'14 Ene 2025', notas:'Meta lograda ✓' },
];
const CHAT_QUESTIONS = [
{ ai:'¡Hola! Vamos a registrar los datos de **Diciembre 2024**. Empecemos: ¿cuánto fue tu facturación total del mes?', label:'Facturación total', suggestions:['$34,400','$30,000 aprox.','Tengo varios canales'] },
{ ai:'Anotado. Ahora los **costos de insumos** — materias primas y todo lo que gastaste directamente para producir lo que vendiste.', label:'Costos de insumos', suggestions:['$13,440','$12,000 aprox.','No lo sé exacto'] },
{ ai:'Perfecto. ¿Cuánto fueron los **costos fijos** del mes? — renta, servicios (luz, agua, gas), nómina del equipo.', label:'Costos fijos', suggestions:['$11,100','$11,500 aprox.','Te desgloso por categoría'] },
{ ai:'Casi listo. ¿Hay **otros gastos** importantes? — comisiones, deudas, pagos extraordinarios.', label:'Otros gastos', suggestions:['Comisiones delivery $840','No, eso es todo','Tengo deudas también'] },
];
const VOICE_EXTRACTED = {
ingresos: [{l:'Ventas mostrador',v:'$28,400'},{l:'Delivery / domicilios',v:'$4,200'},{l:'Catering eventos',v:'$1,800'}],
costos_v: [{l:'Insumos y materia prima',v:'$12,600'},{l:'Comisiones delivery',v:'$840'}],
costos_f: [{l:'Alquiler local',v:'$3,200'},{l:'Servicios (luz, agua, gas)',v:'$1,100'},{l:'Nómina',v:'$6,800'}],
missing: ['Deudas / obligaciones mensuales'],
};
const APP_DATA = {
business: 'Cafetería El Roble',
periods: Object.keys(PERIOD_DATA),
getPeriod: p => PERIOD_DATA[p] || PERIOD_DATA['Diciembre 2024'],
};
/* ─── ICONS ─────────────────────────────────────────────────────────────────── */
const Ic = {
Dashboard: ()=>,
Upload: ()=>,
Alert: ()=>,
List: ()=>,
Calendar: ()=>,
Info: ()=>,
Chevron: ()=>,
ChevronR: ()=>,
ChevronL: ()=>,
Mic: ()=>,
Chat: ()=>,
Form: ()=>,
Check: ()=>,
Star: ()=>,
Export: ()=>,
Refresh: ()=>,
Warning: ()=>,
X: ()=>,
};
/* ─── SPARKLINE ─────────────────────────────────────────────────────────────── */
function Sparkline({ status, width, height }) {
width = width || 80;
height = height || 20;
var datasets = {
green: [38,42,40,48,52,50,58,62],
yellow: [62,60,55,58,52,54,50,50],
red: [68,64,60,55,58,50,46,42],
info: [46,50,47,52,50,54,52,56],
};
var pts = datasets[status] || datasets.info;
var mn = Math.min.apply(null,pts);
var mx = Math.max.apply(null,pts);
var range = mx - mn || 1;
var sw = width / (pts.length - 1);
var points = pts.map(function(v,i){return (i*sw)+','+(height-((v-mn)/range)*(height-2)+1);}).join(' ');
var colors = {green:'#16A34A',yellow:'#D97706',red:'#DC2626',info:'#9C8D7C'};
var color = colors[status] || colors.info;
return (
);
}
/* ─── TOOLTIP ────────────────────────────────────────────────────────────────── */
function Tooltip({ text, children }) {
const [show, setShow] = useState(false);
return (
setShow(true)} onMouseLeave={()=>setShow(false)}>
{children}
{show && (
{text}
)}
);
}
/* ─── KPI CARD ───────────────────────────────────────────────────────────────── */
const SC = {
green: ['var(--s-green)', 'var(--s-green-bg)'],
yellow: ['var(--s-yellow)', 'var(--s-yellow-bg)'],
red: ['var(--s-red)', 'var(--s-red-bg)'],
};
const getSC = s => SC[s] || ['var(--t3)', 'var(--surf-3)'];
function KPICard({ kpi }) {
var DOT_COLOR = {green:'#16A34A',yellow:'#D97706',red:'#DC2626',info:'#797776'};
var dotColor = DOT_COLOR[kpi.status] || DOT_COLOR.info;
var isUp = kpi.change && kpi.change[0] === '+';
var isDown = kpi.change && (kpi.change[0] === '-' || kpi.change[0] === '\u2212');
var changeColor = isUp ? '#16A34A' : isDown ? '#DC2626' : '#D97706';
var [hov,setHov] = useState(false);
return (