Actualizar servicios.html
This commit is contained in:
@@ -63,28 +63,28 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Incidencia</p>
|
||||
@@ -442,6 +442,29 @@
|
||||
let localData = [];
|
||||
let systemStatuses = [];
|
||||
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 = {
|
||||
'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;
|
||||
|
||||
// Inicializamos contadores reales
|
||||
let kpiUnassigned = 0;
|
||||
let kpiScheduled = 0;
|
||||
let kpiWaiting = 0;
|
||||
let kpiIncident = 0;
|
||||
let kpiPteOperario = 0;
|
||||
let kpiPteCita = 0;
|
||||
let kpiTrabajando = 0;
|
||||
let kpiFinalizados = 0;
|
||||
|
||||
const filteredData = localData.filter(s => {
|
||||
const raw = s.raw_data || {};
|
||||
@@ -611,18 +634,17 @@
|
||||
|
||||
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++;
|
||||
}
|
||||
// CONDICIONES CLARAS PARA CADA BLOQUE KPI
|
||||
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');
|
||||
const isTrabajando = stName.includes('trabajando');
|
||||
const isPteCita = s.assigned_name && !isFinalizado && !isTrabajando && (!raw.scheduled_date || raw.scheduled_date === "");
|
||||
|
||||
// Contamos
|
||||
if (isPteOperario) kpiPteOperario++;
|
||||
else if (isFinalizado) kpiFinalizados++;
|
||||
else if (isTrabajando) kpiTrabajando++;
|
||||
else if (isPteCita) kpiPteCita++;
|
||||
|
||||
const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
|
||||
const ref = (s.service_ref || "").toLowerCase();
|
||||
@@ -631,7 +653,6 @@
|
||||
const phone = (raw["Teléfono"] || raw["TELEFONO"] || raw["TELEFONOS"] || "").toLowerCase();
|
||||
const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
|
||||
|
||||
// Ahora sí busca en absolutamente todos los campos
|
||||
const matchesSearch = searchTerm === "" ||
|
||||
name.includes(searchTerm) ||
|
||||
ref.includes(searchTerm) ||
|
||||
@@ -650,13 +671,20 @@
|
||||
|
||||
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-scheduled').innerText = kpiScheduled;
|
||||
document.getElementById('kpi-waiting').innerText = kpiWaiting;
|
||||
document.getElementById('kpi-incident').innerText = kpiIncident;
|
||||
document.getElementById('kpi-pte-operario').innerText = kpiPteOperario;
|
||||
document.getElementById('kpi-pte-cita').innerText = kpiPteCita;
|
||||
document.getElementById('kpi-trabajando').innerText = kpiTrabajando;
|
||||
document.getElementById('kpi-finalizados').innerText = kpiFinalizados;
|
||||
|
||||
const grid = document.getElementById('servicesGrid');
|
||||
grid.innerHTML = filteredData.length > 0
|
||||
|
||||
Reference in New Issue
Block a user