feat(sync-log): historial de sincronizaciones WhatsApp en sync_wa_log

- Nueva tabla sync_wa_log (total, created, skipped, updated, errores, origen, modo)
- Log guardado en /pacientes/sync-all, /terceros/send y /automation/run
- Ruta GET /pacientes/historial devuelve últimos 100 registros
- UI: tabla de historial con origen, modo, conteos y detalle de errores

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-09 11:13:28 -05:00
co-authored by Claude Sonnet 4.6
parent 1aab14f705
commit b0175a2ca5
6 changed files with 174 additions and 7 deletions
+86
View File
@@ -73,6 +73,21 @@
</div>
</div>
<!-- Historial -->
<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">
<h3 class="font-semibold text-gray-800">
<i class="fas fa-history mr-2 text-gray-400"></i>Historial de sincronizaciones
</h3>
<button onclick="cargarHistorial()" class="text-sm text-blue-600 hover:underline">
<i class="fas fa-refresh mr-1"></i>Actualizar
</button>
</div>
<div id="historialContainer" class="p-4">
<p class="text-sm text-gray-400 text-center py-4">Cargando…</p>
</div>
</div>
<!-- Info sobre la API -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200">
@@ -187,5 +202,76 @@ function renderDetalle(detalle) {
</div>
</details>`;
}
const _origenLabel = { manual: 'Manual', tercero: 'Tercero', automation: 'Automatización' };
const _modoLabel = { insertar: 'Solo nuevos', upsert: 'Upsert' };
async function cargarHistorial() {
const el = document.getElementById('historialContainer');
el.innerHTML = '<p class="text-sm text-gray-400 text-center py-4">Cargando…</p>';
try {
const resp = await fetch('/pacientes/historial');
const rows = await resp.json();
if (!rows.length) {
el.innerHTML = '<p class="text-sm text-gray-400 text-center py-6">Sin registros aún.</p>';
return;
}
el.innerHTML = `
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="text-left text-xs text-gray-500 border-b border-gray-100">
<th class="pb-2 pr-4 font-medium">Fecha</th>
<th class="pb-2 pr-4 font-medium">Origen</th>
<th class="pb-2 pr-4 font-medium">Modo</th>
<th class="pb-2 pr-3 font-medium text-right">Total</th>
<th class="pb-2 pr-3 font-medium text-right text-blue-600">Nuevos</th>
<th class="pb-2 pr-3 font-medium text-right text-gray-400">Omitidos</th>
<th class="pb-2 pr-3 font-medium text-right text-green-600">Actualizados</th>
<th class="pb-2 pr-3 font-medium text-right text-red-500">Errores</th>
<th class="pb-2 font-medium">Usuario</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
${rows.map(r => {
const errDet = r.errores_det ? JSON.parse(r.errores_det) : [];
const fecha = r.created_at.replace('T', ' ').slice(0, 16);
return `
<tr class="hover:bg-gray-50">
<td class="py-2 pr-4 text-gray-500 whitespace-nowrap font-mono text-xs">${fecha}</td>
<td class="py-2 pr-4">
<span class="px-2 py-0.5 rounded-full text-xs font-medium ${
r.origen === 'manual' ? 'bg-blue-50 text-blue-700' :
r.origen === 'tercero' ? 'bg-orange-50 text-orange-700' :
'bg-purple-50 text-purple-700'
}">${_origenLabel[r.origen] || r.origen}</span>
</td>
<td class="py-2 pr-4 text-gray-500 text-xs">${_modoLabel[r.modo] || r.modo}</td>
<td class="py-2 pr-3 text-right font-medium">${r.total}</td>
<td class="py-2 pr-3 text-right text-blue-600 font-medium">${r.created}</td>
<td class="py-2 pr-3 text-right text-gray-400">${r.skipped}</td>
<td class="py-2 pr-3 text-right text-green-600">${r.updated}</td>
<td class="py-2 pr-3 text-right ${r.errores > 0 ? 'text-red-500 font-medium' : 'text-gray-300'}">
${r.errores > 0 && errDet.length ? `
<details>
<summary class="cursor-pointer">${r.errores}</summary>
<div class="absolute z-10 bg-white border border-red-100 rounded-lg shadow-lg p-2 text-xs mt-1 max-w-xs">
${errDet.map(e => `<div class="text-red-600">${e.doc}${e.msg}</div>`).join('')}
</div>
</details>` : r.errores || '—'}
</td>
<td class="py-2 text-gray-400 text-xs">${r.username || '—'}</td>
</tr>`;
}).join('')}
</tbody>
</table>
</div>`;
} catch (e) {
el.innerHTML = `<p class="text-sm text-red-500 text-center py-4">Error: ${e.message}</p>`;
}
}
// Cargar historial al abrir la página
cargarHistorial();
</script>
{% endblock %}