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-15 22:29:05 +00:00
parent f6b59a8407
commit 73d3e037bf
1 changed files with 49 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
servicios.html
View File

@@ -131,34 +131,55 @@
}
function renderLists() {
const pending = localData.filter(s => !s.raw_data.scheduled_date);
const assigned = localData.filter(s => s.raw_data.scheduled_date);
// 1. Pendientes de Cita (Recién aceptados o asignados manual sin fecha)
const pending = localData.filter(s => s.estado_operativo === 'asignado_operario');
// 2. Servicios en Curso (Ya tienen fecha de cita grabada)
const assigned = localData.filter(s => s.estado_operativo === 'citado');
// Renderizamos con colores y textos específicos
document.getElementById('pending-list').innerHTML = pending.length > 0
? pending.map(s => cardTemplate(s, 'blue', 'Asignado a Operario')).join('')
: '<p class="text-center text-gray-400 text-xs py-10">No hay servicios pendientes de cita.</p>';
document.getElementById('assigned-list').innerHTML = assigned.length > 0
? assigned.map(s => cardTemplate(s, 'emerald', 'Citado')).join('')
: '<p class="text-center text-gray-400 text-xs py-10">No hay servicios con cita programada.</p>';
document.getElementById('pending-list').innerHTML = pending.map(s => cardTemplate(s, 'amber')).join('');
document.getElementById('assigned-list').innerHTML = assigned.map(s => cardTemplate(s, 'emerald')).join('');
lucide.createIcons();
}
function cardTemplate(s, color) {
function cardTemplate(s, color, label) {
const raw = s.raw_data;
const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado";
const client = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado";
const addr = raw["Dirección"] || raw["DOMICILIO"] || "---";
const worker = s.assigned_name || 'Sin operario';
const dateStr = raw.scheduled_date ? `${raw.scheduled_date} a las ${raw.scheduled_time}` : 'Sin fecha';
return `
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm card-hover text-left flex items-start justify-between gap-4">
<div class="space-y-1">
<span class="text-[9px] font-black bg-${color}-100 text-${color}-600 px-2 py-0.5 rounded-full uppercase">#${s.service_ref}</span>
<h4 class="font-black text-slate-800 uppercase text-sm leading-tight">${name}</h4>
<div class="flex items-center gap-2 mb-1">
<span class="text-[9px] font-black bg-${color}-100 text-${color}-600 px-2 py-0.5 rounded-full uppercase">${label}</span>
<span class="text-[9px] font-bold text-slate-300">#${s.service_ref}</span>
</div>
<h4 class="font-black text-slate-800 uppercase text-sm leading-tight">${client}</h4>
<p class="text-[10px] text-slate-400 font-bold uppercase truncate max-w-[200px]">${addr}</p>
<div class="flex items-center gap-2 mt-2">
<div class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-slate-400"><i data-lucide="user" class="w-3 h-3"></i></div>
<span class="text-[11px] font-black text-slate-600 uppercase">${worker}</span>
<div class="flex items-center gap-4 mt-3">
<div class="flex items-center gap-1.5">
<div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center text-slate-500"><i data-lucide="user" class="w-3 h-3"></i></div>
<span class="text-[10px] font-black text-slate-600 uppercase">${s.assigned_name || 'Pendiente'}</span>
</div>
${raw.scheduled_date ? `
<div class="flex items-center gap-1.5">
<div class="w-5 h-5 rounded-full bg-blue-50 flex items-center justify-center text-blue-500"><i data-lucide="calendar" class="w-3 h-3"></i></div>
<span class="text-[10px] font-black text-blue-600 uppercase">${dateStr}</span>
</div>` : ''}
</div>
</div>
<div class="flex flex-col gap-2">
<button class="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-blue-50 hover:text-blue-600 transition-all"><i data-lucide="calendar" class="w-5 h-5"></i></button>
<button class="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all"><i data-lucide="message-square" class="w-5 h-5"></i></button>
<button onclick="openCalendarModal(${s.id})" class="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-blue-600 hover:text-white transition-all shadow-sm"><i data-lucide="calendar-plus" class="w-5 h-5"></i></button>
<button onclick="openChat(${s.id})" class="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-emerald-600 hover:text-white transition-all shadow-sm"><i data-lucide="message-circle" class="w-5 h-5"></i></button>
</div>
</div>`;
}