diff --git a/.gitignore b/.gitignore
index 2d0b7c544..66f134d30 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,17 @@ coverage
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?node_modules/
+*.sw?
+
+# Build output
+build/
+
+# Development notes
+FINDINGS.md
+MIGRATION_STRATEGY.md
+TASKLIST.md
+docs/
+
+# npm
+package-lock.json
+node_modules/.package-lock.json
diff --git a/FINDINGS.md b/FINDINGS.md
deleted file mode 100644
index dbd102366..000000000
--- a/FINDINGS.md
+++ /dev/null
@@ -1,196 +0,0 @@
-# 🔍 Formipay Plugin — Comprehensive Audit Report
-
-**Date:** April 17, 2026  
-**Auditor:** GitHub Copilot  
-**Plugin Version:** 1.0.0  
-**Files Analyzed:** ~60+ files, ~15,000+ lines of PHP, JS, CSS, HTML  
-
----
-
-## Table of Contents
-
-- [1. Bugs & Defects](#1-bugs--defects)
-  - [1.1 Critical Bugs](#11-critical-bugs)
-  - [1.2 Moderate Bugs](#12-moderate-bugs)
-- [2. Security Concerns](#2-security-concerns)
-- [3. Architecture & Code Quality Issues](#3-architecture--code-quality-issues)
-- [4. Missing Features & Modules](#4-missing-features--modules)
-- [5. Performance Issues](#5-performance-issues)
-- [6. Missing Admin Pages / Settings](#6-missing-admin-pages--settings)
-- [7. Code Cleanup Needed](#7-code-cleanup-needed)
-- [8. Opportunities & Nice-to-Haves](#8-opportunities--nice-to-haves)
-- [9. Summary Priority Matrix](#9-summary-priority-matrix)
-- [10. Architectural Recommendation](#10-architectural-recommendation)
-
----
-
-## 1. Bugs & Defects
-
-### 1.1 Critical Bugs
-
-| # | Location | Issue | Detail |
-|---|----------|-------|--------|
-| 1 | `includes/Customer.php` ~line 172 `update()` | **Undefined variable — fatal error** | Method builds `$insert_data` and `$where`, but the `$wpdb->update()` call references undefined `$table_name` and `$new_args`. Every customer update will throw a PHP fatal error. |
-| 2 | `includes/Order.php` `delete()` | **Undefined `$id` variable** | Uses `$id` in the `$wpdb->delete()` where clause instead of the method parameter `$order_id`. Every order deletion call will fail. |
-| 3 | `includes/Order.php` `formipay_bulk_delete_order()` | **Iterates wrong variable** | Loops `foreach($ids as $id)` but calls `$this->delete($order_id)` — `$order_id` comes from the outer scope (nonce check), not the loop variable. Bulk delete will repeatedly delete the same (or zero) orders. |
-| 4 | `includes/Notification/Email.php` `send_email()` | **Wrong class reference — fatal error** | Calls `\Formipay_Notification::update_notification_data()` — this class does not exist. Should use `parent::update_notification_data()`. Email status tracking will crash. |
-| 5 | `includes/Integration/Paypal.php` `auto_cancel_order_on_timeout()` | **Undefined `Order` class** | Calls `Order::update(...)` but unlike `BankTransfer.php`, `Paypal.php` does not import `use Formipay\Order as Order`. This will throw a class-not-found error on timeout. |
-| 6 | `includes/Integration/Paypal.php` `process_payment()` | **Undefined `self::paypal_settings`** | The PayPal class never declares a `$paypal_settings` property. Accessing it leads to undefined property notices and broken payment flow. |
-
-### 1.2 Moderate Bugs
-
-| # | Location | Issue |
-|---|----------|-------|
-| 7 | `includes/Payment/BankTransfer.php` `check_unique_code()` | Uses `MAX(id)+1` for unique codes — predictable and subject to race conditions. Two concurrent orders can receive the same unique code. |
-| 8 | `includes/Payment/BankTransfer.php` `add_unique_code_details()` | Calls `$this->check_unique_code()` **three times** per request (once for `'item'`, once for `'amount'`, once for `'subtotal'`). Each call queries the DB independently and may return different values. Displayed unique code may not match the stored one. |
-| 9 | `admin/functions.php` `formipay_field_type_collection()` | Color field label says `'Number'` instead of `'Color'` — copy-paste error. |
-| 10 | `includes/Render.php` field rendering | No `default` fallback rendered when field type doesn't match any case in the switch — unknown field types silently produce no output. |
-| 11 | `includes/Order.php` `render_form_submit()` | `$field_value` is sometimes an array (from checkbox fields) but the code assumes string context. Nested `if(is_array($field_value))` only handles one level. |
-| 12 | `includes/Thankyou.php` `check_parse_query()` vs `formipay_get_order()` | Old cookie-based URL (`base64_encode`) co-exists with new Token-based validation. `formipay_get_order()` generates the old-format URL for the `thankyou` link, but the new Token system expects a different format. Inconsistent access path. |
-
----
-
-## 2. Security Concerns
-
-| # | Severity | Location | Issue |
-|---|----------|----------|-------|
-| 1 | **High** | `includes/Order.php` `retrieve_form_data()` | Cookie `fp_access` uses `maybe_serialize()` — **PHP object injection** risk if an attacker can manipulate cookie values. Should use `json_encode()`/`json_decode()`. |
-| 2 | **High** | `includes/Thankyou.php` `set_endpoint()` | Calls `flush_rewrite_rules()` on **every `init`** hook — extremely expensive and causes race conditions under concurrent load. Should only flush on activation/deactivation or settings save. |
-| 3 | **High** | `includes/Payment/Payment.php` `set_endpoint()` | Same `flush_rewrite_rules()` issue — fires on every page load. |
-| 4 | **Medium** | `includes/Order.php` `retrieve_form_data()` | Thank-you URL uses `base64_encode(form_id:::order_id:::session_id)` — base64 is not encryption. Sequential order IDs can be guessed. The `Token` class provides proper tokens but the old path remains active. |
-| 5 | **Medium** | `includes/LicenseAPI.php` | All REST endpoints use `permission_callback => '__return_true'`. The `revoke` endpoint has a stub permission callback that always returns `true`. Anyone can revoke or manipulate licenses without authentication. |
-| 6 | **Medium** | `includes/Integration/Paypal.php` `webhook_endpoint()` | No PayPal webhook signature verification. An attacker could forge webhook calls to mark orders as paid without actual payment. |
-| 7 | **Medium** | `includes/Customer.php` `formipay_tabledata_customers()` | No nonce check (`check_ajax_referer`). Any authenticated user can dump all customer data via direct AJAX call. |
-| 8 | **Low** | `includes/Render.php` | Inline `<style>` blocks injected into `<body>` — Content Security Policy (CSP) headers may block these. Should use `wp_add_inline_style()`. |
-| 9 | **Low** | `includes/Token.php` `validate()` | Uses MySQL `NOW()` for expiry comparison while token generation uses PHP timezone. Server timezone mismatch could cause valid tokens to be rejected or expired tokens to pass. |
-| 10 | **Medium** | `includes/Render.php` (default timezone) | Hardcoded default timezone `'Asia/Jakarta'` in Render.php instead of using `wp_timezone_string()`. |
-
----
-
-## 3. Architecture & Code Quality Issues
-
-| # | Issue | Detail |
-|---|-------|--------|
-| 1 | **No Composer dependency management** | Custom `spl_autoload_register` works but there's no `composer.json`. The `vendor/` folder contains manually copied libraries with no version locking, no autoload optimization, and no security update path. |
-| 2 | **SingletonTrait incomplete** | `__wakeup()` is `public` (should be `private`). Missing `__sleep()` to prevent serialization-based singleton bypass. |
-| 3 | **No database migration system** | `dbDelta()` runs on every `init` for all custom tables. No version tracking for schema changes. Adding columns later requires manual SQL or relying on `dbDelta` diff detection. |
-| 4 | **Inconsistent class instantiation** | Some classes use Singleton trait, others (`Token`) don't. `new \Formipay\Token` in `Init.php` bypasses the singleton pattern entirely. |
-| 5 | **Global functions vs OOP** | `admin/functions.php` has ~40 global functions (e.g., `formipay_price_format`, `formipay_get_order`, `formipay_currency_array`). Should be in utility/service classes for testability and namespace hygiene. |
-| 6 | **Insufficient capability checks** | Several admin-ajax handlers verify nonce but don't check `current_user_can('manage_options')`. Any authenticated user (even subscriber) with a valid nonce could potentially access admin functions. |
-| 7 | **Hardcoded English strings** | Many UI strings in JS-localized data and some PHP output are hardcoded in English without `__()` translation functions. |
-| 8 | **No proper REST API** | Form submission goes through `admin-ajax.php`. A proper REST API endpoint would be more cache-friendly, better structured, and follow WordPress standards. |
-| 9 | **Static version constant** | `FORMIPAY_VERSION` is hardcoded to `'1.0.0'` and never updated programmatically. All cache-busting relies on this value. |
-| 10 | **Backup file in production** | `includes/Integration/Paypal.phpbak` exists — should be removed from production codebase. |
-| 11 | **No deactivation/uninstall cleanup** | No `uninstall.php` or deactivation hook to clean up custom tables, scheduled events, or options. |
-| 12 | **No `.distignore` or build process** | No `.distignore` file for WordPress.org packaging. Development files would be shipped to production. |
-
----
-
-## 4. Missing Features & Modules
-
-| # | Module / Area | Status | Priority |
-|---|---------------|--------|----------|
-| 1 | **ExchangeRateAPI** | File exists but is **completely empty** — just an empty class extending Payment | 🔴 High |
-| 2 | **License API implementation** | All 4 REST endpoints (`verify`, `activate`, `deactivate`, `revoke`) are **stubs returning hardcoded `ok: true`** | 🔴 High |
-| 3 | **Subscription / Recurring payments** | Listed in `readme.txt` as "Planned" but no code exists | 🟡 Medium |
-| 4 | **Donation forms** | `formipay_is_donation()` and `donation_config` filter exist, but no donation-specific frontend UI (no "pay what you want" input, no suggested amounts) | 🟡 Medium |
-| 5 | **Inventory / Stock management** | Product has `stock_config` in settings but no stock decrement on order, no stock validation before submission, no "out of stock" frontend message | 🟡 Medium |
-| 6 | **Product variations on frontend** | Variation config exists in Product admin, but `Order.php` doesn't process variation selections — no variation dropdown rendered on frontend | 🟡 Medium |
-| 7 | **Tax system** | No tax calculation anywhere. Products have price, shipping has fees, but there is no tax engine. Essential for physical product sales in most jurisdictions. | 🟡 Medium |
-| 8 | **Customer portal / dashboard** | Referenced in readme and `single-formipay.php` template exists, but no customer-facing order history page, no login/registration flow, no "My Orders" view | 🟡 Medium |
-| 9 | **Refund system** | `refunded` status exists in status list, but no refund workflow, no partial refund, no payment reversal integration | 🟡 Medium |
-| 10 | **Form analytics / reporting** | No form view tracking, no conversion rate calculation, no abandonment tracking, no dashboard charts | 🟢 Low |
-| 11 | **Export / Import** | No CSV/Excel export for orders, customers, or products. No bulk import for products. | 🟢 Low |
-| 12 | **Outgoing webhook system** | No way to notify external systems (Zapier, Slack, custom endpoints) on order events | 🟢 Low |
-| 13 | **Form template library** | No pre-built form templates for common use cases (simple product, donation, registration) | 🟢 Low |
-| 14 | **Multi-step form navigation** | Page break config exists in admin, step indicators render, but no frontend JS to actually navigate between steps | 🟡 Medium |
-| 15 | **Email log admin page** | `formipay_notification_log` table exists but there's no admin page to view email history, resend failed emails, or debug delivery | 🟡 Medium |
-
----
-
-## 5. Performance Issues
-
-| # | Location | Issue |
-|---|----------|-------|
-| 1 | `includes/Thankyou.php` `set_endpoint()` | `flush_rewrite_rules()` on **every page load** — one of the most expensive WordPress operations. Should only run on plugin activation and settings save. |
-| 2 | `includes/Payment/Payment.php` `set_endpoint()` | Same `flush_rewrite_rules()` issue. |
-| 3 | `includes/Order.php` `formipay_tabledata_orders()` | Runs **two separate full-table queries** — one fetching ALL orders just to count statuses (`O(n)` in memory), plus the paginated query. Should use `COUNT(*) ... GROUP BY status` for the report. |
-| 4 | `includes/Customer.php` `formipay_tabledata_customers()` | **No pagination** — loads ALL customers into memory and returns them. Will crash or timeout with large datasets. |
-| 5 | `admin/functions.php` `formipay_currency_array()` | `file_get_contents()` of `currencies.json` on **every call** with no caching. Should use a static variable or WordPress transient. |
-| 6 | `admin/functions.php` `formipay_country_array()` | Same issue — reads JSON file from disk on every function call. |
-| 7 | `includes/Init.php` `default_config()` | The entire ~200-line default config array is loaded on every `plugin_loaded` action. Should be lazy-loaded or only when saving defaults. |
-| 8 | `includes/Render.php` | All form CSS is output as inline `<style>` in the HTML `<body>` — not cacheable by browsers, duplicated on every page with the form shortcode. |
-| 9 | `includes/Token.php` `create_db()` | Runs `dbDelta()` on every `init` — redundant after first install. |
-| 10 | `includes/Customer.php` `create_db()` | Same `dbDelta()` on every `init`. |
-| 11 | `includes/Order.php` `create_db()` | Same issue. |
-
----
-
-## 6. Missing Admin Pages / Settings
-
-| # | Missing Page | Description |
-|---|-------------|-------------|
-| 1 | **Notification Log** | Table `formipay_notification_log` exists but there's no admin page to view email history, resend failed emails, or debug delivery issues. |
-| 2 | **License detail/edit** | License list page exists but there's no detail or edit view (can't manually activate, revoke, or extend a license). |
-| 3 | **Dashboard / Analytics** | No overview dashboard with form views, submissions, revenue charts, or conversion rates. |
-| 4 | **System Status / Tools** | No page to check PayPal connectivity, email delivery test, database health, or scheduled events. |
-| 5 | **Customer order history** | Customer detail page exists but doesn't show linked order history or purchase timeline. |
-| 6 | **Import/Export tools** | No admin UI to bulk import products or export order/customer data. |
-
----
-
-## 7. Code Cleanup Needed
-
-| # | Item | Detail |
-|---|------|--------|
-| 1 | **Commented-out code** | `Init.php` has commented-out PayPal init, taxonomy, and defer-attribute filter. Should be removed or tracked as TODOs. |
-| 2 | **`Paypal.phpbak`** | Backup file in production directory `includes/Integration/Paypal.phpbak` — must be deleted. |
-| 3 | **Dead code in `Notification.php`** | `$last_notification_field = count($notification_fields) - 1; $notification_fields[$last_notification_field]['group'] = 'ended'` — uses numeric array index instead of the key name, which breaks if filter order changes. |
-| 4 | **Inconsistent nonce naming** | Different pages use different nonce names: `formipay-order-details`, `formipay-admin-coupon-page`, `formipay-admin-licenses`, `formipay-admin-product-page`, `formipay-admin-access-nonce`, `formipay-form-editor`, `formipay-thankyou-nonce`. Should follow a single convention. |
-| 5 | **Deprecated `FILTER_SANITIZE_STRING`** | Used in `Customer.php` `customers_page()` — deprecated since PHP 8.1. Should use `FILTER_SANITIZE_SPECIAL_CHARS` or `sanitize_text_field()`. |
-| 6 | **Mixed indentation** | Some files use tabs, some spaces, some mix both within the same file. |
-| 7 | **Missing PHPDoc blocks** | Most methods have no docblocks. Return types are rarely declared. Makes IDE support and static analysis poor. |
-| 8 | **No `.editorconfig`** | No project-wide formatting standard file. |
-
----
-
-## 8. Opportunities & Nice-to-Haves
-
-| # | Opportunity | Business Impact |
-|---|------------|-----------------|
-| 1 | **Composer package management** | Replace manual vendor copies with proper Composer dependencies for auto-updates, security patches, and smaller distribution |
-| 2 | **React-based form builder** | Replace the partial Vue editor canvas with a full React drag-and-drop form builder for better UX and extensibility |
-| 3 | **Webhook/API integrations** | Zapier, Make (Integromat), Slack notifications — extend the notification system for 3rd-party automation |
-| 4 | **Stripe payment gateway** | Most requested gateway after PayPal. The abstract `Payment` class makes it architecturally straightforward to add |
-| 5 | **PDF invoice generation** | Auto-generate PDF invoices/receipts for orders — high-value feature for business users |
-| 6 | **Google Analytics / Facebook Pixel** | E-commerce event tracking (`purchase`, `add_to_cart`) for conversion optimization |
-| 7 | **Multi-vendor / marketplace** | Architecture already supports per-form products — extend to multi-vendor marketplace |
-| 8 | **Form A/B testing** | Duplicate form feature already exists — add conversion tracking and statistical comparison |
-| 9 | **Cart / checkout recovery** | Store partial submissions in `localStorage` + send recovery emails for abandoned forms |
-| 10 | **Full localization** | Generate `.pot` file, translate to top 10 languages. Currently only partially translatable |
-| 11 | **WP-CLI commands** | `wp formipay order list`, `wp formipay product create`, `wp formipay license verify`, etc. |
-| 12 | **Headless / REST API** | Full REST API for headless WordPress + Next.js / Nuxt frontends |
-| 13 | **Gutenberg block** | Register a `formipay/form` block for native Gutenberg integration instead of shortcode-only |
-| 14 | **Unit & integration tests** | Zero test coverage currently. Critical for a payment plugin handling money |
-| 15 | **Rate limiting on public endpoints** | `retrieve_form_data` and `check_coupon_code` have no rate limiting. Vulnerable to brute-force and spam |
-
----
-
-## 9. Summary Priority Matrix
-
-| Priority | Count | Key Items |
-|----------|-------|-----------|
-| 🔴 **Critical (fix immediately)** | 6 | Customer update fatal error, Order delete undefined variable, Bulk delete wrong variable, Email send wrong class, flush_rewrite_rules performance, License API stubs |
-| 🟡 **High (next sprint)** | 12 | Unique code race condition, PayPal webhook verification, ExchangeRateAPI empty class, Stock management, Donation UI, Notification log page, Customer portal, Tax system |
-| 🟢 **Medium (backlog)** | 15 | Refund workflow, Analytics dashboard, Export/Import, Form templates, Gutenber block, Localization, Rate limiting |
-| ⚪ **Nice-to-have (roadmap)** | 12 | WP-CLI, A/B testing, Headless API, PDF invoices, Multi-vendor, Cart recovery, CI/CD pipeline |
-
----
-
-## 10. Architectural Recommendation
-
-> See `RECOMMENDATION.md` for the detailed technical recommendation.
-
----
-
-*End of audit report.*
diff --git a/MIGRATION_STRATEGY.md b/MIGRATION_STRATEGY.md
deleted file mode 100644
index 331eb9fb5..000000000
--- a/MIGRATION_STRATEGY.md
+++ /dev/null
@@ -1,282 +0,0 @@
-# Formipay — Migration Strategy
-
-**Date:** April 18, 2026 (Updated)
-**Context:** Phase 2 — React Admin Foundation
-
----
-
-## Overview
-
-This document explains how to approach migrating existing Formipay admin interfaces to React while **ensuring zero feature loss**.
-
-**Key Principle:** **Coexistence until Feature Parity** — New React versions must match or exceed old functionality before deprecating old code. No "delete and replace" without validation.
-
----
-
-## Existing Technology Inventory
-
-| Technology | Location | Purpose | Feature Count | Migration Priority |
-|-------------|----------|---------|---------------|-------------------|
-| **WPCFTO Framework** | `vendor/` | Settings form builder | N/A | Low (replaced by React settings) |
-| **Grid.js** | `admin/assets/js/page-*.js` | All admin tables | ~20 features per page | **HIGH** (current gap) |
-| **SweetAlert2** | `vendor/SweetAlert2/` | Modal dialogs | N/A | None (keep using) |
-| **Custom Vue 2 App** | `admin/assets/js/admin-product-editor.js` | Product variation pricing | ~7 features | Medium |
-| **jQuery** | Core WP dependency | DOM manipulation | N/A | Phase out gradually |
-
----
-
-## Critical: Grid.js Migration Strategy
-
-### Current Grid.js Features (Must Preserve)
-
-**Every admin page with Grid.js has these features:**
-
-| Feature | Forms | Coupons | Access | Orders | Products |
-|---------|-------|--------|-------|--------|----------|
-| Checkbox column + "Select All" | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Bulk delete button | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Inline row actions (hover) | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Status filter tabs (All/Published/Draft) | ✅ | ✅ | ✅ | ❌ | ✅ |
-| Search input | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Sort dropdown | ✅ | ✅ | ✅ | ❌ | ✅ |
-| Order (ASC/DESC) | ✅ | ✅ | ✅ | ❌ | ✅ |
-| Server-side pagination | ✅ | ✅ | ✅ | ✅ | ✅ |
-| "Add New" modal (SweetAlert2) | ✅ | ✅ | ✅ | ❌ | ✅ |
-| Inline delete action | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Inline duplicate action | ✅ | ✅ | ✅ | ❌ | ✅ |
-| Shortcode copy button | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Multi-currency display | ❌ | ✅ | ❌ | ❌ | ✅ |
-
-**Total: ~20 table features per page**
-
-### Migration Approach: Coexistence
-
-**DO NOT:** Delete old Grid.js code until React replacement is feature-complete
-
-**DO:** Use query param or feature flag to run both versions side-by-side
-
-```
-Phase 1: Coexistence (Required)
-┌─────────────────────────────────────────────────────────┐
-│  Formipay Admin                                           │
-├─────────────────────────────────────────────────────────┤
-│  Old: Grid.js Tables → Fully functional                    │
-│  New: React Tables → Under development, feature-incomplete  │
-│                                                          │
-│  Access: ?old=1 → Grid.js | ?old=0 → React (default when ready) │
-└─────────────────────────────────────────────────────────┘
-```
-
-### Implementation Steps
-
-**Step 1: Feature Parity Checklist**
-
-Create `MIGRATION_CHECKLIST.md` with per-page feature requirements (see template below).
-
-**Step 2: Dual-Mode Rendering**
-
-In PHP page callback, check for query param:
-
-```php
-public function formipay_form() {
-    $use_react = isset($_GET['react']) || get_option('formipay_use_react_admin', false);
-    
-    if ($use_react) {
-        \Formipay\Admin\ReactAdmin::render_mount_point('forms');
-    } else {
-        include_once FORMIPAY_PATH . 'admin/page-forms.php';
-    }
-}
-```
-
-**Step 3: Feature Flag for Default**
-
-```php
-// In settings or option
-public function use_react_admin() {
-    return get_option('formipay_use_react_admin', false);
-}
-```
-
-**Step 4: Toggle Link in Admin**
-
-```php
-// Add to admin footer or menu bar
-<?php if (!get_option('formipay_use_react_admin')) : ?>
-<a href="<?php echo admin_url('admin.php?page=formipay&react=1'); ?>">
-    Try React Admin (Beta)
-</a>
-<?php else: ?>
-<a href="<?php echo admin_url('admin.php?page=formipay&react=0'); ?>">
-    Use Classic Admin
-</a>
-<?php endif; ?>
-```
-
-### Testing Protocol
-
-Before setting `use_react_admin` to true as default:
-
-1. **Manual Feature Testing**: Go through checklist item by item
-2. **Regression Testing**: Old Grid.js version still works
-3. **Data Compatibility**: Both versions read/write same data format
-4. **Performance**: React version not significantly slower
-5. **Browser Testing**: Test in Chrome, Firefox, Safari
-
-**Only when ALL checkboxes pass → Enable React by default**
-
----
-
-## React Component Library Strategy
-
-### Approved Libraries
-
-| Library | Purpose | Why |
-|---------|---------|-----|
-| **@wordpress/components** | UI primitives (Button, Modal, SelectControl, TextControl) | Native WP styling, already bundled |
-| **@tanstack/react-table** (v8) | Headless table engine | Flexible, performant, React 18 compatible |
-| **SweetAlert2** (existing) | Modals, confirmations, toasts | Already in use, keep as-is |
-| **@wordpress/icons** | Icons | Already bundled, correct WP styling |
-
-### Libraries to AVOID
-
-| Library | Reason to Avoid |
-|---------|-----------------|
-| **shadcn/ui** | Wrong styling (Tailwind vs WP), requires Tailwind setup |
-| **Material UI (@mui/x-data-grid)** | Wrong styling, 100KB+ bundle, overkill |
-| **react-table** (v7) | Deprecated, use @tanstack/react-table |
-| **react-data-table** | Heavy bundle, opinionated styling |
-
-### Building the Table Component
-
-```jsx
-// Use @tanstack/react-table for the engine
-import { useReactTable } from '@tanstack/react-table';
-
-// Use @wordpress/components for UI
-import { Modal, Button, CheckboxControl } from '@wordpress/components';
-
-// Style with WordPress classes
-<table className="wp-list-table widefat fixed striped">
-```
-
----
-
-## Data Compatibility Requirements
-
-### AJAX Endpoints (Must Preserve)
-
-| Endpoint | Request | Response Format |
-|----------|---------|------------------|
-| `formipay-tabledata-forms` | GET + params | `{results, total, posts_report}` |
-| `formipay-create-form-post` | POST + title | `{success, data: {edit_post_url}}` |
-| `formipay-delete-form` | POST + id | `{success, data: {title, message, icon}}` |
-| `formipay-duplicate-form` | POST + id | `{success, data: {title, message, icon}}` |
-| `formipay-bulk-delete-form` | POST + ids[] | `{success, data: {title, message, icon}}` |
-| `get_product_variables` | GET + post_id | Variation data object |
-| `formipay-tabledata-coupons` | GET + params | `{results, total, posts_report}` |
-| `formipay-tabledata-access-items` | GET + params | `{results, total, posts_report}` |
-| `formipay-tabledata-orders` | GET + params | `{results, total, posts_report}` |
-| `formipay-tabledata-customers` | GET + params | `{results, total, posts_report}` |
-
-**Critical:** Response formats must remain identical for compatibility!
-
----
-
-## Rollback Plan
-
-If React version has issues:
-
-1. **Immediate:** Set `formipay_use_react_admin` to false
-2. **Users see:** Classic Grid.js version (fully functional)
-3. **Fix React:** Debug and fix in development
-4. **Retest:** Go through checklist again
-5. **Re-enable:** Set flag back to true
-
-**Critical:** Never deploy without working fallback!
-
----
-
-## Migration Checklist Template
-
-Copy this template for each page migration:
-
-### [Page Name] Migration Checklist
-
-#### Table Core Features
-- [ ] Data loads and displays correctly
-- [ ] Loading spinner shown during fetch
-- [ ] Empty state shown when no data
-- [ ] Error state handled gracefully
-
-#### Selection Features
-- [ ] Checkbox column renders
-- [ ] "Select All" checkbox works
-- [ ] Individual row checkboxes work
-- [ ] Checkboxes persist across page changes
-- [ ] Bulk delete button appears when rows selected
-- [ ] Bulk delete confirmation modal
-- [ ] Bulk delete refreshes table
-
-#### Row Actions
-- [ ] Hover shows action links
-- [ ] Edit action navigates correctly
-- [ ] Delete action shows confirmation
-- [ ] Delete action removes row and refreshes
-- [ ] Duplicate action shows confirmation
-- [ ] Duplicate action adds new row and refreshes
-
-#### Filtering & Sorting
-- [ ] Status filter tabs work
-- [ ] Status counts display correctly
-- [ ] Active filter highlighted
-- [ ] Search input filters results
-- [ ] Search debounce (don't spam server)
-- [ ] Sort dropdown works
-- [ ] Order toggle works
-- [ ] Combined filters work (search + status + sort)
-
-#### Pagination
-- [ ] Pagination controls display
-- [ ] Page numbers correct
-- [ ] Next/Previous buttons work
-- [ ] Limit per page respected
-- [ ] Total count accurate
-
-#### Create Features
-- [ ] "Add New" button visible
-- [ ] Modal/dialog opens on click
-- [ ] Modal has required fields
-- [ ] Modal validation works
-- [ ] Create action succeeds
-- [ ] Post creation redirects to edit
-- [ ] Error handling in modal
-
-#### UX Details
-- [ ] Row hover effects work
-- [ ] Selected row highlighting
-- [ ] Toast notifications for actions
-- [ ] Confirmation dialogs for destructive actions
-- [ ] Keyboard accessibility (Enter, Escape)
-- [ ] Loading states during actions
-
-#### Data Compatibility
-- [ ] Same AJAX endpoints as old version
-- [ ] Same request format
-- [ ] Same response format handling
-- [ ] Hidden inputs updated (if applicable)
-- [ ] WordPress nonces handled correctly
-
----
-
-## Notes
-
-- **Grid.js Library:** ~20KB, well-tested, handles server-side pagination well
-- **@tanstack/react-table:** ~9KB, headless, requires more setup but more flexible
-- **jQuery:** Still used by WordPress core, will remain for now
-- **SweetAlert2:** Keep using, integrates well with React
-- **Migration is NOT a race:** Take time to get it right
-
----
-
-*End of Migration Strategy.*
diff --git a/TASKLIST.md b/TASKLIST.md
deleted file mode 100644
index c9c46edad..000000000
--- a/TASKLIST.md
+++ /dev/null
@@ -1,193 +0,0 @@
-# Formipay — Implementation Task List
-
-**Last Updated:** April 18, 2026 — Phase 1 Complete, Phase 2 Complete
-**Reference:** PRD.md, FINDINGS.md, RECOMMENDATION.md
-
----
-
-## Phase 1 — Critical Fixes & Stabilization
-
-### Week 1: Critical Bug Fixes ✅ COMPLETE
-
-- [x] **F1.1** Fix `Customer::update()` fatal error — define `$table_name` and fix `$new_args` reference
-  - `includes/Customer.php` ~line 172
-- [x] **F1.2** Fix `Order::delete()` — change `$id` to `$order_id` in `$wpdb->delete()` where clause
-  - `includes/Order.php`
-- [x] **F1.3** Fix `Order::formipay_bulk_delete_order()` — use loop variable `$id` instead of outer `$order_id`
-  - `includes/Order.php`
-- [x] **F1.4** Fix `Email::send_email()` — change `\Formipay_Notification::` to `parent::`
-  - `includes/Notification/Email.php`
-- [x] **F1.5** Fix `Paypal::auto_cancel_order_on_timeout()` — add `use Formipay\Order as Order` import
-  - `includes/Integration/Paypal.php`
-- [x] **F1.6** Fix `Paypal::paypal_settings` — declare property or load from config
-  - `includes/Integration/Paypal.php`
-- [x] **F1.7** Fix `BankTransfer::add_unique_code_details()` — call `check_unique_code()` once, reuse result
-  - `includes/Payment/BankTransfer.php`
-- [x] **F1.8** Fix color field label "Number" → "Color"
-  - `admin/functions.php` `formipay_field_type_collection()`
-- [x] **F1.9** Add `check_ajax_referer` nonce check to `Customer::formipay_tabledata_customers()`
-  - `includes/Customer.php`
-
-### Week 2: Performance & Security ✅ COMPLETE
-
-- [x] **F1.10** Replace `maybe_serialize()` in cookie handling with `json_encode()`/`json_decode()`
-  - `includes/Order.php` `retrieve_form_data()`
-  - `includes/Thankyou.php` `get_cookie()`, `request_access_link()`
-- [x] **F1.11** Move `flush_rewrite_rules()` from `init` to activation hook
-  - `includes/Thankyou.php` `set_endpoint()`
-  - `includes/Payment/Payment.php` `set_endpoint()`
-  - `formipay.php` (add register_activation_hook)
-- [x] **F1.12** Add PayPal webhook signature verification
-  - `includes/Integration/Paypal.php` `webhook_endpoint()`
-- [x] **F1.13** Cache JSON file reads in static variables
-  - `admin/functions.php` `formipay_currency_array()`
-  - `admin/functions.php` `formipay_country_array()`
-  - `admin/functions.php` `formipay_get_flag_by_currency()`
-- [x] **F1.14** Add server-side pagination to `Customer::formipay_tabledata_customers()`
-  - `includes/Customer.php`
-- [x] **F1.15** Optimize `Order::formipay_tabledata_orders()` — replace two queries with `COUNT(*) GROUP BY status`
-  - `includes/Order.php`
-- [x] **F1.16** Delete backup file `includes/Integration/Paypal.phpbak`
-- [x] **F1.17** Create `uninstall.php` — clean up options, custom tables, scheduled events
-  - `uninstall.php` (new file)
-- [x] **F1.18** Add capability checks (`current_user_can('manage_options')`) to admin-ajax handlers
-- [x] **F1.19** Fix timezone hardcode — replace `'Asia/Jakarta'` with `wp_timezone_string()`
-  - `includes/Render.php`
-
----
-
-## Phase 2 — React Admin Foundation (Weeks 3-6 ✅ COMPLETE)
-
-> ⚠️ **IMPORTANT:** Read `MIGRATION_STRATEGY.md` before starting Phase 2
-> - Explains Vue → React coexistence strategy
-> - Documents custom Vue app in `admin-product-editor.js` that needs recreation
-> - Provides data compatibility requirements and testing strategy
-
-> **See `MIGRATION_STRATEGY.md`** for detailed Vue → React migration approach
-
-### Week 3: Build Pipeline ✅ COMPLETE
-
-- [x] **F2.1** Initialize `package.json` with `@wordpress/scripts`
-- [x] **F2.2** Create `webpack.config.js` extending wp-scripts
-- [x] **F2.3** Set up `src/admin/` directory structure
-- [x] **F2.4** Create API client (`src/admin/api/client.js`) with nonce handling
-- [x] **F2.5** Create admin page shell component (sidebar + routing)
-- [x] **F2.6** Register admin menu pages in PHP that render React mount points
-
-### Week 4: Form Builder ✅ COMPLETE
-
-- [x] **F2.7** Build field palette component (drag-and-drop source)
-- [x] **F2.8** Build form canvas component (drop target)
-- [x] **F2.9** Build field settings panel
-- [x] **F2.10** Build live preview renderer
-- [x] **F2.11** Connect to existing PHP save/load endpoints
-- [x] **F2.12** Replace Vue/Classic Editor metabox with React form builder
-
-### Week 5: Order Management & Dashboard ✅ COMPLETE
-
-- [x] **F2.13** Build order list page with filters (status, date, search)
-- [x] **F2.14** Build order detail view (replace Handlebars templates)
-- [x] **F2.15** Build status change workflow with timeline
-- [x] **F2.16** Build analytics dashboard (order count, revenue, charts)
-- [x] **F2.17** Build notification log viewer
-
-### Week 6: Settings & Editors ✅ COMPLETE
-
-- [x] **F2.18** Build global settings page (replace WPCFTO)
-- [x] **F2.19** Build product editor page (includes variation pricing table)
-  - **See `MIGRATION_STRATEGY.md`** — custom Vue app in `admin-product-editor.js` must be recreated in React
-  - Features: multi-currency flat/expanded pricing, attribute repeater sync, validation
-- [x] **F2.20** Build coupon editor page
-- [x] **F2.21** Build access items manager
-- [x] **F2.22** Build license management page
-- [x] **F2.23** Remove/deprecate Vue admin code
-  - After all React admin pages are working, remove `admin/assets/vue/` if exists
-  - Remove WPCFTO framework dependency after F2.18
-  - Remove Vue.js from enqueued scripts after F2.19 complete
-
----
-
-## Phase 3 — Frontend Enhancements
-
-### Week 7-8: React Island Architecture
-
-- [ ] **F3.1** Add "Render Mode" setting to form admin (SSR / React)
-- [ ] **F3.2** Update `Render.php` — output `<div>` mount point when React mode selected
-- [ ] **F3.3** Build React form renderer component (`src/frontend/widgets/FormRenderer.jsx`)
-- [ ] **F3.4** Implement island hydration — React attaches to SSR HTML
-- [ ] **F3.5** Build multi-step form navigation component
-- [ ] **F3.6** Add real-time field validation in React mode
-
-### Week 9: Gutenberg Block
-
-- [ ] **F3.7** Create `block.json` for `formipay/form`
-- [ ] **F3.8** Build `edit.jsx` — form selector + live preview in editor
-- [ ] **F3.9** Build `render.php` — server-side rendering for frontend
-- [ ] **F3.10** Register block in PHP
-- [ ] **F3.11** Test block in Gutenberg editor
-
-### Week 10: Customer Portal
-
-- [ ] **F3.12** Build customer order history page (React)
-- [ ] **F3.13** Build order detail / download access page (React)
-- [ ] **F3.14** Build access link request form (React)
-- [ ] **F3.15** Integrate with WordPress user accounts
-- [ ] **F3.16** Register `[formipay_my_orders]` shortcode
-
----
-
-## Phase 4 — Missing Features
-
-### Week 11-12: Payment & Commerce
-
-- [ ] **F4.1** Implement `ExchangeRateAPI` — fetch rates, cache, convert
-  - `includes/Payment/ExchangeRateAPI.php`
-- [ ] **F4.2** Implement License API endpoints (verify, activate, deactivate, revoke)
-  - `includes/LicenseAPI.php`
-- [ ] **F4.3** Add Stripe payment gateway
-  - `includes/Integration/Stripe.php` (new)
-- [ ] **F4.4** Add tax calculation engine
-  - `includes/Tax.php` (new)
-- [ ] **F4.5** Add product variations on frontend (render dropdown, process selection)
-  - `includes/Render.php`, `includes/Order.php`
-
-### Week 13-14: Stock & Shipping
-
-- [ ] **F4.6** Implement stock management — decrement on order, validate before submit
-  - `includes/Product.php` (new or extend)
-- [ ] **F4.7** Add "out of stock" frontend messaging
-  - `includes/Render.php`
-- [ ] **F4.8** Add refund workflow (status change + payment reversal)
-  - `includes/Order.php`, gateway integrations
-
-### Week 15-16: Advanced Features
-
-- [ ] **F4.9** Build donation form mode (pay-what-you-want, suggested amounts)
-  - `includes/Render.php`
-- [ ] **F4.10** Add PDF invoice generation
-  - `includes/Invoice.php` (new)
-- [ ] **F4.11** Add CSV export for orders, customers, products
-  - Admin pages
-- [ ] **F4.12** Add outgoing webhook system
-  - `includes/Webhook.php` (new)
-- [ ] **F4.13** Add rate limiting on public endpoints
-  - `includes/Order.php`, `includes/Coupon.php`
-- [ ] **F4.14** Wrap all hardcoded English strings in `__()` translation functions
-  - All PHP + JS files
-- [ ] **F4.15** Generate `.pot` file for translators
-- [ ] **F4.16** Add form analytics (view tracking, conversion rate)
-  - `includes/Analytics.php` (new)
-
----
-
-## Definition of Done (per task)
-
-- [x] Code compiles without errors
-- [x] No PHP warnings/notices in debug mode
-- [x] Manual test passes for the specific fix/feature
-- [x] No regression in existing functionality
-- [x] Security-sensitive changes reviewed
-
----
-
-*End of task list.*
diff --git a/includes/Access.php b/includes/Access.php
index 20bd61b86..00a7f413e 100644
--- a/includes/Access.php
+++ b/includes/Access.php
@@ -24,6 +24,11 @@ class Access {
         add_filter( 'formipay/access-config',               [$this, 'source_config'] );
         add_filter( 'formipay/access-config',               [$this, 'details_config'] );
 
+        add_action( 'add_meta_boxes',                       [$this, 'add_react_metabox'] );
+        add_action( 'admin_footer-post.php',                [$this, 'render_react_metabox_template'] );
+        add_action( 'admin_footer-post-new.php',            [$this, 'render_react_metabox_template'] );
+        add_action( 'save_post',                           [$this, 'save_access_metabox_fields'], 10, 2 );
+
         // Admin Page
         add_action( 'wp_ajax_formipay_access_items_get_products',   [$this, 'formipay_access_items_get_products'] );
         add_action( 'wp_ajax_formipay-tabledata-access-items',      [$this, 'formipay_tabledata_access_items'] );
@@ -90,82 +95,77 @@ class Access {
 
     public function enqueue_admin() {
         // Assets now handled by ReactAdmin class
-        return;
+    }
 
-        $screen = get_current_screen();
+    public function add_react_metabox() {
+        add_meta_box(
+            'formipay_access_settings',
+            __('Settings', 'formipay'),
+            [$this, 'render_react_metabox'],
+            'formipay-access',
+            'normal',
+            'high'
+        );
+    }
 
-        // Check that we are on the 'Checker' post editor screen
-        if ( $screen->post_type === 'formipay-access' && $screen->base === 'post' ) {
-            
-            wp_enqueue_style( 'formipay-admin-pages', FORMIPAY_URL . 'admin/assets/css/admin-pages.css', [], FORMIPAY_VERSION );
-            wp_enqueue_style( 'sweetalert2', FORMIPAY_URL . 'vendor/SweetAlert2/sweetalert2.min.css', [], '11.14.4', 'all');
-            wp_enqueue_script( 'sweetalert2', FORMIPAY_URL . 'vendor/SweetAlert2/sweetalert2.min.js', ['jquery'], '11.14.4', true);
+    public function render_react_metabox($post) {
+        echo '<div data-formipay-field-renderer="access" data-post-id="' . esc_attr($post->ID) . '"></div>';
+    }
 
-            wp_localize_script( 'sweetalert2', 'formipay_admin', [
-                'ajax_url' => admin_url('admin-ajax.php'),
-                'site_url' => site_url(),
-            ] );
+    public function render_react_metabox_template() {
+        global $post;
 
+        if (!$post || $post->post_type !== 'formipay-access') {
+            return;
         }
 
-        if($current_screen->id == 'formipay_page_formipay-access-items') {
-            
-            wp_enqueue_style( 'sweetalert2', FORMIPAY_URL . 'vendor/SweetAlert2/sweetalert2.min.css', [], 'all');
-            wp_enqueue_style( 'formipay-admin-pages', FORMIPAY_URL . 'admin/assets/css/admin-pages.css', [], FORMIPAY_VERSION, 'all' );
-            wp_enqueue_style( 'gridjs', FORMIPAY_URL . 'vendor/GridJS/gridjs.mermaid.min.css', [], '6.2.0', 'all' );
-            wp_enqueue_style( 'choices', FORMIPAY_URL . 'vendor/ChoicesJS/choices.min.css', [], FORMIPAY_VERSION, 'all' );
-            wp_enqueue_style( 'formipay-admin-pages', FORMIPAY_URL . 'admin/assets/css/admin-pages.css', [], FORMIPAY_VERSION, 'all' );
-            wp_enqueue_style( 'page-access-items', FORMIPAY_URL . 'admin/assets/css/page-access-items.css', [], FORMIPAY_VERSION, 'all' );
+        $config = \Formipay\Admin\FieldConfigBridge::get_config_for_post($post->ID, $post->post_type);
+        ?>
+        <script type="text/javascript">
+            window.formipayFieldConfig = <?php echo wp_json_encode($config); ?>;
+        </script>
+        <?php
+    }
 
-            wp_enqueue_script( 'sweetalert2', FORMIPAY_URL . 'vendor/SweetAlert2/sweetalert2.min.js', ['jquery'], '11.14.5', true);
-            wp_enqueue_script( 'formipay-admin-pages', FORMIPAY_URL . 'admin/assets/js/admin-pages.js', ['jquery'], FORMIPAY_VERSION, true );
-            wp_enqueue_script( 'gridjs', FORMIPAY_URL . 'vendor/GridJS/gridjs.production.min.js', ['jquery'], '6.2.0', true );
-            wp_enqueue_script( 'choices', FORMIPAY_URL . 'vendor/ChoicesJS/choices.min.js', [], FORMIPAY_VERSION, true );
-            wp_enqueue_script( 'page-access-items', FORMIPAY_URL . 'admin/assets/js/page-access-items.js', ['jquery', 'gridjs'], FORMIPAY_VERSION, true );
-
-            wp_localize_script( 'page-access-items', 'formipay_access_page', [
-                'ajax_url' => admin_url('admin-ajax.php'),
-                'site_url' => site_url(),
-                'columns' => [
-                    'id' => esc_html__( 'ID', 'formipay' ),
-                    'title' => esc_html__( 'Title', 'formipay' ),
-                    'type' => esc_html__( 'Type', 'formipay' ),
-                    'products' => esc_html__( 'Product Relation', 'formipay' ),
-                    'status' => esc_html__( 'Status', 'formipay' ),
-                ],
-                'filter_form' => [
-                    'products' => [
-                        'placeholder' => esc_html__( 'Filter by Product', 'formipay' ),
-                        'noresult_text' => esc_html__( 'No results found', 'formipay' )
-                    ]
-                ],
-                'modal' => [
-                    'add' => [
-                        'title' => esc_html__( 'Your New Item Title', 'formipay' ),
-                        'validation' => esc_html__( 'Item\'s title is still empty. Please input the title before continue', 'formipay' ),
-                        'cancelButton' => esc_html__( 'Cancel', 'formipay' ),
-                        'confirmButton' => esc_html__( 'Create New Item', 'formipay' )
-                    ],
-                    'delete' => [
-                        'question' => esc_html__( 'Do you want to delete the item?', 'formipay' ),
-                        'cancelButton' => esc_html__( 'Cancel', 'formipay' ),
-                        'confirmButton' => esc_html__( 'Delete Permanently', 'formipay' )
-                    ],
-                    'bulk_delete' => [
-                        'question' => esc_html__( 'Do you want to delete the selected the form(s)?', 'formipay' ),
-                        'cancelButton' => esc_html__( 'Cancel', 'formipay' ),
-                        'confirmButton' => esc_html__( 'Confirm', 'formipay' )
-                    ],
-                    'duplicate' => [
-                        'question' => esc_html__( 'Do you want to duplicate the item?', 'formipay' ),
-                        'cancelButton' => esc_html__( 'Cancel', 'formipay' ),
-                        'confirmButton' => esc_html__( 'Confirm', 'formipay' )
-                    ],
-                ],
-                'nonce' => wp_create_nonce('formipay-admin-access-nonce')
-            ] );
+    public function save_access_metabox_fields($post_id, $post) {
+        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
+            return $post_id;
         }
 
+        if (!current_user_can('manage_options')) {
+            return $post_id;
+        }
+
+        if (!isset($_POST['_wpnonce']) || !wp_verify_nonce($_POST['_wpnonce'], 'update-post_' . $post_id)) {
+            return $post_id;
+        }
+
+        if ($post->post_type !== 'formipay-access') {
+            return $post_id;
+        }
+
+        $meta_fields = [
+            'access_type',
+            'access_document',
+            'access_redirect_url',
+            'access_download_source',
+            'access_attachment',
+            'access_url',
+            'button_text',
+            'details_icon',
+            'details_filetype',
+            'details_filesize',
+            'details_short_description',
+        ];
+
+        foreach ($meta_fields as $field) {
+            if (isset($_POST[$field])) {
+                $value = wp_unslash($_POST[$field]);
+                update_post_meta($post_id, $field, $value);
+            }
+        }
+
+        return $post_id;
     }
 
     public function cpt_post_fields_box($boxes) {
diff --git a/includes/Admin/FieldConfigBridge.php b/includes/Admin/FieldConfigBridge.php
new file mode 100644
index 000000000..fa10b4758
--- /dev/null
+++ b/includes/Admin/FieldConfigBridge.php
@@ -0,0 +1,460 @@
+<?php
+namespace Formipay\Admin;
+
+use Formipay\Traits\SingletonTrait;
+
+if (!defined('ABSPATH')) exit;
+
+/**
+ * FieldConfigBridge - Transforms WPCFTO field config arrays to React-ready JSON
+ *
+ * Bridges the gap between PHP field configurations and the React FieldRenderer:
+ * - Collects field configs from filter system
+ * - Loads saved post meta / option values
+ * - Transforms PHP config format to React-ready structure
+ * - Handles dynamic currency field expansion
+ * - Handles dependency transformation
+ */
+class FieldConfigBridge {
+
+    use SingletonTrait;
+
+    /**
+     * Map CPT types to their filter names
+     */
+    private static $cpt_filter_map = [
+        'formipay-coupon'  => 'formipay/coupon-config',
+        'formipay-product' => 'formipay/product-config',
+        'formipay-form'    => 'formipay/form-config',
+        'formipay-access'  => 'formipay/access-config',
+    ];
+
+    /**
+     * Get complete field configuration for a post with saved values
+     *
+     * @param int $post_id Post ID
+     * @param string $post_type Post type
+     * @return array React-ready field configuration
+     */
+    public static function get_config_for_post($post_id, $post_type) {
+        $filter_name = self::$cpt_filter_map[$post_type] ?? null;
+
+        if (!$filter_name) {
+            return [];
+        }
+
+        // Get field configuration from filters
+        $fields = apply_filters($filter_name, []);
+
+        // Load saved values from post meta
+        $values = self::load_post_meta_values($post_id, $fields);
+
+        // Transform to React-ready format
+        return self::transform_fields_config($fields, $values, $post_id, $post_type);
+    }
+
+    /**
+     * Get configuration for settings page (wp_options based)
+     *
+     * @param string $option_name Option name
+     * @return array React-ready field configuration
+     */
+    public static function get_config_for_settings($option_name = 'formipay_settings') {
+        // Get settings values
+        $settings = get_option($option_name, []);
+
+        // Get field definitions directly from Settings class
+        $settings_instance = \Formipay\Settings::get_instance();
+        $tabs_config = $settings_instance->get_settings_fields();
+
+        // Transform to React-ready format
+        return self::transform_settings_config($settings, $tabs_config, $option_name);
+    }
+
+    /**
+     * Transform settings config to React-ready format
+     *
+     * @param array $settings Settings values
+     * @param array $tabs_config Tab configuration from Settings class
+     * @param string $option_name Option name
+     * @return array React-ready configuration
+     */
+    private static function transform_settings_config($settings, $tabs_config, $option_name) {
+        $tabs = [];
+
+        foreach ($tabs_config as $tab_key => $tab_data) {
+            if (!isset($tab_data['name']) || !isset($tab_data['fields'])) {
+                continue;
+            }
+
+            $tab = [
+                'id' => self::slugify($tab_data['name']),
+                'label' => $tab_data['name'],
+                'fields' => [],
+            ];
+
+            $current_group = null;
+
+            foreach ($tab_data['fields'] as $field_name => $field) {
+                // Handle group_title (section headers)
+                if (isset($field['type']) && $field['type'] === 'group_title') {
+                    $group_value = $field['group'] ?? '';
+
+                    if ($group_value === 'started') {
+                        $current_group = [
+                            'type' => 'section',
+                            'label' => $field['label'] ?? '',
+                            'description' => $field['description'] ?? '',
+                        ];
+                    } elseif ($group_value === 'ended') {
+                        $current_group = null;
+                    }
+                    continue;
+                }
+
+                // Add section if we have one
+                if ($current_group !== null) {
+                    $tab['fields'][] = $current_group;
+                    $current_group = null;
+                }
+
+                // Transform field configuration
+                $transformed_field = self::transform_settings_field($field_name, $field, $settings);
+
+                // Add to fields
+                $tab['fields'][] = $transformed_field;
+            }
+
+            $tabs[] = $tab;
+        }
+
+        return [
+            'tabs' => $tabs,
+            'optionName' => $option_name,
+            'globalCurrencies' => self::get_global_currencies_data(),
+            'nonce' => wp_create_nonce('formipay-field-config'),
+        ];
+    }
+
+    /**
+     * Load saved post meta values for all fields
+     *
+     * @param int $post_id Post ID
+     * @param array $fields Field configuration array
+     * @return array Field values keyed by field name
+     */
+    private static function load_post_meta_values($post_id, $fields) {
+        $values = [];
+
+        // The config structure is: $fields['formipay_{cpt}_settings'][tab_key] = ['name' => ..., 'fields' => [...]]
+        foreach ($fields as $container_key => $container_data) {
+            if (!is_array($container_data)) {
+                continue;
+            }
+
+            foreach ($container_data as $tab_key => $tab_data) {
+                if (!isset($tab_data['fields']) || !is_array($tab_data['fields'])) {
+                    continue;
+                }
+
+                foreach ($tab_data['fields'] as $field_name => $field) {
+                    // Skip group_title fields
+                    if (isset($field['type']) && $field['type'] === 'group_title') {
+                        continue;
+                    }
+
+                    $meta_value = get_post_meta($post_id, $field_name, true);
+                    $values[$field_name] = $meta_value !== '' ? $meta_value : ($field['value'] ?? null);
+                }
+            }
+        }
+
+        return $values;
+    }
+
+    /**
+     * Transform fields config to React-ready format
+     *
+     * @param array $fields Raw field configuration from PHP
+     * @param array $values Saved field values
+     * @param int $post_id Post ID
+     * @param string $post_type Post type
+     * @return array React-ready configuration
+     */
+    private static function transform_fields_config($fields, $values, $post_id, $post_type) {
+        $tabs = [];
+
+        // The config structure is: $fields['formipay_{cpt}_settings'][tab_key] = ['name' => ..., 'fields' => [...]]
+        foreach ($fields as $container_key => $container_data) {
+            if (!is_array($container_data)) {
+                continue;
+            }
+
+            foreach ($container_data as $tab_key => $tab_data) {
+                if (!isset($tab_data['name']) || !isset($tab_data['fields'])) {
+                    continue;
+                }
+
+                $tab = [
+                    'id' => $tab_key,
+                    'label' => $tab_data['name'],
+                    'fields' => [],
+                ];
+
+                $current_group = null;
+
+                foreach ($tab_data['fields'] as $field_name => $field) {
+                    // Handle group_title (section headers)
+                    if (isset($field['type']) && $field['type'] === 'group_title') {
+                        $group_value = $field['group'] ?? '';
+
+                        if ($group_value === 'started') {
+                            $current_group = [
+                                'type' => 'section',
+                                'label' => $field['label'] ?? '',
+                                'description' => $field['description'] ?? '',
+                            ];
+                        } elseif ($group_value === 'ended') {
+                            $current_group = null;
+                        }
+                        continue;
+                    }
+
+                    // Add section if we have one
+                    if ($current_group !== null) {
+                        $tab['fields'][] = $current_group;
+                        $current_group = null;
+                    }
+
+                    // Transform field configuration
+                    $transformed_field = self::transform_single_field($field_name, $field, $values);
+
+                    // Add to fields
+                    $tab['fields'][] = $transformed_field;
+                }
+
+                $tabs[] = $tab;
+            }
+        }
+
+        return [
+            'tabs' => $tabs,
+            'postId' => $post_id,
+            'postType' => $post_type,
+            'globalCurrencies' => self::get_global_currencies_data(),
+            'nonce' => wp_create_nonce('formipay-field-config'),
+        ];
+    }
+
+    /**
+     * Transform a single field configuration
+     *
+     * @param string $field_name Field name
+     * @param array $field Field configuration
+     * @param array $values Saved values
+     * @return array Transformed field config
+     */
+    private static function transform_single_field($field_name, $field, $values) {
+        $transformed = [
+            'name' => $field_name,
+            'type' => self::transform_field_type($field['type'] ?? 'text'),
+            'label' => $field['label'] ?? '',
+            'description' => $field['description'] ?? '',
+            'value' => $values[$field_name] ?? $field['value'] ?? '',
+            'required' => !empty($field['required']),
+            'dependency' => isset($field['dependency']) ? self::transform_dependency($field['dependency']) : null,
+        ];
+
+        // Add options for select/radio fields
+        if (isset($field['options'])) {
+            $transformed['options'] = $field['options'];
+        }
+
+        // Add subtype info for currency fields
+        if (isset($field['step'])) {
+            $transformed['step'] = $field['step'];
+        }
+        if (isset($field['min'])) {
+            $transformed['min'] = $field['min'];
+        }
+        if (isset($field['placeholder'])) {
+            $transformed['placeholder'] = $field['placeholder'];
+        }
+
+        // Handle special field types
+        if (isset($field['repeater_fields'])) {
+            $transformed['fields'] = $field['repeater_fields'];
+        }
+
+        // Pass post_type for autocomplete fields (CPTs)
+        if (isset($field['post_type'])) {
+            $transformed['post_type'] = $field['post_type'];
+        }
+
+        // Pass object_type for autocomplete fields (e.g., 'user' for WP Users)
+        if (isset($field['object_type'])) {
+            $transformed['object_type'] = $field['object_type'];
+        }
+
+        return $transformed;
+    }
+
+    /**
+     * Transform field type from PHP to React format
+     *
+     * @param string $type PHP field type
+     * @return string React field type
+     */
+    private static function transform_field_type($type) {
+        $type_map = [
+            'checkbox' => 'switch',             // Use toggle switch UI
+            'tinymce' => 'editor',              // Rich text editor
+            'editor' => 'editor',                // Map 'editor' type to tinymce field
+            'image' => 'image',                 // WordPress Media Library picker
+            'notification_message' => 'notification', // Notification banner component
+        ];
+
+        return $type_map[$type] ?? $type;
+    }
+
+    /**
+     * Transform dependency from PHP to React format
+     *
+     * @param array $dependency PHP dependency config
+     * @return array React dependency config
+     */
+    private static function transform_dependency($dependency) {
+        // Handle multiple dependencies (AND logic)
+        if (isset($dependency[0]) && is_array($dependency[0])) {
+            return [
+                'mode' => 'and',
+                'rules' => array_map([self::class, 'transform_single_dependency'], $dependency),
+            ];
+        }
+
+        return self::transform_single_dependency($dependency);
+    }
+
+    /**
+     * Transform a single dependency rule
+     *
+     * @param array $dependency PHP dependency
+     * @return array React dependency rule
+     */
+    private static function transform_single_dependency($dependency) {
+        $rule = [
+            'field' => $dependency['key'] ?? '',
+        ];
+
+        $value = $dependency['value'] ?? '';
+
+        // Handle special values
+        if ($value === 'not_empty') {
+            $rule['operator'] = 'not_empty';
+        } elseif ($value === 'empty') {
+            $rule['operator'] = 'empty';
+        } else {
+            $rule['value'] = $value;
+            $rule['operator'] = 'eq';
+        }
+
+        return $rule;
+    }
+
+    /**
+     * Get global currencies data for React
+     *
+     * @return array Currencies data
+     */
+    private static function get_global_currencies_data() {
+        $currencies = get_global_currency_array();
+
+        return array_map(function($currency) {
+            $parts = explode(':::', $currency['currency']);
+
+            return [
+                'currency' => $currency['currency'],
+                'code' => $parts[0] ?? '',
+                'title' => $parts[1] ?? '',
+                'symbol' => $parts[2] ?? $parts[1] ?? '',
+                'decimalDigits' => intval($currency['decimal_digits'] ?? 2),
+                'decimalSymbol' => $currency['decimal_symbol'] ?? '.',
+                'thousandSeparator' => $currency['thousand_separator'] ?? ',',
+                'flag' => formipay_get_flag_by_currency($currency['currency']),
+            ];
+        }, $currencies);
+    }
+
+    /**
+     * Transform a single settings field configuration
+     *
+     * @param string $field_name Field name
+     * @param array $field Field configuration
+     * @param array $settings Saved settings values
+     * @return array Transformed field config
+     */
+    private static function transform_settings_field($field_name, $field, $settings) {
+        $transformed = [
+            'name' => $field_name,
+            'type' => self::transform_field_type($field['type'] ?? 'text'),
+            'label' => $field['label'] ?? '',
+            'description' => $field['description'] ?? '',
+            'value' => $settings[$field_name] ?? $field['value'] ?? '',
+            'required' => !empty($field['required']),
+            'dependency' => isset($field['dependency']) ? self::transform_dependency($field['dependency']) : null,
+        ];
+
+        // Add options for select/radio/multi_checkbox fields
+        if (isset($field['options'])) {
+            $transformed['options'] = $field['options'];
+        }
+
+        // Add options for image_select
+        if (isset($field['options']) && $field['type'] === 'image_select') {
+            $transformed['width'] = $field['width'] ?? 100;
+            $transformed['height'] = $field['height'] ?? 100;
+        }
+
+        // Add hints for hint_textarea
+        if (isset($field['hints'])) {
+            $transformed['hints'] = $field['hints'];
+        }
+
+        // Add step/min for number fields
+        if (isset($field['step'])) {
+            $transformed['step'] = $field['step'];
+        }
+        if (isset($field['min'])) {
+            $transformed['min'] = $field['min'];
+        }
+        if (isset($field['placeholder'])) {
+            $transformed['placeholder'] = $field['placeholder'];
+        }
+        if (isset($field['rows'])) {
+            $transformed['rows'] = $field['rows'];
+        }
+
+        // Handle repeater fields
+        if (isset($field['fields'])) {
+            // Transform sub-fields to include name property
+            $sub_fields = [];
+            foreach ($field['fields'] as $sub_field_name => $sub_field) {
+                $sub_field['name'] = $sub_field_name;
+                $sub_fields[] = $sub_field;
+            }
+            $transformed['fields'] = $sub_fields;
+        }
+
+        return $transformed;
+    }
+
+    /**
+     * Convert string to URL-safe slug
+     *
+     * @param string $text Text to slugify
+     * @return string URL-safe slug
+     */
+    private static function slugify($text) {
+        return strtolower(sanitize_title($text));
+    }
+}
diff --git a/includes/Admin/ReactAdmin.php b/includes/Admin/ReactAdmin.php
index 57788473d..87da9ded1 100644
--- a/includes/Admin/ReactAdmin.php
+++ b/includes/Admin/ReactAdmin.php
@@ -13,6 +13,9 @@ class ReactAdmin {
         add_action( 'admin_enqueue_scripts', [$this, 'enqueue_assets'] );
         add_filter( 'formipay/admin/data', [$this, 'localize_data'] );
 
+        // AJAX endpoint for field configuration
+        add_action( 'wp_ajax_formipay-get-field-config', [$this, 'ajax_get_field_config'] );
+
     }
 
     public function enqueue_assets() {
@@ -40,18 +43,16 @@ class ReactAdmin {
         $dependencies = $assets_file['dependencies'] ?? [];
 
         // Filter out icon build dependencies - they're bundled, not separate scripts
-        $original_count = count($dependencies);
         $dependencies = array_values(array_filter($dependencies, function($dep) {
             return strpos($dep, 'wp-icons/build/') === false;
         }));
-        error_log('[Formipay] Filtered dependencies: ' . $original_count . ' -> ' . count($dependencies));
 
         $version = $assets_file['version'] ?? FORMIPAY_VERSION;
 
         wp_enqueue_style(
             'formipay-admin-style',
             $build_url . '/admin.css',
-            [],
+            ['wp-admin', 'colors', 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus'],
             $version
         );
 
@@ -72,10 +73,6 @@ class ReactAdmin {
             'siteUrl' => site_url(),
         ]);
 
-        // Debug logging
-        error_log('[Formipay] Enqueuing React assets on screen: ' . $screen->id);
-        error_log('[Formipay] Page data: ' . wp_json_encode($data));
-
         wp_localize_script('formipay-admin', 'formipayAdmin', $data);
 
     }
@@ -161,4 +158,27 @@ class ReactAdmin {
 
     }
 
+    /**
+     * AJAX handler for getting field configuration
+     */
+    public function ajax_get_field_config() {
+
+        check_ajax_referer( 'formipay-admin', '_wpnonce', '', true );
+
+        if (!current_user_can('manage_options')) {
+            wp_send_json_error(['message' => __('Unauthorized', 'formipay')]);
+        }
+
+        $post_id = isset($_REQUEST['post_id']) ? intval($_REQUEST['post_id']) : 0;
+        $post_type = isset($_REQUEST['post_type']) ? sanitize_text_field($_REQUEST['post_type']) : '';
+
+        if (!$post_id || !$post_type) {
+            wp_send_json_error(['message' => __('Invalid request', 'formipay')]);
+        }
+
+        $config = FieldConfigBridge::get_config_for_post($post_id, $post_type);
+
+        wp_send_json_success($config);
+    }
+
 }
diff --git a/includes/Coupon.php b/includes/Coupon.php
index e5464a091..b98a1db03 100644
--- a/includes/Coupon.php
+++ b/includes/Coupon.php
@@ -42,6 +42,10 @@ class Coupon {
         // React Metabox
         add_action( 'add_meta_boxes',                       [$this, 'add_react_metabox'] );
         add_action( 'admin_footer-post.php',                [$this, 'render_react_metabox_template'] );
+        add_action( 'admin_footer-post-new.php',            [$this, 'render_react_metabox_template'] );
+
+        // Save coupon data via WordPress save_post hook (regular hook with post type check inside)
+        add_action( 'save_post',                            [$this, 'save_coupon_on_post_update'], 10, 2 );
 
         // Order
         add_filter( 'formipay/order/order-details',         [$this, 'order_details'], 99, 3 );
@@ -112,13 +116,6 @@ class Coupon {
         if ($screen && $screen->post_type === 'formipay-coupon' && $screen->base === 'post') {
             wp_enqueue_style('sweetalert2', FORMIPAY_URL . 'vendor/SweetAlert2/sweetalert2.min.css', [], '11.14.4', 'all');
             wp_enqueue_script('sweetalert2', FORMIPAY_URL . 'vendor/SweetAlert2/sweetalert2.min.js', ['jquery'], '11.14.4', true);
-
-            // Localize admin data
-            wp_localize_script('formipay-admin', 'formipayAdmin', [
-                'ajaxUrl' => admin_url('admin-ajax.php'),
-                'siteUrl' => site_url(),
-                'nonce' => wp_create_nonce('formipay-admin'),
-            ]);
         }
     }
 
@@ -154,6 +151,7 @@ class Coupon {
         $rules_group_1 = array(
             'rules_general_group' => array(
                 'type'  => 'group_title',
+                'label' => __( 'General', 'formipay' ),
                 'group' => 'started'
             ),
             'active' => array(
@@ -169,6 +167,7 @@ class Coupon {
                     'fixed' => __( 'Fixed', 'formipay' ),
                     'percentage' => __( 'Percentage', 'formipay' )
                 ),
+                'value' => 'fixed'
             ),
             'amount_percentage' => array(
                 'type' => 'number',
@@ -209,8 +208,7 @@ class Coupon {
             $currency_symbol = formipay_get_currency_data_by_value($currency['currency'], 'symbol');
             $currency_title = ucwords(formipay_get_currency_data_by_value($currency['currency'], 'title'));
             $decimal_digits = intval($currency['decimal_digits']);
-            $step = $decimal_digits * 10;
-            $step = $step > 0 ? 1 / $step : 1;
+            $step = $decimal_digits > 0 ? pow(10, -$decimal_digits) : 1;
             
             $rules_group_2['amount_fixed_'.$currency_symbol] = array(
                 'type' => 'number',
@@ -238,7 +236,11 @@ class Coupon {
                 ),
                 'step' => $step,
                 'min' => 0,
-                'placeholder' => __( 'Enter Max Amount...', 'formipay' )
+                'placeholder' => __( 'Enter Max Amount...', 'formipay' ),
+                'dependency' => array(
+                    'key' => 'type',
+                    'value' => 'percentage'
+                )
             );
 
         }
@@ -324,7 +326,8 @@ class Coupon {
             'use_limit' => array(
                 'type' => 'number',
                 'label' => __( 'Usage Limit', 'formipay' ),
-                'description' => __( 'Leave it empty or 0 (zero) to set it as unlimited usage.', 'formipay' )
+                'description' => __( 'Leave it empty or 0 (zero) to set it as unlimited usage.', 'formipay' ),
+                'placeholder' => __( 'Set limit...', 'formipay' )
             ),
             'date_limit' => array(
                 'type' => 'date',
@@ -343,11 +346,11 @@ class Coupon {
                 'label' => __( 'Products', 'formipay' ),
                 'description' => __( 'Only selected product(s) can use the coupon. Leave empty to apply to all products.', 'formipay' )
             ),
-            'customers' => array(
+            'users' => array(
                 'type' => 'autocomplete',
-                'post_type' => array('formipay-product'),
+                'object_type' => 'user',
                 'label' => __( 'Customers', 'formipay' ),
-                'description' => __( 'Only selected customer(s) can use the coupon. Leave empty to apply to all customers.', 'formipay' )
+                'description' => __( 'Only selected registered customer(s) can use this coupon. Leave empty to apply to all customers.', 'formipay' )
             )
         );
 
@@ -588,6 +591,14 @@ class Coupon {
                 }
 
                 $date_limit = formipay_get_post_meta($coupon->ID, 'date_limit');
+                $date_limit_display = 'none';
+                if ($date_limit && $date_limit !== '') {
+                    if (preg_match('/^\d{4}-\d{2}-\d{2}/', $date_limit)) {
+                        $date_limit_display = $date_limit;
+                    } elseif (is_numeric($date_limit)) {
+                        $date_limit_display = formipay_date('Y-m-d', intval($date_limit) / 1000);
+                    }
+                }
 
                 $type = formipay_get_post_meta($coupon->ID, 'type');
                 $amount_meta_key = "amount_$type";
@@ -622,7 +633,7 @@ class Coupon {
                     'case_sensitive' => formipay_get_post_meta($coupon->ID, 'case_sensitive'),
                     'usage_count' => $this->count_order_by_coupon_code(get_the_title($coupon->ID)),
                     'usages' => $this->count_order_by_coupon_code(get_the_title($coupon->ID)),
-                    'date_limit' => false !== $date_limit ? formipay_date('Y-m-d', intval(formipay_get_post_meta($coupon->ID, 'date_limit')) / 1000) : 'none',
+                    'date_limit' => $date_limit_display,
                     'active' => $is_active ? 'on' : 'off',
                     'post_status' => $is_active ? 'active' : 'inactive',
                     'status' => $is_active ? 'active' : 'inactive'
@@ -885,7 +896,7 @@ class Coupon {
             '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') ?: [],
+            'users' => formipay_get_post_meta($post_id, 'users') ?: [],
         ];
 
         // Get fixed amounts for each currency
@@ -987,7 +998,7 @@ class Coupon {
         }
 
         // Save relation fields
-        $relation_fields = ['forms', 'products', 'customers'];
+        $relation_fields = ['forms', 'products', 'users'];
         foreach ($relation_fields as $field) {
             if ( isset($_REQUEST[$field]) ) {
                 $values = is_array($_REQUEST[$field]) ? array_map('intval', $_REQUEST[$field]) : [];
@@ -1006,7 +1017,7 @@ class Coupon {
      */
     public function add_react_metabox() {
         add_meta_box(
-            'formipay_coupon_reactor_metabox',
+            'formipay_coupon_settings',
             __( 'Coupon Settings', 'formipay' ),
             [$this, 'render_react_metabox'],
             'formipay-coupon',
@@ -1021,9 +1032,9 @@ class Coupon {
     public function render_react_metabox($post) {
         ?>
         <div
-            data-formipay-metabox="coupon"
+            data-formipay-field-renderer="coupon"
             data-post-id="<?php echo esc_attr($post->ID); ?>"
-            class="formipay-react-metabox-container"
+            class="formipay-field-renderer-container"
         >
             <div class="formipay-loading">
                 <div class="formipay-spinner"></div>
@@ -1042,9 +1053,39 @@ class Coupon {
             return;
         }
 
-        // Get global currencies
+        // Add Toaster container for toast notifications
+        echo '<div id="formipay-toaster-container" class="formipay-design-system" style="position:fixed;bottom:20px;right:20px;z-index:99999;"></div>';
+
+        // Get field configuration for this post
+        $config = \Formipay\Admin\FieldConfigBridge::get_config_for_post($post->ID, $post->post_type);
+
+        // Pass config to JavaScript
+        ?>
+        <script type="text/javascript">
+            window.formipayFieldConfig = <?php echo wp_json_encode($config); ?>;
+        </script>
+        <?php
+
+        // Keep the legacy global currencies for backward compatibility during transition
         $global_currencies = get_global_currency_array();
 
+        // Fallback: if no multicurrencies configured, use default currency
+        if (empty($global_currencies)) {
+            $formipay_settings = get_option('formipay_settings');
+            $default_currency_raw = formipay_default_currency('raw');
+
+            if (!empty($default_currency_raw)) {
+                $global_currencies = [
+                    [
+                        'currency' => $default_currency_raw,
+                        'decimal_digits' => isset($formipay_settings['default_currency_decimal_digits']) ? intval($formipay_settings['default_currency_decimal_digits']) : 2,
+                        'decimal_symbol' => isset($formipay_settings['default_currency_decimal_symbol']) ? $formipay_settings['default_currency_decimal_symbol'] : '.',
+                        'thousand_separator' => isset($formipay_settings['default_currency_thousand_separator']) ? $formipay_settings['default_currency_thousand_separator'] : ',',
+                    ]
+                ];
+            }
+        }
+
         ?>
         <script type="text/javascript">
             window.formipayGlobalCurrencies = <?php echo wp_json_encode($global_currencies); ?>;
@@ -1062,6 +1103,7 @@ class Coupon {
 
     /**
      * Autocomplete search for relation fields
+     * Supports CPTs (post_type) and WP Users (object_type=user)
      */
     public function formipay_autocomplete_search() {
 
@@ -1072,9 +1114,56 @@ class Coupon {
         }
 
         $post_type = isset($_REQUEST['post_type']) ? sanitize_text_field(wp_unslash($_REQUEST['post_type'])) : '';
+        $object_type = isset($_REQUEST['object_type']) ? sanitize_text_field(wp_unslash($_REQUEST['object_type'])) : '';
         $search = isset($_REQUEST['search']) ? sanitize_text_field(wp_unslash($_REQUEST['search'])) : '';
         $include = isset($_REQUEST['include']) ? array_map('intval', (array) $_REQUEST['include']) : [];
 
+        // Handle WP Users
+        if ($object_type === 'user') {
+            // Resolve labels for specific IDs (pre-selected items)
+            if (!empty($include)) {
+                $users = get_users(['include' => $include, 'fields' => ['ID', 'display_name', 'user_email']]);
+
+                $results = [];
+                if (!empty($users)) {
+                    foreach ($users as $user) {
+                        $results[] = [
+                            'value' => $user->ID,
+                            'label' => $user->display_name . ' (' . $user->user_email . ')',
+                        ];
+                    }
+                }
+                wp_send_json_success($results);
+                return;
+            }
+
+            // Search by keyword
+            if (strlen($search) < 2) {
+                wp_send_json_error( [ 'message' => 'Invalid request' ] );
+            }
+
+            $users = get_users([
+                'search' => '*' . $search . '*',
+                'search_columns' => ['display_name', 'user_email', 'user_login'],
+                'number' => 20,
+                'fields' => ['ID', 'display_name', 'user_email'],
+            ]);
+
+            $results = [];
+            if (!empty($users)) {
+                foreach ($users as $user) {
+                    $results[] = [
+                        'value' => $user->ID,
+                        'label' => $user->display_name . ' (' . $user->user_email . ')',
+                    ];
+                }
+            }
+
+            wp_send_json_success($results);
+            return;
+        }
+
+        // Handle CPTs (posts)
         if (empty($post_type)) {
             wp_send_json_error( [ 'message' => 'Invalid request' ] );
         }
@@ -1125,4 +1214,78 @@ class Coupon {
         wp_send_json_success($results);
     }
 
+    /**
+     * Save coupon data via WordPress save_post hook
+     * Called when user clicks WordPress Update button
+     */
+    public function save_coupon_on_post_update($post_id, $post) {
+        // Check if this is an autosave
+        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
+            return $post_id;
+        }
+
+        // Check permissions
+        if (!current_user_can('manage_options')) {
+            return $post_id;
+        }
+
+        // Verify nonce
+        if (!isset($_POST['_wpnonce']) || !wp_verify_nonce($_POST['_wpnonce'], 'update-post_' . $post_id)) {
+            return $post_id;
+        }
+
+        // Only save for our coupon post type
+        if ($post->post_type !== 'formipay-coupon') {
+            return $post_id;
+        }
+
+        // Get global currencies for currency field processing
+        $global_currencies = get_global_currency_array();
+
+        // Save basic meta fields
+        $meta_fields = [
+            'active',
+            'type',
+            'amount_percentage',
+            'case_sensitive',
+            'free_shipping',
+            'quantity_active',
+            'use_limit',
+            'date_limit',
+        ];
+
+        foreach ($meta_fields as $field) {
+            if (isset($_POST[$field])) {
+                $value = wp_unslash($_POST[$field]);
+                update_post_meta($post_id, $field, $value);
+            }
+        }
+
+        // Save fixed amounts for each currency
+        foreach ($global_currencies as $currency) {
+            $symbol = formipay_get_currency_data_by_value($currency['currency'], 'symbol');
+
+            if (isset($_POST['amount_fixed_' . $symbol])) {
+                update_post_meta($post_id, 'amount_fixed_' . $symbol, wp_unslash($_POST['amount_fixed_' . $symbol]));
+            }
+
+            if (isset($_POST['max_amount_' . $symbol])) {
+                update_post_meta($post_id, 'max_amount_' . $symbol, wp_unslash($_POST['max_amount_' . $symbol]));
+            }
+        }
+
+        // Save relation fields
+        $relation_fields = ['forms', 'products', 'users'];
+        foreach ($relation_fields as $field) {
+            if (isset($_POST[$field])) {
+                $values = is_array($_POST[$field]) ? array_map('intval', $_POST[$field]) : [];
+                update_post_meta($post_id, $field, $values);
+            } else {
+                delete_post_meta($post_id, $field);
+            }
+        }
+
+        return $post_id;
+    }
+
 }
\ No newline at end of file
diff --git a/includes/Settings.php b/includes/Settings.php
index 6eb7506f9..efd0a86dd 100644
--- a/includes/Settings.php
+++ b/includes/Settings.php
@@ -1,6 +1,7 @@
 <?php
 namespace Formipay;
 use Formipay\Traits\SingletonTrait;
+use Formipay\Admin\FieldConfigBridge;
 
 if ( ! defined( 'ABSPATH' ) ) exit;
 
@@ -11,16 +12,39 @@ class Settings {
 	/**
 	 * Initializes the plugin by setting filters and administration functions.
 	 */
-    
+
     protected function __construct() {
 
-        add_filter( 'wpcfto_options_page_setup',    [$this, 'theme_option'] );
+        // Register our submenu page
+        add_action( 'admin_menu',                   [$this, 'add_settings_page'] );
+
         add_action( 'admin_enqueue_scripts',        [$this, 'enqueue'] );
+        add_action( 'admin_footer',                 [$this, 'render_react_settings_template'] );
+
+        // AJAX handler for saving settings from React
+        add_action( 'wp_ajax_formipay_save_settings', [$this, 'ajax_save_settings'] );
 
     }
 
-    public function theme_option($setups){
+    /**
+     * Add settings submenu page
+     */
+    public function add_settings_page() {
+        add_submenu_page(
+            'formipay',                              // Parent slug
+            __('Formipay Settings', 'formipay'),     // Page title
+            __('Settings', 'formipay'),              // Menu title
+            'manage_options',                        // Capability
+            'formipay-settings',                     // Menu slug
+            [$this, 'render_settings_page']          // Callback function
+        );
+    }
 
+    /**
+     * Get settings field configuration for React
+     * Direct method without WPCFTO dependency
+     */
+    public function get_settings_fields() {
         $gateways = apply_filters( 'formipay/form-config/tab:payments/gateways', [] );
 
         $payment_checkboxes = [];
@@ -253,7 +277,7 @@ class Settings {
                 'value' => __( 'Input your {{media}} to get new access link.', 'formipay' ),
                 'submenu' => __( 'Thank-You Page', 'formipay' ),
                 'hints' => array(
-                    'media' => __( 'Contact Media', 'formipay' ) 
+                    'media' => __( 'Contact Media', 'formipay' )
                 ),
                 'description' => __( 'Use {{media}} shortcode to define what media of contact the buyer can receive the access link.', 'formipay' )
             ),
@@ -268,59 +292,115 @@ class Settings {
 
         $pages_fields = apply_filters( 'formipay/global-settings/tab:pages', $pages_fields );
 
-        $global = array(
-            'General' => array(
+        $tabs_config = [
+            'General' => [
                 'name' => __( 'General', 'formipay' ),
                 'fields' => $general_fields
-            ),
-            'Pages' => array(
+            ],
+            'Pages' => [
                 'name' => __( 'Pages', 'formipay' ),
                 'fields' => $pages_fields
-            )
-        );
+            ]
+        ];
 
-        $global = apply_filters( 'formipay/global-settings', $global );
+        // Allow other modules to add/modify tabs
+        $tabs_config = apply_filters( 'formipay/global-settings', $tabs_config );
 
-        foreach($global as $key => $value){
-            $fields[$key] = $value;
-        }
+        return $tabs_config;
+    }
 
-        $setups[] = array(
-            'option_name'   => 'formipay_settings',
-            'title'         => __('Formipay', 'formipay'),
-            'sub_title'     => __('Settings', 'formipay'),
-            'logo'          => FORMIPAY_URL . 'admin/assets/img/formipay-logo-circle-white.png',
-            'page'          => array(
-                'parent_slug'   => 'formipay',
-                'page_title'    => __('Formipay Settings', 'formipay'),
-                'menu_title'    => __('Settings', 'formipay'),
-                'menu_slug'     => 'formipay-settings',
-                'position'      => 40,
-            ),
-    
-            'fields' => $fields
-        );
-    
-        return $setups;
+    /**
+     * Render settings page (empty container for React)
+     */
+    public function render_settings_page() {
+        ?>
+        <div class="wrap">
+            <div id="formipay-settings-page-container"></div>
+        </div>
+        <?php
     }
 
     public function enqueue() {
-        
+
         global $current_screen;
 
         if ( $current_screen->id === 'formipay_page_formipay-settings' ) {
-            wp_enqueue_style('admin-setting-style', FORMIPAY_URL . 'admin/assets/css/global-setting.css', [], FORMIPAY_VERSION, 'all' );
-            wp_enqueue_script('admin-setting-script', FORMIPAY_URL . 'admin/assets/js/admin-setting.js', ['jquery'], FORMIPAY_VERSION, true);
+            // Enqueue React admin assets for FieldRenderer
+            wp_enqueue_script( 'formipay-admin', FORMIPAY_URL . 'build/admin.js', ['react', 'react-dom'], FORMIPAY_VERSION, true );
+            wp_enqueue_style( 'formipay-admin', FORMIPAY_URL . 'build/admin.css', [], FORMIPAY_VERSION, 'all' );
+        }
+    }
 
-            wp_localize_script( 'admin-setting-script', 'formipay_admin_setting', [
-                'ajax_url'  => admin_url('admin-ajax.php'),
-                'site_url'  => site_url(),
-                'nonce'     => wp_create_nonce('formipay-admin-nonce'),
-                'multicurrency' => formipay_is_multi_currency_active(),
-                'all_currencies' => formipay_currency_as_options(),
-                'global_selected_currencies' => formipay_global_currency_options(),
-                'default_currency' => formipay_default_currency()
-            ] );
+    /**
+     * Render React settings template in admin footer
+     * This outputs the config JSON and mount point for the React FieldRenderer
+     */
+    public function render_react_settings_template() {
+        global $current_screen;
+
+        // Only render on settings page
+        if ( $current_screen->id !== 'formipay_page_formipay-settings' ) {
+            return;
+        }
+
+        // Get the configuration for settings
+        $config = FieldConfigBridge::get_config_for_settings('formipay_settings');
+        $config_json = wp_json_encode($config);
+
+        ?>
+        <div id="formipay-settings-react" data-formipay-settings-config="<?php echo esc_attr($config_json); ?>"></div>
+        <script>
+            // Move the React mount point to our page container
+            jQuery(document).ready(function($) {
+                $('#formipay-settings-react').appendTo('#formipay-settings-page-container');
+            });
+        </script>
+        <?php
+    }
+
+    /**
+     * AJAX handler for saving settings from React
+     */
+    public function ajax_save_settings() {
+        // Verify nonce
+        check_ajax_referer( 'formipay-field-config', 'nonce', true );
+
+        // Check permissions
+        if (!current_user_can('manage_options')) {
+            wp_send_json_error([
+                'message' => __( 'You do not have permission to save settings.', 'formipay' )
+            ]);
+        }
+
+        // Get settings data
+        $settings = isset($_POST['settings']) ? json_decode(sanitize_text_field(wp_unslash($_POST['settings'])), true) : [];
+
+        if (empty($settings)) {
+            wp_send_json_error([
+                'message' => __( 'No settings data received.', 'formipay' )
+            ]);
+        }
+
+        // Remove nonce from settings before saving
+        unset($settings['nonce']);
+
+        // Get existing settings
+        $existing_settings = get_option('formipay_settings', []);
+
+        // Merge with existing settings to preserve values not in current form
+        $updated_settings = array_merge($existing_settings, $settings);
+
+        // Update option
+        $result = update_option('formipay_settings', $updated_settings);
+
+        if ($result) {
+            wp_send_json_success([
+                'message' => __( 'Settings saved successfully.', 'formipay' )
+            ]);
+        } else {
+            wp_send_json_error([
+                'message' => __( 'Failed to save settings.', 'formipay' )
+            ]);
         }
     }
 
diff --git a/node_modules/.cache/babel-loader/045d3f8e6f1af846e24137490aafb46014fa44009043f15306d9b1367cc53311.json.gz b/node_modules/.cache/babel-loader/045d3f8e6f1af846e24137490aafb46014fa44009043f15306d9b1367cc53311.json.gz
deleted file mode 100644
index c1473eba7..000000000
Binary files a/node_modules/.cache/babel-loader/045d3f8e6f1af846e24137490aafb46014fa44009043f15306d9b1367cc53311.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/05edf767bde3958483f734f8e5ab899f25aefd101c5c0ef986454ff4dcd06071.json.gz b/node_modules/.cache/babel-loader/05edf767bde3958483f734f8e5ab899f25aefd101c5c0ef986454ff4dcd06071.json.gz
deleted file mode 100644
index 062efa0eb..000000000
Binary files a/node_modules/.cache/babel-loader/05edf767bde3958483f734f8e5ab899f25aefd101c5c0ef986454ff4dcd06071.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/06cd6379690b1a291bee5352eec6a32340cc890cf903cf840777316b379e45b3.json.gz b/node_modules/.cache/babel-loader/06cd6379690b1a291bee5352eec6a32340cc890cf903cf840777316b379e45b3.json.gz
deleted file mode 100644
index 494b48e31..000000000
Binary files a/node_modules/.cache/babel-loader/06cd6379690b1a291bee5352eec6a32340cc890cf903cf840777316b379e45b3.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/0768553d56341503b378d5da5d3440b0c1e706cf4a1c00a6f34556a6b032790d.json.gz b/node_modules/.cache/babel-loader/0768553d56341503b378d5da5d3440b0c1e706cf4a1c00a6f34556a6b032790d.json.gz
deleted file mode 100644
index b213798f9..000000000
Binary files a/node_modules/.cache/babel-loader/0768553d56341503b378d5da5d3440b0c1e706cf4a1c00a6f34556a6b032790d.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/0ad392e4a022a30eb82054a0147079d607e5a8c6e67cbdc541cb3eac6504933d.json.gz b/node_modules/.cache/babel-loader/0ad392e4a022a30eb82054a0147079d607e5a8c6e67cbdc541cb3eac6504933d.json.gz
deleted file mode 100644
index 417a70226..000000000
Binary files a/node_modules/.cache/babel-loader/0ad392e4a022a30eb82054a0147079d607e5a8c6e67cbdc541cb3eac6504933d.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/0b419eacf377617e67471a6c10a4dd8a87a42c6120b6a9f04a201490ba67741c.json.gz b/node_modules/.cache/babel-loader/0b419eacf377617e67471a6c10a4dd8a87a42c6120b6a9f04a201490ba67741c.json.gz
deleted file mode 100644
index e6d5b0efe..000000000
Binary files a/node_modules/.cache/babel-loader/0b419eacf377617e67471a6c10a4dd8a87a42c6120b6a9f04a201490ba67741c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/0b7882e19c8bdddd6808bd0b54fcd61374b225048ab0d451abbe333d09fab460.json.gz b/node_modules/.cache/babel-loader/0b7882e19c8bdddd6808bd0b54fcd61374b225048ab0d451abbe333d09fab460.json.gz
deleted file mode 100644
index cfd788a85..000000000
Binary files a/node_modules/.cache/babel-loader/0b7882e19c8bdddd6808bd0b54fcd61374b225048ab0d451abbe333d09fab460.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/0c16c9c136622a9dffba1e2e0345c0dc2601c81ee83787cba3ef8a21c1a61a98.json.gz b/node_modules/.cache/babel-loader/0c16c9c136622a9dffba1e2e0345c0dc2601c81ee83787cba3ef8a21c1a61a98.json.gz
deleted file mode 100644
index c149a734f..000000000
Binary files a/node_modules/.cache/babel-loader/0c16c9c136622a9dffba1e2e0345c0dc2601c81ee83787cba3ef8a21c1a61a98.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/0c906e042fcec3ff659f4d48b76e357090775b2f114883efd987240eeb836858.json.gz b/node_modules/.cache/babel-loader/0c906e042fcec3ff659f4d48b76e357090775b2f114883efd987240eeb836858.json.gz
deleted file mode 100644
index 930ea8c84..000000000
Binary files a/node_modules/.cache/babel-loader/0c906e042fcec3ff659f4d48b76e357090775b2f114883efd987240eeb836858.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/1135cd978e74ef4ace58bbb07912f7d9e4f30538d3f73e7dabbde22493ecd5f5.json.gz b/node_modules/.cache/babel-loader/1135cd978e74ef4ace58bbb07912f7d9e4f30538d3f73e7dabbde22493ecd5f5.json.gz
deleted file mode 100644
index c1d4503dc..000000000
Binary files a/node_modules/.cache/babel-loader/1135cd978e74ef4ace58bbb07912f7d9e4f30538d3f73e7dabbde22493ecd5f5.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/14306388a25a4b8b3a799fd624f101fe025601bbd7f741bc481da551d52937e0.json.gz b/node_modules/.cache/babel-loader/14306388a25a4b8b3a799fd624f101fe025601bbd7f741bc481da551d52937e0.json.gz
deleted file mode 100644
index 9428bca3a..000000000
Binary files a/node_modules/.cache/babel-loader/14306388a25a4b8b3a799fd624f101fe025601bbd7f741bc481da551d52937e0.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/14b79987dc3a84ec3a760fa9a4ef506e3ce0455b2ffc6fe20655310e48e3fcfa.json.gz b/node_modules/.cache/babel-loader/14b79987dc3a84ec3a760fa9a4ef506e3ce0455b2ffc6fe20655310e48e3fcfa.json.gz
deleted file mode 100644
index da9224def..000000000
Binary files a/node_modules/.cache/babel-loader/14b79987dc3a84ec3a760fa9a4ef506e3ce0455b2ffc6fe20655310e48e3fcfa.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/161d4a33da4330458afa67644422dc556cfd9934ff7d7c5bd9901013c072f54b.json.gz b/node_modules/.cache/babel-loader/161d4a33da4330458afa67644422dc556cfd9934ff7d7c5bd9901013c072f54b.json.gz
deleted file mode 100644
index d527a6591..000000000
Binary files a/node_modules/.cache/babel-loader/161d4a33da4330458afa67644422dc556cfd9934ff7d7c5bd9901013c072f54b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/1988a833a5ed49147d6b6ad50aabda1ef2358d08761db0147c49525d248ceddb.json.gz b/node_modules/.cache/babel-loader/1988a833a5ed49147d6b6ad50aabda1ef2358d08761db0147c49525d248ceddb.json.gz
deleted file mode 100644
index 59eb5780c..000000000
Binary files a/node_modules/.cache/babel-loader/1988a833a5ed49147d6b6ad50aabda1ef2358d08761db0147c49525d248ceddb.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/1a741df843f1088b111b34098367931913ebadf428560780b121588c6c0cdf65.json.gz b/node_modules/.cache/babel-loader/1a741df843f1088b111b34098367931913ebadf428560780b121588c6c0cdf65.json.gz
deleted file mode 100644
index 6f15fafcb..000000000
Binary files a/node_modules/.cache/babel-loader/1a741df843f1088b111b34098367931913ebadf428560780b121588c6c0cdf65.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/207fa0ae15859b8a4e0b42b7383880954fa5f10a4b2ae8e4c257d9476fd17232.json.gz b/node_modules/.cache/babel-loader/207fa0ae15859b8a4e0b42b7383880954fa5f10a4b2ae8e4c257d9476fd17232.json.gz
deleted file mode 100644
index 31d9c700e..000000000
Binary files a/node_modules/.cache/babel-loader/207fa0ae15859b8a4e0b42b7383880954fa5f10a4b2ae8e4c257d9476fd17232.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/20cd7d71e889fb4f86d3fc861a3deb282abe6ee2cf37849fea42b95cf0ead53d.json.gz b/node_modules/.cache/babel-loader/20cd7d71e889fb4f86d3fc861a3deb282abe6ee2cf37849fea42b95cf0ead53d.json.gz
deleted file mode 100644
index aa56b47de..000000000
Binary files a/node_modules/.cache/babel-loader/20cd7d71e889fb4f86d3fc861a3deb282abe6ee2cf37849fea42b95cf0ead53d.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/215ccb96814ec5dad6acde72ebf5628ba13cafe629ac4cbda7f836d7b5a83c4f.json.gz b/node_modules/.cache/babel-loader/215ccb96814ec5dad6acde72ebf5628ba13cafe629ac4cbda7f836d7b5a83c4f.json.gz
deleted file mode 100644
index de3dcb72e..000000000
Binary files a/node_modules/.cache/babel-loader/215ccb96814ec5dad6acde72ebf5628ba13cafe629ac4cbda7f836d7b5a83c4f.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/23caee4e453767675cc67f11b1993e74a2b6f2fab5aa4e98f372c3d374ecb7fa.json.gz b/node_modules/.cache/babel-loader/23caee4e453767675cc67f11b1993e74a2b6f2fab5aa4e98f372c3d374ecb7fa.json.gz
deleted file mode 100644
index 420072238..000000000
Binary files a/node_modules/.cache/babel-loader/23caee4e453767675cc67f11b1993e74a2b6f2fab5aa4e98f372c3d374ecb7fa.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/23efb8bd1108d8bcd2059ebb0183a0ad6b3f9d60b7c51f3c15ea09d83af3ca3b.json.gz b/node_modules/.cache/babel-loader/23efb8bd1108d8bcd2059ebb0183a0ad6b3f9d60b7c51f3c15ea09d83af3ca3b.json.gz
deleted file mode 100644
index f9fecd813..000000000
Binary files a/node_modules/.cache/babel-loader/23efb8bd1108d8bcd2059ebb0183a0ad6b3f9d60b7c51f3c15ea09d83af3ca3b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/2c16f687347357ed6f396cf4981b97f6b1f77d86028e9fd23efb1693778105bc.json.gz b/node_modules/.cache/babel-loader/2c16f687347357ed6f396cf4981b97f6b1f77d86028e9fd23efb1693778105bc.json.gz
deleted file mode 100644
index 75315ddc8..000000000
Binary files a/node_modules/.cache/babel-loader/2c16f687347357ed6f396cf4981b97f6b1f77d86028e9fd23efb1693778105bc.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/2d4f7d4d0f8f62e2acfe3293217b1545bdd5f1beb5580fec7214e2cad3b4eb57.json.gz b/node_modules/.cache/babel-loader/2d4f7d4d0f8f62e2acfe3293217b1545bdd5f1beb5580fec7214e2cad3b4eb57.json.gz
deleted file mode 100644
index 6050dcf8c..000000000
Binary files a/node_modules/.cache/babel-loader/2d4f7d4d0f8f62e2acfe3293217b1545bdd5f1beb5580fec7214e2cad3b4eb57.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3053032f66a0f732dc147fde0fa793490ab0f6323fb8ea902b10fb49eb403b3d.json.gz b/node_modules/.cache/babel-loader/3053032f66a0f732dc147fde0fa793490ab0f6323fb8ea902b10fb49eb403b3d.json.gz
deleted file mode 100644
index 6f371ea30..000000000
Binary files a/node_modules/.cache/babel-loader/3053032f66a0f732dc147fde0fa793490ab0f6323fb8ea902b10fb49eb403b3d.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/311922837edbbdae21f8bb4ae3421e2a144e049aa343aa048a2e21241fcf1732.json.gz b/node_modules/.cache/babel-loader/311922837edbbdae21f8bb4ae3421e2a144e049aa343aa048a2e21241fcf1732.json.gz
deleted file mode 100644
index 8019eda15..000000000
Binary files a/node_modules/.cache/babel-loader/311922837edbbdae21f8bb4ae3421e2a144e049aa343aa048a2e21241fcf1732.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/34f09794b9a529a535e41ab268f852067b738ec7bede839c1e70a4a22b04b753.json.gz b/node_modules/.cache/babel-loader/34f09794b9a529a535e41ab268f852067b738ec7bede839c1e70a4a22b04b753.json.gz
deleted file mode 100644
index 14a65ab4f..000000000
Binary files a/node_modules/.cache/babel-loader/34f09794b9a529a535e41ab268f852067b738ec7bede839c1e70a4a22b04b753.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/376ac673e9f6e3f956bbce98c538bb078500b912790b54cac66002a8925b67d7.json.gz b/node_modules/.cache/babel-loader/376ac673e9f6e3f956bbce98c538bb078500b912790b54cac66002a8925b67d7.json.gz
deleted file mode 100644
index 23485be43..000000000
Binary files a/node_modules/.cache/babel-loader/376ac673e9f6e3f956bbce98c538bb078500b912790b54cac66002a8925b67d7.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/389f811ff9f262e0be744b84cc04a0e99aa8acbc329e070074e0e488e1e45cb7.json.gz b/node_modules/.cache/babel-loader/389f811ff9f262e0be744b84cc04a0e99aa8acbc329e070074e0e488e1e45cb7.json.gz
deleted file mode 100644
index 7f9417098..000000000
Binary files a/node_modules/.cache/babel-loader/389f811ff9f262e0be744b84cc04a0e99aa8acbc329e070074e0e488e1e45cb7.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3a08871aa808e620b9298452a2638f076758a922a7013dae8f82212b9abb6739.json.gz b/node_modules/.cache/babel-loader/3a08871aa808e620b9298452a2638f076758a922a7013dae8f82212b9abb6739.json.gz
deleted file mode 100644
index d8a727a91..000000000
Binary files a/node_modules/.cache/babel-loader/3a08871aa808e620b9298452a2638f076758a922a7013dae8f82212b9abb6739.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3a5850ea685e3d4d797c8bc9cfca9a947e95c55edff194cce928d21de9c13b91.json.gz b/node_modules/.cache/babel-loader/3a5850ea685e3d4d797c8bc9cfca9a947e95c55edff194cce928d21de9c13b91.json.gz
deleted file mode 100644
index 20725794d..000000000
Binary files a/node_modules/.cache/babel-loader/3a5850ea685e3d4d797c8bc9cfca9a947e95c55edff194cce928d21de9c13b91.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3abdeae1dba3dda270c32c3aec049cc39c2cd9891c273b41e0a8443e312d26f3.json.gz b/node_modules/.cache/babel-loader/3abdeae1dba3dda270c32c3aec049cc39c2cd9891c273b41e0a8443e312d26f3.json.gz
deleted file mode 100644
index 04e479ff8..000000000
Binary files a/node_modules/.cache/babel-loader/3abdeae1dba3dda270c32c3aec049cc39c2cd9891c273b41e0a8443e312d26f3.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3b3826c901df315916fe33d0e37afbf21c19646d275b40062957dbcef3289488.json.gz b/node_modules/.cache/babel-loader/3b3826c901df315916fe33d0e37afbf21c19646d275b40062957dbcef3289488.json.gz
deleted file mode 100644
index e6b473b5c..000000000
Binary files a/node_modules/.cache/babel-loader/3b3826c901df315916fe33d0e37afbf21c19646d275b40062957dbcef3289488.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3dc69700142d08627b69de13c68c4d1c3a1530a7051fbb8d7e7390f33b51529f.json.gz b/node_modules/.cache/babel-loader/3dc69700142d08627b69de13c68c4d1c3a1530a7051fbb8d7e7390f33b51529f.json.gz
deleted file mode 100644
index fba06d204..000000000
Binary files a/node_modules/.cache/babel-loader/3dc69700142d08627b69de13c68c4d1c3a1530a7051fbb8d7e7390f33b51529f.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3e0c80852595c04cdb34c154a893d8d91023a3de95e1efd6f29d107893ef8cde.json.gz b/node_modules/.cache/babel-loader/3e0c80852595c04cdb34c154a893d8d91023a3de95e1efd6f29d107893ef8cde.json.gz
deleted file mode 100644
index 431e592ab..000000000
Binary files a/node_modules/.cache/babel-loader/3e0c80852595c04cdb34c154a893d8d91023a3de95e1efd6f29d107893ef8cde.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3f2973fd2f8134ecc06c9146179b859a735f7fd259f9103c9a80fd6b45371c52.json.gz b/node_modules/.cache/babel-loader/3f2973fd2f8134ecc06c9146179b859a735f7fd259f9103c9a80fd6b45371c52.json.gz
deleted file mode 100644
index 756f42cdc..000000000
Binary files a/node_modules/.cache/babel-loader/3f2973fd2f8134ecc06c9146179b859a735f7fd259f9103c9a80fd6b45371c52.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/3f5c82d17a06143641942822b4334b5da944cb1b9a304e5963a6cb7c67a08f3a.json.gz b/node_modules/.cache/babel-loader/3f5c82d17a06143641942822b4334b5da944cb1b9a304e5963a6cb7c67a08f3a.json.gz
deleted file mode 100644
index 8796064d7..000000000
Binary files a/node_modules/.cache/babel-loader/3f5c82d17a06143641942822b4334b5da944cb1b9a304e5963a6cb7c67a08f3a.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/406557e43ef90df4f92c72d94507404b410220376f0269fa8e65567d5f09560e.json.gz b/node_modules/.cache/babel-loader/406557e43ef90df4f92c72d94507404b410220376f0269fa8e65567d5f09560e.json.gz
deleted file mode 100644
index b6ef6a0a0..000000000
Binary files a/node_modules/.cache/babel-loader/406557e43ef90df4f92c72d94507404b410220376f0269fa8e65567d5f09560e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/40a49fa8d838d5ad3c7a94cf6749e0e699d302357d69dd944de87b9e90acc5b2.json.gz b/node_modules/.cache/babel-loader/40a49fa8d838d5ad3c7a94cf6749e0e699d302357d69dd944de87b9e90acc5b2.json.gz
deleted file mode 100644
index 4b1cc3a2f..000000000
Binary files a/node_modules/.cache/babel-loader/40a49fa8d838d5ad3c7a94cf6749e0e699d302357d69dd944de87b9e90acc5b2.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/43b4846c9b00f0d272d3982cb39468b9ea75e3c7c9935cb0cf2f4425f5e701ee.json.gz b/node_modules/.cache/babel-loader/43b4846c9b00f0d272d3982cb39468b9ea75e3c7c9935cb0cf2f4425f5e701ee.json.gz
deleted file mode 100644
index c34ec091e..000000000
Binary files a/node_modules/.cache/babel-loader/43b4846c9b00f0d272d3982cb39468b9ea75e3c7c9935cb0cf2f4425f5e701ee.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/453e089ef2f27b2662355c107ae1f34034e158274e73a10338d67abefd4bdb74.json.gz b/node_modules/.cache/babel-loader/453e089ef2f27b2662355c107ae1f34034e158274e73a10338d67abefd4bdb74.json.gz
deleted file mode 100644
index b205b6315..000000000
Binary files a/node_modules/.cache/babel-loader/453e089ef2f27b2662355c107ae1f34034e158274e73a10338d67abefd4bdb74.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/475a2a45118be08d612cf04effa639c0e9508be06858205d6d61cae39dea4b2e.json.gz b/node_modules/.cache/babel-loader/475a2a45118be08d612cf04effa639c0e9508be06858205d6d61cae39dea4b2e.json.gz
deleted file mode 100644
index 55dff8786..000000000
Binary files a/node_modules/.cache/babel-loader/475a2a45118be08d612cf04effa639c0e9508be06858205d6d61cae39dea4b2e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/4761dd3ce917ca057f6568fe4d42192ecee6d5cc9456e05e1894e47c8af95690.json.gz b/node_modules/.cache/babel-loader/4761dd3ce917ca057f6568fe4d42192ecee6d5cc9456e05e1894e47c8af95690.json.gz
deleted file mode 100644
index 7bbb195d4..000000000
Binary files a/node_modules/.cache/babel-loader/4761dd3ce917ca057f6568fe4d42192ecee6d5cc9456e05e1894e47c8af95690.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/4eccc33cc79e4736ed7be423dbc5bbb9e30a28bdc17fba9f40edf0b3adde993e.json.gz b/node_modules/.cache/babel-loader/4eccc33cc79e4736ed7be423dbc5bbb9e30a28bdc17fba9f40edf0b3adde993e.json.gz
deleted file mode 100644
index 3a8cb3e40..000000000
Binary files a/node_modules/.cache/babel-loader/4eccc33cc79e4736ed7be423dbc5bbb9e30a28bdc17fba9f40edf0b3adde993e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/4fd35e2e049de1a500aa0b22088fb502d2acc01a41ddbdb4ef943bf013b2982b.json.gz b/node_modules/.cache/babel-loader/4fd35e2e049de1a500aa0b22088fb502d2acc01a41ddbdb4ef943bf013b2982b.json.gz
deleted file mode 100644
index a236dc48f..000000000
Binary files a/node_modules/.cache/babel-loader/4fd35e2e049de1a500aa0b22088fb502d2acc01a41ddbdb4ef943bf013b2982b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/4fe73c5c54f1c20f8d6b184380037ae327b398f37d45d2d9e2336e460917215c.json.gz b/node_modules/.cache/babel-loader/4fe73c5c54f1c20f8d6b184380037ae327b398f37d45d2d9e2336e460917215c.json.gz
deleted file mode 100644
index dae39e5fd..000000000
Binary files a/node_modules/.cache/babel-loader/4fe73c5c54f1c20f8d6b184380037ae327b398f37d45d2d9e2336e460917215c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/502b22a0aaf17aae320b451c537aca3a4cb4dcfc1656a871c047022e2901b8e8.json.gz b/node_modules/.cache/babel-loader/502b22a0aaf17aae320b451c537aca3a4cb4dcfc1656a871c047022e2901b8e8.json.gz
deleted file mode 100644
index 22e66bbaa..000000000
Binary files a/node_modules/.cache/babel-loader/502b22a0aaf17aae320b451c537aca3a4cb4dcfc1656a871c047022e2901b8e8.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5522c2d64085e482e0dfc280478c68a64cc7262104a35228af9cefbac72c57eb.json.gz b/node_modules/.cache/babel-loader/5522c2d64085e482e0dfc280478c68a64cc7262104a35228af9cefbac72c57eb.json.gz
deleted file mode 100644
index b9719a99a..000000000
Binary files a/node_modules/.cache/babel-loader/5522c2d64085e482e0dfc280478c68a64cc7262104a35228af9cefbac72c57eb.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/565207e7fbd18187e191263c954119a26bbd7b51edc56eb9447ae968ea1f9725.json.gz b/node_modules/.cache/babel-loader/565207e7fbd18187e191263c954119a26bbd7b51edc56eb9447ae968ea1f9725.json.gz
deleted file mode 100644
index b4a1e43e4..000000000
Binary files a/node_modules/.cache/babel-loader/565207e7fbd18187e191263c954119a26bbd7b51edc56eb9447ae968ea1f9725.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/56f67cf10fe3d950cf66b38e21f1c6d5bc8f7a74878d710cd61e786f7dece1f9.json.gz b/node_modules/.cache/babel-loader/56f67cf10fe3d950cf66b38e21f1c6d5bc8f7a74878d710cd61e786f7dece1f9.json.gz
deleted file mode 100644
index 7f9499984..000000000
Binary files a/node_modules/.cache/babel-loader/56f67cf10fe3d950cf66b38e21f1c6d5bc8f7a74878d710cd61e786f7dece1f9.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/56ff2da9eaca4044ea8bcd1b989a0c761c03747c09a08c265122869f0005264b.json.gz b/node_modules/.cache/babel-loader/56ff2da9eaca4044ea8bcd1b989a0c761c03747c09a08c265122869f0005264b.json.gz
deleted file mode 100644
index 0a3701708..000000000
Binary files a/node_modules/.cache/babel-loader/56ff2da9eaca4044ea8bcd1b989a0c761c03747c09a08c265122869f0005264b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/579e5cca1d2aaf338c42d12ca9e17c3fc356c53b589e5bd29ba76a5a07f98cfd.json.gz b/node_modules/.cache/babel-loader/579e5cca1d2aaf338c42d12ca9e17c3fc356c53b589e5bd29ba76a5a07f98cfd.json.gz
deleted file mode 100644
index 4345704ef..000000000
Binary files a/node_modules/.cache/babel-loader/579e5cca1d2aaf338c42d12ca9e17c3fc356c53b589e5bd29ba76a5a07f98cfd.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5814d1e982c2d192333e7d785d45a549ba7b79895722a37b94fd018e18bd2ac4.json.gz b/node_modules/.cache/babel-loader/5814d1e982c2d192333e7d785d45a549ba7b79895722a37b94fd018e18bd2ac4.json.gz
deleted file mode 100644
index 0c65ed62e..000000000
Binary files a/node_modules/.cache/babel-loader/5814d1e982c2d192333e7d785d45a549ba7b79895722a37b94fd018e18bd2ac4.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/59dec7e3902b1addbd783ba1ba2fd24a3237f0af89f6da2b476e42126790366a.json.gz b/node_modules/.cache/babel-loader/59dec7e3902b1addbd783ba1ba2fd24a3237f0af89f6da2b476e42126790366a.json.gz
deleted file mode 100644
index 98509dbaa..000000000
Binary files a/node_modules/.cache/babel-loader/59dec7e3902b1addbd783ba1ba2fd24a3237f0af89f6da2b476e42126790366a.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/59e6cb50a62c21cd73de0ec3a02847e236cca65f4149c9c42135fa79a1f8d24b.json.gz b/node_modules/.cache/babel-loader/59e6cb50a62c21cd73de0ec3a02847e236cca65f4149c9c42135fa79a1f8d24b.json.gz
deleted file mode 100644
index f0de51a25..000000000
Binary files a/node_modules/.cache/babel-loader/59e6cb50a62c21cd73de0ec3a02847e236cca65f4149c9c42135fa79a1f8d24b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5a27f19ce1f1ca46b061d1feeb1df31e799ee018b9105f438b90f6d82a19ca75.json.gz b/node_modules/.cache/babel-loader/5a27f19ce1f1ca46b061d1feeb1df31e799ee018b9105f438b90f6d82a19ca75.json.gz
deleted file mode 100644
index fa11bd16f..000000000
Binary files a/node_modules/.cache/babel-loader/5a27f19ce1f1ca46b061d1feeb1df31e799ee018b9105f438b90f6d82a19ca75.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5aab4366ac87b889d35d3e884b6b07308dacff02cd1b74d9d32eff007bcff386.json.gz b/node_modules/.cache/babel-loader/5aab4366ac87b889d35d3e884b6b07308dacff02cd1b74d9d32eff007bcff386.json.gz
deleted file mode 100644
index 07a59fd46..000000000
Binary files a/node_modules/.cache/babel-loader/5aab4366ac87b889d35d3e884b6b07308dacff02cd1b74d9d32eff007bcff386.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5be92bf48ed7a014a1507c8f4653dbc2fbaf04621d06ae71f8568bae5ed52c34.json.gz b/node_modules/.cache/babel-loader/5be92bf48ed7a014a1507c8f4653dbc2fbaf04621d06ae71f8568bae5ed52c34.json.gz
deleted file mode 100644
index 999be6b01..000000000
Binary files a/node_modules/.cache/babel-loader/5be92bf48ed7a014a1507c8f4653dbc2fbaf04621d06ae71f8568bae5ed52c34.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5befb0b3ac8516f8814ec95d4e5221c2ad7d378e499ac1f4a918dc1f1fff740f.json.gz b/node_modules/.cache/babel-loader/5befb0b3ac8516f8814ec95d4e5221c2ad7d378e499ac1f4a918dc1f1fff740f.json.gz
deleted file mode 100644
index dc9d1fbee..000000000
Binary files a/node_modules/.cache/babel-loader/5befb0b3ac8516f8814ec95d4e5221c2ad7d378e499ac1f4a918dc1f1fff740f.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5c8c87eeb43061043fd34c196b878669dc9fb2a7c7bfc3f04075dd253e479259.json.gz b/node_modules/.cache/babel-loader/5c8c87eeb43061043fd34c196b878669dc9fb2a7c7bfc3f04075dd253e479259.json.gz
deleted file mode 100644
index 787eddd0f..000000000
Binary files a/node_modules/.cache/babel-loader/5c8c87eeb43061043fd34c196b878669dc9fb2a7c7bfc3f04075dd253e479259.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5d5c2338351a9de824f67a1cda051a9ceed7a027159c89bcbf5598c9fe56b8d1.json.gz b/node_modules/.cache/babel-loader/5d5c2338351a9de824f67a1cda051a9ceed7a027159c89bcbf5598c9fe56b8d1.json.gz
deleted file mode 100644
index 8bc932a6d..000000000
Binary files a/node_modules/.cache/babel-loader/5d5c2338351a9de824f67a1cda051a9ceed7a027159c89bcbf5598c9fe56b8d1.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/5dda7b3abb8a708d5a4a5496c7826eb5492d9d187745b1bcb12655fe751c3ed7.json.gz b/node_modules/.cache/babel-loader/5dda7b3abb8a708d5a4a5496c7826eb5492d9d187745b1bcb12655fe751c3ed7.json.gz
deleted file mode 100644
index 43c6839c7..000000000
Binary files a/node_modules/.cache/babel-loader/5dda7b3abb8a708d5a4a5496c7826eb5492d9d187745b1bcb12655fe751c3ed7.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/65b5fff42904efd9c9a1398b89959f561717e806497911d2fccb63ed06d04ed7.json.gz b/node_modules/.cache/babel-loader/65b5fff42904efd9c9a1398b89959f561717e806497911d2fccb63ed06d04ed7.json.gz
deleted file mode 100644
index 199411b4f..000000000
Binary files a/node_modules/.cache/babel-loader/65b5fff42904efd9c9a1398b89959f561717e806497911d2fccb63ed06d04ed7.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/66986739223199f2555c453810a346601f79c647c34df3c77ae4b5e9c025c959.json.gz b/node_modules/.cache/babel-loader/66986739223199f2555c453810a346601f79c647c34df3c77ae4b5e9c025c959.json.gz
deleted file mode 100644
index 2131e9a18..000000000
Binary files a/node_modules/.cache/babel-loader/66986739223199f2555c453810a346601f79c647c34df3c77ae4b5e9c025c959.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/6ae537d7fe763dcb0d763b1c0a10796d451696b52a728544a3a028125159b35b.json.gz b/node_modules/.cache/babel-loader/6ae537d7fe763dcb0d763b1c0a10796d451696b52a728544a3a028125159b35b.json.gz
deleted file mode 100644
index 1d74b305b..000000000
Binary files a/node_modules/.cache/babel-loader/6ae537d7fe763dcb0d763b1c0a10796d451696b52a728544a3a028125159b35b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/6b23656ba3af17f3dc43f2e503885bd055c580bd2b7c87b28d303c5414dda449.json.gz b/node_modules/.cache/babel-loader/6b23656ba3af17f3dc43f2e503885bd055c580bd2b7c87b28d303c5414dda449.json.gz
deleted file mode 100644
index 477a03139..000000000
Binary files a/node_modules/.cache/babel-loader/6b23656ba3af17f3dc43f2e503885bd055c580bd2b7c87b28d303c5414dda449.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/6c8d197c6aef81da583f60809805cf20d20be3ba21f3d898ef1239e5e2e77ee8.json.gz b/node_modules/.cache/babel-loader/6c8d197c6aef81da583f60809805cf20d20be3ba21f3d898ef1239e5e2e77ee8.json.gz
deleted file mode 100644
index 5a5ba42af..000000000
Binary files a/node_modules/.cache/babel-loader/6c8d197c6aef81da583f60809805cf20d20be3ba21f3d898ef1239e5e2e77ee8.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/6fa0661cdd51dc37cfd6fd37b6e1eb08beba46619d742fd339d4f93457ffc4a0.json.gz b/node_modules/.cache/babel-loader/6fa0661cdd51dc37cfd6fd37b6e1eb08beba46619d742fd339d4f93457ffc4a0.json.gz
deleted file mode 100644
index 4a2857e50..000000000
Binary files a/node_modules/.cache/babel-loader/6fa0661cdd51dc37cfd6fd37b6e1eb08beba46619d742fd339d4f93457ffc4a0.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/7082dbd657156770d731a66a9accfc24768f48d46e6f3c420e3ef493f3776689.json.gz b/node_modules/.cache/babel-loader/7082dbd657156770d731a66a9accfc24768f48d46e6f3c420e3ef493f3776689.json.gz
deleted file mode 100644
index 779604de7..000000000
Binary files a/node_modules/.cache/babel-loader/7082dbd657156770d731a66a9accfc24768f48d46e6f3c420e3ef493f3776689.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/70a0d55c8dc72ef14140ec53febc2ff711dd307c272a17c0b3fa63dac70658e8.json.gz b/node_modules/.cache/babel-loader/70a0d55c8dc72ef14140ec53febc2ff711dd307c272a17c0b3fa63dac70658e8.json.gz
deleted file mode 100644
index 155df56d0..000000000
Binary files a/node_modules/.cache/babel-loader/70a0d55c8dc72ef14140ec53febc2ff711dd307c272a17c0b3fa63dac70658e8.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/7143bc45b681c41e6aed6009c6919bc4220b4b7c3aaf05789564f2153fe8564a.json.gz b/node_modules/.cache/babel-loader/7143bc45b681c41e6aed6009c6919bc4220b4b7c3aaf05789564f2153fe8564a.json.gz
deleted file mode 100644
index 07166c209..000000000
Binary files a/node_modules/.cache/babel-loader/7143bc45b681c41e6aed6009c6919bc4220b4b7c3aaf05789564f2153fe8564a.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/71f4553745f70a67147c89629685a447bc063b0da8c0af765b6f90647731ca80.json.gz b/node_modules/.cache/babel-loader/71f4553745f70a67147c89629685a447bc063b0da8c0af765b6f90647731ca80.json.gz
deleted file mode 100644
index 4f25702cb..000000000
Binary files a/node_modules/.cache/babel-loader/71f4553745f70a67147c89629685a447bc063b0da8c0af765b6f90647731ca80.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/757e005cd7d8064797f4acf3ee23694f9833484004d3ebd442de956e40f29c90.json.gz b/node_modules/.cache/babel-loader/757e005cd7d8064797f4acf3ee23694f9833484004d3ebd442de956e40f29c90.json.gz
deleted file mode 100644
index 5003aa80f..000000000
Binary files a/node_modules/.cache/babel-loader/757e005cd7d8064797f4acf3ee23694f9833484004d3ebd442de956e40f29c90.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/77c71f7312c55e51ee34833bbbae06adb8b2d2d6a2eb64c50d073e4969aaf4d6.json.gz b/node_modules/.cache/babel-loader/77c71f7312c55e51ee34833bbbae06adb8b2d2d6a2eb64c50d073e4969aaf4d6.json.gz
deleted file mode 100644
index 5753caa09..000000000
Binary files a/node_modules/.cache/babel-loader/77c71f7312c55e51ee34833bbbae06adb8b2d2d6a2eb64c50d073e4969aaf4d6.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/7916e405c9407ec66fffcbaf3cdf8fd1a53571a297e42f76e12bfea69008e0e1.json.gz b/node_modules/.cache/babel-loader/7916e405c9407ec66fffcbaf3cdf8fd1a53571a297e42f76e12bfea69008e0e1.json.gz
deleted file mode 100644
index e58705b57..000000000
Binary files a/node_modules/.cache/babel-loader/7916e405c9407ec66fffcbaf3cdf8fd1a53571a297e42f76e12bfea69008e0e1.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/7b4d58247fbd4610bdea98659070acb7cec36e726e38e29cbc1defd7d681f8fb.json.gz b/node_modules/.cache/babel-loader/7b4d58247fbd4610bdea98659070acb7cec36e726e38e29cbc1defd7d681f8fb.json.gz
deleted file mode 100644
index 319b16666..000000000
Binary files a/node_modules/.cache/babel-loader/7b4d58247fbd4610bdea98659070acb7cec36e726e38e29cbc1defd7d681f8fb.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/7d59c9f7ac694670aa532bda1596a4689875db81b8a599935bbe5818021c146f.json.gz b/node_modules/.cache/babel-loader/7d59c9f7ac694670aa532bda1596a4689875db81b8a599935bbe5818021c146f.json.gz
deleted file mode 100644
index 68093b036..000000000
Binary files a/node_modules/.cache/babel-loader/7d59c9f7ac694670aa532bda1596a4689875db81b8a599935bbe5818021c146f.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/7e14adc209a2f91edde190f1c99acfcf3d64a741cb2fb022cf781fac4171a8f0.json.gz b/node_modules/.cache/babel-loader/7e14adc209a2f91edde190f1c99acfcf3d64a741cb2fb022cf781fac4171a8f0.json.gz
deleted file mode 100644
index 7b144abf4..000000000
Binary files a/node_modules/.cache/babel-loader/7e14adc209a2f91edde190f1c99acfcf3d64a741cb2fb022cf781fac4171a8f0.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/81bc671315573b551e0bfafda03cf846121966f836ee2a2fe60307338dc66c9a.json.gz b/node_modules/.cache/babel-loader/81bc671315573b551e0bfafda03cf846121966f836ee2a2fe60307338dc66c9a.json.gz
deleted file mode 100644
index 5a9dbaaf2..000000000
Binary files a/node_modules/.cache/babel-loader/81bc671315573b551e0bfafda03cf846121966f836ee2a2fe60307338dc66c9a.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8483ed0fa3b2693a979e68bb8e2ba6e204402eb5d142535b9b3de424d026ed50.json.gz b/node_modules/.cache/babel-loader/8483ed0fa3b2693a979e68bb8e2ba6e204402eb5d142535b9b3de424d026ed50.json.gz
deleted file mode 100644
index 0853888ee..000000000
Binary files a/node_modules/.cache/babel-loader/8483ed0fa3b2693a979e68bb8e2ba6e204402eb5d142535b9b3de424d026ed50.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/86930ed88a7e28745a41fd8ea79627824aea3bbf9997d55a62c5aa71669730b2.json.gz b/node_modules/.cache/babel-loader/86930ed88a7e28745a41fd8ea79627824aea3bbf9997d55a62c5aa71669730b2.json.gz
deleted file mode 100644
index 4f05b2dec..000000000
Binary files a/node_modules/.cache/babel-loader/86930ed88a7e28745a41fd8ea79627824aea3bbf9997d55a62c5aa71669730b2.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/879bba7d2f096ffd06e487e598e0acb3fbeed194dca7c3c788e28b55f18454b4.json.gz b/node_modules/.cache/babel-loader/879bba7d2f096ffd06e487e598e0acb3fbeed194dca7c3c788e28b55f18454b4.json.gz
deleted file mode 100644
index 4e2df132a..000000000
Binary files a/node_modules/.cache/babel-loader/879bba7d2f096ffd06e487e598e0acb3fbeed194dca7c3c788e28b55f18454b4.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/88aee7ccf6295384d11a3e94762c94801edf799cc77924d3794f2bf566d3c348.json.gz b/node_modules/.cache/babel-loader/88aee7ccf6295384d11a3e94762c94801edf799cc77924d3794f2bf566d3c348.json.gz
deleted file mode 100644
index 7824868f6..000000000
Binary files a/node_modules/.cache/babel-loader/88aee7ccf6295384d11a3e94762c94801edf799cc77924d3794f2bf566d3c348.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8ad61b9bd1cdfe0ddc52c8e65cbe1ef62f81ff6400630b08f6d2900f354bcb5e.json.gz b/node_modules/.cache/babel-loader/8ad61b9bd1cdfe0ddc52c8e65cbe1ef62f81ff6400630b08f6d2900f354bcb5e.json.gz
deleted file mode 100644
index 89158c769..000000000
Binary files a/node_modules/.cache/babel-loader/8ad61b9bd1cdfe0ddc52c8e65cbe1ef62f81ff6400630b08f6d2900f354bcb5e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8aec4f12ecae7ed43bbac9f9590f417ea398f869af510a764cb9feee9ecb6bd2.json.gz b/node_modules/.cache/babel-loader/8aec4f12ecae7ed43bbac9f9590f417ea398f869af510a764cb9feee9ecb6bd2.json.gz
deleted file mode 100644
index c7bed4a26..000000000
Binary files a/node_modules/.cache/babel-loader/8aec4f12ecae7ed43bbac9f9590f417ea398f869af510a764cb9feee9ecb6bd2.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8b096f8149a5ad8c6ee12d75f49bc2240215968cecc7ce5ed7df96aae15cf23c.json.gz b/node_modules/.cache/babel-loader/8b096f8149a5ad8c6ee12d75f49bc2240215968cecc7ce5ed7df96aae15cf23c.json.gz
deleted file mode 100644
index b973e8040..000000000
Binary files a/node_modules/.cache/babel-loader/8b096f8149a5ad8c6ee12d75f49bc2240215968cecc7ce5ed7df96aae15cf23c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8c0f4882f684e83867700f22af9cdb354be15632d4208fff53cb9d84f7309af6.json.gz b/node_modules/.cache/babel-loader/8c0f4882f684e83867700f22af9cdb354be15632d4208fff53cb9d84f7309af6.json.gz
deleted file mode 100644
index a3e7979d6..000000000
Binary files a/node_modules/.cache/babel-loader/8c0f4882f684e83867700f22af9cdb354be15632d4208fff53cb9d84f7309af6.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8c9d8b60729ff6d2f5463f198397a7d470c996d742a08eb93b740e7669165b6c.json.gz b/node_modules/.cache/babel-loader/8c9d8b60729ff6d2f5463f198397a7d470c996d742a08eb93b740e7669165b6c.json.gz
deleted file mode 100644
index 662691042..000000000
Binary files a/node_modules/.cache/babel-loader/8c9d8b60729ff6d2f5463f198397a7d470c996d742a08eb93b740e7669165b6c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8cb92a48b38da03407ba5f647265a084d62ea96f4e64147e8c86d8e7d286b681.json.gz b/node_modules/.cache/babel-loader/8cb92a48b38da03407ba5f647265a084d62ea96f4e64147e8c86d8e7d286b681.json.gz
deleted file mode 100644
index 19d49af2a..000000000
Binary files a/node_modules/.cache/babel-loader/8cb92a48b38da03407ba5f647265a084d62ea96f4e64147e8c86d8e7d286b681.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8cc6fe2d32e01bdb05f4edf32353fc7bcd4f833ddbb91198129c7c6962ce6dd8.json.gz b/node_modules/.cache/babel-loader/8cc6fe2d32e01bdb05f4edf32353fc7bcd4f833ddbb91198129c7c6962ce6dd8.json.gz
deleted file mode 100644
index 1fc3620c6..000000000
Binary files a/node_modules/.cache/babel-loader/8cc6fe2d32e01bdb05f4edf32353fc7bcd4f833ddbb91198129c7c6962ce6dd8.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8dd5ba2fce8cf2b07004cd90c4bd5068fd5210954faa4b43093b5d079e6c650c.json.gz b/node_modules/.cache/babel-loader/8dd5ba2fce8cf2b07004cd90c4bd5068fd5210954faa4b43093b5d079e6c650c.json.gz
deleted file mode 100644
index c2589171f..000000000
Binary files a/node_modules/.cache/babel-loader/8dd5ba2fce8cf2b07004cd90c4bd5068fd5210954faa4b43093b5d079e6c650c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8e426bcfb6f3020726963f561d49573733effd023c686ccdd2deac44e89bcb55.json.gz b/node_modules/.cache/babel-loader/8e426bcfb6f3020726963f561d49573733effd023c686ccdd2deac44e89bcb55.json.gz
deleted file mode 100644
index fcc445a00..000000000
Binary files a/node_modules/.cache/babel-loader/8e426bcfb6f3020726963f561d49573733effd023c686ccdd2deac44e89bcb55.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8efef825f086cfe4a5abfaaad9f99dacd20270a20d2dffc1965c33439d07ae37.json.gz b/node_modules/.cache/babel-loader/8efef825f086cfe4a5abfaaad9f99dacd20270a20d2dffc1965c33439d07ae37.json.gz
deleted file mode 100644
index 6f9eb84d5..000000000
Binary files a/node_modules/.cache/babel-loader/8efef825f086cfe4a5abfaaad9f99dacd20270a20d2dffc1965c33439d07ae37.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/8ff0b9507ffef823cde6831d73d204ad9f7cebce4fc4fb80b7669ec46448a356.json.gz b/node_modules/.cache/babel-loader/8ff0b9507ffef823cde6831d73d204ad9f7cebce4fc4fb80b7669ec46448a356.json.gz
deleted file mode 100644
index 3f5d059f8..000000000
Binary files a/node_modules/.cache/babel-loader/8ff0b9507ffef823cde6831d73d204ad9f7cebce4fc4fb80b7669ec46448a356.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/917dbb60eabfe705d18c0ed71309c6779b37880fe1b1538e6b7e5545194d8451.json.gz b/node_modules/.cache/babel-loader/917dbb60eabfe705d18c0ed71309c6779b37880fe1b1538e6b7e5545194d8451.json.gz
deleted file mode 100644
index ee7b4bd87..000000000
Binary files a/node_modules/.cache/babel-loader/917dbb60eabfe705d18c0ed71309c6779b37880fe1b1538e6b7e5545194d8451.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/92116829bf4ca7bfd69fedfa9a859c03eb1db0401b9dd5fb07164d0bac532706.json.gz b/node_modules/.cache/babel-loader/92116829bf4ca7bfd69fedfa9a859c03eb1db0401b9dd5fb07164d0bac532706.json.gz
deleted file mode 100644
index ed30ddd40..000000000
Binary files a/node_modules/.cache/babel-loader/92116829bf4ca7bfd69fedfa9a859c03eb1db0401b9dd5fb07164d0bac532706.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/92365b161cdd21e95aeff200a75ffce63def96054e41eeb7184e2fd3ab589941.json.gz b/node_modules/.cache/babel-loader/92365b161cdd21e95aeff200a75ffce63def96054e41eeb7184e2fd3ab589941.json.gz
deleted file mode 100644
index 01353ce6e..000000000
Binary files a/node_modules/.cache/babel-loader/92365b161cdd21e95aeff200a75ffce63def96054e41eeb7184e2fd3ab589941.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/929635886c76223418cfd22c17cab2a113adb4302283be03e9d9fed59c15bc95.json.gz b/node_modules/.cache/babel-loader/929635886c76223418cfd22c17cab2a113adb4302283be03e9d9fed59c15bc95.json.gz
deleted file mode 100644
index 650903f22..000000000
Binary files a/node_modules/.cache/babel-loader/929635886c76223418cfd22c17cab2a113adb4302283be03e9d9fed59c15bc95.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/92abeab5da30d7e2144ff5737a2bd7aa4e379af0ea1ec959329f494590092f95.json.gz b/node_modules/.cache/babel-loader/92abeab5da30d7e2144ff5737a2bd7aa4e379af0ea1ec959329f494590092f95.json.gz
deleted file mode 100644
index 25502e7c5..000000000
Binary files a/node_modules/.cache/babel-loader/92abeab5da30d7e2144ff5737a2bd7aa4e379af0ea1ec959329f494590092f95.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/92d2d68744d462552234c01faf37cfa154c33a34e8a5ba903c937fa21ea0940d.json.gz b/node_modules/.cache/babel-loader/92d2d68744d462552234c01faf37cfa154c33a34e8a5ba903c937fa21ea0940d.json.gz
deleted file mode 100644
index 599ec325f..000000000
Binary files a/node_modules/.cache/babel-loader/92d2d68744d462552234c01faf37cfa154c33a34e8a5ba903c937fa21ea0940d.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/9bfe7c785b2b641544ba7e347b3cb61ba3a458bc348e766a382a697884f13791.json.gz b/node_modules/.cache/babel-loader/9bfe7c785b2b641544ba7e347b3cb61ba3a458bc348e766a382a697884f13791.json.gz
deleted file mode 100644
index 5bbe68886..000000000
Binary files a/node_modules/.cache/babel-loader/9bfe7c785b2b641544ba7e347b3cb61ba3a458bc348e766a382a697884f13791.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/9c9100125c88ad0b7765dade3f3a5a571f92d021b35626b04e1893841866e121.json.gz b/node_modules/.cache/babel-loader/9c9100125c88ad0b7765dade3f3a5a571f92d021b35626b04e1893841866e121.json.gz
deleted file mode 100644
index 74cd083bb..000000000
Binary files a/node_modules/.cache/babel-loader/9c9100125c88ad0b7765dade3f3a5a571f92d021b35626b04e1893841866e121.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/9e4e8d2894f4085717a98e04e3974871d22d28b9a1206db42363d2314834d09e.json.gz b/node_modules/.cache/babel-loader/9e4e8d2894f4085717a98e04e3974871d22d28b9a1206db42363d2314834d09e.json.gz
deleted file mode 100644
index 26df00c67..000000000
Binary files a/node_modules/.cache/babel-loader/9e4e8d2894f4085717a98e04e3974871d22d28b9a1206db42363d2314834d09e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/a080d1a23754648bdb5e8c7415aa0a3fd22301890abaee9ff2e34c6aa35df12c.json.gz b/node_modules/.cache/babel-loader/a080d1a23754648bdb5e8c7415aa0a3fd22301890abaee9ff2e34c6aa35df12c.json.gz
deleted file mode 100644
index 4e49894c7..000000000
Binary files a/node_modules/.cache/babel-loader/a080d1a23754648bdb5e8c7415aa0a3fd22301890abaee9ff2e34c6aa35df12c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/a257a070456d041ea76151dee68ced2f39e6631b46caae84f548766c0bc44d2e.json.gz b/node_modules/.cache/babel-loader/a257a070456d041ea76151dee68ced2f39e6631b46caae84f548766c0bc44d2e.json.gz
deleted file mode 100644
index 663e69cdd..000000000
Binary files a/node_modules/.cache/babel-loader/a257a070456d041ea76151dee68ced2f39e6631b46caae84f548766c0bc44d2e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/a29cac8cf8dab5757bb7e7dd68c6cded8d492e0a1b4c12583b0265a38ac7fe1c.json.gz b/node_modules/.cache/babel-loader/a29cac8cf8dab5757bb7e7dd68c6cded8d492e0a1b4c12583b0265a38ac7fe1c.json.gz
deleted file mode 100644
index e6d351816..000000000
Binary files a/node_modules/.cache/babel-loader/a29cac8cf8dab5757bb7e7dd68c6cded8d492e0a1b4c12583b0265a38ac7fe1c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/a3ab99a7ada54d733d4c0d7ee23003966064aaf20ef47c14e00b953fa5f2a90f.json.gz b/node_modules/.cache/babel-loader/a3ab99a7ada54d733d4c0d7ee23003966064aaf20ef47c14e00b953fa5f2a90f.json.gz
deleted file mode 100644
index 5eb1d9b71..000000000
Binary files a/node_modules/.cache/babel-loader/a3ab99a7ada54d733d4c0d7ee23003966064aaf20ef47c14e00b953fa5f2a90f.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ac3817f11ad96cd7c906b29d05f9080939182ea6867d80c10950d522da931645.json.gz b/node_modules/.cache/babel-loader/ac3817f11ad96cd7c906b29d05f9080939182ea6867d80c10950d522da931645.json.gz
deleted file mode 100644
index b2dbd60b8..000000000
Binary files a/node_modules/.cache/babel-loader/ac3817f11ad96cd7c906b29d05f9080939182ea6867d80c10950d522da931645.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/acb512dd62b4aba9580d7caf58090f6363675a38a97ed270c522e81684d3a00c.json.gz b/node_modules/.cache/babel-loader/acb512dd62b4aba9580d7caf58090f6363675a38a97ed270c522e81684d3a00c.json.gz
deleted file mode 100644
index e5dc26468..000000000
Binary files a/node_modules/.cache/babel-loader/acb512dd62b4aba9580d7caf58090f6363675a38a97ed270c522e81684d3a00c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/aea0c7b05b214d804d3c192558bbc51db436dce322f4e27c7bf491a17f683a8c.json.gz b/node_modules/.cache/babel-loader/aea0c7b05b214d804d3c192558bbc51db436dce322f4e27c7bf491a17f683a8c.json.gz
deleted file mode 100644
index f0841d42f..000000000
Binary files a/node_modules/.cache/babel-loader/aea0c7b05b214d804d3c192558bbc51db436dce322f4e27c7bf491a17f683a8c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/b3b6dc03ee608800225dedc49cce4b9aa67e2208bf3af45eecd263821439d691.json.gz b/node_modules/.cache/babel-loader/b3b6dc03ee608800225dedc49cce4b9aa67e2208bf3af45eecd263821439d691.json.gz
deleted file mode 100644
index 0d76de357..000000000
Binary files a/node_modules/.cache/babel-loader/b3b6dc03ee608800225dedc49cce4b9aa67e2208bf3af45eecd263821439d691.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/b677fbd73752330d4c51b01c730d1c5df4573733e046da871b44cb191b658753.json.gz b/node_modules/.cache/babel-loader/b677fbd73752330d4c51b01c730d1c5df4573733e046da871b44cb191b658753.json.gz
deleted file mode 100644
index 5a50c8ea7..000000000
Binary files a/node_modules/.cache/babel-loader/b677fbd73752330d4c51b01c730d1c5df4573733e046da871b44cb191b658753.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/b68235784a8a1155ce21560f2190ce2b4bd8b59737b8f7332afd0bd888723c97.json.gz b/node_modules/.cache/babel-loader/b68235784a8a1155ce21560f2190ce2b4bd8b59737b8f7332afd0bd888723c97.json.gz
deleted file mode 100644
index d9185e390..000000000
Binary files a/node_modules/.cache/babel-loader/b68235784a8a1155ce21560f2190ce2b4bd8b59737b8f7332afd0bd888723c97.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/b9ad9415434e146b824f735780f297bc80716ef8e1e601716cb0e4c36412d093.json.gz b/node_modules/.cache/babel-loader/b9ad9415434e146b824f735780f297bc80716ef8e1e601716cb0e4c36412d093.json.gz
deleted file mode 100644
index 18f47b116..000000000
Binary files a/node_modules/.cache/babel-loader/b9ad9415434e146b824f735780f297bc80716ef8e1e601716cb0e4c36412d093.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/badac212d16b2d946a43a49faafee10a35d7ec3efcae54a6548bd74391ca508c.json.gz b/node_modules/.cache/babel-loader/badac212d16b2d946a43a49faafee10a35d7ec3efcae54a6548bd74391ca508c.json.gz
deleted file mode 100644
index 80fe7332d..000000000
Binary files a/node_modules/.cache/babel-loader/badac212d16b2d946a43a49faafee10a35d7ec3efcae54a6548bd74391ca508c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/bc439bf28014792e142da51d71bb37828972e9a28adff36ea5959cd830f2bb2c.json.gz b/node_modules/.cache/babel-loader/bc439bf28014792e142da51d71bb37828972e9a28adff36ea5959cd830f2bb2c.json.gz
deleted file mode 100644
index fbfc1b5d5..000000000
Binary files a/node_modules/.cache/babel-loader/bc439bf28014792e142da51d71bb37828972e9a28adff36ea5959cd830f2bb2c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/bcad760df9d8a736199b023ff4e27a61513de1cd10172c31a562660b3bc429d6.json.gz b/node_modules/.cache/babel-loader/bcad760df9d8a736199b023ff4e27a61513de1cd10172c31a562660b3bc429d6.json.gz
deleted file mode 100644
index 4a8bc9019..000000000
Binary files a/node_modules/.cache/babel-loader/bcad760df9d8a736199b023ff4e27a61513de1cd10172c31a562660b3bc429d6.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/be553e714c83718e8bddf3087425d89a7650fe483a71d78b804a736e833c1285.json.gz b/node_modules/.cache/babel-loader/be553e714c83718e8bddf3087425d89a7650fe483a71d78b804a736e833c1285.json.gz
deleted file mode 100644
index d4f68d06e..000000000
Binary files a/node_modules/.cache/babel-loader/be553e714c83718e8bddf3087425d89a7650fe483a71d78b804a736e833c1285.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/bf45c8260791bbd05d8126d6c8542df5948d308c8405ee75e2830902d6ede1e6.json.gz b/node_modules/.cache/babel-loader/bf45c8260791bbd05d8126d6c8542df5948d308c8405ee75e2830902d6ede1e6.json.gz
deleted file mode 100644
index 29bfa28ca..000000000
Binary files a/node_modules/.cache/babel-loader/bf45c8260791bbd05d8126d6c8542df5948d308c8405ee75e2830902d6ede1e6.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/bf58c7a21648a27fad71c7bc0d7097376996397a48339e10a875fc39de53507a.json.gz b/node_modules/.cache/babel-loader/bf58c7a21648a27fad71c7bc0d7097376996397a48339e10a875fc39de53507a.json.gz
deleted file mode 100644
index 16625f06f..000000000
Binary files a/node_modules/.cache/babel-loader/bf58c7a21648a27fad71c7bc0d7097376996397a48339e10a875fc39de53507a.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/c0a34917af04d61d4c029f54d6939197448a34f4b857307e9679bdc83684074e.json.gz b/node_modules/.cache/babel-loader/c0a34917af04d61d4c029f54d6939197448a34f4b857307e9679bdc83684074e.json.gz
deleted file mode 100644
index bbe8ed302..000000000
Binary files a/node_modules/.cache/babel-loader/c0a34917af04d61d4c029f54d6939197448a34f4b857307e9679bdc83684074e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/c0b8bdfbff93f377f8fb0beac6322da0f1d036561c1bc9ec2925a980e80e01a2.json.gz b/node_modules/.cache/babel-loader/c0b8bdfbff93f377f8fb0beac6322da0f1d036561c1bc9ec2925a980e80e01a2.json.gz
deleted file mode 100644
index d01fcbbd0..000000000
Binary files a/node_modules/.cache/babel-loader/c0b8bdfbff93f377f8fb0beac6322da0f1d036561c1bc9ec2925a980e80e01a2.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/c1d25cfb3503c120e0ccb68f82d0aefc20fafce4c932851056c5c4f12da5f041.json.gz b/node_modules/.cache/babel-loader/c1d25cfb3503c120e0ccb68f82d0aefc20fafce4c932851056c5c4f12da5f041.json.gz
deleted file mode 100644
index 27397489b..000000000
Binary files a/node_modules/.cache/babel-loader/c1d25cfb3503c120e0ccb68f82d0aefc20fafce4c932851056c5c4f12da5f041.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/c2a8e91893d88b1e67443d54d123adcaa73d6c087b5a567c44c4f51e9b44f981.json.gz b/node_modules/.cache/babel-loader/c2a8e91893d88b1e67443d54d123adcaa73d6c087b5a567c44c4f51e9b44f981.json.gz
deleted file mode 100644
index e58ba5ca5..000000000
Binary files a/node_modules/.cache/babel-loader/c2a8e91893d88b1e67443d54d123adcaa73d6c087b5a567c44c4f51e9b44f981.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/c3bc25e09be9a4021f7955cfa24938ce59d33deeaa57e8201d0362c23f81b46e.json.gz b/node_modules/.cache/babel-loader/c3bc25e09be9a4021f7955cfa24938ce59d33deeaa57e8201d0362c23f81b46e.json.gz
deleted file mode 100644
index d6cdeeb10..000000000
Binary files a/node_modules/.cache/babel-loader/c3bc25e09be9a4021f7955cfa24938ce59d33deeaa57e8201d0362c23f81b46e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/c606103bba57e717885d000da0ada54cbeaf869a996fcecc39b58034960a9cdb.json.gz b/node_modules/.cache/babel-loader/c606103bba57e717885d000da0ada54cbeaf869a996fcecc39b58034960a9cdb.json.gz
deleted file mode 100644
index 90c7fb229..000000000
Binary files a/node_modules/.cache/babel-loader/c606103bba57e717885d000da0ada54cbeaf869a996fcecc39b58034960a9cdb.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ca772a20aee5982135b3f1d9422a27dbfc4da37737f244f90051c188cd78ddd8.json.gz b/node_modules/.cache/babel-loader/ca772a20aee5982135b3f1d9422a27dbfc4da37737f244f90051c188cd78ddd8.json.gz
deleted file mode 100644
index 265b18c8e..000000000
Binary files a/node_modules/.cache/babel-loader/ca772a20aee5982135b3f1d9422a27dbfc4da37737f244f90051c188cd78ddd8.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/cd6fc8fa7a018c13337e86cfa2f603bc273e964ba039179bc01ee68daa5e5556.json.gz b/node_modules/.cache/babel-loader/cd6fc8fa7a018c13337e86cfa2f603bc273e964ba039179bc01ee68daa5e5556.json.gz
deleted file mode 100644
index 157be5f75..000000000
Binary files a/node_modules/.cache/babel-loader/cd6fc8fa7a018c13337e86cfa2f603bc273e964ba039179bc01ee68daa5e5556.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/cdaea07aa4df61fecc9dcc789aa0237b3f225fcdde88fee2d4b06743fce98062.json.gz b/node_modules/.cache/babel-loader/cdaea07aa4df61fecc9dcc789aa0237b3f225fcdde88fee2d4b06743fce98062.json.gz
deleted file mode 100644
index c91e8ccf8..000000000
Binary files a/node_modules/.cache/babel-loader/cdaea07aa4df61fecc9dcc789aa0237b3f225fcdde88fee2d4b06743fce98062.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ce89bfaf800d8b3cde05388aee47431369c2a5a65b19233f83519678c5e92fde.json.gz b/node_modules/.cache/babel-loader/ce89bfaf800d8b3cde05388aee47431369c2a5a65b19233f83519678c5e92fde.json.gz
deleted file mode 100644
index 67bb95ec1..000000000
Binary files a/node_modules/.cache/babel-loader/ce89bfaf800d8b3cde05388aee47431369c2a5a65b19233f83519678c5e92fde.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ceeb3cdf10658cc4ac8d273e264fd5213462abe951c7317b80c6207b8d5ae1a2.json.gz b/node_modules/.cache/babel-loader/ceeb3cdf10658cc4ac8d273e264fd5213462abe951c7317b80c6207b8d5ae1a2.json.gz
deleted file mode 100644
index 1d9a323de..000000000
Binary files a/node_modules/.cache/babel-loader/ceeb3cdf10658cc4ac8d273e264fd5213462abe951c7317b80c6207b8d5ae1a2.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/cff5c02dccd055737cecc7dedcc45c591b702f809c31bc9099c97e653288eb95.json.gz b/node_modules/.cache/babel-loader/cff5c02dccd055737cecc7dedcc45c591b702f809c31bc9099c97e653288eb95.json.gz
deleted file mode 100644
index 7ec8a4162..000000000
Binary files a/node_modules/.cache/babel-loader/cff5c02dccd055737cecc7dedcc45c591b702f809c31bc9099c97e653288eb95.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/d567911666ce4ef783ae71cb439aa0f3b4cb26eb063065063fadb75e21483230.json.gz b/node_modules/.cache/babel-loader/d567911666ce4ef783ae71cb439aa0f3b4cb26eb063065063fadb75e21483230.json.gz
deleted file mode 100644
index b148a33fb..000000000
Binary files a/node_modules/.cache/babel-loader/d567911666ce4ef783ae71cb439aa0f3b4cb26eb063065063fadb75e21483230.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/d63221cb0b6269ac298d5747d704b094f91ea7dfd2561e0825f578402b494a75.json.gz b/node_modules/.cache/babel-loader/d63221cb0b6269ac298d5747d704b094f91ea7dfd2561e0825f578402b494a75.json.gz
deleted file mode 100644
index 6740e3947..000000000
Binary files a/node_modules/.cache/babel-loader/d63221cb0b6269ac298d5747d704b094f91ea7dfd2561e0825f578402b494a75.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/d91b2b36e48ca7c0ebb556e15f0c5897c5192cc26b2eba9a88137a56f5241cad.json.gz b/node_modules/.cache/babel-loader/d91b2b36e48ca7c0ebb556e15f0c5897c5192cc26b2eba9a88137a56f5241cad.json.gz
deleted file mode 100644
index 4dcc9e752..000000000
Binary files a/node_modules/.cache/babel-loader/d91b2b36e48ca7c0ebb556e15f0c5897c5192cc26b2eba9a88137a56f5241cad.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/db14184189cdf8443ceb7e3ce19a86dc630384cf4f12bfa0017cabc0b3d22e87.json.gz b/node_modules/.cache/babel-loader/db14184189cdf8443ceb7e3ce19a86dc630384cf4f12bfa0017cabc0b3d22e87.json.gz
deleted file mode 100644
index 994b6b55a..000000000
Binary files a/node_modules/.cache/babel-loader/db14184189cdf8443ceb7e3ce19a86dc630384cf4f12bfa0017cabc0b3d22e87.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/dc77c849468835206eacb1ece80dce1d3c659acc1da1885b7e778aab0fe32045.json.gz b/node_modules/.cache/babel-loader/dc77c849468835206eacb1ece80dce1d3c659acc1da1885b7e778aab0fe32045.json.gz
deleted file mode 100644
index 17f850fbc..000000000
Binary files a/node_modules/.cache/babel-loader/dc77c849468835206eacb1ece80dce1d3c659acc1da1885b7e778aab0fe32045.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/df45a76525273611566339468727cdae541e6b8d685b2752e1ccfe32f70ac9a8.json.gz b/node_modules/.cache/babel-loader/df45a76525273611566339468727cdae541e6b8d685b2752e1ccfe32f70ac9a8.json.gz
deleted file mode 100644
index 4b7669ae8..000000000
Binary files a/node_modules/.cache/babel-loader/df45a76525273611566339468727cdae541e6b8d685b2752e1ccfe32f70ac9a8.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/e00d875e481d22f47d6360bc3ecce5f7ac05a4a5e7651db435e7c1edd7ecb6cc.json.gz b/node_modules/.cache/babel-loader/e00d875e481d22f47d6360bc3ecce5f7ac05a4a5e7651db435e7c1edd7ecb6cc.json.gz
deleted file mode 100644
index 77530f76b..000000000
Binary files a/node_modules/.cache/babel-loader/e00d875e481d22f47d6360bc3ecce5f7ac05a4a5e7651db435e7c1edd7ecb6cc.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/e45f6611ae3be43cc6b5aa48e32a8dca1bac0185e9a5467996f9400108d8b99c.json.gz b/node_modules/.cache/babel-loader/e45f6611ae3be43cc6b5aa48e32a8dca1bac0185e9a5467996f9400108d8b99c.json.gz
deleted file mode 100644
index 46905b88a..000000000
Binary files a/node_modules/.cache/babel-loader/e45f6611ae3be43cc6b5aa48e32a8dca1bac0185e9a5467996f9400108d8b99c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/e73c00b9e00cbf33ad52e119af09a2925210a838a13951e7932659a085214a27.json.gz b/node_modules/.cache/babel-loader/e73c00b9e00cbf33ad52e119af09a2925210a838a13951e7932659a085214a27.json.gz
deleted file mode 100644
index cf75621a3..000000000
Binary files a/node_modules/.cache/babel-loader/e73c00b9e00cbf33ad52e119af09a2925210a838a13951e7932659a085214a27.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/e8bb88eb05d83df788e2a10f96234a06851602eddca5fa04708b8a23f79894ca.json.gz b/node_modules/.cache/babel-loader/e8bb88eb05d83df788e2a10f96234a06851602eddca5fa04708b8a23f79894ca.json.gz
deleted file mode 100644
index 2247be55a..000000000
Binary files a/node_modules/.cache/babel-loader/e8bb88eb05d83df788e2a10f96234a06851602eddca5fa04708b8a23f79894ca.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ed13c9a54578f079d8c9d4ed21f8e6a8c02f484ce3a08d7799f8dc0ef696fe2e.json.gz b/node_modules/.cache/babel-loader/ed13c9a54578f079d8c9d4ed21f8e6a8c02f484ce3a08d7799f8dc0ef696fe2e.json.gz
deleted file mode 100644
index 7c017655f..000000000
Binary files a/node_modules/.cache/babel-loader/ed13c9a54578f079d8c9d4ed21f8e6a8c02f484ce3a08d7799f8dc0ef696fe2e.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ed21795abbfd1a2691c92acf4df52a6a7ad25504bb51743d91923493c38cc93c.json.gz b/node_modules/.cache/babel-loader/ed21795abbfd1a2691c92acf4df52a6a7ad25504bb51743d91923493c38cc93c.json.gz
deleted file mode 100644
index 2f1abfb8a..000000000
Binary files a/node_modules/.cache/babel-loader/ed21795abbfd1a2691c92acf4df52a6a7ad25504bb51743d91923493c38cc93c.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/edcf8fe97e6ff6547bf56432618c726c887cc20e8e476a9f74461348eace8573.json.gz b/node_modules/.cache/babel-loader/edcf8fe97e6ff6547bf56432618c726c887cc20e8e476a9f74461348eace8573.json.gz
deleted file mode 100644
index 490d23469..000000000
Binary files a/node_modules/.cache/babel-loader/edcf8fe97e6ff6547bf56432618c726c887cc20e8e476a9f74461348eace8573.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/efb6d49c98f2a7a00c27a048e1de9d13816ba665fbe73e2afb1165ee3f11af61.json.gz b/node_modules/.cache/babel-loader/efb6d49c98f2a7a00c27a048e1de9d13816ba665fbe73e2afb1165ee3f11af61.json.gz
deleted file mode 100644
index 5a07b2d81..000000000
Binary files a/node_modules/.cache/babel-loader/efb6d49c98f2a7a00c27a048e1de9d13816ba665fbe73e2afb1165ee3f11af61.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/f1005b5d39cef2b0b72cb853cfcdf568563eaae529e6486652260fe4c84bb16f.json.gz b/node_modules/.cache/babel-loader/f1005b5d39cef2b0b72cb853cfcdf568563eaae529e6486652260fe4c84bb16f.json.gz
deleted file mode 100644
index 36838cc74..000000000
Binary files a/node_modules/.cache/babel-loader/f1005b5d39cef2b0b72cb853cfcdf568563eaae529e6486652260fe4c84bb16f.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/f28eeabcf73d2de8205b053399af26a72d8da1380b01e34d6ff458720c03eeb1.json.gz b/node_modules/.cache/babel-loader/f28eeabcf73d2de8205b053399af26a72d8da1380b01e34d6ff458720c03eeb1.json.gz
deleted file mode 100644
index 269a9b13c..000000000
Binary files a/node_modules/.cache/babel-loader/f28eeabcf73d2de8205b053399af26a72d8da1380b01e34d6ff458720c03eeb1.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/f68317661b41a2048ea6563d69b6e323b8f61d7be3838703b535c8832d36e1e0.json.gz b/node_modules/.cache/babel-loader/f68317661b41a2048ea6563d69b6e323b8f61d7be3838703b535c8832d36e1e0.json.gz
deleted file mode 100644
index 2f77f7ab7..000000000
Binary files a/node_modules/.cache/babel-loader/f68317661b41a2048ea6563d69b6e323b8f61d7be3838703b535c8832d36e1e0.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/f9379c17e8d0d328a2c9b0293531b40f46752d6f3749bf8c96a0c28d9659f87b.json.gz b/node_modules/.cache/babel-loader/f9379c17e8d0d328a2c9b0293531b40f46752d6f3749bf8c96a0c28d9659f87b.json.gz
deleted file mode 100644
index 75925c272..000000000
Binary files a/node_modules/.cache/babel-loader/f9379c17e8d0d328a2c9b0293531b40f46752d6f3749bf8c96a0c28d9659f87b.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/fb86862ce9a8d9c0cc7c1762c37edd1c20c5c693b20f6cb85cb5097e12f163cc.json.gz b/node_modules/.cache/babel-loader/fb86862ce9a8d9c0cc7c1762c37edd1c20c5c693b20f6cb85cb5097e12f163cc.json.gz
deleted file mode 100644
index bba8f0b08..000000000
Binary files a/node_modules/.cache/babel-loader/fb86862ce9a8d9c0cc7c1762c37edd1c20c5c693b20f6cb85cb5097e12f163cc.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/fe313d2e0b67af7d79fdab50cb57c5cf6c7803bdd251ab474b477be97e0b5eae.json.gz b/node_modules/.cache/babel-loader/fe313d2e0b67af7d79fdab50cb57c5cf6c7803bdd251ab474b477be97e0b5eae.json.gz
deleted file mode 100644
index d3c1979d8..000000000
Binary files a/node_modules/.cache/babel-loader/fe313d2e0b67af7d79fdab50cb57c5cf6c7803bdd251ab474b477be97e0b5eae.json.gz and /dev/null differ
diff --git a/node_modules/.cache/babel-loader/ff547fafbfc3fcf6efaaf2a54c8b9b89176db32f81e09354d1e7679385396df6.json.gz b/node_modules/.cache/babel-loader/ff547fafbfc3fcf6efaaf2a54c8b9b89176db32f81e09354d1e7679385396df6.json.gz
deleted file mode 100644
index d4bcd99b4..000000000
Binary files a/node_modules/.cache/babel-loader/ff547fafbfc3fcf6efaaf2a54c8b9b89176db32f81e09354d1e7679385396df6.json.gz and /dev/null differ
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 7bdfaa025..ecaf71a69 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -3238,6 +3238,88 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -3261,6 +3343,56 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
@@ -3291,6 +3423,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -3347,6 +3509,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -3494,6 +3684,88 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -3616,6 +3888,138 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -3756,6 +4160,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -3787,6 +4247,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
@@ -3894,6 +4385,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -3971,6 +4495,180 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -4041,6 +4739,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -8274,6 +8990,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -18025,6 +18757,129 @@
         "node": ">=8"
       }
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package-lock.json b/package-lock.json
index 9e3441935..f2d60da11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-switch": "^1.2.6",
@@ -29,6 +30,8 @@
         "@wordpress/icons": "^9.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "radix-ui": "^1.4.3",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.2"
@@ -3525,6 +3528,88 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -3548,6 +3633,56 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
@@ -3578,6 +3713,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -3634,6 +3799,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -3781,6 +3974,88 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -3903,6 +4178,138 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -4043,6 +4450,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -4074,6 +4537,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
@@ -4181,6 +4675,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -4258,6 +4785,180 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -4328,6 +5029,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -8750,6 +9469,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -18701,6 +19436,129 @@
         "node": ">=8"
       }
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index 00c106369..19bcea6f1 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-switch": "^1.2.6",
@@ -40,6 +41,8 @@
     "@wordpress/icons": "^9.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "radix-ui": "^1.4.3",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2"
diff --git a/src/admin/components/App.js b/src/admin/components/App.js
index 6655d6d8c..5c3b5b12c 100644
--- a/src/admin/components/App.js
+++ b/src/admin/components/App.js
@@ -101,7 +101,7 @@ export default function App({ page: initialPage, initialData }) {
     }
 
     return (
-        <div className="formipay-admin-wrap">
+        <div className="formipay-design-system">
             <Toaster />
             <NavigationMenu
                 currentPage={currentPage}
diff --git a/src/admin/components/SettingsRenderer.js b/src/admin/components/SettingsRenderer.js
new file mode 100644
index 000000000..a140c31e5
--- /dev/null
+++ b/src/admin/components/SettingsRenderer.js
@@ -0,0 +1,229 @@
+/**
+ * SettingsRenderer - React settings page with FieldRenderer
+ *
+ * Renders the Formipay settings page using tabs and FieldRenderer.
+ * Handles AJAX save to wp_options instead of post_meta.
+ */
+
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { toast } from '@/lib/toast';
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Toaster } from '@/components/ui/sonner';
+import { Button } from '@/components/ui/button';
+
+import FieldRenderer from './field-renderer/FieldRenderer';
+
+/**
+ * Find the mount point and get config data
+ */
+function getSettingsConfig() {
+    const mountPoint = document.getElementById('formipay-settings-react');
+    if (!mountPoint) {
+        console.warn('[Formipay Settings] Mount point not found');
+        return null;
+    }
+
+    try {
+        const configJson = mountPoint.getAttribute('data-formipay-settings-config');
+        if (!configJson) {
+            console.warn('[Formipay Settings] No config data found');
+            return null;
+        }
+        return JSON.parse(configJson);
+    } catch (e) {
+        console.error('[Formipay Settings] Failed to parse config:', e);
+        return null;
+    }
+}
+
+/**
+ * Save settings via AJAX
+ */
+async function saveSettings(formData) {
+    const response = await fetch(ajaxurl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+            action: 'formipay_save_settings',
+            nonce: formData.nonce,
+            settings: JSON.stringify(formData),
+        }),
+    });
+
+    if (!response.ok) {
+        throw new Error(__('Network response was not ok', 'formipay'));
+    }
+
+    return response.json();
+}
+
+/**
+ * Main SettingsRenderer component
+ */
+export default function SettingsRenderer() {
+    const [config, setConfig] = useState(null);
+    const [activeTab, setActiveTab] = useState('0');
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Load config from DOM
+    useEffect(() => {
+        const settingsConfig = getSettingsConfig();
+        if (settingsConfig) {
+            setConfig(settingsConfig);
+        }
+    }, []);
+
+    // Handle field changes - FieldRenderer passes { fieldName: value }
+    const handleFieldChange = (changes) => {
+        setConfig(prev => {
+            const newTabs = prev.tabs.map(tab => {
+                const newFields = tab.fields.map(field => {
+                    // Update field value if it exists in changes
+                    if (changes.hasOwnProperty(field.name)) {
+                        return { ...field, value: changes[field.name] };
+                    }
+                    return field;
+                });
+                return { ...tab, fields: newFields };
+            });
+            return { ...prev, tabs: newTabs };
+        });
+    };
+
+    // Handle save
+    const handleSave = async () => {
+        if (!config) return;
+
+        setIsSaving(true);
+        try {
+            // Extract form data from config
+            const formData = {
+                nonce: config.nonce,
+            };
+
+            config.tabs.forEach(tab => {
+                tab.fields.forEach(field => {
+                    if (field.type !== 'section') {
+                        formData[field.name] = field.value;
+                    }
+                });
+            });
+
+            const result = await saveSettings(formData);
+
+            if (result.success) {
+                toast.success(__('Settings saved successfully!', 'formipay'));
+            } else {
+                toast.error(result.data?.message || __('Failed to save settings', 'formipay'));
+            }
+        } catch (error) {
+            console.error('Save error:', error);
+            toast.error(__('Error saving settings', 'formipay'));
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    if (!config) {
+        return (
+            <div className="flex items-center justify-center p-8">
+                <div className="w-6 h-6 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="formipay-design-system bg-white" style={{ maxWidth: '1200px', margin: '0 auto', padding: '20px' }}>
+            <Toaster />
+
+            <div className="flex justify-between mb-6">
+                <h1 className="text-2xl font-bold">
+                    {__('Formipay Settings', 'formipay')}
+                </h1>
+                <Button
+                    onClick={handleSave}
+                    disabled={isSaving}
+                    className="min-w-25"
+                >
+                    {isSaving ? (
+                        <>
+                            <div className="w-4 h-4 mr-2 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                            {__('Saving...', 'formipay')}
+                        </>
+                    ) : (
+                        __('Save Settings', 'formipay')
+                    )}
+                </Button>
+            </div>
+
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <TabsList className={`inline-flex h-10 items-center justify-start rounded-md bg-muted p-1 text-muted-foreground mb-6 ${
+                    config.tabs.length > 4 ? 'flex-wrap gap-1' : ''
+                }`}>
+                    {config.tabs.map((tab, index) => (
+                        <TabsTrigger
+                            key={tab.id}
+                            value={String(index)}
+                            className="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-6 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+                        >
+                            {tab.label}
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+
+                {config.tabs.map((tab, index) => (
+                    <TabsContent
+                        key={tab.id}
+                        value={String(index)}
+                        className="px-4 rounded mt-0 ring-offset-background bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    >
+                        <FieldRenderer
+                            config={{
+                                fields: tab.fields,
+                                globalCurrencies: config.globalCurrencies,
+                            }}
+                            onFieldChange={handleFieldChange}
+                        />
+                    </TabsContent>
+                ))}
+            </Tabs>
+        </div>
+    );
+}
+
+/**
+ * Auto-mount on page load
+ */
+function mountSettingsRenderer() {
+    const container = document.getElementById('formipay-settings-react');
+    if (!container) {
+        // Retry after a short delay (jQuery needs to move the element)
+        setTimeout(mountSettingsRenderer, 100);
+        return;
+    }
+
+    // Use WordPress's createRoot if available, otherwise React's
+    const createRoot = window.wp?.element?.createRoot || window.React?.createRoot;
+    const createElement = window.wp?.element?.createElement || window.React?.createElement;
+
+    if (!createRoot || !createElement) {
+        console.error('[Formipay Settings] React not available');
+        return;
+    }
+
+    const root = createRoot(container);
+    root.render(createElement(SettingsRenderer));
+}
+
+// Initialize when DOM is ready and jQuery has moved the element
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        setTimeout(mountSettingsRenderer, 50);
+    });
+} else {
+    setTimeout(mountSettingsRenderer, 50);
+}
diff --git a/src/admin/components/coupons/CouponMetabox.js b/src/admin/components/coupons/CouponMetabox.js
index 312aa6ec0..5fd7beb4f 100644
--- a/src/admin/components/coupons/CouponMetabox.js
+++ b/src/admin/components/coupons/CouponMetabox.js
@@ -16,6 +16,7 @@ import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Toaster } from '@/components/ui/sonner';
 import {
     Select,
     SelectTrigger,
@@ -35,7 +36,9 @@ const getGlobalCurrencies = () => {
 const getCurrencySymbol = (raw) => {
     if (!raw || typeof raw !== 'string') return '';
     const parts = raw.split(':::');
-    return parts[1] || raw;
+    // Format: CODE:::Title:::Symbol (e.g., "USD:::United States dollar:::$")
+    // parts[0] = CODE, parts[1] = Title, parts[2] = Symbol
+    return parts[2] || parts[1] || raw;
 };
 
 const getCurrencyCode = (raw) => {
@@ -51,11 +54,38 @@ const getFlagByCurrency = (raw) => {
     return '';
 };
 
+// Helper to show WordPress admin notice
+const showAdminNotice = (message, type = 'error') => {
+    // Remove existing notices
+    document.querySelectorAll('.formipay-admin-notice').forEach(el => el.remove());
+
+    // Create notice element
+    const notice = document.createElement('div');
+    notice.className = `formipay-admin-notice notice notice-${type} is-dismissible`;
+    notice.innerHTML = `<p><strong>${message}</strong></p>`;
+
+    // Insert at the top of the page
+    const wrap = document.querySelector('.wrap');
+    if (wrap) {
+        wrap.insertBefore(notice, wrap.firstChild);
+    }
+
+    // Auto-dismiss after 5 seconds
+    setTimeout(() => notice.remove(), 5000);
+};
+
 export default function CouponMetabox({ postId }) {
     const [loading, setLoading] = useState(true);
-    const [saving, setSaving] = useState(false);
     const [globalCurrencies, setGlobalCurrencies] = useState([]);
 
+    // Debug: Check if global currencies are available on mount
+    useEffect(() => {
+        console.log('[CouponMetabox] Component mounted');
+        console.log('[CouponMetabox] window.formipayGlobalCurrencies:', window.formipayGlobalCurrencies);
+        const currencies = getGlobalCurrencies();
+        console.log('[CouponMetabox] getGlobalCurrencies():', currencies);
+    }, []);
+
     const [formData, setFormData] = useState({
         active: 'on',
         type: 'percentage',
@@ -73,11 +103,190 @@ export default function CouponMetabox({ postId }) {
     });
 
     useEffect(() => {
-        setGlobalCurrencies(getGlobalCurrencies());
+        const currencies = getGlobalCurrencies();
+        console.log('Loaded currencies:', currencies);
+        console.log('Number of currencies:', currencies.length);
+        setGlobalCurrencies(currencies);
         if (postId > 0) loadCouponData();
         else setLoading(false);
     }, [postId]);
 
+    // Sync hidden form inputs with WordPress post form
+    useEffect(() => {
+        if (loading) return;
+
+        // Find or create hidden inputs container in the post form
+        let container = document.getElementById('formipay-hidden-fields');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'formipay-hidden-fields';
+            container.className = 'hidden';
+            // WordPress uses form#post as the main post form
+            const postForm = document.querySelector('form#post');
+            if (postForm) {
+                postForm.appendChild(container);
+                console.log('Created formipay-hidden-fields container in form#post');
+            } else {
+                console.error('Could not find WordPress post form (form#post)');
+            }
+        }
+
+        if (!container) return;
+
+        // Clear existing inputs
+        container.innerHTML = '';
+
+        // Add hidden inputs for all form fields
+        const createInput = (name, value) => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = name;
+            input.value = value || '';
+            container.appendChild(input);
+        };
+
+        createInput('active', formData.active);
+        createInput('type', formData.type);
+        createInput('amount_percentage', formData.amount_percentage);
+        createInput('case_sensitive', formData.case_sensitive);
+        createInput('free_shipping', formData.free_shipping);
+        createInput('quantity_active', formData.quantity_active);
+        createInput('use_limit', formData.use_limit);
+        createInput('date_limit', formData.date_limit);
+
+        // Add currency inputs using currency CODE as key (matches PHP expectations)
+        Object.entries(formData.amounts_fixed).forEach(([code, amount]) => {
+            createInput(`amount_fixed_${code}`, amount);
+            console.log(`Created hidden input: amount_fixed_${code} = ${amount}`);
+        });
+        Object.entries(formData.max_amounts).forEach(([code, amount]) => {
+            createInput(`max_amount_${code}`, amount);
+            console.log(`Created hidden input: max_amount_${code} = ${amount}`);
+        });
+
+        // Add relation fields as arrays
+        formData.forms.forEach(id => {
+            createInput('forms[]', id);
+        });
+        formData.products.forEach(id => {
+            createInput('products[]', id);
+        });
+        formData.customers.forEach(id => {
+            createInput('customers[]', id);
+        });
+
+        console.log('Hidden inputs synced with WordPress form', {
+            active: formData.active,
+            type: formData.type,
+            amount_percentage: formData.amount_percentage,
+            hasFixedAmounts: Object.keys(formData.amounts_fixed).length > 0,
+        });
+    }, [formData, loading]);
+
+    // Validate and prevent submission if required fields are empty
+    useEffect(() => {
+        if (loading) return;
+
+        const postForm = document.querySelector('form#post');
+        if (!postForm) return;
+
+        const validate = () => {
+            // Read current values from the hidden inputs (not from closure)
+            const container = document.getElementById('formipay-hidden-fields');
+            if (!container) return true;
+
+            const getType = () => container.querySelector('input[name="type"]')?.value || '';
+            const getAmountPercentage = () => container.querySelector('input[name="amount_percentage"]')?.value || '';
+            const getFixedAmounts = () => {
+                const amounts = {};
+                container.querySelectorAll('input[name^="amount_fixed_"]').forEach(input => {
+                    const code = input.name.replace('amount_fixed_', '');
+                    amounts[code] = input.value;
+                });
+                return amounts;
+            };
+
+            const type = getType();
+            const amountPercentage = getAmountPercentage();
+            const fixedAmounts = getFixedAmounts();
+
+            console.log('Validating form from DOM:', { type, amountPercentage, fixedAmounts });
+
+            // Validate type is always set
+            if (!type) {
+                const msg = __('Discount Type is required.', 'formipay');
+                toast.error(msg);
+                showAdminNotice(msg, 'error');
+                return false;
+            }
+
+            // Validate amount based on type
+            if (type === 'percentage') {
+                console.log('Validating percentage type, amount_percentage:', amountPercentage);
+                if (!amountPercentage || amountPercentage === '' || parseFloat(amountPercentage) <= 0) {
+                    const msg = __('Discount Amount (%) is required.', 'formipay');
+                    toast.error(msg);
+                    showAdminNotice(msg, 'error');
+                    return false;
+                }
+            } else if (type === 'fixed') {
+                console.log('Validating fixed type, fixedAmounts:', fixedAmounts);
+                const hasAnyAmount = Object.values(fixedAmounts).some(v => {
+                    const numValue = parseFloat(v);
+                    const isValid = v && v !== '' && !isNaN(numValue) && numValue > 0;
+                    console.log(`Checking value "${v}": parsed=${numValue}, valid=${isValid}`);
+                    return isValid;
+                });
+                console.log('hasAnyAmount:', hasAnyAmount);
+                if (!hasAnyAmount) {
+                    const msg = __('At least one Discount Amount is required.', 'formipay');
+                    toast.error(msg);
+                    showAdminNotice(msg, 'error');
+                    return false;
+                }
+            }
+
+            console.log('Form validation passed, allowing submission');
+            return true;
+        };
+
+        const handleSubmit = (e) => {
+            if (!validate()) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                return false;
+            }
+            return true;
+        };
+
+        // Handle WordPress submit button click (might use different event)
+        const handleButtonClick = (e) => {
+            const button = e.target;
+            console.log('Button clicked:', button.id, button.name, button.type);
+            if (button.id === 'publish' || button.name === 'save' || button.classList.contains('button-primary')) {
+                console.log('Submit button clicked, validating...');
+                if (!validate()) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    return false;
+                }
+            }
+        };
+
+        // Remove existing listeners to avoid duplicates
+        postForm.removeEventListener('submit', handleSubmit);
+        postForm.addEventListener('submit', handleSubmit, true); // Use capture phase
+
+        // Listen for button clicks
+        document.removeEventListener('click', handleButtonClick);
+        document.addEventListener('click', handleButtonClick, true); // Use capture phase
+
+        return () => {
+            postForm.removeEventListener('submit', handleSubmit);
+            document.removeEventListener('click', handleButtonClick);
+        };
+    }, [formData, loading]);
+
     const loadCouponData = async () => {
         try {
             const res = await fetch(`${window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php'}?action=formipay-get-coupon`, {
@@ -99,8 +308,9 @@ export default function CouponMetabox({ postId }) {
                     quantity_active: d.quantity_active || '',
                     use_limit: d.use_limit || '',
                     date_limit: d.date_limit || '',
-                    amounts_fixed: Array.isArray(d.amounts_fixed) ? d.amounts_fixed.reduce((a, i) => { if (i?.symbol) a[i.symbol] = i.amount; return a; }, {}) : {},
-                    max_amounts: Array.isArray(d.max_amounts) ? d.max_amounts.reduce((a, i) => { if (i?.symbol) a[i.symbol] = i.amount; return a; }, {}) : {},
+                    // Use currency CODE as key (i.currency contains 'IDR', 'USD', etc.)
+                    amounts_fixed: Array.isArray(d.amounts_fixed) ? d.amounts_fixed.reduce((a, i) => { if (i?.currency) a[i.currency] = i.amount; return a; }, {}) : {},
+                    max_amounts: Array.isArray(d.max_amounts) ? d.max_amounts.reduce((a, i) => { if (i?.currency) a[i.currency] = i.amount; return a; }, {}) : {},
                     forms: Array.isArray(d.forms) ? d.forms : [],
                     products: Array.isArray(d.products) ? d.products : [],
                     customers: Array.isArray(d.customers) ? d.customers : [],
@@ -116,37 +326,6 @@ export default function CouponMetabox({ postId }) {
 
     const set = (field, value) => setFormData(prev => ({ ...prev, [field]: value }));
 
-    const handleSave = async () => {
-        setSaving(true);
-        try {
-            const params = new URLSearchParams({
-                id: postId,
-                title: document.querySelector('#title input')?.value || '',
-                _wpnonce: window.formipayAdmin?.nonce || '',
-                ...formData,
-            });
-            Object.entries(formData.amounts_fixed).forEach(([s, a]) => params.append(`amount_fixed_${s}`, a));
-            Object.entries(formData.max_amounts).forEach(([s, a]) => params.append(`max_amount_${s}`, a));
-
-            const res = await fetch(`${window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php'}?action=formipay-save-coupon`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: params,
-            });
-            const result = await res.json();
-            if (result.success) {
-                toast.success(result.data.message || __('Coupon saved.', 'formipay'));
-            } else {
-                toast.error(result.data?.message || __('Failed to save coupon.', 'formipay'));
-            }
-        } catch (e) {
-            toast.error(__('Failed to save coupon.', 'formipay'));
-        } finally {
-            setSaving(false);
-        }
-    };
-
     const isPercentage = formData.type === 'percentage';
     const isFixed = formData.type === 'fixed';
 
@@ -163,8 +342,9 @@ export default function CouponMetabox({ postId }) {
 
     return (
         <div className="formipay-design-system">
+            <Toaster />
             <Tabs defaultValue="rules" className="w-full">
-                <div className="flex items-center justify-between border-b mb-6">
+                <div className="border-b mb-6">
                     <TabsList className="bg-transparent h-auto p-0 gap-0">
                         <TabsTrigger
                             value="rules"
@@ -179,9 +359,6 @@ export default function CouponMetabox({ postId }) {
                             {__('Restrictions', 'formipay')}
                         </TabsTrigger>
                     </TabsList>
-                    <Button onClick={handleSave} disabled={saving} size="sm">
-                        {saving ? __('Saving...', 'formipay') : __('Save Coupon', 'formipay')}
-                    </Button>
                 </div>
 
                 {/* ── Rules Tab ── */}
@@ -230,12 +407,19 @@ export default function CouponMetabox({ postId }) {
                         <>
                             <Separator />
                             <SectionTitle>{__('Discount Amount', 'formipay')}</SectionTitle>
+                            {!loading && globalCurrencies.length === 0 && (
+                                <p className="text-sm text-destructive py-3 border border-destructive rounded">
+                                    {__('No currencies configured. Please configure global currencies first.', 'formipay')}
+                                </p>
+                            )}
+                            {console.log('[Discount Amount] isFixed=true, globalCurrencies.length=', globalCurrencies.length, 'loading=', loading)}
                             {globalCurrencies.map((c) => {
                                 if (!c?.currency) return null;
                                 const symbol = getCurrencySymbol(c.currency);
                                 const code = getCurrencyCode(c.currency);
                                 const flag = getFlagByCurrency(c.currency);
                                 const step = c.decimal_digits > 0 ? 1 / (c.decimal_digits * 10) : 1;
+                                console.log('Rendering currency input:', { currency: c.currency, symbol, code, currentValue: formData.amounts_fixed[code] });
                                 return (
                                     <FormField key={code} id={`amount_${code}`} label={
                                         <span className="flex items-center gap-1.5">
@@ -248,8 +432,11 @@ export default function CouponMetabox({ postId }) {
                                             min="0"
                                             step={step}
                                             placeholder={__('Enter Amount...', 'formipay')}
-                                            value={formData.amounts_fixed[symbol] || ''}
-                                            onChange={(e) => set('amounts_fixed', { ...formData.amounts_fixed, [symbol]: e.target.value })}
+                                            value={formData.amounts_fixed[code] || ''}
+                                            onChange={(e) => {
+                                                console.log('Amount input changed:', { code, symbol, value: e.target.value });
+                                                set('amounts_fixed', { ...formData.amounts_fixed, [code]: e.target.value });
+                                            }}
                                         />
                                     </FormField>
                                 );
@@ -258,13 +445,21 @@ export default function CouponMetabox({ postId }) {
                     )}
 
                     <Separator />
-                    <SectionTitle>{__('Max Discount', 'formipay')}</SectionTitle>
-                    {globalCurrencies.map((c) => {
+                    {isPercentage && (
+                        <>
+                            <SectionTitle>{__('Max Discount Amount', 'formipay')}</SectionTitle>
+                            {!loading && globalCurrencies.length === 0 && (
+                                <p className="text-sm text-destructive py-3 border border-destructive rounded">
+                                    {__('No currencies configured. Please configure global currencies first.', 'formipay')}
+                                </p>
+                            )}
+                            {globalCurrencies.map((c) => {
                         if (!c?.currency) return null;
                         const symbol = getCurrencySymbol(c.currency);
                         const code = getCurrencyCode(c.currency);
                         const flag = getFlagByCurrency(c.currency);
                         const step = c.decimal_digits > 0 ? 1 / (c.decimal_digits * 10) : 1;
+                        console.log('Rendering max amount input:', { currency: c.currency, symbol, code, currentValue: formData.max_amounts[code] });
                         return (
                             <FormField key={`max_${code}`} id={`max_${code}`} label={
                                 <span className="flex items-center gap-1.5">
@@ -277,12 +472,17 @@ export default function CouponMetabox({ postId }) {
                                     min="0"
                                     step={step}
                                     placeholder={__('No limit', 'formipay')}
-                                    value={formData.max_amounts[symbol] || ''}
-                                    onChange={(e) => set('max_amounts', { ...formData.max_amounts, [symbol]: e.target.value })}
+                                    value={formData.max_amounts[code] || ''}
+                                    onChange={(e) => {
+                                        console.log('Max amount input changed:', { code, symbol, value: e.target.value });
+                                        set('max_amounts', { ...formData.max_amounts, [code]: e.target.value });
+                                    }}
                                 />
                             </FormField>
                         );
                     })}
+                        </>
+                    )}
 
                     <Separator />
                     <SectionTitle>{__('Rules', 'formipay')}</SectionTitle>
@@ -371,7 +571,7 @@ export default function CouponMetabox({ postId }) {
 /* ── Sub-components ── */
 
 function SectionTitle({ children }) {
-    return <h3 className="text-sm font-medium text-muted-foreground tracking-wide uppercase">{children}</h3>;
+    return <h3 className="text-base font-semibold text-foreground">{children}</h3>;
 }
 
 function FormField({ id, label, description, required, children }) {
diff --git a/src/admin/components/dashboard/AnalyticsDashboard.js b/src/admin/components/dashboard/AnalyticsDashboard.js
index dd29c78cc..6d38f57cc 100644
--- a/src/admin/components/dashboard/AnalyticsDashboard.js
+++ b/src/admin/components/dashboard/AnalyticsDashboard.js
@@ -20,13 +20,21 @@ export default function AnalyticsDashboard() {
         pendingOrders: 0,
     });
     const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
     const [dateRange, setDateRange] = useState('30');
 
     const loadStats = useCallback(() => {
         setLoading(true);
-        // This would be a dedicated stats API endpoint
-        // For now, we'll fetch orders and calculate
-        ordersApi.list({ limit: 1000 })
+        setError(null);
+
+        const now = new Date();
+        const daysAgo = new Date(now);
+        daysAgo.setDate(now.getDate() - parseInt(dateRange, 10));
+
+        ordersApi.list({
+            limit: 1000,
+            date_from: daysAgo.toISOString().split('T')[0],
+        })
         .then(result => {
             if (result.data) {
                 const orders = result.data.results || [];
@@ -45,8 +53,9 @@ export default function AnalyticsDashboard() {
                 });
             }
         })
-        .catch(error => {
-            console.error('Load stats error:', error);
+        .catch(err => {
+            setError(__('Failed to load dashboard data.', 'formipay'));
+            console.error('Load stats error:', err);
         })
         .finally(() => {
             setLoading(false);
@@ -57,11 +66,13 @@ export default function AnalyticsDashboard() {
         loadStats();
     }, [loadStats]);
 
+    const currencyCode = window.formipayAdmin?.currencyCode || 'USD';
+
     return (
         <div className="formipay-analytics-dashboard">
             <div className="formipay-dashboard-header">
                 <h2>
-                    <Icon icon={chartLine()} />
+                    <Icon icon={chartLine} />
                     { __('Dashboard', 'formipay') }
                 </h2>
                 <SelectControl
@@ -80,12 +91,16 @@ export default function AnalyticsDashboard() {
                 <div className="formipay-loading">
                     <span className="spinner is-active" />
                 </div>
+            ) : error ? (
+                <div className="formipay-loading">
+                    <p className="error-message">{error}</p>
+                </div>
             ) : (
                 <>
                     <div className="formipay-stats-grid">
                         <div className="stat-card">
                             <div className="stat-icon">
-                                <Icon icon={shoppingCart()} size={24} />
+                                <Icon icon={shoppingCart} size={24} />
                             </div>
                             <div className="stat-content">
                                 <span className="stat-label">
@@ -99,16 +114,16 @@ export default function AnalyticsDashboard() {
 
                         <div className="stat-card">
                             <div className="stat-icon">
-                                <Icon icon={money()} size={24} />
+                                <Icon icon={money} size={24} />
                             </div>
                             <div className="stat-content">
                                 <span className="stat-label">
-                                    { __('Total Revenue', 'formipay') }
+                                    { __('Completed Revenue', 'formipay') }
                                 </span>
                                 <span className="stat-value">
                                     { stats.totalRevenue.toLocaleString('en-US', {
                                         style: 'currency',
-                                        currency: 'USD',
+                                        currency: currencyCode,
                                     }) }
                                 </span>
                             </div>
@@ -116,7 +131,7 @@ export default function AnalyticsDashboard() {
 
                         <div className="stat-card">
                             <div className="stat-icon completed">
-                                <span>✓</span>
+                                <span>&#10003;</span>
                             </div>
                             <div className="stat-content">
                                 <span className="stat-label">
@@ -130,7 +145,7 @@ export default function AnalyticsDashboard() {
 
                         <div className="stat-card">
                             <div className="stat-icon pending">
-                                <span>⏱</span>
+                                <span>&#9201;</span>
                             </div>
                             <div className="stat-content">
                                 <span className="stat-label">
diff --git a/src/admin/components/field-renderer/DependencyEngine.js b/src/admin/components/field-renderer/DependencyEngine.js
new file mode 100644
index 000000000..3420c02f3
--- /dev/null
+++ b/src/admin/components/field-renderer/DependencyEngine.js
@@ -0,0 +1,73 @@
+/**
+ * Dependency Engine - Evaluates field visibility rules
+ *
+ * Handles:
+ * - Simple field = value dependencies
+ * - not_empty / empty operators
+ * - AND/OR logic for multiple dependencies
+ */
+
+/**
+ * Evaluate if a dependency rule is satisfied
+ */
+export function evaluateDependency(dependency, formData) {
+    if (!dependency) return true;
+
+    // Handle OR mode (any rule must match)
+    if (dependency.mode === 'or' && Array.isArray(dependency.rules)) {
+        return dependency.rules.some(rule => evaluateSingleRule(rule, formData));
+    }
+
+    // Handle AND mode (all rules must match)
+    if (dependency.mode === 'and' && Array.isArray(dependency.rules)) {
+        return dependency.rules.every(rule => evaluateSingleRule(rule, formData));
+    }
+
+    // Handle single dependency
+    return evaluateSingleRule(dependency, formData);
+}
+
+/**
+ * Evaluate a single dependency rule
+ */
+export function evaluateSingleRule(rule, formData) {
+    if (!rule || !rule.field) return true;
+
+    const { field, operator, value } = rule;
+    const currentValue = formData[field];
+
+    switch (operator) {
+        case 'not_empty':
+            return !!currentValue && currentValue !== '';
+        case 'empty':
+            return !currentValue || currentValue === '';
+        case 'eq':
+        default:
+            return currentValue === value;
+    }
+}
+
+/**
+ * Check if a field should be visible based on dependencies
+ */
+export function isFieldVisible(field, formData) {
+    if (!field.dependency) return true;
+    return evaluateDependency(field.dependency, formData);
+}
+
+/**
+ * Get all visible fields from a list
+ */
+export function getVisibleFields(fields, formData) {
+    return fields.filter(field => isFieldVisible(field, formData));
+}
+
+/**
+ * Get required visible fields from a list
+ */
+export function getRequiredFields(fields, formData) {
+    return fields.filter(field => {
+        if (!field.required) return false;
+        return isFieldVisible(field, formData);
+    });
+}
diff --git a/src/admin/components/field-renderer/FieldRenderer.js b/src/admin/components/field-renderer/FieldRenderer.js
new file mode 100644
index 000000000..e21cff21a
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldRenderer.js
@@ -0,0 +1,278 @@
+/**
+ * FieldRenderer - Generic field renderer driven by PHP config
+ *
+ * Renders any field configuration array using shadcn/ui components.
+ * This replaces the WPCFTO Vue.js rendering layer while keeping the
+ * PHP field configuration arrays unchanged.
+ */
+
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { toast } from '@/lib/toast';
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Toaster } from '@/components/ui/sonner';
+import { Separator } from '@/components/ui/separator';
+import { Label } from '@/components/ui/label';
+
+import * as DependencyEngine from './DependencyEngine';
+import * as ValidationEngine from './ValidationEngine';
+import HiddenInputSync from './HiddenInputSync';
+
+import TextField from './FieldTypes/TextField';
+import NumberField from './FieldTypes/NumberField';
+import TextareaField from './FieldTypes/TextareaField';
+import SelectField from './FieldTypes/SelectField';
+import RadioField from './FieldTypes/RadioField';
+import DateField from './FieldTypes/DateField';
+import AutocompleteField from './FieldTypes/AutocompleteField';
+import SwitchField from './FieldTypes/SwitchField';
+import SectionField from './FieldTypes/SectionField';
+import ImageField from './FieldTypes/ImageField';
+import TinymceField from './FieldTypes/TinymceField';
+import RepeaterField from './FieldTypes/RepeaterField';
+import VariationField from './FieldTypes/VariationField';
+import NotificationField from './FieldTypes/NotificationField';
+import ColorField from './FieldTypes/ColorField';
+import ImageSelectField from './FieldTypes/ImageSelectField';
+import HintTextareaField from './FieldTypes/HintTextareaField';
+import MultiCheckboxField from './FieldTypes/MultiCheckboxField';
+
+/**
+ * Field type registry - maps field types to React components
+ */
+const FIELD_REGISTRY = {
+    text: TextField,
+    number: NumberField,
+    textarea: TextareaField,
+    select: SelectField,
+    radio: RadioField,
+    date: DateField,
+    autocomplete: AutocompleteField,
+    switch: SwitchField,
+    checkbox: SwitchField,
+    group_title: SectionField,
+    section: SectionField,
+    image: ImageField,
+    tinymce: TinymceField,
+    editor: TinymceField,
+    repeater: RepeaterField,
+    variation: VariationField,
+    notification: NotificationField,
+    notification_message: NotificationField,
+    color: ColorField,
+    image_select: ImageSelectField,
+    hint_textarea: HintTextareaField,
+    multi_checkbox: MultiCheckboxField,
+};
+
+/**
+ * Main FieldRenderer component
+ */
+export default function FieldRenderer({ config }) {
+    const [formData, setFormData] = useState({});
+    const [errors, setErrors] = useState({});
+    const [mounted, setMounted] = useState(false);
+
+    // Initialize form data from config
+    useEffect(() => {
+        const initialData = {};
+
+        // Handle both tabs (metabox) and fields (settings) config formats
+        if (config.tabs) {
+            config.tabs.forEach(tab => {
+                tab.fields.forEach(field => {
+                    if (field.type === 'section') return;
+                    initialData[field.name] = field.value !== null ? field.value : '';
+                });
+            });
+        } else if (config.fields) {
+            config.fields.forEach(field => {
+                if (field.type === 'section') return;
+                initialData[field.name] = field.value !== null ? field.value : '';
+            });
+        }
+
+        setFormData(initialData);
+        setMounted(true);
+    }, [config]);
+
+    // Handle field value changes
+    const setFieldValue = (fieldName, value) => {
+        setFormData(prev => ({
+            ...prev,
+            [fieldName]: value
+        }));
+    };
+
+    // Handle form submission (WordPress Update button)
+    useEffect(() => {
+        if (!mounted) return;
+
+        const postForm = document.querySelector('form#post');
+        if (!postForm) return;
+
+        const handleSubmit = (e) => {
+            // Collect all visible fields
+            const allFields = [];
+
+            // Handle both tabs (metabox) and fields (settings) config formats
+            if (config.tabs) {
+                config.tabs.forEach(tab => {
+                    const visibleFields = DependencyEngine.getVisibleFields(tab.fields, formData);
+                    allFields.push(...visibleFields);
+                });
+            } else if (config.fields) {
+                const visibleFields = DependencyEngine.getVisibleFields(config.fields, formData);
+                allFields.push(...visibleFields);
+            }
+
+            // Validate
+            const validation = ValidationEngine.validateForm(allFields, formData);
+
+            if (!validation.valid) {
+                // Prevent submission
+                e.preventDefault();
+                e.stopImmediatePropagation();
+
+                // Show first error
+                const firstError = Object.values(validation.errors)[0];
+                // Render HTML in toast by passing a div
+                toast.error(<div>{firstError}</div>);
+                return false;
+            }
+        };
+
+        // Listen for WordPress form submission
+        postForm.addEventListener('submit', handleSubmit, true);
+
+        return () => {
+            postForm.removeEventListener('submit', handleSubmit, true);
+        };
+    }, [formData, config, mounted]);
+
+    if (!mounted) {
+        return (
+            <div className="formipay-design-system p-6">
+                <div className="text-sm text-muted-foreground">
+                    {__('Loading...', 'formipay')}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="formipay-design-system">
+            <Toaster />
+
+            {/* Render tabs if config has tabs (metabox mode) */}
+            {config.tabs ? (
+                <Tabs defaultValue={config.tabs[0]?.id} className="w-full">
+                    <div className="border-b mb-0">
+                        <TabsList className="bg-transparent h-auto p-0 gap-0">
+                            {config.tabs.map(tab => (
+                                <TabsTrigger
+                                    key={tab.id}
+                                    value={tab.id}
+                                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5"
+                                >
+                                    {tab.label}
+                                </TabsTrigger>
+                            ))}
+                        </TabsList>
+                    </div>
+
+                    {config.tabs.map(tab => (
+                        <TabsContent key={tab.id} value={tab.id} className="space-y-4 mt-0">
+                            {renderFields(tab.fields, formData, setFieldValue, errors)}
+                        </TabsContent>
+                    ))}
+                </Tabs>
+            ) : (
+                /* Render fields directly if config has fields (settings mode) */
+                <div className="space-y-4">
+                    {renderFields(config.fields, formData, setFieldValue, errors)}
+                </div>
+            )}
+
+            <HiddenInputSync formData={formData} config={config} />
+        </div>
+    );
+}
+
+/**
+ * Render a list of fields with section grouping
+ * Hides empty sections (those with no visible fields)
+ */
+function renderFields(fields, formData, setFieldValue, errors) {
+    const result = [];
+    let currentSection = null;
+    let sectionFields = [];
+
+    fields.forEach((field, index) => {
+        // Handle section headers
+        if (field.type === 'section') {
+            // If we have a previous section with fields, render it
+            if (currentSection && sectionFields.length > 0) {
+                result.push(
+                    <div key={currentSection.name || currentSection.label || index}>
+                        <SectionField field={currentSection} />
+                        {sectionFields}
+                    </div>
+                );
+                sectionFields = [];
+            }
+            currentSection = field;
+            return;
+        }
+
+        // Check if field should be visible
+        if (!DependencyEngine.isFieldVisible(field, formData)) {
+            return;
+        }
+
+        // Get field component
+        let FieldComponent;
+        if (field.type === 'repeater') {
+            FieldComponent = FIELD_REGISTRY.repeater;
+        } else {
+            FieldComponent = FIELD_REGISTRY[field.type];
+        }
+
+        if (!FieldComponent) return;
+
+        // Notification fields don't need value/onChange props
+        const isNotificationField = field.type === 'notification' || field.type === 'notification_message';
+
+        sectionFields.push(
+            <FieldComponent
+                key={field.name}
+                field={field}
+                {...(!isNotificationField && {
+                    value: formData[field.name],
+                    onChange: (value) => setFieldValue(field.name, value),
+                    error: errors[field.name],
+                    formData,
+                    setFieldValue,
+                })}
+            />
+        );
+    });
+
+    // Render last section if it has fields
+    if (currentSection && sectionFields.length > 0) {
+        result.push(
+            <div key={currentSection.name || currentSection.label || 'last'}>
+                <SectionField field={currentSection} />
+                {sectionFields}
+            </div>
+        );
+    }
+
+    // Render fields without a section
+    if (!currentSection && sectionFields.length > 0) {
+        result.push(...sectionFields);
+    }
+
+    return result;
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/AutocompleteField.js b/src/admin/components/field-renderer/FieldTypes/AutocompleteField.js
new file mode 100644
index 000000000..621298b98
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/AutocompleteField.js
@@ -0,0 +1,229 @@
+/**
+ * AutocompleteField - Searchable multi-select for WordPress posts
+ */
+
+import { useState, useEffect } from '@wordpress/element';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { __ } from '@wordpress/i18n';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function AutocompleteField({ field, value, onChange, error }) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedItems, setSelectedItems] = useState({});
+
+    // Value is an array of post IDs
+    const selectedIds = Array.isArray(value) ? value : [];
+
+    // Load titles for selected IDs on mount
+    useEffect(() => {
+        if (selectedIds.length === 0) {
+            setSelectedItems({});
+            return;
+        }
+
+        // Only fetch IDs we don't have titles for yet
+        const missingIds = selectedIds.filter(id => !selectedItems[id]);
+
+        if (missingIds.length === 0) return;
+
+        const loadTitles = async () => {
+            try {
+                const params = new URLSearchParams({
+                    action: 'formipay-autocomplete-search',
+                    _wpnonce: window.formipayAdmin?.nonce || '',
+                    include: missingIds.join(','),
+                });
+
+                // Add post_type or object_type based on field config
+                if (field.object_type) {
+                    params.append('object_type', field.object_type);
+                } else if (field.post_type) {
+                    params.append('post_type', field.post_type.join(','));
+                }
+
+                const response = await fetch(window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: params,
+                });
+
+                const data = await response.json();
+                if (data.success && data.data) {
+                    const newItems = {};
+                    data.data.forEach(item => {
+                        newItems[item.value] = item.label;
+                    });
+                    setSelectedItems(prev => ({ ...prev, ...newItems }));
+                }
+            } catch (err) {
+                console.error('[Formipay] Failed to load selected item titles:', err);
+            }
+        };
+
+        loadTitles();
+    }, [selectedIds.join(','), field.post_type, field.object_type]);
+
+    // Fetch suggestions via AJAX
+    useEffect(() => {
+        if (!searchTerm || searchTerm.length < 2) {
+            setSuggestions([]);
+            return;
+        }
+
+        const timeoutId = setTimeout(async () => {
+            setIsLoading(true);
+            try {
+                // Use the WordPress AJAX to search posts
+                const params = new URLSearchParams({
+                    action: 'formipay-autocomplete-search',
+                    _wpnonce: window.formipayAdmin?.nonce || '',
+                    search: searchTerm,
+                });
+
+                // Add post_type or object_type based on field config
+                if (field.object_type) {
+                    params.append('object_type', field.object_type);
+                } else if (field.post_type) {
+                    params.append('post_type', field.post_type.join(','));
+                }
+
+                const response = await fetch(window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: params,
+                });
+
+                const data = await response.json();
+                if (data.success && data.data) {
+                    setSuggestions(data.data.map(item => ({
+                        id: item.value,
+                        title: item.label
+                    })));
+                } else {
+                    setSuggestions([]);
+                }
+            } catch (err) {
+                console.error('[Formipay] Autocomplete search failed:', err);
+                setSuggestions([]);
+            } finally {
+                setIsLoading(false);
+            }
+        }, 300);
+
+        return () => clearTimeout(timeoutId);
+    }, [searchTerm, field.post_type]);
+
+    const addSuggestion = (item) => {
+        if (!selectedIds.includes(item.id)) {
+            // Store the title when adding
+            setSelectedItems(prev => ({
+                ...prev,
+                [item.id]: item.title
+            }));
+            onChange([...selectedIds, item.id]);
+        }
+        setSearchTerm('');
+        setSuggestions([]);
+    };
+
+    const removeItem = (id) => {
+        onChange(selectedIds.filter(item => item !== id));
+        // Remove from selected items map
+        setSelectedItems(prev => {
+            const updated = { ...prev };
+            delete updated[id];
+            return updated;
+        });
+    };
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={field.label} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="space-y-2 min-w-0 text-left">
+                {/* Selected items */}
+                {selectedIds.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                        {selectedIds.map(id => (
+                            <Badge key={id} variant="secondary" className="gap-1">
+                                <span>
+                                    {selectedItems[id] || `Loading...`} ({id})
+                                </span>
+                                <button
+                                    type="button"
+                                    onClick={() => removeItem(id)}
+                                    className="ml-1 hover:bg-destructive/20 rounded-full p-0.5 text-xs"
+                                >
+                                    ×
+                                </button>
+                            </Badge>
+                        ))}
+                    </div>
+                )}
+
+                {/* Search input */}
+                <div className="relative">
+                    <Input
+                        id={field.name}
+                        type="text"
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        placeholder={field.placeholder || __('Search...', 'formipay')}
+                        className={error && 'border-destructive'}
+                    />
+                    {isLoading && (
+                        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                        </div>
+                    )}
+
+                    {/* Suggestions dropdown */}
+                    {suggestions.length > 0 && (
+                        <div className="absolute z-10 mt-1 left-0 right-0 max-h-60 overflow-auto rounded-md border bg-popover p-1 shadow-md">
+                            {suggestions.map(item => (
+                                <button
+                                    key={item.id}
+                                    type="button"
+                                    onClick={() => addSuggestion(item)}
+                                    className="w-full rounded-sm px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground"
+                                >
+                                    {item.title}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {error && (
+                    <p className="text-xs text-destructive">{error}</p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/ColorField.js b/src/admin/components/field-renderer/FieldTypes/ColorField.js
new file mode 100644
index 000000000..8f37aae60
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/ColorField.js
@@ -0,0 +1,70 @@
+/**
+ * ColorField - Renders color picker input fields
+ */
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function ColorField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left flex items-center gap-2">
+                <div className="relative w-12 h-10 rounded border border-border overflow-hidden flex-shrink-0">
+                    <Input
+                        id={field.name}
+                        type="color"
+                        value={value || field.value || '#000000'}
+                        onChange={(e) => onChange(e.target.value)}
+                        className={cn(
+                            "absolute -top-2 -left-2 w-16 h-16 p-0 border-0 cursor-pointer",
+                            error && "border-destructive"
+                        )}
+                    />
+                </div>
+                <Input
+                    type="text"
+                    value={value || field.value || ''}
+                    onChange={(e) => onChange(e.target.value)}
+                    placeholder="#000000"
+                    className={cn(
+                        "flex-1 font-mono text-sm uppercase",
+                        error && "border-destructive"
+                    )}
+                    pattern="^#[0-9A-Fa-f]{6}$"
+                />
+                {error && (
+                    <p className="text-sm text-destructive mt-1">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/DateField.js b/src/admin/components/field-renderer/FieldTypes/DateField.js
new file mode 100644
index 000000000..8d121eee6
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/DateField.js
@@ -0,0 +1,54 @@
+/**
+ * DateField - Renders date input fields
+ */
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function DateField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-center py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <Input
+                    id={field.name}
+                    type="date"
+                    value={value || ''}
+                    onChange={(e) => onChange(e.target.value)}
+                    className={cn(error && "border-destructive")}
+                />
+                {error && (
+                    <p className="text-sm text-destructive mt-1">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/HintTextareaField.js b/src/admin/components/field-renderer/FieldTypes/HintTextareaField.js
new file mode 100644
index 000000000..34005e8d9
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/HintTextareaField.js
@@ -0,0 +1,105 @@
+/**
+ * HintTextareaField - Renders textarea with clickable token hints
+ */
+
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function HintTextareaField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    const insertToken = (token) => {
+        const textarea = document.getElementById(field.name);
+        if (!textarea) return;
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const text = value || '';
+        const tokenText = `{{${token}}}`;
+
+        const newValue =
+            text.substring(0, start) +
+            tokenText +
+            text.substring(end);
+
+        onChange(newValue);
+
+        // Set cursor position after inserted token
+        setTimeout(() => {
+            textarea.focus();
+            textarea.setSelectionRange(start + tokenText.length, start + tokenText.length);
+        }, 0);
+    };
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left space-y-2">
+                <Textarea
+                    id={field.name}
+                    value={value || ''}
+                    onChange={(e) => onChange(e.target.value)}
+                    placeholder={field.placeholder || ''}
+                    rows={field.rows || 5}
+                    className={cn(error && "border-destructive")}
+                />
+                {field.hints && Object.keys(field.hints).length > 0 && (
+                    <div className="space-y-1">
+                        <span className="text-xs text-muted-foreground">
+                            Available tokens:
+                        </span>
+                        <div className="flex flex-wrap gap-1.5">
+                            {Object.entries(field.hints || {}).map(([token, label]) => (
+                                <Button
+                                    key={token}
+                                    type="button"
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => insertToken(token)}
+                                    className="h-7 px-2 py-0 text-xs font-mono"
+                                >
+                                    {`{{${token}}}`}
+                                    {label && (
+                                        <span className="ml-1 text-muted-foreground font-sans">
+                                            - {label}
+                                        </span>
+                                    )}
+                                </Button>
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {error && (
+                    <p className="text-sm text-destructive">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/ImageField.js b/src/admin/components/field-renderer/FieldTypes/ImageField.js
new file mode 100644
index 000000000..64941ddc8
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/ImageField.js
@@ -0,0 +1,124 @@
+/**
+ * ImageField - WordPress Media Library image selector
+ */
+
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function ImageField({ field, value, onChange, error }) {
+    const [imageUrl, setImageUrl] = useState(value || '');
+    const mediaFrameRef = useRef(null);
+
+    // Update local state when value prop changes (e.g., on load from saved data)
+    useEffect(() => {
+        setImageUrl(value || '');
+    }, [value]);
+
+    const openMediaFrame = () => {
+        if (mediaFrameRef.current) {
+            mediaFrameRef.current.open();
+            return;
+        }
+
+        const frame = wp.media({
+            title: field.label || 'Select Image',
+            multiple: false,
+            library: {
+                type: 'image'
+            },
+            button: {
+                text: 'Use Selected Image'
+            }
+        });
+
+        frame.on('select', () => {
+            const attachment = frame.state().get('selection').first().toJSON();
+            const url = attachment.url;
+            setImageUrl(url);
+            onChange(url);
+            frame.close();
+        });
+
+        mediaFrameRef.current = frame;
+        frame.open();
+    };
+
+    const removeImage = () => {
+        setImageUrl('');
+        onChange('');
+    };
+
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <div className="space-y-2">
+                    {imageUrl ? (
+                        <div className="flex items-center gap-3">
+                            <div className="relative">
+                                <img
+                                    id={field.name}
+                                    src={imageUrl}
+                                    alt={field.label || 'Selected image'}
+                                    className="h-24 w-24 object-cover rounded border border-input bg-background"
+                                />
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    onClick={removeImage}
+                                    className="absolute -top-2 -right-2 h-6 w-6 rounded-full bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                >
+                                    ×
+                                </Button>
+                            </div>
+                            <div className="text-xs text-muted-foreground">
+                                {imageUrl}
+                            </div>
+                        </div>
+                    ) : (
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={openMediaFrame}
+                            className={cn(error && "border-destructive")}
+                        >
+                            Select Image
+                        </Button>
+                    )}
+                    {error && (
+                        <p className="text-sm text-destructive mt-1">
+                            {error}
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/ImageSelectField.js b/src/admin/components/field-renderer/FieldTypes/ImageSelectField.js
new file mode 100644
index 000000000..3c56d8c3c
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/ImageSelectField.js
@@ -0,0 +1,99 @@
+/**
+ * ImageSelectField - Renders clickable image cards for layout/style selection
+ */
+
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function ImageSelectField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    const width = field.width || 100;
+    const height = field.height || 100;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <div className="flex flex-wrap gap-3">
+                    {Object.entries(field.options || {}).map(([optValue, option]) => {
+                        const isSelected = value === optValue;
+                        const imgSrc = typeof option === 'string' ? option : option.img;
+                        const altText = typeof option === 'string' ? optValue : (option.alt || optValue);
+
+                        return (
+                            <div
+                                key={optValue}
+                                onClick={() => onChange(optValue)}
+                                className={cn(
+                                    "relative cursor-pointer rounded-md border-2 transition-all",
+                                    "hover:border-primary/50",
+                                    isSelected ? "border-primary ring-2 ring-primary/20" : "border-border"
+                                )}
+                            >
+                                <img
+                                    src={imgSrc}
+                                    alt={altText}
+                                    width={width}
+                                    height={height}
+                                    className={cn(
+                                        "rounded-sm",
+                                        isSelected ? "opacity-100" : "opacity-70 hover:opacity-100"
+                                    )}
+                                />
+                                {isSelected && (
+                                    <div className="absolute top-1 right-1 w-5 h-5 bg-primary rounded-full flex items-center justify-center">
+                                        <svg
+                                            className="w-3 h-3 text-primary-foreground"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={3}
+                                                d="M5 13l4 4L19 7"
+                                            />
+                                        </svg>
+                                    </div>
+                                )}
+                                <div className="text-xs text-center mt-1 px-2 pb-1">
+                                    {altText}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+                {error && (
+                    <p className="text-sm text-destructive mt-2">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/MultiCheckboxField.js b/src/admin/components/field-renderer/FieldTypes/MultiCheckboxField.js
new file mode 100644
index 000000000..72e472af1
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/MultiCheckboxField.js
@@ -0,0 +1,82 @@
+/**
+ * MultiCheckboxField - Renders checkbox group for multiple selections
+ */
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function MultiCheckboxField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    // Handle value as array
+    const selectedValues = Array.isArray(value) ? value : [];
+
+    const handleChange = (optionValue, checked) => {
+        let newValues;
+        if (checked) {
+            newValues = [...selectedValues, optionValue];
+        } else {
+            newValues = selectedValues.filter(v => v !== optionValue);
+        }
+        onChange(newValues);
+    };
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left space-y-2">
+                {Object.entries(field.options || {}).map(([optValue, optLabel]) => {
+                    const isChecked = selectedValues.includes(optValue);
+
+                    return (
+                        <div key={optValue} className="flex items-center space-x-2">
+                            <Checkbox
+                                id={`${field.name}_${optValue}`}
+                                checked={isChecked}
+                                onCheckedChange={(checked) => handleChange(optValue, checked)}
+                            />
+                            <Label
+                                htmlFor={`${field.name}_${optValue}`}
+                                className={cn(
+                                    "text-sm cursor-pointer normal-case",
+                                    isChecked && "font-medium"
+                                )}
+                            >
+                                {optLabel}
+                            </Label>
+                        </div>
+                    );
+                })}
+                {error && (
+                    <p className="text-sm text-destructive">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/NotificationField.js b/src/admin/components/field-renderer/FieldTypes/NotificationField.js
new file mode 100644
index 000000000..db8129ffc
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/NotificationField.js
@@ -0,0 +1,40 @@
+/**
+ * NotificationField - Renders notification banners with image and HTML description
+ * Used for informational messages like "No Shipping Method Available"
+ */
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function NotificationField({ field }) {
+    if (!field.image && !field.description) return null;
+
+    return (
+        <div className="my-4 p-4 bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-md flex items-start gap-4">
+            {field.image && (
+                <div className="flex-shrink-0">
+                    <img
+                        src={field.image}
+                        alt=""
+                        className="w-16 h-16 object-contain"
+                    />
+                </div>
+            )}
+            <div className="flex-1 min-w-0">
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-sm text-blue-900 dark:text-blue-100 prose prose-sm max-w-none"
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/NumberField.js b/src/admin/components/field-renderer/FieldTypes/NumberField.js
new file mode 100644
index 000000000..dff92591d
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/NumberField.js
@@ -0,0 +1,57 @@
+/**
+ * NumberField - Renders number input fields
+ */
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function NumberField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <Input
+                    id={field.name}
+                    type="number"
+                    value={value || ''}
+                    onChange={(e) => onChange(e.target.value)}
+                    min={field.min}
+                    step={field.step || 1}
+                    placeholder={field.placeholder || ''}
+                    className={cn(error && "border-destructive")}
+                />
+                {error && (
+                    <p className="text-sm text-destructive mt-1">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/RadioField.js b/src/admin/components/field-renderer/FieldTypes/RadioField.js
new file mode 100644
index 000000000..0f74c0803
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/RadioField.js
@@ -0,0 +1,64 @@
+/**
+ * RadioField - Renders radio button group fields
+ */
+
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function RadioField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="space-y-2 min-w-0 text-left">
+                <RadioGroup
+                    value={value || ''}
+                    onValueChange={onChange}
+                >
+                    {Object.entries(field.options || {}).map(([optionValue, optionLabel]) => (
+                        <div key={optionValue} className="flex items-center space-x-2">
+                            <RadioGroupItem
+                                id={`${field.name}_${optionValue}`}
+                                value={optionValue}
+                            />
+                            <Label
+                                htmlFor={`${field.name}_${optionValue}`}
+                                className="text-sm font-normal cursor-pointer"
+                            >
+                                {optionLabel}
+                            </Label>
+                        </div>
+                    ))}
+                </RadioGroup>
+                {error && (
+                    <p className="text-xs text-destructive">{error}</p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/RepeaterField.js b/src/admin/components/field-renderer/FieldTypes/RepeaterField.js
new file mode 100644
index 000000000..473e073ee
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/RepeaterField.js
@@ -0,0 +1,250 @@
+/**
+ * RepeaterField - Repeatable field groups with nested sub-fields
+ * This is the most complex field type as sub-fields can contain any other field type.
+ */
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { Add01Icon, Delete02Icon, DragIcon, ArrowUpIcon, ArrowDownIcon } from '@hugeicons/core-free-icons';
+import { cn } from '@/lib/utils';
+import { useState } from '@wordpress/element';
+
+import TextField from './TextField';
+import NumberField from './NumberField';
+import TextareaField from './TextareaField';
+import SelectField from './SelectField';
+import RadioField from './RadioField';
+import DateField from './DateField';
+import SwitchField from './SwitchField';
+import AutocompleteField from './AutocompleteField';
+import MultiCheckboxField from './MultiCheckboxField';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function RepeaterField({ field, value, onChange, error }) {
+    const rows = Array.isArray(value) ? value : [];
+    // Initialize all rows as collapsed by default
+    const [collapsedRows, setCollapsedRows] = useState(() => {
+        const initial = {};
+        rows.forEach((_, index) => {
+            initial[index] = true; // true = collapsed
+        });
+        return initial;
+    });
+
+    const toggleRow = (index) => {
+        setCollapsedRows(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
+
+    const addRow = () => {
+        const newRows = [...rows];
+        newRows.push(createEmptyRow());
+        onChange(newRows);
+    };
+
+    const removeRow = (index) => {
+        const newRows = rows.filter((_, i) => i !== index);
+        onChange(newRows);
+    };
+
+    const updateRow = (index, row) => {
+        const newRows = [...rows];
+        newRows[index] = row;
+        onChange(newRows);
+    };
+
+    const moveRow = (fromIndex, toIndex) => {
+        if (toIndex < 0 || toIndex >= rows.length) return;
+        const newRows = [...rows];
+        const [movedRow] = newRows.splice(fromIndex, 1);
+        newRows.splice(toIndex, 0, movedRow);
+        onChange(newRows);
+    };
+
+    /**
+     * Parse currency string "CODE:::Name:::Symbol" to get readable name
+     */
+    function getCurrencyLabel(currencyString) {
+        if (!currencyString || typeof currencyString !== 'string') {
+            return currencyString || '';
+        }
+        const parts = currencyString.split(':::');
+        return parts[1] || currencyString; // Return the name part (second element)
+    }
+
+    function createEmptyRow() {
+        const emptyRow = {};
+        // Support both 'repeater_fields' (old) and 'fields' (settings) naming
+        const subFields = field.repeater_fields || field.fields || [];
+
+        if (Array.isArray(subFields)) {
+            subFields.forEach(subField => {
+                // Sub-fields should have a 'name' property after transformation
+                const fieldName = subField.name;
+                if (!fieldName) return;
+
+                if (subField.type === 'checkbox' || subField.type === 'switch') {
+                    emptyRow[fieldName] = '';
+                } else if (subField.type === 'number') {
+                    emptyRow[fieldName] = 0;
+                } else if (subField.type === 'select' || subField.type === 'radio') {
+                    emptyRow[fieldName] = subField.value !== undefined ? subField.value : (subField.options ? Object.keys(subField.options)[0] : '');
+                } else if (subField.type === 'multi_checkbox') {
+                    emptyRow[fieldName] = [];
+                } else {
+                    emptyRow[fieldName] = subField.value !== undefined ? subField.value : '';
+                }
+            });
+        }
+        return emptyRow;
+    }
+
+    const FIELD_TYPE_MAP = {
+        text: TextField,
+        number: NumberField,
+        textarea: TextareaField,
+        select: SelectField,
+        radio: RadioField,
+        date: DateField,
+        switch: SwitchField,
+        checkbox: SwitchField,
+        multi_checkbox: MultiCheckboxField,
+        autocomplete: AutocompleteField,
+    };
+
+    const getSubFieldComponent = (fieldType) => {
+        return FIELD_TYPE_MAP[fieldType] || TextField;
+    };
+
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <div className="space-y-1 min-w-0">
+                    <Label htmlFor={field.name} className="text-sm leading-tight">
+                        <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                    </Label>
+                    {field.description && (
+                        <HtmlContent
+                            html={field.description}
+                            className="text-xs text-muted-foreground wrap-break-word"
+                        />
+                    )}
+                </div>
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={addRow}
+                >
+                    <HugeiconsIcon icon={Add01Icon} size={18} />
+                    Add
+                </Button>
+            </div>
+
+            {rows.length === 0 ? (
+                <div className="border border-dashed border-muted-foreground/50 rounded-md p-8 text-center text-muted-foreground">
+                    <p className="text-sm">No items yet. Click "Add" to create the first one.</p>
+                </div>
+            ) : (
+                <div className="space-y-3 border border-input rounded-md overflow-hidden">
+                    {rows.map((row, index) => {
+                        const isCollapsed = collapsedRows[index];
+                        const firstFieldName = (field.repeater_fields || field.fields)?.[0]?.name;
+                        const firstFieldValue = row[firstFieldName] || '';
+                        const isGroupTitle = getCurrencyLabel(firstFieldValue) || `Item ${index + 1}`;
+
+                        return (
+                        <div
+                            key={index}
+                            className={cn(
+                                "border-b last:border-b-0 bg-background",
+                                "group hover:bg-muted/50"
+                            )}
+                        >
+                            <div className="flex gap-2 items-start p-4">
+                                <div className="flex items-center gap-2 cursor-move text-muted-foreground">
+                                    <HugeiconsIcon icon={DragIcon} size={20} className="cursor-grab" />
+                                    <span className="text-sm font-medium">#{index + 1}</span>
+                                </div>
+
+                                <button
+                                    type="button"
+                                    onClick={() => toggleRow(index)}
+                                    className="flex-1 text-left flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors"
+                                >
+                                    <HugeiconsIcon
+                                        icon={isCollapsed ? ArrowDownIcon : ArrowUpIcon}
+                                        size={16}
+                                    />
+                                    {isGroupTitle || `Item ${index + 1}`}
+                                </button>
+
+                                <div className="flex items-center gap-1 flex-shrink-0">
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => removeRow(index)}
+                                        className="h-auto w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                                    >
+                                        <HugeiconsIcon icon={Delete02Icon} size={16} />
+                                    </Button>
+                                </div>
+                            </div>
+
+                            {!isCollapsed && (
+                                <div className="px-4 pb-4 pl-14">
+                                    <div className="space-y-3">
+                                        {(field.repeater_fields || field.fields) && Array.isArray(field.repeater_fields || field.fields) && (field.repeater_fields || field.fields).map((subField) => {
+                                            const SubFieldComponent = getSubFieldComponent(subField.type);
+                                            return (
+                                                <div key={subField.name} className="space-y-1">
+                                                    {subField.type !== 'section' && (
+                                                        <Label
+                                                            htmlFor={`${field.name}_${index}_${subField.name}`}
+                                                            className="text-xs font-medium text-muted-foreground"
+                                                        >
+                                                            <HtmlContent html={subField.label} />
+                                                        </Label>
+                                                    )}
+                                                    <SubFieldComponent
+                                                        field={subField}
+                                                        value={row[subField.name] || ''}
+                                                        onChange={(val) => updateRow(index, { ...row, [subField.name]: val })}
+                                                        error={error}
+                                                    />
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )})}
+                </div>
+            )}
+
+            {error && (
+                <p className="text-sm text-destructive mt-2">
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/SectionField.js b/src/admin/components/field-renderer/FieldTypes/SectionField.js
new file mode 100644
index 000000000..b335a9fc5
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/SectionField.js
@@ -0,0 +1,29 @@
+/**
+ * SectionField - Renders section/group headers
+ */
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function SectionField({ field }) {
+    return (
+        <div className="space-y-2 mb-6 bg-muted/70 -mx-4 px-4 py-3 rounded-sm border-b-2 border-b-gray-500 border-primary">
+            <h3 className="text-base font-semibold text-foreground mt-1! mb-0!">
+                <HtmlContent html={field.label} />
+            </h3>
+            {field.description && (
+                <HtmlContent
+                    html={field.description}
+                    className="text-sm text-muted-foreground"
+                />
+            )}
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/SwitchField.js b/src/admin/components/field-renderer/FieldTypes/SwitchField.js
new file mode 100644
index 000000000..09bcd3b66
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/SwitchField.js
@@ -0,0 +1,46 @@
+/**
+ * SwitchField - Renders toggle switch fields (checkbox UI)
+ */
+
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+
+    // Parse HTML and render safely
+    // For now, use dangerouslySetInnerHTML since this is admin-only content
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function SwitchField({ field, value, onChange, error }) {
+    const isChecked = value === 'on' || value === true || value === 1;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight cursor-pointer">
+                    <HtmlContent html={field.label} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="text-left">
+                <Switch
+                    id={field.name}
+                    checked={isChecked}
+                    onCheckedChange={(checked) => onChange(checked ? 'on' : '')}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/TextField.js b/src/admin/components/field-renderer/FieldTypes/TextField.js
new file mode 100644
index 000000000..cf04bcfb6
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/TextField.js
@@ -0,0 +1,55 @@
+/**
+ * TextField - Renders text input fields
+ */
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function TextField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <Input
+                    id={field.name}
+                    type="text"
+                    value={value || ''}
+                    onChange={(e) => onChange(e.target.value)}
+                    placeholder={field.placeholder || ''}
+                    className={cn(error && "border-destructive")}
+                />
+                {error && (
+                    <p className="text-sm text-destructive mt-1">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/TextareaField.js b/src/admin/components/field-renderer/FieldTypes/TextareaField.js
new file mode 100644
index 000000000..7aec7ac47
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/TextareaField.js
@@ -0,0 +1,55 @@
+/**
+ * TextareaField - Renders textarea fields
+ */
+
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function TextareaField({ field, value, onChange, error }) {
+    // Append asterisk to HTML if required
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <Textarea
+                    id={field.name}
+                    value={value || ''}
+                    onChange={(e) => onChange(e.target.value)}
+                    placeholder={field.placeholder || ''}
+                    rows={5}
+                    className={cn(error && "border-destructive")}
+                />
+                {error && (
+                    <p className="text-sm text-destructive mt-1">
+                        {error}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/FieldTypes/TinymceField.js b/src/admin/components/field-renderer/FieldTypes/TinymceField.js
new file mode 100644
index 000000000..7130ad932
--- /dev/null
+++ b/src/admin/components/field-renderer/FieldTypes/TinymceField.js
@@ -0,0 +1,107 @@
+/**
+ * TinymceField - WordPress TinyMCE rich text editor wrapper
+ */
+
+import { useEffect, useRef } from '@wordpress/element';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+function HtmlContent({ html, className }) {
+    if (!html) return null;
+    return (
+        <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+}
+
+export default function TinymceField({ field, value, onChange, error }) {
+    const textareaRef = useRef(null);
+    const editorRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+
+    // Keep onChange ref current to avoid stale closures
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+
+    // Initialize TinyMCE once
+    useEffect(() => {
+        if (typeof window.tinymce === 'undefined' || !textareaRef.current) return;
+
+        window.tinymce.init({
+            target: textareaRef.current,
+            selector: 'textarea',
+            menubar: false,
+            toolbar: 'bold italic underline | bullist numlist | link unlink | removeformat',
+            height: 200,
+            skin: 'oxide',
+            content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }',
+            setup: (editor) => {
+                editorRef.current = editor;
+                editor.on('change keyup', () => {
+                    onChangeRef.current(editor.getContent());
+                });
+            }
+        });
+
+        return () => {
+            if (editorRef.current) {
+                editorRef.current.remove();
+                editorRef.current = null;
+            }
+        };
+    }, [field.name]);
+
+    // Sync external value changes into the editor
+    useEffect(() => {
+        if (editorRef.current && value !== undefined) {
+            const current = editorRef.current.getContent();
+            if (current !== value) {
+                editorRef.current.setContent(value || '');
+            }
+        }
+    }, [value]);
+
+    const labelHtml = field.required
+        ? (field.label || '') + '<span class="text-destructive ml-0.5">*</span>'
+        : field.label;
+
+    return (
+        <div className="grid grid-cols-[30%_70%] gap-4 items-start py-2.5 px-1">
+            <div className="space-y-1 min-w-0">
+                <Label htmlFor={field.name} className="text-sm leading-tight">
+                    <HtmlContent html={labelHtml} className="flex flex-wrap gap-1 items-center" />
+                </Label>
+                {field.description && (
+                    <HtmlContent
+                        html={field.description}
+                        className="text-xs text-muted-foreground wrap-break-word"
+                    />
+                )}
+            </div>
+            <div className="min-w-0 text-left">
+                <div className="space-y-2">
+                    <textarea
+                        ref={textareaRef}
+                        id={field.name}
+                        defaultValue={value || ''}
+                        placeholder={field.placeholder || ''}
+                        rows={8}
+                        className={cn(
+                            "w-full min-h-[200px] p-3 text-sm rounded-md border border-input bg-background",
+                            error && "border-destructive"
+                        )}
+                        hidden
+                    />
+                    {error && (
+                        <p className="text-sm text-destructive mt-1">
+                            {error}
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/admin/components/field-renderer/HiddenInputSync.js b/src/admin/components/field-renderer/HiddenInputSync.js
new file mode 100644
index 000000000..00b9d57a6
--- /dev/null
+++ b/src/admin/components/field-renderer/HiddenInputSync.js
@@ -0,0 +1,58 @@
+/**
+ * HiddenInputSync - Syncs React form data with WordPress hidden inputs
+ *
+ * Creates hidden inputs in form#post for each field value so WordPress
+ * save_post hook can read the data. This is the critical link between React
+ * and WordPress's native form submission.
+ */
+
+import { useEffect } from '@wordpress/element';
+
+export default function HiddenInputSync({ formData, config }) {
+    useEffect(() => {
+        // Find or create the WordPress post form
+        let container = document.getElementById('formipay-hidden-fields');
+        const postForm = document.querySelector('form#post');
+
+        if (!postForm) return;
+
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'formipay-hidden-fields';
+            container.className = 'hidden';
+            postForm.appendChild(container);
+        }
+
+        // Clear existing inputs
+        container.innerHTML = '';
+
+        // Create hidden inputs for all form fields
+        const createInput = (name, value) => {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = name;
+            input.value = value || '';
+            container.appendChild(input);
+        };
+
+        // Basic fields
+        Object.entries(formData).forEach(([name, value]) => {
+            // Handle array fields (forms[], products[], customers[])
+            if (Array.isArray(value)) {
+                value.forEach(item => createInput(`${name}[]`, item));
+                return;
+            }
+
+            // Handle complex objects (repeater rows, structured data) — JSON-encode
+            if (typeof value === 'object' && value !== null) {
+                createInput(name, JSON.stringify(value));
+                return;
+            }
+
+            // Simple scalar fields
+            createInput(name, value);
+        });
+    }, [formData, config]);
+
+    return null;
+}
diff --git a/src/admin/components/field-renderer/ValidationEngine.js b/src/admin/components/field-renderer/ValidationEngine.js
new file mode 100644
index 000000000..9eed21249
--- /dev/null
+++ b/src/admin/components/field-renderer/ValidationEngine.js
@@ -0,0 +1,98 @@
+/**
+ * Validation Engine - Validates form fields
+ */
+import * as DependencyEngine from './DependencyEngine';
+
+/**
+ * Validate a single field value
+ */
+export function validateField(field, value) {
+    if (!field.required) {
+        return { valid: true };
+    }
+
+    const isEmpty = value === '' || value === null || value === undefined;
+
+    if (isEmpty) {
+        return {
+            valid: false,
+            error: `${field.label} is required.`
+        };
+    }
+
+    // Number validation
+    if (field.type === 'number') {
+        const numValue = parseFloat(value);
+        if (isNaN(numValue)) {
+            return {
+                valid: false,
+                error: `${field.label} must be a valid number.`
+            };
+        }
+
+        if (typeof field.min !== 'undefined' && numValue < field.min) {
+            return {
+                valid: false,
+                error: `${field.label} must be at least ${field.min}.`
+            };
+        }
+
+        if (typeof field.max !== 'undefined' && numValue > field.max) {
+            return {
+                valid: false,
+                error: `${field.label} must be at most ${field.max}.`
+            };
+        }
+    }
+
+    return { valid: true };
+}
+
+/**
+ * Validate all visible required fields in a form
+ */
+export function validateForm(fields, formData) {
+    const errors = {};
+
+    for (const field of fields) {
+        // Skip fields with dependencies that aren't met
+        if (field.dependency) {
+            if (!DependencyEngine.isFieldVisible(field, formData)) {
+                continue;
+            }
+        }
+
+        // Skip non-required fields
+        if (!field.required) {
+            continue;
+        }
+
+        const value = formData[field.name];
+
+        // Check for empty currency_group fields
+        if (field.type === 'currency_group' && field.values) {
+            const hasValue = Object.values(field.values).some(v => v && v !== '');
+            if (!hasValue) {
+                errors[field.name] = `${field.label} is required.`;
+            }
+            continue;
+        }
+
+        const result = validateField(field, value);
+        if (!result.valid) {
+            errors[field.name] = result.error;
+        }
+    }
+
+    return {
+        valid: Object.keys(errors).length === 0,
+        errors
+    };
+}
+
+/**
+ * Get error message for a field
+ */
+export function getFieldError(fieldName, errors) {
+    return errors[fieldName] || null;
+}
diff --git a/src/admin/components/field-renderer/index.js b/src/admin/components/field-renderer/index.js
new file mode 100644
index 000000000..a9116b030
--- /dev/null
+++ b/src/admin/components/field-renderer/index.js
@@ -0,0 +1,12 @@
+/**
+ * FieldRenderer Module - Generic config-driven field renderer
+ *
+ * Replaces the WPCFTO Vue.js rendering layer with React + shadcn/ui.
+ * Reads PHP field configuration arrays and renders all fields automatically.
+ */
+
+export { default } from './FieldRenderer';
+export { default as FieldRenderer } from './FieldRenderer';
+export * as DependencyEngine from './DependencyEngine';
+export { default as HiddenInputSync } from './HiddenInputSync';
+export * as ValidationEngine from './ValidationEngine';
diff --git a/src/admin/components/products/VariationPricingTable.css b/src/admin/components/products/VariationPricingTable.css
deleted file mode 100644
index a3096d169..000000000
--- a/src/admin/components/products/VariationPricingTable.css
+++ /dev/null
@@ -1,126 +0,0 @@
-.formipay-variation-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-}
-
-.formipay-variation-table thead th {
-    padding: 12px;
-    text-align: left;
-    font-size: 13px;
-    font-weight: 600;
-    color: #1e1e1e;
-    border-bottom: 2px solid #1e1e1e;
-}
-
-.formipay-variation-table tbody td {
-    padding: 12px;
-    border-bottom: 1px solid #f0f0f1;
-}
-
-.variation-row {
-    background: #fff;
-}
-
-.variation-name {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.toggle-expand {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 2px;
-}
-
-.toggle-expand:hover {
-    background: #f0f0f1;
-}
-
-.toggle-expand svg {
-    fill: #646970;
-}
-
-.variation-name strong {
-    font-size: 13px;
-    color: #1e1e1e;
-}
-
-.price-cell,
-.variation-stock,
-.variation-weight {
-    min-width: 120px;
-}
-
-.price-cell input,
-.variation-stock input,
-.variation-weight input {
-    width: 100%;
-    padding: 6px 8px;
-    font-size: 13px;
-    border: 1px solid #8c8f94;
-    border-radius: 2px;
-}
-
-.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 {
-    width: 100%;
-    margin: 0;
-    border-collapse: collapse;
-}
-
-.inner-table thead {
-    display: none;
-}
-
-.inner-table td {
-    padding: 8px 12px;
-    border-bottom: 1px solid #f0f0f1;
-}
-
-.inner-table tr:last-child td {
-    border-bottom: none;
-}
-
-.inner-table input[type="number"] {
-    width: 100%;
-    padding: 6px 8px;
-    font-size: 12px;
-    border: 1px solid #8c8f94;
-    border-radius: 2px;
-}
-
-.currency-name {
-    font-size: 12px;
-    font-weight: 600;
-    color: #1e1e1e;
-}
-
-.required {
-    color: #dc3545;
-    margin-left: 4px;
-}
diff --git a/src/admin/components/products/VariationPricingTable.js b/src/admin/components/products/VariationPricingTable.js
index c7b942ce1..7a674f357 100644
--- a/src/admin/components/products/VariationPricingTable.js
+++ b/src/admin/components/products/VariationPricingTable.js
@@ -1,27 +1,36 @@
 /**
- * Variation Pricing Table - Multi-currency product variation editor
- * Migration from Vue app in admin-product-editor.js
+ * VariationPricingTable - Multi-currency product variation editor
+ * Uses shadcn/ui for consistent styling with the rest of the admin
  */
 
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
-import { TextControl, Button } from '@wordpress/components';
-import * as Icons from '@wordpress/icons';
-import './VariationPricingTable.css';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { Add01Icon, Delete02Icon, ArrowDown01Icon, ArrowUp01Icon } from '@hugeicons/core-free-icons';
 
 export default function VariationPricingTable({ productId, productDetails }) {
     const [tableRows, setTableRows] = useState([]);
-    const [deletedKeys, setDeletedKeys] = useState([]);
+    const [loading, setLoading] = useState(true);
     const [showFlatPricing, setShowFlatPricing] = useState(true);
     const hiddenInputRef = useRef(null);
-    const attrPollerRef = useRef(null);
-    const mutationObserverRef = useRef(null);
+    const isInitialLoad = useRef(true);
 
     // Currency helpers
     const getDefaultCurrencyCode = useCallback(() => {
         const triple = productDetails?.default_currency || '';
-        const codeFromTriple = String(triple).split(':::')[0];
-        return codeFromTriple || productDetails?.default_currency_code || 'USD';
+        const code = String(triple).split(':::')[0];
+        return code || productDetails?.default_currency_code || 'USD';
     }, [productDetails]);
 
     const findDigitsForCode = useCallback((codeOrTriple) => {
@@ -51,10 +60,9 @@ export default function VariationPricingTable({ productId, productDetails }) {
         });
     }, [productDetails, findDigitsForCode]);
 
-    // Initialize row data structure
+    // Normalize a row to have the expected data structure
     const ensureRowDataStructure = useCallback((row) => {
         const normalized = { ...row };
-
         if (typeof normalized.expanded === 'undefined') {
             normalized.expanded = false;
         }
@@ -67,7 +75,6 @@ export default function VariationPricingTable({ productId, productDetails }) {
         } else {
             const globalCodes = new Set(skeleton.map(p => byCode(p.currency)));
             normalized.prices = normalized.prices.filter(p => p && globalCodes.has(byCode(p.currency)));
-
             skeleton.forEach(skel => {
                 const code = byCode(skel.currency);
                 const exists = normalized.prices.some(p => byCode(p.currency) === code);
@@ -82,12 +89,8 @@ export default function VariationPricingTable({ productId, productDetails }) {
         normalized.prices.forEach(p => {
             const code = byCode(p.currency);
             p.currency_decimal_digits = findDigitsForCode(code);
-            if (typeof p.regular_price === 'undefined' || p.regular_price === null) {
-                p.regular_price = '';
-            }
-            if (typeof p.sale_price === 'undefined' || p.sale_price === null) {
-                p.sale_price = '';
-            }
+            if (typeof p.regular_price === 'undefined' || p.regular_price === null) p.regular_price = '';
+            if (typeof p.sale_price === 'undefined' || p.sale_price === null) p.sale_price = '';
         });
 
         const defaultCode = getDefaultCurrencyCode();
@@ -99,265 +102,131 @@ export default function VariationPricingTable({ productId, productDetails }) {
 
         delete normalized.price;
         delete normalized.sale;
-
         return normalized;
     }, [buildCurrencyPriceSkeleton, findDigitsForCode, getDefaultCurrencyCode]);
 
-    // Get attribute repeater data
-    const getAttributeRepeaterData = useCallback(() => {
-        return new Promise((resolve) => {
-            let attempts = 0;
-            const maxAttempts = 100;
-            const interval = setInterval(() => {
-                const el = document.querySelector('input[name="product_variation_attributes"]');
-                if (el && el.value) {
-                    try {
-                        const data = JSON.parse(el.value);
-                        clearInterval(interval);
-                        resolve(Array.isArray(data) ? data : []);
-                    } catch (e) {
-                        clearInterval(interval);
-                        resolve([]);
-                    }
-                } else if (++attempts >= maxAttempts) {
-                    clearInterval(interval);
-                    resolve([]);
-                }
-            }, 50);
-        });
-    }, []);
-
-    // Generate all combinations from attributes
-    const getAllCombinations = useCallback((attributes) => {
-        const attrVars = attributes
-            .map(attr => (attr.attribute_variations || []).map(v => ({
-                label: v.variation_label
-            })))
-            .filter(arr => arr.length > 0);
-
-        if (!attrVars.length) return [];
-
-        const combine = (arrs) => arrs.reduce((a, b) =>
-            a.flatMap(d => b.map(e => [].concat(d, e)))
-        );
-
-        const combos = combine(attrVars);
-
-        return combos.map(combo => {
-            const labels = Array.isArray(combo) ? combo.map(c => c.label) : [combo.label];
-            return {
-                key: labels.join('||'),
-                label: labels.join(' - ')
-            };
-        });
-    }, []);
-
-    // Build table from attribute repeater
-    const buildFromAttributes = useCallback(async () => {
-        try {
-            const attributes = await getAttributeRepeaterData();
-            if (!attributes.length) {
-                setTableRows([]);
-                updateJson([]);
-                return;
-            }
-
-            const combinations = getAllCombinations(attributes);
-            const filtered = combinations.filter(c => !deletedKeys.includes(c.key));
-
-            const newRows = filtered.map(c => {
-                const existing = tableRows.find(r => r.key === c.key);
-                if (existing) {
-                    return Object.assign(
-                        ensureRowDataStructure(existing),
-                        { name: c.label }
-                    );
-                }
-                return ensureRowDataStructure({
-                    key: c.key,
-                    name: c.label,
-                    stock: '',
-                    weight: 0,
-                    active: true,
-                });
-            });
-
-            setTableRows(newRows);
-            updateJson(newRows);
-        } catch (e) {
-            console.warn("Attributes not available; initializing empty variations.");
-            setTableRows([]);
-            updateJson([]);
-        }
-    }, [getAttributeRepeaterData, getAllCombinations, deletedKeys, tableRows, ensureRowDataStructure]);
-
-    // Update hidden input
+    // Update hidden input (stable reference)
     const updateJson = useCallback((rows) => {
         if (hiddenInputRef.current) {
             hiddenInputRef.current.value = JSON.stringify(rows || []);
         }
     }, []);
 
-    // Load existing product variables
-    const loadProductVariables = useCallback(async () => {
+    // Set rows and sync hidden input
+    const setRows = useCallback((newRows) => {
+        setTableRows(newRows);
+        updateJson(newRows);
+    }, [updateJson]);
+
+    // Load existing product data
+    useEffect(() => {
         if (!productId) {
-            await buildFromAttributes();
+            setLoading(false);
             return;
         }
 
-        try {
-            const formData = new FormData();
-            formData.append('action', 'get_product_variables');
-            formData.append('post_id', productId);
-            formData.append('_wpnonce', window.formipayAdmin?.nonce || '');
+        const formData = new FormData();
+        formData.append('action', 'get_product_variables');
+        formData.append('post_id', productId);
+        formData.append('_wpnonce', window.formipayAdmin?.nonce || '');
 
-            const response = await fetch(window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php', {
-                method: 'POST',
-                credentials: 'same-origin',
-                body: formData,
-            });
-
-            const result = await response.json();
+        fetch(window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php', {
+            method: 'POST',
+            credentials: 'same-origin',
+            body: formData,
+        })
+        .then(response => response.json())
+        .then(result => {
             if (result.success && Array.isArray(result.data) && result.data.length) {
                 const rows = result.data.map(row => ensureRowDataStructure(row));
-                setTableRows(rows);
-                setDeletedKeys([]);
-                updateJson(rows);
-            } else {
-                await buildFromAttributes();
+                setRows(rows);
             }
-        } catch {
-            await buildFromAttributes();
-        }
-    }, [productId, ensureRowDataStructure, buildFromAttributes, updateJson]);
+        })
+        .catch(() => {})
+        .finally(() => {
+            setLoading(false);
+            isInitialLoad.current = false;
+        });
+    }, [productId, ensureRowDataStructure, setRows]);
 
-    // Setup attribute repeater sync
-    const setupAttributeRepeaterSync = useCallback(() => {
-        const rebuildDebounced = () => {
-            // Debounced rebuild
-            setTimeout(() => {
-                buildFromAttributes();
-            }, 200);
-        };
-
-        const rootInput = document.querySelector('input[name="product_variation_attributes"]');
-        if (rootInput) {
-            rootInput.addEventListener('input', rebuildDebounced);
-            rootInput.addEventListener('change', rebuildDebounced);
-
-            const obs = new MutationObserver(rebuildDebounced);
-            obs.observe(rootInput, { attributes: true, attributeFilter: ['value'] });
-            mutationObserverRef.current = obs;
-
-            // Polling fallback
-            attrPollerRef.current = setInterval(() => {
-                const el = document.querySelector('input[name="product_variation_attributes"]');
-                if (el && el.value !== hiddenInputRef.current?.value) {
-                    rebuildDebounced();
-                }
-            }, 300);
-        }
-
-        return () => {
-            if (mutationObserverRef.current) {
-                mutationObserverRef.current.disconnect();
-            }
-            if (attrPollerRef.current) {
-                clearInterval(attrPollerRef.current);
-            }
-        };
-    }, [buildFromAttributes]);
-
-    // Initialize
+    // Determine pricing mode
     useEffect(() => {
         const isMultiCurrency = productDetails?.multicurrency;
         const selectedCurrencies = productDetails?.global_selected_currencies || {};
         const currencyCount = Object.keys(selectedCurrencies).length;
         setShowFlatPricing(!isMultiCurrency || currencyCount <= 1);
+    }, [productDetails]);
 
-        loadProductVariables();
-        const cleanup = setupAttributeRepeaterSync();
-
-        return cleanup;
-    }, [productDetails, loadProductVariables, setupAttributeRepeaterSync]);
-
-    // Update pricing for a row
+    // Handlers — use functional state updates to avoid stale closures
     const updatePrice = useCallback((rowIndex, currencyIndex, field, value) => {
-        const newRows = [...tableRows];
-        newRows[rowIndex].prices[currencyIndex][field] = value;
-        setTableRows(newRows);
-        updateJson(newRows);
-    }, [tableRows, updateJson]);
+        setTableRows(prev => prev.map((row, i) => {
+            if (i !== rowIndex) return row;
+            const updated = JSON.parse(JSON.stringify(row));
+            updated.prices[currencyIndex][field] = value;
+            return updated;
+        }));
+        // Sync hidden input from latest state
+        setTableRows(prev => {
+            updateJson(prev);
+            return prev;
+        });
+    }, [updateJson]);
 
-    // Toggle row expansion
     const toggleExpanded = useCallback((rowIndex) => {
-        const newRows = [...tableRows];
-        newRows[rowIndex].expanded = !newRows[rowIndex].expanded;
-        setTableRows(newRows);
-    }, [tableRows]);
+        setTableRows(prev => prev.map((row, i) =>
+            i !== rowIndex ? row : { ...row, expanded: !row.expanded }
+        ));
+    }, []);
 
-    // Update row stock/weight
     const updateRowField = useCallback((rowIndex, field, value) => {
-        const newRows = [...tableRows];
-        newRows[rowIndex][field] = value;
-        setTableRows(newRows);
-        updateJson(newRows);
-    }, [tableRows, updateJson]);
+        setTableRows(prev => prev.map((row, i) => {
+            if (i !== rowIndex) return row;
+            const updated = { ...row, [field]: value };
+            updateJson([...prev.slice(0, i), updated, ...prev.slice(i + 1)]);
+            return updated;
+        }));
+    }, [updateJson]);
 
-    // Delete row
     const deleteRow = useCallback((rowIndex) => {
-        const row = tableRows[rowIndex];
-        const newDeletedKeys = [...deletedKeys, row.key];
-        setDeletedKeys(newDeletedKeys);
+        setTableRows(prev => {
+            const newRows = prev.filter((_, i) => i !== rowIndex);
+            updateJson(newRows);
+            return newRows;
+        });
+    }, [updateJson]);
 
-        const newRows = tableRows.filter((_, i) => i !== rowIndex);
-        setTableRows(newRows);
-        updateJson(newRows);
-    }, [tableRows, deletedKeys, updateJson]);
-
-    // Find first missing default currency price (for validation)
-    const findFirstMissingDefault = useCallback(() => {
-        const defaultCode = getDefaultCurrencyCode();
-        for (const row of tableRows) {
-            const price = row.prices?.find(p => {
-                const code = String(p.currency).split(':::')[0];
-                return code === defaultCode;
-            });
-            if (!price || !price.regular_price) {
-                return {
-                    currencyCode: defaultCode,
-                    rowLabel: row.name
-                };
-            }
-        }
-        return null;
-    }, [tableRows, getDefaultCurrencyCode]);
-
-    // Add form validation
+    // Form submission validation
     useEffect(() => {
         const postForm = document.getElementById('post');
         if (!postForm) return;
 
         const handleSubmit = (e) => {
-            const missing = findFirstMissingDefault();
-            if (missing) {
-                e.preventDefault();
-                e.stopImmediatePropagation();
+            const defaultCode = getDefaultCurrencyCode();
+            const byCode = (val) => String(val).split(':::')[0];
 
-                const tmpl = productDetails?.variation_table?.error_missing_default_price
-                    || 'Please fill Regular Price for default currency (%1$s) in variation "%2$s".';
-                const msg = tmpl
-                    .replace('%1$s', missing.currencyCode)
-                    .replace('%2$s', missing.rowLabel);
+            // Read current rows from the hidden input (source of truth)
+            let currentRows = [];
+            try {
+                currentRows = JSON.parse(hiddenInputRef.current?.value || '[]');
+            } catch {}
 
-                alert(msg);
-                return false;
+            for (const row of currentRows) {
+                const price = (row.prices || []).find(p => byCode(p.currency) === defaultCode);
+                if (!price || !price.regular_price) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    alert(__('Please fill Regular Price for default currency.', 'formipay'));
+                    return false;
+                }
             }
         };
 
         postForm.addEventListener('submit', handleSubmit, true);
         return () => postForm.removeEventListener('submit', handleSubmit, true);
-    }, [findFirstMissingDefault, productDetails]);
+    }, [getDefaultCurrencyCode]);
+
+    const defaultCode = getDefaultCurrencyCode();
+    const byCode = (val) => String(val).split(':::')[0];
 
     return (
         <>
@@ -368,176 +237,179 @@ export default function VariationPricingTable({ productId, productDetails }) {
                 value={JSON.stringify(tableRows)}
             />
 
-            <table className="formipay-variation-table" id="product-variables-table">
-                <thead>
-                    <tr>
-                        <th>{ __('Variation', 'formipay') }</th>
-                        {showFlatPricing ? (
-                            <>
-                                <th>{ __('Price', 'formipay') }</th>
-                                <th>{ __('Sale Price', 'formipay') }</th>
-                            </>
-                        ) : null}
-                        <th>{ __('Stock', 'formipay') }</th>
-                        <th>{ __('Weight', 'formipay') }</th>
-                        <th>{ __('Actions', 'formipay') }</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {tableRows.map((row, rowIndex) => (
-                        <VariationRow
-                            key={row.key}
-                            row={row}
-                            rowIndex={rowIndex}
-                            showFlatPricing={showFlatPricing}
-                            defaultCurrencyCode={getDefaultCurrencyCode()}
-                            onToggleExpanded={() => toggleExpanded(rowIndex)}
-                            onUpdatePrice={(currencyIndex, field, value) =>
-                                updatePrice(rowIndex, currencyIndex, field, value)
-                            }
-                            onUpdateField={(field, value) => updateRowField(rowIndex, field, value)}
-                            onDelete={() => deleteRow(rowIndex)}
-                        />
-                    ))}
-                </tbody>
-            </table>
-        </>
-    );
-}
-
-// Individual variation row component
-function VariationRow({ row, rowIndex, showFlatPricing, defaultCurrencyCode,
-    onToggleExpanded, onUpdatePrice, onUpdateField, onDelete }) {
-
-    return (
-        <>
-            <tr className="variation-row">
-                <td className="variation-name">
-                    <button
-                        type="button"
-                        className="toggle-expand"
-                        onClick={onToggleExpanded}
-                    >
-                        {row.expanded ? '▼' : '▶'}
-                    </button>
-                    <strong>{ row.name }</strong>
-                </td>
-
-                {showFlatPricing && row.prices?.[0] ? (
-                    <>
-                        <PriceCell
-                            price={row.prices[0]}
-                            field="regular_price"
-                            onChange={(field, value) => onUpdatePrice(0, field, value)}
-                        />
-                        <PriceCell
-                            price={row.prices[0]}
-                            field="sale_price"
-                            onChange={(field, value) => onUpdatePrice(0, field, value)}
-                        />
-                    </>
-                ) : null}
-
-                <td className="variation-stock">
-                    <TextControl
-                        type="number"
-                        value={row.stock}
-                        onChange={(value) => onUpdateField('stock', value)}
-                        placeholder="Unlimited"
-                    />
-                </td>
-
-                <td className="variation-weight">
-                    <TextControl
-                        type="number"
-                        value={row.weight}
-                        onChange={(value) => onUpdateField('weight', value)}
-                        step="0.01"
-                    />
-                </td>
-
-                <td className="variation-actions">
-                    <Button
-                        variant="secondary"
-                        size="small"
-                        isDestructive
-                        onClick={onDelete}
-                        icon={Icons.trash}
-                    >
-                        { __('Delete', 'formipay') }
-                    </Button>
-                </td>
-            </tr>
-
-            {!showFlatPricing && row.expanded && (
-                <tr className="variation-details-row">
-                    <td colSpan="5">
-                        <table className="inner-table">
-                            <tbody>
-                                {(row.prices || []).map((price, currencyIndex) => {
-                                    const code = String(price.currency).split(':::')[0];
-                                    const isDefault = code === defaultCurrencyCode;
-                                    const step = price.currency_decimal_digits
-                                        ? 1 / Math.pow(10, price.currency_decimal_digits)
-                                        : 0.01;
-
-                                    return (
-                                        <tr key={currencyIndex}>
-                                            <td className="currency-name">
-                                                { price.currency }
-                                                {isDefault && <span className="required">*</span>}
-                                            </td>
-                                            <td>
-                                                <input
-                                                    type="number"
-                                                    value={price.regular_price}
-                                                    onChange={(e) => onUpdatePrice(currencyIndex, 'regular_price', e.target.value)}
-                                                    step={step}
-                                                    placeholder="Regular Price"
-                                                    required={isDefault}
-                                                />
-                                            </td>
-                                            <td>
-                                                <input
-                                                    type="number"
-                                                    value={price.sale_price}
-                                                    onChange={(e) => onUpdatePrice(currencyIndex, 'sale_price', e.target.value)}
-                                                    step={step}
-                                                    placeholder="Sale Price"
-                                                />
-                                            </td>
-                                        </tr>
-                                    );
-                                })}
-                            </tbody>
-                        </table>
-                    </td>
-                </tr>
+            {loading ? (
+                <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+                    {__('Loading variations...', 'formipay')}
+                </div>
+            ) : tableRows.length === 0 ? (
+                <div className="border border-dashed border-muted-foreground/50 rounded-md p-8 text-center text-muted-foreground">
+                    <p className="text-sm">{__('No variations configured. Add attributes to the product first.', 'formipay')}</p>
+                </div>
+            ) : (
+                <div className="rounded-md border">
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-12"></TableHead>
+                                <TableHead>{__('Variation', 'formipay')}</TableHead>
+                                {showFlatPricing ? (
+                                    <>
+                                        <TableHead className="w-32">{__('Price', 'formipay')}</TableHead>
+                                        <TableHead className="w-32">{__('Sale Price', 'formipay')}</TableHead>
+                                    </>
+                                ) : null}
+                                <TableHead className="w-24">{__('Stock', 'formipay')}</TableHead>
+                                <TableHead className="w-12"></TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {tableRows.map((row, rowIndex) => (
+                                <VariationRow
+                                    key={row.key}
+                                    row={row}
+                                    rowIndex={rowIndex}
+                                    showFlatPricing={showFlatPricing}
+                                    defaultCurrencyCode={defaultCode}
+                                    onToggleExpanded={() => toggleExpanded(rowIndex)}
+                                    onUpdatePrice={(ci, f, v) => updatePrice(rowIndex, ci, f, v)}
+                                    onUpdateField={(f, v) => updateRowField(rowIndex, f, v)}
+                                    onDelete={() => deleteRow(rowIndex)}
+                                    byCode={byCode}
+                                />
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
             )}
         </>
     );
 }
 
-// Price input cell component
-function PriceCell({ price, field, onChange }) {
-    if (!price) {
-        return <td className="price-cell">-</td>;
-    }
-
-    const step = price.currency_decimal_digits
-        ? 1 / Math.pow(10, price.currency_decimal_digits)
+function VariationRow({
+    row, rowIndex, showFlatPricing, defaultCurrencyCode,
+    onToggleExpanded, onUpdatePrice, onUpdateField, onDelete, byCode
+}) {
+    const firstPrice = row.prices?.[0];
+    const step = firstPrice?.currency_decimal_digits
+        ? 1 / Math.pow(10, firstPrice.currency_decimal_digits)
         : 0.01;
 
     return (
-        <td className="price-cell">
-            <input
-                type="number"
-                value={price[field]}
-                onChange={(e) => onChange(field, e.target.value)}
-                step={step}
-                placeholder="Auto"
-            />
-        </td>
+        <>
+            <TableRow className="group">
+                <TableCell className="w-12 px-2">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={onToggleExpanded}
+                    >
+                        <HugeiconsIcon
+                            icon={row.expanded ? ArrowUp01Icon : ArrowDown01Icon}
+                            size={16}
+                        />
+                    </Button>
+                </TableCell>
+                <TableCell>
+                    <span className="text-sm font-medium">{row.name}</span>
+                </TableCell>
+
+                {showFlatPricing && firstPrice ? (
+                    <>
+                        <TableCell>
+                            <Input
+                                type="number"
+                                value={firstPrice.regular_price}
+                                onChange={(e) => onUpdatePrice(0, 'regular_price', e.target.value)}
+                                step={step}
+                                placeholder="0.00"
+                                className="h-8 text-sm"
+                            />
+                        </TableCell>
+                        <TableCell>
+                            <Input
+                                type="number"
+                                value={firstPrice.sale_price}
+                                onChange={(e) => onUpdatePrice(0, 'sale_price', e.target.value)}
+                                step={step}
+                                placeholder="0.00"
+                                className="h-8 text-sm"
+                            />
+                        </TableCell>
+                    </>
+                ) : null}
+
+                <TableCell>
+                    <Input
+                        type="number"
+                        value={row.stock}
+                        onChange={(e) => onUpdateField('stock', e.target.value)}
+                        placeholder={__('Unlimited', 'formipay')}
+                        className="h-8 text-sm"
+                    />
+                </TableCell>
+                <TableCell className="px-2">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={onDelete}
+                        className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    >
+                        <HugeiconsIcon icon={Delete02Icon} size={16} />
+                    </Button>
+                </TableCell>
+            </TableRow>
+
+            {!showFlatPricing && row.expanded && (
+                row.prices.map((price, currencyIndex) => {
+                    const code = byCode(price.currency);
+                    const isDefault = code === defaultCurrencyCode;
+                    const currStep = price.currency_decimal_digits
+                        ? 1 / Math.pow(10, price.currency_decimal_digits)
+                        : 0.01;
+                    const symbol = String(price.currency).split(':::')[2] || code;
+
+                    return (
+                        <TableRow key={`${row.key}-${code}`} className="bg-muted/30">
+                            <TableCell></TableCell>
+                            <TableCell>
+                                <div className="flex items-center gap-2">
+                                    <span className="text-xs font-medium text-muted-foreground">
+                                        {symbol} {code}
+                                    </span>
+                                    {isDefault && (
+                                        <span className="text-xs text-destructive">*</span>
+                                    )}
+                                </div>
+                            </TableCell>
+                            <TableCell>
+                                <Input
+                                    type="number"
+                                    value={price.regular_price}
+                                    onChange={(e) => onUpdatePrice(currencyIndex, 'regular_price', e.target.value)}
+                                    step={currStep}
+                                    placeholder={__('Regular Price', 'formipay')}
+                                    required={isDefault}
+                                    className="h-8 text-sm"
+                                />
+                            </TableCell>
+                            <TableCell>
+                                <Input
+                                    type="number"
+                                    value={price.sale_price}
+                                    onChange={(e) => onUpdatePrice(currencyIndex, 'sale_price', e.target.value)}
+                                    step={currStep}
+                                    placeholder={__('Sale Price', 'formipay')}
+                                    className="h-8 text-sm"
+                                />
+                            </TableCell>
+                            <TableCell colSpan={2}></TableCell>
+                        </TableRow>
+                    );
+                })
+            )}
+        </>
     );
 }
-
diff --git a/src/admin/components/settings/GlobalSettings.js b/src/admin/components/settings/GlobalSettings.js
index a8b63ae55..b5df54682 100644
--- a/src/admin/components/settings/GlobalSettings.js
+++ b/src/admin/components/settings/GlobalSettings.js
@@ -3,10 +3,10 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useRef, useEffect } from '@wordpress/element';
 import { TextControl, CheckboxControl, SelectControl, Button, Panel, PanelBody, PanelRow } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
-import settings from '@wordpress/icons/build/settings';
+import settingsIcon from '@wordpress/icons/build/settings';
 import save from '@wordpress/icons/build/save';
 import './GlobalSettings.css';
 
@@ -15,6 +15,16 @@ export default function GlobalSettings({ initialData }) {
     const [activeTab, setActiveTab] = useState('general');
     const [saving, setSaving] = useState(false);
     const [saveStatus, setSaveStatus] = useState(null);
+    const statusTimerRef = useRef(null);
+
+    // Clean up timer on unmount
+    useEffect(() => {
+        return () => {
+            if (statusTimerRef.current) {
+                clearTimeout(statusTimerRef.current);
+            }
+        };
+    }, []);
 
     const tabs = {
         general: { label: __('General', 'formipay'), icon: 'admin-generic' },
@@ -41,14 +51,14 @@ export default function GlobalSettings({ initialData }) {
         .then(result => {
             if (result.success) {
                 setSaveStatus('saved');
-                setTimeout(() => setSaveStatus(null), 2000);
+                if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
+                statusTimerRef.current = setTimeout(() => setSaveStatus(null), 2000);
             } else {
                 setSaveStatus('error');
             }
         })
-        .catch(error => {
+        .catch(() => {
             setSaveStatus('error');
-            console.error('Save error:', error);
         })
         .finally(() => {
             setSaving(false);
@@ -63,7 +73,7 @@ export default function GlobalSettings({ initialData }) {
         <div className="formipay-global-settings">
             <div className="formipay-settings-header">
                 <h1>
-                    <Icon icon={settings()} size={24} />
+                    <Icon icon={settingsIcon} size={24} />
                     { __('Formipay Settings', 'formipay') }
                 </h1>
                 <div className="header-actions">
@@ -82,7 +92,7 @@ export default function GlobalSettings({ initialData }) {
                         onClick={handleSave}
                         disabled={saving}
                         isBusy={saving}
-                        icon={save()}
+                        icon={save}
                     >
                         { saving ? __('Saving...', 'formipay') : __('Save Settings', 'formipay') }
                     </Button>
@@ -137,8 +147,8 @@ function GeneralTab({ settings, updateSetting }) {
                                 value={settings.default_currency || 'USD'}
                                 options={[
                                     { value: 'USD', label: '$ USD' },
-                                    { value: 'EUR', label: '€ EUR' },
-                                    { value: 'GBP', label: '£ GBP' },
+                                    { value: 'EUR', label: '\u20AC EUR' },
+                                    { value: 'GBP', label: '\u00A3 GBP' },
                                     { value: 'IDR', label: 'Rp IDR' },
                                 ]}
                                 onChange={(value) => updateSetting('default_currency', value)}
diff --git a/src/admin/components/ui/dialog.js b/src/admin/components/ui/dialog.js
index b2af8fd72..b50570043 100644
--- a/src/admin/components/ui/dialog.js
+++ b/src/admin/components/ui/dialog.js
@@ -33,17 +33,19 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, ...props }) {
     return (
         <DialogPortal>
-            <DialogOverlay />
-            <DialogPrimitive.Content
-                data-slot="dialog-content"
-                className={cn(
-                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </DialogPrimitive.Content>
+            <div className="formipay-design-system">
+                <DialogOverlay />
+                <DialogPrimitive.Content
+                    data-slot="dialog-content"
+                    className={cn(
+                        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </DialogPrimitive.Content>
+            </div>
         </DialogPortal>
     );
 }
diff --git a/src/admin/components/ui/dropdown-menu.js b/src/admin/components/ui/dropdown-menu.js
index 4dd8d2686..7542e1479 100644
--- a/src/admin/components/ui/dropdown-menu.js
+++ b/src/admin/components/ui/dropdown-menu.js
@@ -12,15 +12,17 @@ function DropdownMenuTrigger({ ...props }) {
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
     return (
         <DropdownMenuPrimitive.Portal>
-            <DropdownMenuPrimitive.Content
-                data-slot="dropdown-menu-content"
-                sideOffset={sideOffset}
-                className={cn(
-                    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-                    className
-                )}
-                {...props}
-            />
+            <div className="formipay-design-system">
+                <DropdownMenuPrimitive.Content
+                    data-slot="dropdown-menu-content"
+                    sideOffset={sideOffset}
+                    className={cn(
+                        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                        className
+                    )}
+                    {...props}
+                />
+            </div>
         </DropdownMenuPrimitive.Portal>
     );
 }
@@ -30,7 +32,7 @@ function DropdownMenuItem({ className, ...props }) {
         <DropdownMenuPrimitive.Item
             data-slot="dropdown-menu-item"
             className={cn(
-                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
                 className
             )}
             {...props}
diff --git a/src/admin/components/ui/input.js b/src/admin/components/ui/input.js
index c6ca1ad42..64f266469 100644
--- a/src/admin/components/ui/input.js
+++ b/src/admin/components/ui/input.js
@@ -6,9 +6,9 @@ function Input({ className, type, ...props }) {
             type={type}
             data-slot="input"
             className={cn(
-                "flex h-9 w-full rounded-[30px] border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                "h-9 w-full rounded-[30px]! border! border-input! bg-transparent! px-3 py-2 text-sm shadow-sm! transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                 /* number input resets */
-                type === 'number' && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                type === 'number' && "flex [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 /* date/time/datetime input resets */
                 (type === 'date' || type === 'time' || type === 'datetime-local') && "[&::-webkit-datetime-edit-fields-wrapper]:px-0 [&::-webkit-calendar-picker-indicator]:ml-1 [&::-webkit-calendar-picker-indicator]:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer",
                 /* file input resets */
diff --git a/src/admin/components/ui/radio-group.js b/src/admin/components/ui/radio-group.js
new file mode 100644
index 000000000..b94692782
--- /dev/null
+++ b/src/admin/components/ui/radio-group.js
@@ -0,0 +1,39 @@
+/**
+ * RadioGroup - shadcn/ui inspired radio button group component
+ */
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <div className="h-2.5 w-2.5 rounded-full bg-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/src/admin/components/ui/select.js b/src/admin/components/ui/select.js
index f0d908604..ba90662c9 100644
--- a/src/admin/components/ui/select.js
+++ b/src/admin/components/ui/select.js
@@ -35,7 +35,8 @@ function SelectTrigger({ className, children, ...props }) {
 function SelectContent({ className, children, position = "popper", ...props }) {
     return (
         <SelectPrimitive.Portal>
-            <SelectPrimitive.Content
+            <div className="formipay-design-system">
+                <SelectPrimitive.Content
                 data-slot="select-content"
                 className={cn(
                     "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -55,6 +56,7 @@ function SelectContent({ className, children, position = "popper", ...props }) {
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50"><path d="m6 9 6 6 6-6"/></svg>
                 </SelectPrimitive.ScrollDownButton>
             </SelectPrimitive.Content>
+            </div>
         </SelectPrimitive.Portal>
     );
 }
diff --git a/src/admin/components/ui/table.js b/src/admin/components/ui/table.js
index 6b3e5fe88..b4a2ea179 100644
--- a/src/admin/components/ui/table.js
+++ b/src/admin/components/ui/table.js
@@ -13,7 +13,7 @@ function TableHeader({ className, ...props }) {
 }
 
 function TableBody({ className, ...props }) {
-    return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+    return <tbody data-slot="table-body" className={cn("align-top [&_tr:last-child]:border-0", className)} {...props} />;
 }
 
 function TableFooter({ className, ...props }) {
@@ -37,7 +37,7 @@ function TableHead({ className, ...props }) {
         <th
             data-slot="table-head"
             className={cn(
-                "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                "h-10 px-2 text-left font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
                 className
             )}
             {...props}
@@ -49,7 +49,7 @@ function TableCell({ className, ...props }) {
     return (
         <td
             data-slot="table-cell"
-            className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+            className={cn("p-2 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
             {...props}
         />
     );
diff --git a/src/admin/index.js b/src/admin/index.js
index 4e374805a..bf279ae65 100644
--- a/src/admin/index.js
+++ b/src/admin/index.js
@@ -3,57 +3,63 @@
  */
 
 import './styles/globals.css';
+import './styles/wp-admin-restore.css';
 import { render } from '@wordpress/element';
 import App from './components/App';
-import CouponMetabox from './components/coupons/CouponMetabox';
-import './components/coupons/CouponMetabox.css';
+import FieldRenderer from './components/field-renderer';
+import VariationPricingTable from './components/products/VariationPricingTable';
+import './components/SettingsRenderer';
 
 // Mount the React app to all available mount points
 const mountApps = () => {
     // Mount main admin app pages
     const mountPoints = document.querySelectorAll('[data-formipay-mount]');
 
-    console.log('[Formipay] Mount points found:', mountPoints.length);
-    console.log('[Formipay] formipayAdmin data:', window.formipayAdmin);
-
     mountPoints.forEach((mountPoint) => {
         const page = mountPoint.dataset.formipayMount;
         const initialData = window.formipayAdmin?.[page] || {};
 
-        console.log('[Formipay] Mounting page:', page, 'with data:', initialData);
-
         try {
             render(
                 <App page={page} initialData={initialData} />,
                 mountPoint
             );
-            console.log('[Formipay] Successfully mounted:', page);
         } catch (error) {
             console.error('[Formipay] Failed to mount:', page, error);
         }
     });
 
-    // Mount metabox islands
-    const metaboxPoints = document.querySelectorAll('[data-formipay-metabox]');
+    // Mount generic field renderer metaboxes
+    const fieldRendererPoints = document.querySelectorAll('[data-formipay-field-renderer]');
 
-    console.log('[Formipay] Metabox points found:', metaboxPoints.length);
-
-    metaboxPoints.forEach((mountPoint) => {
-        const metaboxType = mountPoint.dataset.formipayMetabox;
-        const postId = parseInt(mountPoint.dataset.postId || '0');
-
-        console.log('[Formipay] Mounting metabox:', metaboxType, 'for post:', postId);
+    fieldRendererPoints.forEach((mountPoint) => {
+        const postType = mountPoint.dataset.formipayFieldRenderer;
+        const config = window.formipayFieldConfig || {};
 
         try {
-            if (metaboxType === 'coupon') {
-                render(
-                    <CouponMetabox postId={postId} />,
-                    mountPoint
-                );
-                console.log('[Formipay] Successfully mounted coupon metabox');
-            }
+            render(
+                <FieldRenderer config={config} />,
+                mountPoint
+            );
         } catch (error) {
-            console.error('[Formipay] Failed to mount metabox:', metaboxType, error);
+            console.error('[Formipay] Failed to mount field renderer:', postType, error);
+        }
+    });
+
+    // Mount variation pricing table on product edit pages
+    const variationPoints = document.querySelectorAll('[data-formipay-variation-table]');
+
+    variationPoints.forEach((mountPoint) => {
+        const productId = parseInt(mountPoint.dataset.formipayVariationTable || '0');
+        const productDetails = window.formipayProductDetails || {};
+
+        try {
+            render(
+                <VariationPricingTable productId={productId} productDetails={productDetails} />,
+                mountPoint
+            );
+        } catch (error) {
+            console.error('[Formipay] Failed to mount variation table:', error);
         }
     });
 };
diff --git a/src/admin/pages/Access.js b/src/admin/pages/Access.js
index 396abfd10..b829c3e23 100644
--- a/src/admin/pages/Access.js
+++ b/src/admin/pages/Access.js
@@ -22,17 +22,26 @@ export default function AccessPage() {
         });
 
         if (result) {
-            await fetch(`${ajaxUrl}?action=formipay-delete-access-item`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: new URLSearchParams({
-                    id,
-                    _wpnonce: nonce,
-                }),
-            });
-            toast.success(__('Item deleted successfully.', 'formipay'));
-            window.location.reload();
+            try {
+                const response = await fetch(`${ajaxUrl}?action=formipay-delete-access-item`, {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: new URLSearchParams({
+                        id,
+                        _wpnonce: nonce,
+                    }),
+                });
+                const data = await response.json();
+                if (data.success) {
+                    toast.success(__('Item deleted successfully.', 'formipay'));
+                    window.location.reload();
+                } else {
+                    toast.error(data.data?.message || __('Failed to delete item.', 'formipay'));
+                }
+            } catch {
+                toast.error(__('Failed to delete item.', 'formipay'));
+            }
         }
     };
 
@@ -45,17 +54,26 @@ export default function AccessPage() {
         });
 
         if (result) {
-            await fetch(`${ajaxUrl}?action=formipay-duplicate-access-item`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: new URLSearchParams({
-                    id,
-                    _wpnonce: nonce,
-                }),
-            });
-            toast.success(__('Item duplicated successfully.', 'formipay'));
-            window.location.reload();
+            try {
+                const response = await fetch(`${ajaxUrl}?action=formipay-duplicate-access-item`, {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: new URLSearchParams({
+                        id,
+                        _wpnonce: nonce,
+                    }),
+                });
+                const data = await response.json();
+                if (data.success) {
+                    toast.success(__('Item duplicated successfully.', 'formipay'));
+                    window.location.reload();
+                } else {
+                    toast.error(data.data?.message || __('Failed to duplicate item.', 'formipay'));
+                }
+            } catch {
+                toast.error(__('Failed to duplicate item.', 'formipay'));
+            }
         }
     };
 
@@ -70,34 +88,36 @@ export default function AccessPage() {
             label: __('Title', 'formipay'),
             render: (row) => (
                 <>
-                    <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>
-                        <strong>{row.title || row.post_title || __('Untitled', 'formipay')}</strong>
-                    </a>
-                    <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 delete"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleDelete(row.ID);
-                            }}
-                        >
-                            {__('delete', 'formipay')}
-                        </button>
-                        {' | '}
-                        <button
-                            className="button-link duplicate"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleDuplicate(row.ID);
-                            }}
-                        >
-                            {__('duplicate', 'formipay')}
-                        </button>
-                    </span>
+                    <div className="flex flex-col">
+                        <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>
+                            <strong>{row.title || row.post_title || __('Untitled', 'formipay')}</strong>
+                        </a>
+                        <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 delete"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDelete(row.ID);
+                                }}
+                            >
+                                {__('delete', 'formipay')}
+                            </button>
+                            {' | '}
+                            <button
+                                className="button-link duplicate"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDuplicate(row.ID);
+                                }}
+                            >
+                                {__('duplicate', 'formipay')}
+                            </button>
+                        </span>
+                    </div>
                 </>
             )
         },
diff --git a/src/admin/pages/Coupons.js b/src/admin/pages/Coupons.js
index 71fde22af..2755bb639 100644
--- a/src/admin/pages/Coupons.js
+++ b/src/admin/pages/Coupons.js
@@ -13,54 +13,65 @@ export default function CouponsPage() {
     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 confirm({
-            title: __('Delete Item', 'formipay'),
-            message: __('Do you want to delete this item?', 'formipay'),
+            title: __('Delete Coupon', 'formipay'),
+            message: __('Do you want to delete this coupon?', 'formipay'),
             confirmText: __('Delete Permanently', 'formipay'),
             cancelText: __('Cancel', 'formipay'),
             variant: 'destructive',
         });
 
         if (result) {
-            await fetch(`${ajaxUrl}?action=formipay-delete-coupon`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: new URLSearchParams({
-                    id,
-                    _wpnonce: nonce,
-                }),
-            });
-            toast.success(__('Item deleted successfully.', 'formipay'));
-            window.location.reload();
+            try {
+                const response = await fetch(`${ajaxUrl}?action=formipay-delete-coupon`, {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: new URLSearchParams({ id, _wpnonce: nonce }),
+                });
+                const data = await response.json();
+                if (data.success) {
+                    toast.success(__('Coupon deleted.', 'formipay'));
+                    window.location.reload();
+                } else {
+                    toast.error(data.data?.message || __('Failed to delete coupon.', 'formipay'));
+                }
+            } catch {
+                toast.error(__('Failed to delete coupon.', 'formipay'));
+            }
         }
     };
 
     const handleDuplicate = async (id) => {
         const result = await confirm({
-            title: __('Duplicate Item', 'formipay'),
-            message: __('Do you want to duplicate this item?', 'formipay'),
+            title: __('Duplicate Coupon', 'formipay'),
+            message: __('Do you want to duplicate this coupon?', 'formipay'),
             confirmText: __('Confirm', 'formipay'),
             cancelText: __('Cancel', 'formipay'),
         });
 
         if (result) {
-            await fetch(`${ajaxUrl}?action=formipay-duplicate-coupon`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: new URLSearchParams({
-                    id,
-                    _wpnonce: nonce,
-                }),
-            });
-            toast.success(__('Item duplicated successfully.', 'formipay'));
-            window.location.reload();
+            try {
+                const response = await fetch(`${ajaxUrl}?action=formipay-duplicate-coupon`, {
+                    method: 'POST',
+                    credentials: 'same-origin',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: new URLSearchParams({ id, _wpnonce: nonce }),
+                });
+                const data = await response.json();
+                if (data.success) {
+                    toast.success(__('Coupon duplicated.', 'formipay'));
+                    window.location.reload();
+                } else {
+                    toast.error(data.data?.message || __('Failed to duplicate coupon.', 'formipay'));
+                }
+            } catch {
+                toast.error(__('Failed to duplicate coupon.', 'formipay'));
+            }
         }
     };
 
@@ -74,7 +85,7 @@ export default function CouponsPage() {
             key: 'code',
             label: __('Coupon Code', 'formipay'),
             render: (row) => (
-                <>
+                <div className="flex flex-col">
                     <strong>{row.code || row.post_title}</strong>
                     <span className="row-actions">
                         <button
@@ -109,7 +120,7 @@ export default function CouponsPage() {
                             {__('duplicate', 'formipay')}
                         </button>
                     </span>
-                </>
+                </div>
             )
         },
         {
@@ -125,7 +136,6 @@ export default function CouponsPage() {
             label: __('Amount', 'formipay'),
             render: (row) => {
                 const amount = row.amount;
-                // Handle multi-currency amounts (array of objects)
                 if (Array.isArray(amount)) {
                     return amount.map((a) => (
                         <div key={a.raw} style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
@@ -134,7 +144,6 @@ export default function CouponsPage() {
                         </div>
                     ));
                 }
-                // Handle single currency amount (number or string)
                 if (typeof amount === 'number') {
                     return amount + '%';
                 }
@@ -190,7 +199,7 @@ export default function CouponsPage() {
                 actions={{
                     addNew: {
                         label: __('+ Add New Coupon', 'formipay'),
-                        href: '/wp-admin/post-new.php?post_type=formipay_coupon',
+                        href: '/wp-admin/post-new.php?post_type=formipay-coupon',
                     },
                     bulkDelete: {
                         action: 'formipay-bulk-delete-coupon',
diff --git a/src/admin/pages/Customers.js b/src/admin/pages/Customers.js
index 6831d9135..659f01b1f 100644
--- a/src/admin/pages/Customers.js
+++ b/src/admin/pages/Customers.js
@@ -18,10 +18,12 @@ export default function CustomersPage() {
             label: __('Name', 'formipay'),
             render: (row) => (
                 <>
-                    <strong>{row.name || row.full_name || '-'}</strong>
-                    <span className="row-actions">
-                        <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/admin.php?page=formipay-customers&customer_id=${row.ID}`}>{__('view', 'formipay')}</a>
-                    </span>
+                    <div class="flex flex-col">
+                        <strong>{row.name || row.full_name || '-'}</strong>
+                        <span className="row-actions">
+                            <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/admin.php?page=formipay-customers&customer_id=${row.ID}`}>{__('view', 'formipay')}</a>
+                        </span>
+                    </div>
                 </>
             )
         },
diff --git a/src/admin/pages/Forms.js b/src/admin/pages/Forms.js
index d8adaa2de..57ea2c39c 100644
--- a/src/admin/pages/Forms.js
+++ b/src/admin/pages/Forms.js
@@ -69,34 +69,36 @@ export default function FormsPage() {
             label: __('Title', 'formipay'),
             render: (row) => (
                 <>
-                    <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>
-                        <strong>{row.title}</strong>
-                    </a>
-                    <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 delete"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleDelete(row.ID);
-                            }}
-                        >
-                            {__('delete', 'formipay')}
-                        </button>
-                        {' | '}
-                        <button
-                            className="button-link duplicate"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleDuplicate(row.ID);
-                            }}
-                        >
-                            {__('duplicate', 'formipay')}
-                        </button>
-                    </span>
+                    <div class="flex flex-col">
+                        <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>
+                            <strong>{row.title}</strong>
+                        </a>
+                        <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 delete"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDelete(row.ID);
+                                }}
+                            >
+                                {__('delete', 'formipay')}
+                            </button>
+                            {' | '}
+                            <button
+                                className="button-link duplicate"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDuplicate(row.ID);
+                                }}
+                            >
+                                {__('duplicate', 'formipay')}
+                            </button>
+                        </span>
+                    </div>
                 </>
             )
         },
diff --git a/src/admin/pages/Licenses.js b/src/admin/pages/Licenses.js
index f63c0295f..0dfae3686 100644
--- a/src/admin/pages/Licenses.js
+++ b/src/admin/pages/Licenses.js
@@ -47,19 +47,21 @@ export default function LicensesPage() {
             label: __('License Key', 'formipay'),
             render: (row) => (
                 <>
-                    <code>{row.license_key || '-'}</code>
-                    <span className="row-actions">
-                        <button
-                            className="button-link delete"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                handleDelete(row.id);
-                            }}
-                        >
-                            {__('delete', 'formipay')}
-                        </button>
-                    </span>
+                    <div class="flex flex-col">
+                        <code>{row.license_key || '-'}</code>
+                        <span className="row-actions">
+                            <button
+                                className="button-link delete"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleDelete(row.id);
+                                }}
+                            >
+                                {__('delete', 'formipay')}
+                            </button>
+                        </span>
+                    </div>
                 </>
             )
         },
diff --git a/src/admin/pages/Products.js b/src/admin/pages/Products.js
index 372533c8f..a278feaa0 100644
--- a/src/admin/pages/Products.js
+++ b/src/admin/pages/Products.js
@@ -100,35 +100,37 @@ export default function ProductsPage() {
             label: __('Title', 'formipay'),
             render: (row) => (
                 <>
-                    <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>
-                        <strong>{row.post_title || row.title || __('Untitled', 'formipay')}</strong>
-                    </a>
-                    <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={() => {
-                            setSelectedProductId(row.ID);
-                            setIsEditor(true);
-                        }}>
-                            {__('edit variations', 'formipay')}
-                        </button>
-                        {' | '}
-                        <button className="button-link delete" onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            handleDelete(row.ID);
-                        }}>
-                            {__('delete', 'formipay')}
-                        </button>
-                        {' | '}
-                        <button className="button-link duplicate" onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            handleDuplicate(row.ID);
-                        }}>
-                            {__('duplicate', 'formipay')}
-                        </button>
-                    </span>
+                    <div class="flex flex-col">
+                        <a href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID}&action=edit`}>
+                            <strong>{row.post_title || row.title || __('Untitled', 'formipay')}</strong>
+                        </a>
+                        <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={() => {
+                                setSelectedProductId(row.ID);
+                                setIsEditor(true);
+                            }}>
+                                {__('edit variations', 'formipay')}
+                            </button>
+                            {' | '}
+                            <button className="button-link delete" onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDelete(row.ID);
+                            }}>
+                                {__('delete', 'formipay')}
+                            </button>
+                            {' | '}
+                            <button className="button-link duplicate" onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDuplicate(row.ID);
+                            }}>
+                                {__('duplicate', 'formipay')}
+                            </button>
+                        </span>
+                    </div>
                 </>
             )
         },
diff --git a/src/admin/styles/globals.css b/src/admin/styles/globals.css
index de819c5b0..896db26e5 100644
--- a/src/admin/styles/globals.css
+++ b/src/admin/styles/globals.css
@@ -40,7 +40,7 @@
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.546 0.245 262.881);
+    --primary: oklch(0.58 0.22 267);
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
@@ -52,7 +52,7 @@
     --destructive-foreground: oklch(0.985 0 0);
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
-    --ring: oklch(0.546 0.245 262.881);
+    --ring: oklch(0.58 0.22 267);
     --sidebar: #2c3e50;
     --sidebar-foreground: #bec5cb;
     --sidebar-active: #2985f7;
diff --git a/src/admin/styles/wp-admin-restore.css b/src/admin/styles/wp-admin-restore.css
new file mode 100644
index 000000000..65130358a
--- /dev/null
+++ b/src/admin/styles/wp-admin-restore.css
@@ -0,0 +1,122 @@
+/**
+ * Restore WordPress Admin Styles
+ * These styles ensure WordPress admin elements (Screen Options, Help tabs, etc.)
+ * maintain their default styling even with our custom design system.
+ */
+
+/* Screen Options button */
+#show-settings-link {
+	color: #646970 !important;
+	padding: 6px 12px !important;
+	font-size: 13px !important;
+	line-height: 1.5 !important;
+}
+
+#show-settings-link:hover,
+#show-settings-link:active {
+	color: #135e96 !important;
+}
+
+#show-settings-link:focus {
+	box-shadow: 0 0 0 1px #135e96 !important;
+}
+
+/* Screen Options panel */
+#screen-options-wrap {
+	color: #1e1e1e !important;
+	background: #fff !important;
+	border: 1px solid #c3c4c7 !important;
+	box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
+}
+
+#screen-options-wrap label {
+	color: #1e1e1e !important;
+}
+
+#screen-options-wrap input[type="checkbox"] {
+	margin: 0 4px 0 0 !important;
+}
+
+/* Help tabs */
+#contextual-help-wrap {
+	color: #1e1e1e !important;
+	background: #fff !important;
+	border: 1px solid #c3c4c7 !important;
+	box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
+}
+
+#contextual-help-wrap a {
+	color: #2271b1 !important;
+}
+
+#contextual-help-wrap a:hover {
+	color: #135e96 !important;
+}
+
+/* Admin page wrap */
+.wrap {
+	margin: 20px 20px 0 2px !important;
+	max-width: 100% !important;
+}
+
+/* Page titles */
+.wrap h1 {
+	font-size: 23px !important;
+	font-weight: 400 !important;
+	margin: 0 !important;
+	padding: 9px 0 4px 0 !important;
+	line-height: 1.3 !important;
+}
+
+/* Admin navigation tabs */
+.nav-tab {
+	border: 1px solid #c3c4c7 !important;
+	border-bottom: none !important;
+	background: #f0f0f1 !important;
+	color: #646970 !important;
+	font-size: 13px !important;
+	line-height: 2 !important;
+	margin: 4px 4px 0 0 !important;
+	padding: 5px 12px !important;
+	text-decoration: none !important;
+}
+
+.nav-tab:hover {
+	background-color: #fff !important;
+	color: #135e96 !important;
+}
+
+.nav-tab-active {
+	background: #fff !important;
+	border-bottom: 1px solid #fff !important;
+	color: #1e1e1e !important;
+	font-weight: 600 !important;
+}
+
+/* Admin bar integration */
+html.wp-toolbar {
+	padding-top: 32px !important;
+}
+
+/* Dropdown menus */
+.menupop .menupop-toggle {
+	color: #646970 !important;
+}
+
+.menupop:hover .menupop-toggle,
+.menupop .menupop-toggle:focus {
+	color: #1e1e1e !important;
+}
+
+/* Button styles for Screen Options */
+.button-secondary {
+	background: #f6f7f7 !important;
+	border: 1px solid #c3c4c7 !important;
+	color: #1e1e1e !important;
+}
+
+.button-secondary:hover {
+	background: #f0f0f1 !important;
+	border-color: #1e1e1e !important;
+	color: #1e1e1e !important;
+}