Actualizar index.html

index.html

@@ -9,7 +9,6 @@
     <style>
         body { 
             background-color: #f4f7f9; 
-            /* Patrón de fondo muy sutil */
             background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
             background-size: 24px 24px;
         }
@@ -109,7 +108,6 @@
             
             const urlParams = new URLSearchParams(window.location.search);
             urlToken = urlParams.get('token');
-            const targetServiceId = urlParams.get('service'); // Puede venir o no
 
             if (!urlToken) {
                 showError();
@@ -122,7 +120,7 @@
 
                 if (!data.ok) throw new Error("Token inválido");
 
-                renderPortal(data.client, data.company, data.services, targetServiceId);
+                renderPortal(data.client, data.company, data.services);
 
             } catch (e) {
                 console.error(e);
@@ -139,6 +137,40 @@
             }, 300);
         }
 
+        // LIMPIADOR INTELIGENTE DE TEXTOS DE ASEGURADORAS
+        function summarizeDescription(rawText) {
+            if (!rawText) return "Avería reportada.";
+            
+            // 1. Quitamos los saltos de línea
+            let text = rawText.replace(/\n/g, ' ');
+
+            // 2. Cortamos el texto justo antes de donde empieza la basura habitual de los seguros
+            // (fechas entre paréntesis, "M.O.", "MATERIAL", "ASEGURADO INFORMADO", "URGENTE", etc)
+            const regexCorte = /(\(|\bM\.O\b|\bMATERIAL\b|\bASEGURADO\b|\bTELEFONO\b|\bURGENTE\b)/i;
+            let cutPos = text.search(regexCorte);
+            
+            if (cutPos > 5) { // Si encuentra la palabra clave y no es al inicio
+                text = text.substring(0, cutPos);
+            }
+
+            // 3. Limpiamos espacios extra
+            text = text.trim();
+
+            // 4. Lo pasamos a formato "Capitalizado" (Primera en mayúscula, resto minúsculas)
+            text = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+
+            // 5. Cogemos solo las primeras 8-10 palabras para que quede bonito
+            let words = text.split(/\s+/);
+            if (words.length > 10) {
+                return words.slice(0, 10).join(" ") + "...";
+            }
+            
+            // Si quedó muy vacío, devolvemos genérico
+            if (text.length < 5) return "Reparación general solicitada.";
+
+            return text.endsWith('.') ? text : text + ".";
+        }
+
         // Helper para sumar 1 hora y crear la franja
         function addOneHour(timeStr) {
             if(!timeStr) return "";
@@ -160,7 +192,7 @@
             } catch(e) { return dateStr; }
         }
 
-        function renderPortal(client, company, allServices, targetServiceId) {
+        function renderPortal(client, company, allServices) {
             document.getElementById('companyName').innerText = company.name || "Empresa Reparadora";
             if (company.logo) {
                 document.getElementById('companyLogo').src = company.logo;
@@ -180,11 +212,12 @@
             let hasHistory = false;
 
             allServices.forEach(srv => {
-                const isFinalized = srv.status_name.toLowerCase().includes('terminado') || 
+                const isFinalized = srv.status_name === 'Terminado';
-                                    srv.status_name.toLowerCase().includes('anulado') ||
+                const isPendingWorker = (!srv.assigned_worker || srv.assigned_worker === 'Pendiente');
-                                    srv.status_name.toLowerCase().includes('desasignado');
                 
-                // --- CONSTRUCCIÓN DEL BLOQUE DE ESTADO DEPENDIENDO DE LA SITUACIÓN ---
+                // Procesamos la descripción con la "mini-IA"
+                const descLimpia = summarizeDescription(srv.description);
+
                 let statusHtml = '';
 
                 if (isFinalized) {
@@ -195,16 +228,15 @@
                             <span class="text-xs font-black text-slate-400">${formatDate(srv.scheduled_date) || 'Cerrado'}</span>
                         </div>
                     `;
-                } else if (srv.status_name === 'Pendiente de Asignar') {
+                } else if (isPendingWorker) {
-                    // MODO 1: AÚN NO HAY TÉCNICO
+                    // MODO 1: AÚN NO HAY TÉCNICO (Botón de agendar bloqueado)
-                    // BLOQUEAMOS LA CITA E INFORMAMOS DE QUE ESTAMOS BUSCANDO
                     statusHtml = `
                         <div class="bg-slate-100 border border-slate-200 p-6 rounded-2xl 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="search" class="w-6 h-6 animate-pulse"></i>
                             </div>
                             <h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">Buscando Técnico</h4>
-                            <p class="text-[10px] text-slate-500 font-bold leading-tight px-4">Estamos asignando al técnico más cercano a tu domicilio para esta reparación. <br><br>En cuanto esté asignado, se habilitará la opción de agendar la visita aquí mismo.</p>
+                            <p class="text-[10px] text-slate-500 font-bold leading-tight px-4">Estamos asignando al técnico más cercano a tu domicilio. <br><br>En cuanto esté asignado, se habilitará la opción de agendar la visita aquí mismo.</p>
                         </div>
                     `;
                 } else if (srv.appointment_status === 'pending') {
@@ -218,7 +250,7 @@
                             <p class="text-[10px] text-amber-700 font-bold leading-tight">Tu solicitud de fecha ha sido enviada. El técnico debe confirmarla en breve.</p>
                         </div>
                     `;
-                } else if (srv.status_name === 'Visita Agendada' || srv.status_name === 'Asignado a Técnico') {
+                } else if (srv.status_name === 'Visita Agendada' || (srv.scheduled_date && srv.scheduled_time)) {
                     // MODO 3: CITA CONFIRMADA (FRANJA DE 1 HORA)
                     const endT = addOneHour(srv.scheduled_time);
                     statusHtml = `
@@ -281,9 +313,7 @@
                         </div>
                     `;
                 } else {
-                    // MODO 4: PENDIENTE DE CITA NORMAL (TU DISEÑO QUE TE GUSTABA)
+                    // MODO 4: PENDIENTE DE CITA NORMAL (Tiene técnico, no tiene cita)
-                    // (Solo se llega aquí si no está en otro estado, y al no ser "Pendiente de asignar", 
-                    // significa que YA tiene un operario asignado y puede coger cita).
                     statusHtml = `
                         <div class="bg-blue-50/50 border border-blue-100 p-6 rounded-2xl text-center">
                             <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3 relative">
@@ -305,12 +335,12 @@
                     <div class="bg-white border ${isFinalized ? 'border-slate-100' : 'border-slate-200 shadow-md'} rounded-3xl p-5 mb-4 relative overflow-hidden">
                         
                         <div class="flex justify-between items-start mb-3">
-                            <div>
+                            <div class="pr-2">
-                                <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Expediente ${srv.title}</span>
+                                <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">${srv.title}</span>
-                                <h3 class="font-black text-slate-800 text-sm mt-0.5 leading-tight">${srv.description}</h3>
+                                <h3 class="font-black text-slate-800 text-sm mt-0.5 leading-tight">${descLimpia}</h3>
                             </div>
                             ${srv.assigned_worker && srv.assigned_worker !== 'Pendiente' ? 
-                                `<div class="bg-slate-50 border border-slate-100 px-2 py-1 rounded-md text-center shrink-0 ml-2">
+                                `<div class="bg-slate-50 border border-slate-100 px-2 py-1 rounded-md text-center shrink-0">
                                     <p class="text-[8px] uppercase font-black text-slate-400 mb-0.5">Técnico</p>
                                     <p class="text-[10px] font-bold text-blue-600">${srv.assigned_worker.split(' ')[0]}</p>
                                 </div>` : ''