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-03-18 22:36:47 +00:00
parent 90cacc66e7
commit 00db0ee500
1 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
servicios.html
View File

@@ -63,28 +63,28 @@
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div id="kpiCard-unassigned" onclick="toggleKpiFilter('unassigned')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
<div class="w-12 h-12 rounded-full bg-rose-50 flex items-center justify-center text-rose-500 shrink-0"><i data-lucide="inbox" class="w-6 h-6"></i></div> <div class="w-12 h-12 rounded-full bg-rose-50 flex items-center justify-center text-rose-500 shrink-0"><i data-lucide="inbox" class="w-6 h-6"></i></div>
<div> <div>
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Sin Asignar</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Sin Asignar</p>
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-unassigned">0</h3> <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-unassigned">0</h3>
</div> </div>
</div> </div>
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div id="kpiCard-scheduled" onclick="toggleKpiFilter('scheduled')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
<div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-500 shrink-0"><i data-lucide="calendar-check" class="w-6 h-6"></i></div> <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-500 shrink-0"><i data-lucide="calendar-check" class="w-6 h-6"></i></div>
<div> <div>
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Agendados</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Agendados</p>
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-scheduled">0</h3> <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-scheduled">0</h3>
</div> </div>
</div> </div>
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div id="kpiCard-waiting" onclick="toggleKpiFilter('waiting')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 shrink-0"><i data-lucide="clock" class="w-6 h-6"></i></div> <div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 shrink-0"><i data-lucide="clock" class="w-6 h-6"></i></div>
<div> <div>
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Espera Cliente</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Espera Cliente</p>
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-waiting">0</h3> <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-waiting">0</h3>
</div> </div>
</div> </div>
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div id="kpiCard-incident" onclick="toggleKpiFilter('incident')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
<div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-500 shrink-0"><i data-lucide="alert-triangle" class="w-6 h-6"></i></div> <div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-500 shrink-0"><i data-lucide="alert-triangle" class="w-6 h-6"></i></div>
<div> <div>
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Incidencia</p> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Incidencia</p>
@@ -442,6 +442,29 @@
let localData = []; let localData = [];
let systemStatuses = []; let systemStatuses = [];
let activeStatusFilter = 'ALL'; let activeStatusFilter = 'ALL';
let activeKpiFilter = 'ALL';
function toggleKpiFilter(kpiType) {
if (activeKpiFilter === kpiType) {
activeKpiFilter = 'ALL';
} else {
activeKpiFilter = kpiType;
}
const cards = ['pte_operario', 'pte_cita', 'trabajando', 'finalizados'];
cards.forEach(c => {
const el = document.getElementById(`kpiCard-${c}`);
if (activeKpiFilter === c) {
el.classList.add('ring-2', 'ring-blue-500', 'border-blue-500', 'shadow-md');
el.classList.remove('border-slate-100');
} else {
el.classList.remove('ring-2', 'ring-blue-500', 'border-blue-500', 'shadow-md');
el.classList.add('border-slate-100');
}
});
renderLists();
}
const colorDict = { const colorDict = {
'gray': { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-500', border: 'border-slate-200' }, 'gray': { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-500', border: 'border-slate-200' },
@@ -599,10 +622,10 @@
const weekValue = document.getElementById('weekFilter').value; const weekValue = document.getElementById('weekFilter').value;
// Inicializamos contadores reales // Inicializamos contadores reales
let kpiUnassigned = 0; let kpiPteOperario = 0;
let kpiScheduled = 0; let kpiPteCita = 0;
let kpiWaiting = 0; let kpiTrabajando = 0;
let kpiIncident = 0; let kpiFinalizados = 0;
const filteredData = localData.filter(s => { const filteredData = localData.filter(s => {
const raw = s.raw_data || {}; const raw = s.raw_data || {};
@@ -611,18 +634,17 @@
const stName = stateInfo.name.toLowerCase(); const stName = stateInfo.name.toLowerCase();
if (!s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar')) { // CONDICIONES CLARAS PARA CADA BLOQUE KPI
kpiUnassigned++; const isPteOperario = !s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar');
} const isFinalizado = stateInfo.is_final || stName.includes('finalizado') || stName.includes('terminado') || stName.includes('anulado');
else if (stName.includes('incidencia') || stName.includes('pausa')) { const isTrabajando = stName.includes('trabajando');
kpiIncident++; const isPteCita = s.assigned_name && !isFinalizado && !isTrabajando && (!raw.scheduled_date || raw.scheduled_date === "");
}
else if (raw.scheduled_date && raw.scheduled_date !== "" && !stateInfo.is_final) { // Contamos
kpiScheduled++; if (isPteOperario) kpiPteOperario++;
} else if (isFinalizado) kpiFinalizados++;
else if (!stateInfo.is_final && !raw.scheduled_date) { else if (isTrabajando) kpiTrabajando++;
kpiWaiting++; else if (isPteCita) kpiPteCita++;
}
const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase(); const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
const ref = (s.service_ref || "").toLowerCase(); const ref = (s.service_ref || "").toLowerCase();
@@ -631,7 +653,6 @@
const phone = (raw["Teléfono"] || raw["TELEFONO"] || raw["TELEFONOS"] || "").toLowerCase(); const phone = (raw["Teléfono"] || raw["TELEFONO"] || raw["TELEFONOS"] || "").toLowerCase();
const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase(); const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
// Ahora sí busca en absolutamente todos los campos
const matchesSearch = searchTerm === "" || const matchesSearch = searchTerm === "" ||
name.includes(searchTerm) || name.includes(searchTerm) ||
ref.includes(searchTerm) || ref.includes(searchTerm) ||
@@ -650,13 +671,20 @@
let matchesStatus = (activeStatusFilter === "ALL") ? true : String(stateInfo.id) === activeStatusFilter; let matchesStatus = (activeStatusFilter === "ALL") ? true : String(stateInfo.id) === activeStatusFilter;
return matchesSearch && matchesOp && matchesWeek && matchesStatus; // APLICAR FILTRO DEL KPI DE ARRIBA (EL BOTÓN DE CLIC)
let matchesKpi = true;
if (activeKpiFilter === 'pte_operario') matchesKpi = isPteOperario;
else if (activeKpiFilter === 'pte_cita') matchesKpi = isPteCita;
else if (activeKpiFilter === 'trabajando') matchesKpi = isTrabajando;
else if (activeKpiFilter === 'finalizados') matchesKpi = isFinalizado;
return matchesSearch && matchesOp && matchesWeek && matchesStatus && matchesKpi;
}); });
document.getElementById('kpi-unassigned').innerText = kpiUnassigned; document.getElementById('kpi-pte-operario').innerText = kpiPteOperario;
document.getElementById('kpi-scheduled').innerText = kpiScheduled; document.getElementById('kpi-pte-cita').innerText = kpiPteCita;
document.getElementById('kpi-waiting').innerText = kpiWaiting; document.getElementById('kpi-trabajando').innerText = kpiTrabajando;
document.getElementById('kpi-incident').innerText = kpiIncident; document.getElementById('kpi-finalizados').innerText = kpiFinalizados;
const grid = document.getElementById('servicesGrid'); const grid = document.getElementById('servicesGrid');
grid.innerHTML = filteredData.length > 0 grid.innerHTML = filteredData.length > 0