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:
+96
-26
@@ -1,53 +1,123 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Configuración'; %>
|
||||
<% title = 'Configuración de la Empresa'; %>
|
||||
|
||||
<!-- 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">Configuración de la Empresa</h1>
|
||||
<!-- 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">Ajustes de Organización</h1>
|
||||
<span class="badge company-plan-badge" style="font-size: 0.75rem;">
|
||||
<%= (company.plan || 'Plan').toUpperCase() %>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Información del tenant, cuotas contratadas y parámetros de la empresa.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><h5>Información</h5></div>
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<!-- Formulario de Datos Básicos -->
|
||||
<div class="col-lg-6">
|
||||
<div class="app-card h-100">
|
||||
<div class="app-card-header p-3 border-bottom d-flex align-items-center gap-2">
|
||||
<i class="fas fa-building text-primary"></i>
|
||||
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Identidad Corporativa</h5>
|
||||
</div>
|
||||
<div class="card-body p-3 p-md-4">
|
||||
<form action="/company/update" method="POST">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nombre</label>
|
||||
<input type="text" name="name" class="form-control" value="<%= company.name %>">
|
||||
<label class="form-label text-dark fw-semibold small">Nombre de la Organización</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light text-muted border-end-0"><i class="fas fa-signature"></i></span>
|
||||
<input type="text" name="name" class="form-control border-start-0" value="<%= company.name %>" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-dark fw-semibold small">Slug / Identificador de Tenant</label>
|
||||
<input type="text" class="form-control bg-light text-muted" value="<%= company.slug %>" readonly>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">El slug es administrado por el Superadmin.</small>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 border-top">
|
||||
<button type="submit" class="btn btn-primary btn-cta shadow-sm">
|
||||
<i class="fas fa-save me-1"></i> Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Guardar</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><h5>Plan y Límites</h5></div>
|
||||
<div class="card-body">
|
||||
<p><strong>Plan:</strong> <span class="badge bg-<%= company.plan === 'enterprise' ? 'danger' : company.plan === 'pro' ? 'warning' : 'secondary' %>"><%= company.plan %></span></p>
|
||||
<p><strong>Usuarios:</strong> <%= userCount %> / <%= company.max_users %></p>
|
||||
<p><strong>Tickets:</strong> <%= ticketCount %> / <%= company.max_tickets %></p>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" style="width: <%= Math.min(100, (userCount / company.max_users) * 100) %>%">
|
||||
<%= Math.round((userCount / company.max_users) * 100) %>% usuarios
|
||||
|
||||
<!-- Cuotas y Plan -->
|
||||
<div class="col-lg-6">
|
||||
<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-tachometer-alt text-info"></i>
|
||||
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Consumo de Cuotas y Plan</h5>
|
||||
</div>
|
||||
<span class="badge bg-light text-dark border">Ecosistema SIGMA</span>
|
||||
</div>
|
||||
<div class="card-body p-3 p-md-4">
|
||||
|
||||
<!-- Barra Usuarios -->
|
||||
<% const pctUsers = Math.min(100, Math.round((userCount / company.max_users) * 100)); %>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="small fw-bold text-dark">Usuarios Activos:</span>
|
||||
<span class="small text-muted"><%= userCount %> de <%= company.max_users %> (<%= pctUsers %>%)</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 10px; border-radius: 9999px;">
|
||||
<div class="progress-bar <%= pctUsers > 85 ? 'bg-danger' : 'bg-primary' %>" style="width: <%= pctUsers %>%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" style="width: <%= Math.min(100, (ticketCount / company.max_tickets) * 100) %>%">
|
||||
<%= Math.round((ticketCount / company.max_tickets) * 100) %>% tickets
|
||||
|
||||
<!-- Barra Tickets -->
|
||||
<% const pctTickets = Math.min(100, Math.round((ticketCount / company.max_tickets) * 100)); %>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="small fw-bold text-dark">Volumen de Tickets:</span>
|
||||
<span class="small text-muted"><%= ticketCount %> de <%= company.max_tickets %> (<%= pctTickets %>%)</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 10px; border-radius: 9999px;">
|
||||
<div class="progress-bar <%= pctTickets > 85 ? 'bg-danger' : 'bg-success' %>" style="width: <%= pctTickets %>%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-3 mt-4 rounded-3 bg-light border border-slate-200">
|
||||
<div class="d-flex align-items-center gap-2 mb-1">
|
||||
<i class="fas fa-shield-alt text-primary"></i>
|
||||
<span class="fw-bold text-dark small">Aislamiento Multi-Tenant Certificado</span>
|
||||
</div>
|
||||
<small class="text-muted d-block" style="font-size: 0.74rem;">
|
||||
Tus registros, tickets y evidencias se encuentran estrictamente particionados y asegurados con MariaDB.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user