Actualizar index.html
This commit is contained in:
70
index.html
70
index.html
@@ -164,14 +164,16 @@
|
||||
const hasDate = !!(srv.scheduled_date && srv.scheduled_time);
|
||||
let statusHtml = '';
|
||||
|
||||
// ESTRUCTURA INTELIGENTE DE ESTADOS
|
||||
if (isFinalized) {
|
||||
// ESTRUCTURA INTELIGENTE DE ESTADOS (Mapea los 10 estados de tu sistema)
|
||||
const stNameLower = (srv.status_name || '').toLowerCase();
|
||||
|
||||
if (isFinalized || stNameLower.includes('finalizado') || stNameLower.includes('anulado')) {
|
||||
statusHtml = `
|
||||
<div class="bg-slate-50 border border-slate-200 p-4 rounded-2xl flex items-center justify-between opacity-70 grayscale">
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase flex items-center gap-1.5"><i data-lucide="archive" class="w-3.5 h-3.5"></i> ${srv.status_name}</span>
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase flex items-center gap-1.5"><i data-lucide="archive" class="w-3.5 h-3.5"></i> ${srv.status_name || 'Cerrado'}</span>
|
||||
</div>`;
|
||||
}
|
||||
else if (stName.includes('camino')) {
|
||||
else if (stNameLower.includes('camino')) {
|
||||
const fullAddr = `${raw["Dirección"] || ""}, ${raw["Código Postal"] || ""} ${raw["Población"] || ""}`;
|
||||
etasToInit.push({ id: srv.id, address: fullAddr });
|
||||
|
||||
@@ -191,17 +193,17 @@
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
else if (stName.includes('reparación') || stName.includes('trabajando')) {
|
||||
else if (stNameLower.includes('trabajando') || stNameLower.includes('reparación')) {
|
||||
statusHtml = `
|
||||
<div class="bg-orange-50 border border-orange-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner">
|
||||
<div class="w-14 h-14 bg-orange-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0"><i data-lucide="hammer" class="w-7 h-7"></i></div>
|
||||
<div>
|
||||
<h4 class="font-black text-orange-800 uppercase text-base tracking-tight">En Reparación</h4>
|
||||
<p class="text-[10px] text-orange-600 font-bold mt-1.5 leading-tight">El técnico está trabajando en tu domicilio.</p>
|
||||
<h4 class="font-black text-orange-800 uppercase text-base tracking-tight">Trabajando</h4>
|
||||
<p class="text-[10px] text-orange-600 font-bold mt-1.5 leading-tight">El técnico está realizando la reparación en tu domicilio.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else if (stName.includes('incidencia')) {
|
||||
else if (stNameLower.includes('incidencia')) {
|
||||
statusHtml = `
|
||||
<div class="bg-rose-50 border border-rose-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner">
|
||||
<div class="w-14 h-14 bg-rose-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0 animate-pulse">
|
||||
@@ -213,7 +215,7 @@
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else if (hasDate && !stName.includes('anulado') && !stName.includes('desasignado')) {
|
||||
else if (hasDate && !stNameLower.includes('anulado') && !stNameLower.includes('desasignado')) {
|
||||
// ESTÁ AGENDADO (COMPROBAMOS SI LLEGA TARDE)
|
||||
const endT = addOneHour(srv.scheduled_time);
|
||||
const now = new Date();
|
||||
@@ -236,7 +238,7 @@
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[9px] font-black uppercase tracking-widest text-amber-500 mb-0.5">Disculpe el retraso</p>
|
||||
<h4 class="font-black text-amber-900 uppercase text-lg leading-none mb-1.5 tracking-tight">Técnico Demorado</h4>
|
||||
<p class="text-[10px] font-bold text-amber-700 leading-tight">La cita estaba prevista entre las <b>${srv.scheduled_time} y las ${endT}</b>. El técnico ha tenido un contratiempo en la ruta anterior. Llegará lo antes posible.</p>
|
||||
<p class="text-[10px] font-bold text-amber-700 leading-tight">La cita estaba prevista entre las <b>${srv.scheduled_time} y las ${endT}</b>. El técnico llegará lo antes posible.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-amber-200/60 relative z-10">
|
||||
@@ -264,8 +266,24 @@
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
else if (stName.includes('esperando') || stName.includes('pendiente de cita') || (srv.assigned_worker && srv.assigned_worker !== 'Pendiente' && !hasDate)) {
|
||||
// ESTÁ ASIGNADO PERO FALTA LA CITA
|
||||
else if (raw.appointment_status === 'pending' && raw.requested_date) {
|
||||
// CITA SOLICITADA PERO NO CONFIRMADA
|
||||
statusHtml = `
|
||||
<div class="bg-purple-50 border border-purple-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
|
||||
<div class="flex items-center gap-4 relative z-10">
|
||||
<div class="w-14 h-14 bg-purple-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0">
|
||||
<i data-lucide="hourglass" class="w-7 h-7 animate-pulse"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-[9px] font-black uppercase tracking-widest text-purple-500 mb-0.5">En Revisión</p>
|
||||
<h4 class="font-black text-purple-900 uppercase text-lg leading-none mb-1.5 tracking-tight">Cita Solicitada</h4>
|
||||
<p class="text-[10px] font-bold text-purple-700 leading-tight">Has solicitado cita para el <b>${formatDate(raw.requested_date)} a las ${raw.requested_time}</b>. El técnico está revisando su ruta para confirmarla.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else if (stNameLower.includes('esperando') || stNameLower.includes('asignado') || (hasWorker && !hasDate)) {
|
||||
// ASIGNADO / ESPERANDO AL CLIENTE -> AGENDAR CITA AHORA
|
||||
statusHtml = `
|
||||
<div class="bg-blue-50 border border-blue-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
|
||||
<div class="flex items-center gap-4 relative z-10">
|
||||
@@ -285,13 +303,31 @@
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else {
|
||||
// ESTADO GENÉRICO CON EL NOMBRE REAL
|
||||
else if (stNameLower.includes('desasignado')) {
|
||||
statusHtml = `
|
||||
<div class="bg-slate-100 border border-slate-200 p-6 rounded-3xl text-center">
|
||||
<div class="w-12 h-12 bg-slate-200 text-slate-500 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="info" class="w-6 h-6"></i></div>
|
||||
<div class="bg-slate-100 border border-slate-200 p-6 rounded-3xl flex items-center gap-4 shadow-inner">
|
||||
<div class="w-12 h-12 bg-slate-300 text-slate-600 rounded-2xl flex items-center justify-center shrink-0">
|
||||
<i data-lucide="user-x" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Reorganizando</p>
|
||||
<h4 class="font-black text-slate-700 uppercase text-sm tracking-tight">Desasignado</h4>
|
||||
<p class="text-[10px] text-slate-500 font-bold mt-1 leading-tight">Buscando un nuevo técnico para tu zona.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
else {
|
||||
// PENDIENTE DE ASIGNAR / DEFAULT
|
||||
statusHtml = `
|
||||
<div class="bg-slate-100 border border-slate-200 p-6 rounded-3xl flex items-center gap-4 shadow-inner">
|
||||
<div class="w-12 h-12 bg-slate-200 text-slate-500 rounded-2xl flex items-center justify-center shrink-0">
|
||||
<i data-lucide="search" class="w-6 h-6 animate-pulse"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Estado actual</p>
|
||||
<h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">${srv.status_name || 'En Gestión'}</h4>
|
||||
<h4 class="font-black text-slate-700 uppercase text-sm tracking-tight">${srv.status_name || 'Pendiente de Asignar'}</h4>
|
||||
<p class="text-[10px] text-slate-500 font-bold mt-1 leading-tight">Buscando al técnico adecuado para tu avería...</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user