/* Acciones del ticket · Pieza 3a
Las acciones NO se inventan por pantalla: salen de la tabla canónica de
tsm-config.js — TSM_ACCIONES[patrón][estado] → [[callback, label], …].
Cada patrón tiene su propia máquina, así que la misma pantalla ofrece
distinto según el rubro. Acá está copiada verbatim.
HALLAZGO: no existe TSM_REPROGRAMAR en ninguno de los 7 patrones. Los
mensajes de CANCELADO y AUSENTE dicen "te va a contactar para reprogramar",
o sea que pasar un turno hoy se resuelve por fuera del sistema y el ticket
queda cancelado. Por eso la alerta "Paula pidió pasar el turno" no tenía
dónde caer. Se propone abajo como acción nueva. */
const TSM_ACCIONES = {
A:{ CREADO:[['CONFIRMADO','Confirmar'],['CANCELADO','Cancelar']],
CONFIRMADO:[['EN_CAMINO','En camino'],['CANCELADO','Cancelar']],
EN_CAMINO:[['FINALIZADO','Finalizado'],['DEMORADO','Me demoré'],['AUSENTE','No estaba']],
DEMORADO:[['EN_CAMINO','Estoy yendo'],['FINALIZADO','Finalizado']] },
B:{ CREADO:[['CONFIRMADO','Confirmar'],['CANCELADO','Cancelar']],
CONFIRMADO:[['FINALIZADO','Finalizado'],['DEMORADO','Demorado'],['AUSENTE','No vino'],['CANCELADO','Cancelar']],
DEMORADO:[['FINALIZADO','Finalizado'],['AUSENTE','No vino']] },
C:{ CREADO:[['CONFIRMADO','Confirmar'],['CANCELADO','Cancelar']],
CONFIRMADO:[['EN_CAMINO','En camino'],['CANCELADO','Cancelar']],
EN_CAMINO:[['FINALIZADO','Finalizado'],['DEMORADO','Me demoré'],['AUSENTE','No estaba']],
DEMORADO:[['EN_CAMINO','Estoy yendo'],['FINALIZADO','Finalizado']] },
D:{ CREADO:[['CONFIRMADO','Confirmar'],['CANCELADO','Cancelar']],
CONFIRMADO:[['EN_PREPARACION','En preparación'],['CANCELADO','Cancelar']],
EN_PREPARACION:[['EN_CAMINO','En camino'],['CANCELADO','Cancelar']],
EN_CAMINO:[['ENTREGADO','Entregado'],['DEMORADO','Demorado'],['CANCELADO','Cancelar']],
DEMORADO:[['EN_CAMINO','Estoy yendo'],['ENTREGADO','Entregado']] },
E:{ CREADO:[['CONFIRMADO','Confirmar'],['CANCELADO','Cancelar']],
CONFIRMADO:[['EN_CAMINO','En camino'],['CANCELADO','Cancelar']],
EN_CAMINO:[['EN_CURSO','En curso'],['CANCELADO','Cancelar']],
EN_CURSO:[['FINALIZADO','Finalizado'],['CANCELADO','Cancelar']] },
F:{ CREADO:[['CONFIRMADO','Confirmar'],['CANCELADO','Cancelar']],
CONFIRMADO:[['FINALIZADO','Finalizado'],['DEMORADO','Demorado'],['AUSENTE','No vino'],['CANCELADO','Cancelar']],
DEMORADO:[['FINALIZADO','Finalizado'],['AUSENTE','No vino']] },
G:{ CREADO:[['RECIBIDO','Recibido'],['CANCELADO','Cancelar']],
RECIBIDO:[['EN_REPARACION','En reparación'],['CANCELADO','Cancelar']],
EN_REPARACION:[['LISTO_PARA_RETIRAR','Listo p/ retirar'],['CANCELADO','Cancelar']],
LISTO_PARA_RETIRAR:[['RETIRADO','Retirado'],['CANCELADO','Cancelar']] },
};
/* Cada rubro le dice distinto a lo mismo. Un plomero reagenda una VISITA, una
peluquera reagenda un TURNO, un taller no reagenda nada: se retira. Usar
"turno" para los siete es hablarle en un idioma que no es el suyo. */
const VOZ = {
A:{ ev:'la visita', evc:'Visita', ir:true },
B:{ ev:'el turno', evc:'Turno', ir:false },
C:{ ev:'la visita', evc:'Visita', ir:true },
D:{ ev:'la entrega',evc:'Entrega',ir:true },
E:{ ev:'el evento', evc:'Evento', ir:true },
F:{ ev:'la consulta',evc:'Consulta',ir:false },
G:{ ev:'la entrada',evc:'Entrada',ir:false },
};
/* Acciones que el TSM NO tiene y el trabajo real necesita. Van marcadas para
que Dev sepa que hay que agregarlas a tsm-config.js, no son un olvido:
REAGENDAR — mover el evento sin cancelar el ticket.
RELEVADO — fui, vi, falta presupuestar. El TSM solo permite FINALIZADO
o CANCELADO: no existe "la visita terminó pero el trabajo no".
A_PRESUPUESTAR — relevado + coordinar la vuelta, en un paso. */
const PROPUESTAS = {
REAGENDAR: { lbl:v => `Reagendar ${v.ev}`, wa:v => `Te propongo pasar ${v.ev} a otro horario. ¿Te sirve?`, tono:'v' },
RELEVADO: { lbl:() => 'Fui, falta presupuestar', wa:() => 'Ya vi lo que hay que hacer. Te paso el presupuesto en un rato.', tono:'a' },
A_PRESUPUESTAR: { lbl:v => `Presupuestar y coordinar otra ${v.evc.toLowerCase()}`, wa:v => `Te paso el presupuesto y coordinamos ${v.ev} para hacerlo.`, tono:'a' },
};
/* ¿Este toque le habla al cliente? No alcanza mirar el paso DESTINO: un atajo
a "Llegué y arranqué" salta desde el paso actual y CRUZA "En camino", que
sí manda WhatsApp. Hay que clasificar por todos los peldaños que el salto
atraviesa. Las tres superficies llaman a esta función para que no divergan. */
function saltoHabla(pasos, desde, hasta) {
return pasos.slice(desde + 1, hasta + 1).some(k => !!MSG_WA[k] && k !== 'AGENDADO');
}
/* ── confirmación de acciones que le hablan al cliente ────────
Todo lo que dispara un WhatsApp real es IRREVERSIBLE: el mensaje ya salió.
Un toque accidental en "Llegué y arranqué" le avisa al cliente que estás en
su casa cuando no estás. Estos botones piden dos toques: el primero arma y
muestra qué se va a mandar, el segundo manda. Se desarma solo a los 4 s y
con Escape, así que ignorarlo también cancela.
Los pasos internos —los que no le llegan al cliente— siguen a un toque. */
function useArmar(ms = 4000) {
const [armado, setArmado] = React.useState(null);
const t = React.useRef(null);
React.useEffect(() => {
if (armado == null) return;
t.current = window.setTimeout(() => setArmado(null), ms);
const esc = e => e.key === 'Escape' && setArmado(null);
window.addEventListener('keydown', esc);
return () => { window.clearTimeout(t.current); window.removeEventListener('keydown', esc); };
}, [armado, ms]);
/* pedir(id, fn): primer toque arma, segundo ejecuta. */
return [armado, (id, fn) => { if (armado === id) { setArmado(null); fn(); } else setArmado(id); }, () => setArmado(null)];
}
const EST_LBL = {
CREADO:'Sin confirmar', CONFIRMADO:'Confirmado', EN_CAMINO:'En camino',
EN_PREPARACION:'En preparación', EN_CURSO:'En curso', EN_REPARACION:'En reparación',
RECIBIDO:'Recibido', LISTO_PARA_RETIRAR:'Listo para retirar', DEMORADO:'Demorado',
AUSENTE:'No estaba', RELEVADO:'Relevado · a presupuestar', FINALIZADO:'Finalizado', ENTREGADO:'Entregado',
RETIRADO:'Retirado', CANCELADO:'Cancelado',
};
const EST_TONO = {
CANCELADO:'coral', AUSENTE:'coral', DEMORADO:'amber', CREADO:'amber', RELEVADO:'amber',
FINALIZADO:'green', ENTREGADO:'green', RETIRADO:'green', LISTO_PARA_RETIRAR:'green',
};
/* Evidencia: un paso está hecho si el dato existe, lo haya escrito quien lo
haya escrito. Vivía sólo en el camino de escritura, así que los trabajos
que ya venían con presupuesto cargado y enviado se dibujaban sin tildar,
contradiciendo al documento y al botón de la misma pantalla. */
const evidencia = (j, k) => k === 'PRESUPUESTADO' ? !!(j.items && j.items.length)
: k === 'ENVIADO' ? !!j.enviado
: k === 'APROBADO' ? !!j.enviado && esCierre(j.tsm)
: false;
/* ── bitácora ───────────────────────────────────────────────
La escalera de pasos dice DÓNDE está el trabajo; la bitácora dice CÓMO
llegó. Son cosas distintas y hasta ahora sólo existía la primera: una
reagenda no dejaba rastro, un "en camino" que después se canceló
desaparecía, y el ticket terminaba mintiendo sobre su propia historia.
Es append-only —los eventos no se pisan— y de acá salen las métricas que
hoy no se pueden calcular: cuántas veces se reprograma un turno, cuánto
tarda un presupuesto en aprobarse, qué rubro cancela más. */
let RELOJ = 9 * 60 + 12;
const hora = () => { RELOJ += 7 + Math.floor(Math.random() * 34);
return `${String(Math.floor(RELOJ / 60) % 24).padStart(2,'0')}:${String(RELOJ % 60).padStart(2,'0')}`; };
const anotar = (j, ev) => ({ ...j, bit:[...(j.bit || []), { h:hora(), ...ev }] });
/* Lazy: `T` vive en pieza3-miniapp.jsx, que carga DESPUÉS de este archivo.
Tocarlo en el tope del módulo abortaba el script entero y dejaba sin definir
todo lo declarado más abajo (esCierre, accionesDe…). El resto del archivo ya
usa `T` sólo dentro de funciones; esto se alinea. */
const tonoEv = k => ({ alta:T.v600, mia:T.v600, vos:T.c300, mal:T.coral, ok:T.green, cambio:T.amber }[k]);
function Bitacora({ job, compacto }) {
const b = job.bit || [];
if (!b.length) return null;
return (
);
}
/* Métricas que sólo existen porque hay bitácora. */
const metricasBit = jobs => {
const ev = jobs.flatMap(j => j.bit || []);
return {
reagendas: ev.filter(e => e.tipo === 'reagenda').length,
cancelados: jobs.filter(j => j.tsm === 'CANCELADO').length,
demoras: ev.filter(e => e.tipo === 'demora').length,
movs: ev.length,
};
};
/* Reagendar toca el TURNO, no el trabajo entero. Antes reseteaba la escalera
a cero, así que un presupuesto ya elaborado y enviado se destildaba solo
porque el cliente pidió otro horario. Se limpian los peldaños de la visita
—confirmación, en camino, arranque— y se conserva lo que tiene evidencia
propia: los ítems cargados y el envío siguen siendo ciertos. */
const RUNGS_VISITA = ['CONFIRMADO','EN_CAMINO','COMENZADO','EN_CURSO','EN_REPARACION','EN_PREPARACION','FINALIZADO','ENTREGADO','RETIRADO','REALIZADO','COBRADO'];
/* No es lo mismo reagendar porque el cliente no podía que porque fuiste, viste
lo que hay que hacer y falta presupuestar. En el primer caso la visita NO
pasó y sus peldaños se limpian; en el segundo SÍ pasó —fuiste, relevaste— y
borrarla sería mentir. El motivo decide qué se conserva. */
const MOTIVOS = [
{ k:'relevado', t:'Ya fui · falta presupuestar', d:'La visita cuenta como hecha. Queda el presupuesto y una segunda visita para hacer el trabajo.', mantiene:true },
{ k:'material', t:'Me faltó un material', d:'Volvés a terminarlo. La visita queda registrada.', mantiene:true },
{ k:'cliente', t:'El cliente no podía', d:'La visita no pasó. El turno arranca de cero y Mia le pide que confirme el nuevo.', mantiene:false },
{ k:'vos', t:'No pude ir', d:'La visita no pasó. Mia le avisa y le propone el horario nuevo.', mantiene:false },
];
function trasReagenda(j, pasos, motivo) {
const mot = MOTIVOS.find(x => x.k === motivo) || MOTIVOS[2];
/* Si la visita pasó, se conservan sus peldaños y sólo vuelve a quedar
pendiente el cierre del trabajo; si no pasó, se limpian. En los dos casos
lo que tiene evidencia propia —ítems cargados, presupuesto enviado— queda
como está: no depende del turno. */
const CIERRA = ['FINALIZADO','ENTREGADO','RETIRADO','REALIZADO','COBRADO'];
const h = pasos.map((k,i) => {
if (i === 0) return (j.hist || [])[0] || 'mia';
if (CIERRA.includes(k)) return null;
if (RUNGS_VISITA.includes(k)) return mot.mantiene ? ((j.hist || [])[i] || null) : null;
return evidencia(j, k) ? ((j.hist || [])[i] || 'vos') : null;
});
let p = 0; while (h[p + 1]) p++;
return { hist:h, paso:p, esperaCli:!mot.mantiene, motivo:mot.k };
}
const CIERRE = ['FINALIZADO','ENTREGADO','RETIRADO','CANCELADO'];
const esCierre = e => CIERRE.includes(e);
/* Cobrado es una lista EXPLÍCITA, no "todo lo cerrado menos cancelado": esa
exclusión absorbe en silencio cualquier estado terminal futuro que no sea
plata. RELEVADO —fui, falta presupuestar— no cierra el ticket ni entra acá:
el trabajo sigue abierto, esperando el presupuesto. */
const COBRADOS = ['FINALIZADO','ENTREGADO','RETIRADO'];
const esCobrado = e => COBRADOS.includes(e);
/* Lo que Mia le dice al cliente. Se muestra ANTES de tocar, porque el tap
dispara un WhatsApp real y el emprendedor tiene que saber qué se manda. */
const MSG_WA = {
CONFIRMADO:'Te confirmo el turno. ¡Nos vemos!',
EN_CAMINO:'Ya estoy en camino, en breve llego.',
EN_PREPARACION:'Estoy preparando tu pedido, te aviso cuando salga.',
EN_CURSO:'¡Ya arrancamos!',
EN_REPARACION:'Tu equipo entró en reparación, te aviso con novedades.',
RECIBIDO:'Recibimos tu equipo. Te aviso con novedades.',
LISTO_PARA_RETIRAR:'¡Tu equipo está listo para retirar!',
DEMORADO:'Voy a llegar un poco más tarde de lo previsto.',
FINALIZADO:'¡Listo! Quedó terminado. Gracias por confiar.',
ENTREGADO:'Tu pedido fue entregado. ¡Gracias!',
RETIRADO:'¡Equipo retirado! Gracias por confiar.',
AUSENTE:'Pasé pero no encontré a nadie. Te contacto para reprogramar.',
CANCELADO:'Tuve que cancelar. ¿Querés que busquemos otra fecha, o preferís dejarlo? Contame así lo anoto.',
REPROGRAMADO:'Te paso el turno para el nuevo horario. ¿Te sirve?',
};
const accionesDe = (patron, est) => (TSM_ACCIONES[patron] || TSM_ACCIONES.C)[est] || [];
/* ── hoja de acciones ─────────────────────────────────────── */
function SheetAcc({ job, patron, onClose, onAccion, onPasar, onRelevar }) {
/* Cancelar no es un tap: casi siempre hay una fecha nueva atrás. Antes de
cerrar el ticket Mate pregunta si se puede reagendar, y si igual se
cancela, Mia le pide el motivo al cliente — sin eso el trabajo se pierde
sin dato y el reporte no puede decir por qué se cae. */
const [confirmaCancel, setConfirmaCancel] = React.useState(false);
const acc = accionesDe(patron, job.tsm);
const v = VOZ[patron] || VOZ.C;
const abierto = !esCierre(job.tsm);
const puedeReagendar = abierto && job.hora && job.hora !== '—';
/* Relevar y presupuestar salieron de acá: la escalera de estados ya tiene
"Elaborar el presupuesto" con su ABRIR →, y tenerlo en dos lugares era la
duplicación que veníamos limpiando. Queda sólo reagendar, que no vive
en ningún otro lado. */
const acc2 = job.tsm === 'RELEVADO' ? [['FINALIZADO','Finalizado'],['CANCELADO','Cancelar']] : acc;
const prop = (k, on) => { const p = PROPUESTAS[k], col = p.tono === 'a' ? T.amber : T.v600, bg = p.tono === 'a' ? T.aSoft : T.vSoft, bd = p.tono === 'a' ? T.aBorder : T.vBorder;
return (
);
};
return (
Cada opción le manda un mensaje distinto a {job.cli.split(' ')[0]}. El texto es el que ves abajo.
{/* flexShrink:0 — el contenedor es flex column con alto máximo, así que
sin esto los botones se aplastan a su minHeight y el texto de dos
líneas se desborda. Con esto scrollea, que es lo correcto. */}
{confirmaCancel ? (
Antes de cancelar: ¿se puede pasar a otra fecha? Casi siempre el cliente prefiere reagendar.
{mot.mantiene ? <>Elegí cuándo volvés. Mia le avisa a {job.cli.split(' ')[0]} la fecha nueva. : <>Elegí cuándo pasás {v.ev}. Mia se lo propone a {job.cli.split(' ')[0]} y espera que confirme.}
{mot.mantiene
? <>Mia le avisa que volvés {sel.dia === 'SAB' ? 'el sábado' : sel.dia === 'HOY' ? 'hoy' : 'mañana'} a las {sel.hora}. La visita de hoy queda registrada.
: <>Mia le propone {sel.dia === 'SAB' ? 'el sábado' : sel.dia === 'HOY' ? 'hoy' : 'mañana'} a las {sel.hora} y espera que confirme. Si no le sirve, vuelve a preguntarte.}
);
}
/* La miniatura tiene que verse en las DOS superficies: en la web las notas
mostraban sólo el ícono de cámara y no se sabía si había foto cargada.
Acá la foto es un recuadro con su marco y su etiqueta — el prototipo no
tiene imágenes reales, pero el hueco es del tamaño y la forma correctos. */
function Miniatura({ n, size = 56 }) {
const tonos = [['#2E2A44','#4A4270'], ['#2A3A32','#3E5A4A'], ['#3A2E2A','#5A4438']];
const [a,b] = tonos[(n.tono || 0) % 3];
return (
FOTO
);
}
/* ── notas y fotos del trabajo ────────────────────────────────
Para el que va al domicilio: lo que vio, la medida que tomó, la foto del
tablero. Vive en el ticket, no en la cabeza del que fue. */
function Notas({ job, onAdd, onFoto }) {
const [txt, setTxt] = React.useState('');
const notas = job.notas || [];
return (