marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar automatizaciones.html

Browse Source
This commit is contained in:
marsalva
2026-02-15 21:37:33 +00:00
parent d2b5788833
commit 675f331f16
1 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
automatizaciones.html
View File

@@ -13,43 +13,43 @@
.progress-bar { transition: width 1s linear; } .progress-bar { transition: width 1s linear; }
</style> </style>
</head> </head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased"> <body class="bg-gray-50 text-gray-800 font-sans antialiased text-left">
<div class="flex h-screen overflow-hidden"> <div class="flex h-screen overflow-hidden text-left">
<div id="sidebar-container" class="h-full shrink-0"></div> <div id="sidebar-container" class="h-full shrink-0"></div>
<div class="flex-1 flex flex-col overflow-hidden relative"> <div class="flex-1 flex flex-col overflow-hidden relative text-left">
<div id="header-container"></div> <div id="header-container"></div>
<main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-8 fade-in"> <main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-8 fade-in text-left">
<div class="flex justify-between items-center mb-8"> <div class="flex justify-between items-center mb-8 text-left">
<div> <div>
<h2 class="text-2xl font-bold text-gray-800">Cola de Asignación Automática</h2> <h2 class="text-2xl font-bold text-gray-800">Cola de Asignación Automática</h2>
<p class="text-sm text-gray-500">Servicios buscando operario vía WhatsApp</p> <p class="text-sm text-gray-500">Servicios buscando operario vía WhatsApp</p>
</div> </div>
<div class="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg flex items-center gap-2 font-bold text-sm"> <div class="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg flex items-center gap-2 font-bold text-sm">
<i data-lucide="refresh-cw" class="w-4 h-4 animate-spin"></i> <i data-lucide="refresh-cw" class="w-4 h-4 animate-spin text-left"></i>
En Vivo En Vivo
</div> </div>
</div> </div>
<div id="automation-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div id="automation-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-left">
<div class="animate-pulse bg-white h-48 rounded-xl border border-gray-200"></div> <div class="animate-pulse bg-white h-48 rounded-xl border border-gray-200 text-left"></div>
</div> </div>
<div class="mt-12"> <div class="mt-12 text-left">
<h3 class="font-bold text-gray-400 uppercase text-xs tracking-widest mb-4 text-left">Automatismos Fallidos (Sin respuesta)</h3> <h3 class="font-bold text-gray-400 uppercase text-xs tracking-widest mb-4 text-left">Automatismos Fallidos (Sin respuesta)</h3>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden text-left">
<table class="w-full text-left border-collapse"> <table class="w-full text-left border-collapse text-left">
<thead> <thead>
<tr class="bg-gray-50 text-[10px] font-black uppercase text-gray-400 border-b"> <tr class="bg-gray-50 text-[10px] font-black uppercase text-gray-400 border-b text-left">
<th class="p-4">Expediente / Cliente</th> <th class="p-4 text-left">Expediente / Cliente</th>
<th class="p-4">Dirección y Contacto</th> <th class="p-4 text-left">Dirección y Contacto</th>
<th class="p-4">Motivo</th> <th class="p-4 text-left">Motivo</th>
<th class="p-4 text-right">Acción</th> <th class="p-4 text-right text-left">Acción</th>
</tr> </tr>
</thead> </thead>
<tbody id="failed-list" class="divide-y divide-gray-50 text-sm"></tbody> <tbody id="failed-list" class="divide-y divide-gray-50 text-sm text-left"></tbody>
</table> </table>
</div> </div>
</div> </div>
@@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<div id="rescueModal" class="fixed inset-0 bg-slate-900/80 hidden z-[100] flex items-center justify-center backdrop-blur-sm p-4 text-left text-left"> <div id="rescueModal" class="fixed inset-0 bg-slate-900/80 hidden z-[100] flex items-center justify-center backdrop-blur-sm p-4 text-left">
<div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-2xl flex flex-col max-h-[90vh] overflow-hidden border border-slate-200 fade-in text-left"> <div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-2xl flex flex-col max-h-[90vh] overflow-hidden border border-slate-200 fade-in text-left">
<div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50 text-left"> <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50 text-left">
<h3 class="font-black text-slate-800 uppercase tracking-tight flex items-center gap-2 text-left"> <h3 class="font-black text-slate-800 uppercase tracking-tight flex items-center gap-2 text-left">
@@ -82,23 +82,25 @@
<div id="resDesc" class="p-4 bg-slate-50 rounded-2xl text-xs font-medium text-slate-600 border border-slate-100 text-left">--</div> <div id="resDesc" class="p-4 bg-slate-50 rounded-2xl text-xs font-medium text-slate-600 border border-slate-100 text-left">--</div>
</div> </div>
<div class="space-y-3 text-left"> <div class="space-y-3 text-left">
<h4 class="text-[10px] font-black text-red-500 uppercase tracking-widest ml-2 text-left">Operarios Disponibles (Llamar para asignar)</h4> <h4 class="text-[10px] font-black text-red-500 uppercase tracking-widest ml-2 text-left">Operarios que no cogieron (Llamar para forzar)</h4>
<div id="resWorkersList" class="space-y-2 text-left"></div> <div id="resWorkersList" class="space-y-2 text-left"></div>
</div> </div>
</div> </div>
<div class="p-4 bg-slate-50 border-t border-slate-100 flex gap-3 text-left"> <div class="p-4 bg-slate-50 border-t border-slate-100 flex gap-3 text-left">
<button onclick="deleteFailedEntry()" class="bg-white border border-slate-200 text-slate-400 p-3 rounded-xl hover:text-red-500 text-left"><i data-lucide="trash-2"></i></button> <button onclick="resetToManual()" class="bg-white border border-slate-200 text-slate-400 p-3 rounded-xl hover:text-amber-500 transition-colors text-left" title="Devolver a Manual">
<i data-lucide="trash-2"></i>
</button>
<button onclick="window.location.href='validar.html'" class="flex-1 bg-slate-900 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest hover:bg-blue-600 transition-all text-left flex justify-center">Asignar Manualmente</button> <button onclick="window.location.href='validar.html'" class="flex-1 bg-slate-900 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest hover:bg-blue-600 transition-all text-left flex justify-center">Asignar Manualmente</button>
</div> </div>
</div> </div>
</div> </div>
<div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Mensaje</span></div> <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3 text-left"><span id="toastMsg">Mensaje</span></div>
<script src="js/layout.js"></script> <script src="js/layout.js"></script>
<script> <script>
let activeIntervals = []; let activeIntervals = [];
let scrapedData = []; // Para almacenar datos localmente let scrapedData = [];
let currentRescueId = null; let currentRescueId = null;
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
@@ -130,8 +132,8 @@
function renderCards(activeServices) { function renderCards(activeServices) {
const container = document.getElementById('automation-list'); const container = document.getElementById('automation-list');
if (activeServices.length === 0) { if (activeServices.length === 0) {
container.innerHTML = `<div class="col-span-full py-12 text-center border-2 border-dashed border-gray-200 rounded-2xl"> container.innerHTML = `<div class="col-span-full py-12 text-center border-2 border-dashed border-gray-200 rounded-2xl text-left">
<i data-lucide="ghost" class="w-12 h-12 text-gray-300 mx-auto mb-3"></i> <i data-lucide="ghost" class="w-12 h-12 text-gray-300 mx-auto mb-3 text-left"></i>
<p class="text-gray-400 font-bold uppercase text-xs">No hay automatismos en curso</p> <p class="text-gray-400 font-bold uppercase text-xs">No hay automatismos en curso</p>
</div>`; </div>`;
lucide.createIcons(); lucide.createIcons();
@@ -142,7 +144,7 @@
const raw = s.raw_data; const raw = s.raw_data;
const cardId = `card-${s.id}`; const cardId = `card-${s.id}`;
return ` return `
<div id="${cardId}" class="bg-white rounded-2xl border-2 border-blue-50 shadow-sm overflow-hidden flex flex-col fade-in"> <div id="${cardId}" class="bg-white rounded-2xl border-2 border-blue-50 shadow-sm overflow-hidden flex flex-col fade-in text-left">
<div class="p-5 border-b border-gray-50 bg-blue-50/30 text-left"> <div class="p-5 border-b border-gray-50 bg-blue-50/30 text-left">
<div class="flex justify-between items-start mb-2 text-left"> <div class="flex justify-between items-start mb-2 text-left">
<span class="text-[10px] font-black bg-blue-600 text-white px-2 py-0.5 rounded uppercase text-left">${s.provider}</span> <span class="text-[10px] font-black bg-blue-600 text-white px-2 py-0.5 rounded uppercase text-left">${s.provider}</span>
@@ -205,7 +207,7 @@
function renderFailedTable(failedServices) { function renderFailedTable(failedServices) {
const tbody = document.getElementById('failed-list'); const tbody = document.getElementById('failed-list');
if (failedServices.length === 0) { if (failedServices.length === 0) {
tbody.innerHTML = `<tr><td colspan="4" class="p-8 text-center text-gray-400 italic">No hay fallidos ahora.</td></tr>`; tbody.innerHTML = `<tr><td colspan="4" class="p-8 text-center text-gray-400 italic text-left">No hay fallidos ahora.</td></tr>`;
return; return;
} }
tbody.innerHTML = failedServices.map(s => { tbody.innerHTML = failedServices.map(s => {
@@ -251,7 +253,7 @@
const workers = svc.attempted_workers_data || []; const workers = svc.attempted_workers_data || [];
if (workers.length === 0) { if (workers.length === 0) {
list.innerHTML = `<p class="text-[10px] text-slate-400 italic p-4 text-center border-2 border-dashed rounded-2xl">Sin registros de intentos WhatsApp.</p>`; list.innerHTML = `<p class="text-[10px] text-slate-400 italic p-4 text-center border-2 border-dashed rounded-2xl text-left">Sin registros de intentos WhatsApp.</p>`;
} else { } else {
list.innerHTML = workers.map(w => ` list.innerHTML = workers.map(w => `
<div class="flex items-center justify-between p-3 bg-white border border-red-100 rounded-xl shadow-sm text-left"> <div class="flex items-center justify-between p-3 bg-white border border-red-100 rounded-xl shadow-sm text-left">
@@ -272,16 +274,16 @@
function closeRescueModal() { document.getElementById('rescueModal').classList.add('hidden'); } function closeRescueModal() { document.getElementById('rescueModal').classList.add('hidden'); }
async function deleteFailedEntry() { async function resetToManual() {
if(!confirm("¿Deseas archivar este expediente fallido?")) return; if(!confirm("¿Deseas quitar este servicio de automatización y devolverlo al Buzón de Proveedores?")) return;
try { try {
const res = await fetch(`${API_URL}/providers/scraped/${currentRescueId}`, { const res = await fetch(`${API_URL}/providers/scraped/${currentRescueId}`, {
method: 'PUT', method: 'PUT',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ status: 'archived' }) body: JSON.stringify({ automation_status: 'manual' })
}); });
if (res.ok) { closeRescueModal(); loadAutomations(); showToast("Expediente archivado"); } if (res.ok) { closeRescueModal(); loadAutomations(); showToast("Enviado al Buzón de Proveedores"); }
} catch(e) { showToast("Error al borrar", true); } } catch(e) { showToast("Error al resetear", true); }
} }
async function stopAutomation(id) { async function stopAutomation(id) {