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') %>
|
||||
|
||||
Reference in New Issue
Block a user