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; }
@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>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased text-left">
@@ -111,38 +115,124 @@
</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 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="p-8 border-b flex justify-between items-center bg-slate-50">
<h3 class="font-black text-slate-800 uppercase tracking-tighter text-xl">Alta de Expediente Manual</h3>
<button onclick="closeCreateModal()" class="text-slate-400 hover:text-red-500 transition-colors"><i data-lucide="x"></i></button>
<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-[2rem] shadow-2xl w-full max-w-4xl max-h-[95vh] overflow-hidden flex flex-col fade-in">
<div class="p-6 border-b border-slate-100 flex justify-between items-center bg-white shrink-0">
<div class="flex items-center gap-3">
<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>
<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>
<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 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')">
<option value="">Seleccionar Gremio...</option>
<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-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>
<div class="bg-slate-900 p-6 rounded-[2rem] text-white space-y-4">
<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><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[10px] text-blue-200">WhatsApp Automático</p></div>
<i data-lucide="zap" class="w-6 h-6"></i>
<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 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>
<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>
<select id="nWorker" class="w-full bg-slate-700 border-none text-white px-3 py-2 rounded-xl text-sm outline-none">
<option value="">-- Primero elija gremio --</option>
</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 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>
</div>
</form>
@@ -318,7 +408,7 @@
setInterval(refreshPanel, 20000);
});
// Helpers de Fechas para el filtro de semanas
// Helpers de Fechas
function getWeekNumber(d) {
d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
@@ -335,7 +425,6 @@
return targetWeekStr === weekStr;
}
// 1. CARGAMOS LOS ESTADOS DEL SISTEMA
async function loadStatuses() {
try {
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); }
}
// 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS)
function renderStatusPills() {
const container = document.getElementById('statusPills');
let html = `
@@ -364,13 +452,9 @@
systemStatuses.forEach(st => {
const isActive = activeStatusFilter === String(st.id);
// Usamos tu diccionario directamente para evitar fallos de Tailwind
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];
// Clases seguras
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`;
@@ -397,9 +481,7 @@
});
const data = await res.json();
if (data.ok) {
// FILTRAR BLOQUEOS PARA QUE NO ENSUCIEN EL PANEL NI LAS ESTADÍSTICAS
localData = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK');
updateOperatorFilter();
renderLists();
}
@@ -416,9 +498,6 @@
if (html.includes(`value="${currentValue}"`)) opSelect.value = currentValue;
}
// ==========================================
// 🚀 LÓGICA INTELIGENTE DE ENRUTAMIENTO (ESTADOS)
// ==========================================
function getServiceStateInfo(s) {
const raw = s.raw_data || {};
const dbStat = raw.status_operativo;
@@ -484,7 +563,6 @@
const stateInfo = getServiceStateInfo(s);
s._stateInfo = stateInfo;
// --- CÁLCULO DE KPIs (Solo para los bloques de colores superiores) ---
const stName = stateInfo.name.toLowerCase();
if (stateInfo.id === 'bolsa' || stName.includes('pendiente de asignar') || stName.includes('desasignado')) {
@@ -497,41 +575,27 @@
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 matchesOp = selectedOp === "ALL" || assigned === selectedOp;
// --- FILTRO DE SEMANAS ---
let matchesWeek = true;
if (weekValue !== "") {
if (dateRaw) {
matchesWeek = isDateInWeekString(dateRaw, weekValue);
} else {
matchesWeek = false; // Si hay filtro de semana y no tiene fecha, lo ocultamos
}
if (dateRaw) matchesWeek = isDateInWeekString(dateRaw, weekValue);
else matchesWeek = false;
}
// --- FILTRO DE ESTADOS (El culpable arreglado) ---
let matchesStatus = false;
if (activeStatusFilter === "ALL") {
// 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;
}
if (activeStatusFilter === "ALL") matchesStatus = true;
else matchesStatus = String(stateInfo.id) === activeStatusFilter;
return matchesSearch && matchesOp && matchesWeek && matchesStatus;
});
// Pintar contadores
document.getElementById('kpi-unassigned').innerText = kpiUnassigned;
document.getElementById('kpi-scheduled').innerText = kpiScheduled;
document.getElementById('kpi-waiting').innerText = kpiWaiting;
document.getElementById('kpi-incident').innerText = kpiIncident;
// Pintar Tarjetas
const grid = document.getElementById('servicesGrid');
grid.innerHTML = filteredData.length > 0
? filteredData.map(s => buildGridCard(s)).join('')
@@ -603,10 +667,6 @@
</div>`;
}
// ==========================================
// FUNCIONES DE MODALES Y ACCIONES
// ==========================================
function shakeCard(element, status) {
element.classList.add('shake');
setTimeout(() => element.classList.remove('shake'), 400);
@@ -810,9 +870,13 @@
e.preventDefault();
const action = e.submitter.value;
const data = {
phone: document.getElementById('nPhone').value, name: document.getElementById('nName').value,
address: document.getElementById('nAddr').value, description: document.getElementById('nDesc').value,
guild_id: document.getElementById('nGuild').value, assigned_to: document.getElementById('nWorker').value || null
phone: document.getElementById('nPhone').value,
name: document.getElementById('nName').value,
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 {
const res = await fetch(`${API_URL}/services/manual-high`, {