Actualizar servicios.html
This commit is contained in:
285
servicios.html
285
servicios.html
@@ -11,8 +11,9 @@
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.card-hover:hover { transform: translateY(-3px); transition: all 0.2s; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #93c5fd; }
|
||||
.card-hover:hover { transform: translateY(-3px); transition: all 0.2s; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #3b82f6; }
|
||||
|
||||
/* ANIMACIÓN DE TEMBLOR (SHAKE) PARA TARJETAS BLOQUEADAS */
|
||||
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
|
||||
@keyframes shake {
|
||||
10%, 90% { transform: translate3d(-2px, 0, 0); }
|
||||
@@ -23,11 +24,11 @@
|
||||
.pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
|
||||
|
||||
.input-modern { width: 100%; background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #334155; outline: none; transition: all 0.2s; }
|
||||
.input-modern:focus { border-color: #3b82f6; background-color: #ffffff; box-shadow: 0 0 0 4px #dbeafe; }
|
||||
.label-modern { display: block; text-transform: uppercase; font-size: 10px; font-weight: 900; color: #64748b; letter-spacing: 0.05em; margin-bottom: 0.375rem; margin-left: 0.25rem; }
|
||||
/* Estilos base para formularios mejorados */
|
||||
.input-modern { @apply w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-semibold text-slate-700 outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100; }
|
||||
.label-modern { @apply block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1; }
|
||||
|
||||
/* Clases para el modo edición */
|
||||
/* Estilos para el Modo Edición del Modal */
|
||||
.input-editable { border-bottom: 2px solid #3b82f6 !important; background: #eff6ff !important; border-radius: 0.5rem !important; padding: 4px 8px !important; pointer-events: auto !important; }
|
||||
.input-readonly { border: none !important; background: transparent !important; pointer-events: none; outline: none; }
|
||||
</style>
|
||||
@@ -111,7 +112,7 @@
|
||||
</div>
|
||||
|
||||
<div id="servicesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-12">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -132,11 +133,11 @@
|
||||
</div>
|
||||
|
||||
<form onsubmit="saveNewService(event)" class="flex-1 overflow-y-auto no-scrollbar p-6 bg-slate-50/50">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
|
||||
<div class="md:col-span-7 space-y-4">
|
||||
<div class="md:col-span-7 space-y-6">
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
|
||||
<h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3">
|
||||
<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 del Cliente
|
||||
</h4>
|
||||
|
||||
@@ -153,7 +154,7 @@
|
||||
<div>
|
||||
<label class="label-modern">Dirección Completa</label>
|
||||
<input type="text" id="nAddr" placeholder="Calle, número, piso, población..." class="input-modern" required>
|
||||
<div id="addrSuggestions" class="hidden mt-2 p-2 bg-amber-50 border border-amber-200 rounded-lg text-[10px] font-bold text-amber-700">⚠️ Cliente con direcciones registradas.</div>
|
||||
<div id="addrSuggestions" class="hidden mt-2 p-2 bg-amber-50 border border-amber-200 rounded-lg text-[10px] font-bold text-amber-700">⚠️ Cliente con otras direcciones registradas.</div>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<label class="flex items-center gap-3 cursor-pointer mb-2">
|
||||
@@ -169,15 +170,18 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
|
||||
<label class="label-modern">Descripción de la Avería</label>
|
||||
<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> Detalles de la Avería
|
||||
</h4>
|
||||
<label class="label-modern">Descripción</label>
|
||||
<textarea id="nDesc" placeholder="Describe el problema a reparar..." rows="6" class="input-modern resize-none"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-5 space-y-4">
|
||||
<div class="md:col-span-5 space-y-6">
|
||||
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
|
||||
<h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3">
|
||||
<i data-lucide="settings" class="w-4 h-4 text-purple-500"></i> Asignación y Tiempo
|
||||
<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="hammer" class="w-4 h-4 text-purple-500"></i> Asignación y Tiempo
|
||||
</h4>
|
||||
|
||||
<div>
|
||||
@@ -190,24 +194,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label-modern">Operario</label>
|
||||
<div class="relative">
|
||||
<select id="nWorker" class="input-modern appearance-none cursor-pointer pr-8">
|
||||
<option value="">(Sin asignar)</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label class="label-modern">Operario</label>
|
||||
<div class="relative">
|
||||
<select id="nWorker" class="input-modern appearance-none cursor-pointer pr-8">
|
||||
<option value="">(Sin asignar)</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label-modern">Duración Estimada</label>
|
||||
<div class="relative">
|
||||
<select id="nDuration" class="input-modern font-black text-blue-600 uppercase appearance-none cursor-pointer pr-8">
|
||||
<option value="15">15 min</option><option value="30">30 min</option><option value="60" selected>1 hora</option>
|
||||
<option value="90">1.5 horas</option><option value="120">2 horas</option><option value="180">3 horas</option><option value="240">4 horas (Max)</option>
|
||||
</select>
|
||||
<i data-lucide="clock" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
<div>
|
||||
<label class="label-modern">Duración Estimada</label>
|
||||
<div class="relative">
|
||||
<select id="nDuration" class="input-modern font-black text-blue-600 uppercase appearance-none cursor-pointer pr-8">
|
||||
<option value="15">15 min</option>
|
||||
<option value="30">30 min</option>
|
||||
<option value="45">45 min</option>
|
||||
<option value="60" selected>1 hora</option>
|
||||
<option value="90">1.5 horas</option>
|
||||
<option value="120">2 horas</option>
|
||||
<option value="180">3 horas</option>
|
||||
<option value="240">4 horas (Max)</option>
|
||||
</select>
|
||||
<i data-lucide="clock" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,8 +227,18 @@
|
||||
<button type="submit" name="action" value="manual" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-black py-4 rounded-xl text-sm uppercase tracking-widest shadow-[0_8px_20px_-6px_rgba(5,150,105,0.5)] transition-all active:scale-95 flex items-center justify-center gap-2">
|
||||
<i data-lucide="check-circle" class="w-5 h-5"></i> Crear y Guardar
|
||||
</button>
|
||||
<button type="submit" name="action" value="auto" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-black py-4 rounded-xl text-xs uppercase tracking-widest shadow-md transition-all active:scale-95 flex items-center justify-center gap-2">
|
||||
<i data-lucide="zap" class="w-4 h-4 text-amber-400"></i> Mandar a la Cola
|
||||
|
||||
<div class="relative flex items-center justify-center py-2">
|
||||
<span class="border-t border-slate-200 w-full absolute"></span>
|
||||
<span class="bg-slate-50 px-3 text-[9px] font-black text-slate-400 uppercase tracking-widest relative z-10">Opciones Automáticas</span>
|
||||
</div>
|
||||
|
||||
<button type="submit" name="action" value="auto" class="w-full bg-slate-800 hover:bg-slate-700 text-white font-black py-3 rounded-xl text-xs uppercase tracking-widest shadow-md transition-all active:scale-95 flex items-center justify-between px-5 border border-slate-600">
|
||||
<div class="text-left">
|
||||
<span class="block">Mandar a la Cola</span>
|
||||
<span class="block text-[9px] text-slate-400 font-medium normal-case mt-0.5">Busca operario vía WhatsApp</span>
|
||||
</div>
|
||||
<i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -228,7 +249,8 @@
|
||||
|
||||
<div id="detailModal" class="fixed inset-0 bg-slate-900/90 hidden z-[120] flex items-center justify-center backdrop-blur-sm p-4 text-left">
|
||||
<div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-4xl overflow-hidden flex flex-col fade-in relative">
|
||||
<button onclick="closeDetailModal()" class="absolute top-6 right-6 text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-all z-20"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||||
|
||||
<button onclick="closeDetailModal()" class="absolute top-6 right-6 text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-all hover:bg-red-50 hover:border-red-100 z-20"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||||
|
||||
<div class="p-6 border-b border-slate-100 bg-slate-50/50 pr-24 flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -238,13 +260,14 @@
|
||||
<h3 class="font-black text-slate-800 text-xl tracking-tight leading-none">#<span id="detRef"></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
|
||||
<div class="flex flex-col items-end text-right">
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Compañía Aseguradora</p>
|
||||
<span id="detCompany" class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-xs font-black text-slate-700 mt-1 uppercase shadow-sm"></span>
|
||||
<span id="detCompany" class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-xs font-black text-slate-700 mt-1 uppercase shadow-sm truncate max-w-[250px]"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 grid grid-cols-1 md:grid-cols-5 gap-6 bg-white overflow-y-auto max-h-[70vh] no-scrollbar">
|
||||
<div class="p-6 grid grid-cols-1 md:grid-cols-5 gap-6 bg-white overflow-y-auto max-h-[80vh] no-scrollbar">
|
||||
<input type="hidden" id="detId">
|
||||
<input type="hidden" id="detCp">
|
||||
|
||||
@@ -258,6 +281,7 @@
|
||||
<div class="flex items-center gap-1.5 flex-1">
|
||||
<i data-lucide="phone" class="w-3.5 h-3.5 text-blue-600"></i>
|
||||
<input type="tel" id="editPhone" class="input-readonly text-sm text-blue-600 font-black w-full" readonly>
|
||||
<a id="btnCallPhone" href="#" class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 hidden" title="Llamar"><i data-lucide="phone-call" class="w-3.5 h-3.5"></i></a>
|
||||
</div>
|
||||
<button onclick="copyClientPortalLink()" id="btnPortalLink" class="text-[10px] font-black bg-blue-50 border border-blue-100 hover:bg-blue-600 hover:text-white text-blue-600 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-all shadow-sm active:scale-95 shrink-0">
|
||||
<i data-lucide="link" class="w-3 h-3"></i> Copiar Portal
|
||||
@@ -267,17 +291,21 @@
|
||||
<hr class="border-slate-200">
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Ubicación y Dirección</p>
|
||||
<textarea id="editAddr" rows="2" class="input-readonly w-full text-sm font-bold text-slate-600 mt-1 resize-none uppercase" readonly></textarea>
|
||||
<div class="flex items-start gap-1.5 mt-1">
|
||||
<i data-lucide="map-pin" class="w-4 h-4 mt-0.5 text-slate-400 shrink-0"></i>
|
||||
<textarea id="editAddr" rows="2" class="input-readonly w-full text-sm font-bold text-slate-600 resize-none uppercase" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-2 block">Descripción de la Avería</p>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-2">Descripción de la Avería</p>
|
||||
<textarea id="editDesc" rows="6" class="w-full bg-amber-50/60 border border-amber-100 p-5 rounded-[1.5rem] text-sm font-medium text-slate-700 shadow-inner leading-relaxed outline-none" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2 flex flex-col gap-4">
|
||||
|
||||
<div id="panelAsignado" class="bg-blue-50/40 p-6 rounded-[1.5rem] border border-blue-100 flex flex-col justify-between shadow-sm h-full hidden">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
@@ -290,19 +318,22 @@
|
||||
<div class="space-y-3">
|
||||
<p class="text-[10px] font-black text-blue-600 uppercase tracking-widest flex items-center gap-1.5 border-b border-blue-100 pb-2"><i data-lucide="calendar-clock" class="w-4 h-4"></i> Agendar Cita</p>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input type="date" id="dateInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 outline-none">
|
||||
<input type="time" id="timeInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 outline-none">
|
||||
<input type="date" id="dateInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
|
||||
<input type="time" id="timeInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 pt-2">
|
||||
<p class="text-[10px] font-black text-slate-800 uppercase ml-1 flex items-center gap-1.5"><i data-lucide="arrow-right-left" class="w-4 h-4 text-blue-500"></i> Cambio de Estado</p>
|
||||
<div class="relative">
|
||||
<select id="detStatusMap" class="w-full bg-slate-800 text-white border-none p-4 rounded-xl text-xs font-bold shadow-lg outline-none cursor-pointer appearance-none pr-10"></select>
|
||||
<select id="detStatusMap" class="w-full bg-slate-800 text-white border-none p-4 rounded-xl text-xs font-bold shadow-lg outline-none cursor-pointer appearance-none pr-10">
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btnSaveAppt" onclick="saveAppointment()" class="w-full mt-8 bg-blue-600 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest shadow-lg hover:bg-blue-700 transition-all active:scale-95">Guardar Cambios</button>
|
||||
<button id="btnSaveAppt" onclick="saveAppointment()" class="w-full mt-8 bg-blue-600 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest shadow-[0_8px_20px_-6px_rgba(37,99,235,0.5)] hover:bg-blue-700 hover:shadow-blue-600/30 transition-all active:scale-95 flex items-center justify-center gap-2 border border-blue-500">
|
||||
<i data-lucide="save" class="w-4 h-4"></i> Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="panelSinAsignar" class="bg-rose-50/40 p-6 rounded-[1.5rem] border border-rose-100 flex flex-col shadow-sm h-full hidden">
|
||||
@@ -310,25 +341,46 @@
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-rose-500 animate-pulse"></div>
|
||||
<p class="text-[10px] font-black text-rose-600 uppercase tracking-widest">Opciones de Asignación</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5 flex-1">
|
||||
<select id="reGremio" class="w-full bg-white border border-rose-200 p-4 rounded-2xl text-xs font-bold text-slate-700 outline-none" onchange="loadOps(this.value, 'reOperario')">
|
||||
<option value="">Seleccionar Gremio...</option>
|
||||
</select>
|
||||
|
||||
<div class="bg-slate-900 p-5 rounded-2xl text-white space-y-4">
|
||||
<button onclick="sendToAutomate()" id="btnAuto" class="w-full bg-blue-600 hover:bg-blue-500 p-3 rounded-xl flex items-center justify-between text-left transition-all active:scale-95">
|
||||
<div><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[9px] text-blue-200">Rueda automática</p></div>
|
||||
<div><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[9px] text-blue-200">Rueda automática (WA)</p></div>
|
||||
<i data-lucide="zap" class="w-5 h-5"></i>
|
||||
</button>
|
||||
|
||||
<div class="bg-slate-800 p-4 rounded-xl space-y-3">
|
||||
<p class="font-black uppercase text-[9px] text-slate-400 text-center">O Asignar a Mano:</p>
|
||||
<select id="reOperario" class="w-full bg-slate-700 border-none text-white px-3 py-2.5 rounded-lg text-xs font-bold outline-none">
|
||||
<option value="">-- Elija gremio --</option>
|
||||
<option value="">-- Elija gremio primero --</option>
|
||||
</select>
|
||||
<button onclick="assignManualFromPanel()" class="w-full bg-white text-slate-900 font-black py-2.5 rounded-lg text-[10px] uppercase hover:bg-emerald-400">Confirmar Directo</button>
|
||||
<button onclick="assignManualFromPanel()" class="w-full bg-white text-slate-900 font-black py-2.5 rounded-lg text-[10px] uppercase hover:bg-emerald-400 transition-colors">Confirmar Directo</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panelEnBolsa" class="bg-amber-50/40 p-6 rounded-[1.5rem] border border-amber-200 flex flex-col justify-center items-center shadow-sm h-full hidden text-center space-y-4">
|
||||
<div class="w-16 h-16 bg-amber-100 text-amber-500 rounded-full flex items-center justify-center animate-pulse shadow-inner">
|
||||
<i data-lucide="bot" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-black text-slate-800 text-lg uppercase tracking-tight">Servicio en Bolsa</h4>
|
||||
<p class="text-xs text-slate-500 mt-2 font-medium">El robot está buscando operario automáticamente. Por favor, no interfieras a menos que sea urgente.</p>
|
||||
</div>
|
||||
<div class="w-full space-y-3 mt-6">
|
||||
<button onclick="stopAutomation()" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-black py-3.5 rounded-xl text-xs uppercase transition-colors shadow-md flex justify-center items-center gap-2">
|
||||
<i data-lucide="octagon" class="w-4 h-4"></i> Detener y Asignar Manual
|
||||
</button>
|
||||
<button onclick="closeDetailModal()" class="w-full bg-white border border-slate-200 text-slate-600 font-bold py-3.5 rounded-xl text-xs uppercase hover:bg-slate-50 transition-colors">
|
||||
Dejar que el Robot siga
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -401,6 +453,7 @@
|
||||
if (data.ok) {
|
||||
systemStatuses = data.statuses;
|
||||
renderStatusPills();
|
||||
|
||||
const modalSelect = document.getElementById('detStatusMap');
|
||||
modalSelect.innerHTML = '';
|
||||
systemStatuses.forEach(st => {
|
||||
@@ -410,28 +463,43 @@
|
||||
} catch (e) { console.error("Error cargando estados:", e); }
|
||||
}
|
||||
|
||||
function renderStatusPills() {
|
||||
function renderStatusPills() {
|
||||
const container = document.getElementById('statusPills');
|
||||
let html = `<button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-black tracking-widest transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">TODOS</button>`;
|
||||
let html = `
|
||||
<button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-black tracking-widest transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">
|
||||
TODOS
|
||||
</button>
|
||||
`;
|
||||
|
||||
systemStatuses.forEach(st => {
|
||||
const isActive = activeStatusFilter === String(st.id);
|
||||
const c = colorDict[st.color] || colorDict['gray'];
|
||||
const colorBase = c.bg.split('-')[1];
|
||||
|
||||
const activeClasses = `bg-white border-${colorBase}-400 text-${colorBase}-700 shadow-md ring-2 ring-${colorBase}-100`;
|
||||
const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`;
|
||||
|
||||
html += `<button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
|
||||
<div class="w-2 h-2 rounded-full ${c.dot}"></div>${st.name}</button>`;
|
||||
html += `
|
||||
<button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
|
||||
<div class="w-2 h-2 rounded-full ${c.dot}"></div>
|
||||
${st.name}
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function setStatusFilter(id) { activeStatusFilter = id; renderStatusPills(); renderLists(); }
|
||||
function setStatusFilter(id) {
|
||||
activeStatusFilter = id;
|
||||
renderStatusPills();
|
||||
renderLists();
|
||||
}
|
||||
|
||||
async function refreshPanel() {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/services/active`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||
const res = await fetch(`${API_URL}/services/active`, {
|
||||
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
localData = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK');
|
||||
@@ -458,16 +526,19 @@
|
||||
if (!s.assigned_name && (s.automation_status === 'in_progress' || s.automation_status === 'failed')) {
|
||||
return { id: 'bolsa', name: s.automation_status === 'in_progress' ? 'Buscando Operario' : 'Fallo en Bolsa', color: s.automation_status === 'in_progress' ? 'amber' : 'red', isBlocked: false, is_final: false };
|
||||
}
|
||||
|
||||
if (!s.assigned_name && (!dbStat || dbStat === 'sin_asignar')) {
|
||||
const found = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente de asignar')) || systemStatuses[0];
|
||||
return { ...found, isBlocked: false };
|
||||
}
|
||||
|
||||
const foundById = systemStatuses.find(st => String(st.id) === String(dbStat));
|
||||
if (foundById) return { ...foundById, isBlocked: false };
|
||||
|
||||
if (s.assigned_name && (!raw.scheduled_date || raw.scheduled_date === "")) {
|
||||
const asignado = systemStatuses.find(st => st.name.toLowerCase() === 'asignado');
|
||||
const esperando = systemStatuses.find(st => st.name.toLowerCase().includes('esperando'));
|
||||
|
||||
if (dbStat === 'esperando_cliente' && esperando) return { ...esperando, isBlocked: false };
|
||||
if ((dbStat === 'asignado_operario' || !dbStat) && asignado) return { ...asignado, isBlocked: false };
|
||||
if (asignado) return { ...asignado, isBlocked: false };
|
||||
@@ -489,22 +560,36 @@
|
||||
|
||||
function renderLists() {
|
||||
if(systemStatuses.length === 0) return;
|
||||
|
||||
const searchTerm = document.getElementById('searchFilter').value.toLowerCase();
|
||||
const selectedOp = document.getElementById('opFilter').value;
|
||||
const weekValue = document.getElementById('weekFilter').value;
|
||||
|
||||
let kpiUnassigned = 0, kpiScheduled = 0, kpiWaiting = 0, kpiIncident = 0;
|
||||
// Inicializamos contadores reales
|
||||
let kpiUnassigned = 0;
|
||||
let kpiScheduled = 0;
|
||||
let kpiWaiting = 0;
|
||||
let kpiIncident = 0;
|
||||
|
||||
const filteredData = localData.filter(s => {
|
||||
const raw = s.raw_data || {};
|
||||
const stateInfo = getServiceStateInfo(s);
|
||||
s._stateInfo = stateInfo;
|
||||
|
||||
const stName = stateInfo.name.toLowerCase();
|
||||
|
||||
if (!s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar')) kpiUnassigned++;
|
||||
else if (stName.includes('incidencia') || stName.includes('pausa')) kpiIncident++;
|
||||
else if (raw.scheduled_date && raw.scheduled_date !== "" && !stateInfo.is_final) kpiScheduled++;
|
||||
else if (!stateInfo.is_final && !raw.scheduled_date) kpiWaiting++;
|
||||
if (!s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar')) {
|
||||
kpiUnassigned++;
|
||||
}
|
||||
else if (stName.includes('incidencia') || stName.includes('pausa')) {
|
||||
kpiIncident++;
|
||||
}
|
||||
else if (raw.scheduled_date && raw.scheduled_date !== "" && !stateInfo.is_final) {
|
||||
kpiScheduled++;
|
||||
}
|
||||
else if (!stateInfo.is_final && !raw.scheduled_date) {
|
||||
kpiWaiting++;
|
||||
}
|
||||
|
||||
const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
|
||||
const ref = (s.service_ref || "").toLowerCase();
|
||||
@@ -519,6 +604,7 @@
|
||||
}
|
||||
|
||||
let matchesStatus = (activeStatusFilter === "ALL") ? true : String(stateInfo.id) === activeStatusFilter;
|
||||
|
||||
return matchesSearch && matchesOp && matchesWeek && matchesStatus;
|
||||
});
|
||||
|
||||
@@ -528,7 +614,13 @@
|
||||
document.getElementById('kpi-incident').innerText = kpiIncident;
|
||||
|
||||
const grid = document.getElementById('servicesGrid');
|
||||
grid.innerHTML = filteredData.length > 0 ? filteredData.map(s => buildGridCard(s)).join('') : `<div class="col-span-full py-20 text-center bg-white rounded-[2rem] border-2 border-dashed border-slate-200"><i data-lucide="layout-grid" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i><p class="text-slate-400 font-bold uppercase tracking-widest text-sm">No hay servicios que coincidan</p></div>`;
|
||||
grid.innerHTML = filteredData.length > 0
|
||||
? filteredData.map(s => buildGridCard(s)).join('')
|
||||
: `<div class="col-span-full py-20 text-center bg-white rounded-[2rem] border-2 border-dashed border-slate-200">
|
||||
<i data-lucide="layout-grid" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
|
||||
<p class="text-slate-400 font-bold uppercase tracking-widest text-sm">No hay servicios que coincidan</p>
|
||||
</div>`;
|
||||
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
@@ -540,6 +632,7 @@
|
||||
const fullAddr = `${addr} ${pop}`.trim();
|
||||
const cita = raw.scheduled_date ? `${raw.scheduled_date.split('-').reverse().slice(0,2).join('/')} | ${raw.scheduled_time}` : 'Pte. Cita';
|
||||
const companyName = raw['Compañía'] || raw['COMPAÑIA'] || raw['Procedencia'] || (s.provider === 'MANUAL' ? 'PARTICULAR' : 'ASEGURADORA');
|
||||
|
||||
const isUrgent = s.is_urgent === true || (raw['Urgente'] && raw['Urgente'].toLowerCase() === 'sí') || (raw['URGENTE'] && raw['URGENTE'].toLowerCase() === 'si');
|
||||
|
||||
const stateInfo = s._stateInfo;
|
||||
@@ -564,10 +657,12 @@
|
||||
</span>
|
||||
${isUrgent ? `<span class="bg-red-500 text-white px-2 py-1 rounded-lg text-[9px] font-black uppercase shadow-sm animate-pulse shrink-0">🔥 URGENTE</span>` : `<span class="text-[10px] text-slate-400 font-bold uppercase bg-slate-50 border border-slate-100 px-2.5 py-1 rounded-lg shrink-0">#${s.service_ref}</span>`}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-0.5 truncate">${companyName}</p>
|
||||
<h4 class="font-black text-slate-800 uppercase text-base leading-tight line-clamp-2" title="${name}">${name}</h4>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50/50 p-3 rounded-xl border border-slate-100">
|
||||
<p class="text-[10px] text-slate-600 font-medium uppercase line-clamp-2 flex items-start gap-1.5" title="${fullAddr}">
|
||||
<i data-lucide="map-pin" class="w-3.5 h-3.5 mt-0.5 text-slate-400 shrink-0"></i> ${fullAddr}
|
||||
@@ -622,19 +717,20 @@
|
||||
setTimeout(() => { toast.classList.add('hidden'); }, 3500);
|
||||
}
|
||||
|
||||
// LA FUNCIÓN CORREGIDA
|
||||
function openDetail(id, startInEditMode = false) {
|
||||
const s = localData.find(x => x.id === id);
|
||||
if (!s) return;
|
||||
const raw = s.raw_data;
|
||||
const raw = s.raw_data || {}; // Seguridad anti-crashes
|
||||
|
||||
document.getElementById('detId').value = s.id;
|
||||
document.getElementById('detRef').innerText = s.service_ref;
|
||||
document.getElementById('detCp').value = raw["Código Postal"] || "00000";
|
||||
document.getElementById('detRef').innerText = s.service_ref || "";
|
||||
if (document.getElementById('detCp')) document.getElementById('detCp').value = raw["Código Postal"] || "00000";
|
||||
|
||||
const companyName = raw['Compañía'] || raw['COMPAÑIA'] || raw['Procedencia'] || "Particular";
|
||||
document.getElementById('detCompany').innerText = companyName;
|
||||
if (document.getElementById('detCompany')) document.getElementById('detCompany').innerText = companyName;
|
||||
|
||||
// Rellenar campos del editor
|
||||
// RELLENADO DE CAMPOS PARA EL EDITOR Y VISTA (Inputs)
|
||||
const clientName = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
|
||||
if(document.getElementById('editName')) document.getElementById('editName').value = clientName;
|
||||
|
||||
@@ -643,13 +739,24 @@
|
||||
const singlePhone = matchPhone ? matchPhone[0] : "";
|
||||
if(document.getElementById('editPhone')) document.getElementById('editPhone').value = singlePhone;
|
||||
|
||||
// Lógica del botón de llamada dinámico
|
||||
const callBtn = document.getElementById('btnCallPhone');
|
||||
if (callBtn) {
|
||||
if (singlePhone) {
|
||||
callBtn.href = `tel:+34${singlePhone}`;
|
||||
callBtn.classList.remove('hidden');
|
||||
} else {
|
||||
callBtn.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
const fullAddr = `${raw["Dirección"] || ""} ${raw["Población"] || ""}`.trim();
|
||||
if(document.getElementById('editAddr')) document.getElementById('editAddr').value = fullAddr;
|
||||
|
||||
const descContent = raw["Descripción"] || raw["DESCRIPCION"] || "Sin notas.";
|
||||
if(document.getElementById('editDesc')) document.getElementById('editDesc').value = descContent;
|
||||
|
||||
const stateInfo = s._stateInfo;
|
||||
const stateInfo = s._stateInfo || getServiceStateInfo(s);
|
||||
|
||||
if (s.automation_status === 'in_progress') {
|
||||
document.getElementById('panelEnBolsa').classList.remove('hidden');
|
||||
@@ -682,7 +789,6 @@
|
||||
|
||||
document.getElementById('detailModal').classList.remove('hidden');
|
||||
|
||||
// Activar modo edición si se ha pulsado el lápiz
|
||||
if (startInEditMode) {
|
||||
enableEditing();
|
||||
} else {
|
||||
@@ -695,6 +801,7 @@
|
||||
async function stopAutomation() {
|
||||
const id = document.getElementById('detId').value;
|
||||
if(!confirm("¿Deseas cancelar la búsqueda del robot para asignar este servicio manualmente?")) return;
|
||||
|
||||
try {
|
||||
await fetch(`${API_URL}/providers/scraped/${id}`, {
|
||||
method: 'PUT',
|
||||
@@ -704,7 +811,9 @@
|
||||
showToast("Bolsa detenida. Ya puedes asignar el servicio.");
|
||||
closeDetailModal();
|
||||
refreshPanel();
|
||||
} catch (e) { alert("Error al detener el automatismo."); }
|
||||
} catch (e) {
|
||||
alert("Error al detener el automatismo.");
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAppointment() {
|
||||
@@ -714,6 +823,7 @@
|
||||
const statusMap = document.getElementById('detStatusMap').value;
|
||||
|
||||
const selectedSt = systemStatuses.find(st => String(st.id) === String(statusMap));
|
||||
|
||||
if (selectedSt && !selectedSt.is_final && !date && !selectedSt.name.toLowerCase().includes('pausa') && !selectedSt.name.toLowerCase().includes('asignar')) {
|
||||
if(!confirm("No has asignado Fecha para este estado. ¿Deseas continuar?")) return;
|
||||
}
|
||||
@@ -729,6 +839,7 @@
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||
body: JSON.stringify({ date, time, status_operativo: statusMap })
|
||||
});
|
||||
|
||||
closeDetailModal(); showToast("Estado actualizado"); refreshPanel();
|
||||
} catch (e) { alert("Error"); }
|
||||
finally { btn.innerHTML = originalContent; btn.disabled = false; }
|
||||
@@ -740,6 +851,7 @@
|
||||
const cp = document.getElementById('detCp').value;
|
||||
|
||||
if(!guild_id) return alert("Selecciona un gremio primero.");
|
||||
|
||||
const btn = document.getElementById('btnAuto');
|
||||
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>';
|
||||
|
||||
@@ -787,8 +899,12 @@
|
||||
})
|
||||
});
|
||||
|
||||
closeDetailModal(); showToast("Asignado y notificado correctamente"); refreshPanel();
|
||||
} catch (e) { alert("Error en la asignación manual"); }
|
||||
closeDetailModal();
|
||||
showToast("Asignado y notificado correctamente");
|
||||
refreshPanel();
|
||||
} catch (e) {
|
||||
alert("Error en la asignación manual");
|
||||
}
|
||||
}
|
||||
|
||||
async function saveNewService(e) {
|
||||
@@ -820,20 +936,23 @@
|
||||
}
|
||||
|
||||
function closeDetailModal() { document.getElementById('detailModal').classList.add('hidden'); }
|
||||
function openCreateModal() {
|
||||
|
||||
async function openCreateModal() {
|
||||
document.getElementById('createModal').classList.remove('hidden');
|
||||
document.getElementById('isCompanyCheck').checked = false;
|
||||
toggleCompanyFields(false);
|
||||
|
||||
fetch(`${API_URL}/companies`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const sel = document.getElementById('nCompanySelect');
|
||||
sel.innerHTML = '<option value="">Seleccionar compañía...</option>';
|
||||
if(data.companies) {
|
||||
data.companies.forEach(c => sel.innerHTML += `<option value="${c.name}">${c.name.toUpperCase()}</option>`);
|
||||
}
|
||||
}).catch(e=>{});
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/companies`, {
|
||||
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
||||
});
|
||||
const data = await res.json();
|
||||
const sel = document.getElementById('nCompanySelect');
|
||||
sel.innerHTML = '<option value="">Seleccionar compañía...</option>';
|
||||
data.companies.forEach(c => {
|
||||
sel.innerHTML += `<option value="${c.name}">${c.name.toUpperCase()}</option>`;
|
||||
});
|
||||
} catch(e) {}
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
@@ -848,15 +967,19 @@
|
||||
|
||||
async function checkDuplicateRef(ref) {
|
||||
if(!ref) return;
|
||||
const res = await fetch(`${API_URL}/services/check-ref?ref=${ref}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||
const res = await fetch(`${API_URL}/services/check-ref?ref=${ref}`, {
|
||||
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
||||
});
|
||||
const data = await res.json();
|
||||
const alertEl = document.getElementById('refAlert');
|
||||
const inputEl = document.getElementById('nExpRef');
|
||||
|
||||
if(data.exists) {
|
||||
alertEl.classList.remove('hidden'); inputEl.classList.add('border-red-500', 'bg-red-50');
|
||||
alertEl.classList.remove('hidden');
|
||||
inputEl.classList.add('border-red-500', 'bg-red-50');
|
||||
} else {
|
||||
alertEl.classList.add('hidden'); inputEl.classList.remove('border-red-500', 'bg-red-50');
|
||||
alertEl.classList.add('hidden');
|
||||
inputEl.classList.remove('border-red-500', 'bg-red-50');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user