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:
+138
-79
@@ -1,136 +1,195 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Empresas - SaaS Admin'; %>
|
||||
|
||||
<!-- 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">Panel SaaS - Empresas</h1>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
|
||||
<i class="fas fa-plus"></i> Nueva Empresa
|
||||
</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">Gestión Multi-Tenant (SaaS)</h1>
|
||||
<span class="badge bg-dark text-warning border px-2.5 py-1" style="font-size: 0.75rem;">
|
||||
<i class="fas fa-crown me-1"></i> Superadmin Console
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">Administración de empresas, suscripciones de planes y cuotas globales del sistema.</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>Nueva Empresa</span>
|
||||
</button>
|
||||
</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>Slug</th>
|
||||
<th>Plan</th>
|
||||
<th>Usuarios</th>
|
||||
<th>Tickets</th>
|
||||
<th>Límites</th>
|
||||
<th>Activo</th>
|
||||
<th>Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% companies.forEach(c => { %>
|
||||
<tr>
|
||||
<td><%= c.id %></td>
|
||||
<td><%= c.name %></td>
|
||||
<td><code><%= c.slug %></code></td>
|
||||
<td><span class="badge bg-<%= c.plan === 'enterprise' ? 'danger' : c.plan === 'pro' ? 'warning' : 'secondary' %>"><%= c.plan %></span></td>
|
||||
<td><%= c.userCount || 0 %></td>
|
||||
<td><%= c.ticketCount || 0 %></td>
|
||||
<td><%= c.max_users %> users / <%= c.max_tickets %> tickets</td>
|
||||
<td>
|
||||
<span class="badge bg-<%= c.is_active ? 'success' : 'danger' %>">
|
||||
<%= c.is_active ? 'Sí' : 'No' %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<%= c.id %>">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</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-sitemap text-primary"></i>
|
||||
<h5 class="mb-0 fw-bold" style="font-size: 0.95rem;">Organizaciones Registradas</h5>
|
||||
<span class="badge bg-light text-dark border ms-1"><%= companies.length %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table app-table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;">ID</th>
|
||||
<th>Nombre de Empresa</th>
|
||||
<th>Slug Tenant</th>
|
||||
<th>Plan Activo</th>
|
||||
<th>Usuarios</th>
|
||||
<th>Tickets</th>
|
||||
<th>Límites Cuota</th>
|
||||
<th>Estado</th>
|
||||
<th class="text-end" style="width: 90px;">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% companies.forEach(c => { %>
|
||||
<tr>
|
||||
<td><span class="badge bg-light text-dark border">#<%= c.id %></span></td>
|
||||
<td>
|
||||
<div class="fw-bold text-dark"><%= c.name %></div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-light text-primary border font-monospace"><%= c.slug %></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge company-plan-badge">
|
||||
<%= (c.plan || 'Free').toUpperCase() %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fw-medium text-dark"><%= c.userCount || 0 %></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fw-medium text-dark"><%= c.ticketCount || 0 %></span>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted" style="font-size: 0.75rem;">
|
||||
<%= c.max_users %> users / <%= c.max_tickets %> tks
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<% if (c.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>Suspendido</span>
|
||||
<% } %>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editModal<%= c.id %>" title="Editar cuotas y plan">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="createModal">
|
||||
<!-- Modal Crear Empresa -->
|
||||
<div class="modal fade" id="createModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
|
||||
<form action="/saas/companies/create" method="POST">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Nueva Empresa</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-plus-circle text-primary me-2"></i>Nueva Organización SaaS</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="name" class="form-control" required>
|
||||
<label class="form-label small fw-bold text-dark">Nombre de la Empresa <span class="text-danger">*</span></label>
|
||||
<input type="text" name="name" class="form-control" placeholder="Ej: Telcotronics Andes" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Slug (identificador único)</label>
|
||||
<input type="text" name="slug" class="form-control" required>
|
||||
<label class="form-label small fw-bold text-dark">Slug (Identificador URL único) <span class="text-danger">*</span></label>
|
||||
<input type="text" name="slug" class="form-control font-monospace" placeholder="ej: telco-andes" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Plan</label>
|
||||
<label class="form-label small fw-bold text-dark">Plan Inicial</label>
|
||||
<select name="plan" class="form-select">
|
||||
<option value="free">Free</option>
|
||||
<option value="pro">Pro</option>
|
||||
<option value="pro" selected>Pro</option>
|
||||
<option value="enterprise">Enterprise</option>
|
||||
</select>
|
||||
</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 Tenant</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales de Edición -->
|
||||
<% companies.forEach(c => { %>
|
||||
<div class="modal fade" id="editModal<%= c.id %>">
|
||||
<div class="modal fade" id="editModal<%= c.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="/saas/companies/update/<%= c.id %>" method="POST">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Editar <%= c.name %></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 <%= c.name %></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="name" class="form-control" value="<%= c.name %>">
|
||||
<label class="form-label small fw-bold text-dark">Nombre</label>
|
||||
<input type="text" name="name" class="form-control" value="<%= c.name %>" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Plan</label>
|
||||
<label class="form-label small fw-bold text-dark">Plan Asignado</label>
|
||||
<select name="plan" class="form-select">
|
||||
<option value="free" <%= c.plan === 'free' ? 'selected' : '' %>>Free</option>
|
||||
<option value="pro" <%= c.plan === 'pro' ? 'selected' : '' %>>Pro</option>
|
||||
<option value="enterprise" <%= c.plan === 'enterprise' ? 'selected' : '' %>>Enterprise</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Máx. Usuarios</label>
|
||||
<input type="number" name="max_users" class="form-control" value="<%= c.max_users %>">
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label small fw-bold text-dark">Máx. Usuarios</label>
|
||||
<input type="number" name="max_users" class="form-control" value="<%= c.max_users %>">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small fw-bold text-dark">Máx. Tickets</label>
|
||||
<input type="number" name="max_tickets" class="form-control" value="<%= c.max_tickets %>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Máx. Tickets</label>
|
||||
<input type="number" name="max_tickets" class="form-control" value="<%= c.max_tickets %>">
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" name="is_active" class="form-check-input" value="1" <%= c.is_active ? 'checked' : '' %>>
|
||||
<label class="form-check-label">Activo</label>
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input type="checkbox" name="is_active" class="form-check-input" value="1" id="activeSwitch<%= c.id %>" <%= c.is_active ? 'checked' : '' %>>
|
||||
<label class="form-check-label small fw-semibold text-dark" for="activeSwitch<%= c.id %>">Organización Activa</label>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user