feat: update design system to match WPCFTO architecture

- Update CSS tokens to match WPCFTO values (sidebar #2c3e50, content #f0f3f5)
- Update Field component to 40%/60% 2-column layout
- Update Checkbox component to toggle switch UI
- Add GroupTitle component for visual section dividers
- Update TabNav component to WPCFTO sidebar styling
- Add MetaboxLayout component for 2-column wrapper
- Update TabPanel styles to match WPCFTO tab content area
- Fix Coupons page to use native WordPress post.php editor instead of modal

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

build/admin-rtl.css

@@ -2,5 +2,5 @@
 .formipay-order-timeline h3{color:#1e1e1e;font-size:16px;font-weight:600;margin:0 0 16px}.timeline-progress{justify-content:space-between;margin-bottom:24px}.timeline-progress,.timeline-step{align-items:center;display:flex;position:relative}.timeline-step{flex:1;flex-direction:column;gap:8px;z-index:1}.timeline-dot{background:#e0e0e0;border:2px solid #c3c4c7;border-radius:50%;height:24px;position:relative;width:24px}.timeline-step.completed .timeline-dot{background:#2271b1;border-color:#2271b1}.timeline-step.completed .timeline-dot:after{background:#fff;border-radius:50%;content:"";height:8px;right:50%;position:absolute;top:50%;transform:translate(50%,-50%);width:8px}.timeline-line{background:#e0e0e0;height:2px;right:50%;position:absolute;top:12px;width:100%;z-index:-1}.timeline-step.completed .timeline-line{background:#2271b1}.timeline-label{color:#646970;font-size:10px;font-weight:600;text-align:center;text-transform:uppercase}.timeline-events ul{list-style:none;margin:0;padding:0}.timeline-events li{border-bottom:1px solid #f0f0f1;display:grid;gap:8px;grid-template-columns:1fr auto;padding:12px 0}.timeline-events li:last-child{border-bottom:none}.event-status{color:#1e1e1e;font-size:13px;font-weight:600}.event-date{color:#646970;font-size:11px;text-align:left}.event-note{color:#646970;font-size:12px;grid-column:1/-1;margin-top:4px}.no-events{color:#646970;font-size:13px;padding:20px 0;text-align:center}
 .formipay-notification-log h3{align-items:center;color:#1e1e1e;display:flex;font-size:16px;font-weight:600;gap:8px;margin:0 0 16px}.formipay-notification-log svg{fill:#1e1e1e}.no-logs{color:#646970;font-size:13px;padding:20px 0;text-align:center}.notification-list{list-style:none;margin:0;padding:0}.notification-item{background:#f6f7f7;border:1px solid #e0e0e0;border-radius:4px;display:flex;gap:12px;margin-bottom:8px;padding:12px}.notification-icon{align-items:center;background:#fff;border-radius:50%;display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.notification-icon svg{fill:#1e1e1e}.notification-content{flex:1;min-width:0}.notification-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.notification-type{color:#2271b1;font-size:10px;font-weight:700;text-transform:uppercase}.notification-status{border-radius:10px;font-size:10px;font-weight:600;padding:2px 6px}.notification-item.sent .notification-status{background:#e7f7ed;color:#28a745}.notification-item.failed .notification-status{background:#fbeaea;color:#dc3545}.notification-item.pending .notification-status{background:#fff8e5;color:#f0ad4e}.notification-details{display:flex;flex-direction:column;gap:2px}.notification-details strong{color:#1e1e1e;font-size:13px}.notification-date,.notification-recipient{color:#646970;font-size:11px}.notification-date{margin-top:4px}
 .formipay-order-detail{background:#f6f7f7;display:flex;flex-direction:column;height:100%}.formipay-detail-header{align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;gap:16px;justify-content:space-between;padding:16px 20px}.formipay-detail-header h1{flex:1;font-size:20px;font-weight:600;margin:0}.header-actions{display:flex;gap:8px}.formipay-detail-content{display:grid;gap:20px;grid-template-columns:2fr 1fr;overflow-y:auto;padding:20px}.formipay-detail-main,.formipay-detail-sidebar{display:flex;flex-direction:column;gap:20px}.formipay-detail-card{background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:20px}.formipay-detail-card h3{color:#1e1e1e;font-size:16px;font-weight:600;margin:0 0 16px}.detail-list{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}.detail-list>div{display:flex;flex-direction:column}.detail-list dt{color:#646970;font-size:12px;font-weight:600;margin-bottom:4px}.detail-list dd{align-items:center;color:#1e1e1e;display:flex;font-size:14px;gap:8px}.detail-list dd .components-select-control{flex:1}.items-table{border-collapse:collapse;width:100%}.items-table td,.items-table th{border-bottom:1px solid #f0f0f1;padding:10px;text-align:right}.items-table th{color:#646970;font-size:12px;font-weight:600;text-transform:uppercase}.items-table td{font-size:13px}.items-table small{color:#646970;display:block;font-size:11px}.items-table tfoot td{border-bottom:none;border-top:2px solid #1e1e1e;padding-top:16px}.customer-info{display:grid;gap:12px;grid-template-columns:1fr}.customer-info>div{display:flex;flex-direction:column}.customer-info dt{color:#646970;font-size:11px;font-weight:600;margin-bottom:2px}.customer-info dd{color:#1e1e1e;font-size:13px}.no-data{color:#646970;font-size:13px}.formipay-error,.formipay-loading{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:60px 20px}.formipay-error p{color:#646970;margin:0}
-.formipay-page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.formipay-page-header h1{font-size:23px;font-weight:400;margin:0}.formipay-navigation-menu{align-items:center;background-color:#fff;box-shadow:0 4px 12px #d2d2d2;display:flex;gap:2em;right:0;margin-right:-20px;margin-top:-10px;padding:12px 50px 12px 20px;position:sticky;top:32px;width:calc(100% + 20px);z-index:1000}.formipay-navigation-menu>img{flex-shrink:0;height:48px;width:48px}.navigation-links{display:flex;flex-wrap:wrap;gap:4px}.navigation-links .nav-link{border-radius:4px;color:#646970;font-size:14px;font-weight:500;padding:8px 16px;text-decoration:none;transition:all .2s}.navigation-links .nav-link:hover{background-color:#f6f7f7;color:#2271b1}.navigation-links .nav-link.active{background-color:#2271b1;color:#fff}.status-badge{border-radius:4px;display:inline-block;font-size:12px;font-weight:500;padding:4px 8px}.status-badge.status-active,.status-badge.status-publish{background-color:#edfaef;color:#00a32a}.status-badge.status-draft,.status-badge.status-inactive{background-color:#f0f0f1;color:#646970}.status-badge.status-expired{background-color:#f6f7f7;color:#d63638}code{background-color:#f0f0f1;border-radius:3px;font-family:monospace;font-size:13px;padding:2px 6px}
+.formipay-page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.formipay-page-header h1{font-size:23px;font-weight:400;margin:0}.formipay-navigation-menu{align-items:center;background-color:#fff;box-shadow:0 4px 12px #d2d2d2;display:flex;gap:2em;right:0;margin-right:-20px;margin-top:-10px;padding:12px 50px 12px 20px;position:sticky;top:32px;width:calc(100% + 20px);z-index:1000}.formipay-navigation-menu>img{flex-shrink:0;height:48px;width:48px}.navigation-links{display:flex;flex-wrap:wrap;gap:4px}.navigation-links .nav-link{border-radius:4px;color:#646970;font-size:14px;font-weight:500;padding:8px 16px;text-decoration:none;transition:all .2s}.navigation-links .nav-link:hover{background-color:#f6f7f7;color:#2271b1}.navigation-links .nav-link.active{background-color:#2271b1;color:#fff}.status-badge{border-radius:4px;display:inline-block;font-size:12px;font-weight:500;padding:4px 8px}.status-badge.status-active,.status-badge.status-publish{background-color:#edfaef;color:#00a32a}.status-badge.status-draft,.status-badge.status-inactive{background-color:#f0f0f1;color:#646970}.status-badge.status-expired{background-color:#f6f7f7;color:#d63638}code{background-color:#f0f0f1;border-radius:3px;font-family:monospace;font-size:13px;padding:2px 6px}.formipay-modal-overlay{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;right:0;position:fixed;left:0;top:0;z-index:100000}.formipay-modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);max-height:90vh;max-width:900px;overflow-y:auto;width:90%}
 .formipay-variation-table{border-collapse:collapse;margin-top:20px;width:100%}.formipay-variation-table thead th{border-bottom:2px solid #1e1e1e;color:#1e1e1e;font-size:13px;font-weight:600;padding:12px;text-align:right}.formipay-variation-table tbody td{border-bottom:1px solid #f0f0f1;padding:12px}.variation-row{background:#fff}.variation-name{gap:8px}.toggle-expand,.variation-name{align-items:center;display:flex}.toggle-expand{background:transparent;border:none;border-radius:2px;cursor:pointer;height:24px;justify-content:center;padding:0;width:24px}.toggle-expand:hover{background:#f0f0f1}.toggle-expand svg{fill:#646970}.variation-name strong{color:#1e1e1e;font-size:13px}.price-cell,.variation-stock,.variation-weight{min-width:120px}.price-cell input,.variation-stock input,.variation-weight input{border:1px solid #8c8f94;border-radius:2px;font-size:13px;padding:6px 8px;width:100%}.variation-stock .components-base-control,.variation-weight .components-base-control{margin:0}.variation-actions{min-width:100px}.variation-details-row{background:#f9f9f9}.variation-details-row td{padding:0}.inner-table{border-collapse:collapse;margin:0;width:100%}.inner-table thead{display:none}.inner-table td{border-bottom:1px solid #f0f0f1;padding:8px 12px}.inner-table tr:last-child td{border-bottom:none}.inner-table input[type=number]{border:1px solid #8c8f94;border-radius:2px;font-size:12px;padding:6px 8px;width:100%}.currency-name{color:#1e1e1e;font-size:12px;font-weight:600}.required{color:#dc3545;margin-right:4px}

build/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '4e4bf3366b83c9df1a24');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '83e1a34ae6a628833355');

build/admin.css

@@ -2,5 +2,5 @@
 .formipay-order-timeline h3{color:#1e1e1e;font-size:16px;font-weight:600;margin:0 0 16px}.timeline-progress{justify-content:space-between;margin-bottom:24px}.timeline-progress,.timeline-step{align-items:center;display:flex;position:relative}.timeline-step{flex:1;flex-direction:column;gap:8px;z-index:1}.timeline-dot{background:#e0e0e0;border:2px solid #c3c4c7;border-radius:50%;height:24px;position:relative;width:24px}.timeline-step.completed .timeline-dot{background:#2271b1;border-color:#2271b1}.timeline-step.completed .timeline-dot:after{background:#fff;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.timeline-line{background:#e0e0e0;height:2px;left:50%;position:absolute;top:12px;width:100%;z-index:-1}.timeline-step.completed .timeline-line{background:#2271b1}.timeline-label{color:#646970;font-size:10px;font-weight:600;text-align:center;text-transform:uppercase}.timeline-events ul{list-style:none;margin:0;padding:0}.timeline-events li{border-bottom:1px solid #f0f0f1;display:grid;gap:8px;grid-template-columns:1fr auto;padding:12px 0}.timeline-events li:last-child{border-bottom:none}.event-status{color:#1e1e1e;font-size:13px;font-weight:600}.event-date{color:#646970;font-size:11px;text-align:right}.event-note{color:#646970;font-size:12px;grid-column:1/-1;margin-top:4px}.no-events{color:#646970;font-size:13px;padding:20px 0;text-align:center}
 .formipay-notification-log h3{align-items:center;color:#1e1e1e;display:flex;font-size:16px;font-weight:600;gap:8px;margin:0 0 16px}.formipay-notification-log svg{fill:#1e1e1e}.no-logs{color:#646970;font-size:13px;padding:20px 0;text-align:center}.notification-list{list-style:none;margin:0;padding:0}.notification-item{background:#f6f7f7;border:1px solid #e0e0e0;border-radius:4px;display:flex;gap:12px;margin-bottom:8px;padding:12px}.notification-icon{align-items:center;background:#fff;border-radius:50%;display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.notification-icon svg{fill:#1e1e1e}.notification-content{flex:1;min-width:0}.notification-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.notification-type{color:#2271b1;font-size:10px;font-weight:700;text-transform:uppercase}.notification-status{border-radius:10px;font-size:10px;font-weight:600;padding:2px 6px}.notification-item.sent .notification-status{background:#e7f7ed;color:#28a745}.notification-item.failed .notification-status{background:#fbeaea;color:#dc3545}.notification-item.pending .notification-status{background:#fff8e5;color:#f0ad4e}.notification-details{display:flex;flex-direction:column;gap:2px}.notification-details strong{color:#1e1e1e;font-size:13px}.notification-date,.notification-recipient{color:#646970;font-size:11px}.notification-date{margin-top:4px}
 .formipay-order-detail{background:#f6f7f7;display:flex;flex-direction:column;height:100%}.formipay-detail-header{align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;gap:16px;justify-content:space-between;padding:16px 20px}.formipay-detail-header h1{flex:1;font-size:20px;font-weight:600;margin:0}.header-actions{display:flex;gap:8px}.formipay-detail-content{display:grid;gap:20px;grid-template-columns:2fr 1fr;overflow-y:auto;padding:20px}.formipay-detail-main,.formipay-detail-sidebar{display:flex;flex-direction:column;gap:20px}.formipay-detail-card{background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:20px}.formipay-detail-card h3{color:#1e1e1e;font-size:16px;font-weight:600;margin:0 0 16px}.detail-list{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}.detail-list>div{display:flex;flex-direction:column}.detail-list dt{color:#646970;font-size:12px;font-weight:600;margin-bottom:4px}.detail-list dd{align-items:center;color:#1e1e1e;display:flex;font-size:14px;gap:8px}.detail-list dd .components-select-control{flex:1}.items-table{border-collapse:collapse;width:100%}.items-table td,.items-table th{border-bottom:1px solid #f0f0f1;padding:10px;text-align:left}.items-table th{color:#646970;font-size:12px;font-weight:600;text-transform:uppercase}.items-table td{font-size:13px}.items-table small{color:#646970;display:block;font-size:11px}.items-table tfoot td{border-bottom:none;border-top:2px solid #1e1e1e;padding-top:16px}.customer-info{display:grid;gap:12px;grid-template-columns:1fr}.customer-info>div{display:flex;flex-direction:column}.customer-info dt{color:#646970;font-size:11px;font-weight:600;margin-bottom:2px}.customer-info dd{color:#1e1e1e;font-size:13px}.no-data{color:#646970;font-size:13px}.formipay-error,.formipay-loading{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:60px 20px}.formipay-error p{color:#646970;margin:0}
-.formipay-page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.formipay-page-header h1{font-size:23px;font-weight:400;margin:0}.formipay-navigation-menu{align-items:center;background-color:#fff;box-shadow:0 4px 12px #d2d2d2;display:flex;gap:2em;left:0;margin-left:-20px;margin-top:-10px;padding:12px 20px 12px 50px;position:sticky;top:32px;width:calc(100% + 20px);z-index:1000}.formipay-navigation-menu>img{flex-shrink:0;height:48px;width:48px}.navigation-links{display:flex;flex-wrap:wrap;gap:4px}.navigation-links .nav-link{border-radius:4px;color:#646970;font-size:14px;font-weight:500;padding:8px 16px;text-decoration:none;transition:all .2s}.navigation-links .nav-link:hover{background-color:#f6f7f7;color:#2271b1}.navigation-links .nav-link.active{background-color:#2271b1;color:#fff}.status-badge{border-radius:4px;display:inline-block;font-size:12px;font-weight:500;padding:4px 8px}.status-badge.status-active,.status-badge.status-publish{background-color:#edfaef;color:#00a32a}.status-badge.status-draft,.status-badge.status-inactive{background-color:#f0f0f1;color:#646970}.status-badge.status-expired{background-color:#f6f7f7;color:#d63638}code{background-color:#f0f0f1;border-radius:3px;font-family:monospace;font-size:13px;padding:2px 6px}
+.formipay-page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.formipay-page-header h1{font-size:23px;font-weight:400;margin:0}.formipay-navigation-menu{align-items:center;background-color:#fff;box-shadow:0 4px 12px #d2d2d2;display:flex;gap:2em;left:0;margin-left:-20px;margin-top:-10px;padding:12px 20px 12px 50px;position:sticky;top:32px;width:calc(100% + 20px);z-index:1000}.formipay-navigation-menu>img{flex-shrink:0;height:48px;width:48px}.navigation-links{display:flex;flex-wrap:wrap;gap:4px}.navigation-links .nav-link{border-radius:4px;color:#646970;font-size:14px;font-weight:500;padding:8px 16px;text-decoration:none;transition:all .2s}.navigation-links .nav-link:hover{background-color:#f6f7f7;color:#2271b1}.navigation-links .nav-link.active{background-color:#2271b1;color:#fff}.status-badge{border-radius:4px;display:inline-block;font-size:12px;font-weight:500;padding:4px 8px}.status-badge.status-active,.status-badge.status-publish{background-color:#edfaef;color:#00a32a}.status-badge.status-draft,.status-badge.status-inactive{background-color:#f0f0f1;color:#646970}.status-badge.status-expired{background-color:#f6f7f7;color:#d63638}code{background-color:#f0f0f1;border-radius:3px;font-family:monospace;font-size:13px;padding:2px 6px}.formipay-modal-overlay{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:100000}.formipay-modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);max-height:90vh;max-width:900px;overflow-y:auto;width:90%}
 .formipay-variation-table{border-collapse:collapse;margin-top:20px;width:100%}.formipay-variation-table thead th{border-bottom:2px solid #1e1e1e;color:#1e1e1e;font-size:13px;font-weight:600;padding:12px;text-align:left}.formipay-variation-table tbody td{border-bottom:1px solid #f0f0f1;padding:12px}.variation-row{background:#fff}.variation-name{gap:8px}.toggle-expand,.variation-name{align-items:center;display:flex}.toggle-expand{background:transparent;border:none;border-radius:2px;cursor:pointer;height:24px;justify-content:center;padding:0;width:24px}.toggle-expand:hover{background:#f0f0f1}.toggle-expand svg{fill:#646970}.variation-name strong{color:#1e1e1e;font-size:13px}.price-cell,.variation-stock,.variation-weight{min-width:120px}.price-cell input,.variation-stock input,.variation-weight input{border:1px solid #8c8f94;border-radius:2px;font-size:13px;padding:6px 8px;width:100%}.variation-stock .components-base-control,.variation-weight .components-base-control{margin:0}.variation-actions{min-width:100px}.variation-details-row{background:#f9f9f9}.variation-details-row td{padding:0}.inner-table{border-collapse:collapse;margin:0;width:100%}.inner-table thead{display:none}.inner-table td{border-bottom:1px solid #f0f0f1;padding:8px 12px}.inner-table tr:last-child td{border-bottom:none}.inner-table input[type=number]{border:1px solid #8c8f94;border-radius:2px;font-size:12px;padding:6px 8px;width:100%}.currency-name{color:#1e1e1e;font-size:12px;font-weight:600}.required{color:#dc3545;margin-left:4px}

includes/Coupon.php

@@ -35,6 +35,8 @@ class Coupon {
         add_action( 'wp_ajax_formipay-delete-coupon',       [$this, 'formipay_delete_coupon'] );
         add_action( 'wp_ajax_formipay-bulk-delete-coupon',  [$this, 'formipay_bulk_delete_coupon'] );
         add_action( 'wp_ajax_formipay-duplicate-coupon',    [$this, 'formipay_duplicate_coupon'] );
+        add_action( 'wp_ajax_formipay-get-coupon',          [$this, 'formipay_get_coupon'] );
+        add_action( 'wp_ajax_formipay-save-coupon',         [$this, 'formipay_save_coupon'] );
 
         // Order
         add_filter( 'formipay/order/order-details',         [$this, 'order_details'], 99, 3 );
@@ -888,4 +890,160 @@ class Coupon {
         ] );
     }
 
+    /**
+     * Get coupon data for React editor
+     */
+    public function formipay_get_coupon() {
+
+        check_ajax_referer( 'formipay-admin', '_wpnonce' );
+
+        if ( ! current_user_can( 'manage_options' ) ) {
+            wp_send_json_error( [ 'message' => 'Unauthorized' ] );
+        }
+
+        $post_id = isset($_REQUEST['id']) ? intval($_REQUEST['id']) : 0;
+
+        if ( empty($post_id) ) {
+            wp_send_json_error( [ 'message' => esc_html__( 'Coupon ID is required.', 'formipay' ) ] );
+        }
+
+        $post = get_post($post_id);
+        if ( ! $post || $post->post_type !== 'formipay-coupon' ) {
+            wp_send_json_error( [ 'message' => esc_html__( 'Coupon not found.', 'formipay' ) ] );
+        }
+
+        $global_currencies = get_global_currency_array();
+
+        // Build coupon data
+        $coupon_data = [
+            'ID' => $post_id,
+            'post_title' => $post->post_title,
+            'active' => formipay_get_post_meta($post_id, 'active'),
+            'type' => formipay_get_post_meta($post_id, 'type'),
+            'amount_percentage' => formipay_get_post_meta($post_id, 'amount_percentage'),
+            'case_sensitive' => formipay_get_post_meta($post_id, 'case_sensitive'),
+            'free_shipping' => formipay_get_post_meta($post_id, 'free_shipping'),
+            'quantity_active' => formipay_get_post_meta($post_id, 'quantity_active'),
+            'use_limit' => formipay_get_post_meta($post_id, 'use_limit'),
+            'date_limit' => formipay_get_post_meta($post_id, 'date_limit'),
+            'amounts_fixed' => [],
+            'max_amounts' => [],
+            'forms' => formipay_get_post_meta($post_id, 'forms') ?: [],
+            'products' => formipay_get_post_meta($post_id, 'products') ?: [],
+            'customers' => formipay_get_post_meta($post_id, 'customers') ?: [],
+        ];
+
+        // Get fixed amounts for each currency
+        foreach ($global_currencies as $currency) {
+            $currency_raw = $currency['currency'];
+            $currency_parts = explode(':::', $currency_raw);
+            $currency_code = $currency_parts[0] ?? '';
+            $symbol = formipay_get_currency_data_by_value($currency_raw, 'symbol');
+
+            $amount_fixed = formipay_get_post_meta($post_id, 'amount_fixed_' . $symbol);
+            if ( $amount_fixed ) {
+                $coupon_data['amounts_fixed'][] = [
+                    'currency' => $currency_code,
+                    'symbol' => $symbol,
+                    'amount' => $amount_fixed,
+                ];
+            }
+
+            $max_amount = formipay_get_post_meta($post_id, 'max_amount_' . $symbol);
+            if ( $max_amount ) {
+                $coupon_data['max_amounts'][] = [
+                    'currency' => $currency_code,
+                    'symbol' => $symbol,
+                    'amount' => $max_amount,
+                ];
+            }
+        }
+
+        wp_send_json_success( $coupon_data );
+    }
+
+    /**
+     * Save coupon data from React editor
+     */
+    public function formipay_save_coupon() {
+
+        check_ajax_referer( 'formipay-admin', '_wpnonce' );
+
+        if ( ! current_user_can( 'manage_options' ) ) {
+            wp_send_json_error( [ 'message' => 'Unauthorized' ] );
+        }
+
+        $post_id = isset($_REQUEST['id']) ? intval($_REQUEST['id']) : 0;
+        $title = isset($_REQUEST['title']) ? sanitize_text_field(wp_unslash($_REQUEST['title'])) : '';
+
+        if ( empty($title) ) {
+            wp_send_json_error( [ 'message' => esc_html__( 'Coupon code is required.', 'formipay' ) ] );
+        }
+
+        $global_currencies = get_global_currency_array();
+
+        // Prepare post data
+        $post_data = [
+            'post_title' => $title,
+            'post_type' => 'formipay-coupon',
+            'post_status' => 'publish',
+        ];
+
+        if ( $post_id > 0 ) {
+            $post_data['ID'] = $post_id;
+            $post_data['post_status'] = get_post_status($post_id);
+            $new_post_id = wp_update_post($post_data);
+        } else {
+            $new_post_id = wp_insert_post($post_data);
+        }
+
+        if ( is_wp_error($new_post_id) ) {
+            wp_send_json_error( [ 'message' => $new_post_id->get_error_message() ] );
+        }
+
+        // Save meta fields
+        $meta_fields = [
+            'active',
+            'type',
+            'amount_percentage',
+            'case_sensitive',
+            'free_shipping',
+            'quantity_active',
+            'use_limit',
+            'date_limit',
+        ];
+
+        foreach ($meta_fields as $field) {
+            $value = isset($_REQUEST[$field]) ? wp_unslash($_REQUEST[$field]) : '';
+            update_post_meta($new_post_id, $field, $value);
+        }
+
+        // Save fixed amounts
+        foreach ($global_currencies as $currency) {
+            $symbol = formipay_get_currency_data_by_value($currency['currency'], 'symbol');
+
+            if ( isset($_REQUEST['amount_fixed_' . $symbol]) ) {
+                update_post_meta($new_post_id, 'amount_fixed_' . $symbol, wp_unslash($_REQUEST['amount_fixed_' . $symbol]));
+            }
+
+            if ( isset($_REQUEST['max_amount_' . $symbol]) ) {
+                update_post_meta($new_post_id, 'max_amount_' . $symbol, wp_unslash($_REQUEST['max_amount_' . $symbol]));
+            }
+        }
+
+        // Save relation fields
+        $relation_fields = ['forms', 'products', 'customers'];
+        foreach ($relation_fields as $field) {
+            if ( isset($_REQUEST[$field]) ) {
+                $values = is_array($_REQUEST[$field]) ? array_map('intval', $_REQUEST[$field]) : [];
+                update_post_meta($new_post_id, $field, $values);
+            }
+        }
+
+        wp_send_json_success( [
+            'message' => esc_html__( 'Coupon saved successfully.', 'formipay' ),
+            'id' => $new_post_id,
+        ] );
+    }
+
 }

src/admin/design-system/WpcftoComponents.js

@@ -24,22 +24,42 @@ export function BoxChild({ children, className = '', ...props }) {
     );
 }
 
-// Tab Navigation Component
+// Tab Navigation Component - WPCFTO sidebar style
 export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical' }) {
     return (
-        <div className={`formipay-tab-nav formipay-tab-nav-${orientation}`}>
+        <div className={`formipay-wpcfto-tab-nav ${orientation === 'vertical' ? 'formipay-wpcfto-sidebar' : ''}`}>
-            {tabs.map((tab) => (
+            <div className="formipay-wpcfto-tab-nav-inner">
-                <div
+                {tabs.map((tab) => (
-                    key={tab.id}
+                    <div
-                    className={`formipay-nav-item ${activeTab === tab.id ? 'active' : ''}`}
+                        key={tab.id}
-                    onClick={() => onTabChange(tab.id)}
+                        className={`formipay-wpcfto-nav ${activeTab === tab.id ? 'active' : ''} ${tab.submenu ? 'has-submenu' : ''} ${!tab.icon ? 'no-icon' : ''}`}
-                >
+                        onClick={() => onTabChange(tab.id)}
-                    <div className="formipay-nav-title">
+                    >
-                        {tab.icon && <span className="formipay-nav-icon">{tab.icon}</span>}
+                        <div className="formipay-wpcfto-nav-title">
-                        <span>{tab.label}</span>
+                            {tab.icon && <i className={tab.icon}></i>}
+                            <span>{tab.label}</span>
+                        </div>
+
+                        {tab.submenu && (
+                            <div className="formipay-wpcfto-submenus">
+                                {tab.submenu.map((sub) => (
+                                    <div
+                                        key={`${tab.id}_${sub.id}`}
+                                        className={`formipay-wpcfto-submenu-item ${activeTab === `${tab.id}_${sub.id}` ? 'active' : ''}`}
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            onTabChange(`${tab.id}_${sub.id}`);
+                                        }}
+                                    >
+                                        {sub.label}
+                                        <i className="fa fa-chevron-right"></i>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
                     </div>
-                </div>
+                ))}
-            ))}
+            </div>
         </div>
     );
 }
@@ -62,7 +82,7 @@ export function TabPanel({ tabs, activeTab, children }) {
     );
 }
 
-// Field Component
+// Field Component - WPCFTO-style 2-column layout
 export function Field({
     label,
     description,
@@ -72,18 +92,20 @@ export function Field({
     ...props
 }) {
     return (
-        <div className={`formipay-field ${className}`} {...props}>
+        <div className={`formipay-generic-field ${className}`} {...props}>
-            {label && (
+            <div className="formipay-field-aside">
-                <div className={`formipay-field-label ${required ? 'required' : ''}`}>
+                {label && (
-                    <span className="formipay-field-label-text">{label}</span>
+                    <div className={`formipay-field-label ${required ? 'required' : ''}`}>
-                </div>
+                        <span className="formipay-field-label-text">{label}</span>
-            )}
+                    </div>
+                )}
+                {description && (
+                    <div className="formipay-field-description">{description}</div>
+                )}
+            </div>
             <div className="formipay-field-content">
                 {children}
             </div>
-            {description && (
-                <div className="formipay-field-description">{description}</div>
-            )}
         </div>
     );
 }
@@ -145,22 +167,26 @@ export function Select({
     );
 }
 
-// Checkbox Component
+// Checkbox Component - WPCFTO toggle switch style
 export function Checkbox({
     label,
     checked,
     onChange,
     className = '',
+    isToggle = true,
     ...props
 }) {
     return (
-        <label className={`formipay-checkbox ${className}`}>
+        <label className={`formipay-admin-checkbox ${checked ? 'active' : ''} ${className}`}>
-            <input
+            <div className={`formipay-admin-checkbox-wrapper ${isToggle ? 'is_toggle' : ''}`}>
-                type="checkbox"
+                <div className="formipay-checkbox-switcher"></div>
-                checked={checked}
+                <input
-                onChange={onChange}
+                    type="checkbox"
-                {...props}
+                    checked={checked}
-            />
+                    onChange={onChange}
+                    {...props}
+                />
+            </div>
             <span>{label}</span>
         </label>
     );
@@ -272,6 +298,20 @@ export function Notice({
     );
 }
 
+// Group Title Component - WPCFTO section divider (visual, not accordion)
+export function GroupTitle({
+    title,
+    icon,
+    className = '',
+}) {
+    return (
+        <div className={`formipay-group-title ${className}`}>
+            {icon && <i className={icon}></i>}
+            {title}
+        </div>
+    );
+}
+
 // Loading Spinner Component
 export function Spinner({ size = 'md', className = '' }) {
     const sizeClass = size !== 'md' ? `formipay-spinner-${size}` : '';
@@ -364,6 +404,22 @@ export function Table({
     );
 }
 
+// Metabox Layout Component - WPCFTO 2-column wrapper for React metabox islands
+export function MetaboxLayout({ tabs, activeTab, onTabChange, children }) {
+    return (
+        <div className="formipay-wpcfto-metabox">
+            <div className="formipay-wpcfto-metabox-inner">
+                <div className="formipay-wpcfto-container">
+                    <TabNav tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
+                    <div className="formipay-wpcfto-tabs">
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 export default {
     Box,
     BoxChild,
@@ -377,8 +433,10 @@ export default {
     Button,
     Repeater,
     Notice,
+    GroupTitle,
     Spinner,
     EmptyState,
     Badge,
     Table,
+    MetaboxLayout,
 };

src/admin/design-system/WpcftoDesign.css

@@ -9,21 +9,23 @@
    ============================================ */
 
 :root {
-    /* Colors */
+    /* Colors - WPCFTO-matched values */
     --formipay-color-primary: #2985f7;
-    --formipay-color-sidebar-bg: #1e2a36;
+    --formipay-color-sidebar-bg: #2c3e50;
-    --formipay-color-sidebar-text: #fff;
+    --formipay-color-sidebar-text: #bec5cb;
-    --formipay-color-content-bg: #fff;
+    --formipay-color-sidebar-active: #2985f7;
+    --formipay-color-content-bg: #f0f3f5;
+    --formipay-color-block-bg: #fff;
     --formipay-color-border: #f0f0f1;
     --formipay-color-border-dark: #8c99a5;
     --formipay-color-input-bg: #f6f9fc;
-    --formipay-color-text: #1d2327;
+    --formipay-color-text: #27374e;
-    --formipay-color-text-muted: #646970;
+    --formipay-color-text-muted: #8c99a5;
     --formipay-color-danger: #d63638;
     --formipay-color-success: #00a32a;
     --formipay-color-warning: #dba617;
 
-    /* Spacing */
+    /* Spacing - WPCFTO values */
     --formipay-spacing-xs: 4px;
     --formipay-spacing-sm: 8px;
     --formipay-spacing-md: 12px;
@@ -31,13 +33,13 @@
     --formipay-spacing-xl: 20px;
     --formipay-spacing-xxl: 24px;
 
-    /* Border Radius */
+    /* Border Radius - WPCFTO values */
     --formipay-radius-sm: 4px;
     --formipay-radius-md: 10px;
     --formipay-radius-lg: 30px;
     --formipay-radius-full: 50%;
 
-    /* Typography */
+    /* Typography - WPCFTO values */
     --formipay-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
     --formipay-font-size-sm: 13px;
     --formipay-font-size-base: 14px;
@@ -48,6 +50,11 @@
     --formipay-font-weight-semibold: 600;
     --formipay-font-weight-bold: 700;
 
+    /* WPCFTO Layout Dimensions */
+    --formipay-sidebar-width: 273px;
+    --formipay-field-aside-width: 40%;
+    --formipay-field-content-width: 60%;
+
     /* Shadows */
     --formipay-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
     --formipay-shadow-md: -2px 2px 5px rgba(0, 0, 0, 0.08);
@@ -104,86 +111,153 @@
 }
 
 /* ============================================
-   TAB NAVIGATION (Vertical)
+   TAB NAVIGATION (WPCFTO sidebar)
    ============================================ */
 
-.formipay-tab-nav {
+.formipay-wpcfto-tab-nav {
-    display: flex;
+    background-color: var(--formipay-color-sidebar-bg);
-    flex-direction: column;
+    width: var(--formipay-sidebar-width);
-    gap: var(--formipay-spacing-xs);
+    padding: 21px 0;
+    flex-grow: 1;
 }
 
-.formipay-nav-item {
+.formipay-wpcfto-tab-nav.hide {
-    display: flex;
+    display: none;
-    flex-direction: column;
-    padding: var(--formipay-spacing-md) var(--formipay-spacing-lg);
-    border-radius: var(--formipay-radius-sm);
-    cursor: pointer;
-    transition: background-color var(--formipay-transition-fast);
-    user-select: none;
 }
 
-.formipay-nav-item:hover {
+.formipay-wpcfto-tab-nav-inner {
-    background-color: rgba(41, 133, 247, 0.05);
+    position: sticky;
+    top: 133px;
+    z-index: 99;
 }
 
-.formipay-nav-item.active {
+.formipay-wpcfto-nav {
-    background-color: rgba(41, 133, 247, 0.1);
+    background-color: transparent;
-    color: var(--formipay-color-primary);
+    position: relative;
-}
+    padding: 0;
-
-.formipay-nav-title {
-    display: flex;
-    align-items: center;
-    gap: var(--formipay-spacing-sm);
     font-size: var(--formipay-font-size-base);
-    font-weight: var(--formipay-font-weight-medium);
+    font-weight: 400;
+    text-transform: uppercase;
+    color: var(--formipay-color-sidebar-text);
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
 }
 
-.formipay-nav-icon {
+.formipay-wpcfto-nav-title {
-    display: flex;
+    padding: 13px 32px 13px 34px;
-    align-items: center;
+    position: relative;
-    justify-content: center;
+}
-    width: 20px;
+
-    height: 20px;
+.formipay-wpcfto-nav i {
+    display: block;
+    position: absolute;
+    right: 30px;
+    left: auto;
+    top: 50%;
+    margin-top: -11px;
+    width: 26px;
+    text-align: center;
+    font-size: 22px;
+}
+
+.formipay-wpcfto-nav.active {
+    background-color: var(--formipay-color-primary);
+    color: white;
+}
+
+.formipay-wpcfto-nav:hover {
+    color: white;
+}
+
+.formipay-wpcfto-submenus {
+    background-color: #1e2a36;
+    padding: 18px 32px 18px 34px;
+}
+
+.formipay-wpcfto-submenu-item {
+    font-size: 15px;
+    font-weight: 400;
+    text-transform: initial;
+    position: relative;
+    color: var(--formipay-color-text-muted);
+    margin-bottom: 15px;
+}
+
+.formipay-wpcfto-submenu-item i {
+    font-size: 10px;
+    right: 0;
+    margin-top: -5px;
+    display: none;
+}
+
+.formipay-wpcfto-submenu-item.active,
+.formipay-wpcfto-submenu-item:hover {
+    color: white;
+}
+
+.formipay-wpcfto-submenu-item.active i {
+    display: block;
 }
 
 /* ============================================
-   TAB CONTENT PANELS
+   TAB CONTENT PANELS (WPCFTO tab content area)
    ============================================ */
 
+.formipay-tabs {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
 .formipay-tab {
+    background-color: var(--formipay-color-content-bg);
+    width: 100%;
+    padding: 20px 30px 20px 20px;
     display: none;
 }
 
 .formipay-tab.active {
     display: block;
+    animation: fadeIn 0.4s ease;
 }
 
 .formipay-tab-content {
-    padding: var(--formipay-spacing-lg);
+    max-width: 100%;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* ============================================
-   FIELD COMPONENT
+   FIELD COMPONENT - WPCFTO 2-column layout
    ============================================ */
 
-.formipay-field {
+.formipay-generic-field {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    padding: var(--formipay-spacing-lg) 0;
+    justify-content: space-between;
-    border-bottom: 1px solid var(--formipay-color-border);
+    padding: 1.8rem 1rem 0;
+    max-width: 100%;
+    width: 100%;
+    border-radius: 10px;
+    background-color: var(--formipay-color-block-bg);
+    margin: 0 0 10px;
 }
 
-.formipay-field:last-child {
+.formipay-field-aside {
-    border-bottom: none;
+    width: var(--formipay-field-aside-width);
+    padding-right: 2rem;
 }
 
 .formipay-field-label {
-    display: flex;
+    display: inline;
-    align-items: flex-start;
-    gap: var(--formipay-spacing-xs);
-    margin-bottom: var(--formipay-spacing-sm);
     font-size: var(--formipay-font-size-base);
     font-weight: var(--formipay-font-weight-medium);
 }
@@ -194,10 +268,15 @@
     margin-left: 2px;
 }
 
+.formipay-field-content {
+    width: var(--formipay-field-content-width);
+}
+
 .formipay-field-description {
+    display: block;
+    margin-top: 0.8em;
     font-size: var(--formipay-font-size-sm);
     color: var(--formipay-color-text-muted);
-    margin-top: var(--formipay-spacing-xs);
 }
 
 /* ============================================
@@ -239,21 +318,52 @@
 }
 
 /* ============================================
-   CHECKBOX & RADIO
+   CHECKBOX & RADIO - WPCFTO toggle style
    ============================================ */
 
-.formipay-checkbox,
+.formipay-admin-checkbox {
-.formipay-radio {
+    align-self: flex-end;
-    display: flex;
+    margin-bottom: 0;
-    align-items: center;
+}
-    gap: var(--formipay-spacing-sm);
+
+.formipay-admin-checkbox-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 42px;
+    height: 24px;
+    background-color: #bec5cb;
+    border-radius: 20px;
+    transition: background-color 0.3s ease;
     cursor: pointer;
 }
 
-.formipay-checkbox input,
+.formipay-admin-checkbox-wrapper.active {
-.formipay-radio input {
+    background-color: var(--formipay-color-primary);
-    width: 16px;
+}
-    height: 16px;
+
+.formipay-checkbox-switcher {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 18px;
+    height: 18px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+}
+
+.formipay-admin-checkbox-wrapper.active .formipay-checkbox-switcher {
+    transform: translateX(18px);
+}
+
+.formipay-admin-checkbox input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.formipay-admin-checkbox label {
     cursor: pointer;
 }
 
@@ -495,6 +605,29 @@
     color: var(--formipay-color-text-muted);
 }
 
+/* ============================================
+   GROUP TITLE - WPCFTO section divider
+   ============================================ */
+
+.formipay-group-title {
+    width: 100%;
+    padding: 0 0 12px;
+    color: var(--formipay-color-text-muted);
+    font-size: 14px;
+    font-weight: 400;
+    text-transform: uppercase;
+    border-bottom: 1px solid #d6dade;
+    margin: 0 0 17px;
+    letter-spacing: 1.4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.formipay-group-title i {
+    display: block;
+}
+
 /* ============================================
    NOTICE / ALERT COMPONENTS
    ============================================ */
@@ -625,6 +758,44 @@
 .formipay-gap-3 { gap: var(--formipay-spacing-md); }
 .formipay-gap-4 { gap: var(--formipay-spacing-lg); }
 
+/* ============================================
+   METABOX LAYOUT - WPCFTO 2-column wrapper
+   ============================================ */
+
+.formipay-wpcfto-metabox {
+    background-color: #fff;
+    border-radius: var(--formipay-radius-md);
+    overflow: hidden;
+    box-shadow: var(--formipay-shadow-sm);
+}
+
+.formipay-wpcfto-metabox-inner {
+    display: flex;
+    min-height: 400px;
+}
+
+.formipay-wpcfto-container {
+    display: flex;
+    width: 100%;
+    position: relative;
+}
+
+/* Horizontal variant for mobile/narrow contexts */
+.formipay-wpcfto-container.horizontal {
+    flex-direction: column;
+}
+
+.formipay-wpcfto-container.horizontal .formipay-wpcfto-tab-nav {
+    width: 100%;
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 0;
+}
+
+.formipay-wpcfto-container.horizontal .formipay-wpcfto-tabs {
+    width: 100%;
+}
+
 /* ============================================
    RESPONSIVE
    ============================================ */

src/admin/design-system/index.js

@@ -18,10 +18,12 @@ export {
     Button,
     Repeater,
     Notice,
+    GroupTitle,
     Spinner,
     EmptyState,
     Badge,
     Table,
+    MetaboxLayout,
 } from './WpcftoComponents';
 
 // Export CSS import helper

src/admin/pages/AdminPages.css

@@ -91,4 +91,28 @@ code {
     border-radius: 3px;
     font-family: monospace;
     font-size: 13px;
+}
+
+/** Modal Overlay **/
+.formipay-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100000;
+}
+
+.formipay-modal-content {
+    background-color: white;
+    border-radius: 8px;
+    max-width: 900px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

src/admin/pages/Coupons.js

@@ -13,6 +13,11 @@ export default function CouponsPage() {
     const ajaxUrl = window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php';
     const nonce = window.formipayAdmin?.nonce || '';
 
+    const openEditor = (couponId) => {
+        // Use native WordPress post editor
+        window.location.href = `/wp-admin/post.php?post=${couponId}&action=edit`;
+    };
+
     const handleDelete = async (id) => {
         const result = await Swal.fire({
             icon: 'info',
@@ -72,7 +77,15 @@ export default function CouponsPage() {
                 <>
                     <strong>{row.code || row.post_title}</strong>
                     <span className="row-actions">
-                        <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>{__('edit', 'formipay')}</a>
+                        <button
+                            className="button-link"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                openEditor(row.ID);
+                            }}
+                        >
+                            {__('edit', 'formipay')}
+                        </button>
                         {' | '}
                         <button
                             className="button-link delete"
@@ -177,7 +190,7 @@ export default function CouponsPage() {
                 actions={{
                     addNew: {
                         label: __('+ Add New Coupon', 'formipay'),
-                        action: 'formipay-create-coupon-post',
+                        href: '/wp-admin/post-new.php?post_type=formipay_coupon',
                     },
                     bulkDelete: {
                         action: 'formipay-bulk-delete-coupon',