help_desk/views/saas/companies.ejs

<%- 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 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">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="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>

<!-- Modal Crear Empresa -->
<div class="modal fade" id="createModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <form action="/saas/companies/create" 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>Nueva Organización SaaS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <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 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 small fw-bold text-dark">Plan Inicial</label>
                        <select name="plan" class="form-select">
                            <option value="free">Free</option>
                            <option value="pro" selected>Pro</option>
                            <option value="enterprise">Enterprise</option>
                        </select>
                    </div>
                </div>
                <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 %>" tabindex="-1">
    <div class="modal-dialog">
        <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 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 p-4">
                    <div class="mb-3">
                        <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 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="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="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 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>
    </div>
</div>
<% }) %>

<%- include('../partials/footer') %>