feat(admin): migrar navegación de tabs a cards agrupados

- Implementar sistema de grupos de componentes tipo "carpetas de apps"
- Crear ComponentGroupRegistry para gestionar grupos y componentes
- Añadir vista home con grupos: Header, Contenido, CTAs, Engagement, Forms, Config
- Rediseñar UI con Design System: header navy, cards blancos, mini-cards verticales
- Incluir animaciones fadeInUp escalonadas y efectos hover con glow
- Mantener navegación a vistas de componentes individuales

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Admin/Infrastructure/Ui/Views/dashboard.php

@@ -2,6 +2,8 @@
 /**
  * ROI Theme - Panel de Administración Principal
  *
+ * Nueva UI con sistema de Cards/Grupos (App-Style Navigation)
+ *
  * @var AdminDashboardRenderer $this
  */
 
@@ -13,76 +15,34 @@ if (!defined('ABSPATH')) {
 }
 
 $components = $this->getComponents();
+$groups = $this->getComponentGroups();
 
-// Determinar tab activo: desde URL o primer componente
-$activeComponentId = array_key_first($components);
-
-// Leer parametro admin-tab de la URL con sanitizacion
-// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Solo lectura de parametro para UI
-if (isset($_GET['admin-tab'])) {
-    $requestedTab = sanitize_text_field(wp_unslash($_GET['admin-tab']));
+// =====================================================
+// SANITIZACIÓN OBLIGATORIA según estándares WordPress
+// =====================================================
+// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Solo lectura de parámetro para UI
+$activeComponent = null;
+if (isset($_GET['component'])) {
+    $requestedComponent = sanitize_text_field(wp_unslash($_GET['component']));
     // Validar que el componente exista
-    if (array_key_exists($requestedTab, $components)) {
-        $activeComponentId = $requestedTab;
+    if (array_key_exists($requestedComponent, $components)) {
+        $activeComponent = $requestedComponent;
     }
 }
 ?>
 
 <div class="wrap roi-admin-panel">
-    <!-- Navigation Tabs -->
-    <ul class="nav nav-tabs nav-tabs-admin mb-0" role="tablist">
-        <?php foreach ($components as $componentId => $component): ?>
-            <li class="nav-item" role="presentation">
-                <button class="nav-link <?php echo $componentId === $activeComponentId ? 'active' : ''; ?>"
-                        data-bs-toggle="tab"
-                        data-bs-target="#<?php echo esc_attr($componentId); ?>Tab"
-                        type="button"
-                        role="tab"
-                        aria-controls="<?php echo esc_attr($componentId); ?>Tab"
-                        aria-selected="<?php echo $componentId === $activeComponentId ? 'true' : 'false'; ?>">
-                    <i class="bi <?php echo esc_attr($component['icon']); ?> me-1"></i>
-                    <?php echo esc_html($component['label']); ?>
-                </button>
-            </li>
-        <?php endforeach; ?>
-    </ul>
 
-    <!-- Tab Content -->
-    <div class="tab-content mt-3">
-        <?php foreach ($components as $componentId => $component):
-            $isActive = ($componentId === $activeComponentId);
-            $componentSettings = $this->getComponentSettings($componentId);
-        ?>
-            <!-- Tab: <?php echo esc_html($component['label']); ?> -->
-            <div class="tab-pane fade <?php echo $isActive ? 'show active' : ''; ?>"
-                 id="<?php echo esc_attr($componentId); ?>Tab"
-                 role="tabpanel">
-
-                <?php
-                // Renderizar FormBuilder del componente
-                $formBuilderClass = $this->getFormBuilderClass($componentId);
-                if (class_exists($formBuilderClass)) {
-                    $formBuilder = new $formBuilderClass($this);
-                    echo $formBuilder->buildForm($componentId);
-                } else {
-                    echo '<p class="text-danger">FormBuilder no encontrado: ' . esc_html($formBuilderClass) . '</p>';
-                }
-                ?>
-
-            </div>
-        <?php endforeach; ?>
-    </div>
-
-    <!-- Botones Globales Save/Cancel -->
-    <div class="d-flex justify-content-end gap-2 p-3 rounded border mt-4" style="background-color: #f8f9fa; border-color: #e9ecef !important;">
-        <button type="button" class="btn btn-outline-secondary" id="cancelChanges">
-            <i class="bi bi-x-circle me-1"></i>
-            Cancelar
-        </button>
-        <button type="button" id="saveSettings" class="btn fw-semibold text-white" style="background-color: #FF8600; border-color: #FF8600;">
-            <i class="bi bi-check-circle me-1"></i>
-            Guardar Cambios
-        </button>
-    </div>
+    <?php if ($activeComponent !== null): ?>
+        <!-- =====================================================
+             Vista de Componente Individual
+             ===================================================== -->
+        <?php include __DIR__ . '/partials/component-view.php'; ?>
+    <?php else: ?>
+        <!-- =====================================================
+             Vista Home: Grupos y Cards
+             ===================================================== -->
+        <?php include __DIR__ . '/partials/groups-home.php'; ?>
+    <?php endif; ?>
 
 </div><!-- /wrap -->

Admin/Infrastructure/Ui/Views/partials/breadcrumb.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Breadcrumb de navegación
+ *
+ * @var AdminDashboardRenderer $this
+ * @var string $activeComponent ID del componente activo
+ * @var array<string, array<string, mixed>> $groups Grupos de componentes
+ * @var array<string, array<string, string>> $components Componentes disponibles
+ * @var array<string, mixed>|null $group Grupo del componente activo
+ * @var array<string, string>|null $component Datos del componente activo
+ */
+
+declare(strict_types=1);
+
+if (!defined('ABSPATH')) {
+    exit;
+}
+?>
+
+<nav class="roi-breadcrumb mb-4" aria-label="<?php echo esc_attr__('Navegación', 'roi-theme'); ?>">
+    <div class="d-flex align-items-center flex-wrap gap-2">
+        <!-- Botón Volver -->
+        <button type="button" class="roi-back-to-home btn btn-sm btn-outline-secondary">
+            <i class="bi bi-arrow-left me-1"></i>
+            <?php echo esc_html__('Volver', 'roi-theme'); ?>
+        </button>
+
+        <!-- Separador -->
+        <span class="roi-breadcrumb__separator text-muted">/</span>
+
+        <!-- Grupo -->
+        <?php if ($group): ?>
+            <span class="roi-breadcrumb__group">
+                <i class="bi <?php echo esc_attr($group['icon']); ?> me-1" style="color: <?php echo esc_attr($group['color']); ?>;"></i>
+                <?php echo esc_html($group['label']); ?>
+            </span>
+            <span class="roi-breadcrumb__separator text-muted">/</span>
+        <?php endif; ?>
+
+        <!-- Componente actual -->
+        <?php if ($component): ?>
+            <span class="roi-breadcrumb__current fw-semibold" aria-current="page" style="color: #FF8600;">
+                <i class="bi <?php echo esc_attr($component['icon']); ?> me-1"></i>
+                <?php echo esc_html($component['label']); ?>
+            </span>
+        <?php endif; ?>
+    </div>
+</nav>

Admin/Infrastructure/Ui/Views/partials/component-view.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Vista de Componente Individual con Breadcrumb
+ *
+ * @var AdminDashboardRenderer $this
+ * @var string $activeComponent ID del componente activo
+ * @var array<string, array<string, mixed>> $groups Grupos de componentes
+ * @var array<string, array<string, string>> $components Componentes disponibles
+ */
+
+declare(strict_types=1);
+
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+$component = $components[$activeComponent] ?? null;
+$groupId = $this->getGroupForComponent($activeComponent);
+$group = $groupId && isset($groups[$groupId]) ? $groups[$groupId] : null;
+?>
+
+<div id="roi-component-view">
+    <!-- Breadcrumb Navigation -->
+    <?php include __DIR__ . '/breadcrumb.php'; ?>
+
+    <!-- Component Form Container -->
+    <!-- IMPORTANTE: El tab-pane con clase .active es necesario para que el JS
+         de handleSaveSettings() pueda encontrar los campos del formulario -->
+    <div class="tab-content">
+        <div class="tab-pane fade show active"
+             id="<?php echo esc_attr($activeComponent); ?>Tab"
+             role="tabpanel">
+
+            <div class="roi-component-form-container">
+                <?php
+                // Renderizar FormBuilder del componente
+                $formBuilderClass = $this->getFormBuilderClass($activeComponent);
+                if (class_exists($formBuilderClass)) {
+                    $formBuilder = new $formBuilderClass($this);
+                    echo $formBuilder->buildForm($activeComponent);
+                } else {
+                    ?>
+                    <div class="alert alert-warning">
+                        <i class="bi bi-exclamation-triangle me-2"></i>
+                        <?php
+                        echo esc_html(
+                            sprintf(
+                                /* translators: %s: FormBuilder class name */
+                                __('FormBuilder no encontrado: %s', 'roi-theme'),
+                                $formBuilderClass
+                            )
+                        );
+                        ?>
+                    </div>
+                    <?php
+                }
+                ?>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- Botones Globales Save/Cancel -->
+    <div class="d-flex justify-content-end gap-2 p-3 rounded border mt-4" style="background-color: #f8f9fa; border-color: #e9ecef !important;">
+        <button type="button" class="btn btn-outline-secondary" id="cancelChanges">
+            <i class="bi bi-x-circle me-1"></i>
+            <?php echo esc_html__('Cancelar', 'roi-theme'); ?>
+        </button>
+        <button type="button" id="saveSettings" class="btn fw-semibold text-white" style="background-color: #FF8600; border-color: #FF8600;">
+            <i class="bi bi-check-circle me-1"></i>
+            <?php echo esc_html__('Guardar Cambios', 'roi-theme'); ?>
+        </button>
+    </div>
+</div>

Admin/Infrastructure/Ui/Views/partials/groups-home.php

@@ -0,0 +1,92 @@
+<?php
+/**
+ * Vista Home: Grupos de componentes con mini-cards (Improved Version)
+ *
+ * @var AdminDashboardRenderer $this
+ * @var array<string, array<string, mixed>> $groups Grupos de componentes
+ * @var array<string, array<string, string>> $components Componentes disponibles
+ */
+
+declare(strict_types=1);
+
+if (!defined('ABSPATH')) {
+    exit;
+}
+?>
+
+<div id="roi-home-view">
+    <!-- Header Mejorado -->
+    <div class="roi-home-header">
+        <div class="roi-home-header__pattern"></div>
+        <div class="roi-home-header__content">
+            <div class="roi-home-header__icon-wrapper">
+                <i class="bi bi-grid-3x3-gap-fill roi-home-header__icon"></i>
+            </div>
+            <div class="roi-home-header__text">
+                <h1 class="roi-home-header__title">
+                    <?php echo esc_html__('Panel de Administración ROI Theme', 'roi-theme'); ?>
+                </h1>
+                <p class="roi-home-header__subtitle">
+                    <?php echo esc_html__('Selecciona un componente para configurarlo y personalizarlo', 'roi-theme'); ?>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Grid de Grupos Mejorado -->
+    <div class="roi-groups-grid">
+        <?php
+        $delay = 0;
+        foreach ($groups as $groupId => $group):
+        ?>
+            <div class="roi-group-card"
+                 data-group-id="<?php echo esc_attr($groupId); ?>"
+                 style="animation-delay: <?php echo esc_attr($delay . 's'); ?>">
+                <div class="roi-group-card__glow"></div>
+
+                <div class="roi-group-card__header">
+                    <div class="roi-group-card__icon-wrapper">
+                        <i class="bi <?php echo esc_attr($group['icon']); ?> roi-group-card__icon"></i>
+                    </div>
+                    <div class="roi-group-card__header-text">
+                        <h3 class="roi-group-card__title">
+                            <?php echo esc_html($group['label']); ?>
+                        </h3>
+                        <p class="roi-group-card__description">
+                            <?php echo esc_html($group['description']); ?>
+                        </p>
+                    </div>
+                </div>
+
+                <div class="roi-components-grid">
+                    <?php foreach ($group['components'] as $componentId): ?>
+                        <?php if (isset($components[$componentId])): ?>
+                            <?php $component = $components[$componentId]; ?>
+                            <button type="button"
+                                    class="roi-component-minicard"
+                                    data-component-id="<?php echo esc_attr($componentId); ?>"
+                                    aria-label="<?php echo esc_attr(
+                                        sprintf(
+                                            /* translators: %s: component label */
+                                            __('Configurar %s', 'roi-theme'),
+                                            $component['label']
+                                        )
+                                    ); ?>">
+                                <div class="roi-component-minicard__icon-bg">
+                                    <i class="bi <?php echo esc_attr($component['icon']); ?> roi-component-minicard__icon"></i>
+                                </div>
+                                <span class="roi-component-minicard__label">
+                                    <?php echo esc_html($component['label']); ?>
+                                </span>
+                            </button>
+                        <?php endif; ?>
+                    <?php endforeach; ?>
+                </div>
+
+            </div>
+        <?php
+        $delay += 0.1;
+        endforeach;
+        ?>
+    </div>
+</div>