').text('Template not available');
+ }
+
+ var $accordion = $(this.templates.accordion(data));
+
+ if (target) {
+ if (typeof target === 'string') {
+ $(target).append($accordion);
+ } else {
+ target.append($accordion);
+ }
+ }
+
+ return $accordion;
+ },
+
+ /**
+ * Create a card
+ *
+ * @param {Object} data Card data with header, content, footer, and icon
+ * @param {jQuery|String} target Where to append the card
+ * @return {jQuery} The created card element
+ */
+ createCard: function(data, target) {
+ if (!this.templates || !this.templates.card) {
+ return $('
').text('Template not available');
+ }
+
+ var $card = $(this.templates.card(data));
+
+ if (target) {
+ if (typeof target === 'string') {
+ $(target).append($card);
+ } else {
+ target.append($card);
+ }
+ }
+
+ return $card;
+ },
+
+ /**
+ * Create a notification
+ *
+ * @param {Object} data Notification data with type, title, and message
+ * @param {jQuery|String} target Where to append the notification
+ * @return {jQuery} The created notification element
+ */
+ createNotification: function(data, target) {
+ if (!this.templates || !this.templates.notification) {
+ return $('
').text('Template not available');
+ }
+
+ // Set default type if not provided
+ data.type = data.type || 'info';
+
+ var $notification = $(this.templates.notification(data));
+
+ if (target) {
+ if (typeof target === 'string') {
+ $(target).prepend($notification);
+ } else {
+ target.prepend($notification);
+ }
+
+ // Auto-dismiss success notifications
+ if (data.type === 'success') {
+ setTimeout(function() {
+ $notification.fadeOut(300, function() {
+ $(this).remove();
+ });
+ }, 5000);
+ }
+ }
+
+ return $notification;
+ }
+ };
+
+ // Initialize on document ready
+ $(document).ready(function() {
+ // Initialize UI components
+ WPAallstarsUI.init();
+
+ // Make UI components available globally for use elsewhere
+ window.WPAallstarsUI = WPAallstarsUI;
+ });
+
+})(jQuery);
\ No newline at end of file
diff --git a/includes/class-wp-allstars-ui-enhancements.php b/includes/class-wp-allstars-ui-enhancements.php
new file mode 100644
index 0000000..ff9d80c
--- /dev/null
+++ b/includes/class-wp-allstars-ui-enhancements.php
@@ -0,0 +1,176 @@
+init_components();
+ }
+
+ /**
+ * Enqueue CSS and JavaScript assets
+ */
+ public function enqueue_assets($hook) {
+ // Only load on WP Allstars pages
+ if (strpos($hook, 'wp-allstars') === false) {
+ return;
+ }
+
+ // Already registered in main plugin file, but ensure they're enqueued
+ wp_enqueue_style('wp-allstars-admin');
+ wp_enqueue_script('wp-allstars-admin');
+
+ // Add UI enhancements script
+ wp_enqueue_script(
+ 'wp-allstars-ui-enhancements',
+ plugin_dir_url(dirname(__FILE__)) . 'admin/js/wp-allstars-ui-enhancements.js',
+ array('jquery', 'wp-allstars-admin'),
+ WP_ALLSTARS_VERSION,
+ true
+ );
+
+ // Add enhanced UI styles
+ wp_enqueue_style(
+ 'wp-allstars-ui-enhancements',
+ plugin_dir_url(dirname(__FILE__)) . 'admin/css/wp-allstars-ui-enhancements.css',
+ array('wp-allstars-admin'),
+ WP_ALLSTARS_VERSION
+ );
+
+ // Localize script with settings
+ wp_localize_script('wp-allstars-ui-enhancements', 'wpAllstarsUI', array(
+ 'ajaxurl' => admin_url('ajax.php'),
+ 'nonce' => wp_create_nonce('wp_allstars_ui_nonce'),
+ ));
+ }
+
+ /**
+ * Add body class for enhanced UI
+ */
+ public function add_body_class($classes) {
+ if (isset($_GET['page']) && strpos($_GET['page'], 'wp-allstars') !== false) {
+ $classes .= ' wp-allstars-enhanced-ui';
+ }
+ return $classes;
+ }
+
+ /**
+ * Initialize UI components
+ */
+ private function init_components() {
+ // Add accordion functionality
+ add_action('admin_footer', array($this, 'render_accordion_template'));
+
+ // Add card component
+ add_action('admin_footer', array($this, 'render_card_template'));
+
+ // Add notification system
+ add_action('admin_footer', array($this, 'render_notification_template'));
+ }
+
+ /**
+ * Render accordion template
+ */
+ public function render_accordion_template() {
+ // Only on WP Allstars pages
+ if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
+ return;
+ }
+
+ ?>
+
+
+
+
+
+