From f5cd5a233f1f2686a8070e3b3b3a01766c5997d5 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 25 Jun 2026 19:50:51 -0500
Subject: [PATCH] Automation: replace confirm() with validation modal before
 sending

Show a modal with full summary (pacientes, recepciones, examenes,
patient list with RDA count) and a warning before the actual API
call. Requires explicit "Confirmar y enviar" click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/templates/automation.html | 122 ++++++++++++++++++++++++++--------
 1 file changed, 94 insertions(+), 28 deletions(-)

diff --git a/app/templates/automation.html b/app/templates/automation.html
index 21018c5..71e5e0e 100644
--- a/app/templates/automation.html
+++ b/app/templates/automation.html
@@ -26,7 +26,7 @@
           class="px-6 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 whitespace-nowrap">
           <i class="fas fa-eye"></i> Vista previa
         </button>
-        <button onclick="runAutomation()"
+        <button onclick="abrirModalConfirmar()"
           id="btn-run"
           class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
           disabled>
@@ -58,7 +58,7 @@
         </div>
       </div>
       <div>
-        <p class="text-xs font-medium text-gray-600 mb-2">Pacientes — haz clic para ver sus recepciones:</p>
+        <p class="text-xs font-medium text-gray-600 mb-2">Pacientes — clic para ver sus recepciones:</p>
         <div id="preview-table" class="border border-gray-100 rounded-lg overflow-hidden text-sm"></div>
       </div>
     </div>
@@ -66,8 +66,6 @@
 
   <!-- Progreso -->
   <div id="progress-section" class="hidden space-y-4">
-
-    <!-- Paso 1 -->
     <div class="bg-white rounded-xl shadow-sm border border-gray-200">
       <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
         <div class="flex items-center gap-3">
@@ -78,8 +76,6 @@
       </div>
       <div id="p1-detalle" class="divide-y divide-gray-100 hidden"></div>
     </div>
-
-    <!-- Paso 2 -->
     <div class="bg-white rounded-xl shadow-sm border border-gray-200">
       <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
         <div class="flex items-center gap-3">
@@ -90,21 +86,81 @@
       </div>
       <div id="p2-detalle" class="divide-y divide-gray-100 hidden"></div>
     </div>
+  </div>
+</div>
 
+<!-- Modal de confirmación -->
+<div id="modal-confirmar" class="fixed inset-0 z-50 hidden">
+  <div class="absolute inset-0 bg-black/50" onclick="cerrarModalConfirmar()"></div>
+  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white rounded-xl shadow-2xl">
+
+    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+      <h3 class="font-semibold text-gray-800 flex items-center gap-2">
+        <i class="fas fa-shield-alt text-blue-500"></i> Validar envío
+      </h3>
+      <button onclick="cerrarModalConfirmar()" class="text-gray-400 hover:text-gray-600">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+
+    <div class="p-6 space-y-4">
+      <p class="text-sm text-gray-600">
+        Se enviará la siguiente información a <strong>TNS (api.tns.co)</strong> para la fecha
+        <strong id="modal-fecha" class="text-blue-600"></strong>:
+      </p>
+
+      <div class="grid grid-cols-3 gap-3">
+        <div class="bg-blue-50 rounded-lg p-3 text-center">
+          <div id="modal-cnt-pac" class="text-2xl font-bold text-blue-600">0</div>
+          <div class="text-xs text-blue-700">Terceros</div>
+          <div class="text-xs text-blue-400">Tercero/Crear</div>
+        </div>
+        <div class="bg-purple-50 rounded-lg p-3 text-center">
+          <div id="modal-cnt-rec" class="text-2xl font-bold text-purple-600">0</div>
+          <div class="text-xs text-purple-700">Recepciones</div>
+          <div class="text-xs text-purple-400">RdaPaciente/Insertar</div>
+        </div>
+        <div class="bg-green-50 rounded-lg p-3 text-center">
+          <div id="modal-cnt-exa" class="text-2xl font-bold text-green-600">0</div>
+          <div class="text-xs text-green-700">Exámenes</div>
+          <div class="text-xs text-green-400">detallePedido</div>
+        </div>
+      </div>
+
+      <div class="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 text-xs text-amber-700 flex items-start gap-2">
+        <i class="fas fa-exclamation-triangle mt-0.5 shrink-0"></i>
+        <span>Esta acción enviará datos reales a TNS. Los registros que ya existan serán actualizados. No se puede deshacer.</span>
+      </div>
+
+      <div class="max-h-40 overflow-y-auto border border-gray-100 rounded-lg" id="modal-lista-pac"></div>
+    </div>
+
+    <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
+      <button onclick="cerrarModalConfirmar()"
+        class="px-5 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200">
+        Cancelar
+      </button>
+      <button onclick="confirmarEnvio()"
+        class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+        <i class="fas fa-paper-plane"></i> Confirmar y enviar
+      </button>
+    </div>
   </div>
 </div>
 
 <script>
+let _previewData = null;
+
 async function previewAutomation() {
   const fecha = document.getElementById('fecha-input').value;
   if (!fecha) { showToast('Selecciona una fecha', 'error'); return; }
 
   const btn = document.getElementById('btn-preview');
   showLoading(btn);
-
   document.getElementById('preview-section').classList.add('hidden');
   document.getElementById('progress-section').classList.add('hidden');
   document.getElementById('btn-run').disabled = true;
+  _previewData = null;
 
   const form = new FormData();
   form.append('fecha', fecha);
@@ -114,11 +170,9 @@ async function previewAutomation() {
     const data = await resp.json();
     hideLoading(btn, '<i class="fas fa-eye"></i> Vista previa');
 
-    if (!data.success) {
-      showToast(data.message || 'Error al consultar', 'error');
-      return;
-    }
+    if (!data.success) { showToast(data.message || 'Error al consultar', 'error'); return; }
 
+    _previewData = data;
     document.getElementById('cnt-pacientes').textContent = data.pacientes;
     document.getElementById('cnt-recepciones').textContent = data.recepciones;
     document.getElementById('cnt-examenes').textContent = data.examenes;
@@ -137,9 +191,8 @@ async function previewAutomation() {
             <span class="text-blue-600 w-24">${r.fecha}</span>
             <span class="text-blue-600 w-20">${r.examenes} examen(es)</span>
             <span class="text-blue-600 flex-1">${r.diag}</span>
-            <span class="text-blue-700 font-medium">$${r.valor.toLocaleString('es-CO')}</span>
+            <span class="text-blue-700 font-medium">$${Number(r.valor).toLocaleString('es-CO')}</span>
           </div>`).join('');
-
         return `
           <div class="divide-y divide-gray-100">
             <div class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 cursor-pointer select-none"
@@ -148,31 +201,48 @@ async function previewAutomation() {
               <span class="text-gray-400 text-xs w-8">${p.tipo}</span>
               <span class="text-gray-500 w-32 font-mono text-xs">${p.doc}</span>
               <span class="text-gray-700 flex-1">${p.nombre}</span>
-              <span class="text-xs ${p.rda.length > 0 ? 'text-blue-600' : 'text-gray-300'}">
-                ${p.rda.length} RDA
-              </span>
+              <span class="text-xs ${p.rda.length > 0 ? 'text-blue-600' : 'text-gray-300'}">${p.rda.length} RDA</span>
             </div>
-            <div id="rda-${i}" class="hidden">${rdaRows || '<div class="px-6 py-2 text-xs text-gray-400 bg-gray-50">Sin recepciones en esta fecha</div>'}</div>
+            <div id="rda-${i}" class="hidden">${rdaRows || '<div class="px-6 py-2 text-xs text-gray-400 bg-gray-50">Sin recepciones</div>'}</div>
           </div>`;
       }).join('');
 
       document.getElementById('btn-run').disabled = false;
       showToast(`${data.pacientes} paciente(s) · ${data.recepciones} recepción(es)`, 'success');
     }
-
     document.getElementById('preview-section').classList.remove('hidden');
-
   } catch (e) {
     hideLoading(btn, '<i class="fas fa-eye"></i> Vista previa');
     showToast('Error de conexión', 'error');
   }
 }
 
-async function runAutomation() {
-  const fecha = document.getElementById('fecha-input').value;
-  if (!fecha) { showToast('Selecciona una fecha', 'error'); return; }
+function abrirModalConfirmar() {
+  if (!_previewData) return;
+  const d = _previewData;
+  document.getElementById('modal-fecha').textContent = d.fecha;
+  document.getElementById('modal-cnt-pac').textContent = d.pacientes;
+  document.getElementById('modal-cnt-rec').textContent = d.recepciones;
+  document.getElementById('modal-cnt-exa').textContent = d.examenes;
 
-  if (!confirm(`¿Enviar a TNS todos los pacientes y RDA del ${fecha}?`)) return;
+  document.getElementById('modal-lista-pac').innerHTML = d.pacientes_preview.map(p => `
+    <div class="flex items-center gap-3 px-3 py-1.5 border-b border-gray-50 text-xs last:border-0">
+      <span class="text-gray-400 w-6">${p.tipo}</span>
+      <span class="font-mono text-gray-500 w-28">${p.doc}</span>
+      <span class="text-gray-700 flex-1 truncate">${p.nombre}</span>
+      <span class="text-blue-500">${p.rda.length} RDA</span>
+    </div>`).join('');
+
+  document.getElementById('modal-confirmar').classList.remove('hidden');
+}
+
+function cerrarModalConfirmar() {
+  document.getElementById('modal-confirmar').classList.add('hidden');
+}
+
+async function confirmarEnvio() {
+  cerrarModalConfirmar();
+  const fecha = document.getElementById('fecha-input').value;
 
   const btn = document.getElementById('btn-run');
   showLoading(btn);
@@ -200,13 +270,11 @@ async function runAutomation() {
     }
 
     const r = data.resultado;
-
     renderBadge('p1-badge', r.paso1_terceros.enviados, r.paso1_terceros.errores);
     renderDetalle('p1-detalle', r.paso1_terceros.detalle.map(d => ({
       col1: d.doc, col2: d.nombre,
       col3: `${d.ok ? '✅' : '❌'} ${d.msg || ''}`, ok: d.ok,
     })));
-
     renderBadge('p2-badge', r.paso2_rda.enviados, r.paso2_rda.errores);
     renderDetalle('p2-detalle', r.paso2_rda.detalle.map(d => ({
       col1: `Fac. ${d.factura}`,
@@ -217,7 +285,6 @@ async function runAutomation() {
     const totalErr = r.paso1_terceros.errores + r.paso2_rda.errores;
     showToast(totalErr === 0 ? 'Envío completado sin errores' : `Completado con ${totalErr} error(es)`,
               totalErr === 0 ? 'success' : 'warning');
-
   } catch (e) {
     hideLoading(btn, '<i class="fas fa-play"></i> Ejecutar envío');
     document.getElementById('btn-preview').disabled = false;
@@ -255,8 +322,7 @@ function renderDetalle(id, items) {
       <span class="text-gray-500 w-28 shrink-0">${i.col1}</span>
       <span class="text-gray-700 flex-1 truncate">${i.col2}</span>
       <span class="text-xs ${i.ok ? 'text-green-600' : 'text-red-600'} shrink-0 max-w-xs truncate">${i.col3}</span>
-    </div>
-  `).join('');
+    </div>`).join('');
   el.classList.remove('hidden');
 }
 </script>