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:
+101
-24
@@ -1,52 +1,129 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Crear Usuario'; %>
|
||||
<% title = 'Crear Nuevo Usuario'; %>
|
||||
|
||||
<!-- 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">Nuevo Usuario</h1>
|
||||
<a href="/admin/users" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Volver</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">Alta de Usuario</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;">
|
||||
Administración
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Registra un nuevo miembro del equipo técnico o asigna acceso a clientes.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/admin/users" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1.5 rounded-pill px-3 shadow-sm">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
<span>Volver a Usuarios</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-7">
|
||||
<div class="app-card">
|
||||
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||
<i class="fas fa-user-plus text-primary"></i>
|
||||
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Datos de la Cuenta</h5>
|
||||
</div>
|
||||
<div class="card-body p-3 p-md-4">
|
||||
<form action="/admin/users/create" method="POST">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nombre</label>
|
||||
<input type="text" name="nombre" class="form-control" required>
|
||||
<label class="form-label text-dark fw-semibold small">Nombre Completo <span class="text-danger">*</span></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-user"></i></span>
|
||||
<input type="text" name="nombre" class="form-control border-start-0" placeholder="Ej: Carlos Mendoza" required autocomplete="name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" name="email" class="form-control" required>
|
||||
<label class="form-label text-dark fw-semibold small">Correo Electrónico <span class="text-danger">*</span></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-envelope"></i></span>
|
||||
<input type="email" name="email" class="form-control border-start-0" placeholder="carlos@empresa.com" required autocomplete="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Contraseña</label>
|
||||
<input type="password" name="password" class="form-control" required>
|
||||
<label class="form-label text-dark fw-semibold small">Contraseña Temporal <span class="text-danger">*</span></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-lock"></i></span>
|
||||
<input type="password" name="password" class="form-control border-start-0" placeholder="••••••••" required autocomplete="new-password">
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">El usuario podrá modificarla posteriormente.</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Rol</label>
|
||||
<select name="rol" class="form-select">
|
||||
<option value="client">Cliente</option>
|
||||
<option value="agent">Agente</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label text-dark fw-semibold small">Rol y Permisos</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-user-shield"></i></span>
|
||||
<select name="rol" class="form-select border-start-0">
|
||||
<option value="client">Cliente — Crea y consulta tickets propios</option>
|
||||
<option value="agent" selected>Agente — Atiende tickets y despacha visitas FSM</option>
|
||||
<option value="admin">Administrador — Gestión de usuarios y departamentos</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Crear Usuario</button>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<a href="/admin/users" class="btn btn-light border text-muted btn-sm px-3">
|
||||
Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm">
|
||||
<i class="fas fa-save"></i>
|
||||
<span>Crear Usuario</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5">
|
||||
<div class="app-card p-3.5 mb-3 bg-light border">
|
||||
<h6 class="fw-bold text-dark mb-2" style="font-size: 0.85rem;">
|
||||
<i class="fas fa-shield-alt text-primary me-1.5"></i> Jerarquía de Roles
|
||||
</h6>
|
||||
<div class="d-flex flex-column gap-2 small text-muted" style="font-size: 0.78rem;">
|
||||
<div>
|
||||
<strong class="text-dark">Administrador:</strong> Control total del tenant, métricas, gestión de departamentos y personal técnico.
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-dark">Agente Técnico:</strong> Bandeja de tickets, diagnóstico, asignación y programación de visitas presenciales FSM hacia el Hub.
|
||||
</div>
|
||||
<div>
|
||||
<strong class="text-dark">Cliente:</strong> Interfaz exclusiva para apertura, seguimiento e interacción con sus tickets.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('../partials/footer') %>
|
||||
|
||||
+179
-64
@@ -1,87 +1,202 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Admin Dashboard'; %>
|
||||
<% 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 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">Dashboard Administrativo</h1>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-primary">
|
||||
<div class="card-body text-center">
|
||||
<h5><i class="fas fa-users"></i> Usuarios</h5>
|
||||
<h2><%= users.length %></h2>
|
||||
</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="col-md-3 mb-3">
|
||||
<div class="card text-white bg-success">
|
||||
<div class="card-body text-center">
|
||||
<h5><i class="fas fa-ticket"></i> Tickets</h5>
|
||||
<h2><%= tickets.length %></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-info">
|
||||
<div class="card-body text-center">
|
||||
<h5><i class="fas fa-building"></i> Departamentos</h5>
|
||||
<h2><%= departments.length %></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-white bg-warning">
|
||||
<div class="card-body text-center">
|
||||
<h5><i class="fas fa-spinner"></i> Abiertos</h5>
|
||||
<h2><%= stats.find(s => s.status === 'abierto') ? stats.find(s => s.status === 'abierto').total : 0 %></h2>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header"><h5>Últimos Tickets</h5></div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead><tr><th>#</th><th>Asunto</th><th>Usuario</th><th>Estado</th></tr></thead>
|
||||
<tbody>
|
||||
<% tickets.slice(0, 5).forEach(t => { %>
|
||||
<tr>
|
||||
<td>#<%= t.id %></td>
|
||||
<td><%= t.asunto %></td>
|
||||
<td><%= t.usuario_nombre || '' %></td>
|
||||
<td><span class="badge bg-<%= t.status === 'abierto' ? 'success' : t.status === 'en_progreso' ? 'primary' : 'secondary' %>"><%= t.status %></span></td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 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-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header"><h5>Accesos Rápidos</h5></div>
|
||||
<div class="card-body">
|
||||
<div class="list-group">
|
||||
<a href="/admin/users" class="list-group-item list-group-item-action"><i class="fas fa-users"></i> Gestionar Usuarios</a>
|
||||
<a href="/admin/departments" class="list-group-item list-group-item-action"><i class="fas fa-building"></i> Gestionar Departamentos</a>
|
||||
<a href="/agent/dashboard" class="list-group-item list-group-item-action"><i class="fas fa-tasks"></i> Ver Todos los Tickets</a>
|
||||
<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>
|
||||
|
||||
+96
-38
@@ -1,37 +1,91 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Departamentos'; %>
|
||||
<% title = 'Departamentos de Soporte'; %>
|
||||
|
||||
<!-- 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">Departamentos</h1>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||
<i class="fas fa-plus"></i> Nuevo Departamento
|
||||
</button>
|
||||
<!-- 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">Catálogo de Departamentos</h1>
|
||||
<span class="badge bg-purple-subtle text-purple border px-2.5 py-1" style="font-size: 0.75rem; color: #7c3aed;">
|
||||
<%= departments.length %> Áreas
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Define las especialidades para enrutar automáticamente los tickets a los técnicos adecuados.</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary btn-cta d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||
<i class="fas fa-plus-circle"></i>
|
||||
<span>Nuevo Departamento</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row g-3">
|
||||
<% if (departments.length === 0) { %>
|
||||
<div class="col-12">
|
||||
<div class="app-card p-5 text-center">
|
||||
<i class="fas fa-network-wired text-muted fs-1 mb-2"></i>
|
||||
<h5 class="fw-bold text-dark">No hay departamentos configurados</h5>
|
||||
<p class="text-muted small mb-3">Crea departamentos para que tus clientes puedan clasificar sus tickets.</p>
|
||||
<button type="button" class="btn btn-primary btn-sm px-3 rounded-pill" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||
<i class="fas fa-plus me-1"></i> Crear primer departamento
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<% departments.forEach(d => { %>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><%= d.nombre %></h5>
|
||||
<p class="card-text"><%= d.descripcion || 'Sin descripción' %></p>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="app-card h-100 p-3.5 d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="kpi-icon-box bg-primary-subtle text-primary" style="width: 36px; height: 36px; font-size: 0.85rem;">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
</div>
|
||||
<h6 class="fw-bold text-dark mb-0"><%= d.nombre %></h6>
|
||||
</div>
|
||||
<span class="badge bg-light text-muted border" style="font-size: 0.70rem;">#<%= d.id %></span>
|
||||
</div>
|
||||
<p class="text-muted small mb-3" style="font-size: 0.82rem; min-height: 40px;">
|
||||
<%= d.descripcion || 'Sin descripción específica configurada.' %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
Área Operativa
|
||||
</small>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<%= d.id %>">
|
||||
<i class="fas fa-edit"></i>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editModal<%= d.id %>" title="Editar">
|
||||
<i class="fas fa-pen"></i>
|
||||
</button>
|
||||
<form action="/admin/departments/delete/<%= d.id %>" method="POST" style="display:inline">
|
||||
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Eliminar este departamento?')">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar este departamento?')" title="Eliminar">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
@@ -40,26 +94,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="editModal<%= d.id %>">
|
||||
<!-- Modal Editar Departamento -->
|
||||
<div class="modal fade" id="editModal<%= d.id %>" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||
<form action="/admin/departments/update/<%= d.id %>" method="POST">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Editar Departamento</h5>
|
||||
<div class="modal-header bg-light border-bottom p-3 px-4">
|
||||
<h5 class="modal-title fw-bold" style="font-size: 1rem;"><i class="fas fa-edit text-primary me-2"></i>Editar Departamento</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body p-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nombre</label>
|
||||
<label class="form-label small fw-bold text-dark">Nombre del Departamento <span class="text-danger">*</span></label>
|
||||
<input type="text" name="nombre" class="form-control" value="<%= d.nombre %>" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Descripción</label>
|
||||
<label class="form-label small fw-bold text-dark">Descripción</label>
|
||||
<textarea name="descripcion" class="form-control" rows="3"><%= d.descripcion || '' %></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Guardar</button>
|
||||
<div class="modal-footer p-3 bg-light">
|
||||
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary px-3 shadow-sm">Guardar Cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -68,26 +124,28 @@
|
||||
<% }) %>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="createModal">
|
||||
<!-- Modal Crear Departamento -->
|
||||
<div class="modal fade" id="createModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form action="/admin/departments/create" method="POST">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Nuevo Departamento</h5>
|
||||
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||
<form action="/admin/departments" method="POST">
|
||||
<div class="modal-header bg-light border-bottom p-3 px-4">
|
||||
<h5 class="modal-title fw-bold" style="font-size: 1rem;"><i class="fas fa-plus-circle text-primary me-2"></i>Nuevo Departamento</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body p-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nombre</label>
|
||||
<input type="text" name="nombre" class="form-control" required>
|
||||
<label class="form-label small fw-bold text-dark">Nombre del Departamento <span class="text-danger">*</span></label>
|
||||
<input type="text" name="nombre" class="form-control" placeholder="Ej: Redes & Conectividad" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Descripción</label>
|
||||
<textarea name="descripcion" class="form-control" rows="3"></textarea>
|
||||
<label class="form-label small fw-bold text-dark">Descripción Operativa</label>
|
||||
<textarea name="descripcion" class="form-control" rows="3" placeholder="Describe el alcance de este departamento..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary">Crear</button>
|
||||
<div class="modal-footer p-3 bg-light">
|
||||
<button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary px-3 shadow-sm">Crear Departamento</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+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