/* Noctis · commerce — DEMO NAVEGABLE (Fase 2). UNA sola SPA para clientes PYME:
Login → Elegir workspace → Shell (TopBar + Sidebar por permisos + router de módulo).
Reconcilia los dos shells previos (base «Shell+Productos» y el integrado «POS inmersivo
+ Caja») en un solo archivo: TODO el estado vive en memoria, el carrito y el turno de
caja sobreviven a la navegación entre módulos. Datos mock, sin backend.
POS = MODO INMERSIVO del shell (bajo Vender): entrada automática, «Salir de venta»
recupera las barras SIN cancelar la venta (el carrito sobrevive con LiveSalePill global
+ badge «En curso»). Productos = módulo COMPLETO (lista → detalle → variante → código).
Contabilidad = Cierre de caja. El resto de módulos: «Pronto» (informativos, reloj).
Consume el design system Noctis SIN redefinir tokens; la marca del tenant es acento
quirúrgico (primary/nav activo/foco/selección); el chrome es neutro de casa. */
const DNS = window.NoctisCommerceDesignSystem_4dfd35;
const { Icon: CIcon, Toast: CToast, Button: CBtn, Input: CInput, Badge: CBadge, Wordmark: CWord } = DNS;
const CPD = window.PosData;
const CD = window.CommerceData;
/* NAV UNIFICADO — repone los «Pronto» junto a lo construido. `built` = navegable;
el resto es visible-pero-Pronto (informativo). `anyPerm` = visible con ≥1 permiso. */
const NAV = [
{ section: 'Vender', items: [
{ id: 'pos', label: 'POS', perm: 'pos', built: true },
{ id: 'ventas', label: 'Ventas', perm: 'ventas', built: false },
] },
{ section: 'Catálogo', items: [
{ id: 'productos', label: 'Productos', perm: 'productos.read', built: true },
{ id: 'categorias', label: 'Categorías', perm: 'categorias', built: false },
] },
{ section: 'Suministro', items: [
{ id: 'inventario', label: 'Inventario', perm: 'inventario', built: false },
{ id: 'compras', label: 'Compras', perm: 'compras', built: false },
] },
{ section: 'Dinero', items: [
{ id: 'precios', label: 'Precios', perm: 'precios', built: false },
{ id: 'facturacion', label: 'Facturación', perm: 'facturacion', built: false },
{ id: 'clientes', label: 'Clientes', perm: 'clientes', built: true },
] },
{ section: 'Finanzas', items: [
{ id: 'contabilidad', label: 'Contabilidad', anyPerm: ['caja', 'conta.balance', 'conta.asientos', 'conta.mayor'], built: true },
] },
{ section: 'Gestión', items: [
{ id: 'reportes', label: 'Reportes', perm: 'reportes', built: false },
] },
{ section: 'Configuración', items: [
{ id: 'config.empresa', label: 'Empresa', perm: 'config.empresa', built: false },
{ id: 'config.usuarios', label: 'Usuarios', perm: 'config.usuarios', built: false },
] },
];
const NAV_ITEMS = NAV.flatMap((g) => g.items);
const itemVisible = (prof, it) => it.anyPerm ? it.anyPerm.some((pp) => window.CanPerm(prof, pp)) : window.CanPerm(prof, it.perm);
const moduleLabel = (id) => { const it = NAV_ITEMS.find((i) => i.id === id); return it ? it.label : id; };
/* Módulo de aterrizaje tras elegir workspace: preferimos una vista de shell tranquila. */
const landingFor = (prof) => {
const order = ['productos', 'contabilidad', 'pos'];
for (const id of order) { const it = NAV_ITEMS.find((i) => i.id === id); if (it && itemVisible(prof, it)) return id; }
const first = NAV_ITEMS.find((i) => i.built && itemVisible(prof, i));
return first ? first.id : 'pos';
};
const SEED_TURNO = { seq: 'T-001-042', fondo: 50.00, aperturaHora: '08:12', ventasEfectivo: 428.75, ventasCount: 23, esperado: 478.75 };
const centsNum = (cents) => (parseInt(cents || '0', 10)) / 100;
/* Segmented oscuro de la barra de prototipo (andamiaje tipo Storybook, no chrome). */
function Seg({ value, onChange, options, ariaLabel }) {
return (
{options.map((o) => {
const active = o.value === value;
return (
onChange(o.value)}
style={{ border: 0, cursor: 'pointer', borderRadius: 7, padding: '6px 11px', fontSize: 12, fontWeight: active ? 600 : 500, fontFamily: 'var(--font-ui)', minHeight: 32, background: active ? '#F5F5F7' : 'transparent', color: active ? '#0A0A0B' : '#AEAEB2' }}>
{o.label}
);
})}
);
}
/* Barra de PROTOTIPO — recorre los ejes de presentación (tenant · perfil · densidad ·
turno · estado de Productos · escritura). Es scaffolding, no chrome de la app. */
function PrototypeBar(p) {
return (
Prototipo · Demo commerce
Tenant
Perfil
Densidad venta
Turno de caja
{p.stateEnabled && (
{p.stateScope === 'section' ? 'Estado sección' : 'Estado lista'}
)}
Escritura
);
}
/* ══ LOGIN — momento negro (reusa el look del núcleo) ══════════════════════════ */
function LoginScreen({ onLogin }) {
return (
Inicie sesión
Punto de venta, catálogo y caja para su negocio. Negro y plata en la herramienta; el color es de su marca.
);
}
/* ══ ELEGIR WORKSPACE — cards por acceso (tenant × producto) ═══════════════════ */
function WorkspaceScreen({ onPick, mode }) {
return (
Elija un espacio de trabajo
Cards por acceso (tenant × producto). Elija uno para entrar al panel.
{Object.values(CD.TENANTS).map((t) => (
onPick(t.id)} style={{ textAlign: 'left', border: '1px solid hsl(var(--border-strong))', borderRadius: 12, padding: 16, background: 'hsl(var(--surface-raised))', cursor: 'pointer' }}>
{t.name}
{t.wsRole}
{t.empresas.length} {t.empresas.length === 1 ? 'empresa' : 'empresas'}
))}
El acceso real vendría del backend por usuario. Acá el eje Perfil de la barra de prototipo simula los permisos dentro del panel.
);
}
/* Chip de contexto (empresa/sucursal, cajera) — neutro de casa. */
function CtxChip({ icon, primary, secondary, small }) {
return (
);
}
/* Selector de empresa — visible solo con >1 empresa (Aguilar, El Rincón). */
function CompanySelector({ empresas, value, onChange }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h);
}, [open]);
if (!empresas || empresas.length < 2) return null;
const current = empresas.find((e) => e.id === value) || empresas[0];
return (
setOpen((o) => !o)} aria-haspopup="listbox" aria-expanded={open} aria-label="Cambiar de empresa"
style={{ display: 'flex', alignItems: 'center', gap: 8, height: 32, padding: '0 10px', borderRadius: 8, border: '1px solid hsl(var(--border-strong))', background: 'hsl(var(--surface-base))', color: 'hsl(var(--text-primary))', cursor: 'pointer', font: '500 12px var(--font-ui)', maxWidth: 240 }}>
{current.name}
▾
{open && (
Empresa
{empresas.map((e) => {
const active = e.id === value;
return (
{ setOpen(false); if (!active) onChange(e.id); }}
style={{ display: 'flex', width: '100%', alignItems: 'center', gap: 8, textAlign: 'left', border: 0, cursor: 'pointer', padding: '8px 10px', borderRadius: 8, background: active ? 'hsl(var(--surface-sunken))' : 'transparent', color: 'hsl(var(--text-primary))', font: 'inherit' }}>
✓
{e.name}
{e.legal.split('·')[1]?.trim()}
);
})}
Al cambiar de empresa se limpia la vista y vuelve al catálogo.
)}
);
}
/* Píldora «venta en curso» — visible fuera del modo inmersivo cuando el POS tiene carrito
vivo. Un clic vuelve a la venta con el carrito intacto. */
function LiveSalePill({ count, total, onResume }) {
return (
Venta en curso
· {count} {count === 1 ? 'ítem' : 'ítems'} · {total}
Volver
);
}
/* Ítem de sidebar. Construido = navegable; «Pronto» = informativo (sin foco/href,
no tabbable, estado en sr-only). El POS con carrito vivo muestra punto de acento + «En curso». */
function NavItem({ item, active, collapsed, onClick, live }) {
const disabled = !item.built;
const srName = item.label + ' · Pronto (módulo por construir)';
const base = { display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left', border: 0, padding: collapsed ? 8 : '8px 10px', borderRadius: 8, font: '500 13px var(--font-ui)', justifyContent: collapsed ? 'center' : 'space-between', background: active ? 'hsl(var(--brand-primary))' : 'transparent', color: active ? 'hsl(var(--brand-foreground))' : 'hsl(var(--text-secondary))' };
const inner = (
<>
{!collapsed && {item.label} }
{collapsed && disabled && {srName} }
{!collapsed && disabled && Pronto }
{!collapsed && live && En curso }
);
if (disabled) return {inner}
;
return {inner} ;
}
function Sidebar({ profile, active, collapsed, onToggle, onNavigate, liveCart }) {
const groups = NAV.map((g) => ({ ...g, items: g.items.filter((it) => itemVisible(profile, it)) })).filter((g) => g.items.length);
const { MicroLabel: ML } = window;
return (
{groups.map((g, gi) => (
{!collapsed &&
{g.section} }
{collapsed && gi > 0 &&
}
{g.items.map((it) => onNavigate(it)} live={it.id === 'pos' && liveCart} />)}
))}
Sucursal · reservado }
);
}
/* Barra superior del shell NORMAL (chrome neutro de casa). Aloja el CompanySelector y la
píldora de venta en curso. */
function TopBar({ tenant, empresaObj, empresaId, onChangeCompany, profile, mode, onToggleMode, liveCart, cartCount, cartTotal, onResume, onLogout }) {
return (
{tenant.initials}
{tenant.name}
{tenant.empresas.length < 2 &&
}
{liveCart &&
}
{tenant.cajero.nombre}
{profile.label}
{mode === 'dark' ? '☾' : '☀'}
Salir
);
}
/* Barra del MODO INMERSIVO — mínima, orientada a la venta. «Salir de venta» RECUPERA las
barras (no cierra el POS). */
function ImmersiveBar({ tenant, empresaObj, mode, onToggleMode, onExitSale }) {
return (
);
}
/* Pantalla del POS en modo NORMAL (barras visibles). Se llega al «Salir de venta»: el POS
sigue abierto y muestra el estado de la venta —en curso (reanudar/cobrar) o sin venta—. */
function PosResume({ lines, totals, customer, onResume, onCobrar, onDescartar }) {
const alive = lines.length > 0;
const count = lines.reduce((s, l) => s + l.qty, 0);
const fmt = window.cajaFmtEC;
return (
Vender · POS
Punto de venta
El POS abre en modo inmersivo para foco total en la venta. Saliste de la venta pero el POS sigue abierto — {alive ? 'tu carrito quedó intacto, esperando.' : 'no hay ninguna venta en curso.'}
{alive ? (
Venta en curso
{count} {count === 1 ? 'ítem' : 'ítems'} · {lines.length} {lines.length === 1 ? 'línea' : 'líneas'} · {customer.nombre}
Total
{fmt(totals.total)}
Ir a cobrar
Descartar
Perder una venta a medio armar por salir a consultar es el peor caso — por eso el carrito sobrevive a la salida.
) : (
Empezá una venta
Entrá al modo inmersivo para buscar o escanear productos con foco total. Las barras se recuperan cuando salgas.
)}
);
}
function ProntoView({ label }) {
return (
Módulo
{label}
Tenés permiso para {label} , pero este módulo aún no se construye en este corte. El hueco se señala, no se inventa.
);
}
/* ══ ORQUESTADOR ══════════════════════════════════════════════════════════════ */
function DemoApp() {
const [screen, setScreen] = React.useState('login');
const [mode, setMode] = React.useState('light');
const autoDensity = React.useRef(window.detectDensity()).current;
const [density, setDensity] = React.useState(autoDensity);
const [tenantId, setTenantId] = React.useState('aguilar');
const [empresaId, setEmpresaId] = React.useState('e1');
const [profileKey, setProfileKey] = React.useState('admin');
const [collapsed, setCollapsed] = React.useState(false);
const [activeModule, setActiveModule] = React.useState('productos');
const [immersive, setImmersive] = React.useState(false);
const [contaView, setContaView] = React.useState('index');
const [toast, setToast] = React.useState(null);
const [outcome, setOutcome] = React.useState('success');
// Productos: sub-router en memoria + estados de lista/sección.
const [prodRoute, setProdRoute] = React.useState({ view: 'productos' });
const [listState, setListState] = React.useState('data');
const [sectionState, setSectionState] = React.useState('data');
const [clientesRoute, setClientesRoute] = React.useState({ view: 'lista' });
// ── Venta (contenido idéntico a POS-a/POS-b) ──────────────────────────────────
const [lines, setLines] = React.useState(() => CPD.INITIAL_CART.filter((l) => !CPD.needsPrice(CPD.lineView(l))));
const [customer, setCustomer] = React.useState(CPD.CONSUMIDOR_FINAL);
const [clientes, setClientes] = React.useState(() => CPD.CLIENTES);
const [qtyLine, setQtyLine] = React.useState(null);
const [genericDraft, setGenericDraft] = React.useState(null);
const [pickerOpen, setPickerOpen] = React.useState(false);
const [flash, setFlash] = React.useState(null);
const [checkoutOpen, setCheckoutOpen] = React.useState(false);
const [phase, setPhase] = React.useState('idle');
const [received, setReceived] = React.useState('');
const [closedSale, setClosedSale] = React.useState(null);
const [errorId, setErrorId] = React.useState('ERR-POS-7F09');
const flashTimer = React.useRef(null); const seq = React.useRef(100); const compSeq = React.useRef(101); const writeTimer = React.useRef(null);
// ── Caja (Contabilidad) ────────────────────────────────────────────────────────
const [cajaPreset, setCajaPreset] = React.useState('sin');
const [cajaTurno, setCajaTurno] = React.useState(null);
const [cajaPhase, setCajaPhase] = React.useState('idle');
const [contado, setContado] = React.useState('');
const [fondo, setFondo] = React.useState('5000');
const [cajaClosed, setCajaClosed] = React.useState(null);
const [cajaErrorId, setCajaErrorId] = React.useState('ERR-CAJA-3B1');
const cajaTimer = React.useRef(null);
const tenant = CD.TENANTS[tenantId];
const empresaObj = tenant.empresas.find((e) => e.id === empresaId) || tenant.empresas[0];
const profile = CD.PROFILES[profileKey];
const { CanPerm } = window;
const totals = window.posTotals(lines);
const cartAlive = lines.length > 0 && !closedSale;
const doFlash = (msg) => { setFlash(msg); if (flashTimer.current) clearTimeout(flashTimer.current); flashTimer.current = setTimeout(() => setFlash(null), 2600); };
// Navegación de módulos: POS entra AUTOMÁTICAMENTE en inmersivo; el resto vive en shell.
const onNavigate = (item) => {
if (!item.built) { setActiveModule(item.id); setImmersive(false); return; }
if (item.id === 'pos') { setActiveModule('pos'); setImmersive(true); return; }
if (item.id === 'productos') { setActiveModule('productos'); setProdRoute({ view: 'productos' }); setListState('data'); setSectionState('data'); setImmersive(false); return; }
if (item.id === 'clientes') { setActiveModule('clientes'); setClientesRoute({ view: 'lista' }); setListState('data'); setImmersive(false); return; }
if (item.id === 'contabilidad') { setActiveModule('contabilidad'); setContaView('index'); setImmersive(false); return; }
setActiveModule(item.id); setImmersive(false);
};
const exitSale = () => setImmersive(false);
const resumeSale = () => { setActiveModule('pos'); setImmersive(true); };
// Handlers de venta (idénticos a POS-b)
const onAdd = (item) => { setLines((prev) => { const ex = prev.find((l) => l.ref === item.id); if (ex) return prev.map((l) => l.ref === item.id ? { ...l, qty: l.qty + 1 } : l); return [...prev, { key: 'l' + (++seq.current), ref: item.id, qty: 1 }]; }); doFlash((item.precio == null ? 'Agregado (sin precio, bloquea el cobro): ' : 'Agregado: ') + item.variante); };
const onStep = (line, d) => setLines((prev) => prev.map((l) => l.key === line.key ? { ...l, qty: Math.max(1, l.qty + d) } : l));
const onRemove = (line) => setLines((prev) => prev.filter((l) => l.key !== line.key));
const commitQty = (n) => { setLines((prev) => prev.map((l) => l.key === qtyLine.key ? { ...l, qty: n } : l)); setQtyLine(null); };
const openGeneric = (desc) => setGenericDraft({ desc });
const commitGeneric = (data) => { setLines((prev) => [...prev, { key: 'l' + (++seq.current), generic: true, desc: data.desc, precio: data.precio, iva: data.iva, qty: data.qty }]); setGenericDraft(null); doFlash((data.precio === 0 ? 'Ítem rápido agregado (precio en cero, bloquea el cobro): ' : 'Ítem rápido agregado: ') + data.desc); };
const onSaveProduct = (line) => setToast('Abriría el alta de producto con «' + line.desc + '» precargado. Es otro corte: la venta se registra igual.');
const pickCustomer = (c) => { setCustomer(c); setPickerOpen(false); };
const createCustomer = (data) => { const c = { ...data, id: 'nc' + Date.now(), activo: true }; setClientes((prev) => [c, ...prev]); setCustomer(c); setPickerOpen(false); setToast('Cliente creado: ' + c.nombre + '. Ya es el cliente de esta venta.'); };
const consumidorFinal = () => { setCustomer(CPD.CONSUMIDOR_FINAL); setPickerOpen(false); };
const isBlocked = () => lines.length === 0 || lines.some((l) => CPD.needsPrice(CPD.lineView(l)));
const onCobrar = () => { if (isBlocked()) return; setActiveModule('pos'); setImmersive(true); setReceived(''); setPhase('idle'); setCheckoutOpen(true); };
const runWrite = () => {
if (phase === 'processing') return;
setPhase('processing'); if (writeTimer.current) clearTimeout(writeTimer.current);
writeTimer.current = setTimeout(() => {
if (outcome === 'fail') { setErrorId('ERR-POS-' + (7000 + Math.floor(Math.random() * 900)).toString(16).toUpperCase()); setPhase('error'); return; }
const recv = (parseInt(received || '0', 10)) / 100; const n = compSeq.current++;
setClosedSale({ secuencial: '001-001-' + String(n).padStart(9, '0'), total: totals.total, received: recv, change: recv - totals.total, customer: customer.nombre });
setCheckoutOpen(false); setPhase('idle');
}, 1500);
};
const cancelCheckout = () => { if (phase === 'processing') return; setCheckoutOpen(false); setPhase('idle'); };
const newSale = () => { setClosedSale(null); setLines([]); setCustomer(CPD.CONSUMIDOR_FINAL); setReceived(''); setPhase('idle'); };
const discardSale = () => { setLines([]); setCustomer(CPD.CONSUMIDOR_FINAL); setReceived(''); setToast('Venta descartada. El carrito quedó vacío.'); };
const onPrint = () => setToast('Ver / imprimir comprobante es fast-follow (depende del driver/servidor de impresora). La venta ya quedó registrada con su secuencial.');
// Caja
const applyCajaPreset = (v) => { setCajaPreset(v); setCajaClosed(null); setCajaPhase('idle'); setContado(''); setCajaTurno(v === 'abierto' ? { ...SEED_TURNO } : null); };
const abrirCaja = () => {
if (cajaPhase === 'processing') return; setCajaPhase('processing'); if (cajaTimer.current) clearTimeout(cajaTimer.current);
cajaTimer.current = setTimeout(() => { setCajaTurno({ seq: SEED_TURNO.seq, fondo: centsNum(fondo), aperturaHora: '08:12', ventasEfectivo: 0, ventasCount: 0, esperado: centsNum(fondo) }); setCajaPhase('idle'); setContado(''); }, 1400); };
const cerrarCaja = () => {
if (cajaPhase === 'processing') return; setCajaPhase('processing'); if (cajaTimer.current) clearTimeout(cajaTimer.current);
cajaTimer.current = setTimeout(() => {
if (outcome === 'fail') { setCajaErrorId('ERR-CAJA-' + (3000 + Math.floor(Math.random() * 900)).toString(16).toUpperCase()); setCajaPhase('error'); return; }
const cont = centsNum(contado);
setCajaClosed({ ...cajaTurno, contado: cont, diff: cont - cajaTurno.esperado, cierreHora: '20:47' });
setCajaTurno(null); setCajaPhase('idle');
}, 1500); };
const nuevoTurno = () => { setCajaClosed(null); setCajaTurno(null); setCajaPhase('idle'); setContado(''); setFondo('5000'); setCajaPreset('sin'); };
const openCaja = () => setContaView('caja');
// ── Entrar a un workspace (desde la pantalla de selección) ──────────────────
const enterWorkspace = (id) => {
setTenantId(id); setEmpresaId('e1');
const land = landingFor(profile);
setActiveModule(land); setImmersive(land === 'pos');
setProdRoute({ view: 'productos' }); setListState('data'); setSectionState('data');
setContaView('index');
setScreen('shell');
};
const logout = () => { window.location.href = '../../index.html'; };
const onChangeTenant = (id) => { setTenantId(id); setEmpresaId('e1'); };
const onChangeCompany = (id) => { setEmpresaId(id); setProdRoute({ view: 'productos' }); setListState('data'); setSectionState('data'); setClientesRoute({ view: 'lista' }); setToast('Empresa cambiada · se limpió la vista.'); };
const moduleVisible = (id, prof) => { const it = NAV_ITEMS.find((i) => i.id === id); if (!it) return false; return itemVisible(prof, it); };
// Gating capa 2 (fail-closed): al cambiar de perfil, si el módulo activo dejó de ser
// visible, rebota al primer módulo visible; si el POS deja de ser accesible, sale del
// inmersivo. Si Productos deja de ser visible, también rebota.
const onChangeProfile = (k) => {
const nextProfile = CD.PROFILES[k];
setProfileKey(k);
if (!moduleVisible('pos', nextProfile)) setImmersive(false);
if (!moduleVisible(activeModule, nextProfile)) {
const first = NAV_ITEMS.filter((i) => i.built).find((i) => moduleVisible(i.id, nextProfile));
if (first) { setActiveModule(first.id); setImmersive(first.id === 'pos'); if (first.id === 'productos') setProdRoute({ view: 'productos' }); if (first.id === 'clientes') setClientesRoute({ view: 'lista' }); if (first.id === 'contabilidad') setContaView('index'); }
}
};
React.useEffect(() => {
if (screen !== 'shell' || density !== 'comfortable' || !immersive) return;
const onKey = (e) => { if (e.key !== 'F2') return; e.preventDefault(); if (!checkoutOpen && !closedSale && !isBlocked()) onCobrar(); };
window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey);
}, [screen, density, immersive, lines, checkoutOpen, closedSale]);
React.useEffect(() => () => { if (writeTimer.current) clearTimeout(writeTimer.current); if (cajaTimer.current) clearTimeout(cajaTimer.current); }, []);
// ── Productos: sub-router ───────────────────────────────────────────────────
const goProd = (view, extra = {}) => setProdRoute({ view, ...extra });
const prod = prodRoute.productId ? CD.PRODUCTS.find((p) => p.id === prodRoute.productId) : null;
const variant = (prodRoute.productId && prodRoute.variantId) ? (CD.VARIANTS[prodRoute.productId] || []).find((v) => v.id === prodRoute.variantId) : null;
const barcode = (variant && prodRoute.barcodeId) ? (CD.BARCODES[variant.id] || []).find((b) => b.id === prodRoute.barcodeId) : null;
const backToProductos = () => goProd('productos');
const backToProduct = (pid) => goProd('producto-detalle', { productId: pid });
const renderProductos = () => {
switch (prodRoute.view) {
case 'productos':
return setListState('data')}
onNew={() => goProd('producto-nuevo')} onOpen={(id) => goProd('producto-detalle', { productId: id })} />;
case 'producto-nuevo':
return { setToast(m); backToProductos(); }} />;
case 'producto-editar':
return backToProduct(prod.id)} onSaved={(m) => { setToast(m); backToProduct(prod.id); }} />;
case 'producto-detalle':
return setSectionState('data')}
onEdit={() => goProd('producto-editar', { productId: prod.id, scenario: 'ok' })}
onBack={backToProductos}
onNewVariant={() => goProd('variante-nueva', { productId: prod.id })}
onOpenVariant={(vid) => goProd('variante-detalle', { productId: prod.id, variantId: vid })}
onToast={setToast} />;
case 'variante-nueva':
return backToProduct(prod.id)} onSaved={(m) => { setToast(m); backToProduct(prod.id); }} />;
case 'variante-editar':
return goProd('variante-detalle', { productId: prod.id, variantId: variant.id })} onSaved={(m) => { setToast(m); goProd('variante-detalle', { productId: prod.id, variantId: variant.id }); }} />;
case 'variante-detalle':
return setSectionState('data')}
onBackProduct={() => backToProduct(prod.id)}
onEdit={() => goProd('variante-editar', { productId: prod.id, variantId: variant.id })}
onNewBarcode={() => goProd('barcode-nuevo', { productId: prod.id, variantId: variant.id })}
onEditBarcode={(bid) => goProd('barcode-editar', { productId: prod.id, variantId: variant.id, barcodeId: bid })}
onToast={setToast} onDeleted={() => backToProduct(prod.id)} />;
case 'barcode-nuevo':
return goProd('variante-detalle', { productId: prod.id, variantId: variant.id })} onSaved={(m) => { setToast(m); goProd('variante-detalle', { productId: prod.id, variantId: variant.id }); }} />;
case 'barcode-editar':
return goProd('variante-detalle', { productId: prod.id, variantId: variant.id })} onSaved={(m) => { setToast(m); goProd('variante-detalle', { productId: prod.id, variantId: variant.id }); }} />;
default:
return null;
}
};
// ── Clientes: sub-router + FUENTE ÚNICA (misma cartera que el picker del POS). Un
// cliente creado en el POS aparece aquí y viceversa: ambos leen/escriben `clientes`.
const cliente = clientesRoute.clienteId ? clientes.find((c) => c.id === clientesRoute.clienteId) : null;
const createCliente = (data) => { const c = { ...data, id: 'nc' + Date.now(), activo: true }; setClientes((prev) => [c, ...prev]); setToast('Cliente creado: ' + c.nombre + '.'); return c; };
const updateCliente = (id, data) => { setClientes((prev) => prev.map((x) => x.id === id ? { ...x, ...data } : x)); setToast('Cliente actualizado.'); };
const toggleClienteActivo = (c) => { setClientes((prev) => prev.map((x) => x.id === c.id ? { ...x, activo: c.activo === false } : x)); setToast(c.activo === false ? ('Cliente reactivado: ' + c.nombre + '.') : ('Cliente desactivado: ' + c.nombre + '.')); };
const renderClientes = () => {
switch (clientesRoute.view) {
case 'lista':
return setListState('data')}
onNew={() => setClientesRoute({ view: 'nuevo' })} onOpen={(id) => setClientesRoute({ view: 'detalle', clienteId: id })} />;
case 'nuevo':
return setClientesRoute({ view: 'lista' })} onSubmit={(data) => { const c = createCliente(data); setClientesRoute({ view: 'detalle', clienteId: c.id }); }} />;
case 'editar':
return setClientesRoute({ view: 'detalle', clienteId: cliente.id })} onSubmit={(data) => { updateCliente(cliente.id, data); setClientesRoute({ view: 'detalle', clienteId: cliente.id }); }} />;
case 'detalle':
return setClientesRoute({ view: 'lista' })}
onEdit={() => setClientesRoute({ view: 'editar', clienteId: cliente.id })} onToggleActive={toggleClienteActivo} onToast={setToast} />;
default:
return null;
}
};
// Contenido del shell NORMAL por módulo activo.
let content;
if (activeModule === 'pos') content = setContaView('index')} />;
else content = setScreen('workspace')} />;
if (screen === 'workspace') return {}} onExit={exitSale} flash={flash} />
setPickerOpen(true)} onCobrar={onCobrar} />);
return (
{immersive ? (
setMode((m) => m === 'light' ? 'dark' : 'light')} onExitSale={exitSale} />
) : (
setMode((m) => m === 'light' ? 'dark' : 'light')} liveCart={cartAlive} cartCount={lines.reduce((s, l) => s + l.qty, 0)} cartTotal={window.cajaFmtEC(totals.total)} onResume={resumeSale} onLogout={logout} />
setCollapsed((c) => !c)} onNavigate={onNavigate} liveCart={cartAlive} />
)}
setQtyLine(null)} onCommit={commitQty} />
setGenericDraft(null)} onCommit={commitGeneric} />
setPickerOpen(false)} onPick={pickCustomer} onConsumidorFinal={consumidorFinal} activeId={customer.id} clientes={clientes} onCreate={createCustomer} />
);
}
window.DemoApp = DemoApp;
ReactDOM.createRoot(document.getElementById('root')).render(