pablinux/help_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): rediseño integral de UI/UX de la aplicación (navbar, sidebar offcanvas, KPIs, tablas y chat de tickets)

Browse Source
This commit is contained in:
pablinux
2026-10-20 21:04:02 -05:00
parent 2f7a2d7568
commit efe95fca54
15 changed files with 2399 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/agent/dashboard.ejs
+248 -55
View File
@@ -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') %>