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:
+218
-51
@@ -1,68 +1,235 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Mis Tickets'; %>
|
||||
|
||||
<%
|
||||
const totalTickets = tickets.length;
|
||||
const openTickets = tickets.filter(t => t.status === 'abierto').length;
|
||||
const inProgressTickets = tickets.filter(t => t.status === 'en_progreso').length;
|
||||
const closedTickets = tickets.filter(t => t.status === 'cerrado').length;
|
||||
%>
|
||||
|
||||
<!-- 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">Mis Tickets</h1>
|
||||
<a href="/client/new-ticket" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> Nuevo Ticket
|
||||
</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 align-items-center gap-2 mb-1">
|
||||
<h1 class="page-title h3 mb-0">Mis Solicitudes y Tickets</h1>
|
||||
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem;">
|
||||
Portal Clientes
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Monitorea en tiempo real el progreso de atención y despacho de tus incidencias.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/client/new-ticket" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
<span>Nuevo Ticket</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>#</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="8" class="text-center">No tienes tickets aún</td></tr>
|
||||
<% } %>
|
||||
<% tickets.forEach(ticket => { %>
|
||||
<tr>
|
||||
<td>#<%= ticket.id %></td>
|
||||
<td><%= ticket.asunto %></td>
|
||||
<td><%= ticket.departamento_nombre || 'Sin departamento' %></td>
|
||||
<td>
|
||||
<span class="badge bg-<%= ticket.prioridad === 'alta' ? 'danger' : ticket.prioridad === 'critica' ? 'dark' : ticket.prioridad === 'media' ? 'warning' : 'info' %>">
|
||||
<%= ticket.prioridad %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-<%= ticket.status === 'abierto' ? 'success' : ticket.status === 'en_progreso' ? 'primary' : 'secondary' %>">
|
||||
<%= ticket.status %>
|
||||
</span>
|
||||
</td>
|
||||
<td><%= ticket.asignado_nombre || 'Sin asignar' %></td>
|
||||
<td><%= ticket.created_at %></td>
|
||||
<td>
|
||||
<a href="/client/ticket/<%= ticket.id %>" class="btn btn-sm btn-info">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Tarjetas KPI de Resumen -->
|
||||
<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">Total Solicitudes</span>
|
||||
<div class="kpi-icon-box bg-primary-subtle text-primary">
|
||||
<i class="fas fa-ticket-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value"><%= totalTickets %></div>
|
||||
<div class="kpi-subtext text-muted">Historial acumulado</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">Abiertos</span>
|
||||
<div class="kpi-icon-box bg-success-subtle text-success">
|
||||
<i class="fas fa-envelope-open-text"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value text-success"><%= openTickets %></div>
|
||||
<div class="kpi-subtext text-muted">Pendientes de atención</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 / FSM</span>
|
||||
<div class="kpi-icon-box bg-info-subtle text-info">
|
||||
<i class="fas fa-tools"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value text-info"><%= inProgressTickets %></div>
|
||||
<div class="kpi-subtext text-muted">Con técnico asignado</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">Resueltos</span>
|
||||
<div class="kpi-icon-box bg-secondary-subtle text-secondary">
|
||||
<i class="fas fa-check-double"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-value text-secondary"><%= closedTickets %></div>
|
||||
<div class="kpi-subtext text-muted">Casos cerrados</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabla de Tickets con Filtro Rápido -->
|
||||
<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">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-stream text-primary"></i>
|
||||
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Bandeja de Tickets</h5>
|
||||
<span class="badge bg-light text-dark border ms-1"><%= tickets.length %></span>
|
||||
</div>
|
||||
|
||||
<!-- Búsqueda rápida en navegador -->
|
||||
<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="ticketSearchInput" class="form-control border-start-0 ps-0" placeholder="Buscar por asunto, ID o área..." onkeyup="filterTicketsTable()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table app-table mb-0" id="ticketsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 75px;">ID</th>
|
||||
<th>Asunto & Descripción</th>
|
||||
<th>Departamento</th>
|
||||
<th>Prioridad</th>
|
||||
<th>Estado</th>
|
||||
<th>Técnico / FSM</th>
|
||||
<th>Fecha</th>
|
||||
<th class="text-end" style="width: 110px;">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if (tickets.length === 0) { %>
|
||||
<tr>
|
||||
<td colspan="8" 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 tienes tickets abiertos actualmente</h5>
|
||||
<p class="text-muted small mb-3">Si tienes algún problema o requieres asistencia técnica, genera un ticket aquí.</p>
|
||||
<a href="/client/new-ticket" class="btn btn-primary btn-sm px-3 rounded-pill">
|
||||
<i class="fas fa-plus me-1"></i> Crear mi primer ticket
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
|
||||
<% tickets.forEach(ticket => { %>
|
||||
<tr class="ticket-row" data-status="<%= ticket.status %>">
|
||||
<td>
|
||||
<span class="badge bg-light text-dark border fw-bold">#<%= ticket.id %></span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold text-dark text-truncate" style="max-width: 280px;">
|
||||
<%= ticket.asunto %>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-secondary small d-inline-flex align-items-center gap-1">
|
||||
<i class="fas fa-folder-open text-muted"></i>
|
||||
<%= ticket.departamento_nombre || 'General' %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<% 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>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<% if (ticket.status === 'abierto') { %>
|
||||
<span class="status-pill status-abierto"><span class="status-dot"></span>Abierto</span>
|
||||
<% } else if (ticket.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 (ticket.asignado_nombre) { %>
|
||||
<div class="d-flex align-items-center gap-1.5 text-secondary small">
|
||||
<i class="fas fa-user-check text-success"></i>
|
||||
<span><%= ticket.asignado_nombre %></span>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<span class="badge bg-light text-muted border" style="font-size: 0.72rem;">Sin asignar</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small" style="font-size: 0.75rem;">
|
||||
<%= new Date(ticket.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' }) %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a href="/client/ticket/<%= ticket.id %>" class="btn btn-action-view btn-sm d-inline-flex align-items-center gap-1">
|
||||
<span>Ver</span>
|
||||
<i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Filtro interactivo de la tabla de tickets
|
||||
function filterTicketsTable() {
|
||||
const query = document.getElementById('ticketSearchInput').value.toLowerCase();
|
||||
const rows = document.querySelectorAll('#ticketsTable tbody tr.ticket-row');
|
||||
|
||||
rows.forEach(row => {
|
||||
const text = row.innerText.toLowerCase();
|
||||
if (text.includes(query)) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<%- include('../partials/footer') %>
|
||||
|
||||
Reference in New Issue
Block a user