From f6683d6bb18274bc1bad64bded02fbbaed7ab32c Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 15 Feb 2026 21:59:58 +0000
Subject: [PATCH] Actualizar servicios.html

---
 servicios.html | 78 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 27 deletions(-)

diff --git a/servicios.html b/servicios.html
index 9a63021..37cc509 100644
--- a/servicios.html
+++ b/servicios.html
@@ -389,36 +389,60 @@
         function selectAddress(val) { if(val) document.getElementById('sAddress').value = val; }
 
         async function fetchServices() {
-            try {
-                const res = await fetch(`${API_URL}/services`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-                const data = await res.json();
-                const tbody = document.getElementById('servicesTableBody');
-                tbody.innerHTML = "";
-                if(!data.ok || data.services.length === 0) { 
-                    tbody.innerHTML = `<tr><td colspan="5" class="p-8 text-center text-gray-400 bg-white">No hay servicios registrados. <button onclick="toggleView('create')" class="text-blue-600 font-bold hover:underline">Crear uno</button></td></tr>`; 
-                    return; 
-                }
-                data.services.forEach(s => {
-                    const color = s.status_color || 'gray';
-                    const date = new Date(s.created_at);
-                    const formattedDate = date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' });
-                    const assigned = s.assigned_name ? `<span class="bg-gray-100 text-gray-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase ml-1 border border-gray-200">${s.assigned_name}</span>` : '<span class="text-gray-300 text-[10px] italic ml-1">Sin asignar</span>';
+    try {
+        // Consultamos la nueva ruta de servicios aceptados
+        const res = await fetch(`${API_URL}/services/active`, { 
+            headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } 
+        });
+        const data = await res.json();
+        const tbody = document.getElementById('servicesTableBody');
+        tbody.innerHTML = "";
 
-                    tbody.innerHTML += `
-                        <tr class="hover:bg-blue-50 cursor-pointer transition border-b last:border-0 bg-white" 
-                            onclick="openDetail(${s.id}, '${s.contact_name}', '${s.title}', '${s.status_name}', '${color}', '${formattedDate}')">
-                            <td class="p-4 text-gray-500 whitespace-nowrap font-mono text-xs">${formattedDate}</td>
-                            <td class="p-4"><p class="font-bold text-gray-900">${s.contact_name}</p><p class="text-xs text-gray-500 truncate max-w-[200px] flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> ${s.address}</p></td>
-                            <td class="p-4">${assigned} <p class="text-sm text-gray-700 truncate max-w-[250px] mt-1">${s.description || 'Sin detalles'}</p>${s.is_urgent ? '<span class="text-[10px] font-bold text-red-600 bg-red-100 px-1 rounded uppercase">Urgente</span>' : ''}${s.is_company ? `<span class="text-[10px] font-bold text-blue-600 bg-blue-100 px-1 rounded uppercase ml-1">${s.company_name || 'Compañía'}</span>` : ''}</td>
-                            <td class="p-4"><span class="px-3 py-1 rounded-full text-xs font-bold text-white shadow-sm bg-${color}-500 whitespace-nowrap">${s.status_name || 'Nuevo'}</span></td>
-                            <td class="p-4 text-right"><i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i></td>
-                        </tr>
-                    `;
-                });
-                lucide.createIcons();
-            } catch (e) {}
+        if(!data.ok || data.services.length === 0) { 
+            tbody.innerHTML = `<tr><td colspan="5" class="p-8 text-center text-gray-400 bg-white">No hay servicios aceptados todavía.</td></tr>`; 
+            return; 
         }
 
+        data.services.forEach(s => {
+            const raw = s.raw_data || {};
+            // Extraemos los datos de las claves que definimos en el mapeador
+            const clientName = raw["Nombre Cliente"] || raw["CLIENTE"] || "Sin nombre";
+            const address = raw["Dirección"] || raw["DOMICILIO"] || "Sin dirección";
+            const color = s.status_color || 'gray';
+            const date = new Date(s.created_at);
+            const formattedDate = date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' });
+            
+            const assigned = s.assigned_name 
+                ? `<span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase border border-blue-200">${s.assigned_name}</span>` 
+                : '<span class="text-gray-300 text-[10px] italic">Pendiente</span>';
+
+            tbody.innerHTML += `
+                <tr class="hover:bg-blue-50 cursor-pointer transition border-b last:border-0 bg-white" 
+                    onclick="openDetail(${s.id}, '${clientName}', '${s.provider}', '${s.status_name}', '${color}', '${formattedDate}')">
+                    <td class="p-4 text-gray-500 whitespace-nowrap font-mono text-xs">${formattedDate}</td>
+                    <td class="p-4">
+                        <p class="font-bold text-gray-900 uppercase text-xs">${clientName}</p>
+                        <p class="text-[10px] text-gray-500 truncate max-w-[200px] flex items-center gap-1">
+                            <i data-lucide="map-pin" class="w-3 h-3"></i> ${address}
+                        </p>
+                    </td>
+                    <td class="p-4">
+                        ${assigned} 
+                        <p class="text-[10px] text-gray-400 font-bold uppercase mt-1">${s.guild_name || 'Sin gremio'}</p>
+                    </td>
+                    <td class="p-4">
+                        <span class="px-3 py-1 rounded-full text-[10px] font-black text-white shadow-sm bg-${color}-500 whitespace-nowrap uppercase">
+                            ${s.status_name || 'Aceptado'}
+                        </span>
+                    </td>
+                    <td class="p-4 text-right"><i data-lucide="chevron-right" class="w-5 h-5 text-gray-300"></i></td>
+                </tr>
+            `;
+        });
+        lucide.createIcons();
+    } catch (e) { console.error("Error cargando servicios:", e); }
+}
+
         async function openDetail(id, client, title, statusName, statusColor, date) {
             currentServiceId = id;
             document.getElementById('serviceDetailPanel').classList.remove('hidden');