From cdfe57aa33ac19bfa9acaa441ff6161c45b08d20 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sat, 28 Feb 2026 15:11:34 +0000
Subject: [PATCH] Actualizar index.html

---
 index.html | 72 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index ec0ab6b..d95de7f 100644
--- a/index.html
+++ b/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>
-                            <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>
+                        <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 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>`;
                 }