help_desk/views/public/qr_asignacion.ejs

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asignación de Equipamiento | Help Desk</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f1f5f9;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: #1e293b;
            padding-bottom: 2rem;
        }
        .header-bar {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            padding: 1.5rem 1rem;
            border-bottom: 3px solid #10b981;
        }
        .card-custom {
            background: #ffffff;
            border-radius: 0.85rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            border: 1px solid #e2e8f0;
            overflow: hidden;
            margin-top: -1rem;
        }
    </style>
</head>
<body>

    <header class="header-bar text-center">
        <div class="container" style="max-width: 600px;">
            <div class="d-inline-flex align-items-center gap-2 mb-1">
                <i class="fas fa-id-badge text-success fs-5"></i>
                <span class="text-uppercase fw-bold small tracking-wide" style="letter-spacing: 1px; color: #94a3b8;"><%= asig.company_name || 'Telcotronics' %></span>
            </div>
            <h1 class="h4 fw-bold mb-1 text-white"><%= asig.set_nombre || asig.herramienta_nombre || 'Equipamiento' %></h1>
            <div class="d-flex align-items-center justify-content-center gap-2">
                <span class="badge bg-secondary font-monospace"><%= asig.set_codigo || asig.herramienta_codigo || 'ASIG-' + asig.id %></span>
                <span class="badge bg-success"><%= asig.tipo_asignacion === 'dotacion_fija' ? 'Dotación Fija' : 'Visita FSM' %></span>
            </div>
        </div>
    </header>

    <div class="container" style="max-width: 600px;">
        <div class="card-custom p-3 p-sm-4 mb-3">
            
            <!-- Estado -->
            <div class="d-flex align-items-center justify-content-between mb-3 p-3 rounded bg-light border">
                <div>
                    <div class="text-muted small">Técnico Responsable</div>
                    <div class="fw-bold fs-6 text-dark"><%= asig.tecnico_nombre %></div>
                    <div class="small text-muted"><%= asig.tecnico_email %></div>
                </div>
                <div>
                    <% if (asig.estado === 'asignado') { %>
                        <span class="badge bg-success fs-6"><i class="fas fa-check-circle me-1"></i> En Custodia</span>
                    <% } else if (asig.estado === 'devuelto') { %>
                        <span class="badge bg-secondary fs-6"><i class="fas fa-undo me-1"></i> Devuelto</span>
                    <% } else { %>
                        <span class="badge bg-warning text-dark fs-6"><%= asig.estado %></span>
                    <% } %>
                </div>
            </div>

            <!-- Detalles -->
            <div class="small text-muted mb-3">
                <div><i class="fas fa-calendar-alt text-secondary me-1.5"></i> Fecha Asignación: <strong><%= new Date(asig.fecha_asignacion).toLocaleString('es-EC') %></strong></div>
                <% if (asig.asignado_por_nombre) { %>
                    <div><i class="fas fa-user-shield text-secondary me-1.5"></i> Despachado por: <strong><%= asig.asignado_por_nombre %></strong></div>
                <% } %>
                <% if (asig.ticket_id) { %>
                    <div class="mt-1"><i class="fas fa-ticket-alt text-primary me-1.5"></i> Ticket: <strong>#<%= asig.ticket_id %></strong> (<%= asig.visita_titulo || asig.ticket_asunto || '' %>)</div>
                <% } %>
            </div>

            <% if (asig.foto_entrega_url) { %>
            <div class="mb-3">
                <div class="small fw-bold text-dark mb-1"><i class="fas fa-camera text-primary me-1"></i> Evidencia Fotográfica de Entrega:</div>
                <div class="rounded overflow-hidden border">
                    <img src="<%= asig.foto_entrega_url %>" alt="Foto Entrega" style="width: 100%; max-height: 240px; object-fit: cover;">
                </div>
            </div>
            <% } %>

            <% if (asig.foto_devolucion_url) { %>
            <div class="mb-3">
                <div class="small fw-bold text-dark mb-1"><i class="fas fa-camera text-success me-1"></i> Evidencia Fotográfica de Devolución:</div>
                <div class="rounded overflow-hidden border">
                    <img src="<%= asig.foto_devolucion_url %>" alt="Foto Devolución" style="width: 100%; max-height: 240px; object-fit: cover;">
                </div>
            </div>
            <% } %>

            <!-- Lista de Herramientas -->
            <h6 class="fw-bold text-dark mb-2 mt-3"><i class="fas fa-toolbox text-primary me-1"></i> Herramientas Incluidas (<%= herramientas.length %>)</h6>
            <div class="list-group rounded shadow-none border mb-3">
                <% herramientas.forEach(h => { %>
                <div class="list-group-item p-2.5 d-flex align-items-center justify-content-between">
                    <div>
                        <div class="fw-bold text-dark" style="font-size: 0.85rem;"><%= h.nombre %></div>
                        <div class="text-muted small" style="font-size: 0.72rem;">
                            <%= h.marca || '' %> <%= h.modelo ? `(${h.modelo})` : '' %>
                            <% if (h.numero_serie) { %> • SN: <%= h.numero_serie %><% } %>
                        </div>
                    </div>
                    <span class="badge bg-light text-muted border font-monospace" style="font-size: 0.68rem;"><%= h.codigo || 'HERR-' + h.id %></span>
                </div>
                <% }) %>
            </div>

            <button type="button" class="btn btn-primary btn-sm w-100 shadow-sm" onclick="window.location.reload()">
                <i class="fas fa-arrows-rotate me-1"></i> Actualizar
            </button>
        </div>

        <footer class="text-center text-muted small" style="font-size: 0.75rem;">
            Sistema Help Desk & FSM • Telcotronics Ecosystem
        </footer>
    </div>
</body>
</html>