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:
+124
-51
@@ -1,67 +1,140 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Usuarios'; %>
|
||||
<% title = 'Usuarios y Equipo'; %>
|
||||
|
||||
<!-- 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">Usuarios</h1>
|
||||
<a href="/admin/users/create" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> Nuevo Usuario
|
||||
</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">Gestión de Usuarios y Roles</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;">
|
||||
<%= users.length %> Cuentas Registradas
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Administra el personal técnico, agentes de soporte y permisos de clientes.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/admin/users/create" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
<span>Nuevo Usuario</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nombre</th>
|
||||
<th>Email</th>
|
||||
<th>Rol</th>
|
||||
<th>Activo</th>
|
||||
<th>Registro</th>
|
||||
<th>Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if (users.length === 0) { %>
|
||||
<tr><td colspan="7" class="text-center">No hay usuarios</td></tr>
|
||||
<% } %>
|
||||
<% users.forEach(u => { %>
|
||||
<tr>
|
||||
<td><%= u.id %></td>
|
||||
<td><%= u.nombre %></td>
|
||||
<td><%= u.email %></td>
|
||||
<td><span class="badge bg-<%= u.rol === 'superadmin' ? 'dark' : u.rol === 'admin' ? 'danger' : u.rol === 'agent' ? 'info' : 'secondary' %>"><%= u.rol %></span></td>
|
||||
<td><span class="badge bg-<%= u.is_active ? 'success' : 'danger' %>"><%= u.is_active ? 'Sí' : 'No' %></span></td>
|
||||
<td><%= u.created_at %></td>
|
||||
<td>
|
||||
<% if (u.rol !== 'superadmin') { %>
|
||||
<form action="/admin/users/invite/<%= u.id %>" method="POST" style="display:inline">
|
||||
<button type="submit" class="btn btn-sm btn-info" title="Generar link de invitación">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</button>
|
||||
</form>
|
||||
<form action="/admin/users/delete/<%= u.id %>" method="POST" style="display:inline">
|
||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Eliminar este usuario?')">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
<% } %>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="app-card mb-4">
|
||||
<div class="app-card-header d-flex justify-content-between align-items-center p-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-users-cog text-primary"></i>
|
||||
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Catálogo de Cuentas</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table app-table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;">ID</th>
|
||||
<th>Usuario & Identidad</th>
|
||||
<th>Correo Electrónico</th>
|
||||
<th>Rol en la Plataforma</th>
|
||||
<th>Estado</th>
|
||||
<th>Fecha Alta</th>
|
||||
<th class="text-end" style="width: 130px;">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if (users.length === 0) { %>
|
||||
<tr><td colspan="7" class="text-center py-4 text-muted">No hay usuarios registrados</td></tr>
|
||||
<% } %>
|
||||
|
||||
<% users.forEach(u => { %>
|
||||
<tr>
|
||||
<td><span class="badge bg-light text-dark border">#<%= u.id %></span></td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<% if (u.avatar_url) { %>
|
||||
<img src="<%= u.avatar_url %>" alt="<%= u.nombre %>" class="user-avatar-img-sm rounded-circle" style="width: 32px; height: 32px; object-fit: cover;">
|
||||
<% } else { %>
|
||||
<div class="user-avatar-initials-sm" style="width: 32px; height: 32px; font-size: 0.78rem;">
|
||||
<%= (u.nombre || 'U').charAt(0).toUpperCase() %>
|
||||
</div>
|
||||
<% } %>
|
||||
<div>
|
||||
<div class="fw-bold text-dark" style="font-size: 0.84rem;"><%= u.nombre %></div>
|
||||
<small class="text-muted" style="font-size: 0.70rem;">
|
||||
Proveedor: <%= u.provider || 'local' %>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-secondary small font-monospace"><%= u.email %></span>
|
||||
</td>
|
||||
<td>
|
||||
<% if (u.rol === 'superadmin') { %>
|
||||
<span class="badge bg-dark text-warning border px-2 py-1"><i class="fas fa-crown me-1"></i>Superadmin</span>
|
||||
<% } else if (u.rol === 'admin') { %>
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1"><i class="fas fa-user-shield me-1"></i>Admin</span>
|
||||
<% } else if (u.rol === 'agent') { %>
|
||||
<span class="badge bg-indigo-subtle text-indigo border px-2 py-1" style="color: #4f46e5; border-color: rgba(79,70,229,0.3) !important;"><i class="fas fa-headset me-1"></i>Agente</span>
|
||||
<% } else { %>
|
||||
<span class="badge bg-secondary-subtle text-secondary border px-2 py-1"><i class="fas fa-user me-1"></i>Cliente</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<% if (u.is_active) { %>
|
||||
<span class="status-pill status-abierto"><span class="status-dot"></span>Activo</span>
|
||||
<% } else { %>
|
||||
<span class="status-pill status-cerrado"><span class="status-dot" style="background: #ef4444;"></span>Inactivo</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted"><%= new Date(u.created_at).toLocaleDateString('es-ES') %></small>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="d-inline-flex gap-1">
|
||||
<% if (u.rol !== 'superadmin') { %>
|
||||
<form action="/admin/users/invite/<%= u.id %>" method="POST" style="display:inline">
|
||||
<button type="submit" class="btn btn-sm btn-outline-info" title="Generar link de invitación">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
<form action="/admin/users/toggle/<%= u.id %>" method="POST" style="display:inline">
|
||||
<button type="submit" class="btn btn-sm btn-outline-<%= u.is_active ? 'warning' : 'success' %>" title="<%= u.is_active ? 'Desactivar cuenta' : 'Activar cuenta' %>">
|
||||
<i class="fas fa-<%= u.is_active ? 'ban' : 'check' %>"></i>
|
||||
</button>
|
||||
</form>
|
||||
<% } %>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('../partials/footer') %>
|
||||
|
||||
Reference in New Issue
Block a user