Actualizar servicios.html

This commit is contained in:
2026-02-15 21:59:58 +00:00
parent 00e5867f45
commit f6683d6bb1

View File

@@ -390,34 +390,58 @@
async function fetchServices() {
try {
const res = await fetch(`${API_URL}/services`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
// 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 = "";
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>`;
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-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>';
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}, '${s.contact_name}', '${s.title}', '${s.status_name}', '${color}', '${formattedDate}')">
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">${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">
<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) {}
}
} catch (e) { console.error("Error cargando servicios:", e); }
}
async function openDetail(id, client, title, statusName, statusColor, date) {
currentServiceId = id;