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

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 (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Dashboard />} />
-        <Route path="/settings" element={<Settings />} />
-        <Route path="/2fa" element={<TwoFA />} />
-      </Routes>
-    </Router>
-  );
+	return (
+		<Router>
+			<Routes>
+				<Route path="/" element={ <Dashboard /> } />
+				<Route path="/settings" element={ <Settings /> } />
+				<Route path="/2fa" element={ <TwoFA /> } />
+			</Routes>
+		</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>;
 }