From 32bd186692511577f36e6550dbe9f5402dc4b1d1 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Fri, 27 Feb 2026 21:53:04 +0000
Subject: [PATCH] Actualizar proveedores.html

---
 proveedores.html | 77 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 17 deletions(-)

diff --git a/proveedores.html b/proveedores.html
index 2442f2e..cfdfa4b 100644
--- a/proveedores.html
+++ b/proveedores.html
@@ -207,6 +207,7 @@
     <script>
     let allGuilds = [];
     let scrapedData = [];
+    let systemStatuses = []; // Guardará los estados reales de la DB
     let pollingInterval = null; 
 
     const companyLogos = {
@@ -238,6 +239,7 @@
     document.addEventListener("DOMContentLoaded", async () => {
         if (!localStorage.getItem("token")) window.location.href = "index.html";
         setTimeout(async () => { 
+            await loadStatuses(); // Cargamos los estados de DB
             await loadGuilds(); 
             await loadInbox(); 
         }, 200);
@@ -246,7 +248,6 @@
 
     function startPolling() {
         if (pollingInterval) clearInterval(pollingInterval);
-        // Reduce el tiempo a 5 segundos para que parezca instantáneo
         pollingInterval = setInterval(async () => {
             const modal = document.getElementById('importModal');
             if (modal.classList.contains('hidden')) {
@@ -255,6 +256,14 @@
         }, 5000); 
     }
 
+    async function loadStatuses() {
+        try {
+            const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            if (data.ok) systemStatuses = data.statuses;
+        } catch (e) { console.error("Error al cargar estados", e); }
+    }
+
     async function loadGuilds() {
         try {
             const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -282,9 +291,13 @@
             const resSvc = await fetch(`${API_URL}/providers/scraped`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
             const dataSvc = await resSvc.json();
             
-            // Verificamos si ha habido cambios para no renderizar a lo loco
-            if (JSON.stringify(scrapedData) !== JSON.stringify(dataSvc.services)) {
-                scrapedData = dataSvc.services || [];
+            let fetchedServices = dataSvc.services || [];
+            
+            // 2. EXCLUIMOS LOS BLOQUEOS DE AGENDA AQUÍ MISMO
+            fetchedServices = fetchedServices.filter(s => s.provider !== 'SYSTEM_BLOCK');
+            
+            if (JSON.stringify(scrapedData) !== JSON.stringify(fetchedServices)) {
+                scrapedData = fetchedServices;
                 updateFiltersAndRender();
             }
         } catch (e) { console.error("Error en loadInbox:", e); }
@@ -311,6 +324,19 @@
         renderFilteredInbox();
     }
 
+    // Mapa de colores exactos usados en servicios.html para pintar la pastilla de estado
+    const colorMap = {
+        'gray': { bg: 'bg-slate-100', text: 'text-slate-600', border: 'border-slate-200' },
+        'blue': { bg: 'bg-blue-100', text: 'text-blue-700', border: 'border-blue-200' },
+        'amber': { bg: 'bg-amber-100', text: 'text-amber-700', border: 'border-amber-200' },
+        'emerald': { bg: 'bg-emerald-100', text: 'text-emerald-700', border: 'border-emerald-200' },
+        'indigo': { bg: 'bg-indigo-100', text: 'text-indigo-700', border: 'border-indigo-200' },
+        'orange': { bg: 'bg-orange-100', text: 'text-orange-700', border: 'border-orange-200' },
+        'red': { bg: 'bg-red-100', text: 'text-red-700', border: 'border-red-200' },
+        'rose': { bg: 'bg-rose-100', text: 'text-rose-700', border: 'border-rose-200' },
+        'purple': { bg: 'bg-purple-100', text: 'text-purple-700', border: 'border-purple-200' }
+    };
+
     function buildServiceCard(svc) {
         const raw = svc.raw_data || {};
         const isArchived = svc.status === 'archived';
@@ -338,13 +364,16 @@
 
         const autoStatus = (svc.automation_status || '').toLowerCase();
         const sysStatus = (svc.status || '').toLowerCase();
-        const linkedStatus = (raw['estado'] || raw['status'] || '').toLowerCase(); 
-
+        
+        // 1. OBTENEMOS EL ESTADO REAL DE LA BASE DE DATOS
+        const dbStatusId = raw.status_operativo;
+        const dbStatusObj = systemStatuses.find(st => String(st.id) === String(dbStatusId));
+        
         const isUrgent = svc.is_urgent === true || (raw['Urgente'] && raw['Urgente'].toLowerCase() === 'sí') || (raw['URGENTE'] && raw['URGENTE'].toLowerCase() === 'si');
         const urgentBadge = isUrgent ? `<span class="bg-red-500 text-white px-2 py-0.5 rounded-md text-[9px] font-black uppercase shadow-sm animate-pulse ml-3">🔥 Urgente</span>` : '';
 
         if (!isArchived) {
-            if (autoStatus.includes('bolsa') || autoStatus === 'in_progress' || sysStatus.includes('bolsa') || linkedStatus.includes('bolsa')) {
+            if (autoStatus.includes('bolsa') || autoStatus === 'in_progress') {
                 bgClass = 'bg-orange-50/40 border-orange-200 hover:border-orange-400';
                 isLocked = true;
                 lockedMsg = 'Este servicio está en la BOLSA buscando operario.';
@@ -355,6 +384,30 @@
                         </span>
                         <span class="text-[9px] font-bold text-slate-500 max-w-[120px] truncate text-right">Buscando operario...</span>
                     </div>`;
+            } else if (autoStatus === 'failed') {
+                bgClass = 'bg-red-50/40 border-red-200 hover:border-red-400';
+                isLocked = false; 
+                badgeEstado = `
+                    <div class="flex flex-col items-end gap-1">
+                        <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-red-200 shadow-sm">
+                            <i data-lucide="alert-triangle" class="w-3 h-3"></i> Fallo Bolsa
+                        </span>
+                        <span class="text-[8px] font-bold text-red-400">Nadie aceptó</span>
+                    </div>`;
+            } else if (dbStatusObj) {
+                // AQUÍ USAMOS EL COLOR Y NOMBRE DEL ESTADO DE LA BASE DE DATOS
+                const cMap = colorMap[dbStatusObj.color] || colorMap['gray'];
+                bgClass = `${cMap.bg.replace('100', '50')}/40 ${cMap.border} hover:border-${dbStatusObj.color}-400`;
+                isLocked = true; 
+                lockedMsg = `Este servicio ya está en estado: ${dbStatusObj.name}. Ve al Panel Operativo.`;
+                
+                badgeEstado = `
+                    <div class="flex flex-col items-end gap-1">
+                        <span class="${cMap.bg} ${cMap.text} px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 ${cMap.border} shadow-sm border">
+                            ${dbStatusObj.name}
+                        </span>
+                        ${opName ? `<span class="text-[9px] font-bold text-slate-500 max-w-[120px] truncate text-right">${opName}</span>` : ''}
+                    </div>`;
             } else if (raw['assigned_to'] || (sysStatus === 'imported' && opName)) {
                 bgClass = 'bg-emerald-50/40 border-emerald-200 hover:border-emerald-400';
                 isLocked = true;
@@ -377,16 +430,6 @@
                         </span>
                         <span class="text-[9px] font-bold text-slate-500 max-w-[120px] truncate text-right">Esperando acción</span>
                     </div>`;
-            } else if (autoStatus === 'failed') {
-                bgClass = 'bg-red-50/40 border-red-200 hover:border-red-400';
-                isLocked = false; 
-                badgeEstado = `
-                    <div class="flex flex-col items-end gap-1">
-                        <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-red-200 shadow-sm">
-                            <i data-lucide="alert-triangle" class="w-3 h-3"></i> Fallo Bolsa
-                        </span>
-                        <span class="text-[8px] font-bold text-red-400">Nadie aceptó</span>
-                    </div>`;
             } else {
                 bgClass = isUrgent ? 'bg-red-50/20 border-red-300 hover:border-red-50 shadow-[0_0_15px_rgba(239,68,68,0.15)]' : 'bg-white border-slate-200';
                 badgeEstado = `