207 lines
10 KiB
Plaintext
207 lines
10 KiB
Plaintext
<%- include('../partials/header') %>
|
|
<% title = 'Panel de Administración'; %>
|
|
|
|
<%
|
|
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><%= 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 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>
|
|
<% }) %>
|
|
<% } %>
|
|
|
|
<!-- 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">Dashboard Administrativo</h1>
|
|
<span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 rounded-pill px-2.5 py-1" style="font-size: 0.75rem;">
|
|
Administración Tenant
|
|
</span>
|
|
</div>
|
|
<p class="text-muted small mb-0">Visión global de rendimiento, gestión de agentes, tickets y catálogo de departamentos.</p>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<a href="/admin/users/create" class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3 shadow-sm">
|
|
<i class="fas fa-user-plus"></i>
|
|
<span>Nuevo Usuario</span>
|
|
</a>
|
|
<a href="/agent/dashboard" class="btn btn-primary btn-cta btn-sm d-inline-flex align-items-center gap-1.5 shadow-sm">
|
|
<i class="fas fa-inbox"></i>
|
|
<span>Ver Bandeja</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tarjetas KPI -->
|
|
<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">Equipo / Usuarios</span>
|
|
<div class="kpi-icon-box bg-primary-subtle text-primary">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-value"><%= users.length %></div>
|
|
<div class="kpi-subtext text-muted">Cuentas activas en la empresa</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">Total Tickets</span>
|
|
<div class="kpi-icon-box bg-info-subtle text-info">
|
|
<i class="fas fa-ticket-alt"></i>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-value text-info"><%= tickets.length %></div>
|
|
<div class="kpi-subtext text-muted">Casos registrados</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">Departamentos</span>
|
|
<div class="kpi-icon-box bg-purple-subtle text-purple" style="color: #7c3aed; background: rgba(124, 58, 237, 0.1);">
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-value" style="color: #7c3aed;"><%= departments.length %></div>
|
|
<div class="kpi-subtext text-muted">Áreas de atención configuradas</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">Tickets Pendientes</span>
|
|
<div class="kpi-icon-box bg-warning-subtle text-warning">
|
|
<i class="fas fa-hourglass-half"></i>
|
|
</div>
|
|
</div>
|
|
<div class="kpi-value text-warning"><%= abiertosCount %></div>
|
|
<div class="kpi-subtext text-muted">Abiertos sin resolución</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid de Paneles: Últimos Tickets & Departamentos -->
|
|
<div class="row g-4">
|
|
<!-- Columna Izquierda: Últimos Tickets -->
|
|
<div class="col-lg-7">
|
|
<div class="app-card h-100">
|
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="fas fa-history text-primary"></i>
|
|
<h5 class="mb-0 fw-bold" style="font-size: 0.92rem;">Últimas Incidencias Registradas</h5>
|
|
</div>
|
|
<a href="/agent/dashboard" class="small text-decoration-none text-primary fw-semibold" style="font-size: 0.78rem;">
|
|
Ver todos <i class="fas fa-arrow-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table app-table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 70px;">ID</th>
|
|
<th>Asunto</th>
|
|
<th>Estado</th>
|
|
<th>Fecha</th>
|
|
<th class="text-end">Acción</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% if (tickets.length === 0) { %>
|
|
<tr><td colspan="5" class="text-center py-4 text-muted">No hay tickets registrados</td></tr>
|
|
<% } %>
|
|
<% tickets.slice(0, 6).forEach(t => { %>
|
|
<tr>
|
|
<td><span class="badge bg-light text-dark border">#<%= t.id %></span></td>
|
|
<td>
|
|
<div class="fw-semibold text-dark text-truncate" style="max-width: 220px;"><%= t.asunto %></div>
|
|
<small class="text-muted"><%= t.usuario_nombre %></small>
|
|
</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>
|
|
<small class="text-muted"><%= new Date(t.created_at).toLocaleDateString('es-ES') %></small>
|
|
</td>
|
|
<td class="text-end">
|
|
<a href="/agent/ticket/<%= t.id %>" class="btn btn-action-view btn-sm">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Columna Derecha: Catálogo de Departamentos -->
|
|
<div class="col-lg-5">
|
|
<div class="app-card h-100">
|
|
<div class="app-card-header p-3 border-bottom d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="fas fa-network-wired text-purple" style="color: #7c3aed;"></i>
|
|
<h5 class="mb-0 fw-bold" style="font-size: 0.92rem;">Departamentos Activos</h5>
|
|
</div>
|
|
<a href="/admin/departments" class="small text-decoration-none text-primary fw-semibold" style="font-size: 0.78rem;">
|
|
Gestionar <i class="fas fa-cog ms-1"></i>
|
|
</a>
|
|
</div>
|
|
<div class="p-3">
|
|
<div class="d-flex flex-column gap-2.5">
|
|
<% if (departments.length === 0) { %>
|
|
<p class="text-muted text-center py-3 mb-0">No hay departamentos creados aún.</p>
|
|
<% } %>
|
|
<% departments.forEach(dept => { %>
|
|
<div class="d-flex align-items-center justify-content-between p-2.5 rounded-3 bg-light border border-slate-200">
|
|
<div>
|
|
<div class="fw-bold text-dark" style="font-size: 0.84rem;"><%= dept.nombre %></div>
|
|
<small class="text-muted text-truncate d-block" style="font-size: 0.74rem; max-width: 200px;">
|
|
<%= dept.descripcion || 'Sin descripción' %>
|
|
</small>
|
|
</div>
|
|
<span class="badge bg-white text-secondary border px-2 py-1" style="font-size: 0.72rem;">
|
|
Activo
|
|
</span>
|
|
</div>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('../partials/footer') %>
|