# 🎛️ PANEL DE ADMINISTRACIÓN PRINCIPAL ## Arquitectura del Sistema El panel de administración utiliza un **sistema de tabs (pestañas)** de Bootstrap 5, donde todos los componentes existen en una sola página y se alternan mediante JavaScript. ### Características Principales - ✅ **Single Page**: Todos los componentes en un solo archivo `main.php` - ✅ **Bootstrap Tabs**: Navegación mediante `nav-tabs` y `tab-pane` - ✅ **Carga Modular**: Cada componente se incluye con `require_once` - ✅ **Botones Globales**: Save/Cancel compartidos para todos los componentes - ✅ **Sin Recargas**: Cambio de tabs sin reload de página --- ## Estructura del main.php ```php

Configure los componentes del tema

``` --- ## Agregar un Nuevo Tab ### Paso 1: Agregar el Tab en la Navegación ```php ``` **Reemplazar:** - `[tabId]`: ID único del tab (ej: `notificationBarTab`, `siteFooterTab`) - `[icon-class]`: Clase del icono de Bootstrap Icons (ej: `megaphone-fill`) - `[Nombre del Componente]`: Nombre visible del tab (ej: "Barra de Notificaciones") ### Paso 2: Incluir el Componente en Tab Content ```php
``` **Reemplazar:** - `[Component Name]`: Nombre descriptivo del componente - `[name]`: Nombre del archivo (ej: `notification-bar`, `site-footer`) ### Paso 3: Crear el Archivo del Componente Crear `Admin/Components/component-[name].php`: ```php

[Título del Componente]

[Descripción breve del componente]

``` --- ## Iconos Sugeridos por Tipo de Componente | Tipo de Componente | Icono | Clase Bootstrap Icons | |--------------------|-------|----------------------| | Notificaciones/Anuncios | 📢 | `bi-megaphone-fill` | | Navegación/Menú | 📋 | `bi-layout-text-window` | | Sección Hero | 🖼️ | `bi-image` | | Footer | ⬇️ | `bi-box-arrow-down` | | Formularios | 📝 | `bi-clipboard-check` | | Call-to-Action | 👆 | `bi-cursor-fill` | | Testimonios | 💬 | `bi-chat-quote` | | Configuración | ⚙️ | `bi-gear-fill` | --- ## Ejemplo Completo: Agregar Componente de Navegación ### 1. Agregar Tab en main.php ```php ``` **Notas:** - El primer tab tiene `class="nav-link active"` - Los demás tabs solo tienen `class="nav-link"` ### 2. Incluir Componente en Tab Content ```php
``` ### 3. Crear component-navbar.php Crear archivo: `Admin/Components/component-navbar.php` ```php ``` **Notas:** - El primer tab-pane tiene `class="tab-pane fade show active"` - Los demás tab-panes tienen `class="tab-pane fade"` --- ## Orden de los Tabs ### Por Prioridad Organizar los tabs de más importante a menos importante: 1. Componentes críticos/visibles (Header, Navbar, Hero) 2. Componentes de contenido (Secciones, CTAs) 3. Componentes complementarios (Footer, Forms) 4. Configuraciones generales ### Ejemplo de Orden ```php ``` --- ## Botones Globales Save/Cancel Los botones de guardar y cancelar son **globales** para todos los tabs: ```php
``` ### JavaScript para Activar/Desactivar Guardar ```javascript // Detectar cambios en cualquier campo document.querySelectorAll('input, select, textarea').forEach(field => { field.addEventListener('change', function() { // Activar botón de guardar document.getElementById('saveSettings').disabled = false; }); }); // Guardar cambios document.getElementById('saveSettings').addEventListener('click', function() { // Guardar configuración de todos los componentes saveAllConfigs(); // Desactivar botón de guardar this.disabled = true; }); // Cancelar cambios document.getElementById('cancelChanges').addEventListener('click', function() { if (confirm('¿Descartar todos los cambios sin guardar?')) { // Recargar configuraciones originales loadAllConfigs(); // Desactivar botón de guardar document.getElementById('saveSettings').disabled = true; } }); ``` --- ## Responsive Behavior ### Desktop (≥992px) - Tabs en una sola línea horizontal - Grid de 2 columnas (configuración + preview) - Espaciado completo ### Tablet (768px - 991px) - Tabs pueden hacer wrap a 2 líneas - Grid de 2 columnas (se mantiene) - Espaciado reducido ### Mobile (<768px) - Tabs en scroll horizontal o stacked vertical - Grid stacked (1 columna) - Botones Save/Cancel pueden hacer stack ```css @media (max-width: 991px) { .nav-tabs { flex-wrap: wrap; } .nav-tabs .nav-link { font-size: 0.9rem; padding: 0.5rem 0.75rem; } } @media (max-width: 767px) { .nav-tabs { overflow-x: auto; flex-wrap: nowrap; } .nav-tabs .nav-item { white-space: nowrap; } } ``` --- ## Funcionalidad Adicional (Opcional) ### Badges de Estado en Tabs ```php
  • [Nombre del Componente] Activo
    • ``` **Estados posibles:** - `bg-success`: Activo - `bg-secondary`: Inactivo - `bg-warning text-dark`: Requiere atención ### Indicador de Cambios Sin Guardar ```javascript // Agregar asterisco al tab si tiene cambios sin guardar function markTabAsModified(tabId) { const tabLink = document.querySelector(`a[data-bs-target="#${tabId}"]`); if (!tabLink.querySelector('.modified-indicator')) { tabLink.innerHTML += ' *'; } } ``` --- ## Checklist de Implementación Cuando agregues un nuevo componente al panel, asegúrate de: - [ ] Agregar el tab en la navegación (`