127 lines
6.3 KiB
Plaintext
127 lines
6.3 KiB
Plaintext
<%- include('../partials/header') %>
|
|
<% 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 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 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>
|
|
<% }) %>
|
|
<% } %>
|
|
|
|
<!-- 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 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 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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<%- include('../partials/footer') %>
|