126 lines
6.4 KiB
Plaintext
126 lines
6.4 KiB
Plaintext
<!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>
|