/* Mi.Asistente — Mini-app de Telegram · prototipo Pieza 3a · 04-sep-2026
Valores de Back End/public/css/tokens.css. Nada inventado. */
const T = {
g950:'#141210', g900:'#1C1917', g800:'#292522', g700:'#3E3A37',
v600:'#6C63FF', v700:'#574BFF', v800:'#4A43CC',
green:'#1DB954', amber:'#E8B84C', coral:'#E86A5F',
c100:'#F5F4F2', c300:'#D8D5D1', c500:'#A09E9C',
vSoft:'rgba(108,99,255,.12)', vBorder:'rgba(108,99,255,.30)',
gSoft:'rgba(29,185,84,.12)', gBorder:'rgba(29,185,84,.30)',
aSoft:'rgba(232,184,76,.12)', aBorder:'rgba(232,184,76,.30)',
coSoft:'rgba(232,106,95,.12)', coBorder:'rgba(232,106,95,.30)',
display:"'Bebas Neue',Impact,sans-serif",
sans:"'DM Sans','Helvetica Neue',Arial,sans-serif",
mono:"'JetBrains Mono','Courier New',monospace",
};
const money = n => '$\u2009' + n.toLocaleString('es-AR');
const BIT0 = {
'1042':[{ h:'08:14', t:'Paula preguntó por WhatsApp', d:'“¿Pintás living y comedor?”', por:'cli', tono:'alta' },
{ h:'08:19', t:'Mia cotizó y agendó para hoy 14:30', por:'mia', tono:'mia' },
{ h:'08:41', t:'Paula confirmó y pagó la seña', d:'50% · $24.250', por:'cli', tono:'ok' }],
'1041':[{ h:'28 AGO', t:'Carlos pidió presupuesto', por:'cli', tono:'alta' },
{ h:'28 AGO', t:'Presupuesto elaborado', d:'6 ítems · $312.000', por:'vos', tono:'vos' },
{ h:'28 AGO', t:'Mia se lo mandó por WhatsApp', por:'mia', tono:'mia' },
{ h:'31 AGO', t:'Mia le insistió una vez', d:'Sin respuesta', por:'mia', tono:'cambio' }],
'1040':[{ h:'07:52', t:'Marina escribió por primera vez', por:'cli', tono:'alta' },
{ h:'07:58', t:'Mia agendó para hoy 16:00', por:'mia', tono:'mia' },
{ h:'08:03', t:'Marina confirmó', por:'cli', tono:'ok' }],
};
const JOBS = [
{ id:'1042', cli:'Paula Giménez', svc:'Living y comedor · 2 manos', hora:'14:30', dia:'HOY', monto:48500, tsm:'CONFIRMADO', paso:1, hist:['mia','mia'], extra:'Seña 50% cobrada', tel:'+54 9 341 402 118', donde:'Corrientes 1450, 3° A' },
{ id:'1041', cli:'Carlos Ferreyra', svc:'Casa completa · interior', hora:'—', dia:'PRESUPUESTO', monto:312000, tsm:'CREADO', paso:0, hist:['mia'], enviado:true, emitido:'28 AGO', extra:'Enviado hace 6 días', tel:'+54 9 341 233 460', donde:'Mendoza 2340, 4° B',
items:[
{ t:'mat', d:'Látex interior 20 L', c:4, p:42000 },
{ t:'mat', d:'Fijador al agua 10 L', c:2, p:21500 },
{ t:'mat', d:'Enduido plástico 25 kg', c:2, p:12900 },
{ t:'mat', d:'Rodillos, pinceles y cinta', c:1, p:19200 },
{ t:'obra', d:'Preparación · lijado y enduido', c:1, p:38000 },
{ t:'obra', d:'Aplicación · 2 manos', c:1, p:18000 },
] },
{ id:'1040', cli:'Marina Ruiz', svc:'Frente de placard', hora:'16:00', dia:'HOY', monto:22000, tsm:'CONFIRMADO', paso:1, hist:['mia','mia'], extra:'Primera vez', tel:'+54 9 341 588 907', donde:'Ov. Lagos 2233' },
{ id:'1039', cli:'Diego Salas', svc:'Frente exterior · revoque y pintura', hora:'09:00', dia:'MAÑANA', monto:38000, tsm:'CREADO', paso:0, hist:['mia'], extra:'Esperando respuesta', tel:'+54 9 341 671 025', donde:'San Luis 871, PB' },
{ id:'1038', cli:'Paula Giménez', svc:'Mano extra en el pasillo', hora:'11:00', dia:'SAB', monto:18000, tsm:'CONFIRMADO', paso:1, hist:['mia','mia'], extra:'Reservó el sábado', tel:'+54 9 341 402 118', donde:'Corrientes 1450, 3° A' },
];
/* Quién mueve cada estado. El esquema real ya lo guarda: tickets.historial_estados
es [{estado, timestamp, por}] — y la lista TSM incluye CONFIRMADO_IMPLICITO,
COMPLETADO_PRESUMIDO y REQUIERE_VALIDACION, o sea que la distinción "Mia lo dio
por hecho / falta que el dueño valide" YA existe en la base. Lo que faltaba era
que la interfaz la mostrara, para que el tipo sepa qué toca y qué no. */
/* Los pasos dependen del FLUJO, y "Presupuestado" no era el primero: el
trabajo arranca cuando se agenda el turno. El presupuesto se elabora
después —en la primera visita, o durante ella— y sólo en los rubros que
presupuestan. Antes eran cuatro pasos fijos que le mentían a la mitad de
los rubros y ponían el presupuesto antes de conocer el trabajo. */
/* Cada paso declara TRES cosas: quién lo marca, qué texto lleva y —si es de
los que hacés— a dónde te manda. Un paso que dice "lo armás vos" y no te
deja armarlo es un cartel, no un control.
Los rótulos salen del patrón: en un taller no empieza un trabajo, entra un
artículo, y no se realiza, se entrega. */
const PASO_DEF = {
AGENDADO: { t:'Turno agendado', por:'mia', x:'Mia lo agenda cuando el cliente pide fecha' },
PRESUPUESTADO:{ t:'Elaborar el presupuesto', th:'Presupuesto elaborado', por:'vos', x:'Cargá los ítems y los materiales', ir:'items' },
ENVIADO: { t:'Presupuesto enviado', por:'mia', x:'Se tilda cuando Mia se lo manda', auto:true },
APROBADO: { t:'Presupuesto confirmado', por:'mia', x:'Se tilda cuando el cliente lo acepta', auto:true },
COBRADO: { t:'Trabajo cobrado', por:'vos', x:'Lo marcás vos: es plata, no se presume' },
};
/* Los patrones que no son "ir y hacer" le dicen distinto a lo mismo. */
/* El medio de la escalera sale de la CADENA del TSM del patrón: se camina
desde CREADO tomando la transición que avanza. Antes había un único slot
EN_CURSO para todos, así que un taller no tenía "En reparación" —los días
que el artículo está en el banco— y un pedido no tenía "En preparación".
Los rótulos son los del propio TSM_ACCIONES. */
function cadenaTSM(patron) {
const tabla = TSM_ACCIONES[patron] || TSM_ACCIONES.C;
const salto = ['CANCELADO','AUSENTE','DEMORADO'];
const out = []; let est = 'CREADO', guarda = 0;
while (tabla[est] && guarda++ < 8) {
const sig = (tabla[est] || []).find(([e]) => !salto.includes(e));
if (!sig) break;
out.push({ k:sig[0], t:sig[1] });
est = sig[0];
}
return out;
}
/* Quién marca cada estado del TSM: Mia sabe lo que pasa por el chat. */
const POR_TSM = { CONFIRMADO:'mia', RECIBIDO:'vos', EN_REPARACION:'vos', LISTO_PARA_RETIRAR:'vos',
EN_CAMINO:'vos', EN_PREPARACION:'vos', EN_CURSO:'vos', FINALIZADO:'vos', ENTREGADO:'vos', RETIRADO:'vos' };
const AYUDA_TSM = { CONFIRMADO:'Mia lo marca cuando el cliente dice que sí',
FINALIZADO:'Lo marcás vos al terminar', ENTREGADO:'Lo marcás vos al entregarlo', RETIRADO:'Lo marcás vos cuando lo pasa a buscar',
RECIBIDO:'Lo marcás vos cuando el cliente te lo deja',
EN_REPARACION:'Lo marcás vos cuando lo ponés en el banco',
LISTO_PARA_RETIRAR:'Lo marcás vos cuando terminaste',
EN_CAMINO:'Lo marcás vos al salir — Mia le avisa que vas',
EN_PREPARACION:'Lo marcás vos cuando arrancás a prepararlo',
EN_CURSO:'Lo marcás vos al arrancar' };
/* El rótulo es el NOMBRE DEL ESTADO (EST_LBL), no el texto del botón que lleva
a él: TSM_ACCIONES dice "Confirmar" porque es una acción, y la escalera
tiene que decir "Confirmado" porque es un hito. */
const NOM_TSM = { CONFIRMADO:'Turno confirmado' };
/* Dos confirmaciones distintas caían en el mismo peldaño: la del EMPRENDEDOR
—acepta el turno y Mia le avisa al cliente— y la del CLIENTE, que acepta un
horario que le propusieron. Normalmente confirma el emprendedor; después de
una reagenda la pelota es del cliente. El peldaño es el mismo, pero dice de
quién es el próximo movimiento. */
const confirmDe = j => j && j.esperaCli
? { por:'mia', auto:true, x:'Le propusimos el horario nuevo · esperando que responda' }
: { por:'vos', x:'Lo confirmás vos y Mia le avisa al cliente' };
/* Vocabulario por rubro para TODA la escalera, no sólo el estado final: un
taller no agenda un turno —el cliente deja un artículo— y una pastelera no
confirma un turno, confirma un pedido. Se perdió al reescribir pasoDe sobre
cadenaTSM y volvió a decir "Turno" en los 7 patrones. */
const NOM_FIN = {
A:{ FINALIZADO:'Trabajo realizado' },
C:{ FINALIZADO:'Trabajo realizado' },
B:{ FINALIZADO:'Turno terminado' },
F:{ AGENDADO:'Consulta agendada', CONFIRMADO:'Consulta confirmada', FINALIZADO:'Consulta terminada' },
/* El taller no tiene peldaño de confirmación: la cadena va CREADO → RECIBIDO,
el cliente confirma dejando el artículo. */
G:{ AGENDADO:'Entrada agendada', RECIBIDO:'Artículo recibido',
EN_REPARACION:'En reparación', LISTO_PARA_RETIRAR:'Artículo listo para retirar',
RETIRADO:'Retirado por el cliente', COBRADO:'Reparación cobrada' },
D:{ AGENDADO:'Pedido agendado', CONFIRMADO:'Pedido confirmado', EN_PREPARACION:'Pedido en preparación',
ENTREGADO:'Pedido entregado', COBRADO:'Pedido cobrado' },
E:{ AGENDADO:'Evento agendado', CONFIRMADO:'Evento confirmado', FINALIZADO:'Evento finalizado', COBRADO:'Evento cobrado' },
};
/* Cómo se llama arrancar depende de si vas vos o viene el cliente. */
const NOM_COMENZADO = {
A:['Llegué y arranqué','Lo marcás vos al llegar — Mia no está ahí'],
C:['Llegué y arranqué','Lo marcás vos al llegar — Mia no está ahí'],
E:['Arrancó el evento','Lo marcás vos al empezar'],
B:['Turno comenzado','Lo marcás vos cuando lo hacés pasar'],
F:['Consulta comenzada','Lo marcás vos cuando lo hacés pasar'],
};
const PASO_LLEGUE = { t:'Comenzado', por:'vos', x:'Lo marcás vos al arrancar' };
const pasoDe = (k, patron, job) => {
const voz = (NOM_FIN[patron] || {})[k];
/* El rubro manda sobre el rótulo; confirmDe sólo decide de quién es el turno. */
if (k === 'CONFIRMADO') return { t:voz || 'Turno confirmado', ...confirmDe(job) };
if (voz && PASO_DEF[k]) return { ...PASO_DEF[k], t:voz };
if (k === LLEGUE) { const n = NOM_COMENZADO[patron];
return n ? { t:n[0], por:'vos', x:n[1] } : PASO_LLEGUE; }
if (PASO_DEF[k]) return PASO_DEF[k];
const n = (NOM_FIN[patron] || {})[k] || NOM_TSM[k] || EST_LBL[k] || k;
return { t:n, por:POR_TSM[k] || 'vos', x:AYUDA_TSM[k] || 'Lo marcás vos' };
};
/* Los tres atajos —arrancar, terminar, cobrar— se resuelven por CANDIDATOS,
no por una clave fija: la escalera cambia de claves según el patrón y cada
vez que eso pasó, los botones desaparecieron en silencio. Una sola función
para las dos superficies. El rótulo sale de pasoDe, así un taller lee
"Artículo recibido" y no vocabulario de pintor. */
const CAND = { arranca:['COMENZADO','EN_CURSO','EN_REPARACION','EN_PREPARACION'],
termina:['FINALIZADO','ENTREGADO','RETIRADO'], cobra:['COBRADO'] };
function atajos(cfg) {
const ps = pasosDe(cfg), p = (cfg && cfg.patron) || 'C';
return ['arranca','termina','cobra'].map(g => {
const k = CAND[g].find(x => ps.indexOf(x) >= 0);
return k ? { k, n:ps.indexOf(k), t:pasoDe(k, p).t } : null;
}).filter(Boolean);
}
/* El TSM no tiene el momento en que el trabajo ARRANCA: en domicilio salta de
"en camino" a "finalizado", y en el local de "confirmado" a "terminado". En
un trabajo de dos horas eso son dos horas sin estado, justo cuando el
cliente pregunta "¿ya está?". COMENZADO es un paso interno —no le manda
nada a nadie— que llena ese hueco de los dos lados. Los patrones que ya
tienen un estado de curso propio (taller, pedidos) no lo necesitan. */
const LLEGUE = 'COMENZADO';
const EN_CURSO_TSM = ['EN_CURSO','EN_REPARACION','EN_PREPARACION'];
function pasosDe(cfg) {
const p = (cfg && cfg.patron) || 'C';
const cad = cadenaTSM(p);
const medio = cad.slice(0, -1).map(x => x.k);
const fin = cad.length ? cad[cad.length - 1].k : 'FINALIZADO';
if (!medio.some(k => EN_CURSO_TSM.includes(k))) {
const iCam = medio.indexOf('EN_CAMINO');
medio.splice(iCam >= 0 ? iCam + 1 : medio.length, 0, LLEGUE);
}
const pres = cfg && cfg.presupuesto && cfg.presupuesto.on ? ['PRESUPUESTADO','ENVIADO','APROBADO'] : [];
/* Dónde entra el presupuesto depende del oficio, no es siempre al final.
Un taller diagnostica al recibir, cotiza y RECIÉN AHÍ repara; una
pastelera cotiza antes de ponerse a preparar. Clavarlo antes del estado
final hacía que el artículo estuviera listo para retirar sin haberse
cotizado, y que el reparto saliera sin aprobación. */
const ANCLA = { G:'RECIBIDO', D:'CONFIRMADO', E:'CONFIRMADO', B:'CONFIRMADO', F:'CONFIRMADO' };
const todos = ['AGENDADO', ...medio];
const i = pres.length ? todos.indexOf(ANCLA[p]) : -1;
if (i >= 0) todos.splice(i + 1, 0, ...pres);
return [...todos, ...(i >= 0 ? [] : pres), fin, 'COBRADO'];
}/* Configuración = las 6 cards del onboarding real de panel.html, en el mismo
orden que el tour. Los valores se DERIVAN del estado (ver pieza3-docs.jsx),
así que guardar en una pantalla cambia lo que dice esta lista. */
/* Las 7 cards del onboarding, que ahora se hace COMPLETO acá — cero pasos por
conversación de WhatsApp (decisión 04-sep). El rubro es la primera porque de
ahí sale el preset de todas las demás. */
const CFG = [
{ k:'Tu rubro' }, { k:'Servicios y precios' }, { k:'Horarios y días' },
{ k:'Feriados y vacaciones' }, { k:'Capacidad y metas' }, { k:'Sobreturnos' },
{ k:'Visitas a domicilio' }, { k:'Cobros y señas' }, { k:'Avisos al cliente' },
{ k:'Recibos y presupuestos' },
];
/* Historial: los trabajos viejos que ya no están en la operación del día pero
siguen siendo del cliente. Sin esto la ficha miente por omisión — dice
"14 visitas" y muestra una. */
const HIST = {
'Paula Giménez':[
{ id:'0994', svc:'Cocina y lavadero', cuando:'12 AGO', monto:64000, tsm:'FINALIZADO', pres:true },
{ id:'0961', svc:'Dormitorio principal', cuando:'24 JUL', monto:52000, tsm:'FINALIZADO', pres:true },
{ id:'0930', svc:'Retoque de humedad', cuando:'01 JUL', monto:18000, tsm:'FINALIZADO', pres:false },
{ id:'0902', svc:'Frente exterior', cuando:'14 JUN', monto:96000, tsm:'CANCELADO', pres:true },
],
'Carlos Ferreyra':[
{ id:'0988', svc:'Baño y pasillo', cuando:'29 AGO', monto:74000, tsm:'FINALIZADO', pres:true },
{ id:'0954', svc:'Presupuesto galpón', cuando:'18 JUL', monto:410000, tsm:'CANCELADO', pres:true },
],
'Diego Salas':[
{ id:'0975', svc:'Medianera', cuando:'08 AGO', monto:88000, tsm:'FINALIZADO', pres:true },
{ id:'0940', svc:'Portón y rejas', cuando:'02 JUL', monto:47000, tsm:'FINALIZADO', pres:false },
],
};
const histDe = n => HIST[n] || [];
const CLIENTES_INIT = [
{ n:'Paula Giménez', tel:'+54 9 341 402 118', dir:'Corrientes 1450, 3° A · Centro', notas:'Prefiere turnos de tarde. Hay que cubrir el piso de madera.', v:14, ult:'HOY 14:30', total:612000, tag:'Frecuente' },
{ n:'Marina Ruiz', tel:'+54 9 341 588 907', dir:'Ov. Lagos 2233 · Abasto', notas:'Llegó por recomendación de Paula. Departamento sin ascensor.', v:0, ult:'HOY 16:00', total:0, tag:'Nuevo' },
{ n:'Carlos Ferreyra',tel:'+54 9 341 233 460', dir:'Mendoza 2340, 4° B · Centro', notas:'Trabaja hasta las 18. Portero eléctrico 4B.', v:3, ult:'29 AGO', total:186000, tag:null },
{ n:'Diego Salas', tel:'+54 9 341 671 025', dir:'San Luis 871, PB · Norte', notas:'Casa con frente a la calle. Hay que andamio.', v:7, ult:'MAÑANA 9:00', total:274000, tag:'Frecuente' },
];
/* Historial + lo que está vivo en `jobs`. Nada de contadores escritos a mano. */
const clienteResumen = (cli, jobs) => {
const suyos = jobs.filter(j => j.cli === cli.n);
const cobrados = suyos.filter(j => esCobrado(j.tsm));
const hist = histDe(cli.n), histOk = hist.filter(h => esCobrado(h.tsm));
const prox = suyos.find(j => !esCierre(j.tsm) && (j.dia === 'HOY' || j.dia === 'MAÑANA'));
return {
suyos, hist,
visitas: histOk.length + cobrados.length,
facturado: histOk.reduce((s,h) => s + h.monto, 0) + cobrados.reduce((s,j) => s + j.monto, 0),
proxima: prox ? `${prox.dia} · ${prox.hora}` : '—',
};
};
/* ── átomos ───────────────────────────────────────────────── */
const Lbl = ({ children, c = T.c500, mb = 0 }) => (
{children}
);
/* Un solo estado: tsm. El campo `est` era un segundo estado en paralelo y
cualquier estado nuevo se colapsaba sobre uno viejo al derivarlo — así
RELEVADO se veía como "A confirmar". El badge lee el TSM y punto. */
const Badge = ({ tsm, dot }) => { const t = EST_TONO[tsm];
const e = { c:t==='coral'?T.coral:t==='amber'?T.amber:t==='green'?T.green:T.c500,
bg:t==='coral'?T.coSoft:t==='amber'?T.aSoft:t==='green'?T.gSoft:T.g800,
bd:t==='coral'?T.coBorder:t==='amber'?T.aBorder:t==='green'?T.gBorder:T.g700,
t:EST_LBL[tsm] || tsm };
return
{dot && }{e.t};
};
const Chip = ({ children, on, onClick }) => (
);
const Card = ({ children, pad = 16, gap = 12, onClick, style, ...r }) => (
{children}
);
const Row = ({ children, onClick }) => (
{children}
);
/* ── chrome de Telegram ───────────────────────────────────── */
/* El chrome de Telegram NO es el mismo en las dos plataformas. iOS: botón
"Close" azul a la izquierda, título centrado y un solo ⋯ a la derecha.
Android: ícono a la izquierda, título alineado, ⋮ y ✕. Verificado contra
una captura real de iPhone (03-sep-2026). */
function TgChrome({ back, title, sub, nota, ios }) {
if (ios) return (
{back
?
: }
{title}
{sub}
);
return (
{back
?
: }
{title}
{sub}
);
}
/* MainButton nativo: 50 px, flush abajo, sobre el teclado, uno por pantalla */
/* MainButton nativo: 50 px, flush abajo, sobre el teclado, uno por pantalla.
En iOS suma el safe-area del home indicator — sin eso el botón cae abajo de
la barrita y se toca mal. Es el hallazgo 2 de la sección iOS. */
/* Entra deslizándose desde el borde derecho y se va sola. Ancho casi completo
y anclada abajo, arriba del MainButton: en la mano, el pulgar tapa el centro
de la pantalla y una pastilla chica arriba no se ve. */
function Toast({ k, msg, tono, ios }) {
/* Fondo sólido del color de lo que pasó: verde confirma y es el que más
aparece, coral avisa, violeta informa. Sin ícono — la frase alcanza. */
const bg = tono === 'ok' ? T.green : tono === 'mal' ? T.coral : T.v600;
const fg = tono === 'ok' ? '#08240F' : tono === 'mal' ? '#3B120D' : '#FFFFFF';
return (
{msg}{k}
);
}
function MainButton({ label, onClick, tone = 'primary', busy, ios, lift, cerrar }) {
const bg = tone === 'danger' ? T.coral : tone === 'off' ? T.g800 : T.v600;
const fg = tone === 'off' ? T.c500 : '#fff';
return (
{/* Salir de una pantalla no puede depender de una flecha de 20 px arriba
a la izquierda: con el teléfono en una mano no se llega. El cierre va
al alcance del pulgar, arriba de la acción principal, en TODAS. */}
{cerrar && }
);
}
/* Tab bar · 4 destinos, 56 px de alto */
/* Iconos: los mismos de panel.html (.nav-item svg, líneas 1434-1458).
No se dibuja un segundo set — la mini-app habla el mismo idioma que el panel. */
/* Mismos iconos que public/panel.html (nav, líneas 1433-1462) y que el panel
web de esta pieza. Guardan ELEMENTOS, no strings `d`: el calendario de
Agenda necesita un , y redibujarlo como path daba una caja 22% más
angosta que la del panel — dos glifos distintos para el mismo destino. */
const ICONS = {
hoy: [['path',{ d:'M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z' }]],
trabajos: [['rect',{ x:3, y:5, width:18, height:16, rx:2 }], ['path',{ d:'M3 10h18M8 3v4M16 3v4' }]],
clientes: [['circle',{ cx:9, cy:8, r:3.5 }], ['path',{ d:'M3 21c0-3 3-5 6-5s6 2 6 5' }], ['circle',{ cx:17, cy:9, r:2.5 }], ['path',{ d:'M14 17c1-2 3-3 5-3' }]],
negocio: [['path',{ d:'M4 20V10M10 20V4M16 20v-7M22 20H2' }]],
};
const TabIcon = ({ id, on }) => (
);
const TABS = [
{ id:'hoy', t:'Hoy' }, { id:'trabajos', t:'Agenda' },
{ id:'clientes', t:'Clientes' }, { id:'negocio', t:'Negocio' },
];
function TabBar({ tab, go }) {
return (
);
}
/* ── pantallas ────────────────────────────────────────────── */
/* Cada alerta está atada a un trabajo real. Si el trabajo se cerró o el dueño
la marcó vista, la alerta desaparece y el contador baja con ella: no hay un
número escrito a mano ni una copia congelada del trabajo. */
/* Una sola resolución de alertas para las tres superficies: el rótulo y el
texto salen del trabajo vivo. El panel tenía su propia lista literal, así
que prometía "Mandar" un presupuesto enviado hace seis días. */
function alertasDe(jobs, visto = []) {
return ALERTAS.map(a => { const t = jobs.find(x => x.id === a.job);
return { ...a, trabajo:t,
a:typeof a.a === 'function' ? (t ? a.a(t) : '') : a.a,
tx:typeof a.tx === 'function' ? (t ? a.tx(t) : null) : a.tx }; })
.filter(a => a.trabajo && !esCierre(a.trabajo.tsm) && !visto.includes(a.id));
}
const TONE = { coral:{ c:T.coral, bg:T.coSoft, bd:T.coBorder }, amber:{ c:T.amber, bg:T.aSoft, bd:T.aBorder }, green:{ c:T.green, bg:T.gSoft, bd:T.gBorder } };
const ALERTAS = [
{ id:'a1', job:'1042', ic:'↺', tone:'coral', a:'Pasarlo', acc:'pasar',
tx:<>Paula pidió pasar el turno de las 14:30 al viernes. },
/* El rótulo y el texto salen del ESTADO del presupuesto: uno sin enviar se
manda, uno enviado hace 6 días se insiste. Tenerlo escrito a mano hacía
que la alerta prometiera "Mandar" y el documento ofreciera "Insistirle". */
{ id:'a2', job:'1041', ic:'!', tone:'amber', acc:'enviar',
a:j => j.enviado ? 'Insistir' : 'Mandar',
tx:j => j.enviado
? <>El presupuesto de Carlos vence hoy y sigue sin respuesta.
: <>El presupuesto de Carlos está sin enviar. },
{ id:'a3', job:'1040', ic:'✓', tone:'green', a:'Listo', acc:'visto',
tx:<>Marina confirmó y pagó la seña. },
];
/* Los tres números de esta pantalla salen del MISMO array. Si dicen "hoy",
cuentan hoy: nada de sumar el trabajo de mañana en el total del día. */
function Hoy({ open, jobs, cfg, visto, onAlerta, onPaso, verMate }) {
const [armadoA, pedirA] = useArmar();
const hoy = jobs.filter(j => j.dia === 'HOY' && !esCierre(j.tsm));
const aCobrar = hoy.filter(j => j.tsm !== 'RELEVADO').reduce((s,j) => s + j.monto, 0);
const listos = hoy.filter(j => j.tsm === 'CONFIRMADO').length;
const enCurso = hoy[0] || null;
const abiertos = jobs.filter(j => !esCierre(j.tsm));
const pendiente = abiertos.reduce((s,j) => s + j.monto, 0);
const alertas = ALERTAS.map(a => { const t = jobs.find(x => x.id === a.job);
return { ...a, trabajo:t, a:typeof a.a === 'function' ? (t ? a.a(t) : '') : a.a, tx:typeof a.tx === 'function' ? (t ? a.tx(t) : null) : a.tx }; })
.filter(a => a.trabajo && a.trabajo.est !== 'cerrado' && !visto.includes(a.id));
const saludo = !hoy.length
? <>Hoy no te queda nada agendado. Te avisé por los presupuestos abiertos.
: hoy.length === 1
? <>Te queda un trabajo hoy{listos ? ', y ya está para cerrar' : ''}.
: listos === hoy.length
? <>Tenés {hoy.length} trabajos hoy y los {hoy.length === 2 ? 'dos' : hoy.length} están para cerrar.
: <>Tenés {hoy.length} trabajos hoy{listos ? <> y {listos === 1 ? 'uno ya está' : listos + ' ya están'} para cerrar : ''}.;
return (
{/* La card de Mate abre su hilo: no sólo saluda, es el canal por donde
avisa cambios, cancelaciones, cierre de jornada y los reportes. */}
{/* Vacío ≠ cero: sin trabajos hoy no van dos ceros gigantes, va una card
que mide lo único que queda para hacer. */}
{hoy.length ? (
{/* Los chips se resuelven por CLAVE, no por índice. Estaban en 1/2/3,
que era correcto con la escalera vieja de cuatro pasos; con la de
ocho, "Cobrado" caía en "Presupuesto elaborado" y se pintaba verde
como si hubieras cobrado — con el total del día sin moverse y sin
recibo emitido. Y "Llegó" apuntaba a "Turno confirmado". */}
{atajos(cfg).map(({ k, n, t }) => { const hecho = enCurso.paso >= n, activo = enCurso.paso + 1 === n;
const habla = saltoHabla(pasosDe(cfg), enCurso.paso, n), arm = armadoA === k;
return ;
})}
}
{alertas.length > 0 &&
ATENCIÓN REQUERIDA
{alertas.length}
{alertas.map(a => { const t = TONE[a.tone];
return
{a.ic}{a.tx}
;
})}
}
);
}
const FILTROS = [
{ id:'Todos', t:'Todos', test:() => true },
{ id:'Confirmados', t:'Confirmados', test:j => j.tsm === 'CONFIRMADO' },
{ id:'Esperando', t:'Esperando', test:j => j.tsm === 'CREADO' || j.tsm === 'RELEVADO' },
];
/* Tres filtros, no cuatro: cuatro sumaban 433 px en una ventana de 412 y el
último quedaba tajeado — el defecto que esta misma pieza denuncia. El conteo
informa más que un cuarto chip, y la diferencia entre esperar una confirmación
y no tener respuesta sigue leyéndose en el badge de cada card. */
function Trabajos({ open, jobs, filtro, setFiltro }) {
const f = FILTROS.find(x => x.id === filtro) || FILTROS[0];
const vis = jobs.filter(f.test);
return (
);
}
function Detalle({ job, cfg, onPaso, onDoc, onNotas, onAcc }) {
/* Los peldaños que disparan un WhatsApp piden confirmación: un toque
accidental le avisa al cliente algo que no pasó, y el mensaje no vuelve. */
const [armado, pedir] = useArmar();
const pasos = pasosDe(cfg), ult = pasos.length - 1;
/* Un trabajo FINALIZADO no está cerrado: falta la plata. Tomarlo como cerrado
bloqueaba la escalera justo antes de cobrar. */
const done = job.tsm === 'CANCELADO' || !!(job.hist || [])[ult];
/* Cerrado no es lo mismo que cobrado: un CANCELADO también cierra el ticket
pero no generó plata ni recibo. */
const pago = esCobrado(job.tsm);
const canc = job.tsm === 'CANCELADO';
const paso = pago ? ult : job.paso;
const esPres = job.dia === 'PRESUPUESTO';
const nn = (job.notas || []).length;
return (
{job.svc}
{job.cli} · {job.tel}
{pago ? 'COBRADO' : canc ? 'NO SE COBRÓ' : 'A COBRAR'}
{money(job.monto)}
CUÁNDO
{job.dia}{job.hora !== '—' && ' · ' + job.hora}
{(pago || esPres) && }
ESTADO DEL TRABAJOQUIÉN LO MARCÓ
{/* `ok` sale de hist y de nada más: el atajo "si cobró, todo hecho"
volvía a pintar los pasos de presupuesto que nunca ocurrieron. */}
{pasos.map((k,i) => { const d = pasoDe(k, cfg.patron, job), ev = evidencia(job, k);
const por = (job.hist||[])[i] || (ev ? d.por : null), ok = !!por;
const tocable = !done && i === paso + 1 && !d.auto;
const habla = saltoHabla(pasos, job.paso, i);
const go = () => { if (done) return;
if (d.ir === 'items') { onDoc('items'); return; }
if (d.auto) return;
onPaso(job.id, i); };
/* Retroceder no manda nada, así que no pide confirmación. */
const volver = ok && !done && i === job.paso && !MSG_WA[k];
const accion = () => (habla && !ok) ? pedir(k, go) : go();
const arm = armado === k;
/* Un paso que hay que HACER no es un check: mientras está pendiente
va como botón, y recién cuando se hizo pasa a ser un hito ✓. */
if (d.ir && !ok) return (
);
return ;
})}
Los pasos de Mia se tildan solos: agendar, confirmar, mandar el presupuesto y avisar que lo aceptaron. Los tuyos se tocan, y el del presupuesto te lleva directo a armarlo.
{job.extra.toUpperCase()}
{canc ? <>Le avisé que se canceló. Si quiere retomarlo, te lo vuelvo a pasar.
: pago ? <>Le mandé el recibo por WhatsApp y quedó registrado en el cierre del mes.
: job.tsm === 'CREADO' && esPres ? <>Se lo mandé hace 6 días y no contestó. Puedo mandarle un recordatorio ahora.
: <>Ya le confirmé el turno y la seña. Cuando lo cierres le mando el recibo sola.}
);
}
function Clientes({ open, q, setQ, clientes, nuevo, jobs }) {
const vis = clientes.filter(c => c.n.toLowerCase().includes(q.toLowerCase()));
return (
);
}
/* Historial completo del cliente. Cada trabajo lista SUS documentos —el
presupuesto y el recibo—, no el último: el presupuesto de hace tres meses
es justo lo que se busca cuando el cliente vuelve a llamar. */
function Historial({ cli, hist, jobs, abrirDoc }) {
const vivos = jobs.filter(j => j.cli === cli.n);
const fila = (id, svc, cuando, monto, tsm, pres, real) => {
const canc = tsm === 'CANCELADO';
/* El recibo existe reci\u00e9n cuando el trabajo se cobr\u00f3. Ofrecerlo antes es
prometer un documento que no se emiti\u00f3. */
const hayRec = esCobrado(tsm);
return (
Cada trabajo guarda sus dos documentos. El presupuesto viejo es lo que buscás cuando el cliente vuelve a llamar por lo mismo.
);
}
function Negocio({ abrirCfg, destacado, reVerGuia, resumen, jobs, verDocs, cards, conPresupuesto, cfg, pend }) {
const nDocs = { pre:jobs.filter(j => !conHora(j) && !esCierre(j.tsm)).length, rec:jobs.filter(j => esCobrado(j.tsm)).length, can:jobs.filter(j => j.tsm === 'CANCELADO').length };
/* Los cuatro números salen de `jobs` con los MISMOS predicados que usa el
panel web. Eran literales de antes del refactor del TSM y la pantalla se
contradecía sola: decía $412.500 cobrado con cero recibos emitidos. */
const cobrado = jobs.filter(j => esCobrado(j.tsm)).reduce((s,j) => s + j.monto, 0);
const aCobrar = jobs.filter(j => !esCierre(j.tsm) && conHora(j) && j.tsm !== 'RELEVADO').reduce((s,j) => s + j.monto, 0);
const enPres = jobs.filter(j => !esCierre(j.tsm) && !conHora(j)).reduce((s,j) => s + j.monto, 0);
const perdido = jobs.filter(j => j.tsm === 'CANCELADO').reduce((s,j) => s + j.monto, 0);
const bars = [['Cobrado', cobrado, T.green], ['A cobrar', aCobrar, T.v600], ['En presupuestos', enPres, T.amber], ['Perdido', perdido, T.coral]].filter(b => b[1] > 0);
const max = Math.max(cobrado, aCobrar, enPres, perdido, 1);
return (
SALUD DEL NEGOCIO · SEPTIEMBRE
{money(cobrado)}
{cobrado ? 'cobrado en lo que va del mes' : 'cobrado todavía este mes'}
{bars.map(([k,v,c]) => (
{k}{money(v)}
))}
RESEÑAS4,8★★★★★
“Puntual y prolija. Volvería sin dudar.”
PAULA G. · HACE 2 DÍAS
{cards.map((c,i) => { const on = destacado === c.k, raiz = c.k === 'Tu rubro', preset = esPreset(cfg, c.k), sinAplicar = pend.includes(c.k);
/* raíz en violeta-600 daba 4.05:1 a 9px; el punto de color sigue en violeta
y el texto sube a cloud-300. */
const col = sinAplicar ? T.amber : raiz ? T.v600 : preset ? T.amber : T.green;
const colTxt = raiz ? T.c300 : col;
return ;
})}
);
}
/* ── hoja de confirmación ─────────────────────────────────── */
/* Cargar un trabajo. El MainButton queda arriba del teclado — que es medio
punto del hallazgo 06: con viewportStableHeight el campo nunca se tapa. */
function NuevoCli({ form, setForm }) {
const campo = (k, label, ph, mono) => (
{campo('n', 'NOMBRE', 'Nombre y apellido')}
{campo('tel', 'TELÉFONO', '+54 9 341 ···', true)}
{campo('dir', 'DIRECCIÓN', 'Calle, altura y barrio')}
{campo('notas', 'NOTAS', 'Lo que conviene recordar')}
Con el teléfono Mia lo reconoce cuando escribe y ya sabe qué le hiciste antes. En producción esto es un toque:requestContact() trae el número del propio Telegram.
);
}
function Nuevo({ form, setForm, conPresupuesto = true }) {
const campo = (k, label, ph, mono) => (
}
{campo('cli', 'CLIENTE', 'Nombre y apellido')}
{campo('svc', 'TRABAJO', 'Qué le vas a hacer')}
{campo('monto', 'CUÁNTO', '0', true)}
{form.tipo === 'Presupuesto'
? <>Armo el presupuesto y te lo muestro antes de mandarlo. Vos le das enviar y se lo paso por WhatsApp.
: <>Con esto Mia ya puede confirmarle el turno. El resto lo completa ella hablando con el cliente.}
);
}
/* Hoja de confirmación de los cambios de configuración. Aplicar no es
inmediato — Mia tiene que recargar su configuración y la propagación a
WhatsApp depende de Meta — así que se avisa antes, no después. */
function SheetCfg({ pend, resumen, onClose, onConfirm, busy }) {
return (
Aplicar {pend.length} {pend.length === 1 ? 'cambio' : 'cambios'} en Mia
Hasta que no los apliques, Mia sigue atendiendo con la configuración anterior.
{pend.map((k,i) => (
{k}{resumen[k]}
))}
!Tarda hasta un par de minutos en tomar efecto, y las charlas que Mia ya tenga abiertas terminan con la configuración vieja. Te aviso por acá cuando esté listo.
Marco {job.svc} como cobrado y le mando el recibo a {job.cli.split(' ')[0]} por WhatsApp.
TOTAL{money(job.monto)}
);
}
/* ── app ──────────────────────────────────────────────────── */
/* Set de datos alternativo: peluquería (patrón B). El cliente va al local,
así que no hay dirección, no hay "en camino" y no hay presupuesto — se
cobra el precio de lista. Sirve para ver que la app cambia de forma con el
rubro y no sólo de rótulos. */
const CFG_LOCAL = { ...CFG_INIT, rubro:'Peluquería', patron:'B',
presupuesto:{ on:false, items:false },
domicilio:{ on:false, pct:0, zonas:[] },
servicios:[{ n:'Corte y brushing', p:18000, m:45 }, { n:'Color raíz', p:32000, m:90 }, { n:'Alisado', p:54000, m:150 }] };
const JOBS_LOCAL = [
{ id:'2041', cli:'Paula Giménez', svc:'Corte y brushing', hora:'14:30', dia:'HOY', monto:18000, tsm:'CONFIRMADO', paso:1, hist:['mia','mia'], extra:'Vuelve cada 6 semanas', tel:'+54 9 341 402 118', donde:'En el local' },
{ id:'2040', cli:'Marina Ruiz', svc:'Color raíz', hora:'16:00', dia:'HOY', monto:32000, tsm:'CONFIRMADO', paso:1, hist:['mia','mia'], extra:'Primera vez', tel:'+54 9 341 588 907', donde:'En el local' },
{ id:'2039', cli:'Diego Salas', svc:'Corte y brushing', hora:'09:30', dia:'MAÑANA', monto:18000, tsm:'CREADO', paso:0, hist:['mia'], extra:'Esperando respuesta', tel:'+54 9 341 671 025', donde:'En el local' },
];
function MiniApp({ onb = false, ios = false, espera = false, local = false }) {
const [tab, setTab] = React.useState(onb ? 'negocio' : 'hoy');
const [esp, setEsp] = React.useState(espera);
const [coach, setCoach] = React.useState(onb ? 0 : null);
const [stack, setStack] = React.useState([]);
const [jobs, setJobs] = React.useState((local ? JOBS_LOCAL : JOBS).map(j => ({ ...j, bit:BIT0[j.id] || [{ h:'08:00', t:'Trabajo creado', por:j.hist && j.hist[0] === 'mia' ? 'mia' : 'vos', tono:'alta' }] })));
const [filtro, setFiltro] = React.useState('Todos');
const [q, setQ] = React.useState('');
const [sheet, setSheet] = React.useState(null);
const [busy, setBusy] = React.useState(false);
const [haptic, setHaptic] = React.useState(null);
const [visto, setVisto] = React.useState([]);
const [form, setForm] = React.useState({ cli:'', svc:'', monto:'', tipo:'Confirmado', dia:'HOY' });
const [cfg, setCfg] = React.useState(local ? CFG_LOCAL : CFG_INIT);
const [clientes, setClientes] = React.useState(CLIENTES_INIT);
const [formCli, setFormCli] = React.useState({ n:'', tel:'', dir:'', notas:'' });
const [seg, setSeg] = React.useState('Turnos');
/* Guardar en una card deja el cambio pendiente; recién "Aplicar" lo manda a
Mia. Son dos pasos distintos a propósito: el emprendedor puede tocar cinco
cosas y aplicarlas juntas, en vez de reiniciar al bot cinco veces. */
const [pend, setPend] = React.useState([]);
const [cfgSheet, setCfgSheet] = React.useState(false);
/* El editor trabaja sobre un BORRADOR. Antes escribía directo en la config
viva: si salías sin guardar el cambio quedaba aplicado igual, pero fuera
de la lista de pendientes — así que la pantalla mostraba el valor nuevo
y Mia seguía con el viejo, sin que el botón de aplicar se prendiera. */
const [draft, setDraft] = React.useState(null);
const [accSheet, setAccSheet] = React.useState(null);
const [matePaso, setMatePaso] = React.useState(0);
const [nuevoTurno, setNuevoTurno] = React.useState({ dia:'MAÑANA', hora:'15:00', motivo:'relevado' });
const [revisita, setRevisita] = React.useState(false);
const [docRango, setDocRango] = React.useState('Mes');
const [docOff, setDocOff] = React.useState(0);
const [docFiltro, setDocFiltro] = React.useState('Todos');
const [rango, setRango] = React.useState('Hoy');
const [agOff, setAgOff] = React.useState(0);
const resumen = cfgResumen(cfg);
const cards = cfgCards();
const conPres = hayPresupuesto(cfg);
/* UNA sola fuente: si el flujo no presupuesta, esos trabajos no existen para
ninguna pantalla. Pasar un booleano a cada vista hacía que cada pantalla
nueva fuera una fuga nueva — Hoy y el detalle se habían quedado afuera.
`jobs` completo queda solo para resolver la pila por id. */
const visibles = conPres ? jobs : jobs.filter(j => j.dia !== 'PRESUPUESTO');
/* El tour también sigue al flujo: si una card no aplica, su paso no existe. */
const pasos = PASOS_ONB.filter(p => cards.some(c => c.k === p.k));
const scroller = React.useRef(null);
/* El aviso lleva TONO: verde confirma, coral avisa que algo falló o se
canceló, violeta es info. Antes todo era la misma pastilla gris de 9 px,
así que cobrar un trabajo y equivocarse de campo se veían igual. */
/* El aviso sale SOLO cuando pasó algo que el tipo tiene que saber: se cobró,
se canceló, se reagendó, se mandó un presupuesto, se aplicó configuración.
Navegar, tocar una pestaña o abrir una ficha dispara el haptic —que es una
API real— pero no pinta nada: un cartel en cada click deja de leerse. */
const buzz = (k, msg) => {
if (!msg) return;
const tono = /success/.test(k) ? 'ok' : /error|warning/.test(k) ? 'mal' : 'info';
setHaptic({ k, msg, tono, id:Date.now() });
window.clearTimeout(buzz._t);
buzz._t = window.setTimeout(() => setHaptic(null), 2600);
};
const top = stack[stack.length - 1] || null;
const push = s => { setStack(v => [...v, s]); buzz('impactOccurred · light'); if (scroller.current) scroller.current.scrollTop = 0; };
const pop = () => { setDraft(null); setStack(v => v.slice(0, -1)); buzz('impactOccurred · light'); };
const goTab = t => { setStack([]); setTab(t); buzz('selectionChanged'); if (scroller.current) scroller.current.scrollTop = 0; };
/* Cada paso se rellena con SU dueño; sólo el que tocaste queda a tu nombre.
Antes estampaba el mismo `por` en todos los huecos, así que saltar del
paso 1 al 7 ponía VOS sobre "Presupuesto enviado" y "confirmado", que son
de Mia — y contradecía el párrafo que está justo debajo. */
/* `hist` es la verdad de qué pasó: un hueco significa "no se hizo". Saltar a
"Terminé" no puede dar por hecho que hubo presupuesto elaborado, enviado y
aprobado — antes los estampaba, y dos de ellos a nombre de Mia, sobre un
trabajo sin ítems y con enviado en false. Se rellenan sólo con evidencia. */
/* Toda transición pasa por acá: mueve el estado Y deja el evento. Antes el
estado se pisaba y la reagenda no dejaba rastro. */
const bitar = (j, ev) => anotar(j, ev);
const marcar = (j, n, por) => { const p = pasosDe(cfg), h = [...(j.hist || [])];
for (let i = 0; i <= n; i++) {
if (h[i]) continue;
if (i === n) { h[i] = por; continue; }
/* Los pasos de presupuesto sólo se rellenan con evidencia; el resto sí. */
const esPres = ['PRESUPUESTADO','ENVIADO','APROBADO'].includes(p[i]);
if (!esPres || evidencia(j, p[i])) h[i] = (PASO_DEF[p[i]] || {}).por || 'vos';
}
return h.slice(0, n + 1); };
const cerrar = () => { setBusy(true); window.setTimeout(() => {
const ult = pasosDe(cfg).length - 1;
setJobs(v => v.map(j => j.id === sheet.id ? bitar({ ...j, tsm:'FINALIZADO', paso:ult, hist:marcar(j, ult, 'vos'), extra:'Cobrado' }, { t:`Cobrado ${money(j.monto)}`, d:'Mia le mandó el recibo', por:'vos', tono:'ok', tipo:'cobro' }) : j));
setBusy(false); setSheet(null);
buzz('notificationOccurred · success', `Cobrado ${money(sheet.monto)} · recibo enviado`);
}, 1150); };
/* Avanzar el trabajo. Llegar a "Cobrado" abre la confirmación de cobro.
Si el paso ES un estado del TSM, mueve el TSM: tenerlos separados hacía
que tildar "En camino" en la escalera dejara el ticket en CONFIRMADO, y
entonces el menú seguía ofreciendo las acciones de antes —sin "Me
demoré"— aunque la pantalla dijera que ya ibas en camino. */
const onPaso = (id, n) => {
const j = jobs.find(x => x.id === id);
if (!j || esCierre(j.tsm)) return;
const k = pasosDe(cfg)[n], d = pasoDe(k, cfg.patron, j);
if (d.auto) return;
/* Retroceder: sólo pasos internos y sólo el último alcanzado, para que
deshacer no borre media escalera de un toque. */
if (j.paso === n && !EST_LBL[k]) {
setJobs(v => v.map(x => x.id === id ? bitar({ ...x, paso:n - 1, hist:(x.hist||[]).slice(0, n) }, { t:'Deshecho: ' + d.t, por:'vos', tono:'vos' }) : x));
buzz('impactOccurred · light');
return;
}
if (n >= pasosDe(cfg).length - 1) { setSheet(j); buzz('impactOccurred · medium'); return; }
if (EST_LBL[k] && k !== 'AGENDADO') { accionDe(j, k); return; }
setJobs(v => v.map(x => x.id === id ? bitar({ ...x, paso:n, hist:marcar(x, n, 'vos') }, { t:d.t, por:'vos', tono:'vos' }) : x));
buzz('selectionChanged');
};
const guardar = () => {
const dePrecio = precioDe(cfg, form.svc);
const monto = dePrecio != null ? dePrecio : (parseInt(String(form.monto).replace(/\D/g, ''), 10) || 0);
const id = String(1043 + jobs.length - JOBS.length);
const pres = form.tipo === 'Presupuesto';
const nom = form.cli.trim();
/* Si el cliente no estaba en la agenda, Mate lo da de alta con lo que
juntó — igual que Mia cuando entra alguien nuevo por WhatsApp. */
if (nom && !clientes.some(c => c.n === nom)) {
/* Sin teléfono real la ficha dice "sin teléfono"; poner el placeholder
como dato era mostrar un número falso. */
setClientes(v => [{ n:nom, tel:form.tel || '', dir:form.donde || '', notas:'', v:0, ult:'—', total:0, tag:'Nuevo' }, ...v]);
}
setJobs(v => [{ bit:[{ h:hora(), t:pres ? 'Presupuesto creado con Mate' : 'Trabajo creado con Mate', d:`${form.svc.trim()} · ${money(monto)}`, por:'vos', tono:'alta' }], id, cli:nom, svc:form.svc.trim(), hora:pres?'—':(form.hora || '—'), dia:pres?'PRESUPUESTO':(form.dia || 'HOY'), monto,
tsm:'CREADO', paso:0, enviado:false, hist:['vos'], emitido:'3 SEP',
extra:pres?'Sin enviar':'Mia le confirma', tel:form.tel || '', donde:form.donde || 'En tu local' }, ...v]);
setForm({ cli:'', svc:'', monto:'', tipo:'Confirmado', dia:'HOY' });
setMatePaso(0);
setStack(pres ? [{ type:'doc', id, tipo:'presupuesto' }] : v => v.slice(0, -1));
if (pres) setTab('trabajos');
buzz('notificationOccurred · success', pres ? 'Presupuesto armado, falta enviarlo' : `Turno cargado · Mia le confirma a ${nom.split(' ')[0]}`);
};
/* Una acción del TSM mueve el estado y dispara el WhatsApp al cliente. */
/* Relevamiento: la visita terminó pero el trabajo no. Cierra el evento y
abre el presupuesto — el estado que al TSM le falta. */
const relevar = tipo => {
const j = accSheet;
/* El ticket NO se cierra: la visita terminó, el trabajo no. Queda en
RELEVADO, fuera de la lista de cobrados y fuera de CIERRE. */
setJobs(v => v.map(x => x.id === j.id ? { ...x, tsm:'RELEVADO', paso:3, hist:marcar(x, 3, 'vos'), extra:'Relevado · falta presupuestar' } : x));
setAccSheet(null);
const f = { cli:j.cli, svc:j.svc, monto:'', tipo:'Presupuesto', dia:'HOY', tel:j.tel, donde:j.donde };
setForm(f);
setMatePaso(primerPaso(pregsDe(cfg, 'Presupuesto', f), f));
setRevisita(tipo === 'A_PRESUPUESTAR');
setStack([{ type:'nuevo' }]);
buzz('notificationOccurred · success', 'Visita cerrada · ahora el presupuesto');
};
const accionDe = (j, est) => {
const mal = est === 'CANCELADO' || est === 'AUSENTE';
/* Si el estado vive en la escalera, se tilda también ahí: mover el TSM y
dejar el check sin marcar era la otra mitad del mismo choque. */
/* El peldaño es el del estado, y nada más. Usar esCobrado acá promovía
FINALIZADO al último peldaño —COBRADO— y daba por cobrada plata que
nadie cobró: la escalera separa "trabajo hecho" de "plata adentro". */
const p = pasosDe(cfg), n = p.indexOf(est);
const limpiaEspera = est === 'CONFIRMADO' ? { esperaCli:false } : null;
setJobs(v => v.map(x => x.id === j.id ? bitar({ ...x, tsm:est,
paso:n >= 0 ? Math.max(x.paso, n) : x.paso,
hist:n >= 0 ? marcar(x, n, 'vos') : x.hist,
...(limpiaEspera || {}), extra:EST_LBL[est] }, { t:EST_LBL[est], d:`Mia le avisó a ${j.cli.split(' ')[0]}`, por:'vos', tono:mal ? 'mal' : est === 'DEMORADO' ? 'cambio' : 'vos', tipo:est === 'DEMORADO' ? 'demora' : est === 'CANCELADO' ? 'cancela' : null }) : x));
setAccSheet(null);
buzz(mal ? 'notificationOccurred · warning' : 'notificationOccurred · success', `${EST_LBL[est]} · Mia le avisó a ${j.cli.split(' ')[0]}`);
};
const accion = est => accionDe(accSheet, est);
const guardarCli = () => {
setClientes(v => [{ n:formCli.n.trim(), tel:formCli.tel.trim(), dir:formCli.dir.trim(), notas:formCli.notas.trim(), v:0, ult:'—', total:0, tag:'Nuevo' }, ...v]);
setFormCli({ n:'', tel:'', dir:'', notas:'' });
setQ('');
setStack(v => v.slice(0, -1));
buzz('notificationOccurred · success', `${formCli.n.trim()} quedó en tu agenda`);
};
const enviar = id => {
/* Enviar tilda el paso de Mia: es de los que pasan, no de los que tocás. */
setJobs(v => v.map(x => { if (x.id !== id) return x;
const p = pasosDe(cfg), n = p.indexOf('ENVIADO'), h = [...(x.hist || [])];
if (n >= 0) { if (!h[n-1]) h[n-1] = 'vos'; h[n] = 'mia'; }
return bitar({ ...x, enviado:true, extra:'Enviado hoy', hist:h, paso:Math.max(x.paso, n) }, { t:'Presupuesto enviado', d:`Mia se lo mandó a ${x.cli.split(' ')[0]}`, por:'mia', tono:'mia' }); }));
buzz('notificationOccurred · success', 'Presupuesto enviado por WhatsApp');
};
/* chrome + MainButton por pantalla. La pila guarda IDENTIFICADORES, no copias
del trabajo: el detalle siempre lee el estado vivo. */
const nuevoBtn = { label:'Cargar un trabajo', on:() => { setForm({ cli:'', svc:'', monto:'', tipo:'Confirmado', dia:'HOY' }); setMatePaso(0); push({ type:'nuevo' }); } };
let title = 'Mi.Asistente', sub = 'jueves 3 de septiembre', body, main = null;
if (!top) {
if (tab === 'hoy') { body = push({ type:'job', id:j.id })} jobs={visibles} cfg={cfg} visto={visto} onPaso={onPaso} verMate={() => push({ type:'mate' })} onAlerta={a => {
if (a.acc === 'visto') { setVisto(v => [...v, a.id]); buzz('impactOccurred · light'); }
else if (a.acc === 'pasar') { setNuevoTurno({ dia:'MAÑANA', hora:'15:00', motivo:'cliente' }); push({ type:'pasar', id:a.job }); buzz('impactOccurred · medium'); }
else if (a.acc === 'enviar') { push({ type:'doc', id:a.job, tipo:'presupuesto' }); buzz('impactOccurred · medium'); }
}} />; main = nuevoBtn; }
if (tab === 'trabajos') {
const turnos = visibles.filter(j => conHora(j) && !esCierre(j.tsm));
const pres = visibles.filter(j => !conHora(j) && !esCierre(j.tsm));
title = 'Agenda';
const segAct = conPres ? seg : 'Turnos';
sub = segAct === 'Presupuestos' ? `${pres.length} esperando respuesta` : `${turnos.length} turnos por delante`;
body = push({ type:'job', id:j.id })} conPresupuesto={conPres} seg={segAct} setSeg={s => { setSeg(s); buzz('selectionChanged'); }} rango={rango} setRango={r => { setRango(r); buzz('selectionChanged'); }} off={agOff} setOff={setAgOff} />;
main = segAct === 'Presupuestos'
? { label:'Armar un presupuesto', on:() => { setForm({ cli:'', svc:'', monto:'', tipo:'Presupuesto', dia:'HOY' }); setMatePaso(0); push({ type:'nuevo' }); } }
: nuevoBtn;
}
if (tab === 'clientes') { title = 'Clientes'; sub = `${clientes.length} en la agenda`; body = push({ type:'cli', n:c.n })} q={q} setQ={setQ} clientes={clientes} jobs={visibles} nuevo={n => { setFormCli({ n:n.trim(), tel:'', dir:'', notas:'' }); push({ type:'nuevoCli' }); }} />; main = { label:'Cargar un cliente', on:() => { setFormCli({ n:'', tel:'', dir:'', notas:'' }); push({ type:'nuevoCli' }); } }; }
if (tab === 'negocio') { title = 'Negocio'; sub = pend.length ? `${pend.length} ${pend.length === 1 ? 'cambio sin aplicar' : 'cambios sin aplicar'}` : 'septiembre 2026'; body = push({ type:'cfg', k:c.k })} destacado={coach !== null ? (pasos[coach]||{}).k : null} cfg={cfg} cards={cards} pend={pend} conPresupuesto={conPres} resumen={resumen} jobs={visibles} verDocs={() => push({ type:'docs' })} reVerGuia={() => { setCoach(0); buzz('impactOccurred · light'); }} />;
main = pend.length
? { label:`Aplicar ${pend.length} ${pend.length === 1 ? 'cambio' : 'cambios'} en Mia`, on:() => { setCfgSheet(true); buzz('impactOccurred · medium'); } }
: { label:'Mia está al día con tu configuración', on:() => buzz('sin cambios pendientes'), tone:'off' };
}
} else if (top.type === 'job') {
const job = jobs.find(j => j.id === top.id);
const ultP = pasosDe(cfg).length - 1;
const cobrado = !!(job.hist || [])[ultP];
const hecho = esCierre(job.tsm) && job.tsm !== 'CANCELADO';
const done = job.tsm === 'CANCELADO' || cobrado;
const pres = job.dia === 'PRESUPUESTO';
title = job.svc; sub = `#${job.id} · ${job.cli}`;
body = push(t === 'items' ? { type:'items', id:job.id } : { type:'doc', id:job.id, tipo:t })} onNotas={() => push({ type:'notas', id:job.id })} onAcc={() => setAccSheet(job)} />;
/* La acción principal sale del estado, no de una cadena de ifs inventada:
un presupuesto sin enviar se manda, uno enviado se recuerda, y un turno
vivo abre la hoja con las acciones REALES de su patrón. */
main = hecho && !cobrado
? { label:'Cobrar ' + money(job.monto), on:() => { setSheet(job); buzz('impactOccurred · medium'); } }
: done
? (job.tsm === 'CANCELADO'
/* Un trabajo cancelado no se vuelve a cotizar: se vuelve a agendar.
El presupuesto, si lo había, sigue siendo válido. */
? { label:'Volver a agendar con ' + job.cli.split(' ')[0], on:() => { const f = { cli:job.cli, svc:job.svc, monto:String(job.monto || ''), tipo:'Confirmado', dia:'HOY', tel:job.tel, donde:job.donde }; setForm(f); setMatePaso(primerPaso(pregsDe(cfg, f.tipo, f), f)); push({ type:'nuevo' }); } }
: { label:'Ver el recibo', on:() => push({ type:'doc', id:job.id, tipo:'recibo' }) })
: pres
? (job.enviado
? { label:'Insistirle a ' + job.cli.split(' ')[0], on:() => buzz('notificationOccurred · success') }
: { label:'Mandar el presupuesto', on:() => enviar(job.id) })
/* El botón dice lo que hace: cada opción de la hoja manda un WhatsApp.
"¿Qué pasó con este trabajo?" sonaba a encuesta. */
: { label:`Avisarle algo a ${job.cli.split(' ')[0]}`, on:() => { setAccSheet(job); buzz('impactOccurred · medium'); } };
} else if (top.type === 'cli') {
const cli = clientes.find(c => c.n === top.n);
const r = clienteResumen(cli, visibles);
title = cli.n; sub = r.visitas ? `${r.visitas} ${r.visitas === 1 ? 'visita' : 'visitas'}` : 'sin visitas todavía';
body = push({ type:'job', id:j.id })} verHist={() => push({ type:'hist', n:cli.n })} onMapa={() => buzz('openLink')} />;
main = { label:'Cargarle un trabajo', on:() => { const f = { cli:cli.n, svc:'', monto:'', dia:'HOY', tipo:'Confirmado', tel:cli.tel, donde:cli.dir }; setForm(f); setMatePaso(primerPaso(pregsDe(cfg, f.tipo, f), f)); push({ type:'nuevo' }); } };
} else if (top.type === 'hist') {
const cli = clientes.find(c => c.n === top.n);
const r = clienteResumen(cli, visibles);
title = 'Historial'; sub = `${cli.n} · ${money(r.facturado)} en total`;
body = real ? push({ type:'doc', id, tipo }) : buzz('abre el ' + tipo + ' #' + id)} />;
main = { label:`Cargarle un trabajo`, on:() => { const f = { cli:cli.n, svc:'', monto:'', dia:'HOY', tipo:'Confirmado', tel:cli.tel, donde:cli.dir }; setForm(f); setMatePaso(primerPaso(pregsDe(cfg, f.tipo, f), f)); push({ type:'nuevo' }); } };
} else if (top.type === 'cfg') {
const d = draft || cfg;
const sinGuardar = draft && JSON.stringify(draft) !== JSON.stringify(cfg);
title = top.k; sub = sinGuardar ? 'sin guardar' : cfgResumen(d)[top.k];
body = setDraft(x => fn(x || cfg))} />;
main = { label:sinGuardar ? 'Guardar' : 'Listo', tone:sinGuardar ? 'primary' : 'off', cierra:true, on:() => {
if (sinGuardar) { setCfg({ ...draft, tocado:draft.tocado.includes(top.k) ? draft.tocado : [...draft.tocado, top.k] });
setPend(v => v.includes(top.k) ? v : [...v, top.k]); buzz('notificationOccurred · success', 'Guardado · falta aplicarlo en Mia'); }
setDraft(null); pop();
} };
} else if (top.type === 'doc') {
const job = jobs.find(j => j.id === top.id);
const recibo = top.tipo === 'recibo';
title = recibo ? 'Recibo' : 'Presupuesto';
sub = `#${job.id} · ${job.cli}`;
body = push({ type:'items', id:job.id }) : null} />;
main = recibo
? { label:'Mandárselo otra vez', on:() => buzz('notificationOccurred · success', 'Recibo reenviado') }
: job.enviado
? { label:'Insistirle a ' + job.cli.split(' ')[0], on:() => buzz('notificationOccurred · success', `Mia le escribió a ${job.cli.split(' ')[0]}`) }
: { label:'Mandar el presupuesto', on:() => enviar(job.id) };
} else if (top.type === 'notas') {
const job = jobs.find(j => j.id === top.id);
const n = (job.notas || []).length;
title = 'Anotaciones'; sub = `#${job.id} · ${n ? n + (n === 1 ? ' nota' : ' notas') : 'sin notas'}`;
body = setJobs(v => v.map(x => x.id === job.id ? { ...x, notas:[...(x.notas||[]), { t, cuando:'HOY · AHORA' }] } : x))}
onFoto={() => { setJobs(v => v.map(x => x.id === job.id ? { ...x, notas:[...(x.notas||[]), { t:'Foto del lugar', foto:true, tono:(x.notas||[]).length % 3, cuando:'HOY · AHORA' }] } : x)); buzz('notificationOccurred · success', 'Foto guardada en el trabajo'); }} />;
main = { label:'Listo', cierra:true, on:() => { pop(); buzz('notificationOccurred · success'); } };
} else if (top.type === 'pasar') {
const job = jobs.find(j => j.id === top.id);
title = `Reagendar ${(VOZ[cfg.patron] || VOZ.C).ev}`; sub = `#${job.id} · ${job.cli}`;
body = ;
const motR = MOTIVOS.find(x => x.k === nuevoTurno.motivo) || MOTIVOS[0];
const cuandoR = `${nuevoTurno.dia === 'SAB' ? 'el sábado' : nuevoTurno.dia === 'HOY' ? 'hoy' : 'mañana'} ${nuevoTurno.hora}`;
main = { label:motR.mantiene ? `Vuelvo ${cuandoR}` : `Propónele ${cuandoR}`, on:() => {
/* La escalera vuelve a "sin confirmar" porque el turno nuevo hay que
confirmarlo de nuevo — pero la bitácora conserva que ya había estado
confirmado y en camino. Ese ida y vuelta es el dato que antes se
perdía y que el reporte necesita. */
const mot = MOTIVOS.find(x => x.k === nuevoTurno.motivo) || MOTIVOS[0];
setJobs(v => v.map(x => x.id === job.id ? bitar({ ...x, dia:nuevoTurno.dia, hora:nuevoTurno.hora, tsm:'CREADO', ...trasReagenda(x, pasosDe(cfg), mot.k), extra:mot.mantiene ? mot.t : 'Reprogramado · sin confirmar' },
{ t:'Reagendado', d:`${mot.t} · de ${x.dia} ${x.hora} a ${nuevoTurno.dia === 'SAB' ? 'sábado' : nuevoTurno.dia === 'HOY' ? 'hoy' : 'mañana'} ${nuevoTurno.hora}`, por:'vos', tono:'cambio', tipo:'reagenda' }) : x));
setVisto(v => v.includes('a1') ? v : [...v, 'a1']);
pop(); buzz('notificationOccurred · success', `Mia le propone ${nuevoTurno.hora} a ${job.cli.split(' ')[0]}`);
} };
} else if (top.type === 'mate') {
title = 'Mate'; sub = 'lo que te avisa por Telegram';
body = ;
main = { label:'Listo', cierra:true, on:() => pop() };
} else if (top.type === 'docs') {
title = 'Documentos'; sub = 'presupuestos y recibos';
body = { setDocRango(r); buzz('selectionChanged'); }} off={docOff} setOff={setDocOff} filtro={docFiltro} setFiltro={f => { setDocFiltro(f); buzz('selectionChanged'); }} abrir={(j,t) => push({ type:'doc', id:j.id, tipo:t })} />;
main = conPres
? { label:'Armar un presupuesto', on:() => { setForm({ cli:'', svc:'', monto:'', tipo:'Presupuesto', dia:'HOY' }); setMatePaso(0); push({ type:'nuevo' }); } }
: null;
} else if (top.type === 'items') {
const job = jobs.find(j => j.id === top.id);
const its = job.items || [];
title = 'Ítems del presupuesto'; sub = `${its.length} · ${money(totalItems(its))}`;
body = setJobs(v => v.map(x => x.id === job.id ? { ...x, items:n, monto:totalItems(n) } : x))}
ticket={job.ticket} setTicket={t => setJobs(v => v.map(x => x.id === job.id ? { ...x, ticket:t } : x))} />;
main = { label:'Listo', cierra:true, on:() => { pop(); buzz('notificationOccurred · success'); } };
} else if (top.type === 'nuevoCli') {
const listo = formCli.n.trim() && formCli.tel.trim();
title = 'Nuevo cliente'; sub = formCli.n.trim() || 'sin nombre todavía';
body = ;
main = { label:listo ? 'Guardar el cliente' : 'Completá los dos campos', on:() => listo ? guardarCli() : buzz('notificationOccurred · error', 'Faltan el nombre y el teléfono'), tone:listo ? 'primary' : 'off' };
} else {
const pregs = pregsDe(cfg, form.tipo, form);
const fin = matePaso >= pregs.length;
title = form.tipo === 'Presupuesto' ? 'Nuevo presupuesto' : 'Nuevo trabajo';
sub = fin ? 'listo para guardar' : `con Mate · ${matePaso + 1} de ${pregs.length}`;
body = {
/* Al elegir un cliente de la agenda se heredan su teléfono y su
dirección, así que el paso siguiente se RECALCULA sobre el formulario
nuevo: avanzar de a uno volvía a preguntar "¿dónde es?" a un cliente
que ya tenía dirección cargada. */
const f2 = { ...form, [k]:v, ...(p ? { monto:String(p) } : {}), ...(c ? { tel:c.tel, donde:c.dir || form.donde } : {}) };
setForm(f2);
setMatePaso(primerPaso(pregsDe(cfg, f2.tipo, f2), f2));
buzz('selectionChanged');
}} />;
main = fin
? { label:form.tipo === 'Presupuesto' ? 'Armar el presupuesto' : 'Guardar el trabajo', on:guardar }
: { label:'Contestá lo que te pregunta Mate', on:() => buzz('notificationOccurred · error', 'Contestale a Mate para seguir'), tone:'off' };
}
if (esp && !top) {
title = 'Mi.Asistente'; sub = 'configuración terminada';
body = { setEsp(false); setTab('hoy'); buzz('impactOccurred · light'); }} />;
main = { label:'Ver el panel mientras espero', on:() => { setEsp(false); setTab('hoy'); buzz('impactOccurred · light'); } };
}
/* Durante el onboarding el MainButton ES el "Siguiente" del tour: una sola
acción principal por pantalla, también mientras se enseña. */
if (coach !== null) {
const ultimo = coach >= pasos.length - 1;
main = { label: ultimo ? 'Listo ✓' : 'Siguiente →', on:() => {
if (ultimo) { setCoach(null); buzz('notificationOccurred · success'); }
else { setCoach(coach + 1); buzz('impactOccurred · light'); }
} };
}
/* IOSDevice dibuja su status bar en position:absolute (no ocupa lugar en el
flujo) porque espera que la reserven el title/IOSNavBar, que no usamos.
AndroidDevice en cambio la pone en flujo. Reservamos los 62 px acá. */
return (