updated react app and API backend

1. Added API backend for settings
2. Added React components for the settings page
3. Added JS lint using @wordpress/scripts
4. Lint fixes for PHP

.eslintrc.js

@@ -0,0 +1,22 @@
+const defaultConfig = require( '@wordpress/scripts/config/.eslintrc.js' );
+
+module.exports = {
+	...defaultConfig,
+	rules: {
+		...defaultConfig.rules,
+		// Custom rules for our project
+		'react/react-in-jsx-scope': 'off', // Not needed in React 17+
+		'import/no-unresolved': 'off', // Vite handles module resolution
+		'@wordpress/no-unused-vars-before-return': 'off', // Allow modern patterns
+		'jsdoc/require-param-type': 'off', // Too verbose for React props
+		'jsdoc/require-param': 'off', // Too verbose for React props
+		'no-alert': 'off', // Allow confirm dialogs for UX
+		'jsx-a11y/label-has-associated-control': 'off', // Our labels are correctly associated
+		'jsx-a11y/no-noninteractive-element-to-interactive-role': 'off', // Allow nav with tablist role
+	},
+	globals: {
+		...defaultConfig.globals,
+		// Additional globals for our project
+		helixData: 'readonly',
+	},
+};

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	...require( '@wordpress/prettier-config' ),
+};

admin/disable-wp-admin.php

@@ -127,8 +127,16 @@ add_action(
 			return;
 		}
 
-		// Check if we're already on the helix page or WordPress admin page.
+		// Check if we're already on any Helix page or WordPress admin page.
-		if ( in_array( $current_screen->id, array( 'toplevel_page_helix', 'toplevel_page_wordpress-admin' ), true ) ) {
+		$helix_pages = array(
+			'toplevel_page_helix',
+			'toplevel_page_helix-posts',
+			'toplevel_page_helix-users',
+			'toplevel_page_helix-settings',
+			'toplevel_page_wordpress-admin',
+		);
+
+		if ( in_array( $current_screen->id, $helix_pages, true ) ) {
 			return;
 		}
 

admin/menu-customization.php

@@ -9,7 +9,19 @@
 add_action(
 	'current_screen',
 	function ( $current_screen ) {
-		if ( ! $current_screen || 'toplevel_page_helix' !== $current_screen->id ) {
+		if ( ! $current_screen ) {
+			return;
+		}
+
+		// Check if we're on any Helix admin page.
+		$helix_pages = array(
+			'toplevel_page_helix',
+			'toplevel_page_helix-posts',
+			'toplevel_page_helix-users',
+			'toplevel_page_helix-settings',
+		);
+
+		if ( ! in_array( $current_screen->id, $helix_pages, true ) ) {
 			return;
 		}
 
@@ -27,27 +39,6 @@ add_action(
 
 		// Remove all admin menu separators.
 		remove_all_admin_menu_separators();
-
-		// 2) Add custom Helix menu items.
-		add_menu_page(
-			'Helix Posts',
-			'Posts',
-			'edit_posts',
-			'helix-posts',
-			'helix_posts_callback',
-			'dashicons-admin-post',
-			3
-		);
-
-		add_menu_page(
-			'Helix Users',
-			'Users',
-			'list_users',
-			'helix-users',
-			'helix_users_callback',
-			'dashicons-admin-users',
-			4
-		);
 	},
 	10
 );
@@ -78,7 +69,7 @@ add_action(
 
 		// Check if we're going to the Helix page by looking at the sanitized request.
 		$page_requested    = filter_input( INPUT_GET, 'page', FILTER_SANITIZE_URL );
-		$is_helix_request  = ( 'admin.php' === $pagenow && 'helix' === $page_requested );
+		$is_helix_request  = ( 'admin.php' === $pagenow && ( 'helix' === $page_requested || strpos( $page_requested, 'helix-' ) === 0 ) );
 		$use_default_admin = get_option( 'helix_use_default_admin', false );
 
 		// Always show the WordPress Admin link when navigating to Helix, or when not in default admin mode.
@@ -88,6 +79,37 @@ add_action(
 				update_option( 'helix_use_default_admin', false );
 			}
 
+			// Add Helix menu items.
+			add_menu_page(
+				'Helix Posts',
+				'Posts',
+				'edit_posts',
+				'helix-posts',
+				'helix_posts_callback',
+				'dashicons-admin-post',
+				3
+			);
+
+			add_menu_page(
+				'Helix Users',
+				'Users',
+				'list_users',
+				'helix-users',
+				'helix_users_callback',
+				'dashicons-admin-users',
+				4
+			);
+
+			add_menu_page(
+				'Helix Settings',
+				'Settings',
+				'manage_options',
+				'helix-settings',
+				'helix_settings_callback',
+				'dashicons-admin-settings',
+				5
+			);
+
 			// Add a menu item to go back to default WordPress admin.
 			add_menu_page(
 				'WordPress Admin',           // Page title.
@@ -96,7 +118,7 @@ add_action(
 				'wordpress-admin',           // Menu slug.
 				'wordpress_admin_callback',  // Callback function.
 				'dashicons-wordpress',       // Icon.
-				2                           // Position (after main Helix menu).
+				6                           // Position (after Settings menu).
 			);
 		}
 	},
@@ -142,3 +164,10 @@ function helix_posts_callback() {
 function helix_users_callback() {
 	echo '<div id="helix-users-root"></div>';
 }
+
+/**
+ * Callback function for Settings menu item.
+ */
+function helix_settings_callback() {
+	echo '<div id="helix-settings-root"></div>';
+}

admin/rest-routes.php

@@ -5,22 +5,259 @@
  * @package Helix
  */
 
-add_action(
+// Prevent direct access.
-	'rest_api_init',
+if ( ! defined( 'ABSPATH' ) ) {
-	function () {
+	exit;
-		register_rest_route(
+}
-			'helix/v1',
+
-			'/settings',
+// Include settings API utilities.
+require_once plugin_dir_path( __FILE__ ) . 'settings-api.php';
+
+add_action( 'rest_api_init', 'helix_register_rest_routes' );
+
+/**
+ * Register REST API routes for Helix.
+ *
+ * @since 1.0.0
+ */
+function helix_register_rest_routes() {
+	// Settings endpoints.
+	register_rest_route(
+		'helix/v1',
+		'/settings',
+		array(
 			array(
-				'methods'             => 'GET',
+				'methods'             => WP_REST_Server::READABLE,
-				'permission_callback' => '__return_true',
+				'callback'            => 'helix_get_settings',
-				'callback'            => function () {
+				'permission_callback' => 'helix_settings_permissions_check',
-					return array(
+				'args'                => helix_get_settings_schema(),
-						'siteTitle' => get_option( 'blogname' ),
+			),
-						'language'  => get_option( 'WPLANG' ),
+			array(
-					);
+				'methods'             => WP_REST_Server::EDITABLE,
-				},
+				'callback'            => 'helix_update_settings',
+				'permission_callback' => 'helix_settings_permissions_check',
+				'args'                => helix_update_settings_schema(),
+			),
+		)
+	);
+
+	// Individual setting endpoints.
+	register_rest_route(
+		'helix/v1',
+		'/settings/(?P<setting>[a-zA-Z0-9_-]+)',
+		array(
+			array(
+				'methods'             => WP_REST_Server::READABLE,
+				'callback'            => 'helix_get_single_setting',
+				'permission_callback' => 'helix_settings_permissions_check',
+				'args'                => array(
+					'setting' => array(
+						'description' => __( 'Setting name to retrieve.', 'helix' ),
+						'type'        => 'string',
+						'required'    => true,
+					),
+				),
+			),
+			array(
+				'methods'             => WP_REST_Server::EDITABLE,
+				'callback'            => 'helix_update_single_setting',
+				'permission_callback' => 'helix_settings_permissions_check',
+				'args'                => array(
+					'setting' => array(
+						'description' => __( 'Setting name to update.', 'helix' ),
+						'type'        => 'string',
+						'required'    => true,
+					),
+					'value'   => array(
+						'description' => __( 'Setting value.', 'helix' ),
+						'type'        => array( 'string', 'boolean', 'integer', 'number' ),
+						'required'    => true,
+					),
+				),
+			),
+		)
+	);
+}
+
+/**
+ * Permission callback for settings endpoints.
+ *
+ * @since 1.0.0
+ * @return bool True if the request has read access for the item, false otherwise.
+ */
+function helix_settings_permissions_check() {
+	return current_user_can( 'manage_options' );
+}
+
+/**
+ * Get all WordPress settings.
+ *
+ * @since 1.0.0
+ * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+ */
+function helix_get_settings() {
+	$settings = helix_get_wordpress_settings();
+
+	if ( is_wp_error( $settings ) ) {
+		return $settings;
+	}
+
+	return rest_ensure_response( $settings );
+}
+
+/**
+ * Update WordPress settings.
+ *
+ * @since 1.0.0
+ * @param WP_REST_Request $request Current request object.
+ * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+ */
+function helix_update_settings( $request ) {
+	$params = $request->get_json_params();
+
+	if ( empty( $params ) ) {
+		return new WP_Error(
+			'helix_no_settings_data',
+			__( 'No settings data provided.', 'helix' ),
+			array( 'status' => 400 )
+		);
+	}
+
+	$updated_settings = array();
+	$errors           = array();
+	$allowed_settings = helix_get_allowed_settings();
+
+	foreach ( $params as $setting => $value ) {
+		if ( ! in_array( $setting, $allowed_settings, true ) ) {
+			$errors[ $setting ] = sprintf(
+				/* translators: %s: Setting name */
+				__( 'Setting "%s" is not allowed to be updated.', 'helix' ),
+				$setting
+			);
+			continue;
+		}
+
+		$sanitized_value = helix_sanitize_setting_value( $setting, $value );
+
+		if ( is_wp_error( $sanitized_value ) ) {
+			$errors[ $setting ] = $sanitized_value->get_error_message();
+			continue;
+		}
+
+		$option_name = helix_get_wp_option_name( $setting );
+		$result      = update_option( $option_name, $sanitized_value );
+
+		if ( $result ) {
+			$updated_settings[ $setting ] = $sanitized_value;
+		} else {
+			$errors[ $setting ] = __( 'Failed to update setting.', 'helix' );
+		}
+	}
+
+	if ( ! empty( $errors ) && empty( $updated_settings ) ) {
+		return new WP_Error(
+			'helix_settings_update_failed',
+			__( 'Failed to update any settings.', 'helix' ),
+			array(
+				'status' => 400,
+				'errors' => $errors,
 			)
 		);
 	}
-);
+
+	$response_data = array(
+		'updated' => $updated_settings,
+	);
+
+	if ( ! empty( $errors ) ) {
+		$response_data['errors'] = $errors;
+	}
+
+	return rest_ensure_response( $response_data );
+}
+
+/**
+ * Get a single setting value.
+ *
+ * @since 1.0.0
+ * @param WP_REST_Request $request Current request object.
+ * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+ */
+function helix_get_single_setting( $request ) {
+	$setting = $request->get_param( 'setting' );
+
+	if ( ! helix_is_setting_allowed( $setting ) ) {
+		return new WP_Error(
+			'helix_setting_not_allowed',
+			sprintf(
+				/* translators: %s: Setting name */
+				__( 'Setting "%s" is not allowed.', 'helix' ),
+				$setting
+			),
+			array( 'status' => 403 )
+		);
+	}
+
+	$option_name = helix_get_wp_option_name( $setting );
+	$value       = get_option( $option_name );
+
+	return rest_ensure_response(
+		array(
+			'setting' => $setting,
+			'value'   => $value,
+		)
+	);
+}
+
+/**
+ * Update a single setting value.
+ *
+ * @since 1.0.0
+ * @param WP_REST_Request $request Current request object.
+ * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+ */
+function helix_update_single_setting( $request ) {
+	$setting = $request->get_param( 'setting' );
+	$value   = $request->get_param( 'value' );
+
+	if ( ! helix_is_setting_allowed( $setting ) ) {
+		return new WP_Error(
+			'helix_setting_not_allowed',
+			sprintf(
+				/* translators: %s: Setting name */
+				__( 'Setting "%s" is not allowed to be updated.', 'helix' ),
+				$setting
+			),
+			array( 'status' => 403 )
+		);
+	}
+
+	$sanitized_value = helix_sanitize_setting_value( $setting, $value );
+
+	if ( is_wp_error( $sanitized_value ) ) {
+		return $sanitized_value;
+	}
+
+	$option_name = helix_get_wp_option_name( $setting );
+	$result      = update_option( $option_name, $sanitized_value );
+
+	if ( ! $result && get_option( $option_name ) !== $sanitized_value ) {
+		return new WP_Error(
+			'helix_setting_update_failed',
+			sprintf(
+				/* translators: %s: Setting name */
+				__( 'Failed to update setting "%s".', 'helix' ),
+				$setting
+			),
+			array( 'status' => 500 )
+		);
+	}
+
+	return rest_ensure_response(
+		array(
+			'setting' => $setting,
+			'value'   => $sanitized_value,
+			'updated' => true,
+		)
+	);
+}

admin/settings-api.php

@@ -0,0 +1,493 @@
+<?php
+/**
+ * Settings API utilities and helper functions.
+ *
+ * @package Helix
+ */
+
+// Prevent direct access.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Get the schema for settings GET requests.
+ *
+ * @since 1.0.0
+ * @return array Schema array.
+ */
+function helix_get_settings_schema() {
+	return array(
+		'context' => array(
+			'description' => __( 'Scope under which the request is made; determines fields present in response.', 'helix' ),
+			'type'        => 'string',
+			'enum'        => array( 'view', 'edit' ),
+			'default'     => 'view',
+		),
+	);
+}
+
+/**
+ * Get the schema for settings UPDATE requests.
+ *
+ * @since 1.0.0
+ * @return array Schema array.
+ */
+function helix_update_settings_schema() {
+	$settings_config = helix_get_settings_config();
+	$schema          = array();
+
+	foreach ( $settings_config as $category => $settings ) {
+		foreach ( $settings as $setting_key => $setting_config ) {
+			$schema[ $setting_key ] = array(
+				'description' => $setting_config['description'],
+				'type'        => $setting_config['type'],
+			);
+
+			if ( isset( $setting_config['enum'] ) ) {
+				$schema[ $setting_key ]['enum'] = $setting_config['enum'];
+			}
+
+			if ( isset( $setting_config['default'] ) ) {
+				$schema[ $setting_key ]['default'] = $setting_config['default'];
+			}
+		}
+	}
+
+	return $schema;
+}
+
+/**
+ * Get all WordPress settings in organized format.
+ *
+ * @since 1.0.0
+ * @return array|WP_Error Array of settings or WP_Error on failure.
+ */
+function helix_get_wordpress_settings() {
+	$settings_config = helix_get_settings_config();
+	$settings        = array();
+
+	foreach ( $settings_config as $category => $category_settings ) {
+		$settings[ $category ] = array();
+
+		foreach ( $category_settings as $setting_key => $setting_config ) {
+			$option_name = helix_get_wp_option_name( $setting_key );
+			$value       = get_option( $option_name, $setting_config['default'] ?? null );
+
+			// Apply formatting if specified.
+			if ( isset( $setting_config['format_callback'] ) && is_callable( $setting_config['format_callback'] ) ) {
+				$value = call_user_func( $setting_config['format_callback'], $value );
+			}
+
+			$settings[ $category ][ $setting_key ] = array(
+				'value'       => $value,
+				'label'       => $setting_config['label'],
+				'description' => $setting_config['description'],
+				'type'        => $setting_config['type'],
+			);
+
+			// Add additional properties if they exist.
+			if ( isset( $setting_config['enum'] ) ) {
+				$settings[ $category ][ $setting_key ]['options'] = $setting_config['enum'];
+			}
+		}
+	}
+
+	return $settings;
+}
+
+/**
+ * Get the list of allowed settings that can be updated.
+ *
+ * @since 1.0.0
+ * @return array Array of allowed setting keys.
+ */
+function helix_get_allowed_settings() {
+	$settings_config  = helix_get_settings_config();
+	$allowed_settings = array();
+
+	foreach ( $settings_config as $category => $settings ) {
+		$allowed_settings = array_merge( $allowed_settings, array_keys( $settings ) );
+	}
+
+	/**
+	 * Filter the list of allowed settings.
+	 *
+	 * @since 1.0.0
+	 * @param array $allowed_settings Array of allowed setting keys.
+	 */
+	return apply_filters( 'helix_allowed_settings', $allowed_settings );
+}
+
+/**
+ * Check if a setting is allowed to be accessed/updated.
+ *
+ * @since 1.0.0
+ * @param string $setting Setting key to check.
+ * @return bool True if allowed, false otherwise.
+ */
+function helix_is_setting_allowed( $setting ) {
+	$allowed_settings = helix_get_allowed_settings();
+	return in_array( $setting, $allowed_settings, true );
+}
+
+/**
+ * Get WordPress option name from setting key.
+ *
+ * @since 1.0.0
+ * @param string $setting Setting key.
+ * @return string WordPress option name.
+ */
+function helix_get_wp_option_name( $setting ) {
+	$option_mapping = helix_get_option_mapping();
+	return $option_mapping[ $setting ] ?? $setting;
+}
+
+/**
+ * Get mapping between setting keys and WordPress option names.
+ *
+ * @since 1.0.0
+ * @return array Mapping array.
+ */
+function helix_get_option_mapping() {
+	return array(
+		'siteTitle'                  => 'blogname',
+		'tagline'                    => 'blogdescription',
+		'siteUrl'                    => 'siteurl',
+		'homeUrl'                    => 'home',
+		'adminEmail'                 => 'admin_email',
+		'language'                   => 'WPLANG',
+		'timezone'                   => 'timezone_string',
+		'dateFormat'                 => 'date_format',
+		'timeFormat'                 => 'time_format',
+		'startOfWeek'                => 'start_of_week',
+		'postsPerPage'               => 'posts_per_page',
+		'showOnFront'                => 'show_on_front',
+		'pageOnFront'                => 'page_on_front',
+		'pageForPosts'               => 'page_for_posts',
+		'defaultCategory'            => 'default_category',
+		'defaultPostFormat'          => 'default_post_format',
+		'useSmilies'                 => 'use_smilies',
+		'defaultCommentStatus'       => 'default_comment_status',
+		'defaultPingStatus'          => 'default_ping_status',
+		'siteLogo'                   => 'site_logo',
+		'siteIcon'                   => 'site_icon',
+		'thumbnailSizeW'             => 'thumbnail_size_w',
+		'thumbnailSizeH'             => 'thumbnail_size_h',
+		'mediumSizeW'                => 'medium_size_w',
+		'mediumSizeH'                => 'medium_size_h',
+		'largeSizeW'                 => 'large_size_w',
+		'largeSizeH'                 => 'large_size_h',
+		'uploadsUseYearmonthFolders' => 'uploads_use_yearmonth_folders',
+		'usersCanRegister'           => 'users_can_register',
+		'defaultRole'                => 'default_role',
+		'blogPublic'                 => 'blog_public',
+		'helixUseDefaultAdmin'       => 'helix_use_default_admin',
+	);
+}
+
+/**
+ * Sanitize setting value based on setting type.
+ *
+ * @since 1.0.0
+ * @param string $setting Setting key.
+ * @param mixed  $value   Value to sanitize.
+ * @return mixed|WP_Error Sanitized value or WP_Error on failure.
+ */
+function helix_sanitize_setting_value( $setting, $value ) {
+	$settings_config = helix_get_settings_config();
+	$setting_config  = null;
+
+	// Find the setting configuration.
+	foreach ( $settings_config as $category => $settings ) {
+		if ( isset( $settings[ $setting ] ) ) {
+			$setting_config = $settings[ $setting ];
+			break;
+		}
+	}
+
+	if ( ! $setting_config ) {
+		return new WP_Error(
+			'helix_invalid_setting',
+			sprintf(
+				/* translators: %s: Setting name */
+				__( 'Invalid setting: %s', 'helix' ),
+				$setting
+			),
+			array( 'status' => 400 )
+		);
+	}
+
+	// Apply custom sanitization if available.
+	if ( isset( $setting_config['sanitize_callback'] ) && is_callable( $setting_config['sanitize_callback'] ) ) {
+		return call_user_func( $setting_config['sanitize_callback'], $value );
+	}
+
+	// Default sanitization based on type.
+	switch ( $setting_config['type'] ) {
+		case 'string':
+			return sanitize_text_field( $value );
+
+		case 'email':
+			$sanitized = sanitize_email( $value );
+			if ( ! is_email( $sanitized ) ) {
+				return new WP_Error(
+					'helix_invalid_email',
+					__( 'Invalid email address.', 'helix' ),
+					array( 'status' => 400 )
+				);
+			}
+			return $sanitized;
+
+		case 'url':
+			return esc_url_raw( $value );
+
+		case 'integer':
+			return absint( $value );
+
+		case 'number':
+			return floatval( $value );
+
+		case 'boolean':
+			return rest_sanitize_boolean( $value );
+
+		default:
+			// For enum types, validate against allowed values.
+			if ( isset( $setting_config['enum'] ) ) {
+				if ( ! in_array( $value, $setting_config['enum'], true ) ) {
+					return new WP_Error(
+						'helix_invalid_enum_value',
+						sprintf(
+							/* translators: 1: Setting name, 2: Allowed values */
+							__( 'Invalid value for %1$s. Allowed values: %2$s', 'helix' ),
+							$setting,
+							implode( ', ', $setting_config['enum'] )
+						),
+						array( 'status' => 400 )
+					);
+				}
+			}
+			return sanitize_text_field( $value );
+	}
+}
+
+/**
+ * Get comprehensive settings configuration.
+ *
+ * @since 1.0.0
+ * @return array Settings configuration array.
+ */
+function helix_get_settings_config() {
+	return array(
+		'site_information'   => array(
+			'siteTitle'  => array(
+				'label'       => __( 'Site Title', 'helix' ),
+				'description' => __( 'In a few words, explain what this site is about.', 'helix' ),
+				'type'        => 'string',
+				'default'     => get_bloginfo( 'name' ),
+			),
+			'tagline'    => array(
+				'label'       => __( 'Tagline', 'helix' ),
+				'description' => __( 'In a few words, explain what this site is about.', 'helix' ),
+				'type'        => 'string',
+				'default'     => get_bloginfo( 'description' ),
+			),
+			'siteUrl'    => array(
+				'label'       => __( 'WordPress Address (URL)', 'helix' ),
+				'description' => __( 'The address of your WordPress core files.', 'helix' ),
+				'type'        => 'url',
+				'default'     => site_url(),
+			),
+			'homeUrl'    => array(
+				'label'       => __( 'Site Address (URL)', 'helix' ),
+				'description' => __( 'The address you want people to type in their browser to reach your website.', 'helix' ),
+				'type'        => 'url',
+				'default'     => home_url(),
+			),
+			'adminEmail' => array(
+				'label'       => __( 'Administration Email Address', 'helix' ),
+				'description' => __( 'This address is used for admin purposes.', 'helix' ),
+				'type'        => 'email',
+				'default'     => get_option( 'admin_email' ),
+			),
+			'language'   => array(
+				'label'       => __( 'Site Language', 'helix' ),
+				'description' => __( 'The language for your site.', 'helix' ),
+				'type'        => 'string',
+				'default'     => get_locale(),
+			),
+			'timezone'   => array(
+				'label'       => __( 'Timezone', 'helix' ),
+				'description' => __( 'Choose either a city in the same timezone as you or a UTC timezone offset.', 'helix' ),
+				'type'        => 'string',
+				'default'     => get_option( 'timezone_string', 'UTC' ),
+			),
+		),
+		'content_reading'    => array(
+			'showOnFront'  => array(
+				'label'       => __( 'Your homepage displays', 'helix' ),
+				'description' => __( 'What to show on the front page.', 'helix' ),
+				'type'        => 'string',
+				'enum'        => array( 'posts', 'page' ),
+				'default'     => 'posts',
+			),
+			'pageOnFront'  => array(
+				'label'       => __( 'Homepage', 'helix' ),
+				'description' => __( 'The page to show on the front page.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 0,
+			),
+			'pageForPosts' => array(
+				'label'       => __( 'Posts page', 'helix' ),
+				'description' => __( 'The page to show posts.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 0,
+			),
+			'postsPerPage' => array(
+				'label'       => __( 'Blog pages show at most', 'helix' ),
+				'description' => __( 'Number of posts to show per page.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 10,
+			),
+			'blogPublic'   => array(
+				'label'       => __( 'Search engine visibility', 'helix' ),
+				'description' => __( 'Discourage search engines from indexing this site.', 'helix' ),
+				'type'        => 'boolean',
+				'default'     => true,
+			),
+			'dateFormat'   => array(
+				'label'       => __( 'Date Format', 'helix' ),
+				'description' => __( 'Format for displaying dates.', 'helix' ),
+				'type'        => 'string',
+				'default'     => get_option( 'date_format' ),
+			),
+			'timeFormat'   => array(
+				'label'       => __( 'Time Format', 'helix' ),
+				'description' => __( 'Format for displaying times.', 'helix' ),
+				'type'        => 'string',
+				'default'     => get_option( 'time_format' ),
+			),
+			'startOfWeek'  => array(
+				'label'       => __( 'Week Starts On', 'helix' ),
+				'description' => __( 'The day of the week the calendar should start on.', 'helix' ),
+				'type'        => 'integer',
+				'enum'        => array( 0, 1, 2, 3, 4, 5, 6 ),
+				'default'     => 1,
+			),
+		),
+		'writing_publishing' => array(
+			'defaultCategory'      => array(
+				'label'       => __( 'Default Post Category', 'helix' ),
+				'description' => __( 'The default category for new posts.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 1,
+			),
+			'defaultPostFormat'    => array(
+				'label'       => __( 'Default Post Format', 'helix' ),
+				'description' => __( 'The default format for new posts.', 'helix' ),
+				'type'        => 'string',
+				'enum'        => array( 'standard', 'aside', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio', 'chat' ),
+				'default'     => 'standard',
+			),
+			'useSmilies'           => array(
+				'label'       => __( 'Convert emoticons', 'helix' ),
+				'description' => __( 'Convert emoticons like :-) and :-P to graphics on display.', 'helix' ),
+				'type'        => 'boolean',
+				'default'     => true,
+			),
+			'defaultCommentStatus' => array(
+				'label'       => __( 'Default comment status', 'helix' ),
+				'description' => __( 'Allow people to submit comments on new posts.', 'helix' ),
+				'type'        => 'string',
+				'enum'        => array( 'open', 'closed' ),
+				'default'     => 'open',
+			),
+			'defaultPingStatus'    => array(
+				'label'       => __( 'Default ping status', 'helix' ),
+				'description' => __( 'Allow link notifications from other blogs (pingbacks and trackbacks) on new posts.', 'helix' ),
+				'type'        => 'string',
+				'enum'        => array( 'open', 'closed' ),
+				'default'     => 'open',
+			),
+		),
+		'media_assets'       => array(
+			'siteLogo'                   => array(
+				'label'       => __( 'Site Logo', 'helix' ),
+				'description' => __( 'The site logo.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 0,
+			),
+			'siteIcon'                   => array(
+				'label'       => __( 'Site Icon', 'helix' ),
+				'description' => __( 'The site icon (favicon).', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 0,
+			),
+			'thumbnailSizeW'             => array(
+				'label'       => __( 'Thumbnail Width', 'helix' ),
+				'description' => __( 'Maximum width of thumbnail images.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 150,
+			),
+			'thumbnailSizeH'             => array(
+				'label'       => __( 'Thumbnail Height', 'helix' ),
+				'description' => __( 'Maximum height of thumbnail images.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 150,
+			),
+			'mediumSizeW'                => array(
+				'label'       => __( 'Medium Width', 'helix' ),
+				'description' => __( 'Maximum width of medium-sized images.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 300,
+			),
+			'mediumSizeH'                => array(
+				'label'       => __( 'Medium Height', 'helix' ),
+				'description' => __( 'Maximum height of medium-sized images.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 300,
+			),
+			'largeSizeW'                 => array(
+				'label'       => __( 'Large Width', 'helix' ),
+				'description' => __( 'Maximum width of large-sized images.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 1024,
+			),
+			'largeSizeH'                 => array(
+				'label'       => __( 'Large Height', 'helix' ),
+				'description' => __( 'Maximum height of large-sized images.', 'helix' ),
+				'type'        => 'integer',
+				'default'     => 1024,
+			),
+			'uploadsUseYearmonthFolders' => array(
+				'label'       => __( 'Organize uploads into date-based folders', 'helix' ),
+				'description' => __( 'Organize my uploads into month- and year-based folders.', 'helix' ),
+				'type'        => 'boolean',
+				'default'     => true,
+			),
+		),
+		'users_membership'   => array(
+			'usersCanRegister' => array(
+				'label'       => __( 'Anyone can register', 'helix' ),
+				'description' => __( 'Allow anyone to register as a user.', 'helix' ),
+				'type'        => 'boolean',
+				'default'     => false,
+			),
+			'defaultRole'      => array(
+				'label'       => __( 'New User Default Role', 'helix' ),
+				'description' => __( 'The default role for new users.', 'helix' ),
+				'type'        => 'string',
+				'enum'        => array( 'subscriber', 'contributor', 'author', 'editor', 'administrator' ),
+				'default'     => 'subscriber',
+			),
+		),
+		'helix_specific'     => array(
+			'helixUseDefaultAdmin' => array(
+				'label'       => __( 'Use Default WordPress Admin', 'helix' ),
+				'description' => __( 'Use the default WordPress admin interface instead of Helix.', 'helix' ),
+				'type'        => 'boolean',
+				'default'     => false,
+			),
+		),
+	);
+}

composer.json

@@ -1,21 +1,21 @@
 {
-  "name": "helix/helix",
+	"name": "helix/helix",
-  "description": "Helix – Modern WP Admin",
+	"description": "Helix – Modern WP Admin",
-  "type": "project",
+	"type": "project",
-  "license": "GPL-2.0-or-later",
+	"license": "GPL-2.0-or-later",
-  "require": {},
+	"require": {},
-  "require-dev": {
+	"require-dev": {
-    "squizlabs/php_codesniffer": "^3.10",
+		"squizlabs/php_codesniffer": "^3.10",
-    "wp-coding-standards/wpcs": "^3.0",
+		"wp-coding-standards/wpcs": "^3.0",
-    "dealerdirect/phpcodesniffer-composer-installer": "^1.0"
+		"dealerdirect/phpcodesniffer-composer-installer": "^1.0"
-  },
+	},
-  "scripts": {
+	"scripts": {
-    "lint": "vendor/bin/phpcs -q --report=full",
+		"lint": "vendor/bin/phpcs -q --report=full",
-    "fix": "vendor/bin/phpcbf"
+		"fix": "vendor/bin/phpcbf"
-  },
+	},
-  "config": {
+	"config": {
-    "allow-plugins": {
+		"allow-plugins": {
-      "dealerdirect/phpcodesniffer-composer-installer": true
+			"dealerdirect/phpcodesniffer-composer-installer": true
-    }
+		}
-  }
+	}
 }

enqueue.php

@@ -8,7 +8,15 @@
 add_action(
 	'admin_enqueue_scripts',
 	function ( $hook ) {
-		if ( 'toplevel_page_helix' !== $hook ) {
+		// Define Helix admin pages that need the React app.
+		$helix_pages = array(
+			'toplevel_page_helix',
+			'toplevel_page_helix-posts',
+			'toplevel_page_helix-users',
+			'toplevel_page_helix-settings',
+		);
+
+		if ( ! in_array( $hook, $helix_pages, true ) ) {
 			return;
 		}
 
@@ -20,6 +28,18 @@ add_action(
 			array()
 		);
 
+		// Enqueue the CSS file built by Vite.
+		$css_files = glob( plugin_dir_path( __FILE__ ) . 'build/assets/*.css' );
+		if ( ! empty( $css_files ) ) {
+			$css_file = basename( $css_files[0] );
+			wp_enqueue_style(
+				'helix-app-styles',
+				plugin_dir_url( __FILE__ ) . 'build/assets/' . $css_file,
+				array(),
+				'0.1.0'
+			);
+		}
+
 		// Get the original route that was redirected.
 		$original_route = filter_input( INPUT_GET, 'helix_route', FILTER_SANITIZE_URL );
 		$original_route = $original_route ? esc_url_raw( $original_route ) : '/wp-admin/';

package.json

@@ -1,17 +1,23 @@
 {
-  "name": "helix-admin",
+	"name": "helix-admin",
-  "version": "0.1.0",
+	"version": "0.1.0",
-  "scripts": {
+	"scripts": {
-    "dev": "vite",
+		"dev": "vite",
-    "build": "vite build"
+		"build": "vite build",
-  },
+		"lint:js": "wp-scripts lint-js",
-  "dependencies": {
+		"lint:js:fix": "wp-scripts lint-js --fix",
-    "react": "^18.0.0",
+		"format": "wp-scripts format",
-    "react-dom": "^18.0.0",
+		"lint": "npm run lint:js",
-    "react-router-dom": "^6.0.0"
+		"prebuild": "npm run lint && npm run format"
-  },
+	},
-  "devDependencies": {
+	"dependencies": {
-    "@vitejs/plugin-react": "^4.7.0",
+		"react": "^18.0.0",
-    "vite": "^5.0.0"
+		"react-dom": "^18.0.0",
-  }
+		"react-router-dom": "^6.0.0"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-react": "^4.7.0",
+		"@wordpress/scripts": "^30.21.0",
+		"vite": "^5.0.0"
+	}
 }

src/App.jsx

@@ -1,17 +1,49 @@
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './pages/Dashboard';
 import Settings from './pages/Settings';
 import TwoFA from './pages/TwoFA';
 
 export default function App() {
-  return (
+	return (
-    <Router>
+		<Router>
-      <Routes>
+			<Routes>
-        <Route path="/" element={<Dashboard />} />
+				<Route path="/" element={ <Dashboard /> } />
-        <Route path="/settings" element={<Settings />} />
+				<Route path="/settings" element={ <Settings /> } />
-        <Route path="/2fa" element={<TwoFA />} />
+				<Route path="/2fa" element={ <TwoFA /> } />
-      </Routes>
+			</Routes>
-    </Router>
+		</Router>
-  );
+	);
 }
+
+// Mount components based on container element
+document.addEventListener( 'DOMContentLoaded', function () {
+	// Main Helix app
+	const helixRoot = document.getElementById( 'helix-root' );
+	if ( helixRoot ) {
+		const root = createRoot( helixRoot );
+		root.render( <App /> );
+	}
+
+	// Settings page
+	const settingsRoot = document.getElementById( 'helix-settings-root' );
+	if ( settingsRoot ) {
+		const root = createRoot( settingsRoot );
+		root.render( <Settings /> );
+	}
+
+	// Posts page
+	const postsRoot = document.getElementById( 'helix-posts-root' );
+	if ( postsRoot ) {
+		const root = createRoot( postsRoot );
+		root.render( <Dashboard /> ); // For now, render Dashboard
+	}
+
+	// Users page
+	const usersRoot = document.getElementById( 'helix-users-root' );
+	if ( usersRoot ) {
+		const root = createRoot( usersRoot );
+		root.render( <Dashboard /> ); // For now, render Dashboard
+	}
+} );

src/pages/Dashboard.jsx

@@ -1,4 +1,4 @@
 import React from 'react';
 export default function Dashboard() {
-  return <div>Welcome to the Helix Admin Dashboard</div>;
+	return <div>Welcome to the Helix Admin Dashboard</div>;
 }

src/pages/Settings.jsx

@@ -1,4 +1,159 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSettings } from './Settings/hooks/useSettings';
+import SettingsTabs from './Settings/components/SettingsTabs';
+import SaveButton from './Settings/components/SaveButton';
+import Notification from './Settings/components/Notification';
+import SiteInformationSettings from './Settings/components/SiteInformationSettings';
+import ContentReadingSettings from './Settings/components/ContentReadingSettings';
+import WritingPublishingSettings from './Settings/components/WritingPublishingSettings';
+import MediaAssetsSettings from './Settings/components/MediaAssetsSettings';
+import UsersMembershipSettings from './Settings/components/UsersMembershipSettings';
+import HelixSettings from './Settings/components/HelixSettings';
+import './Settings/styles.css';
+
+/**
+ * Main Settings Page Component
+ */
 export default function Settings() {
-  return <div>Settings Page</div>;
+	const {
+		settings,
+		loading,
+		saving,
+		error,
+		hasUnsavedChanges,
+		updateSetting,
+		saveSettings,
+		resetSettings,
+	} = useSettings();
+
+	const [ activeTab, setActiveTab ] = useState( 'site' );
+	const [ notification, setNotification ] = useState( null );
+
+	const handleSave = async () => {
+		const result = await saveSettings();
+
+		if ( result.success ) {
+			setNotification( {
+				type: 'success',
+				message: result.message || 'Settings saved successfully!',
+			} );
+		} else {
+			setNotification( {
+				type: 'error',
+				message:
+					result.message ||
+					'Failed to save settings. Please try again.',
+			} );
+		}
+	};
+
+	const handleReset = () => {
+		resetSettings();
+		setNotification( {
+			type: 'info',
+			message: 'Changes have been reset to their original values.',
+		} );
+	};
+
+	const handleTabChange = ( tabId ) => {
+		if ( hasUnsavedChanges ) {
+			const confirmed = window.confirm(
+				'You have unsaved changes. Are you sure you want to switch tabs? Your changes will be lost.'
+			);
+			if ( ! confirmed ) {
+				return;
+			}
+		}
+		setActiveTab( tabId );
+	};
+
+	const renderTabContent = () => {
+		const commonProps = { settings, updateSetting };
+
+		switch ( activeTab ) {
+			case 'site':
+				return <SiteInformationSettings { ...commonProps } />;
+			case 'content':
+				return <ContentReadingSettings { ...commonProps } />;
+			case 'writing':
+				return <WritingPublishingSettings { ...commonProps } />;
+			case 'media':
+				return <MediaAssetsSettings { ...commonProps } />;
+			case 'users':
+				return <UsersMembershipSettings { ...commonProps } />;
+			case 'helix':
+				return <HelixSettings { ...commonProps } />;
+			default:
+				return <SiteInformationSettings { ...commonProps } />;
+		}
+	};
+
+	if ( loading ) {
+		return (
+			<div className="helix-settings-page">
+				<div className="helix-loading">
+					<div className="helix-spinner"></div>
+					<p>Loading settings...</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="helix-settings-page">
+			{ /* Header */ }
+			<div className="helix-settings-header">
+				<h1>Settings</h1>
+				<p>Manage your WordPress site configuration</p>
+			</div>
+
+			{ /* Global Error */ }
+			{ error && (
+				<Notification
+					type="error"
+					message={ error }
+					onClose={ () => {} }
+					autoClose={ false }
+				/>
+			) }
+
+			{ /* Success/Info Notifications */ }
+			{ notification && (
+				<Notification
+					type={ notification.type }
+					message={ notification.message }
+					onClose={ () => setNotification( null ) }
+				/>
+			) }
+
+			{ /* Tabs Navigation */ }
+			<SettingsTabs
+				activeTab={ activeTab }
+				onTabChange={ handleTabChange }
+				hasUnsavedChanges={ hasUnsavedChanges }
+			/>
+
+			{ /* Tab Content */ }
+			<div className="helix-settings-content">
+				<div
+					id={ `${ activeTab }-panel` }
+					role="tabpanel"
+					aria-labelledby={ `${ activeTab }-tab` }
+					className="helix-tab-panel"
+				>
+					{ renderTabContent() }
+				</div>
+			</div>
+
+			{ /* Footer Controls */ }
+			<div className="helix-settings-footer">
+				<SaveButton
+					onSave={ handleSave }
+					onReset={ handleReset }
+					saving={ saving }
+					hasUnsavedChanges={ hasUnsavedChanges }
+				/>
+			</div>
+		</div>
+	);
 }

src/pages/Settings/components/ContentReadingSettings.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import SettingsSection from './SettingsSection';
+import SelectInput from './SelectInput';
+import NumberInput from './NumberInput';
+import ToggleInput from './ToggleInput';
+import TextInput from './TextInput';
+
+/**
+ * Content & Reading Settings Component
+ * @param root0
+ * @param root0.settings
+ * @param root0.updateSetting
+ */
+const ContentReadingSettings = ( { settings, updateSetting } ) => {
+	const showOnFrontOptions = [
+		{ value: 'posts', label: 'Your latest posts' },
+		{ value: 'page', label: 'A static page' },
+	];
+
+	const startOfWeekOptions = [
+		{ value: 0, label: 'Sunday' },
+		{ value: 1, label: 'Monday' },
+		{ value: 2, label: 'Tuesday' },
+		{ value: 3, label: 'Wednesday' },
+		{ value: 4, label: 'Thursday' },
+		{ value: 5, label: 'Friday' },
+		{ value: 6, label: 'Saturday' },
+	];
+
+	return (
+		<SettingsSection
+			title="Content & Reading"
+			description="Settings that affect how your content is displayed"
+		>
+			<div className="helix-settings-grid">
+				<SelectInput
+					label="Your homepage displays"
+					description="What to show on the front page of your site."
+					value={ settings.showOnFront }
+					onChange={ ( value ) =>
+						updateSetting( 'showOnFront', value )
+					}
+					options={ showOnFrontOptions }
+				/>
+
+				{ settings.showOnFront === 'page' && (
+					<>
+						<NumberInput
+							label="Homepage"
+							description="The page to show on the front page (Page ID)."
+							value={ settings.pageOnFront }
+							onChange={ ( value ) =>
+								updateSetting( 'pageOnFront', value )
+							}
+							min={ 0 }
+						/>
+
+						<NumberInput
+							label="Posts page"
+							description="The page to show posts (Page ID)."
+							value={ settings.pageForPosts }
+							onChange={ ( value ) =>
+								updateSetting( 'pageForPosts', value )
+							}
+							min={ 0 }
+						/>
+					</>
+				) }
+
+				<NumberInput
+					label="Blog pages show at most"
+					description="Number of posts to show per page."
+					value={ settings.postsPerPage }
+					onChange={ ( value ) =>
+						updateSetting( 'postsPerPage', value )
+					}
+					min={ 1 }
+					max={ 100 }
+				/>
+
+				<ToggleInput
+					label="Discourage search engines from indexing this site"
+					description="This will discourage, but not prevent, search engines from indexing this site."
+					value={ ! settings.blogPublic }
+					onChange={ ( value ) =>
+						updateSetting( 'blogPublic', ! value )
+					}
+				/>
+
+				<TextInput
+					label="Date Format"
+					description="Format for displaying dates throughout your site."
+					value={ settings.dateFormat }
+					onChange={ ( value ) =>
+						updateSetting( 'dateFormat', value )
+					}
+					placeholder="F j, Y"
+				/>
+
+				<TextInput
+					label="Time Format"
+					description="Format for displaying times throughout your site."
+					value={ settings.timeFormat }
+					onChange={ ( value ) =>
+						updateSetting( 'timeFormat', value )
+					}
+					placeholder="g:i a"
+				/>
+
+				<SelectInput
+					label="Week Starts On"
+					description="The day of the week the calendar should start on."
+					value={ settings.startOfWeek }
+					onChange={ ( value ) =>
+						updateSetting( 'startOfWeek', parseInt( value ) )
+					}
+					options={ startOfWeekOptions }
+				/>
+			</div>
+		</SettingsSection>
+	);
+};
+
+export default ContentReadingSettings;

src/pages/Settings/components/FormField.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * Form field wrapper component
+ * @param root0
+ * @param root0.label
+ * @param root0.description
+ * @param root0.error
+ * @param root0.required
+ * @param root0.children
+ * @param root0.className
+ */
+const FormField = ( {
+	label,
+	description,
+	error,
+	required = false,
+	children,
+	className = '',
+} ) => {
+	return (
+		<div className={ `helix-form-field ${ className }` }>
+			{ label && (
+				<label className="helix-form-label">
+					{ label }
+					{ required && <span className="helix-required">*</span> }
+				</label>
+			) }
+
+			<div className="helix-form-control">{ children }</div>
+
+			{ description && (
+				<p className="helix-form-description">{ description }</p>
+			) }
+
+			{ error && <p className="helix-form-error">{ error }</p> }
+		</div>
+	);
+};
+
+export default FormField;

src/pages/Settings/components/HelixSettings.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import SettingsSection from './SettingsSection';
+import ToggleInput from './ToggleInput';
+
+/**
+ * Helix Specific Settings Component
+ * @param root0
+ * @param root0.settings
+ * @param root0.updateSetting
+ */
+const HelixSettings = ( { settings, updateSetting } ) => {
+	return (
+		<SettingsSection
+			title="Helix Settings"
+			description="Settings specific to the Helix plugin"
+		>
+			<div className="helix-settings-grid">
+				<ToggleInput
+					label="Use Default WordPress Admin"
+					description="Switch back to the default WordPress admin interface instead of using Helix."
+					value={ settings.helixUseDefaultAdmin }
+					onChange={ ( value ) =>
+						updateSetting( 'helixUseDefaultAdmin', value )
+					}
+				/>
+			</div>
+		</SettingsSection>
+	);
+};
+
+export default HelixSettings;

src/pages/Settings/components/MediaAssetsSettings.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import SettingsSection from './SettingsSection';
+import NumberInput from './NumberInput';
+import ToggleInput from './ToggleInput';
+
+/**
+ * Media & Assets Settings Component
+ * @param root0
+ * @param root0.settings
+ * @param root0.updateSetting
+ */
+const MediaAssetsSettings = ( { settings, updateSetting } ) => {
+	return (
+		<SettingsSection
+			title="Media & Assets"
+			description="Settings for media files, images, and site branding"
+		>
+			<div className="helix-settings-grid">
+				<NumberInput
+					label="Site Logo"
+					description="The site logo (Media ID). Upload a logo in Media Library and enter its ID here."
+					value={ settings.siteLogo }
+					onChange={ ( value ) => updateSetting( 'siteLogo', value ) }
+					min={ 0 }
+				/>
+
+				<NumberInput
+					label="Site Icon (Favicon)"
+					description="The site icon/favicon (Media ID). Upload an icon in Media Library and enter its ID here."
+					value={ settings.siteIcon }
+					onChange={ ( value ) => updateSetting( 'siteIcon', value ) }
+					min={ 0 }
+				/>
+
+				<div className="helix-settings-subsection">
+					<h4>Image Sizes</h4>
+
+					<NumberInput
+						label="Thumbnail Width"
+						description="Maximum width of thumbnail images in pixels."
+						value={ settings.thumbnailSizeW }
+						onChange={ ( value ) =>
+							updateSetting( 'thumbnailSizeW', value )
+						}
+						min={ 0 }
+						max={ 2000 }
+					/>
+
+					<NumberInput
+						label="Thumbnail Height"
+						description="Maximum height of thumbnail images in pixels."
+						value={ settings.thumbnailSizeH }
+						onChange={ ( value ) =>
+							updateSetting( 'thumbnailSizeH', value )
+						}
+						min={ 0 }
+						max={ 2000 }
+					/>
+
+					<NumberInput
+						label="Medium Width"
+						description="Maximum width of medium-sized images in pixels."
+						value={ settings.mediumSizeW }
+						onChange={ ( value ) =>
+							updateSetting( 'mediumSizeW', value )
+						}
+						min={ 0 }
+						max={ 2000 }
+					/>
+
+					<NumberInput
+						label="Medium Height"
+						description="Maximum height of medium-sized images in pixels."
+						value={ settings.mediumSizeH }
+						onChange={ ( value ) =>
+							updateSetting( 'mediumSizeH', value )
+						}
+						min={ 0 }
+						max={ 2000 }
+					/>
+
+					<NumberInput
+						label="Large Width"
+						description="Maximum width of large-sized images in pixels."
+						value={ settings.largeSizeW }
+						onChange={ ( value ) =>
+							updateSetting( 'largeSizeW', value )
+						}
+						min={ 0 }
+						max={ 4000 }
+					/>
+
+					<NumberInput
+						label="Large Height"
+						description="Maximum height of large-sized images in pixels."
+						value={ settings.largeSizeH }
+						onChange={ ( value ) =>
+							updateSetting( 'largeSizeH', value )
+						}
+						min={ 0 }
+						max={ 4000 }
+					/>
+				</div>
+
+				<ToggleInput
+					label="Organize my uploads into month- and year-based folders"
+					description="Organize uploaded files into date-based folder structure."
+					value={ settings.uploadsUseYearmonthFolders }
+					onChange={ ( value ) =>
+						updateSetting( 'uploadsUseYearmonthFolders', value )
+					}
+				/>
+			</div>
+		</SettingsSection>
+	);
+};
+
+export default MediaAssetsSettings;

src/pages/Settings/components/Notification.jsx

@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+
+/**
+ * Notification component for displaying success/error messages
+ * @param root0
+ * @param root0.type
+ * @param root0.message
+ * @param root0.onClose
+ * @param root0.autoClose
+ * @param root0.duration
+ */
+const Notification = ( {
+	type = 'info',
+	message,
+	onClose,
+	autoClose = true,
+	duration = 5000,
+} ) => {
+	const [ visible, setVisible ] = useState( true );
+
+	useEffect( () => {
+		if ( autoClose && duration > 0 ) {
+			const timer = setTimeout( () => {
+				setVisible( false );
+				setTimeout( () => onClose?.(), 300 ); // Allow fade out animation
+			}, duration );
+
+			return () => clearTimeout( timer );
+		}
+	}, [ autoClose, duration, onClose ] );
+
+	if ( ! visible ) {
+		return null;
+	}
+
+	const getIcon = () => {
+		switch ( type ) {
+			case 'success':
+				return '✅';
+			case 'error':
+				return '❌';
+			case 'warning':
+				return '⚠️';
+			default:
+				return 'ℹ️';
+		}
+	};
+
+	return (
+		<div
+			className={ `helix-notification helix-notification-${ type } ${
+				visible ? 'visible' : ''
+			}` }
+		>
+			<div className="helix-notification-content">
+				<span className="helix-notification-icon">{ getIcon() }</span>
+				<span className="helix-notification-message">{ message }</span>
+				{ onClose && (
+					<button
+						type="button"
+						onClick={ () => {
+							setVisible( false );
+							setTimeout( () => onClose(), 300 );
+						} }
+						className="helix-notification-close"
+						aria-label="Close notification"
+					>
+						×
+					</button>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default Notification;

src/pages/Settings/components/NumberInput.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import FormField from './FormField';
+
+/**
+ * Number input component
+ * @param root0
+ * @param root0.label
+ * @param root0.description
+ * @param root0.value
+ * @param root0.onChange
+ * @param root0.min
+ * @param root0.max
+ * @param root0.step
+ * @param root0.required
+ * @param root0.disabled
+ * @param root0.error
+ * @param root0.className
+ */
+const NumberInput = ( {
+	label,
+	description,
+	value,
+	onChange,
+	min = null,
+	max = null,
+	step = 1,
+	required = false,
+	disabled = false,
+	error = null,
+	className = '',
+	...props
+} ) => {
+	const handleChange = ( event ) => {
+		const newValue = event.target.value;
+		// Convert to number if not empty, otherwise keep as empty string
+		onChange( newValue === '' ? '' : Number( newValue ) );
+	};
+
+	return (
+		<FormField
+			label={ label }
+			description={ description }
+			error={ error }
+			required={ required }
+			className={ className }
+		>
+			<input
+				type="number"
+				value={ value || '' }
+				onChange={ handleChange }
+				min={ min }
+				max={ max }
+				step={ step }
+				required={ required }
+				disabled={ disabled }
+				className="helix-number-input"
+				{ ...props }
+			/>
+		</FormField>
+	);
+};
+
+export default NumberInput;

src/pages/Settings/components/SaveButton.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+/**
+ * Save button component with loading and status indicators
+ * @param root0
+ * @param root0.onSave
+ * @param root0.onReset
+ * @param root0.saving
+ * @param root0.hasUnsavedChanges
+ * @param root0.disabled
+ */
+const SaveButton = ( {
+	onSave,
+	onReset,
+	saving = false,
+	hasUnsavedChanges = false,
+	disabled = false,
+} ) => {
+	return (
+		<div className="helix-save-buttons">
+			<button
+				type="button"
+				onClick={ onSave }
+				disabled={ disabled || saving || ! hasUnsavedChanges }
+				className={ `helix-btn helix-btn-primary ${
+					saving ? 'saving' : ''
+				}` }
+			>
+				{ saving ? (
+					<>
+						<span className="helix-spinner"></span>
+						Saving...
+					</>
+				) : (
+					'Save Changes'
+				) }
+			</button>
+
+			{ hasUnsavedChanges && ! saving && (
+				<button
+					type="button"
+					onClick={ onReset }
+					className="helix-btn helix-btn-secondary"
+				>
+					Reset Changes
+				</button>
+			) }
+
+			{ ! hasUnsavedChanges && ! saving && (
+				<span className="helix-save-status">✓ All changes saved</span>
+			) }
+		</div>
+	);
+};
+
+export default SaveButton;

src/pages/Settings/components/SelectInput.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import FormField from './FormField';
+
+/**
+ * Select input component
+ * @param root0
+ * @param root0.label
+ * @param root0.description
+ * @param root0.value
+ * @param root0.onChange
+ * @param root0.options
+ * @param root0.required
+ * @param root0.disabled
+ * @param root0.error
+ * @param root0.className
+ * @param root0.placeholder
+ */
+const SelectInput = ( {
+	label,
+	description,
+	value,
+	onChange,
+	options = [],
+	required = false,
+	disabled = false,
+	error = null,
+	className = '',
+	placeholder = 'Select an option...',
+	...props
+} ) => {
+	const handleChange = ( event ) => {
+		onChange( event.target.value );
+	};
+
+	return (
+		<FormField
+			label={ label }
+			description={ description }
+			error={ error }
+			required={ required }
+			className={ className }
+		>
+			<select
+				value={ value || '' }
+				onChange={ handleChange }
+				required={ required }
+				disabled={ disabled }
+				className="helix-select-input"
+				{ ...props }
+			>
+				{ placeholder && (
+					<option value="" disabled>
+						{ placeholder }
+					</option>
+				) }
+				{ options.map( ( option ) => (
+					<option key={ option.value } value={ option.value }>
+						{ option.label }
+					</option>
+				) ) }
+			</select>
+		</FormField>
+	);
+};
+
+export default SelectInput;

src/pages/Settings/components/SettingsSection.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ * Settings section wrapper component
+ * @param root0
+ * @param root0.title
+ * @param root0.description
+ * @param root0.children
+ * @param root0.className
+ */
+const SettingsSection = ( {
+	title,
+	description,
+	children,
+	className = '',
+} ) => {
+	return (
+		<div className={ `helix-settings-section ${ className }` }>
+			{ title && (
+				<div className="helix-settings-section-header">
+					<h3 className="helix-settings-section-title">{ title }</h3>
+					{ description && (
+						<p className="helix-settings-section-description">
+							{ description }
+						</p>
+					) }
+				</div>
+			) }
+
+			<div className="helix-settings-section-content">{ children }</div>
+		</div>
+	);
+};
+
+export default SettingsSection;

src/pages/Settings/components/SettingsTabs.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+/**
+ * Settings tabs navigation component
+ * @param root0
+ * @param root0.activeTab
+ * @param root0.onTabChange
+ * @param root0.hasUnsavedChanges
+ */
+const SettingsTabs = ( { activeTab, onTabChange, hasUnsavedChanges } ) => {
+	const tabs = [
+		{
+			id: 'site',
+			label: 'Site Information',
+			icon: '🏠',
+		},
+		{
+			id: 'content',
+			label: 'Content & Reading',
+			icon: '📖',
+		},
+		{
+			id: 'writing',
+			label: 'Writing & Publishing',
+			icon: '✍️',
+		},
+		{
+			id: 'media',
+			label: 'Media & Assets',
+			icon: '🖼️',
+		},
+		{
+			id: 'users',
+			label: 'Users & Membership',
+			icon: '👥',
+		},
+		{
+			id: 'helix',
+			label: 'Helix Settings',
+			icon: '⚙️',
+		},
+	];
+
+	return (
+		<div className="helix-settings-tabs">
+			<nav className="helix-tabs-nav" role="tablist">
+				{ tabs.map( ( tab ) => (
+					<button
+						key={ tab.id }
+						type="button"
+						role="tab"
+						aria-selected={ activeTab === tab.id }
+						aria-controls={ `${ tab.id }-panel` }
+						className={ `helix-tab ${
+							activeTab === tab.id ? 'active' : ''
+						}` }
+						onClick={ () => onTabChange( tab.id ) }
+					>
+						<span className="helix-tab-icon">{ tab.icon }</span>
+						<span className="helix-tab-label">{ tab.label }</span>
+						{ hasUnsavedChanges && (
+							<span
+								className="helix-tab-indicator"
+								title="Unsaved changes"
+							>
+								●
+							</span>
+						) }
+					</button>
+				) ) }
+			</nav>
+		</div>
+	);
+};
+
+export default SettingsTabs;

src/pages/Settings/components/SiteInformationSettings.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import SettingsSection from './SettingsSection';
+import TextInput from './TextInput';
+
+/**
+ * Site Information Settings Component
+ * @param root0
+ * @param root0.settings
+ * @param root0.updateSetting
+ */
+const SiteInformationSettings = ( { settings, updateSetting } ) => {
+	return (
+		<SettingsSection
+			title="Site Information"
+			description="Basic information about your WordPress site"
+		>
+			<div className="helix-settings-grid">
+				<TextInput
+					label="Site Title"
+					description="In a few words, explain what this site is about."
+					value={ settings.siteTitle }
+					onChange={ ( value ) =>
+						updateSetting( 'siteTitle', value )
+					}
+					placeholder="My Awesome Site"
+					required
+				/>
+
+				<TextInput
+					label="Tagline"
+					description="A brief description of your site, usually displayed under the title."
+					value={ settings.tagline }
+					onChange={ ( value ) => updateSetting( 'tagline', value ) }
+					placeholder="Just another WordPress site"
+				/>
+
+				<TextInput
+					label="WordPress Address (URL)"
+					description="The address of your WordPress core files."
+					value={ settings.siteUrl }
+					onChange={ ( value ) => updateSetting( 'siteUrl', value ) }
+					type="url"
+					placeholder="https://example.com"
+				/>
+
+				<TextInput
+					label="Site Address (URL)"
+					description="The address you want people to type in their browser to reach your website."
+					value={ settings.homeUrl }
+					onChange={ ( value ) => updateSetting( 'homeUrl', value ) }
+					type="url"
+					placeholder="https://example.com"
+				/>
+
+				<TextInput
+					label="Administration Email Address"
+					description="This address is used for admin purposes, like new user notification."
+					value={ settings.adminEmail }
+					onChange={ ( value ) =>
+						updateSetting( 'adminEmail', value )
+					}
+					type="email"
+					placeholder="admin@example.com"
+					required
+				/>
+
+				<TextInput
+					label="Site Language"
+					description="The language for your site interface."
+					value={ settings.language }
+					onChange={ ( value ) => updateSetting( 'language', value ) }
+					placeholder="en_US"
+				/>
+
+				<TextInput
+					label="Timezone"
+					description="Choose either a city in the same timezone as you or a UTC timezone offset."
+					value={ settings.timezone }
+					onChange={ ( value ) => updateSetting( 'timezone', value ) }
+					placeholder="UTC"
+				/>
+			</div>
+		</SettingsSection>
+	);
+};
+
+export default SiteInformationSettings;

src/pages/Settings/components/TextInput.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import FormField from './FormField';
+
+/**
+ * Text input component
+ * @param root0
+ * @param root0.label
+ * @param root0.description
+ * @param root0.value
+ * @param root0.onChange
+ * @param root0.placeholder
+ * @param root0.type
+ * @param root0.required
+ * @param root0.disabled
+ * @param root0.error
+ * @param root0.className
+ */
+const TextInput = ( {
+	label,
+	description,
+	value,
+	onChange,
+	placeholder = '',
+	type = 'text',
+	required = false,
+	disabled = false,
+	error = null,
+	className = '',
+	...props
+} ) => {
+	const handleChange = ( event ) => {
+		onChange( event.target.value );
+	};
+
+	return (
+		<FormField
+			label={ label }
+			description={ description }
+			error={ error }
+			required={ required }
+			className={ className }
+		>
+			<input
+				type={ type }
+				value={ value || '' }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+				required={ required }
+				disabled={ disabled }
+				className="helix-text-input"
+				{ ...props }
+			/>
+		</FormField>
+	);
+};
+
+export default TextInput;

src/pages/Settings/components/ToggleInput.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import FormField from './FormField';
+
+/**
+ * Toggle/Checkbox input component
+ * @param root0
+ * @param root0.label
+ * @param root0.description
+ * @param root0.value
+ * @param root0.onChange
+ * @param root0.required
+ * @param root0.disabled
+ * @param root0.error
+ * @param root0.className
+ */
+const ToggleInput = ( {
+	label,
+	description,
+	value,
+	onChange,
+	required = false,
+	disabled = false,
+	error = null,
+	className = '',
+	...props
+} ) => {
+	const handleChange = ( event ) => {
+		onChange( event.target.checked );
+	};
+
+	return (
+		<FormField
+			description={ description }
+			error={ error }
+			required={ required }
+			className={ `helix-toggle-field ${ className }` }
+		>
+			<label className="helix-toggle-wrapper">
+				<input
+					type="checkbox"
+					checked={ !! value }
+					onChange={ handleChange }
+					required={ required }
+					disabled={ disabled }
+					className="helix-toggle-input"
+					{ ...props }
+				/>
+				<span className="helix-toggle-slider"></span>
+				<span className="helix-toggle-label">{ label }</span>
+			</label>
+		</FormField>
+	);
+};
+
+export default ToggleInput;

src/pages/Settings/components/UsersMembershipSettings.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import SettingsSection from './SettingsSection';
+import SelectInput from './SelectInput';
+import ToggleInput from './ToggleInput';
+
+/**
+ * Users & Membership Settings Component
+ * @param root0
+ * @param root0.settings
+ * @param root0.updateSetting
+ */
+const UsersMembershipSettings = ( { settings, updateSetting } ) => {
+	const roleOptions = [
+		{ value: 'subscriber', label: 'Subscriber' },
+		{ value: 'contributor', label: 'Contributor' },
+		{ value: 'author', label: 'Author' },
+		{ value: 'editor', label: 'Editor' },
+		{ value: 'administrator', label: 'Administrator' },
+	];
+
+	return (
+		<SettingsSection
+			title="Users & Membership"
+			description="Settings for user registration and default permissions"
+		>
+			<div className="helix-settings-grid">
+				<ToggleInput
+					label="Anyone can register"
+					description="Allow anyone to register as a user on your site."
+					value={ settings.usersCanRegister }
+					onChange={ ( value ) =>
+						updateSetting( 'usersCanRegister', value )
+					}
+				/>
+
+				<SelectInput
+					label="New User Default Role"
+					description="The default role assigned to new users when they register."
+					value={ settings.defaultRole }
+					onChange={ ( value ) =>
+						updateSetting( 'defaultRole', value )
+					}
+					options={ roleOptions }
+				/>
+			</div>
+		</SettingsSection>
+	);
+};
+
+export default UsersMembershipSettings;

src/pages/Settings/components/WritingPublishingSettings.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import SettingsSection from './SettingsSection';
+import SelectInput from './SelectInput';
+import NumberInput from './NumberInput';
+import ToggleInput from './ToggleInput';
+
+/**
+ * Writing & Publishing Settings Component
+ * @param root0
+ * @param root0.settings
+ * @param root0.updateSetting
+ */
+const WritingPublishingSettings = ( { settings, updateSetting } ) => {
+	const postFormatOptions = [
+		{ value: 'standard', label: 'Standard' },
+		{ value: 'aside', label: 'Aside' },
+		{ value: 'gallery', label: 'Gallery' },
+		{ value: 'image', label: 'Image' },
+		{ value: 'link', label: 'Link' },
+		{ value: 'quote', label: 'Quote' },
+		{ value: 'status', label: 'Status' },
+		{ value: 'video', label: 'Video' },
+		{ value: 'audio', label: 'Audio' },
+		{ value: 'chat', label: 'Chat' },
+	];
+
+	const statusOptions = [
+		{ value: 'open', label: 'Open' },
+		{ value: 'closed', label: 'Closed' },
+	];
+
+	return (
+		<SettingsSection
+			title="Writing & Publishing"
+			description="Settings for content creation and publishing"
+		>
+			<div className="helix-settings-grid">
+				<NumberInput
+					label="Default Post Category"
+					description="The default category for new posts (Category ID)."
+					value={ settings.defaultCategory }
+					onChange={ ( value ) =>
+						updateSetting( 'defaultCategory', value )
+					}
+					min={ 1 }
+				/>
+
+				<SelectInput
+					label="Default Post Format"
+					description="The default format for new posts."
+					value={ settings.defaultPostFormat }
+					onChange={ ( value ) =>
+						updateSetting( 'defaultPostFormat', value )
+					}
+					options={ postFormatOptions }
+				/>
+
+				<ToggleInput
+					label="Convert emoticons like :-) and :-P to graphics on display"
+					description="Transform text emoticons into graphical representations."
+					value={ settings.useSmilies }
+					onChange={ ( value ) =>
+						updateSetting( 'useSmilies', value )
+					}
+				/>
+
+				<SelectInput
+					label="Default comment status"
+					description="Allow people to submit comments on new posts."
+					value={ settings.defaultCommentStatus }
+					onChange={ ( value ) =>
+						updateSetting( 'defaultCommentStatus', value )
+					}
+					options={ statusOptions }
+				/>
+
+				<SelectInput
+					label="Default ping status"
+					description="Allow link notifications from other blogs (pingbacks and trackbacks) on new posts."
+					value={ settings.defaultPingStatus }
+					onChange={ ( value ) =>
+						updateSetting( 'defaultPingStatus', value )
+					}
+					options={ statusOptions }
+				/>
+			</div>
+		</SettingsSection>
+	);
+};
+
+export default WritingPublishingSettings;

src/pages/Settings/hooks/useSettings.js

@@ -0,0 +1,162 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getAllSettings, updateSettings } from '../utils/settingsAPI';
+
+/**
+ * Custom hook for managing WordPress settings
+ * @return {Object} Settings state and methods
+ */
+export const useSettings = () => {
+	const [ settings, setSettings ] = useState( {} );
+	const [ originalSettings, setOriginalSettings ] = useState( {} );
+	const [ loading, setLoading ] = useState( true );
+	const [ saving, setSaving ] = useState( false );
+	const [ error, setError ] = useState( null );
+	const [ hasUnsavedChanges, setHasUnsavedChanges ] = useState( false );
+
+	/**
+	 * Load settings from API
+	 */
+	const loadSettings = useCallback( async () => {
+		try {
+			setLoading( true );
+			setError( null );
+
+			const data = await getAllSettings();
+
+			// Flatten settings for easier form handling
+			const flattenedSettings = {};
+			Object.keys( data ).forEach( ( category ) => {
+				Object.keys( data[ category ] ).forEach( ( setting ) => {
+					flattenedSettings[ setting ] =
+						data[ category ][ setting ].value;
+				} );
+			} );
+
+			setSettings( flattenedSettings );
+			setOriginalSettings( flattenedSettings );
+			setHasUnsavedChanges( false );
+		} catch ( err ) {
+			setError( err.message );
+		} finally {
+			setLoading( false );
+		}
+	}, [] );
+
+	/**
+	 * Update a single setting value
+	 * @param {string} key   - Setting key
+	 * @param {any}    value - Setting value
+	 */
+	const updateSetting = useCallback(
+		( key, value ) => {
+			setSettings( ( prev ) => {
+				const newSettings = { ...prev, [ key ]: value };
+
+				// Check if there are unsaved changes
+				const hasChanges = Object.keys( newSettings ).some(
+					( settingKey ) =>
+						newSettings[ settingKey ] !==
+						originalSettings[ settingKey ]
+				);
+				setHasUnsavedChanges( hasChanges );
+
+				return newSettings;
+			} );
+		},
+		[ originalSettings ]
+	);
+
+	/**
+	 * Save all changes to the server
+	 */
+	const saveSettings = useCallback( async () => {
+		try {
+			setSaving( true );
+			setError( null );
+
+			// Only send changed settings
+			const changedSettings = {};
+			Object.keys( settings ).forEach( ( key ) => {
+				if ( settings[ key ] !== originalSettings[ key ] ) {
+					changedSettings[ key ] = settings[ key ];
+				}
+			} );
+
+			if ( Object.keys( changedSettings ).length === 0 ) {
+				return { success: true, message: 'No changes to save' };
+			}
+
+			const result = await updateSettings( changedSettings );
+
+			// Update original settings to reflect saved state
+			setOriginalSettings( settings );
+			setHasUnsavedChanges( false );
+
+			return {
+				success: true,
+				message: 'Settings saved successfully',
+				updated: result.updated,
+				errors: result.errors,
+			};
+		} catch ( err ) {
+			setError( err.message );
+			return { success: false, message: err.message };
+		} finally {
+			setSaving( false );
+		}
+	}, [ settings, originalSettings ] );
+
+	/**
+	 * Reset settings to original values
+	 */
+	const resetSettings = useCallback( () => {
+		setSettings( originalSettings );
+		setHasUnsavedChanges( false );
+		setError( null );
+	}, [ originalSettings ] );
+
+	/**
+	 * Reset a single setting to its original value
+	 * @param {string} key - Setting key
+	 */
+	const resetSetting = useCallback(
+		( key ) => {
+			updateSetting( key, originalSettings[ key ] );
+		},
+		[ originalSettings, updateSetting ]
+	);
+
+	// Load settings on mount
+	useEffect( () => {
+		loadSettings();
+	}, [ loadSettings ] );
+
+	// Warn user about unsaved changes before leaving
+	useEffect( () => {
+		const handleBeforeUnload = ( event ) => {
+			if ( hasUnsavedChanges ) {
+				event.preventDefault();
+				event.returnValue =
+					'You have unsaved changes. Are you sure you want to leave?';
+				return event.returnValue;
+			}
+		};
+
+		window.addEventListener( 'beforeunload', handleBeforeUnload );
+		return () =>
+			window.removeEventListener( 'beforeunload', handleBeforeUnload );
+	}, [ hasUnsavedChanges ] );
+
+	return {
+		settings,
+		loading,
+		saving,
+		error,
+		hasUnsavedChanges,
+		updateSetting,
+		saveSettings,
+		resetSettings,
+		resetSetting,
+		loadSettings,
+	};
+};

src/pages/Settings/styles.css

@@ -0,0 +1,462 @@
+/* Helix Settings Page Styles */
+
+.helix-settings-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Header */
+.helix-settings-header {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.helix-settings-header h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: #1d4ed8;
+  margin: 0 0 10px 0;
+}
+
+.helix-settings-header p {
+  font-size: 1.1rem;
+  color: #6b7280;
+  margin: 0;
+}
+
+/* Loading State */
+.helix-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.helix-loading p {
+  margin: 20px 0 0 0;
+  font-size: 1.1rem;
+  color: #6b7280;
+}
+
+/* Spinner */
+.helix-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid #e5e7eb;
+  border-top: 3px solid #1d4ed8;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Controls */
+.helix-settings-controls,
+.helix-settings-footer {
+  display: flex;
+  justify-content: center;
+  margin: 30px 0;
+  padding: 20px 0;
+  border-top: 1px solid #e5e7eb;
+}
+
+.helix-settings-footer {
+  border-bottom: 1px solid #e5e7eb;
+  margin-top: 50px;
+}
+
+/* Save Buttons */
+.helix-save-buttons {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.helix-btn {
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.helix-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.helix-btn-primary {
+  background-color: #1d4ed8;
+  color: white;
+  border-color: #1d4ed8;
+}
+
+.helix-btn-primary:hover:not(:disabled) {
+  background-color: #1e40af;
+  border-color: #1e40af;
+}
+
+.helix-btn-secondary {
+  background-color: white;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.helix-btn-secondary:hover:not(:disabled) {
+  background-color: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.helix-save-status {
+  color: #059669;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* Tabs */
+.helix-settings-tabs {
+  margin: 30px 0;
+}
+
+.helix-tabs-nav {
+  display: flex;
+  border-bottom: 2px solid #e5e7eb;
+  overflow-x: auto;
+  gap: 2px;
+}
+
+.helix-tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #6b7280;
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  position: relative;
+}
+
+.helix-tab:hover {
+  color: #1d4ed8;
+  background-color: #f8fafc;
+}
+
+.helix-tab.active {
+  color: #1d4ed8;
+  border-bottom-color: #1d4ed8;
+}
+
+.helix-tab-icon {
+  font-size: 16px;
+}
+
+.helix-tab-indicator {
+  color: #f59e0b;
+  font-size: 12px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+/* Content */
+.helix-settings-content {
+  margin: 40px 0;
+}
+
+.helix-tab-panel {
+  min-height: 400px;
+}
+
+/* Settings Sections */
+.helix-settings-section {
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+
+.helix-settings-section-header {
+  background: #f8fafc;
+  padding: 24px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.helix-settings-section-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 8px 0;
+}
+
+.helix-settings-section-description {
+  color: #6b7280;
+  margin: 0;
+  font-size: 14px;
+}
+
+.helix-settings-section-content {
+  padding: 24px;
+}
+
+.helix-settings-grid {
+  display: grid;
+  gap: 24px;
+}
+
+.helix-settings-subsection {
+  border-top: 1px solid #e5e7eb;
+  padding-top: 24px;
+  margin-top: 24px;
+}
+
+.helix-settings-subsection h4 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #374151;
+  margin: 0 0 20px 0;
+}
+
+/* Form Fields */
+.helix-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.helix-form-label {
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+}
+
+.helix-required {
+  color: #ef4444;
+  margin-left: 4px;
+}
+
+.helix-form-control {
+  display: flex;
+  flex-direction: column;
+}
+
+.helix-form-description {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.helix-form-error {
+  font-size: 13px;
+  color: #ef4444;
+  margin: 0;
+}
+
+/* Input Elements */
+.helix-text-input,
+.helix-number-input,
+.helix-select-input {
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.2s ease;
+  background: white;
+}
+
+.helix-text-input:focus,
+.helix-number-input:focus,
+.helix-select-input:focus {
+  outline: none;
+  border-color: #1d4ed8;
+  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
+}
+
+.helix-select-input {
+  cursor: pointer;
+}
+
+/* Toggle Input */
+.helix-toggle-field {
+  margin: 16px 0;
+}
+
+.helix-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.helix-toggle-input {
+  position: relative;
+  width: 48px;
+  height: 24px;
+  appearance: none;
+  background: #d1d5db;
+  border-radius: 12px;
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.helix-toggle-input:checked {
+  background: #1d4ed8;
+}
+
+.helix-toggle-input::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.helix-toggle-input:checked::before {
+  transform: translateX(24px);
+}
+
+.helix-toggle-label {
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+}
+
+/* Notifications */
+.helix-notification {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 20px 0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+}
+
+.helix-notification.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.helix-notification-success {
+  border-left: 4px solid #059669;
+  background-color: #f0fdf4;
+}
+
+.helix-notification-error {
+  border-left: 4px solid #ef4444;
+  background-color: #fef2f2;
+}
+
+.helix-notification-warning {
+  border-left: 4px solid #f59e0b;
+  background-color: #fffbeb;
+}
+
+.helix-notification-info {
+  border-left: 4px solid #1d4ed8;
+  background-color: #eff6ff;
+}
+
+.helix-notification-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.helix-notification-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.helix-notification-message {
+  flex: 1;
+  font-size: 14px;
+  color: #374151;
+}
+
+.helix-notification-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.helix-notification-close:hover {
+  color: #374151;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .helix-settings-page {
+    padding: 15px;
+  }
+
+  .helix-settings-header h1 {
+    font-size: 2rem;
+  }
+
+  .helix-tabs-nav {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .helix-tab {
+    justify-content: flex-start;
+    border-bottom: 1px solid #e5e7eb;
+    border-right: none;
+  }
+
+  .helix-tab.active {
+    border-bottom-color: #e5e7eb;
+    border-left: 3px solid #1d4ed8;
+    background-color: #f8fafc;
+  }
+
+  .helix-settings-section-content,
+  .helix-settings-section-header {
+    padding: 20px;
+  }
+
+  .helix-save-buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .helix-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}

src/pages/Settings/utils/settingsAPI.js

@@ -0,0 +1,98 @@
+/**
+ * Settings API utilities for making requests to the WordPress REST API.
+ */
+
+// Get the REST API base URL
+const getAPIBase = () => {
+	return window.helixData?.restUrl || '/wp-json/helix/v1/';
+};
+
+// Get the REST API nonce for authentication
+const getNonce = () => {
+	return window.helixData?.nonce || '';
+};
+
+/**
+ * Make an authenticated API request
+ * @param {string} endpoint - API endpoint
+ * @param {Object} options  - Fetch options
+ * @return {Promise<Object>} API response
+ */
+const apiRequest = async ( endpoint, options = {} ) => {
+	const url = `${ getAPIBase() }${ endpoint }`;
+
+	const defaultOptions = {
+		headers: {
+			'Content-Type': 'application/json',
+			'X-WP-Nonce': getNonce(),
+		},
+		credentials: 'include',
+	};
+
+	const mergedOptions = {
+		...defaultOptions,
+		...options,
+		headers: {
+			...defaultOptions.headers,
+			...options.headers,
+		},
+	};
+
+	try {
+		const response = await fetch( url, mergedOptions );
+
+		if ( ! response.ok ) {
+			const errorData = await response.json().catch( () => ( {} ) );
+			throw new Error(
+				errorData.message ||
+					`HTTP ${ response.status }: ${ response.statusText }`
+			);
+		}
+
+		return await response.json();
+	} catch ( error ) {
+		throw error;
+	}
+};
+
+/**
+ * Get all settings
+ * @return {Promise<Object>} All settings organized by category
+ */
+export const getAllSettings = async () => {
+	return apiRequest( 'settings' );
+};
+
+/**
+ * Get a single setting
+ * @param {string} setting - Setting key
+ * @return {Promise<Object>} Setting data
+ */
+export const getSetting = async ( setting ) => {
+	return apiRequest( `settings/${ setting }` );
+};
+
+/**
+ * Update multiple settings
+ * @param {Object} settings - Settings to update
+ * @return {Promise<Object>} Update result
+ */
+export const updateSettings = async ( settings ) => {
+	return apiRequest( 'settings', {
+		method: 'POST',
+		body: JSON.stringify( settings ),
+	} );
+};
+
+/**
+ * Update a single setting
+ * @param {string} setting - Setting key
+ * @param {any}    value   - Setting value
+ * @return {Promise<Object>} Update result
+ */
+export const updateSetting = async ( setting, value ) => {
+	return apiRequest( `settings/${ setting }`, {
+		method: 'POST',
+		body: JSON.stringify( { value } ),
+	} );
+};

src/pages/TwoFA.jsx

@@ -1,4 +1,4 @@
 import React from 'react';
 export default function TwoFA() {
-  return <div>Two-Factor Authentication Setup</div>;
+	return <div>Two-Factor Authentication Setup</div>;
 }

vite.config.js

@@ -1,16 +1,16 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
-export default defineConfig({
+export default defineConfig( {
-  plugins: [react()],
+	plugins: [ react() ],
-  build: {
+	build: {
-    outDir: 'build',
+		outDir: 'build',
-    emptyOutDir: true,
+		emptyOutDir: true,
-    rollupOptions: {
+		rollupOptions: {
-      input: 'src/App.jsx',
+			input: 'src/App.jsx',
-      output: {
+			output: {
-        entryFileNames: 'index.js'
+				entryFileNames: 'index.js',
-      }
+			},
-    }
+		},
-  }
+	},
-});
+} );