From f27aa378deea3192d8c94b40c61a21f99dac10c0 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 1 Mar 2026 22:42:03 +0000
Subject: [PATCH] Actualizar trazabilidad.html

---
 trazabilidad.html | 36 +++++++-----------------------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/trazabilidad.html b/trazabilidad.html
index d530ca8..5660c15 100644
--- a/trazabilidad.html
+++ b/trazabilidad.html
@@ -12,7 +12,6 @@
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
         
-        /* Línea continua del timeline */
         .timeline-line::before {
             content: ''; position: absolute; top: 0; bottom: 0; left: 23px; width: 2px; background: #e2e8f0; z-index: 0;
         }
@@ -107,8 +106,7 @@
                             </div>
                         </div>
 
-                        <div class="relative timeline-line ml-2 md:ml-4 pb-20" id="timelineContainer">
-                            </div>
+                        <div class="relative timeline-line ml-2 md:ml-4 pb-20" id="timelineContainer"></div>
                     </div>
 
                 </main>
@@ -121,8 +119,7 @@
     <script src="js/layout.js"></script>
     
     <script>
-        const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
-
+        // API_URL ya viene declarada en layout.js, NO la declares de nuevo aquí.
 
         let allServices = [];
         let currentServiceId = null;
@@ -131,7 +128,6 @@
             if (!localStorage.getItem("token")) window.location.href = "index.html";
             lucide.createIcons();
             
-            // Ponemos el mes actual por defecto
             const now = new Date();
             const currentMonthStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
             document.getElementById('monthBox').value = currentMonthStr;
@@ -139,7 +135,6 @@
             loadAllServices();
         });
 
-        // 1. CARGAMOS TODOS LOS SERVICIOS AL ENTRAR
         async function loadAllServices() {
             try {
                 const res = await fetch(`${API_URL}/providers/scraped`, {
@@ -149,9 +144,8 @@
                 
                 if (data.ok && data.services) {
                     allServices = data.services;
-                    renderServices(); // Pintamos la lista
+                    renderServices();
                     
-                    // Si nos pasaron un ID por la URL, lo seleccionamos automáticamente
                     const urlParams = new URLSearchParams(window.location.search);
                     const paramId = urlParams.get('id');
                     if (paramId) {
@@ -169,11 +163,10 @@
             }
         }
 
-        // 2. PINTAR LA LISTA LATERAL CON FILTROS
         function renderServices() {
             const list = document.getElementById('servicesList');
             const search = document.getElementById('searchBox').value.toLowerCase();
-            const month = document.getElementById('monthBox').value; // Formato YYYY-MM
+            const month = document.getElementById('monthBox').value;
 
             const filtered = allServices.filter(s => {
                 const raw = s.raw_data || {};
@@ -187,7 +180,6 @@
                     matchesMonth = svcDate === month;
                 }
 
-                // Omitir bloqueos de agenda
                 return matchesSearch && matchesMonth && s.provider !== 'SYSTEM_BLOCK';
             });
 
@@ -229,14 +221,10 @@
             lucide.createIcons();
         }
 
-        // 3. AL HACER CLIC EN UN SERVICIO, CARGAMOS SU TIMELINE
         function selectService(id, ref, statusText) {
             currentServiceId = id;
-            
-            // Actualizamos la lista para pintar de azul el seleccionado
             renderServices();
 
-            // Actualizar URL sin recargar para que si refresca se quede donde estaba
             const newUrl = new URL(window.location);
             newUrl.searchParams.set('id', id);
             window.history.pushState({}, '', newUrl);
@@ -294,7 +282,6 @@
                     const fecha = esHoy ? "Hoy" : dateObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
                     const hora = dateObj.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
 
-                    // Lógica de colores del timeline
                     let icon = "activity";
                     let colorClass = "bg-slate-100 text-slate-600 border-slate-200";
                     let dotClass = "bg-slate-300 ring-slate-100";
@@ -344,7 +331,6 @@
                     `;
                 });
                 lucide.createIcons();
-
             } catch (error) {
                 document.getElementById('timelineContainer').innerHTML = "<p class='text-red-500 pl-14 pt-4 font-bold relative z-10'>No se pudo conectar con el servidor.</p>";
             }
@@ -352,37 +338,29 @@
 
         async function addManualNote(btn) {
             if (!currentServiceId) return showToast("⚠️ Selecciona un expediente primero.");
-
             const input = document.getElementById('manualNoteInput');
             const text = input.value.trim();
-            
             if (!text) {
                 showToast("⚠️ Escribe un apunte antes de guardar.");
                 input.focus();
                 return;
             }
-
             const originalHtml = btn.innerHTML;
             btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
             btn.disabled = true;
-
             try {
                 const res = await fetch(`${API_URL}/services/${currentServiceId}/log`, {
                     method: 'POST',
                     headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
                     body: JSON.stringify({ action: "Nota Manual", details: text })
                 });
-                
                 if(res.ok) {
                     input.value = "";
                     showToast("✅ Apunte guardado correctamente");
                     loadLogsForService(currentServiceId); 
-                } else {
-                    throw new Error("Error del servidor");
-                }
-            } catch (e) {
-                showToast("❌ Error al guardar la nota.");
-            } finally {
+                } else { throw new Error("Error del servidor"); }
+            } catch (e) { showToast("❌ Error al guardar la nota."); }
+            finally {
                 btn.innerHTML = originalHtml;
                 btn.disabled = false;
                 lucide.createIcons();