Actualizar automatizaciones.html

automatizaciones.html

@@ -9,8 +9,8 @@
     <style>
         .fade-in { animation: fadeIn 0.3s ease-in-out; } 
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-        .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+        .no-scrollbar::-webkit-scrollbar { display: none; }
         .service-card { cursor: pointer; transition: all 0.2s ease; position: relative; }
         .service-card:hover:not(.archived) { transform: translateY(-2px); border-color: #3b82f6; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
         .archived { opacity: 0.7; grayscale: 100%; }
@@ -47,7 +47,7 @@
                         <div class="flex gap-2">
                             <select id="filterStatus" onchange="renderFilteredInbox()" class="bg-slate-50 border border-slate-200 text-[10px] font-black px-4 py-2.5 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest">
                                 <option value="ALL">TODOS LOS ESTADOS</option>
-                                <option value="pending" selected>SOLO ACTIVOS</option>
+                                <option value="pending">SOLO ACTIVOS</option>
                                 <option value="archived">SOLO ARCHIVADOS</option>
                             </select>
                             <select id="filterProvider" onchange="renderFilteredInbox()" class="bg-slate-50 border border-slate-200 text-[10px] font-black px-4 py-2.5 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest">
@@ -171,10 +171,10 @@
                 </div>
                 <div class="flex items-center gap-3 pt-4 border-t text-left">
                     <button type="button" onclick="saveDraftChanges(event)" class="bg-slate-100 hover:bg-slate-200 text-slate-600 font-black px-6 py-5 rounded-[1.8rem] transition-all flex items-center justify-center gap-2 active:scale-95 text-xs uppercase tracking-widest">
-                        <i data-lucide="save" class="w-4 h-4"></i> <span>Guardar Borrador</span>
+                        <i data-lucide="save" class="w-4 h-4 text-left"></i> <span>Guardar Borrador</span>
                     </button>
                     <button type="submit" class="flex-1 bg-slate-900 hover:bg-emerald-600 text-white font-black py-5 rounded-[1.8rem] shadow-xl transition-all flex items-center justify-center gap-3 active:scale-95 text-sm uppercase tracking-[0.2em]">
-                        <span>TRASPASAR A CRM</span> <i data-lucide="send" class="w-5 h-5"></i>
+                        <span>TRASPASAR A CRM</span> <i data-lucide="send" class="w-5 h-5 text-left"></i>
                     </button>
                 </div>
             </form>
@@ -244,6 +244,7 @@
         async function loadInbox() {
             const container = document.getElementById('inboxContainer');
             try {
+                // MODIFICACIÓN: Ya no solicitamos solo 'pending', traemos todo para el filtrado reactivo
                 const resSvc = await fetch(`${API_URL}/providers/scraped`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
                 const dataSvc = await resSvc.json();
                 scrapedData = dataSvc.services || [];
@@ -273,7 +274,7 @@
             const search = document.getElementById('searchBox').value.toUpperCase();
             const provider = document.getElementById('filterProvider').value;
             const company = document.getElementById('filterCompany').value;
-            const status = document.getElementById('filterStatus').value;
+            const status = document.getElementById('filterStatus').value; // FILTRO DE ESTADO
 
             const filtered = scrapedData.filter(svc => {
                 const raw = svc.raw_data || {};
@@ -286,7 +287,7 @@
                 const matchesSearch = name.includes(search) || ref.includes(search) || addr.includes(search) || phone.includes(search);
                 const matchesProvider = provider === 'ALL' || svc.provider === provider;
                 const matchesCompany = company === 'ALL' || comp === company;
-                const matchesStatus = status === 'ALL' || svc.status === status;
+                const matchesStatus = status === 'ALL' || svc.status === status; // CORRECCIÓN VISIBILIDAD
 
                 return matchesSearch && matchesProvider && matchesCompany && matchesStatus;
             });
@@ -324,8 +325,8 @@
                 card.innerHTML = `
                     <div class="flex items-center gap-4 min-w-0 text-left">
                         <div class="w-16 h-16 rounded-2xl flex flex-col items-center justify-center shrink-0 shadow-sm border border-slate-100 ${isArchived ? 'bg-gray-200 text-gray-400' : (svc.provider === 'homeserve' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600')}">
-                            <span class="text-[9px] font-black uppercase tracking-tighter">${svc.provider === 'multiasistencia' ? 'MULTI' : 'HOME'}</span>
+                            <span class="text-[9px] font-black uppercase tracking-tighter text-left">${svc.provider === 'multiasistencia' ? 'MULTI' : 'HOME'}</span>
-                            <i data-lucide="${isArchived ? 'lock' : 'file-text'}" class="w-5 h-5 mt-0.5"></i>
+                            <i data-lucide="${isArchived ? 'lock' : 'file-text'}" class="w-5 h-5 mt-0.5 text-left"></i>
                         </div>
                         <div class="w-12 h-12 rounded-xl bg-white border border-slate-100 p-2 flex items-center justify-center shrink-0 shadow-inner text-left">
                             <img src="${getLogoUrl(raw['Compañía'] || raw['COMPAÑIA'])}" onerror="this.src='${companyLogos['DEFAULT']}'" class="max-w-full max-h-full object-contain">