507 lines
30 KiB
HTML
507 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clientes - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
.fade-in { animation: fadeIn 0.2s ease-in-out; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
|
|
/* Ocultar scrollbar pero permitir scroll */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
.selected-card { border-left: 4px solid #2563eb; background-color: #eff6ff; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 text-gray-800 font-sans h-screen overflow-hidden flex">
|
|
|
|
<div id="sidebar-container" class="h-full shrink-0"></div>
|
|
|
|
<div class="flex-1 flex flex-col h-full min-w-0">
|
|
<div id="header-container"></div>
|
|
|
|
<main class="flex-1 flex flex-row overflow-hidden relative">
|
|
|
|
<div class="w-full md:w-1/3 bg-white border-r border-gray-200 flex flex-col z-10 shadow-lg h-full">
|
|
|
|
<div class="p-4 border-b border-gray-100 bg-white">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="text-lg font-bold text-gray-800">Cartera de Clientes</h2>
|
|
</div>
|
|
<div class="relative">
|
|
<i data-lucide="search" class="w-4 h-4 absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="text" id="searchInput" oninput="debounceSearch()" placeholder="Buscar por nombre, teléfono..." class="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center gap-2 px-1">
|
|
<input type="checkbox" id="filterMultiAddress" onchange="searchClients()" class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer">
|
|
<label for="filterMultiAddress" class="text-[10px] font-black text-slate-500 uppercase tracking-widest cursor-pointer select-none">Mostrar solo clientes con + de 1 dirección</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="clientsList" class="flex-1 overflow-y-auto no-scrollbar p-2 space-y-1">
|
|
<div class="text-center py-10 text-gray-400 text-sm">Cargando clientes...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex flex-1 bg-gray-50 flex-col overflow-hidden relative" id="clientDetailPanel">
|
|
|
|
<div id="emptyState" class="absolute inset-0 flex flex-col items-center justify-center text-gray-400">
|
|
<div class="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mb-4">
|
|
<i data-lucide="users" class="w-10 h-10 text-gray-400"></i>
|
|
</div>
|
|
<p class="text-lg font-medium">Selecciona un cliente</p>
|
|
<p class="text-sm">o búscalo en el listado para ver su historial</p>
|
|
</div>
|
|
|
|
<div id="clientContent" class="hidden flex-col h-full fade-in">
|
|
|
|
<div class="bg-white p-6 border-b border-gray-200 shadow-sm shrink-0">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-2xl font-black text-blue-600 uppercase shadow-inner border border-blue-200" id="detailAvatar">
|
|
C
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-black text-gray-800 leading-tight uppercase" id="detailName">Nombre Cliente</h1>
|
|
<div class="flex items-center gap-3 mt-1 text-sm font-bold text-gray-500">
|
|
<span class="flex items-center gap-1"><i data-lucide="phone" class="w-3 h-3 text-blue-500"></i> <span id="detailPhone">...</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<a id="btnCall" href="#" class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition" title="Llamar"><i data-lucide="phone" class="w-5 h-5"></i></a>
|
|
<a id="btnWhatsapp" href="#" target="_blank" class="p-2 text-gray-500 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition" title="WhatsApp"><i data-lucide="message-circle" class="w-5 h-5"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-6">
|
|
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<div class="bg-white p-5 rounded-[1.5rem] shadow-sm border border-gray-100">
|
|
<h3 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
|
|
<i data-lucide="map-pin" class="w-4 h-4 text-rose-500"></i> Direcciones Encontradas
|
|
</h3>
|
|
<div id="addressList" class="space-y-3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-[1.5rem] shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="p-5 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
|
|
<h3 class="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
|
|
<i data-lucide="folder-clock" class="w-4 h-4 text-blue-500"></i> Historial de Expedientes
|
|
</h3>
|
|
<span class="text-[9px] font-bold text-gray-400">Pulsa en un expediente para editarlo</span>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left">
|
|
<thead class="text-[10px] font-black text-gray-400 uppercase tracking-widest bg-gray-50 border-b">
|
|
<tr>
|
|
<th class="px-6 py-4">Fecha Entrada</th>
|
|
<th class="px-6 py-4">Referencia</th>
|
|
<th class="px-6 py-4">Compañía</th>
|
|
<th class="px-6 py-4">Técnico</th>
|
|
<th class="px-6 py-4">Estado</th>
|
|
<th class="px-6 py-4 text-right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="servicesTableBody" class="text-gray-600 font-medium">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<div id="serviceDetailModal" class="fixed inset-0 bg-slate-900/70 hidden z-[150] flex items-center justify-center backdrop-blur-sm p-4 text-left fade-in">
|
|
<div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-4xl max-h-[95vh] flex flex-col overflow-hidden border border-slate-200">
|
|
|
|
<div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50 shrink-0">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-blue-100 text-blue-600 p-2.5 rounded-xl shadow-inner"><i data-lucide="edit-3" class="w-5 h-5"></i></div>
|
|
<div>
|
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Editor de Expediente</p>
|
|
<h3 class="font-black text-slate-800 text-xl tracking-tight leading-none mt-1">#<span id="modalSvcRef" class="text-blue-600"></span></h3>
|
|
</div>
|
|
</div>
|
|
<button onclick="closeServiceDetailModal()" class="text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-colors active:scale-90"><i data-lucide="x" class="w-5 h-5"></i></button>
|
|
</div>
|
|
|
|
<form onsubmit="saveServiceDetails(event)" class="flex-1 overflow-y-auto p-6 space-y-6 no-scrollbar bg-slate-50/50">
|
|
<input type="hidden" id="modalSvcId">
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
|
|
<h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3 mb-4"><i data-lucide="user" class="w-4 h-4 text-blue-500"></i> Datos Principales</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Nombre / Asegurado</label>
|
|
<input type="text" id="modalSvcName" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Teléfono</label>
|
|
<input type="text" id="modalSvcPhone" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Dirección Completa</label>
|
|
<input type="text" id="modalSvcAddress" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Población</label>
|
|
<input type="text" id="modalSvcPop" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Código Postal</label>
|
|
<input type="text" id="modalSvcCp" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm text-center tracking-widest">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
|
|
<h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3 mb-4"><i data-lucide="align-left" class="w-4 h-4 text-amber-500"></i> Descripción y Daños</h4>
|
|
<textarea id="modalSvcDesc" rows="5" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm resize-none"></textarea>
|
|
</div>
|
|
|
|
<div class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
|
|
<button type="button" onclick="document.getElementById('modalSvcExtraContainer').classList.toggle('hidden')" class="w-full p-4 flex justify-between items-center bg-slate-50 hover:bg-slate-100 transition-colors">
|
|
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest flex items-center gap-2"><i data-lucide="server" class="w-4 h-4"></i> Resto de Datos Técnicos (Original)</span>
|
|
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
|
|
</button>
|
|
<div id="modalSvcExtraContainer" class="hidden p-5 bg-slate-800 text-emerald-400 font-mono text-xs overflow-auto max-h-60 leading-relaxed border-t border-slate-200">
|
|
<div id="modalSvcExtra"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<button type="submit" id="btnSaveSvc" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-black px-6 py-4 rounded-xl uppercase tracking-widest text-sm transition-all shadow-lg active:scale-95 flex items-center justify-center gap-2 border border-blue-500">
|
|
<i data-lucide="save" class="w-5 h-5"></i> Guardar Modificaciones
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-xl shadow-2xl translate-y-20 opacity-0 transition-all duration-300 z-[200] flex items-center gap-3 font-bold text-sm tracking-wide">
|
|
<i data-lucide="info" class="w-4 h-4"></i> <span id="toastMsg"></span>
|
|
</div>
|
|
|
|
<script src="js/layout.js"></script>
|
|
<script>
|
|
// API_URL ya viene cargada desde js/layout.js
|
|
let systemStatuses = [];
|
|
let searchTimeout = null;
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
if (!localStorage.getItem("token")) window.location.href = "index.html";
|
|
lucide.createIcons();
|
|
await loadStatuses();
|
|
loadClients("");
|
|
});
|
|
|
|
async function loadStatuses() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
|
const data = await res.json();
|
|
if (data.ok) systemStatuses = data.statuses;
|
|
} catch (e) { console.error("Error al cargar estados", e); }
|
|
}
|
|
|
|
function debounceSearch() {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
searchClients();
|
|
}, 300);
|
|
}
|
|
|
|
async function searchClients() {
|
|
const val = document.getElementById('searchInput').value.trim();
|
|
loadClients(val);
|
|
}
|
|
|
|
async function loadClients(search = "") {
|
|
const list = document.getElementById('clientsList');
|
|
list.innerHTML = `<div class="text-center py-10 text-blue-500 flex flex-col items-center gap-2"><i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i><span class="text-xs font-bold uppercase tracking-widest">Buscando...</span></div>`;
|
|
lucide.createIcons();
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/services/active`, {
|
|
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (!data.ok) throw new Error("Error en la carga");
|
|
|
|
let clientsMap = {};
|
|
|
|
data.services.forEach(s => {
|
|
const raw = s.raw_data || {};
|
|
let phone = raw['Teléfono'] || raw['TELEFONO'] || raw['TELEFONOS'] || "";
|
|
|
|
const matchPhone = String(phone).match(/[6789]\d{8}/);
|
|
const cleanPhone = matchPhone ? matchPhone[0] : null;
|
|
|
|
if (cleanPhone) {
|
|
if (!clientsMap[cleanPhone]) {
|
|
clientsMap[cleanPhone] = {
|
|
id: cleanPhone,
|
|
full_name: raw['Nombre Cliente'] || raw['CLIENTE'] || "Cliente Sin Nombre",
|
|
phone: cleanPhone,
|
|
addresses: new Set(),
|
|
services: []
|
|
};
|
|
}
|
|
|
|
const addr = `${raw['Dirección'] || ''} ${raw['Población'] || ''}`.trim();
|
|
if (addr) clientsMap[cleanPhone].addresses.add(addr);
|
|
clientsMap[cleanPhone].services.push(s);
|
|
}
|
|
});
|
|
|
|
let clientsArray = Object.values(clientsMap);
|
|
|
|
// NUEVO: FILTRO MÚLTIPLES DIRECCIONES
|
|
const filterMulti = document.getElementById('filterMultiAddress').checked;
|
|
if (filterMulti) {
|
|
clientsArray = clientsArray.filter(c => c.addresses.size > 1);
|
|
}
|
|
|
|
// Filtro de texto
|
|
if (search !== "") {
|
|
const sLower = search.toLowerCase();
|
|
clientsArray = clientsArray.filter(c =>
|
|
c.full_name.toLowerCase().includes(sLower) ||
|
|
c.phone.includes(sLower)
|
|
);
|
|
}
|
|
|
|
clientsArray.sort((a, b) => b.services.length - a.services.length);
|
|
|
|
list.innerHTML = "";
|
|
if(clientsArray.length === 0) {
|
|
list.innerHTML = `<div class="text-center py-8 text-gray-400 text-xs font-bold uppercase tracking-widest border-2 border-dashed border-gray-200 rounded-xl m-2">Sin resultados</div>`;
|
|
return;
|
|
}
|
|
|
|
clientsArray.forEach(c => {
|
|
const el = document.createElement('div');
|
|
el.className = `p-3 mb-1 rounded-xl cursor-pointer hover:bg-blue-50 transition border border-transparent hover:border-blue-100 flex justify-between items-center group`;
|
|
el.id = `client-card-${c.id}`;
|
|
|
|
// Alojamos los datos del cliente globalmente al hacer clic
|
|
el.onclick = () => {
|
|
window.currentClientData = c;
|
|
renderClientDetails(c, el.id);
|
|
};
|
|
|
|
el.innerHTML = `
|
|
<div class="flex items-center gap-3 overflow-hidden">
|
|
<div class="w-10 h-10 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center font-black text-sm shrink-0 border border-slate-200 group-hover:bg-blue-600 group-hover:text-white group-hover:border-blue-600 transition-colors uppercase">
|
|
${c.full_name.charAt(0)}
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="font-black text-slate-700 text-sm truncate uppercase tracking-tight">${c.full_name}</p>
|
|
<p class="text-xs font-bold text-slate-400 truncate mt-0.5">${c.phone}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<span class="bg-slate-100 text-slate-500 group-hover:bg-blue-100 group-hover:text-blue-700 transition-colors text-[10px] font-black px-2 py-1 rounded border border-slate-200 group-hover:border-blue-200">
|
|
${c.services.length} EXP
|
|
</span>
|
|
</div>
|
|
`;
|
|
list.appendChild(el);
|
|
});
|
|
|
|
} catch(e) {
|
|
console.error(e);
|
|
list.innerHTML = `<div class="text-center py-8 text-red-400 text-xs font-bold uppercase tracking-widest border-2 border-dashed border-red-200 rounded-xl m-2">Error de carga</div>`;
|
|
}
|
|
}
|
|
|
|
function renderClientDetails(clientData, cardId) {
|
|
document.getElementById('emptyState').classList.add('hidden');
|
|
document.getElementById('clientContent').classList.remove('hidden');
|
|
document.getElementById('clientContent').classList.add('flex');
|
|
|
|
document.querySelectorAll('#clientsList > div').forEach(d => d.classList.remove('selected-card'));
|
|
const card = document.getElementById(cardId);
|
|
if(card) card.classList.add('selected-card');
|
|
|
|
document.getElementById('detailAvatar').innerText = clientData.full_name.charAt(0).toUpperCase();
|
|
document.getElementById('detailName').innerText = clientData.full_name;
|
|
document.getElementById('detailPhone').innerText = clientData.phone;
|
|
|
|
document.getElementById('btnCall').href = `tel:+34${clientData.phone}`;
|
|
document.getElementById('btnWhatsapp').href = `https://wa.me/34${clientData.phone}`;
|
|
|
|
const addrContainer = document.getElementById('addressList');
|
|
addrContainer.innerHTML = "";
|
|
const addresses = Array.from(clientData.addresses);
|
|
|
|
if(addresses.length === 0) {
|
|
addrContainer.innerHTML = `<p class="text-xs font-bold text-gray-400 uppercase tracking-widest">Sin dirección registrada.</p>`;
|
|
} else {
|
|
addresses.forEach(addr => {
|
|
const div = document.createElement('div');
|
|
div.className = "flex justify-between items-center text-xs font-bold text-slate-600 p-3 bg-slate-50 rounded-xl border border-slate-100 uppercase";
|
|
div.innerHTML = `
|
|
<span class="truncate pr-4"><i data-lucide="map-pin" class="w-3 h-3 inline mr-1 text-slate-400"></i> ${addr}</span>
|
|
<a href="https://maps.google.com/?q=${encodeURIComponent(addr)}" target="_blank" class="text-blue-500 hover:text-blue-700 bg-blue-50 p-2 rounded-lg border border-blue-100 transition-colors">
|
|
<i data-lucide="external-link" class="w-4 h-4"></i>
|
|
</a>
|
|
`;
|
|
addrContainer.appendChild(div);
|
|
});
|
|
}
|
|
|
|
const tbody = document.getElementById('servicesTableBody');
|
|
tbody.innerHTML = "";
|
|
|
|
clientData.services.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
|
|
|
clientData.services.forEach(s => {
|
|
const tr = document.createElement('tr');
|
|
// NUEVO: FILA CLICABLE QUE ABRE EL MODAL DE EDICIÓN
|
|
tr.className = "border-b border-gray-100 hover:bg-blue-50 transition-colors cursor-pointer group";
|
|
tr.onclick = () => openServiceDetailModal(s.id);
|
|
|
|
const raw = s.raw_data || {};
|
|
const date = new Date(s.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit' });
|
|
|
|
const dbStatusId = raw.status_operativo;
|
|
const statusObj = systemStatuses.find(st => String(st.id) === String(dbStatusId));
|
|
const stName = statusObj ? statusObj.name : (s.status_name || 'Pendiente');
|
|
|
|
const isFinal = s.is_final || (statusObj && statusObj.is_final) || s.status === 'archived';
|
|
const badgeClass = isFinal
|
|
? "bg-slate-100 text-slate-500 border-slate-200"
|
|
: "bg-blue-50 text-blue-700 border-blue-200";
|
|
|
|
tr.innerHTML = `
|
|
<td class="px-6 py-4 font-mono text-xs font-bold text-slate-500">${date}</td>
|
|
<td class="px-6 py-4 font-black text-slate-800 text-xs group-hover:text-blue-600 transition-colors">#${s.service_ref}</td>
|
|
<td class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">${raw['Compañía'] || 'Particular'}</td>
|
|
<td class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5 mt-1.5">
|
|
<i data-lucide="hard-hat" class="w-3 h-3"></i> ${s.assigned_name || 'Sin Asignar'}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="${badgeClass} px-3 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest border shadow-sm">
|
|
${stName}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<span class="text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity"><i data-lucide="edit-3" class="w-4 h-4"></i></span>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// 4. NUEVAS FUNCIONES DEL MODAL DE EDICIÓN
|
|
function openServiceDetailModal(id) {
|
|
if(!window.currentClientData) return;
|
|
const s = window.currentClientData.services.find(srv => srv.id === id);
|
|
if(!s) return;
|
|
const raw = s.raw_data || {};
|
|
|
|
document.getElementById('modalSvcId').value = s.id;
|
|
document.getElementById('modalSvcRef').innerText = s.service_ref || "SIN-REF";
|
|
|
|
// Llenar campos editables
|
|
document.getElementById('modalSvcName').value = raw['Nombre Cliente'] || raw['CLIENTE'] || "";
|
|
document.getElementById('modalSvcPhone').value = raw['Teléfono'] || raw['TELEFONOS'] || raw['TELEFONO'] || "";
|
|
document.getElementById('modalSvcAddress').value = raw['Dirección'] || raw['DOMICILIO'] || "";
|
|
document.getElementById('modalSvcPop').value = raw['Población'] || raw['POBLACION-PROVINCIA'] || "";
|
|
document.getElementById('modalSvcCp').value = raw['Código Postal'] || raw['C.P.'] || "";
|
|
document.getElementById('modalSvcDesc').value = raw['Descripción'] || raw['DESCRIPCION'] || "";
|
|
|
|
// Volcar el resto de campos no editables al cajón negro
|
|
let extraHtml = '';
|
|
const knownKeys = ['Nombre Cliente', 'CLIENTE', 'Teléfono', 'TELEFONOS', 'TELEFONO', 'Dirección', 'DOMICILIO', 'Población', 'POBLACION-PROVINCIA', 'Código Postal', 'C.P.', 'Descripción', 'DESCRIPCION'];
|
|
|
|
for (let key in raw) {
|
|
if (!knownKeys.includes(key)) {
|
|
let val = raw[key];
|
|
if (val === null || val === undefined || val === "") continue;
|
|
if (typeof val === 'object') val = JSON.stringify(val);
|
|
extraHtml += `<div class="mb-2 pb-2 border-b border-slate-700 last:border-0"><strong class="text-white">${key}:</strong> <br><span class="break-words">${val}</span></div>`;
|
|
}
|
|
}
|
|
document.getElementById('modalSvcExtra').innerHTML = extraHtml || 'No hay datos extra adicionales.';
|
|
|
|
document.getElementById('serviceDetailModal').classList.remove('hidden');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function closeServiceDetailModal() {
|
|
document.getElementById('serviceDetailModal').classList.add('hidden');
|
|
}
|
|
|
|
async function saveServiceDetails(e) {
|
|
e.preventDefault();
|
|
const id = document.getElementById('modalSvcId').value;
|
|
const btn = document.getElementById('btnSaveSvc');
|
|
const origText = btn.innerHTML;
|
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
|
|
btn.disabled = true;
|
|
lucide.createIcons();
|
|
|
|
const payload = {
|
|
name: document.getElementById('modalSvcName').value,
|
|
phone: document.getElementById('modalSvcPhone').value,
|
|
address: document.getElementById('modalSvcAddress').value,
|
|
cp: document.getElementById('modalSvcCp').value,
|
|
description: document.getElementById('modalSvcDesc').value,
|
|
"Población": document.getElementById('modalSvcPop').value // Extra field, handled by the backend '...extra' mapping
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/providers/scraped/${id}`, {
|
|
method: 'PUT',
|
|
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if(res.ok) {
|
|
showToast("¡Expediente actualizado correctamente!");
|
|
closeServiceDetailModal();
|
|
// Refrescamos la lista para que se vean los cambios
|
|
await searchClients();
|
|
} else {
|
|
showToast("Error al guardar en el servidor", true);
|
|
}
|
|
} catch(err) {
|
|
showToast("Error de conexión", true);
|
|
} finally {
|
|
btn.innerHTML = origText;
|
|
btn.disabled = false;
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
function showToast(msg, isError = false) {
|
|
const t = document.getElementById('toast');
|
|
const m = document.getElementById('toastMsg');
|
|
t.className = `fixed bottom-5 right-5 px-6 py-4 rounded-xl shadow-2xl transition-all duration-300 z-[250] flex items-center gap-3 font-bold text-sm tracking-wide ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white`;
|
|
m.innerText = msg;
|
|
t.classList.remove('translate-y-20', 'opacity-0');
|
|
setTimeout(() => t.classList.add('translate-y-20', 'opacity-0'), 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |