marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar servicios.html

Browse Source
This commit is contained in:
marsalva
2026-02-22 21:50:30 +00:00
parent f2effcf888
commit d107a4c8fa
1 changed files with 131 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
servicios.html
View File

@@ -23,6 +23,10 @@
} }
.pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
/* 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; }
</style> </style>
</head> </head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased text-left"> <body class="bg-slate-50 text-slate-800 font-sans antialiased text-left">
@@ -111,38 +115,124 @@
</div> </div>
</div> </div>
<div id="createModal" class="fixed inset-0 bg-slate-900/80 hidden z-[100] flex items-center justify-center backdrop-blur-sm p-4 text-left"> <div id="createModal" class="fixed inset-0 bg-slate-900/60 hidden z-[100] flex items-center justify-center backdrop-blur-sm p-4 text-left">
<div class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col fade-in"> <div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-4xl max-h-[95vh] overflow-hidden flex flex-col fade-in">
<div class="p-8 border-b flex justify-between items-center bg-slate-50"> <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-white shrink-0">
<h3 class="font-black text-slate-800 uppercase tracking-tighter text-xl">Alta de Expediente Manual</h3> <div class="flex items-center gap-3">
<button onclick="closeCreateModal()" class="text-slate-400 hover:text-red-500 transition-colors"><i data-lucide="x"></i></button> <div class="bg-blue-100 p-2.5 rounded-xl text-blue-600"><i data-lucide="file-plus" class="w-5 h-5"></i></div>
<div>
<h3 class="font-black text-slate-800 text-lg uppercase tracking-tight">Alta de Expediente Manual</h3>
<p class="text-xs text-slate-500 font-medium">Registra un nuevo servicio directamente en el sistema</p>
</div> </div>
<form onsubmit="saveNewService(event)" class="p-8 overflow-y-auto no-scrollbar grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<div class="bg-blue-50/50 p-6 rounded-3xl border border-blue-100 space-y-4">
<h4 class="font-black text-blue-400 uppercase text-[10px] tracking-widest">Información del Cliente</h4>
<input type="tel" id="nPhone" placeholder="Teléfono" class="w-full bg-white border-none px-4 py-3 rounded-xl shadow-sm font-bold outline-none" required>
<input type="text" id="nName" placeholder="Nombre completo" class="w-full bg-white border-none px-4 py-3 rounded-xl shadow-sm font-bold outline-none" required>
<input type="text" id="nAddr" placeholder="Dirección completa" class="w-full bg-white border-none px-4 py-3 rounded-xl shadow-sm font-bold outline-none" required>
</div> </div>
<textarea id="nDesc" placeholder="Descripción de la avería..." rows="4" class="w-full bg-slate-50 border-none px-4 py-3 rounded-3xl text-sm font-medium outline-none"></textarea> <button onclick="closeCreateModal()" class="text-slate-400 hover:text-red-500 bg-slate-50 p-2 rounded-full transition-colors"><i data-lucide="x" class="w-5 h-5"></i></button>
</div> </div>
<div class="space-y-6">
<select id="nGuild" class="w-full bg-slate-100 p-4 rounded-2xl font-bold outline-none" onchange="loadOps(this.value, 'nWorker')"> <form onsubmit="saveNewService(event)" class="flex-1 overflow-y-auto no-scrollbar p-6 bg-slate-50/50">
<option value="">Seleccionar Gremio...</option> <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
<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 mb-4">
<i data-lucide="user" class="w-4 h-4 text-blue-500"></i> Datos del Cliente
</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="label-modern">Teléfono</label>
<input type="tel" id="nPhone" placeholder="Ej: 600123456" class="input-modern" required>
</div>
<div>
<label class="label-modern">Nombre Completo</label>
<input type="text" id="nName" placeholder="Nombre del asegurado" class="input-modern" required>
</div>
</div>
<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>
</div>
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
<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="4" class="input-modern resize-none"></textarea>
</div>
</div>
<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 mb-4">
<i data-lucide="hammer" class="w-4 h-4 text-purple-500"></i> Asignación
</h4>
<div>
<label class="label-modern">Gremio Recomendado</label>
<div class="relative">
<select id="nGuild" class="input-modern appearance-none cursor-pointer pr-10" onchange="loadOps(this.value, 'nWorker')">
<option value="">Seleccionar gremio...</option>
</select> </select>
<div class="bg-slate-900 p-6 rounded-[2rem] text-white space-y-4"> <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>
<button type="submit" name="action" value="auto" class="w-full bg-blue-600 hover:bg-blue-500 p-4 rounded-2xl flex items-center justify-between text-left transition-all"> </div>
<div><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[10px] text-blue-200">WhatsApp Automático</p></div> </div>
<i data-lucide="zap" class="w-6 h-6"></i>
<div class="grid grid-cols-2 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>
<label class="label-modern">Duración (Estimada)</label>
<div class="relative">
<select id="nDuration" class="input-modern 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="75">1 h 15 min</option>
<option value="90">1 h 30 min</option>
<option value="105">1 h 45 min</option>
<option value="120">2 horas</option>
<option value="150">2 h 30 min</option>
<option value="180">3 horas</option>
<option value="210">3 h 30 min</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>
<div class="space-y-3">
<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>
<div class="bg-slate-800 p-4 rounded-2xl space-y-3">
<p class="font-black uppercase text-[10px] text-slate-500 text-center">Asignar a Mano:</p> <div class="relative flex items-center justify-center py-2">
<select id="nWorker" class="w-full bg-slate-700 border-none text-white px-3 py-2 rounded-xl text-sm outline-none"> <span class="border-t border-slate-200 w-full absolute"></span>
<option value="">-- Primero elija gremio --</option> <span class="bg-slate-50 px-3 text-[9px] font-black text-slate-400 uppercase tracking-widest relative z-10">Opciones Automáticas</span>
</select>
<button type="submit" name="action" value="manual" class="w-full bg-white text-slate-900 font-black py-3 rounded-xl text-xs uppercase hover:bg-emerald-400 transition-colors">Confirmar Directo</button>
</div> </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> </div>
</div> </div>
</form> </form>
@@ -318,7 +408,7 @@
setInterval(refreshPanel, 20000); setInterval(refreshPanel, 20000);
}); });
// Helpers de Fechas para el filtro de semanas // Helpers de Fechas
function getWeekNumber(d) { function getWeekNumber(d) {
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7)); d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
@@ -335,7 +425,6 @@
return targetWeekStr === weekStr; return targetWeekStr === weekStr;
} }
// 1. CARGAMOS LOS ESTADOS DEL SISTEMA
async function loadStatuses() { async function loadStatuses() {
try { try {
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -353,7 +442,6 @@
} catch (e) { console.error("Error cargando estados:", e); } } catch (e) { console.error("Error cargando estados:", e); }
} }
// 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS)
function renderStatusPills() { function renderStatusPills() {
const container = document.getElementById('statusPills'); const container = document.getElementById('statusPills');
let html = ` let html = `
@@ -364,13 +452,9 @@
systemStatuses.forEach(st => { systemStatuses.forEach(st => {
const isActive = activeStatusFilter === String(st.id); const isActive = activeStatusFilter === String(st.id);
// Usamos tu diccionario directamente para evitar fallos de Tailwind
const c = colorDict[st.color] || colorDict['gray']; const c = colorDict[st.color] || colorDict['gray'];
// Extraemos el nombre del color base (ej: de 'bg-blue-100' sacamos 'blue')
const colorBase = c.bg.split('-')[1]; const colorBase = c.bg.split('-')[1];
// Clases seguras
const activeClasses = `bg-white border-${colorBase}-400 text-${colorBase}-700 shadow-md ring-2 ring-${colorBase}-100`; 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`; const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`;
@@ -397,9 +481,7 @@
}); });
const data = await res.json(); const data = await res.json();
if (data.ok) { if (data.ok) {
// FILTRAR BLOQUEOS PARA QUE NO ENSUCIEN EL PANEL NI LAS ESTADÍSTICAS
localData = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK'); localData = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK');
updateOperatorFilter(); updateOperatorFilter();
renderLists(); renderLists();
} }
@@ -416,9 +498,6 @@
if (html.includes(`value="${currentValue}"`)) opSelect.value = currentValue; if (html.includes(`value="${currentValue}"`)) opSelect.value = currentValue;
} }
// ==========================================
// 🚀 LÓGICA INTELIGENTE DE ENRUTAMIENTO (ESTADOS)
// ==========================================
function getServiceStateInfo(s) { function getServiceStateInfo(s) {
const raw = s.raw_data || {}; const raw = s.raw_data || {};
const dbStat = raw.status_operativo; const dbStat = raw.status_operativo;
@@ -484,7 +563,6 @@
const stateInfo = getServiceStateInfo(s); const stateInfo = getServiceStateInfo(s);
s._stateInfo = stateInfo; s._stateInfo = stateInfo;
// --- CÁLCULO DE KPIs (Solo para los bloques de colores superiores) ---
const stName = stateInfo.name.toLowerCase(); const stName = stateInfo.name.toLowerCase();
if (stateInfo.id === 'bolsa' || stName.includes('pendiente de asignar') || stName.includes('desasignado')) { if (stateInfo.id === 'bolsa' || stName.includes('pendiente de asignar') || stName.includes('desasignado')) {
@@ -497,41 +575,27 @@
kpiWaiting++; kpiWaiting++;
} }
// --- FILTROS DE BÚSQUEDA ---
const matchesSearch = searchTerm === "" || name.includes(searchTerm) || ref.includes(searchTerm) || addr.includes(searchTerm) || pop.includes(searchTerm) || phone.includes(searchTerm) || comp.includes(searchTerm); const matchesSearch = searchTerm === "" || name.includes(searchTerm) || ref.includes(searchTerm) || addr.includes(searchTerm) || pop.includes(searchTerm) || phone.includes(searchTerm) || comp.includes(searchTerm);
const matchesOp = selectedOp === "ALL" || assigned === selectedOp; const matchesOp = selectedOp === "ALL" || assigned === selectedOp;
// --- FILTRO DE SEMANAS ---
let matchesWeek = true; let matchesWeek = true;
if (weekValue !== "") { if (weekValue !== "") {
if (dateRaw) { if (dateRaw) matchesWeek = isDateInWeekString(dateRaw, weekValue);
matchesWeek = isDateInWeekString(dateRaw, weekValue); else matchesWeek = false;
} else {
matchesWeek = false; // Si hay filtro de semana y no tiene fecha, lo ocultamos
}
} }
// --- FILTRO DE ESTADOS (El culpable arreglado) ---
let matchesStatus = false; let matchesStatus = false;
if (activeStatusFilter === "ALL") matchesStatus = true;
if (activeStatusFilter === "ALL") { else matchesStatus = String(stateInfo.id) === activeStatusFilter;
// MODO DIOS: Si estás en "TODOS", muestra TODO.
matchesStatus = true;
} else {
// Si pinchas un filtro concreto, comprueba que el ID coincida
matchesStatus = String(stateInfo.id) === activeStatusFilter;
}
return matchesSearch && matchesOp && matchesWeek && matchesStatus; return matchesSearch && matchesOp && matchesWeek && matchesStatus;
}); });
// Pintar contadores
document.getElementById('kpi-unassigned').innerText = kpiUnassigned; document.getElementById('kpi-unassigned').innerText = kpiUnassigned;
document.getElementById('kpi-scheduled').innerText = kpiScheduled; document.getElementById('kpi-scheduled').innerText = kpiScheduled;
document.getElementById('kpi-waiting').innerText = kpiWaiting; document.getElementById('kpi-waiting').innerText = kpiWaiting;
document.getElementById('kpi-incident').innerText = kpiIncident; document.getElementById('kpi-incident').innerText = kpiIncident;
// Pintar Tarjetas
const grid = document.getElementById('servicesGrid'); const grid = document.getElementById('servicesGrid');
grid.innerHTML = filteredData.length > 0 grid.innerHTML = filteredData.length > 0
? filteredData.map(s => buildGridCard(s)).join('') ? filteredData.map(s => buildGridCard(s)).join('')
@@ -603,10 +667,6 @@
</div>`; </div>`;
} }
// ==========================================
// FUNCIONES DE MODALES Y ACCIONES
// ==========================================
function shakeCard(element, status) { function shakeCard(element, status) {
element.classList.add('shake'); element.classList.add('shake');
setTimeout(() => element.classList.remove('shake'), 400); setTimeout(() => element.classList.remove('shake'), 400);
@@ -810,9 +870,13 @@
e.preventDefault(); e.preventDefault();
const action = e.submitter.value; const action = e.submitter.value;
const data = { const data = {
phone: document.getElementById('nPhone').value, name: document.getElementById('nName').value, phone: document.getElementById('nPhone').value,
address: document.getElementById('nAddr').value, description: document.getElementById('nDesc').value, name: document.getElementById('nName').value,
guild_id: document.getElementById('nGuild').value, assigned_to: document.getElementById('nWorker').value || null address: document.getElementById('nAddr').value,
description: document.getElementById('nDesc').value,
guild_id: document.getElementById('nGuild').value,
assigned_to: document.getElementById('nWorker').value || null,
duration_minutes: document.getElementById('nDuration').value // <--- CAPTURA DE DURACIÓN
}; };
try { try {
const res = await fetch(`${API_URL}/services/manual-high`, { const res = await fetch(`${API_URL}/services/manual-high`, {