Actualizar asignados.html

asignados.html

@@ -58,6 +58,11 @@
         
         <div id="contentWrapper" class="hidden pb-24 fade-in">
 
+            <div id="searchContainer" class="mb-6 relative">
+                <i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
+                <input type="text" id="searchInput" oninput="filterServices()" placeholder="Buscar expediente, cliente, zona o avería..." class="w-full bg-white border border-slate-200 pl-12 pr-4 py-3.5 rounded-2xl text-sm font-bold shadow-sm outline-none focus:ring-2 focus:ring-primary-dynamic transition-all">
+           
+            </div>
             <div id="requestsSection" class="mb-6 hidden">
                 <h2 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-2">
                     <span class="relative flex h-2.5 w-2.5">
@@ -477,18 +482,50 @@
             return diffDays;
         }
 
-function renderServices() {
+        // 🔥 FUNCIÓN DE FILTRADO (BUSCADOR) 🔥
+        function filterServices() {
+            const query = document.getElementById('searchInput').value.toLowerCase().trim();
+            
+            if (query === "") {
+                renderServices(localServices); // Si borramos el texto, pinta todos
+                return;
+            }
+
+            const filtered = localServices.filter(s => {
+                const raw = s.raw_data || {};
+                
+                // Juntamos todos los campos importantes en un solo texto invisible y buscamos ahí
+                const searchString = `
+                    ${s.service_ref || ""} 
+                    ${raw["Nombre Cliente"] || raw["CLIENTE"] || ""} 
+                    ${raw["Dirección"] || raw["DOMICILIO"] || ""} 
+                    ${raw["Población"] || raw["POBLACION-PROVINCIA"] || ""} 
+                    ${raw["Código Postal"] || raw["C.P."] || ""} 
+                    ${raw["Descripción"] || raw["DESCRIPCION"] || raw["Averia"] || ""} 
+                    ${raw["Compañía"] || raw["Procedencia"] || ""}
+                `.toLowerCase();
+
+                return searchString.includes(query);
+            });
+
+            renderServices(filtered);
+        }
+
+function renderServices(servicesToRender = localServices) {
             const container = document.getElementById('servicesList');
             const noDateSec = document.getElementById('noDateSection');
             
-            if (localServices.length === 0) {
+            if (servicesToRender.length === 0) {
+                // Comprobamos si está vacío porque hemos buscado algo que no existe, o porque realmente no hay avisos
+                const isSearch = document.getElementById('searchInput') && document.getElementById('searchInput').value.trim() !== "";
+                
                 container.innerHTML = `
                     <div class="text-center py-12 bg-white rounded-3xl border border-slate-100 shadow-sm mt-2">
                         <div class="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <i data-lucide="check-check" class="w-8 h-8"></i>
+                            <i data-lucide="${isSearch ? 'search-x' : 'check-check'}" class="w-8 h-8"></i>
                         </div>
-                        <h3 class="font-black text-slate-800 text-lg">¡Todo al día!</h3>
+                        <h3 class="font-black text-slate-800 text-lg">${isSearch ? 'Sin resultados' : '¡Todo al día!'}</h3>
-                        <p class="text-xs text-slate-400 font-medium mt-1">No tienes avisos pendientes de agendar.</p>
+                        <p class="text-xs text-slate-400 font-medium mt-1">${isSearch ? 'Prueba con otra palabra clave.' : 'No tienes avisos pendientes de agendar.'}</p>
                     </div>`;
                 lucide.createIcons();
                 if (pendingRequests.length === 0) noDateSec.querySelector('h2').classList.add('hidden');
@@ -499,7 +536,7 @@ function renderServices() {
             noDateSec.classList.remove('hidden');
             noDateSec.querySelector('h2').classList.remove('hidden');
 
-            container.innerHTML = localServices.map(s => {
+            container.innerHTML = servicesToRender.map(s => {
                 const raw = s.raw_data || {};
                 const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado";
                 const addr = raw["Dirección"] || "Sin dirección";
@@ -507,9 +544,7 @@ function renderServices() {
                 const isUrgent = s.is_urgent;
                 const company = raw["Compañía"] || raw["Procedencia"] || "Particular";
                 
-                // 🔥 AÑADIDO: Extraer y limpiar la descripción de avería
                 let desc = raw["Descripción"] || raw["DESCRIPCION"] || raw["Averia"] || "Sin descripción de avería en el expediente.";
-                // Quitar posibles saltos de línea molestos y limitarlo visualmente
                 desc = desc.replace(/(\r\n|\n|\r)/gm, " "); 
 
                 const calledTimes = parseInt(raw.called_times || 0);