help_desk/views/agent/herramientas.ejs

<%- include('../partials/header') %>
<% title = 'Mis Herramientas'; %>

<!-- Alertas Flash -->
<% if (success_msg && success_msg.length > 0) { %>
    <% success_msg.forEach(msg => { %>
        <div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas fa-check-circle me-2 fs-5 text-success"></i>
                <div><%= msg %></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <% }) %>
<% } %>
<% if (error_msg && error_msg.length > 0) { %>
    <% error_msg.forEach(msg => { %>
        <div class="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle me-2 fs-5 text-danger"></i>
                <div><%= msg %></div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <% }) %>
<% } %>

<!-- Cabecera de Página -->
<div class="page-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <div class="d-flex align-items-center gap-2 mb-1">
            <h1 class="page-title h3 mb-0">Mis Herramientas & Kits Asignados</h1>
            <span class="badge bg-warning-subtle text-dark border px-2.5 py-1" style="font-size: 0.75rem;">
                <i class="fas fa-toolbox text-warning me-1"></i> Custodia del Técnico
            </span>
        </div>
        <p class="text-muted small mb-0">Revisa tu equipamiento de dotación oficial y los kits asignados para visitas técnicas presenciales.</p>
    </div>
    <div>
        <a href="/agent/dashboard" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 shadow-sm">
            <i class="fas fa-arrow-left"></i>
            <span>Volver a Tickets</span>
        </a>
    </div>
</div>

<!-- Kits y Herramientas Activas en Custodia -->
<div class="row g-3 mb-4">
    <div class="col-12">
        <h5 class="fw-bold text-dark d-flex align-items-center gap-2 mb-3">
            <i class="fas fa-box-open text-primary"></i>
            <span>Equipamiento Activo en Custodia (<%= activas.length %>)</span>
        </h5>
    </div>

    <% if (activas.length === 0) { %>
    <div class="col-12">
        <div class="app-card p-4 text-center">
            <i class="fas fa-toolbox text-muted fs-2 mb-2"></i>
            <h6 class="fw-bold text-dark">No tienes herramientas asignadas en este momento</h6>
            <p class="text-muted small mb-0">Tu supervisor o administrador te asignará los kits de dotación fija o los kits específicos al programar visitas de terreno.</p>
        </div>
    </div>
    <% } %>

    <% activas.forEach(a => { %>
    <div class="col-md-6 col-xl-4">
        <div class="app-card h-100 p-3.5 border shadow-sm rounded-3 d-flex flex-column justify-content-between">
            <div>
                <% if (a.set_foto_url || a.herramienta_foto_url) { %>
                <div class="mb-3 rounded overflow-hidden border shadow-sm" style="height: 130px; background-color: #f8fafc;">
                    <a href="<%= a.set_foto_url || a.herramienta_foto_url %>" target="_blank" title="Ver foto">
                        <img src="<%= a.set_foto_url || a.herramienta_foto_url %>" alt="Foto Equipamiento" style="width: 100%; height: 100%; object-fit: cover;">
                    </a>
                </div>
                <% } %>
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="badge <%= a.tipo_asignacion === 'dotacion_fija' ? 'bg-info-subtle text-info border border-info-subtle' : 'bg-warning-subtle text-dark border border-warning-subtle' %>" style="font-size: 0.7rem;">
                        <i class="fas <%= a.tipo_asignacion === 'dotacion_fija' ? 'fa-id-badge' : 'fa-truck-pickup' %> me-1"></i>
                        <%= a.tipo_asignacion === 'dotacion_fija' ? 'Dotación Fija' : 'Visita FSM' %>
                    </span>
                    <span class="badge bg-success" style="font-size: 0.68rem;">
                        <i class="fas fa-check-circle me-1"></i> En Custodia
                    </span>
                </div>

                <h5 class="fw-bold text-dark mb-1">
                    <%= a.set_nombre || a.herramienta_nombre || 'Equipamiento Técnico' %>
                </h5>
                <% if (a.set_codigo || a.herramienta_codigo) { %>
                    <span class="badge bg-light text-muted border font-monospace mb-2" style="font-size: 0.7rem;">
                        <%= a.set_codigo || a.herramienta_codigo %>
                    </span>
                <% } %>

                <div class="small text-muted mb-3" style="font-size: 0.8rem;">
                    <div><i class="fas fa-calendar-alt text-secondary me-1"></i> Asignado el: <strong><%= new Date(a.fecha_asignacion).toLocaleDateString('es-EC') %></strong></div>
                    <% if (a.asignado_por_nombre) { %>
                        <div><i class="fas fa-user-shield text-secondary me-1"></i> Asignado por: <%= a.asignado_por_nombre %></div>
                    <% } %>
                    <% if (a.ticket_id) { %>
                        <div class="mt-1">
                            <i class="fas fa-ticket-alt text-primary me-1"></i> 
                            Para Ticket: <a href="/agent/ticket/<%= a.ticket_id %>" class="fw-semibold">#<%= a.ticket_id %></a>
                        </div>
                    <% } %>
                </div>

                <% if (a.foto_entrega_url) { %>
                <div class="mb-2">
                    <a href="<%= a.foto_entrega_url %>" target="_blank" class="badge bg-primary-subtle text-primary border border-primary-subtle text-decoration-none d-inline-flex align-items-center gap-1.5 py-1 px-2" style="font-size: 0.72rem;">
                        <i class="fas fa-camera"></i>
                        <span>Ver foto de entrega en custodia</span>
                    </a>
                </div>
                <% } %>

                <% if (a.observaciones_entrega) { %>
                <div class="alert alert-light border p-2 small mb-0 text-muted" style="font-size: 0.75rem;">
                    <i class="fas fa-info-circle me-1 text-info"></i> <%= a.observaciones_entrega %>
                </div>
                <% } %>
            </div>

            <div class="border-top pt-3 mt-3 d-flex align-items-center justify-content-between">
                <span class="small text-muted" style="font-size: 0.72rem;">Reportar novedad a bodega</span>
                <span class="badge bg-light text-dark border font-monospace" style="font-size: 0.7rem;">ID #<%= a.id %></span>
            </div>
        </div>
    </div>
    <% }) %>
</div>

<!-- Historial de Equipamiento Devuelto -->
<div class="row g-3">
    <div class="col-12">
        <h5 class="fw-bold text-dark d-flex align-items-center gap-2 mb-3">
            <i class="fas fa-history text-secondary"></i>
            <span>Historial de Devoluciones (<%= historial.length %>)</span>
        </h5>
    </div>

    <% if (historial.length > 0) { %>
    <div class="col-12">
        <div class="app-card border shadow-sm rounded-3 overflow-hidden">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="font-size: 0.83rem;">
                    <thead class="table-light text-muted small text-uppercase">
                        <tr>
                            <th class="ps-3">Kit / Herramienta</th>
                            <th>Tipo</th>
                            <th>Fecha Entrega</th>
                            <th>Fecha Devolución</th>
                            <th>Observaciones</th>
                            <th>Evidencias</th>
                            <th class="pe-3">Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% historial.forEach(h => { %>
                        <tr>
                            <td class="ps-3 fw-bold text-dark">
                                <%= h.set_nombre || h.herramienta_nombre %>
                            </td>
                            <td>
                                <span class="badge bg-light text-dark border">
                                    <%= h.tipo_asignacion === 'dotacion_fija' ? 'Dotación Fija' : 'Visita FSM' %>
                                </span>
                            </td>
                            <td><%= new Date(h.fecha_asignacion).toLocaleDateString('es-EC') %></td>
                            <td><%= h.fecha_devolucion ? new Date(h.fecha_devolucion).toLocaleDateString('es-EC') : '-' %></td>
                            <td class="text-muted"><%= h.observaciones_devolucion || h.observaciones_entrega || '-' %></td>
                            <td>
                                <div class="d-flex flex-column gap-1">
                                    <% if (h.foto_entrega_url) { %>
                                        <a href="<%= h.foto_entrega_url %>" target="_blank" class="badge bg-primary-subtle text-primary border border-primary-subtle text-decoration-none" style="font-size: 0.68rem;">
                                            <i class="fas fa-camera"></i> Entrega
                                        </a>
                                    <% } %>
                                    <% if (h.foto_devolucion_url) { %>
                                        <a href="<%= h.foto_devolucion_url %>" target="_blank" class="badge bg-success-subtle text-success border border-success-subtle text-decoration-none" style="font-size: 0.68rem;">
                                            <i class="fas fa-camera"></i> Devolución
                                        </a>
                                    <% } %>
                                </div>
                            </td>
                            <td class="pe-3">
                                <span class="badge <%= h.estado === 'devuelto' ? 'bg-secondary' : 'bg-warning text-dark' %>">
                                    <%= h.estado %>
                                </span>
                            </td>
                        </tr>
                        <% }) %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <% } %>
</div>

<%- include('../partials/footer') %>