feat(ui): rediseño integral de UI/UX de la aplicación (navbar, sidebar offcanvas, KPIs, tablas y chat de tickets)
This commit is contained in:
+248
-55
@@ -1,75 +1,268 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Panel de ' + (user.rol === 'admin' ? 'Administración' : 'Agente'); %>
|
||||
<% title = 'Bandeja de Tickets - Panel ' + (user.rol === 'admin' ? 'Administrativo' : 'Operativo'); %>
|
||||
|
||||
<%
|
||||
const totalCount = tickets.length;
|
||||
const abiertosCount = stats.find(s => s.status === 'abierto') ? stats.find(s => s.status === 'abierto').total : 0;
|
||||
const progresoCount = stats.find(s => s.status === 'en_progreso') ? stats.find(s => s.status === 'en_progreso').total : 0;
|
||||
const cerradosCount = stats.find(s => s.status === 'cerrado') ? stats.find(s => s.status === 'cerrado').total : 0;
|
||||
%>
|
||||
|
||||
<!-- Alertas Flash -->
|
||||
<% if (success_msg && success_msg.length > 0) { %>
|
||||
<% success_msg.forEach(msg => { %>
|
||||
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
|
||||
<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 class="fw-medium"><%= msg %></div>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
<% if (error_msg && error_msg.length > 0) { %>
|
||||
<% error_msg.forEach(msg => { %>
|
||||
<div class="alert alert-danger alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
|
||||
<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 class="fw-medium"><%= msg %></div>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Panel de <%= user.rol === 'admin' ? 'Administración' : 'Agente' %></h1>
|
||||
<!-- 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">Consola de Triaje y Soporte</h1>
|
||||
<span class="badge bg-indigo bg-opacity-10 text-indigo border border-indigo border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem; color: #4f46e5;">
|
||||
<i class="fas fa-headset me-1"></i> Personal Técnico & FSM
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Gestión activa de incidencias, programación de visitas y despacho a campo.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<% stats.forEach(s => { %>
|
||||
<% const color = s.status === 'abierto' ? 'success' : s.status === 'en_progreso' ? 'primary' : 'secondary' %>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card border-<%= color %> text-<%= color %>">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title"><%= s.status %></h5>
|
||||
<h2><%= s.total %></h2>
|
||||
<!-- Tarjetas de Métricas Operativas (KPIs) -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="kpi-card">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<span class="kpi-label">Tickets Asignados</span>
|
||||
<div class="kpi-icon-box bg-primary-subtle text-primary">
|
||||
<i class="fas fa-tasks"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value"><%= totalCount %></div>
|
||||
<div class="kpi-subtext text-muted">En tu ámbito operativo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="kpi-card">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<span class="kpi-label">Pendientes / Nuevos</span>
|
||||
<div class="kpi-icon-box bg-success-subtle text-success">
|
||||
<i class="fas fa-bell"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value text-success"><%= abiertosCount %></div>
|
||||
<div class="kpi-subtext text-muted">Requieren primera respuesta</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="kpi-card">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<span class="kpi-label">En Progreso / Terreno</span>
|
||||
<div class="kpi-icon-box bg-info-subtle text-info">
|
||||
<i class="fas fa-truck"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value text-info"><%= progresoCount %></div>
|
||||
<div class="kpi-subtext text-muted">Visitas o diagnóstico FSM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="kpi-card">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<span class="kpi-label">Casos Cerrados</span>
|
||||
<div class="kpi-icon-box bg-secondary-subtle text-secondary">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value text-secondary"><%= cerradosCount %></div>
|
||||
<div class="kpi-subtext text-muted">Resueltos satisfactoriamente</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bandeja de Tickets -->
|
||||
<div class="app-card mb-4">
|
||||
<div class="app-card-header d-flex flex-wrap justify-content-between align-items-center gap-2 p-3">
|
||||
|
||||
<!-- Filtros rápidos por estado -->
|
||||
<div class="d-flex flex-wrap align-items-center gap-1.5" id="statusFilterButtons">
|
||||
<button type="button" class="btn btn-sm btn-filter active" onclick="filterByStatus('all', this)">
|
||||
Todos (<%= tickets.length %>)
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-filter" onclick="filterByStatus('abierto', this)">
|
||||
<span class="status-dot-sm bg-success"></span> Abiertos (<%= abiertosCount %>)
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-filter" onclick="filterByStatus('en_progreso', this)">
|
||||
<span class="status-dot-sm bg-primary"></span> En Progreso (<%= progresoCount %>)
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-filter" onclick="filterByStatus('cerrado', this)">
|
||||
<span class="status-dot-sm bg-secondary"></span> Cerrados (<%= cerradosCount %>)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Búsqueda en vivo -->
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="input-group input-group-sm search-input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted"></i></span>
|
||||
<input type="text" id="agentSearchInput" class="form-control border-start-0 ps-0" placeholder="Buscar ticket, cliente o área..." onkeyup="filterAgentTable()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table app-table mb-0" id="agentTicketsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 75px;">ID</th>
|
||||
<th>Cliente / Solicitante</th>
|
||||
<th>Asunto</th>
|
||||
<th>Departamento</th>
|
||||
<th>Prioridad</th>
|
||||
<th>Estado</th>
|
||||
<th>Técnico Asignado</th>
|
||||
<th>Fecha</th>
|
||||
<th class="text-end" style="width: 110px;">Gestión</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if (tickets.length === 0) { %>
|
||||
<tr>
|
||||
<td colspan="9" class="text-center py-5">
|
||||
<div class="empty-state-wrapper text-center">
|
||||
<img src="/img/bot-soporte.svg" alt="Sin tickets" width="72" height="72" class="mb-3 opacity-75">
|
||||
<h5 class="fw-bold text-dark">No hay tickets asignados</h5>
|
||||
<p class="text-muted small mb-0">La bandeja se encuentra al día y libre de incidencias pendientes.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
|
||||
<% tickets.forEach(t => { %>
|
||||
<tr class="agent-ticket-row" data-status="<%= t.status %>">
|
||||
<td>
|
||||
<span class="badge bg-light text-dark border fw-bold">#<%= t.id %></span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="user-avatar-initials-sm">
|
||||
<%= (t.usuario_nombre || 'C').charAt(0).toUpperCase() %>
|
||||
</div>
|
||||
<div class="text-truncate" style="max-width: 160px;">
|
||||
<div class="fw-semibold text-dark text-truncate" style="font-size: 0.82rem;"><%= t.usuario_nombre %></div>
|
||||
<small class="text-muted text-truncate d-block" style="font-size: 0.70rem;"><%= t.usuario_email || '' %></small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold text-dark text-truncate" style="max-width: 250px;">
|
||||
<%= t.asunto %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-light text-secondary border fw-medium" style="font-size: 0.74rem;">
|
||||
<%= t.departamento_nombre || 'General' %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<% if (t.prioridad === 'critica') { %>
|
||||
<span class="priority-pill priority-critica"><i class="fas fa-fire me-1"></i>Crítica</span>
|
||||
<% } else if (t.prioridad === 'alta') { %>
|
||||
<span class="priority-pill priority-alta"><i class="fas fa-exclamation-circle me-1"></i>Alta</span>
|
||||
<% } else if (t.prioridad === 'media') { %>
|
||||
<span class="priority-pill priority-media"><i class="fas fa-minus-circle me-1"></i>Media</span>
|
||||
<% } else { %>
|
||||
<span class="priority-pill priority-baja"><i class="fas fa-arrow-down me-1"></i>Baja</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<% if (t.status === 'abierto') { %>
|
||||
<span class="status-pill status-abierto"><span class="status-dot"></span>Abierto</span>
|
||||
<% } else if (t.status === 'en_progreso') { %>
|
||||
<span class="status-pill status-en-progreso"><span class="status-dot"></span>En Progreso</span>
|
||||
<% } else { %>
|
||||
<span class="status-pill status-cerrado"><span class="status-dot"></span>Cerrado</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<% if (t.asignado_nombre) { %>
|
||||
<span class="d-inline-flex align-items-center gap-1 text-secondary small" style="font-size: 0.78rem;">
|
||||
<i class="fas fa-user-check text-success"></i>
|
||||
<%= t.asignado_nombre %>
|
||||
</span>
|
||||
<% } else { %>
|
||||
<span class="badge bg-light text-muted border" style="font-size: 0.70rem;">Sin asignar</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small" style="font-size: 0.74rem;">
|
||||
<%= new Date(t.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short' }) %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a href="/agent/ticket/<%= t.id %>" class="btn btn-action-view btn-sm d-inline-flex align-items-center gap-1 shadow-sm">
|
||||
<span>Gestionar</span>
|
||||
<i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Usuario</th>
|
||||
<th>Asunto</th>
|
||||
<th>Departamento</th>
|
||||
<th>Prioridad</th>
|
||||
<th>Estado</th>
|
||||
<th>Asignado</th>
|
||||
<th>Fecha</th>
|
||||
<th>Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if (tickets.length === 0) { %>
|
||||
<tr><td colspan="9" class="text-center">No hay tickets</td></tr>
|
||||
<% } %>
|
||||
<% tickets.forEach(t => { %>
|
||||
<tr>
|
||||
<td>#<%= t.id %></td>
|
||||
<td><%= t.usuario_nombre || '' %></td>
|
||||
<td><%= t.asunto %></td>
|
||||
<td><%= t.departamento_nombre || 'Sin depto' %></td>
|
||||
<td>
|
||||
<span class="badge bg-<%= t.prioridad === 'alta' ? 'danger' : t.prioridad === 'critica' ? 'dark' : t.prioridad === 'media' ? 'warning' : 'info' %>"><%= t.prioridad %></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-<%= t.status === 'abierto' ? 'success' : t.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= t.status %></span>
|
||||
</td>
|
||||
<td><%= t.asignado_nombre || 'Sin asignar' %></td>
|
||||
<td><%= t.created_at %></td>
|
||||
<td>
|
||||
<a href="/agent/ticket/<%= t.id %>" class="btn btn-sm btn-info"><i class="fas fa-eye"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script>
|
||||
let currentStatusFilter = 'all';
|
||||
|
||||
function filterByStatus(status, btn) {
|
||||
currentStatusFilter = status;
|
||||
|
||||
// Actualizar estado de botones
|
||||
document.querySelectorAll('#statusFilterButtons .btn-filter').forEach(b => b.classList.remove('active'));
|
||||
if (btn) btn.classList.add('active');
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function filterAgentTable() {
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const query = document.getElementById('agentSearchInput').value.toLowerCase();
|
||||
const rows = document.querySelectorAll('#agentTicketsTable tbody tr.agent-ticket-row');
|
||||
|
||||
rows.forEach(row => {
|
||||
const rowStatus = row.getAttribute('data-status');
|
||||
const rowText = row.innerText.toLowerCase();
|
||||
|
||||
const matchesStatus = (currentStatusFilter === 'all' || rowStatus === currentStatusFilter);
|
||||
const matchesQuery = (query === '' || rowText.includes(query));
|
||||
|
||||
if (matchesStatus && matchesQuery) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<%- include('../partials/footer') %>
|
||||
|
||||
+249
-121
@@ -1,95 +1,160 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Ticket #' + ticket.id; %>
|
||||
<% title = 'Ticket #' + ticket.id + ' — Gestión Operativa'; %>
|
||||
|
||||
<!-- Alertas Flash -->
|
||||
<% if (success_msg && success_msg.length > 0) { %>
|
||||
<% success_msg.forEach(msg => { %>
|
||||
<div class="alert alert-success alert-dismissible fade show mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
|
||||
<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 mt-3"><%= msg %><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
|
||||
<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>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Ticket #<%= ticket.id %>: <%= ticket.asunto %></h1>
|
||||
<a href="/agent/dashboard" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Volver</a>
|
||||
<!-- 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 flex-wrap align-items-center gap-2 mb-1">
|
||||
<span class="badge bg-light text-dark border px-2.5 py-1.5 fw-bold" style="font-size: 0.85rem;">Ticket #<%= ticket.id %></span>
|
||||
<h1 class="page-title h3 mb-0"><%= ticket.asunto %></h1>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 text-muted small">
|
||||
<span><i class="far fa-calendar-alt me-1"></i><%= new Date(ticket.created_at).toLocaleString('es-ES') %></span>
|
||||
<span>•</span>
|
||||
<span><i class="fas fa-user me-1"></i><%= ticket.usuario_nombre %> (<%= ticket.usuario_email %>)</span>
|
||||
<span>•</span>
|
||||
<span><i class="fas fa-folder me-1"></i><%= ticket.departamento_nombre || 'General' %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<a href="/agent/dashboard" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3 shadow-sm">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
<span>Volver a la Bandeja</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><h6 class="mb-0">Información</h6></div>
|
||||
<div class="card-body">
|
||||
<p><strong>Estado:</strong> <span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= ticket.status %></span></p>
|
||||
<p><strong>Prioridad:</strong> <span class="badge bg-<%= ticket.prioridad === 'alta' ? 'danger' : ticket.prioridad === 'critica' ? 'dark' : ticket.prioridad === 'media' ? 'warning' : 'info' %>"><%= ticket.prioridad %></span></p>
|
||||
<p><strong>Departamento:</strong> <%= ticket.departamento_nombre || 'Sin departamento' %></p>
|
||||
<p><strong>Cliente:</strong> <%= ticket.usuario_nombre %> (<%= ticket.usuario_email %>)</p>
|
||||
<p><strong>Asignado:</strong> <%= ticket.asignado_nombre || 'Sin asignar' %></p>
|
||||
<p><strong>Creado:</strong> <%= ticket.created_at %></p>
|
||||
<div class="row g-4">
|
||||
|
||||
<!-- Columna Lateral: Ficha, Controles de Estado y FSM -->
|
||||
<div class="col-lg-4">
|
||||
|
||||
<!-- Tarjeta de Estado y Asignación Rápida -->
|
||||
<div class="app-card mb-3">
|
||||
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
||||
<h6 class="mb-0 fw-bold" style="font-size: 0.88rem;">
|
||||
<i class="fas fa-sliders-h text-primary me-1.5"></i> Control del Ticket
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
|
||||
<!-- Estado Actual -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-muted small fw-semibold mb-1">Estado de Resolución</label>
|
||||
<form action="/agent/ticket/<%= ticket.id %>/status" method="POST" class="d-flex gap-2">
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
<option value="abierto" <%= ticket.status === 'abierto' ? 'selected' : '' %>>🟢 Abierto</option>
|
||||
<option value="en_progreso" <%= ticket.status === 'en_progreso' ? 'selected' : '' %>>🔵 En Progreso</option>
|
||||
<option value="cerrado" <%= ticket.status === 'cerrado' ? 'selected' : '' %>>⚪ Cerrado</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary btn-sm px-3 shadow-sm">Guardar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><h6 class="mb-0">Acciones</h6></div>
|
||||
<div class="card-body">
|
||||
<form action="/agent/ticket/<%= ticket.id %>/status" method="POST" class="mb-2">
|
||||
<label class="form-label">Cambiar Estado</label>
|
||||
<select name="status" class="form-select mb-2">
|
||||
<option value="abierto" <%= ticket.status === 'abierto' ? 'selected' : '' %>>Abierto</option>
|
||||
<option value="en_progreso" <%= ticket.status === 'en_progreso' ? 'selected' : '' %>>En Progreso</option>
|
||||
<option value="cerrado" <%= ticket.status === 'cerrado' ? 'selected' : '' %>>Cerrado</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary btn-sm w-100">Actualizar</button>
|
||||
</form>
|
||||
|
||||
<% if (user.rol === 'admin') { %>
|
||||
<form action="/agent/ticket/<%= ticket.id %>/assign" method="POST">
|
||||
<label class="form-label">Asignar a</label>
|
||||
<select name="assigned_to" class="form-select mb-2">
|
||||
<option value="">Sin asignar</option>
|
||||
<% agents.forEach(a => { %>
|
||||
<option value="<%= a.id %>" <%= ticket.assigned_to === a.id ? 'selected' : '' %>><%= a.nombre %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-info btn-sm w-100">Asignar</button>
|
||||
</form>
|
||||
<!-- Asignación de Agente (si es admin) -->
|
||||
<% if (user.rol === 'admin' || user.rol === 'superadmin') { %>
|
||||
<div class="mb-3 pt-2 border-top">
|
||||
<label class="form-label text-muted small fw-semibold mb-1">Reasignar Especialista</label>
|
||||
<form action="/agent/ticket/<%= ticket.id %>/assign" method="POST" class="d-flex gap-2">
|
||||
<select name="assigned_to" class="form-select form-select-sm">
|
||||
<option value="">Sin asignar</option>
|
||||
<% agents.forEach(a => { %>
|
||||
<option value="<%= a.id %>" <%= ticket.assigned_to === a.id ? 'selected' : '' %>><%= a.nombre %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-outline-info btn-sm px-2.5">Asignar</button>
|
||||
</form>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- Metadatos Básicos -->
|
||||
<div class="pt-2 border-top">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1 text-muted" style="font-size: 0.78rem;">
|
||||
<span>Prioridad:</span>
|
||||
<% if (ticket.prioridad === 'critica') { %>
|
||||
<span class="priority-pill priority-critica"><i class="fas fa-fire me-1"></i>Crítica</span>
|
||||
<% } else if (ticket.prioridad === 'alta') { %>
|
||||
<span class="priority-pill priority-alta"><i class="fas fa-exclamation-circle me-1"></i>Alta</span>
|
||||
<% } else if (ticket.prioridad === 'media') { %>
|
||||
<span class="priority-pill priority-media"><i class="fas fa-minus-circle me-1"></i>Media</span>
|
||||
<% } else { %>
|
||||
<span class="priority-pill priority-baja"><i class="fas fa-arrow-down me-1"></i>Baja</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center text-muted" style="font-size: 0.78rem;">
|
||||
<span>Asignado a:</span>
|
||||
<span class="fw-semibold text-dark"><%= ticket.asignado_nombre || 'Sin asignar' %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MÓDULO VISITAS TÉCNICAS (FSM / tareas.telcotronics.com) -->
|
||||
<div class="card mb-3 border-warning">
|
||||
<div class="card-header bg-warning bg-opacity-25 d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0 text-dark"><i class="fas fa-truck-pickup me-1"></i> Visita Técnica (FSM)</h6>
|
||||
<!-- MÓDULO VISITAS TÉCNICAS FSM (tareas.telcotronics.com) -->
|
||||
<div class="app-card mb-3 border-amber-200">
|
||||
<div class="app-card-header p-3 border-bottom d-flex justify-content-between align-items-center bg-amber-50" style="background: rgba(245, 158, 11, 0.08);">
|
||||
<div class="d-flex align-items-center gap-1.5">
|
||||
<i class="fas fa-truck text-warning"></i>
|
||||
<h6 class="mb-0 fw-bold text-dark" style="font-size: 0.88rem;">Visita en Terreno (FSM)</h6>
|
||||
</div>
|
||||
<% if (visita) { %>
|
||||
<span class="badge bg-<%= visita.estado === 'completada' ? 'success' : visita.estado === 'en_sitio' ? 'warning' : visita.estado === 'en_camino' ? 'primary' : 'info' %> text-uppercase">
|
||||
<span class="badge bg-warning bg-opacity-25 text-dark border border-warning border-opacity-50 text-uppercase" style="font-size: 0.68rem;">
|
||||
<%= visita.estado %>
|
||||
</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-body p-3">
|
||||
<% if (!visita) { %>
|
||||
<p class="small text-muted mb-3">Si este ticket requiere intervención presencial en sitio o avería física, puedes programar la visita técnica directamente en el sistema central de tareas.</p>
|
||||
<button type="button" class="btn btn-warning btn-sm w-100 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalVisita">
|
||||
<i class="fas fa-calendar-plus me-1"></i> Programar Visita Técnica
|
||||
<p class="small text-muted mb-3" style="font-size: 0.8rem;">
|
||||
Si la avería o solicitud requiere inspección física o trabajo presencial en sitio, programa el despacho de un técnico hacia el Hub de Tareas.
|
||||
</p>
|
||||
<button type="button" class="btn btn-warning btn-sm w-100 shadow-sm d-flex align-items-center justify-content-center gap-2 fw-semibold" data-bs-toggle="modal" data-bs-target="#modalVisita">
|
||||
<i class="fas fa-calendar-plus"></i>
|
||||
<span>Programar Visita FSM</span>
|
||||
</button>
|
||||
<% } else { %>
|
||||
|
||||
<!-- MINI-TIMELINE OPERATIVO DE SEGUIMIENTO EN VIVO -->
|
||||
<div class="timeline-operativo">
|
||||
|
||||
<!-- 1. Programación -->
|
||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge bg-info text-dark me-2">1</span>
|
||||
<strong class="small">📅 Programada</strong>
|
||||
<span class="badge bg-info text-dark me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">1</span>
|
||||
<strong class="small text-dark">📅 Programada</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||
<div><strong>Técnico:</strong> <%= visita.tecnico_nombre %></div>
|
||||
<div class="text-muted"><%= visita.tecnico_email %></div>
|
||||
<div class="mt-1"><i class="fas fa-clock text-secondary"></i> <%= visita.fecha_visita ? new Date(visita.fecha_visita).toLocaleString('es-EC') : 'Sin fecha' %></div>
|
||||
<% if (visita.ubicacion) { %>
|
||||
<div class="mt-1"><i class="fas fa-map-marker-alt text-danger"></i> <%= visita.ubicacion %></div>
|
||||
<div class="mt-1 text-truncate" title="<%= visita.ubicacion %>"><i class="fas fa-map-marker-alt text-danger"></i> <%= visita.ubicacion %></div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,10 +162,10 @@
|
||||
<!-- 2. Check-in GPS -->
|
||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge <%= (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) ? 'bg-success' : 'bg-secondary' %> me-2">2</span>
|
||||
<strong class="small">📍 Check-in en Sitio</strong>
|
||||
<span class="badge <%= (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) ? 'bg-success' : 'bg-secondary' %> me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">2</span>
|
||||
<strong class="small text-dark">📍 Check-in en Sitio</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||
<% if (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) { %>
|
||||
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Arribo confirmado</div>
|
||||
<div class="text-muted"><%= new Date(visita.historial.checkIn.fecha).toLocaleTimeString('es-EC') %></div>
|
||||
@@ -116,20 +181,20 @@
|
||||
<!-- 3. Checklist y Evidencias -->
|
||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge <%= (visita.historial && visita.historial.progreso_checklist && visita.historial.progreso_checklist.porcentaje > 0) ? 'bg-primary' : 'bg-secondary' %> me-2">3</span>
|
||||
<strong class="small">📸 Avance y Evidencias</strong>
|
||||
<span class="badge <%= (visita.historial && visita.historial.progreso_checklist && visita.historial.progreso_checklist.porcentaje > 0) ? 'bg-primary' : 'bg-secondary' %> me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">3</span>
|
||||
<strong class="small text-dark">📸 Avance y Evidencias</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||
<% if (visita.historial && visita.historial.progreso_checklist) { %>
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>Checklist:</span>
|
||||
<strong><%= visita.historial.progreso_checklist.completados %>/<%= visita.historial.progreso_checklist.total %></strong>
|
||||
</div>
|
||||
<div class="progress mb-2" style="height: 8px;">
|
||||
<div class="progress mb-2" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: <%= visita.historial.progreso_checklist.porcentaje %>%;"></div>
|
||||
</div>
|
||||
<% if (visita.historial.progreso_checklist.items && visita.historial.progreso_checklist.items.length > 0) { %>
|
||||
<ul class="list-unstyled mb-2" style="font-size: 0.8rem;">
|
||||
<ul class="list-unstyled mb-2" style="font-size: 0.75rem;">
|
||||
<% visita.historial.progreso_checklist.items.forEach(item => { %>
|
||||
<li class="<%= item.completado ? 'text-success fw-bold' : 'text-muted' %>">
|
||||
<i class="fas <%= item.completado ? 'fa-check-square' : 'fa-square' %> me-1"></i> <%= item.texto %>
|
||||
@@ -150,7 +215,7 @@
|
||||
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">
|
||||
<img src="<%= fotoUrl %>" class="img-thumbnail" style="width: 44px; height: 44px; object-fit: cover; border-radius: 6px;" alt="Evidencia">
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
@@ -180,10 +245,10 @@
|
||||
<!-- 4. Cierre y Sincronización -->
|
||||
<div class="timeline-step">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge <%= visita.estado === 'completada' ? 'bg-success' : 'bg-secondary' %> me-2">4</span>
|
||||
<strong class="small">🏁 Finalización</strong>
|
||||
<span class="badge <%= visita.estado === 'completada' ? 'bg-success' : 'bg-secondary' %> me-2" style="width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;">4</span>
|
||||
<strong class="small text-dark">🏁 Finalización</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<div class="small ps-4" style="font-size: 0.78rem;">
|
||||
<% if (visita.estado === 'completada') { %>
|
||||
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Visita Finalizada</div>
|
||||
<% } else { %>
|
||||
@@ -191,8 +256,8 @@
|
||||
<% } %>
|
||||
|
||||
<form action="/agent/ticket/<%= ticket.id %>/visita/sync" method="POST" class="mt-2">
|
||||
<button type="submit" class="btn btn-outline-primary btn-sm w-100" title="Actualizar progreso desde tareas.telcotronics.com">
|
||||
<i class="fas fa-sync-alt me-1"></i> Sincronizar estado con Hub
|
||||
<button type="submit" class="btn btn-outline-primary btn-sm w-100 shadow-sm" title="Actualizar progreso desde tareas.telcotronics.com">
|
||||
<i class="fas fa-sync-alt me-1"></i> Sincronizar con Hub
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -207,12 +272,12 @@
|
||||
<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;">
|
||||
<ul class="list-unstyled mb-0" style="font-size: 0.75rem;">
|
||||
<% 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>
|
||||
<div class="text-muted" style="font-size: 0.68rem;"><i class="fas fa-clock"></i> <%= new Date(ev.fecha).toLocaleString('es-EC') %> - <%= ev.usuarioNombre || 'Sistema' %></div>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
@@ -221,71 +286,131 @@
|
||||
<% } %>
|
||||
|
||||
<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
|
||||
<a href="https://tareas.telcotronics.com" target="_blank" class="small text-muted text-decoration-none" style="font-size: 0.75rem;">
|
||||
<i class="fas fa-external-link-alt me-1"></i> Ver en tareas.telcotronics.com
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<strong><%= ticket.usuario_nombre %></strong> <span class="text-muted">- <%= ticket.created_at %></span>
|
||||
<!-- Columna Principal: Hilo y Respuesta Oficial -->
|
||||
<div class="col-lg-8">
|
||||
|
||||
<!-- Mensaje Inicial del Cliente -->
|
||||
<div class="app-card mb-4 border-start border-4 border-primary">
|
||||
<div class="app-card-header p-3 bg-light border-bottom d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="user-avatar-initials-sm bg-primary text-white">
|
||||
<%= (ticket.usuario_nombre || 'C').charAt(0).toUpperCase() %>
|
||||
</div>
|
||||
<div>
|
||||
<span class="fw-bold text-dark" style="font-size: 0.85rem;"><%= ticket.usuario_nombre %></span>
|
||||
<span class="badge bg-primary-subtle text-primary border border-primary-subtle ms-1" style="font-size: 0.68rem;">Cliente Solicitante</span>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.72rem;"><%= new Date(ticket.created_at).toLocaleString('es-ES') %></small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><%= ticket.mensaje %></p>
|
||||
<div class="card-body p-3 p-md-4">
|
||||
<div class="ticket-description-body" style="white-space: pre-line; font-size: 0.92rem; line-height: 1.6;">
|
||||
<%= ticket.mensaje %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Respuestas</h5>
|
||||
<!-- Hilo de Respuestas -->
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<h5 class="fw-bold mb-0 text-dark" style="font-size: 0.95rem;">
|
||||
<i class="fas fa-comments text-primary me-1.5"></i> Conversación y Actuaciones (<%= respuestas.length %>)
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<% if (respuestas.length === 0) { %>
|
||||
<p class="text-muted">No hay respuestas aún</p>
|
||||
<% } %>
|
||||
<% respuestas.forEach(r => { %>
|
||||
<div class="card mb-2 <%= r.usuario_rol === 'agent' || r.usuario_rol === 'admin' ? 'border-primary' : '' %>">
|
||||
<div class="card-header">
|
||||
<strong><%= r.usuario_nombre %></strong>
|
||||
<span class="badge bg-<%= r.usuario_rol === 'admin' ? 'danger' : r.usuario_rol === 'agent' ? 'info' : 'secondary' %> ms-1"><%= r.usuario_rol %></span>
|
||||
<span class="text-muted float-end"><%= r.created_at %></span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-0" style="white-space: pre-wrap;"><%= r.mensaje %></p>
|
||||
</div>
|
||||
<div class="app-card p-4 text-center mb-4 bg-light border">
|
||||
<i class="far fa-comment-dots text-muted fs-3 mb-2"></i>
|
||||
<h6 class="fw-semibold text-secondary">Aún no se han emitido respuestas</h6>
|
||||
<small class="text-muted">Sé el primero en responder o emitir instrucciones al cliente.</small>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header"><strong>Responder</strong></div>
|
||||
<div class="card-body">
|
||||
<div class="conversation-thread mb-4 d-flex flex-column gap-3">
|
||||
<% respuestas.forEach(r => { %>
|
||||
<% const isStaff = ['agent', 'admin', 'superadmin'].includes(r.usuario_rol); %>
|
||||
<div class="ticket-message-card <%= isStaff ? 'message-staff' : 'message-client' %>">
|
||||
<div class="message-card-header d-flex align-items-center justify-content-between p-2.5 px-3 border-bottom">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="user-avatar-initials-sm" style="<%= isStaff ? 'background: #4f46e5; color: #fff;' : 'background: #64748b; color: #fff;' %>">
|
||||
<%= (r.usuario_nombre || 'U').charAt(0).toUpperCase() %>
|
||||
</div>
|
||||
<div>
|
||||
<span class="fw-bold text-dark" style="font-size: 0.84rem;"><%= r.usuario_nombre %></span>
|
||||
<% if (isStaff) { %>
|
||||
<span class="badge bg-indigo-subtle text-indigo border ms-1" style="font-size: 0.68rem; color: #4f46e5; border-color: rgba(79,70,229,0.2) !important;">
|
||||
<i class="fas fa-headset me-0.5"></i> Agente Oficial
|
||||
</span>
|
||||
<% } else { %>
|
||||
<span class="badge bg-secondary-subtle text-secondary border ms-1" style="font-size: 0.68rem;">Cliente</span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
<%= new Date(r.created_at).toLocaleString('es-ES') %>
|
||||
</small>
|
||||
</div>
|
||||
<div class="message-card-body p-3">
|
||||
<div style="white-space: pre-line; font-size: 0.90rem; line-height: 1.55;">
|
||||
<%= r.mensaje %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
|
||||
<!-- Caja de Respuesta del Agente -->
|
||||
<div class="app-card border shadow-sm">
|
||||
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||
<i class="fas fa-reply text-primary"></i>
|
||||
<h6 class="mb-0 fw-bold" style="font-size: 0.88rem;">Emitir Respuesta Oficial al Cliente</h6>
|
||||
</div>
|
||||
<div class="card-body p-3 p-md-4">
|
||||
<form action="/agent/ticket/<%= ticket.id %>/respond" method="POST">
|
||||
<div class="mb-3">
|
||||
<textarea name="mensaje" class="form-control" rows="3" required></textarea>
|
||||
<textarea name="mensaje" class="form-control" rows="4" placeholder="Escribe el diagnóstico, avances o indicaciones para el solicitante..." required></textarea>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted" style="font-size: 0.75rem;">El cliente recibirá una notificación y podrá responder en el hilo.</small>
|
||||
<button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
<span>Publicar Respuesta</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"><i class="fas fa-reply"></i> Responder</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL PROGRAMAR VISITA TÉCNICA (FSM / tareas.telcotronics.com) -->
|
||||
<div class="modal fade" id="modalVisita" tabindex="-1" aria-labelledby="modalVisitaLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||
<form action="/agent/ticket/<%= ticket.id %>/visita" method="POST">
|
||||
<div class="modal-header bg-warning text-dark">
|
||||
<h5 class="modal-title" id="modalVisitaLabel"><i class="fas fa-truck-pickup me-2"></i>Programar Visita Técnica en Terreno</h5>
|
||||
<div class="modal-header bg-warning text-dark p-3 px-4">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-truck-pickup fs-5"></i>
|
||||
<h5 class="modal-title fw-bold" id="modalVisitaLabel">Programar Visita Técnica en Terreno</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body p-4">
|
||||
<input type="hidden" name="tecnicoNombre" id="inputTecnicoNombre" value="<%= (tecnicosHub && tecnicosHub.length > 0) ? (tecnicosHub[0].nombre || tecnicosHub[0].email) : '' %>">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-7">
|
||||
<label class="form-label fw-bold">Técnico Responsable (Hub Telcotronics) <span class="text-danger">*</span></label>
|
||||
<label class="form-label small fw-bold text-dark">Técnico de Campo (Hub Telcotronics) <span class="text-danger">*</span></label>
|
||||
<select name="emailTecnico" id="selectTecnicoHub" class="form-select" required>
|
||||
<% if (tecnicosHub && tecnicosHub.length > 0) { %>
|
||||
<% tecnicosHub.forEach(t => { %>
|
||||
@@ -297,62 +422,65 @@
|
||||
<option value="pablinux@hotmail.es" data-nombre="pablinux">pablinux (pablinux@hotmail.es)</option>
|
||||
<% } %>
|
||||
</select>
|
||||
<small class="text-muted">Lista en vivo conectada con tareas.telcotronics.com</small>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">Lista en vivo de usuarios sincronizada con tareas.telcotronics.com</small>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label class="form-label fw-bold">Prioridad de Campo</label>
|
||||
<label class="form-label small fw-bold text-dark">Prioridad de Despacho</label>
|
||||
<select name="prioridad" class="form-select">
|
||||
<option value="Media" <%= ticket.prioridad === 'media' ? 'selected' : '' %>>Media</option>
|
||||
<option value="Alta" <%= ticket.prioridad === 'alta' || ticket.prioridad === 'critica' ? 'selected' : '' %>>Alta / Urgente</option>
|
||||
<option value="Baja" <%= ticket.prioridad === 'baja' ? 'selected' : '' %>>Baja</option>
|
||||
<option value="Media" <%= ticket.prioridad === 'media' ? 'selected' : '' %>>Media — Regular</option>
|
||||
<option value="Alta" <%= ticket.prioridad === 'alta' || ticket.prioridad === 'critica' ? 'selected' : '' %>>Alta — Urgente</option>
|
||||
<option value="Baja" <%= ticket.prioridad === 'baja' ? 'selected' : '' %>>Baja — Mantenimiento</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold">Fecha y Hora de la Visita <span class="text-danger">*</span></label>
|
||||
<label class="form-label small fw-bold text-dark">Fecha y Hora de Arribo <span class="text-danger">*</span></label>
|
||||
<input type="datetime-local" name="fechaVisita" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold">Fecha / Hora Límite Estimada</label>
|
||||
<label class="form-label small fw-bold text-dark">Hora Límite Estimada</label>
|
||||
<input type="datetime-local" name="fechaFin" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<label class="form-label fw-bold">Dirección / Ubicación en Sitio <span class="text-danger">*</span></label>
|
||||
<label class="form-label small fw-bold text-dark">Dirección / Ubicación en Sitio <span class="text-danger">*</span></label>
|
||||
<input type="text" name="ubicacion" class="form-control" placeholder="Ej: Av. Amazonas N34-120 y Colón" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-bold">Coordenadas GPS (Lat, Lng)</label>
|
||||
<label class="form-label small fw-bold text-dark">Coordenadas GPS (Lat, Lng)</label>
|
||||
<input type="text" name="coordenadas" class="form-control" placeholder="-0.180653, -78.467834">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Referencia de Llegada</label>
|
||||
<label class="form-label small fw-bold text-dark">Referencia de Acceso</label>
|
||||
<input type="text" name="referencia" class="form-control" placeholder="Ej: Frente al centro comercial, edificio azul 3er piso">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Instrucciones / Asunto para el Técnico</label>
|
||||
<label class="form-label small fw-bold text-dark">Instrucción / Título para el Técnico</label>
|
||||
<input type="text" name="titulo" class="form-control" value="Visita Técnica: <%= ticket.asunto %>" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Detalles / Síntomas Reportados por el Cliente</label>
|
||||
<label class="form-label small fw-bold text-dark">Síntomas / Resumen del Problema</label>
|
||||
<textarea name="descripcion" class="form-control" rows="2"><%= ticket.mensaje %></textarea>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Checklist Inicial para el Técnico en Terreno (un ítem por línea)</label>
|
||||
<label class="form-label small fw-bold text-dark">Checklist Inicial (un ítem por línea)</label>
|
||||
<textarea name="checklist_items" class="form-control" rows="3">Revisión física de acometida y equipamiento
|
||||
Verificación de niveles y potencia óptica
|
||||
Pruebas de servicio con el cliente y firma</textarea>
|
||||
<small class="text-muted">El técnico marcará estos ítems desde tareas.telcotronics.com conforme avance en la visita.</small>
|
||||
Pruebas de servicio con el cliente y firma digital</textarea>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">El técnico completará estos ítems desde el Hub móvil conforme ejecute el trabajo.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-warning"><i class="fas fa-paper-plane me-1"></i> Asignar y Enviar al Hub</button>
|
||||
<div class="modal-footer p-3 bg-light">
|
||||
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-warning fw-bold d-inline-flex align-items-center gap-1.5 shadow-sm">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
<span>Asignar y Despachar al Hub</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user