help_desk/views/admin/departments.ejs

<%- include('../partials/header') %>
<% title = 'Departamentos de Soporte'; %>

<!-- 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">Catálogo de Departamentos</h1>
            <span class="badge bg-purple-subtle text-purple border px-2.5 py-1" style="font-size: 0.75rem; color: #7c3aed;">
                <%= departments.length %> Áreas
            </span>
        </div>
        <p class="text-muted small mb-0">Define las especialidades para enrutar automáticamente los tickets a los técnicos adecuados.</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>Nuevo Departamento</span>
        </button>
    </div>
</div>

<div class="row g-3">
    <% if (departments.length === 0) { %>
    <div class="col-12">
        <div class="app-card p-5 text-center">
            <i class="fas fa-network-wired text-muted fs-1 mb-2"></i>
            <h5 class="fw-bold text-dark">No hay departamentos configurados</h5>
            <p class="text-muted small mb-3">Crea departamentos para que tus clientes puedan clasificar sus tickets.</p>
            <button type="button" class="btn btn-primary btn-sm px-3 rounded-pill" data-bs-toggle="modal" data-bs-target="#createModal">
                <i class="fas fa-plus me-1"></i> Crear primer departamento
            </button>
        </div>
    </div>
    <% } %>

    <% departments.forEach(d => { %>
    <div class="col-md-6 col-lg-4">
        <div class="app-card h-100 p-3.5 d-flex flex-column justify-content-between">
            <div>
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="d-flex align-items-center gap-2">
                        <div class="kpi-icon-box bg-primary-subtle text-primary" style="width: 36px; height: 36px; font-size: 0.85rem;">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-0"><%= d.nombre %></h6>
                    </div>
                    <span class="badge bg-light text-muted border" style="font-size: 0.70rem;">#<%= d.id %></span>
                </div>
                <p class="text-muted small mb-3" style="font-size: 0.82rem; min-height: 40px;">
                    <%= d.descripcion || 'Sin descripción específica configurada.' %>
                </p>
            </div>
            
            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                <small class="text-muted" style="font-size: 0.72rem;">
                    Área Operativa
                </small>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editModal<%= d.id %>" title="Editar">
                        <i class="fas fa-pen"></i>
                    </button>
                    <form action="/admin/departments/delete/<%= d.id %>" method="POST" style="display:inline">
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('¿Eliminar este departamento?')" title="Eliminar">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Editar Departamento -->
    <div class="modal fade" id="editModal<%= d.id %>" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
                <form action="/admin/departments/update/<%= d.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 Departamento</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 del Departamento <span class="text-danger">*</span></label>
                            <input type="text" name="nombre" class="form-control" value="<%= d.nombre %>" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-dark">Descripción</label>
                            <textarea name="descripcion" class="form-control" rows="3"><%= d.descripcion || '' %></textarea>
                        </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>
    <% }) %>
</div>

<!-- Modal Crear Departamento -->
<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="/admin/departments" 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>Nuevo Departamento</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 del Departamento <span class="text-danger">*</span></label>
                        <input type="text" name="nombre" class="form-control" placeholder="Ej: Redes & Conectividad" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-dark">Descripción Operativa</label>
                        <textarea name="descripcion" class="form-control" rows="3" placeholder="Describe el alcance de este departamento..."></textarea>
                    </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 Departamento</button>
                </div>
            </form>
        </div>
    </div>
</div>

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