Fase 1: Estructura Base y DI Container - Clean Architecture

COMPLETADO: Fase 1 de la migración a Clean Architecture + POO

## Estructura de Carpetas
- ✓ Estructura completa de 4 capas (Domain, Application, Infrastructure, Presentation)
- ✓ Carpetas de Use Cases (SaveComponent, GetComponent, DeleteComponent, SyncSchema)
- ✓ Estructura de tests (Unit, Integration, E2E)
- ✓ Carpetas de schemas y templates

## Composer y Autoloading
- ✓ PSR-4 autoloading configurado para ROITheme namespace
- ✓ Autoloader optimizado regenerado

## DI Container
- ✓ DIContainer implementado con patrón Singleton
- ✓ Métodos set(), get(), has() para gestión de servicios
- ✓ Getters específicos para ComponentRepository, ValidationService, CacheService
- ✓ Placeholders que serán implementados en Fase 5
- ✓ Prevención de clonación y deserialización

## Interfaces
- ✓ ComponentRepositoryInterface (Domain)
- ✓ ValidationServiceInterface (Application)
- ✓ CacheServiceInterface (Application)
- ✓ Component entity placeholder (Domain)

## Bootstrap
- ✓ functions.php actualizado con carga de Composer autoloader
- ✓ Inicialización del DIContainer
- ✓ Helper function roi_container() disponible globalmente

## Tests
- ✓ 10 tests unitarios para DIContainer (100% cobertura)
- ✓ Total: 13 tests unitarios, 28 assertions
- ✓ Suite de tests pasando correctamente

## Validación
- ✓ Script de validación automatizado (48/48 checks pasados)
- ✓ 100% de validaciones exitosas

La arquitectura base está lista para la Fase 2.

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

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

admin/includes/class-admin-menu.php

@@ -4,7 +4,7 @@
  *
  * Registra menú en WordPress admin y carga assets
  *
- * @package Apus_Theme
+ * @package ROI_Theme
  * @since 2.0.0
  */
 
@@ -12,7 +12,7 @@ if (!defined('ABSPATH')) {
 	exit;
 }
 
-class APUS_Admin_Menu {
+class ROI_Admin_Menu {
 
 	/**
 	 * Constructor
@@ -29,50 +29,118 @@ class APUS_Admin_Menu {
 	public function register_menu() {
 		// Menú principal de nivel superior (sin callback para que sea solo contenedor)
 		add_menu_page(
-			'Apus Theme',                    // Page title
-			'Apus Theme',                    // Menu title
+			'ROI Theme',                     // Page title
+			'ROI Theme',                     // Menu title
 			'manage_options',                // Capability
-			'apus-theme-menu',               // Menu slug (solo identificador, no página real)
+			'roi-theme-menu',                // Menu slug (solo identificador, no página real)
 			'',                              // Sin callback = solo contenedor
 			'dashicons-admin-generic',       // Icon (WordPress Dashicon)
 			61                               // Position (61 = después de Appearance que es 60)
 		);
 
-		// Submenú "Theme Options" (primer y principal subitem)
+		// Submenú 1: "Theme Options" (formulario viejo de apariencia)
 		add_submenu_page(
-			'apus-theme-menu',               // Parent slug
+			'roi-theme-menu',                // Parent slug
 			'Theme Options',                 // Page title
 			'Theme Options',                 // Menu title
 			'manage_options',                // Capability
-			'apus-theme-settings',           // Menu slug (página real)
+			'roi-theme-settings',            // Menu slug
 			array($this, 'render_admin_page') // Callback
 		);
 
+		// Submenú 2: "Componentes" (nuevo sistema de tabs)
+		add_submenu_page(
+			'roi-theme-menu',                     // Parent slug
+			'Componentes',                        // Page title
+			'Componentes',                        // Menu title
+			'manage_options',                     // Capability
+			'roi-theme-components',               // Menu slug
+			array($this, 'render_components_page') // Callback
+		);
+
 		// Remover el primer submenú duplicado que WordPress crea automáticamente
-		remove_submenu_page('apus-theme-menu', 'apus-theme-menu');
+		remove_submenu_page('roi-theme-menu', 'roi-theme-menu');
 	}
 
 	/**
-	 * Renderizar página de admin
+	 * Renderizar página de Theme Options (formulario viejo)
 	 */
 	public function render_admin_page() {
 		if (!current_user_can('manage_options')) {
 			wp_die(__('No tienes permisos para acceder a esta página.'));
 		}
 
-		require_once APUS_ADMIN_PANEL_PATH . 'pages/main.php';
+		// Cargar el formulario viejo de theme options
+		require_once get_template_directory() . '/admin/theme-options/options-page-template.php';
+	}
+
+	/**
+	 * Renderizar página de Componentes (nuevo sistema de tabs)
+	 */
+	public function render_components_page() {
+		if (!current_user_can('manage_options')) {
+			wp_die(__('No tienes permisos para acceder a esta página.'));
+		}
+
+		// Cargar el nuevo admin panel con tabs de componentes
+		require_once ROI_ADMIN_PANEL_PATH . 'pages/main.php';
 	}
 
 	/**
 	 * Encolar assets (CSS/JS)
 	 */
 	public function enqueue_assets($hook) {
-		// Solo cargar en nuestra página
-		if ($hook !== 'apus-theme_page_apus-theme-settings') {
+		// Solo cargar en nuestras páginas de admin
+		$allowed_hooks = array(
+			'roi-theme_page_roi-theme-settings',   // Theme Options
+			'roi-theme_page_roi-theme-components'  // Componentes
+		);
+
+		if (!in_array($hook, $allowed_hooks)) {
 			return;
 		}
 
-		// Bootstrap 5.3.2 CSS
+		// CSS y JS específico para Theme Options (formulario viejo)
+		if ($hook === 'roi-theme_page_roi-theme-settings') {
+			// Enqueue WordPress media uploader
+			wp_enqueue_media();
+
+			// Enqueue admin styles para theme options
+			wp_enqueue_style(
+				'roi-admin-options',
+				get_template_directory_uri() . '/admin/assets/css/theme-options.css',
+				array(),
+				ROI_VERSION
+			);
+
+			// Enqueue admin scripts para theme options
+			wp_enqueue_script(
+				'roi-admin-options',
+				get_template_directory_uri() . '/admin/assets/js/theme-options.js',
+				array('jquery', 'wp-color-picker'),
+				ROI_VERSION,
+				true
+			);
+
+			// Localize script
+			wp_localize_script('roi-admin-options', 'roiAdminOptions', array(
+				'ajaxUrl'           => admin_url('admin-ajax.php'),
+				'nonce'             => wp_create_nonce('roi_admin_nonce'),
+				'strings'           => array(
+					'selectImage'   => __('Select Image', 'roi-theme'),
+					'useImage'      => __('Use Image', 'roi-theme'),
+					'removeImage'   => __('Remove Image', 'roi-theme'),
+					'confirmReset'  => __('Are you sure you want to reset all options to default values? This cannot be undone.', 'roi-theme'),
+					'saved'         => __('Settings saved successfully!', 'roi-theme'),
+					'error'         => __('An error occurred while saving settings.', 'roi-theme'),
+				),
+			));
+
+			// No cargar Bootstrap ni otros assets del nuevo panel
+			return;
+		}
+
+		// Bootstrap 5.3.2 CSS (solo para Componentes)
 		wp_enqueue_style(
 			'bootstrap',
 			'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',
@@ -90,10 +158,10 @@ class APUS_Admin_Menu {
 
 		// Admin Panel CSS (Core)
 		wp_enqueue_style(
-			'apus-admin-panel-css',
-			APUS_ADMIN_PANEL_URL . 'assets/css/admin-panel.css',
+			'roi-admin-panel-css',
+			ROI_ADMIN_PANEL_URL . 'assets/css/admin-panel.css',
 			array('bootstrap'),
-			APUS_ADMIN_PANEL_VERSION
+			ROI_ADMIN_PANEL_VERSION
 		);
 
 
@@ -118,20 +186,20 @@ class APUS_Admin_Menu {
 
 		// Admin Panel JS (Core)
 		wp_enqueue_script(
-			'apus-admin-panel-js',
-			APUS_ADMIN_PANEL_URL . 'assets/js/admin-app.js',
+			'roi-admin-panel-js',
+			ROI_ADMIN_PANEL_URL . 'assets/js/admin-app.js',
 			array('jquery', 'axios'),
-			APUS_ADMIN_PANEL_VERSION,
+			ROI_ADMIN_PANEL_VERSION,
 			true
 		);
 
 		// Pasar datos a JavaScript
-		wp_localize_script('apus-admin-panel-js', 'apusAdminData', array(
+		wp_localize_script('roi-admin-panel-js', 'roiAdminData', array(
 			'ajaxUrl' => admin_url('admin-ajax.php'),
-			'nonce'   => wp_create_nonce('apus_admin_nonce')
+			'nonce'   => wp_create_nonce('roi_admin_nonce')
 		));
 	}
 }
 
 // Instanciar clase
-new APUS_Admin_Menu();
+new ROI_Admin_Menu();