From 5324d5f433b17f9ecc77c454982bbe82c41a9730 Mon Sep 17 00:00:00 2001
From: pablinux <pablinux@hotmail.es>
Date: Sat, 17 Oct 2026 03:45:37 -0500
Subject: [PATCH] feat(ui): enriquecer mini-timeline con bitacora de
 timeline_eventos y renderizado de firma digital

---
 views/agent/view-ticket.ejs | 42 ++++++++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/views/agent/view-ticket.ejs b/views/agent/view-ticket.ejs
index 3f0a51c..33b8308 100644
--- a/views/agent/view-ticket.ejs
+++ b/views/agent/view-ticket.ejs
@@ -146,9 +146,11 @@
                                     <div class="mb-2">
                                         <div class="fw-bold mb-1">Fotos de campo:</div>
                                         <div class="d-flex flex-wrap gap-1">
-                                            <% visita.historial.evidencias.forEach(foto => { %>
-                                                <a href="<%= foto.url %>" target="_blank" title="<%= foto.descripcion || 'Evidencia' %>">
-                                                    <img src="<%= foto.url %>" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" alt="Evidencia">
+                                            <% visita.historial.evidencias.forEach(foto => { 
+                                                const fotoUrl = foto.url.startsWith('http') ? foto.url : ('https://tareas.telcotronics.com' + foto.url);
+                                            %>
+                                                <a href="<%= fotoUrl %>" target="_blank" title="<%= foto.descripcion || 'Evidencia' %>">
+                                                    <img src="<%= fotoUrl %>" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" alt="Evidencia">
                                                 </a>
                                             <% }) %>
                                         </div>
@@ -156,10 +158,19 @@
                                 <% } %>
 
                                 <!-- Firma del cliente -->
-                                <% if (visita.historial && visita.historial.firma_cliente && visita.historial.firma_cliente.firmado) { %>
-                                    <div class="badge bg-success bg-opacity-75 text-white w-100 py-1">
+                                <% if (visita.historial && visita.historial.firma_cliente && visita.historial.firma_cliente.firmado) { 
+                                    const firmaUrl = visita.historial.firma_cliente.firmaUrl ? (visita.historial.firma_cliente.firmaUrl.startsWith('http') ? visita.historial.firma_cliente.firmaUrl : ('https://tareas.telcotronics.com' + visita.historial.firma_cliente.firmaUrl)) : null;
+                                %>
+                                    <div class="badge bg-success bg-opacity-75 text-white w-100 py-1 mb-1">
                                         <i class="fas fa-file-signature me-1"></i> Firmado: <%= visita.historial.firma_cliente.nombreFirmante %>
                                     </div>
+                                    <% if (firmaUrl) { %>
+                                        <div class="text-center mb-1">
+                                            <a href="<%= firmaUrl %>" target="_blank" class="small text-decoration-none">
+                                                <img src="<%= firmaUrl %>" alt="Firma cliente" class="border rounded bg-white p-1" style="max-height: 40px; max-width: 100%;">
+                                            </a>
+                                        </div>
+                                    <% } %>
                                 <% } else { %>
                                     <small class="text-muted d-block"><i class="fas fa-pen"></i> Pendiente firma cliente</small>
                                 <% } %>
@@ -188,6 +199,27 @@
                         </div>
                     </div>
 
+                    <!-- Bitácora Detallada de Eventos del Timeline Operativo -->
+                    <% if (visita.historial && visita.historial.timeline_eventos && visita.historial.timeline_eventos.length > 0) { %>
+                        <div class="mt-3 pt-2 border-top">
+                            <a class="small text-decoration-none d-flex justify-content-between align-items-center text-secondary" data-bs-toggle="collapse" href="#collapseEventos" role="button" aria-expanded="false">
+                                <span><i class="fas fa-history me-1"></i> Bitácora de eventos (<%= visita.historial.timeline_eventos.length %>)</span>
+                                <i class="fas fa-chevron-down"></i>
+                            </a>
+                            <div class="collapse mt-2" id="collapseEventos">
+                                <ul class="list-unstyled mb-0" style="font-size: 0.78rem;">
+                                    <% visita.historial.timeline_eventos.forEach(ev => { %>
+                                        <li class="mb-2 pb-1 border-bottom border-light">
+                                            <div class="fw-bold text-dark"><%= ev.titulo %></div>
+                                            <% if (ev.descripcion) { %><div class="text-muted"><%= ev.descripcion %></div><% } %>
+                                            <div class="text-muted" style="font-size: 0.7rem;"><i class="fas fa-clock"></i> <%= new Date(ev.fecha).toLocaleString('es-EC') %> - <%= ev.usuarioNombre || 'Sistema' %></div>
+                                        </li>
+                                    <% }) %>
+                                </ul>
+                            </div>
+                        </div>
+                    <% } %>
+
                     <div class="text-center mt-3 pt-2 border-top">
                         <a href="https://tareas.telcotronics.com" target="_blank" class="small text-muted text-decoration-none">
                             <i class="fas fa-external-link-alt me-1"></i> Abrir en tareas.telcotronics.com