example-usage.php

<?php
/**
 * Plugin Name: Sample Plugin for ReactPanel
 * Description: This is an example plugin just to show how to use ReactPanel inside your WordPress projects.
 * Version: 1.0.0
 * Author: Jaed Mosharraf
 * Author URI: https://github.com/jaedm97/
 */

defined( 'ABSPATH' ) || exit;
defined( 'PLUGIN_DIR' ) || define( 'PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
defined( 'PLUGIN_URL' ) || define( 'PLUGIN_URL', plugin_dir_url( __FILE__ ) );
defined( 'PLUGIN_VERSION' ) || define( 'PLUGIN_VERSION', '1.0.0' );

require_once PLUGIN_DIR . 'wp-react-panel/wp-react-panel.php';

$page_data      = array(
	'page_title' => 'My Settings Page',
	'menu_title' => 'My Settings',
	'capability' => 'manage_options',
	'menu_slug'  => 'my-settings',
	'icon'       => 'dashicons-admin-generic',
	'position'   => 20,
);
$settings_data  = array(
	'general'    => array(
		'name'     => 'General Settings',
		'sections' => array(
			'section_app_config'   => array(
				'id'     => 'section_app_config',
				'name'   => 'Application Configuration',
				'desc'   => 'Configure the basic settings for your application.',
				'fields' => array(
					array(
						'id'          => 'app_name',
						'title'       => 'Application Name',
						'desc'        => 'Enter the name of your application',
						'type'        => 'text',
						'placeholder' => 'My Awesome App',
						'default'     => 'My App',
						'value'       => get_option( 'app_name' ),
					),
					array(
						'id'      => 'app_status',
						'title'   => 'Enable Application',
						'label'   => 'Turn on to activate the application features',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'app_status' ),
					),
					array(
						'id'          => 'max_users',
						'title'       => 'Maximum Users',
						'desc'        => 'Set the maximum number of concurrent users allowed',
						'type'        => 'number',
						'placeholder' => 100,
						'default'     => 50,
						'value'       => get_option( 'max_users' ),
					),
					array(
						'id'       => 'app_mode',
						'title'    => 'Application Mode',
						'subTitle' => 'Select the mode in which the application should run',
						'type'     => 'radio',
						'options'  => array(
							'development' => 'Development',
							'staging'     => 'Staging',
							'production'  => 'Production',
						),
						'default'  => 'production',
						'value'    => get_option( 'app_mode' ),
					),
				),
			),
			'section_notification' => array(
				'id'     => 'section_notification',
				'name'   => 'Notification Settings',
				'desc'   => 'Manage how and when notifications are sent to users.',
				'fields' => array(
					array(
						'id'          => 'notification_method',
						'title'       => 'Notification Method',
						'desc'        => 'Choose how notifications should be delivered',
						'type'        => 'select',
						'options'     => array(
							'email' => 'Email',
							'sms'   => 'SMS',
							'push'  => 'Push Notification',
							'all'   => 'All Methods',
						),
						'placeholder' => 'Select method',
						'default'     => 'email',
						'value'       => get_option( 'notification_method' ),
					),
					array(
						'id'      => 'notification_frequency',
						'title'   => 'Notification Frequency',
						'label'   => 'Send notifications in real-time',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'notification_frequency' ),
					),
					array(
						'id'          => 'notification_emails',
						'title'       => 'Additional Email Recipients',
						'desc'        => 'Add email addresses to receive notifications',
						'type'        => 'tags',
						'placeholder' => 'email@example.com',
						'value'       => get_option( 'notification_emails' ),
					),
					array(
						'id'       => 'notification_channels',
						'title'    => 'Notification Channels',
						'subTitle' => 'Select which channels should be enabled for notifications',
						'type'     => 'checkbox',
						'options'  => array(
							'email_alerts' => 'Email Alerts',
							'sms_alerts'   => 'SMS Alerts',
							'push_alerts'  => 'Push Notifications',
							'in_app'       => 'In-App Notifications',
							'webhook'      => 'Webhook Notifications',
						),
						'default'  => array( 'email_alerts', 'in_app' ),
						'value'    => get_option( 'notification_channels' ),
					),
				),
			),
			'section_security'     => array(
				'id'     => 'section_security',
				'name'   => 'Security Settings',
				'desc'   => 'Configure security and access control settings.',
				'fields' => array(
					array(
						'id'          => 'api_key',
						'title'       => 'API Key',
						'desc'        => 'Your secure API key for authentication',
						'type'        => 'password',
						'placeholder' => '************',
						'value'       => get_option( 'api_key' ),
					),
					array(
						'id'          => 'allowed_ips',
						'title'       => 'Allowed IP Addresses',
						'desc'        => 'Whitelist IP addresses that can access the API',
						'type'        => 'tags',
						'placeholder' => '192.168.1.1',
						'value'       => get_option( 'allowed_ips' ),
					),
					array(
						'id'          => 'session_timeout',
						'title'       => 'Session Timeout (minutes)',
						'desc'        => 'Time before user sessions expire',
						'type'        => 'number',
						'placeholder' => 30,
						'default'     => 15,
						'value'       => get_option( 'session_timeout' ),
					),
					array(
						'id'       => 'security_features',
						'title'    => 'Security Features',
						'subTitle' => 'Enable additional security features for enhanced protection',
						'type'     => 'checkbox',
						'options'  => array(
							'two_factor'    => 'Two-Factor Authentication',
							'ip_whitelist'  => 'IP Whitelisting',
							'ssl_enforce'   => 'Enforce SSL/TLS',
							'rate_limiting' => 'Rate Limiting',
							'audit_logging' => 'Audit Logging',
						),
						'default'  => array( 'two_factor', 'ssl_enforce' ),
						'value'    => get_option( 'security_features' ),
					),
				),
			),
		),
	),
	'users'      => array(
		'name'     => 'User Management',
		'sections' => array(
			'section_user_roles'   => array(
				'id'     => 'section_user_roles',
				'name'   => 'User Roles & Permissions',
				'desc'   => 'Define which user roles have access to the system.',
				'fields' => array(
					array(
						'id'      => 'enable_role_restrictions',
						'title'   => 'Enable Role Restrictions',
						'label'   => 'Restrict access based on user roles',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'enable_role_restrictions' ),
					),
					array(
						'id'          => 'allowed_roles',
						'title'       => 'Allowed User Roles',
						'desc'        => 'Select which user roles can access the system',
						'type'        => 'select',
						'options'     => array(
							'administrator' => 'Administrator',
							'editor'        => 'Editor',
							'author'        => 'Author',
							'contributor'   => 'Contributor',
							'subscriber'    => 'Subscriber',
							'customer'      => 'Customer',
						),
						'placeholder' => 'Select user roles',
						'multiple'    => true,
						'default'     => array( 'administrator', 'editor' ),
						'value'       => get_option( 'allowed_roles' ),
					),
					array(
						'id'       => 'default_permission_level',
						'title'    => 'Default Permission Level',
						'subTitle' => 'Choose the default permission level for new users',
						'type'     => 'radio',
						'options'  => array(
							'read_only'   => 'Read Only',
							'read_write'  => 'Read & Write',
							'full_access' => 'Full Access',
						),
						'default'  => 'read_only',
						'value'    => get_option( 'default_permission_level' ),
					),
				),
			),
			'section_registration' => array(
				'id'     => 'section_registration',
				'name'   => 'User Registration',
				'desc'   => 'Control how new users can register on your platform.',
				'fields' => array(
					array(
						'id'      => 'allow_registration',
						'title'   => 'Allow User Registration',
						'label'   => 'Enable self-registration for new users',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'allow_registration' ),
					),
					array(
						'id'          => 'registration_message',
						'title'       => 'Registration Welcome Message',
						'desc'        => 'Message displayed to users after successful registration',
						'type'        => 'text',
						'placeholder' => 'Welcome to our platform!',
						'default'     => 'Thank you for registering!',
						'value'       => get_option( 'registration_message' ),
					),
					array(
						'id'          => 'blocked_email_domains',
						'title'       => 'Blocked Email Domains',
						'desc'        => 'Email domains that are not allowed to register',
						'type'        => 'tags',
						'placeholder' => 'spam.com',
						'value'       => get_option( 'blocked_email_domains' ),
					),
					array(
						'id'          => 'default_role',
						'title'       => 'Default User Role',
						'desc'        => 'Role assigned to new users upon registration',
						'type'        => 'select',
						'options'     => array(
							'subscriber'  => 'Subscriber',
							'customer'    => 'Customer',
							'contributor' => 'Contributor',
						),
						'placeholder' => 'Select default role',
						'default'     => 'subscriber',
						'value'       => get_option( 'default_role' ),
					),
					array(
						'id'       => 'registration_requirements',
						'title'    => 'Registration Requirements',
						'subTitle' => 'Select which fields are required during registration',
						'type'     => 'checkbox',
						'options'  => array(
							'email_verification' => 'Email Verification',
							'phone_verification' => 'Phone Verification',
							'terms_acceptance'   => 'Terms & Conditions Acceptance',
							'profile_photo'      => 'Profile Photo',
							'bio'                => 'Bio/Description',
						),
						'default'  => array( 'email_verification', 'terms_acceptance' ),
						'value'    => get_option( 'registration_requirements' ),
					),
				),
			),
			'section_user_limits'  => array(
				'id'     => 'section_user_limits',
				'name'   => 'User Activity Limits',
				'desc'   => 'Set limits on user activities to prevent abuse.',
				'fields' => array(
					array(
						'id'      => 'enable_activity_limits',
						'title'   => 'Enable Activity Limits',
						'label'   => 'Track and limit user activities',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'enable_activity_limits' ),
					),
					array(
						'id'          => 'max_login_attempts',
						'title'       => 'Maximum Login Attempts',
						'desc'        => 'Number of failed login attempts before account lockout',
						'type'        => 'number',
						'placeholder' => 5,
						'default'     => 3,
						'value'       => get_option( 'max_login_attempts' ),
					),
					array(
						'id'          => 'lockout_duration',
						'title'       => 'Lockout Duration (hours)',
						'desc'        => 'How long accounts remain locked after exceeding login attempts',
						'type'        => 'number',
						'placeholder' => 24,
						'default'     => 1,
						'value'       => get_option( 'lockout_duration' ),
					),
				),
			),
		),
	),
	'scheduling' => array(
		'name'     => 'Scheduling',
		'sections' => array(
			'section_maintenance' => array(
				'id'     => 'section_maintenance',
				'name'   => 'Maintenance Window',
				'desc'   => 'Schedule regular maintenance windows for system updates.',
				'fields' => array(
					array(
						'id'      => 'enable_maintenance_mode',
						'title'   => 'Enable Maintenance Mode',
						'label'   => 'Activate maintenance mode during scheduled windows',
						'type'    => 'switch',
						'default' => 'no',
						'value'   => get_option( 'enable_maintenance_mode' ),
					),
					array(
						'id'          => 'maintenance_start',
						'title'       => 'Maintenance Start Time',
						'desc'        => 'Select the date and time when maintenance should begin',
						'type'        => 'datetime',
						'settings'    => array(
							'timePicker' => false,
						),
						'placeholder' => 'Select start date and time',
						'value'       => get_option( 'maintenance_start' ),
					),
					array(
						'id'          => 'maintenance_end',
						'title'       => 'Maintenance End Time',
						'desc'        => 'Select the date and time when maintenance should end',
						'type'        => 'datetime',
						'settings'    => array(
							'timePicker' => true,
						),
						'placeholder' => 'Select end date and time',
						'value'       => get_option( 'maintenance_end' ),
					),
					array(
						'id'       => 'maintenance_frequency',
						'title'    => 'Maintenance Frequency',
						'subTitle' => 'How often should maintenance occur',
						'type'     => 'radio',
						'options'  => array(
							'weekly'    => 'Weekly',
							'biweekly'  => 'Bi-weekly',
							'monthly'   => 'Monthly',
							'quarterly' => 'Quarterly',
						),
						'default'  => 'monthly',
						'value'    => get_option( 'maintenance_frequency' ),
					),
				),
			),
			'section_backup'      => array(
				'id'     => 'section_backup',
				'name'   => 'Automated Backups',
				'desc'   => 'Configure automated backup schedules for your data.',
				'fields' => array(
					array(
						'id'      => 'enable_auto_backup',
						'title'   => 'Enable Automated Backups',
						'label'   => 'Automatically backup data on schedule',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'enable_auto_backup' ),
					),
					array(
						'id'          => 'backup_time',
						'title'       => 'Backup Time',
						'desc'        => 'Select the time when daily backups should run',
						'type'        => 'datetime',
						'placeholder' => 'Select backup time',
						'value'       => get_option( 'backup_time' ),
					),
					array(
						'id'       => 'backup_frequency',
						'title'    => 'Backup Frequency',
						'subTitle' => 'How often should backups be created',
						'type'     => 'radio',
						'options'  => array(
							'hourly'  => 'Hourly',
							'daily'   => 'Daily',
							'weekly'  => 'Weekly',
							'monthly' => 'Monthly',
						),
						'default'  => 'daily',
						'value'    => get_option( 'backup_frequency' ),
					),
					array(
						'id'       => 'backup_types',
						'title'    => 'Backup Types',
						'subTitle' => 'Select what should be included in backups',
						'type'     => 'checkbox',
						'options'  => array(
							'database'  => 'Database',
							'files'     => 'Files & Media',
							'config'    => 'Configuration Files',
							'logs'      => 'System Logs',
							'user_data' => 'User Data',
						),
						'default'  => array( 'database', 'files', 'config' ),
						'value'    => get_option( 'backup_types' ),
					),
					array(
						'id'          => 'backup_retention',
						'title'       => 'Backup Retention (days)',
						'desc'        => 'Number of days to retain backups before deletion',
						'type'        => 'number',
						'placeholder' => 30,
						'default'     => 30,
						'value'       => get_option( 'backup_retention' ),
					),
				),
			),
			'section_reports'     => array(
				'id'     => 'section_reports',
				'name'   => 'Scheduled Reports',
				'desc'   => 'Configure automated report generation and delivery.',
				'fields' => array(
					array(
						'id'      => 'enable_scheduled_reports',
						'title'   => 'Enable Scheduled Reports',
						'label'   => 'Automatically generate and send reports',
						'type'    => 'switch',
						'default' => 'yes',
						'value'   => get_option( 'enable_scheduled_reports' ),
					),
					array(
						'id'          => 'report_generation_time',
						'title'       => 'Report Generation Time',
						'desc'        => 'When should reports be generated',
						'type'        => 'datetime',
						'placeholder' => 'Select report time',
						'value'       => get_option( 'report_generation_time' ),
					),
					array(
						'id'       => 'report_types',
						'title'    => 'Report Types',
						'subTitle' => 'Select which reports should be generated',
						'type'     => 'checkbox',
						'options'  => array(
							'usage_stats'    => 'Usage Statistics',
							'user_activity'  => 'User Activity',
							'security_audit' => 'Security Audit',
							'performance'    => 'Performance Metrics',
							'financial'      => 'Financial Summary',
						),
						'default'  => array( 'usage_stats', 'user_activity' ),
						'value'    => get_option( 'report_types' ),
					),
					array(
						'id'       => 'report_format',
						'title'    => 'Report Format',
						'subTitle' => 'Choose the format for generated reports',
						'type'     => 'radio',
						'options'  => array(
							'pdf'   => 'PDF',
							'csv'   => 'CSV',
							'excel' => 'Excel (XLSX)',
							'json'  => 'JSON',
						),
						'default'  => 'pdf',
						'value'    => get_option( 'report_format' ),
					),
					array(
						'id'          => 'report_recipients',
						'title'       => 'Report Recipients',
						'desc'        => 'Email addresses to receive scheduled reports',
						'type'        => 'tags',
						'placeholder' => 'admin@example.com',
						'value'       => get_option( 'report_recipients' ),
					),
				),
			),
		),
	),
);
$admin_settings = new WPReactPanel( $page_data, $settings_data, PLUGIN_URL, PLUGIN_VERSION );