269 lines
13 KiB
Plaintext
269 lines
13 KiB
Plaintext
<%- include('../partials/header') %>
|
|
<% 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 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 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>
|
|
<% }) %>
|
|
<% } %>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<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') %>
|