Actualizar automatizaciones.html

automatizaciones.html

@@ -45,6 +45,11 @@
                             <input type="text" id="searchBox" oninput="renderFilteredInbox()" placeholder="Buscar por Nombre, REF, Dirección, Teléfono..." class="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all">
                         </div>
                         <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="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">
                                 <option value="ALL">PROVEEDORES</option>
                                 <option value="homeserve">HOME (HOMESERVE)</option>
@@ -224,12 +229,10 @@
         async function loadInbox() {
             const container = document.getElementById('inboxContainer');
             try {
-                // MODIFICACIÓN: Ya no filtramos solo pending en la llamada, traemos todo para el buscador
                 const resSvc = await fetch(`${API_URL}/providers/scraped`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
                 const dataSvc = await resSvc.json();
                 scrapedData = dataSvc.services || [];
                 
-                // Actualizamos lista de compañías para el filtro
                 const compSelect = document.getElementById('filterCompany');
                 const uniqueCompanies = [...new Set(scrapedData.map(s => {
                     const raw = s.raw_data || {};
@@ -239,16 +242,16 @@
                 compSelect.innerHTML = '<option value="ALL">COMPAÑÍAS</option>';
                 uniqueCompanies.forEach(c => compSelect.innerHTML += `<option value="${c}">${c}</option>`);
 
-                renderFilteredInbox(); //
+                renderFilteredInbox();
             } catch (e) { showToast("Error de conexión", true); }
         }
 
-        // FUNCIÓN DE FILTRADO REACTIVO (NUEVA)
         function renderFilteredInbox() {
             const container = document.getElementById('inboxContainer');
             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; // NUEVO FILTRO
 
             const filtered = scrapedData.filter(svc => {
                 const raw = svc.raw_data || {};
@@ -261,19 +264,20 @@
                 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; //
 
-                return matchesSearch && matchesProvider && matchesCompany;
+                return matchesSearch && matchesProvider && matchesCompany && matchesStatus;
             });
 
             container.innerHTML = "";
             if(filtered.length === 0) {
-                container.innerHTML = '<div class="p-12 text-center text-slate-400 bg-white rounded-3xl border-2 border-dashed">No se encontraron expedientes.</div>';
+                container.innerHTML = '<div class="p-12 text-center text-slate-400 bg-white rounded-3xl border-2 border-dashed">No se encontraron expedientes con estos filtros.</div>';
                 return;
             }
 
             filtered.forEach(svc => {
                 const raw = svc.raw_data || {};
-                const isArchived = svc.status === 'archived'; //
+                const isArchived = svc.status === 'archived';
                 const statusLabel = isArchived ? 'ARCHIVADO' : 'SERVICIO ACTIVO';
                 const statusClass = isArchived ? 'bg-gray-100 text-gray-500 border-gray-200' : 'bg-emerald-50 text-emerald-600 border-emerald-100';
                 
@@ -319,7 +323,7 @@
                     </div>
                     <div class="flex items-center gap-2 text-left">
                         ${!isArchived ? `
-                        <div class="hidden group-hover:flex items-center gap-1 pr-4 border-r mr-2 transition-all">
+                        <div class="hidden group-hover:flex items-center gap-2 pr-4 transition-all">
                             <a href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(fullAddr)}" target="_blank" class="action-btn p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-blue-600 shadow-sm"><i data-lucide="map"></i></a>
                             ${phone ? `<a href="https://wa.me/34${phone}" target="_blank" class="action-btn p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-emerald-600 shadow-sm"><i data-lucide="message-square"></i></a>` : ''}
                         </div>