feat: rewrite DataTable + design system with shadcn/ui, replace SweetAlert2

- Rewrite DataTable using shadcn Table, Button, Dialog, Input, Select, Checkbox, Skeleton
- Replace all SweetAlert2 calls with shadcn Dialog (confirm) + sonner toast
- Rewrite design system internals to use shadcn Label, Input, Switch, Button, Alert, Badge, Tabs
- Add Toaster to App.js for global toast support
- Remove all @wordpress/components imports from DataTable
- Remove WpcftoDesign.css import from design system
- Replace Swal.fire() in Coupons, Products, Forms, Access, Licenses pages

build/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '9a1a0e2d03b8d775e648');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '6bf4643f2ea15ecdf0b7');

src/admin/components/App.js

@@ -11,6 +11,7 @@ import CouponsPage from '../pages/Coupons';
 import AccessPage from '../pages/Access';
 import LicensesPage from '../pages/Licenses';
 import NavigationMenu from './NavigationMenu';
+import { Toaster } from '@/components/ui/sonner';
 import '../pages/AdminPages.css';
 
 const pageComponents = {
@@ -101,6 +102,7 @@ export default function App({ page: initialPage, initialData }) {
 
     return (
         <div className="formipay-admin-wrap">
+            <Toaster />
             <NavigationMenu
                 currentPage={currentPage}
                 onPageNavigate={handlePageNavigate}

src/admin/components/shared/DataTable.js

@@ -1,500 +1,555 @@
 /**
  * Full-featured DataTable component
  * Supports: selection, filtering, search, sort, pagination, actions
+ *
+ * Built with shadcn/ui components + Tailwind CSS.
  */
 
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback, useEffect } from '@wordpress/element';
-import {
-    Button,
-    Modal,
-    TextControl,
-    SelectControl,
-    Spinner,
-} from '@wordpress/components';
-import './DataTable.css';
+import { cn } from '@/lib/utils';
+import { confirm } from '@/lib/confirm';
+import { toast } from '@/lib/toast';
 
-// SweetAlert2 is loaded via WordPress (global scope)
-const Swal = window.Swal;
+// shadcn/ui components
+import { Button } from '@/components/ui/button';
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+	Select,
+	SelectTrigger,
+	SelectContent,
+	SelectItem,
+	SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+	Table,
+	TableHeader,
+	TableBody,
+	TableRow,
+	TableHead,
+	TableCell,
+} from '@/components/ui/table';
+import { Checkbox } from '@/components/ui/checkbox';
 
 export default function DataTable({
-    // Data fetching
-    initialData = [],
+	// Data fetching
+	initialData = [],
 
-    // Columns definition
-    columns,
+	// Columns definition
+	columns,
 
-    // Filtering
-    filterOptions = null, // { key: 'post_status', options: [{value, label}] }
-    statusCounts = null, // { all: 10, publish: 5, draft: 5 }
+	// Filtering
+	filterOptions = null, // { key: 'post_status', options: [{value, label}] }
+	statusCounts = null, // { all: 10, publish: 5, draft: 5 }
 
-    // Search
-    searchable = true,
-    searchPlaceholder = __('Search...', 'formipay'),
+	// Search
+	searchable = true,
+	searchPlaceholder = __('Search...', 'formipay'),
 
-    // Sorting
-    sortable = true,
-    defaultSort = { id: 'ID', desc: true },
+	// Sorting
+	sortable = true,
+	defaultSort = { id: 'ID', desc: true },
 
-    // Selection
-    selectable = true,
+	// Selection
+	selectable = true,
 
-    // Pagination
-    pagination = true,
-    pageSize = 10,
-    pageSizeOptions = [10, 20, 50, 100],
+	// Pagination
+	pagination = true,
+	pageSize = 10,
+	pageSizeOptions = [10, 20, 50, 100],
 
-    // Actions
-    actions = {
-        addNew: false, // { label, action: 'formipay-create-form-post' }
-        bulkDelete: true, // { action: 'formipay-bulk-delete-form' }
-        inline: true, // edit, delete, duplicate
-    },
+	// Actions
+	actions = {
+		addNew: false, // { label, action: 'formipay-create-form-post' }
+		bulkDelete: true, // { action: 'formipay-bulk-delete-form' }
+		inline: true, // edit, delete, duplicate
+	},
 
-    // Empty state
-    emptyMessage = __('No items found', 'formipay'),
+	// Empty state
+	emptyMessage = __('No items found', 'formipay'),
 
-    // AJAX config
-    ajaxUrl,
-    nonce,
-    tableAction, // e.g., 'formipay-tabledata-forms'
-    deleteAction,
-    duplicateAction,
+	// AJAX config
+	ajaxUrl,
+	nonce,
+	tableAction, // e.g., 'formipay-tabledata-forms'
+	deleteAction,
+	duplicateAction,
 
-    // Selection callback
-    onSelectionChange,
+	// Selection callback
+	onSelectionChange,
 }) {
-    // State
-    const [data, setData] = useState(initialData);
-    const [loading, setLoading] = useState(true);
-    const [total, setTotal] = useState(0);
+	// State
+	const [data, setData] = useState(initialData);
+	const [loading, setLoading] = useState(true);
+	const [total, setTotal] = useState(0);
 
-    // Filters
-    const [activeFilter, setActiveFilter] = useState('all');
-    const [searchQuery, setSearchQuery] = useState('');
+	// Filters
+	const [activeFilter, setActiveFilter] = useState('all');
+	const [searchQuery, setSearchQuery] = useState('');
 
-    // Sorting
-    const [sortBy, setSortBy] = useState(defaultSort.id || 'ID');
-    const [sortOrder, setSortOrder] = useState(defaultSort.desc ? 'desc' : 'asc');
+	// Sorting
+	const [sortBy, setSortBy] = useState(defaultSort.id || 'ID');
+	const [sortOrder, setSortOrder] = useState(defaultSort.desc ? 'desc' : 'asc');
 
-    // Pagination
-    const [currentPage, setCurrentPage] = useState(1);
-    const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+	// Pagination
+	const [currentPage, setCurrentPage] = useState(1);
+	const [currentPageSize, setCurrentPageSize] = useState(pageSize);
 
-    // Selection
-    const [selectedRows, setSelectedRows] = useState(new Set());
-    const [selectAll, setSelectAll] = useState(false);
+	// Selection
+	const [selectedRows, setSelectedRows] = useState(new Set());
+	const [selectAll, setSelectAll] = useState(false);
 
-    // Notify parent of selection changes
-    useEffect(() => {
-        if (onSelectionChange) {
-            onSelectionChange(selectedRows);
-        }
-    }, [selectedRows, onSelectionChange]);
+	// Notify parent of selection changes
+	useEffect(() => {
+		if (onSelectionChange) {
+			onSelectionChange(selectedRows);
+		}
+	}, [selectedRows, onSelectionChange]);
 
-    // Add New Modal
-    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-    const [newItemTitle, setNewItemTitle] = useState('');
+	// Add New Modal
+	const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+	const [newItemTitle, setNewItemTitle] = useState('');
 
-    // Derive action names from tableAction
-    const baseActionName = tableAction.replace('formipay-tabledata-', '');
-    const bulkDeleteAction = actions.bulkDelete?.action || `formipay-bulk-delete-${baseActionName}`;
+	// Derive action names from tableAction
+	const baseActionName = tableAction.replace('formipay-tabledata-', '');
+	const bulkDeleteAction = actions.bulkDelete?.action || `formipay-bulk-delete-${baseActionName}`;
 
-    // Load data
-    const loadData = useCallback(async () => {
-        setLoading(true);
+	// Load data
+	const loadData = useCallback(async () => {
+		setLoading(true);
 
-        const params = new URLSearchParams({
-            action: tableAction,
-            _wpnonce: nonce,
-            limit: currentPageSize.toString(),
-            offset: ((currentPage - 1) * currentPageSize).toString(),
-        });
+		const params = new URLSearchParams({
+			action: tableAction,
+			_wpnonce: nonce,
+			limit: currentPageSize.toString(),
+			offset: ((currentPage - 1) * currentPageSize).toString(),
+		});
 
-        // Add filter
-        if (filterOptions && activeFilter !== 'all') {
-            params.append(filterOptions.key, activeFilter);
-        }
+		// Add filter
+		if (filterOptions && activeFilter !== 'all') {
+			params.append(filterOptions.key, activeFilter);
+		}
 
-        // Add search
-        if (searchQuery) {
-            params.append('search', searchQuery);
-        }
+		// Add search
+		if (searchQuery) {
+			params.append('search', searchQuery);
+		}
 
-        // Add sort
-        params.append('orderby', sortBy);
-        params.append('sort', sortOrder);
+		// Add sort
+		params.append('orderby', sortBy);
+		params.append('sort', sortOrder);
 
-        try {
-            const response = await fetch(`${ajaxUrl}?${params.toString()}`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: params,
-            });
+		try {
+			const response = await fetch(`${ajaxUrl}?${params.toString()}`, {
+				method: 'POST',
+				credentials: 'same-origin',
+				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+				body: params,
+			});
 
-            const result = await response.json();
-            const items = result.data?.results || result.results || result.data || [];
-            setData(items);
-            setTotal(result.total || items.length);
-        } catch (error) {
-            console.error('Load data error:', error);
-        } finally {
-            setLoading(false);
-        }
-    }, [ajaxUrl, nonce, tableAction, currentPageSize, currentPage, activeFilter, searchQuery, sortBy, sortOrder, filterOptions]);
+			const result = await response.json();
+			const items = result.data?.results || result.results || result.data || [];
+			setData(items);
+			setTotal(result.total || items.length);
+		} catch (error) {
+			console.error('Load data error:', error);
+		} finally {
+			setLoading(false);
+		}
+	}, [ajaxUrl, nonce, tableAction, currentPageSize, currentPage, activeFilter, searchQuery, sortBy, sortOrder, filterOptions]);
 
-    // Initial load and refresh on filter/sort/page change
-    useEffect(() => {
-        loadData();
-    }, [loadData]);
+	// Initial load and refresh on filter/sort/page change
+	useEffect(() => {
+		loadData();
+	}, [loadData]);
 
-    // Handle filter change
-    const handleFilterChange = (value) => {
-        setActiveFilter(value);
-        setCurrentPage(1);
-    };
+	// Handle filter change
+	const handleFilterChange = (value) => {
+		setActiveFilter(value);
+		setCurrentPage(1);
+	};
 
-    // Handle search (debounced)
-    useEffect(() => {
-        const timeoutId = setTimeout(() => {
-            if (searchQuery !== null) {
-                setCurrentPage(1);
-            }
-        }, 500);
-        return () => clearTimeout(timeoutId);
-    }, [searchQuery]);
+	// Handle search (debounced)
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			if (searchQuery !== null) {
+				setCurrentPage(1);
+			}
+		}, 500);
+		return () => clearTimeout(timeoutId);
+	}, [searchQuery]);
 
-    // Handle selection
-    const handleRowSelect = (id) => {
-        const newSelected = new Set(selectedRows);
-        if (newSelected.has(id)) {
-            newSelected.delete(id);
-        } else {
-            newSelected.add(id);
-        }
-        setSelectedRows(newSelected);
-        setSelectAll(false);
-    };
+	// Handle selection
+	const handleRowSelect = (id) => {
+		const newSelected = new Set(selectedRows);
+		if (newSelected.has(id)) {
+			newSelected.delete(id);
+		} else {
+			newSelected.add(id);
+		}
+		setSelectedRows(newSelected);
+		setSelectAll(false);
+	};
 
-    const handleSelectAll = () => {
-        if (selectAll) {
-            setSelectedRows(new Set());
-        } else {
-            setSelectedRows(new Set(data.map(row => row.ID || row.id)));
-        }
-        setSelectAll(!selectAll);
-    };
+	const handleSelectAll = () => {
+		if (selectAll) {
+			setSelectedRows(new Set());
+		} else {
+			setSelectedRows(new Set(data.map(row => row.ID || row.id)));
+		}
+		setSelectAll(!selectAll);
+	};
 
-    // Handle bulk delete
-    const handleBulkDelete = async () => {
-        if (selectedRows.size === 0) return;
+	// Handle bulk delete
+	const handleBulkDelete = async () => {
+		if (selectedRows.size === 0) return;
 
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to delete the selected item(s)?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Confirm', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
-        });
+		const confirmed = await confirm({
+			title: __('Delete Selected', 'formipay'),
+			message: __('Do you want to delete the selected item(s)?', 'formipay'),
+			confirmText: __('Confirm', 'formipay'),
+			cancelText: __('Cancel', 'formipay'),
+			variant: 'destructive',
+		});
 
-        if (result.isConfirmed) {
-            await fetch(`${ajaxUrl}?action=${bulkDeleteAction}`, {
-                method: 'POST',
-                credentials: 'same-origin',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: new URLSearchParams({
-                    ids: Array.from(selectedRows),
-                    _wpnonce: nonce,
-                }),
-            });
+		if (confirmed) {
+			await fetch(`${ajaxUrl}?action=${bulkDeleteAction}`, {
+				method: 'POST',
+				credentials: 'same-origin',
+				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+				body: new URLSearchParams({
+					ids: Array.from(selectedRows),
+					_wpnonce: nonce,
+				}),
+			});
 
-            setSelectedRows(new Set());
-            setSelectAll(false);
-            loadData();
+			setSelectedRows(new Set());
+			setSelectAll(false);
+			loadData();
 
-            Swal.fire({
-                title: __('Done!', 'formipay'),
-                html: __('Items deleted successfully.', 'formipay'),
-                icon: 'success',
-            });
-        }
-    };
+			toast.success(__('Items deleted successfully.', 'formipay'));
+		}
+	};
 
-    // Handle Add New
-    const handleAddNew = async () => {
-        if (!newItemTitle.trim()) {
-            Swal.fire({
-                html: __('Title is required.', 'formipay'),
-                icon: 'error',
-            });
-            return;
-        }
+	// Handle Add New
+	const handleAddNew = async () => {
+		if (!newItemTitle.trim()) {
+			toast.error(__('Title is required.', 'formipay'));
+			return;
+		}
 
-        const createAction = actions.addNew.action;
-        const result = await fetch(`${ajaxUrl}?action=${createAction}`, {
-            method: 'POST',
-            credentials: 'same-origin',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body: new URLSearchParams({
-                title: newItemTitle,
-                _wpnonce: nonce,
-            }),
-        });
+		const createAction = actions.addNew.action;
+		const result = await fetch(`${ajaxUrl}?action=${createAction}`, {
+			method: 'POST',
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+			body: new URLSearchParams({
+				title: newItemTitle,
+				_wpnonce: nonce,
+			}),
+		});
 
-        const response = await result.json();
+		const response = await result.json();
 
-        if (response.success) {
-            setIsAddModalOpen(false);
-            setNewItemTitle('');
-            if (response.data.edit_post_url) {
-                window.location.href = response.data.edit_post_url;
-            } else {
-                loadData();
-            }
-        } else {
-            Swal.fire({
-                html: response.data.message || __('Error creating item.', 'formipay'),
-                icon: 'error',
-            });
-        }
-    };
+		if (response.success) {
+			setIsAddModalOpen(false);
+			setNewItemTitle('');
+			if (response.data.edit_post_url) {
+				window.location.href = response.data.edit_post_url;
+			} else {
+				loadData();
+			}
+		} else {
+			toast.error(response.data.message || __('Error creating item.', 'formipay'));
+		}
+	};
 
-    return (
-        <div className="formipay-data-table-wrapper">
-            {/* Toolbar */}
-            <div className="formipay-table-toolbar">
-                {/* Add New Button */}
-                {actions.addNew && (
-                    <Button
-                        variant="primary"
-                        onClick={() => setIsAddModalOpen(true)}
-                    >
-                        {actions.addNew.label || __('+ Add New', 'formipay')}
-                    </Button>
-                )}
+	// Compute total pages
+	const totalPages = Math.ceil(total / currentPageSize);
 
-                {/* Bulk Delete Button */}
-                {actions.bulkDelete && selectable && selectedRows.size > 0 && (
-                    <Button
-                        variant="secondary"
-                        isDestructive
-                        onClick={handleBulkDelete}
-                    >
-                        {__('Delete Selected', 'formipay')} ({selectedRows.size})
-                    </Button>
-                )}
+	return (
+		<div className="formipay-design-system">
+			{/* Toolbar */}
+			<div className="flex items-center gap-3 mb-4 flex-wrap">
+				{/* Add New Button */}
+				{actions.addNew && (
+					<Button
+						onClick={() => setIsAddModalOpen(true)}
+					>
+						{actions.addNew.label || __('+ Add New', 'formipay')}
+					</Button>
+				)}
 
-                {/* Search */}
-                {searchable && (
-                    <TextControl
-                        placeholder={searchPlaceholder}
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        className="formipay-table-search"
-                    />
-                )}
+				{/* Bulk Delete Button */}
+				{actions.bulkDelete && selectable && selectedRows.size > 0 && (
+					<Button
+						variant="destructive"
+						onClick={handleBulkDelete}
+					>
+						{__('Delete Selected', 'formipay')} ({selectedRows.size})
+					</Button>
+				)}
 
-                {/* Sort */}
-                {sortable && (
-                    <SelectControl
-                        value={`${sortBy}-${sortOrder}`}
-                        options={[
-                            { label: __('ID ↓', 'formipay'), value: 'ID-desc' },
-                            { label: __('ID ↑', 'formipay'), value: 'ID-asc' },
-                            { label: __('Date ↓', 'formipay'), value: 'date-desc' },
-                            { label: __('Date ↑', 'formipay'), value: 'date-asc' },
-                            { label: __('Title A-Z', 'formipay'), value: 'title-asc' },
-                            { label: __('Title Z-A', 'formipay'), value: 'title-desc' },
-                        ]}
-                        onChange={(value) => {
-                            const [id, sort] = value.split('-');
-                            setSortBy(id);
-                            setSortOrder(sort);
-                        }}
-                    />
-                )}
+				{/* Search */}
+				{searchable && (
+					<Input
+						placeholder={searchPlaceholder}
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+						className="max-w-75 grow"
+					/>
+				)}
 
-                {/* Refresh Button */}
-                <Button
-                    variant="secondary"
-                    onClick={loadData}
-                    disabled={loading}
-                >
-                    {loading ? __('Refreshing...', 'formipay') : __('Refresh', 'formipay')}
-                </Button>
-            </div>
+				{/* Sort */}
+				{sortable && (
+					<Select
+						value={`${sortBy}-${sortOrder}`}
+						onValueChange={(value) => {
+							const [id, sort] = value.split('-');
+							setSortBy(id);
+							setSortOrder(sort);
+						}}
+					>
+						<SelectTrigger className="w-40">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="ID-desc">{__('ID \u2193', 'formipay')}</SelectItem>
+							<SelectItem value="ID-asc">{__('ID \u2191', 'formipay')}</SelectItem>
+							<SelectItem value="date-desc">{__('Date \u2193', 'formipay')}</SelectItem>
+							<SelectItem value="date-asc">{__('Date \u2191', 'formipay')}</SelectItem>
+							<SelectItem value="title-asc">{__('Title A-Z', 'formipay')}</SelectItem>
+							<SelectItem value="title-desc">{__('Title Z-A', 'formipay')}</SelectItem>
+						</SelectContent>
+					</Select>
+				)}
 
-            {/* Filter Tabs */}
-            {filterOptions && (
-                <div className="formipay-filter-tabs">
-                    {filterOptions.options.map(option => (
-                        <button
-                            key={option.value}
-                            className={`filter-tab ${activeFilter === option.value ? 'active' : ''}`}
-                            onClick={() => handleFilterChange(option.value)}
-                        >
-                            {option.label}
-                            {statusCounts && (
-                                <span className="count">
-                                    {statusCounts[option.value] || 0}
-                                </span>
-                            )}
-                        </button>
-                    ))}
-                </div>
-            )}
+				{/* Refresh Button */}
+				<Button
+					variant="outline"
+					onClick={loadData}
+					disabled={loading}
+				>
+					{loading ? __('Refreshing...', 'formipay') : __('Refresh', 'formipay')}
+				</Button>
+			</div>
 
-            {/* Table */}
-            <div className="formipay-table-container">
-                {loading ? (
-                    <div className="formipay-table-loading">
-                        <Spinner />
-                    </div>
-                ) : data.length === 0 ? (
-                    <div className="formipay-table-empty">
-                        {emptyMessage}
-                    </div>
-                ) : (
-                    <table className="formipay-table wp-list-table widefat fixed striped">
-                        <thead>
-                            <tr>
-                                {/* Checkbox column */}
-                                {selectable && (
-                                    <th className="column-select">
-                                        <input
-                                            type="checkbox"
-                                            checked={selectAll}
-                                            onChange={handleSelectAll}
-                                        />
-                                    </th>
-                                )}
-                                {/* Data columns */}
-                                {columns.map((column) => (
-                                    <th key={column.key} className={`column-${column.key}`}>
-                                        {column.label}
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {data.map((row, rowIndex) => {
-                                const rowId = row.ID || row.id;
-                                return (
-                                    <tr key={rowIndex} className="formipay-table-row">
-                                        {/* Checkbox */}
-                                        {selectable && (
-                                            <td>
-                                                <input
-                                                    type="checkbox"
-                                                    checked={selectedRows.has(rowId)}
-                                                    onChange={() => handleRowSelect(rowId)}
-                                                />
-                                            </td>
-                                        )}
-                                        {/* Data columns */}
-                                        {columns.map((column) => (
-                                            <td key={column.key}>
-                                                {column.render ? column.render(row) : row[column.key]}
-                                            </td>
-                                        ))}
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
-                )}
-            </div>
+			{/* Filter Tabs */}
+			{filterOptions && (
+				<div className="flex gap-2 mb-4">
+					{filterOptions.options.map(option => (
+						<button
+							key={option.value}
+							className={cn(
+								'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
+								activeFilter === option.value
+									? 'bg-primary text-primary-foreground'
+									: 'bg-muted text-muted-foreground hover:bg-muted/80'
+							)}
+							onClick={() => handleFilterChange(option.value)}
+						>
+							{option.label}
+							{statusCounts && (
+								<span
+									className={cn(
+										'inline-block min-w-4.5 px-1.5 py-0.5 ml-1.5 rounded-full text-[11px] leading-none',
+										activeFilter === option.value
+											? 'bg-primary-foreground/20 text-primary-foreground'
+											: 'bg-muted-foreground/10 text-muted-foreground'
+									)}
+								>
+									{statusCounts[option.value] || 0}
+								</span>
+							)}
+						</button>
+					))}
+				</div>
+			)}
 
-            {/* Pagination */}
-            {pagination && total > currentPageSize && (
-                <div className="formipay-table-pagination">
-                    <div className="pagination-info">
-                        {__('Showing', 'formipay')} {((currentPage - 1) * currentPageSize) + 1} - {Math.min(currentPage * currentPageSize, total)} {__('of', 'formipay')} {total}
-                    </div>
-                    <div className="pagination-controls">
-                        <Button
-                            variant="secondary"
-                            disabled={currentPage === 1}
-                            onClick={() => setCurrentPage(1)}
-                        >
-                            {'««'}
-                        </Button>
-                        <Button
-                            variant="secondary"
-                            disabled={currentPage === 1}
-                            onClick={() => setCurrentPage(currentPage - 1)}
-                        >
-                            {'‹'}
-                        </Button>
-                        <span className="page-info">
-                            {__('Page', 'formipay')} {currentPage} {__('of', 'formipay')} {Math.ceil(total / currentPageSize)}
-                        </span>
-                        <Button
-                            variant="secondary"
-                            disabled={currentPage >= Math.ceil(total / currentPageSize)}
-                            onClick={() => setCurrentPage(currentPage + 1)}
-                        >
-                            {'›'}
-                        </Button>
-                        <Button
-                            variant="secondary"
-                            disabled={currentPage >= Math.ceil(total / currentPageSize)}
-                            onClick={() => setCurrentPage(Math.ceil(total / currentPageSize))}
-                        >
-                            {'»'}
-                        </Button>
-                        <SelectControl
-                            value={currentPageSize.toString()}
-                            options={pageSizeOptions.map(size => ({
-                                label: size.toString(),
-                                value: size.toString(),
-                            }))}
-                            onChange={(value) => {
-                                setCurrentPageSize(parseInt(value));
-                                setCurrentPage(1);
-                            }}
-                        />
-                    </div>
-                </div>
-            )}
+			{/* Table */}
+			<div className="rounded-lg border bg-card">
+				{loading ? (
+					<div className="flex flex-col items-center justify-center py-12">
+						<div className="w-full space-y-3 px-4">
+							{Array.from({ length: 5 }).map((_, i) => (
+								<div key={i} className="flex items-center gap-4">
+									<Skeleton className="h-4 w-8" />
+									<Skeleton className="h-4 flex-1" />
+									<Skeleton className="h-4 flex-1" />
+									<Skeleton className="h-4 w-24" />
+								</div>
+							))}
+						</div>
+					</div>
+				) : data.length === 0 ? (
+					<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+						<p>{emptyMessage}</p>
+					</div>
+				) : (
+					<Table>
+						<TableHeader>
+							<TableRow>
+								{/* Checkbox column */}
+								{selectable && (
+									<TableHead className="w-10 text-center">
+										<Checkbox
+											checked={selectAll}
+											onCheckedChange={handleSelectAll}
+										/>
+									</TableHead>
+								)}
+								{/* Data columns */}
+								{columns.map((column) => (
+									<TableHead key={column.key}>
+										{column.label}
+									</TableHead>
+								))}
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{data.map((row, rowIndex) => {
+								const rowId = row.ID || row.id;
+								return (
+									<TableRow key={rowIndex}>
+										{/* Checkbox */}
+										{selectable && (
+											<TableCell className="w-10 text-center">
+												<Checkbox
+													checked={selectedRows.has(rowId)}
+													onCheckedChange={() => handleRowSelect(rowId)}
+												/>
+											</TableCell>
+										)}
+										{/* Data columns */}
+										{columns.map((column) => (
+											<TableCell key={column.key}>
+												{column.render ? column.render(row) : row[column.key]}
+											</TableCell>
+										))}
+									</TableRow>
+								);
+							})}
+						</TableBody>
+					</Table>
+				)}
+			</div>
 
-            {/* Add New Modal - only render when open */}
-            {actions.addNew && isAddModalOpen && (
-                <Modal
-                    title={actions.addNew.label || __('Add New', 'formipay')}
-                    onRequestClose={() => {
-                        setIsAddModalOpen(false);
-                        setNewItemTitle('');
-                    }}
-                >
-                    <TextControl
-                        __next40pxDefaultSize
-                        __nextHasNoMarginBottom
-                        label={__('Title', 'formipay')}
-                        value={newItemTitle}
-                        onChange={setNewItemTitle}
-                        autoFocus
-                    />
-                    <div className="formipay-modal-actions">
-                        <Button
-                            variant="secondary"
-                            onClick={() => {
-                                setIsAddModalOpen(false);
-                                setNewItemTitle('');
-                            }}
-                        >
-                            {__('Cancel', 'formipay')}
-                        </Button>
-                        <Button
-                            variant="primary"
-                            onClick={handleAddNew}
-                        >
-                            {__('Create', 'formipay')}
-                        </Button>
-                    </div>
-                </Modal>
-            )}
-        </div>
-    );
+			{/* Pagination */}
+			{pagination && total > currentPageSize && (
+				<div className="flex items-center justify-between mt-4">
+					<div className="text-sm text-muted-foreground">
+						{__('Showing', 'formipay')} {((currentPage - 1) * currentPageSize) + 1} - {Math.min(currentPage * currentPageSize, total)} {__('of', 'formipay')} {total}
+					</div>
+					<div className="flex items-center gap-2">
+						<Button
+							variant="outline"
+							size="icon"
+							disabled={currentPage === 1}
+							onClick={() => setCurrentPage(1)}
+						>
+							{'\u00AB'}
+						</Button>
+						<Button
+							variant="outline"
+							size="icon"
+							disabled={currentPage === 1}
+							onClick={() => setCurrentPage(currentPage - 1)}
+						>
+							{'\u2039'}
+						</Button>
+						<span className="px-2 text-sm text-muted-foreground">
+							{__('Page', 'formipay')} {currentPage} {__('of', 'formipay')} {totalPages}
+						</span>
+						<Button
+							variant="outline"
+							size="icon"
+							disabled={currentPage >= totalPages}
+							onClick={() => setCurrentPage(currentPage + 1)}
+						>
+							{'\u203A'}
+						</Button>
+						<Button
+							variant="outline"
+							size="icon"
+							disabled={currentPage >= totalPages}
+							onClick={() => setCurrentPage(totalPages)}
+						>
+							{'\u00BB'}
+						</Button>
+						<Select
+							value={currentPageSize.toString()}
+							onValueChange={(value) => {
+								setCurrentPageSize(parseInt(value));
+								setCurrentPage(1);
+							}}
+						>
+							<SelectTrigger className="w-20">
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								{pageSizeOptions.map(size => (
+									<SelectItem key={size} value={size.toString()}>
+										{size}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+			)}
+
+			{/* Add New Dialog */}
+			{actions.addNew && (
+				<Dialog open={isAddModalOpen} onOpenChange={(open) => {
+					if (!open) {
+						setIsAddModalOpen(false);
+						setNewItemTitle('');
+					}
+				}}>
+					<DialogContent>
+						<DialogHeader>
+							<DialogTitle>
+								{actions.addNew.label || __('Add New', 'formipay')}
+							</DialogTitle>
+						</DialogHeader>
+						<div className="py-4">
+							<label className="text-sm font-medium mb-1.5 block">
+								{__('Title', 'formipay')}
+							</label>
+							<Input
+								placeholder={__('Enter title...', 'formipay')}
+								value={newItemTitle}
+								onChange={(e) => setNewItemTitle(e.target.value)}
+								autoFocus
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								variant="outline"
+								onClick={() => {
+									setIsAddModalOpen(false);
+									setNewItemTitle('');
+								}}
+							>
+								{__('Cancel', 'formipay')}
+							</Button>
+							<Button
+								onClick={handleAddNew}
+							>
+								{__('Create', 'formipay')}
+							</Button>
+						</DialogFooter>
+					</DialogContent>
+				</Dialog>
+			)}
+		</div>
+	);
 }

src/admin/design-system/WpcftoComponents.js

@@ -1,30 +1,76 @@
 /**
  * Formipay Design System - WPCFTO-inspired React components
- * Reusable components matching WPCFTO visual language
+ * Built on shadcn/ui primitives + Tailwind CSS
  */
 
 import { __ } from '@wordpress/i18n';
-import './WpcftoDesign.css';
+import { cn } from '@/lib/utils';
 
-// Box Component
-export function Box({ children, className = '', ...props }) {
+// shadcn/ui primitives
+import { Label } from '@/components/ui/label';
+import { Input as ShadcnInput } from '@/components/ui/input';
+import { Textarea as ShadcnTextarea } from '@/components/ui/textarea';
+import {
+    Select as ShadcnSelect,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+    SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Button as ShadcnButton } from '@/components/ui/button';
+import {
+    Alert,
+    AlertTitle,
+    AlertDescription,
+} from '@/components/ui/alert';
+import { Badge as ShadcnBadge } from '@/components/ui/badge';
+import {
+    Table as ShadcnTable,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell,
+} from '@/components/ui/table';
+import {
+    Tabs,
+    TabsList,
+    TabsTrigger,
+    TabsContent,
+} from '@/components/ui/tabs';
+
+// ---------------------------------------------------------------------------
+// Box
+// ---------------------------------------------------------------------------
+export function Box({ children, className, ...props }) {
     return (
-        <div className={`formipay-box ${className}`} {...props}>
+        <div
+            className={cn(
+                'bg-[var(--formipay-color-content-bg,#f0f3f5)] rounded-[10px] mb-2.5 min-h-[80px] shadow-sm',
+                className
+            )}
+            {...props}
+        >
             {children}
         </div>
     );
 }
 
-// Box Child Component
-export function BoxChild({ children, className = '', ...props }) {
+// ---------------------------------------------------------------------------
+// BoxChild
+// ---------------------------------------------------------------------------
+export function BoxChild({ children, className, ...props }) {
     return (
-        <div className={`formipay-box-child ${className}`} {...props}>
+        <div className={cn(className)} {...props}>
             {children}
         </div>
     );
 }
 
-// Tab Navigation Component - WPCFTO sidebar style
+// ---------------------------------------------------------------------------
+// TabNav  (WPCFTO sidebar style)
+// ---------------------------------------------------------------------------
 export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical' }) {
     if (!tabs || !Array.isArray(tabs)) {
         console.warn('[Formipay] TabNav: tabs is not an array', tabs);
@@ -32,32 +78,45 @@ export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical'
     }
 
     return (
-        <div className={`formipay-wpcfto-tab-nav ${orientation === 'vertical' ? 'formipay-wpcfto-sidebar' : ''}`}>
-            <div className="formipay-wpcfto-tab-nav-inner">
+        <div
+            className={cn(
+                'flex-col w-[273px] h-auto bg-[#2c3e50] rounded-none p-5',
+                orientation !== 'vertical' && 'flex-row w-auto'
+            )}
+        >
+            <div className="flex flex-col gap-1">
                 {tabs.map((tab) => (
-                    <div
-                        key={tab.id}
-                        className={`formipay-wpcfto-nav ${activeTab === tab.id ? 'active' : ''} ${tab.submenu ? 'has-submenu' : ''} ${!tab.icon ? 'no-icon' : ''}`}
-                        onClick={() => onTabChange(tab.id)}
-                    >
-                        <div className="formipay-wpcfto-nav-title">
-                            {tab.icon && <i className={tab.icon}></i>}
+                    <div key={tab.id}>
+                        <TabsTrigger
+                            value={tab.id}
+                            className={cn(
+                                'w-full justify-start text-[#bec5cb] uppercase text-sm',
+                                'data-[state=active]:bg-[#2985f7] data-[state=active]:text-white rounded-none',
+                                activeTab === tab.id && 'bg-[#2985f7] text-white'
+                            )}
+                            onClick={() => onTabChange(tab.id)}
+                        >
+                            {tab.icon && <i className={tab.icon} />}
                             <span>{tab.label}</span>
-                        </div>
+                        </TabsTrigger>
 
                         {tab.submenu && (
-                            <div className="formipay-wpcfto-submenus">
+                            <div className="flex flex-col mt-1">
                                 {tab.submenu.map((sub) => (
                                     <div
                                         key={`${tab.id}_${sub.id}`}
-                                        className={`formipay-wpcfto-submenu-item ${activeTab === `${tab.id}_${sub.id}` ? 'active' : ''}`}
+                                        className={cn(
+                                            'px-4 py-2 text-sm cursor-pointer text-[#bec5cb] hover:text-white',
+                                            activeTab === `${tab.id}_${sub.id}` &&
+                                                'text-white bg-[#2985f7]'
+                                        )}
                                         onClick={(e) => {
                                             e.stopPropagation();
                                             onTabChange(`${tab.id}_${sub.id}`);
                                         }}
                                     >
                                         {sub.label}
-                                        <i className="fa fa-chevron-right"></i>
+                                        <i className="fa fa-chevron-right ml-auto" />
                                     </div>
                                 ))}
                             </div>
@@ -69,7 +128,9 @@ export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical'
     );
 }
 
-// Tab Panel Component
+// ---------------------------------------------------------------------------
+// TabPanel
+// ---------------------------------------------------------------------------
 export function TabPanel({ tabs, activeTab, children }) {
     if (!tabs || !Array.isArray(tabs)) {
         console.warn('[Formipay] TabPanel: tabs is not an array', tabs);
@@ -77,262 +138,352 @@ export function TabPanel({ tabs, activeTab, children }) {
     }
 
     return (
-        <div className="formipay-tabs">
+        <div className="flex-1">
             {tabs.map((tab, index) => (
                 <div
                     key={tab.id}
-                    className={`formipay-tab ${tab.id === activeTab ? 'active' : ''}`}
+                    className={cn(tab.id !== activeTab && 'hidden')}
                 >
-                    <div className="formipay-tab-content">
-                        {typeof children === 'function' ? children(tab, index) : children}
-                    </div>
+                    {typeof children === 'function' ? children(tab, index) : children}
                 </div>
             ))}
         </div>
     );
 }
 
-// Field Component - WPCFTO-style 2-column layout
+// ---------------------------------------------------------------------------
+// Field  (2-column WPCFTO layout)
+// ---------------------------------------------------------------------------
 export function Field({
     label,
     description,
     required = false,
     children,
-    className = '',
+    className,
     ...props
 }) {
     return (
-        <div className={`formipay-generic-field ${className}`} {...props}>
-            <div className="formipay-field-aside">
+        <div
+            className={cn(
+                'flex flex-wrap justify-between p-[1.8rem_1rem_0] w-full rounded-[10px] bg-card mb-2.5',
+                className
+            )}
+            {...props}
+        >
+            <aside className="w-[40%] pr-8">
                 {label && (
-                    <div className={`formipay-field-label ${required ? 'required' : ''}`}>
-                        <span className="formipay-field-label-text">{label}</span>
-                    </div>
+                    <Label className={cn(required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
+                        {label}
+                    </Label>
                 )}
                 {description && (
-                    <div className="formipay-field-description">{description}</div>
+                    <p className="mt-2 text-[13px] text-muted-foreground">{description}</p>
                 )}
-            </div>
-            <div className="formipay-field-content">
+            </aside>
+            <div className="w-[60%]">
                 {children}
             </div>
         </div>
     );
 }
 
-// Input Component
+// ---------------------------------------------------------------------------
+// Input
+// ---------------------------------------------------------------------------
 export function Input({
     label,
     description,
     required = false,
-    className = '',
+    className,
     ...props
 }) {
     return (
         <Field label={label} description={description} required={required}>
-            <input className={`formipay-input ${className}`} {...props} />
+            <ShadcnInput className={cn(className)} {...props} />
         </Field>
     );
 }
 
-// Textarea Component
+// ---------------------------------------------------------------------------
+// Textarea
+// ---------------------------------------------------------------------------
 export function Textarea({
     label,
     description,
     required = false,
     rows = 4,
-    className = '',
+    className,
     ...props
 }) {
     return (
         <Field label={label} description={description} required={required}>
-            <textarea
-                className={`formipay-textarea ${className}`}
-                rows={rows}
-                {...props}
-            />
+            <ShadcnTextarea rows={rows} className={cn(className)} {...props} />
         </Field>
     );
 }
 
-// Select Component
+// ---------------------------------------------------------------------------
+// Select
+// ---------------------------------------------------------------------------
 export function Select({
     label,
     description,
     required = false,
     options = [],
-    className = '',
+    className,
     ...props
 }) {
+    // Derive a current value from props for the Radix select
+    const selectValue = props.value ?? props.defaultValue ?? undefined;
+
     return (
         <Field label={label} description={description} required={required}>
-            <select className={`formipay-select ${className}`} {...props}>
-                {options.map((option) => (
-                    <option key={option.value} value={option.value}>
-                        {option.label}
-                    </option>
-                ))}
-            </select>
+            <ShadcnSelect
+                value={selectValue}
+                onValueChange={(val) => {
+                    if (props.onChange) {
+                        props.onChange({ target: { value: val } });
+                    }
+                }}
+            >
+                <SelectTrigger className={cn('w-full', className)}>
+                    <SelectValue placeholder={props.placeholder || __('Select...', 'formipay')} />
+                </SelectTrigger>
+                <SelectContent>
+                    {options.map((option) => (
+                        <SelectItem key={option.value} value={String(option.value)}>
+                            {option.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </ShadcnSelect>
         </Field>
     );
 }
 
-// Checkbox Component - WPCFTO toggle switch style
+// ---------------------------------------------------------------------------
+// Checkbox  (toggle-switch style)
+// ---------------------------------------------------------------------------
 export function Checkbox({
     label,
     checked,
     onChange,
-    className = '',
+    className,
     isToggle = true,
     ...props
 }) {
     return (
-        <label className={`formipay-admin-checkbox ${checked ? 'active' : ''} ${className}`}>
-            <div className={`formipay-admin-checkbox-wrapper ${isToggle ? 'is_toggle' : ''}`}>
-                <div className="formipay-checkbox-switcher"></div>
-                <input
-                    type="checkbox"
-                    checked={checked}
-                    onChange={onChange}
-                    {...props}
-                />
-            </div>
-            <span>{label}</span>
+        <label
+            className={cn(
+                'inline-flex items-center gap-2 cursor-pointer',
+                className
+            )}
+        >
+            <Switch
+                checked={checked}
+                onCheckedChange={(val) =>
+                    onChange?.({ target: { checked: val } })
+                }
+                {...props}
+            />
+            {label && <span className="text-sm">{label}</span>}
         </label>
     );
 }
 
-// Button Component
+// ---------------------------------------------------------------------------
+// Button
+// ---------------------------------------------------------------------------
+const variantMap = {
+    primary: 'default',
+    secondary: 'secondary',
+    danger: 'destructive',
+};
+const sizeMap = {
+    sm: 'sm',
+    md: 'default',
+    lg: 'lg',
+};
+
 export function Button({
     variant = 'primary',
     size = 'md',
     icon: Icon,
     children,
-    className = '',
+    className,
     disabled = false,
     onClick,
     ...props
 }) {
-    const sizeClass = size !== 'md' ? `formipay-btn-${size}` : '';
-    const variantClass = `formipay-btn-${variant}`;
-
     return (
-        <button
-            className={`formipay-btn ${variantClass} ${sizeClass} ${className}`}
+        <ShadcnButton
+            variant={variantMap[variant] || variant}
+            size={sizeMap[size] || size}
+            className={cn(className)}
             disabled={disabled}
             onClick={onClick}
             {...props}
         >
-            {Icon && <span className="formipay-btn-icon"><Icon /></span>}
+            {Icon && <Icon />}
             {children}
-        </button>
+        </ShadcnButton>
     );
 }
 
-// Repeater Component
+// ---------------------------------------------------------------------------
+// Repeater
+// ---------------------------------------------------------------------------
 export function Repeater({
     items,
     renderItem,
     onAdd,
     onRemove,
     addLabel = 'Add Item',
-    className = '',
+    className,
 }) {
     return (
-        <div className={`formipay-repeater ${className}`}>
+        <div className={cn('flex flex-col gap-3', className)}>
             {items.map((item, index) => (
-                <div key={item.id || index} className={`formipay-repeater-item ${item.collapsed ? 'collapsed' : ''}`}>
+                <div
+                    key={item.id || index}
+                    className={cn(
+                        'border rounded-lg overflow-hidden',
+                        item.collapsed && 'border-transparent'
+                    )}
+                >
                     <div
-                        className="formipay-repeater-header"
+                        className="flex items-center justify-between px-4 py-3 bg-muted/50 cursor-pointer select-none"
                         onClick={() => onToggle?.(item.id)}
                     >
-                        <div className="formipay-repeater-title">
-                            <span className="formipay-repeater-toggle">▼</span>
+                        <div className="flex items-center gap-2 text-sm font-medium">
+                            <span
+                                className={cn(
+                                    'transition-transform text-xs',
+                                    item.collapsed && '-rotate-90'
+                                )}
+                            >
+                                &#9660;
+                            </span>
                             <span>{item.title || `Item ${index + 1}`}</span>
                         </div>
-                        <div className="formipay-repeater-actions">
-                            <span
-                                className="formipay-repeater-delete"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    onRemove?.(item.id, index);
-                                }}
-                            >
-                                ✕
-                            </span>
-                        </div>
-                    </div>
-                    <div className="formipay-repeater-body">
-                        {renderItem(item, index)}
+                        <button
+                            type="button"
+                            className="text-muted-foreground hover:text-destructive text-sm px-1"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                onRemove?.(item.id, index);
+                            }}
+                        >
+                            &#10005;
+                        </button>
                     </div>
+                    {!item.collapsed && (
+                        <div className="p-4">{renderItem(item, index)}</div>
+                    )}
                 </div>
             ))}
-            <button className="formipay-repeater-add" onClick={onAdd}>
-                <span>+</span>
-                <span>{addLabel}</span>
-            </button>
+            <ShadcnButton
+                variant="outline"
+                size="sm"
+                className="self-start"
+                onClick={onAdd}
+            >
+                <span className="mr-1">+</span>
+                {addLabel}
+            </ShadcnButton>
         </div>
     );
 }
 
-// Notice Component
+// ---------------------------------------------------------------------------
+// Notice
+// ---------------------------------------------------------------------------
+const noticeStyles = {
+    success: 'border-l-4 border-l-green-500 bg-green-50 text-green-900',
+    warning: 'border-l-4 border-l-yellow-500 bg-yellow-50 text-yellow-900',
+    error: 'border-l-4 border-l-red-500 bg-red-50 text-red-900',
+    info: 'border-l-4 border-l-blue-500 bg-blue-50 text-blue-900',
+};
+
+const noticeIcons = {
+    success: '\u2713',
+    warning: '\u26A0',
+    error: '\u2715',
+    info: '\u2139',
+};
+
 export function Notice({
     type = 'info',
     title,
     children,
     onDismiss,
-    className = '',
+    className,
 }) {
     return (
-        <div className={`formipay-notice formipay-notice-${type} ${className}`}>
-            <div className="formipay-notice-icon">
-                {type === 'success' && '✓'}
-                {type === 'warning' && '⚠'}
-                {type === 'error' && '✕'}
-                {type === 'info' && 'ℹ'}
-            </div>
-            <div className="formipay-notice-content">
-                {title && <div className="formipay-notice-title">{title}</div>}
-                <div>{children}</div>
+        <Alert className={cn(noticeStyles[type] || noticeStyles.info, className)}>
+            <span className="absolute left-4 top-4 text-base font-bold">
+                {noticeIcons[type]}
+            </span>
+            <div className="pl-6">
+                {title && <AlertTitle>{title}</AlertTitle>}
+                <AlertDescription>{children}</AlertDescription>
             </div>
             {onDismiss && (
                 <button
-                    className="formipay-notice-dismiss"
+                    type="button"
+                    className="absolute right-3 top-3 text-muted-foreground hover:text-foreground"
                     onClick={onDismiss}
                     aria-label="Dismiss"
                 >
-                    ✕
+                    &#10005;
                 </button>
             )}
-        </div>
+        </Alert>
     );
 }
 
-// Group Title Component - WPCFTO section divider (visual, not accordion)
-export function GroupTitle({
-    title,
-    icon,
-    className = '',
-}) {
+// ---------------------------------------------------------------------------
+// GroupTitle
+// ---------------------------------------------------------------------------
+export function GroupTitle({ title, icon, className }) {
     return (
-        <div className={`formipay-group-title ${className}`}>
-            {icon && <i className={icon}></i>}
+        <div
+            className={cn(
+                'w-full pb-3 text-muted-foreground text-sm uppercase tracking-wider border-b flex items-center gap-2 mb-4',
+                className
+            )}
+        >
+            {icon && <i className={icon} />}
             {title}
         </div>
     );
 }
 
-// Loading Spinner Component
-export function Spinner({ size = 'md', className = '' }) {
-    const sizeClass = size !== 'md' ? `formipay-spinner-${size}` : '';
+// ---------------------------------------------------------------------------
+// Spinner
+// ---------------------------------------------------------------------------
+export function Spinner({ size = 'md', className }) {
+    const sizeClass = {
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+    };
+
     return (
-        <div className={`formipay-loading ${className}`}>
-            <div className={`formipay-spinner ${sizeClass}`}></div>
+        <div className={cn('flex items-center justify-center', className)}>
+            <div
+                className={cn(
+                    'animate-spin rounded-full border-2 border-muted border-t-primary',
+                    sizeClass[size] || sizeClass.md
+                )}
+            />
         </div>
     );
 }
 
-// Empty State Component
+// ---------------------------------------------------------------------------
+// EmptyState
+// ---------------------------------------------------------------------------
 export function EmptyState({
     icon,
     title,
@@ -340,96 +491,133 @@ export function EmptyState({
     action,
     actionLabel,
     onAction,
-    className = '',
+    className,
 }) {
     return (
-        <div className={`formipay-empty-state ${className}`}>
-            {icon && <div className="formipay-empty-icon">{icon}</div>}
-            {title && <div className="formipay-empty-title">{title}</div>}
+        <div
+            className={cn(
+                'flex flex-col items-center justify-center py-12 text-muted-foreground',
+                className
+            )}
+        >
+            {icon && <div className="mb-4 text-4xl">{icon}</div>}
+            {title && <h3 className="text-lg font-semibold mb-1">{title}</h3>}
             {description && (
-                <div className="formipay-empty-description">{description}</div>
+                <p className="text-sm text-muted-foreground mb-4">{description}</p>
             )}
             {action && (
-                <Button onClick={onAction}>
+                <ShadcnButton onClick={onAction}>
                     {actionLabel || __('Take Action', 'formipay')}
-                </Button>
+                </ShadcnButton>
             )}
         </div>
     );
 }
 
-// Status Badge Component
-export function Badge({
-    variant = 'default',
-    children,
-    className = '',
-}) {
+// ---------------------------------------------------------------------------
+// Badge
+// ---------------------------------------------------------------------------
+export function Badge({ variant = 'default', children, className }) {
     return (
-        <span className={`formipay-badge formipay-badge-${variant} ${className}`}>
+        <ShadcnBadge variant={variant} className={cn(className)}>
             {children}
-        </span>
+        </ShadcnBadge>
     );
 }
 
-// Table Component
+// ---------------------------------------------------------------------------
+// Table
+// ---------------------------------------------------------------------------
 export function Table({
     columns,
     data,
     emptyMessage = __('No items found', 'formipay'),
-    className = '',
+    className,
 }) {
     if (!data || data.length === 0) {
         return (
-            <div className={`formipay-table-wrapper ${className}`}>
-                <EmptyState
-                    title={emptyMessage}
-                />
+            <div className={cn('flex flex-col items-center justify-center py-12 text-muted-foreground', className)}>
+                <EmptyState title={emptyMessage} />
             </div>
         );
     }
 
     return (
-        <div className={`formipay-table-wrapper ${className}`}>
-            <table className="formipay-table">
-                <thead>
-                    <tr>
+        <div className={cn('rounded-lg border', className)}>
+            <ShadcnTable>
+                <TableHeader>
+                    <TableRow>
                         {columns.map((column) => (
-                            <th key={column.key}>{column.label}</th>
+                            <TableHead key={column.key}>{column.label}</TableHead>
                         ))}
-                    </tr>
-                </thead>
-                <tbody>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
                     {data.map((row, rowIndex) => (
-                        <tr key={rowIndex}>
+                        <TableRow key={rowIndex}>
                             {columns.map((column) => (
-                                <td key={column.key}>
-                                    {column.render ? column.render(row, rowIndex) : row[column.key]}
-                                </td>
+                                <TableCell key={column.key}>
+                                    {column.render
+                                        ? column.render(row, rowIndex)
+                                        : row[column.key]}
+                                </TableCell>
                             ))}
-                        </tr>
+                        </TableRow>
                     ))}
-                </tbody>
-            </table>
+                </TableBody>
+            </ShadcnTable>
         </div>
     );
 }
 
-// Metabox Layout Component - WPCFTO 2-column wrapper for React metabox islands
+// ---------------------------------------------------------------------------
+// MetaboxLayout
+// ---------------------------------------------------------------------------
 export function MetaboxLayout({ tabs, activeTab, onTabChange, children }) {
     return (
-        <div className="formipay-wpcfto-metabox">
-            <div className="formipay-wpcfto-metabox-inner">
-                <div className="formipay-wpcfto-container">
-                    <TabNav tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
-                    <div className="formipay-wpcfto-tabs">
-                        {children}
-                    </div>
+        <div className="bg-white rounded-[10px] overflow-hidden shadow-sm">
+            <Tabs
+                value={activeTab}
+                onValueChange={onTabChange}
+                className="flex flex-row"
+            >
+                <TabsList className="flex-col w-[273px] h-auto bg-[#2c3e50] rounded-none p-5">
+                    {tabs.map((tab) => (
+                        <TabsTrigger
+                            key={tab.id}
+                            value={tab.id}
+                            className={cn(
+                                'w-full justify-start text-[#bec5cb] uppercase text-sm',
+                                'data-[state=active]:bg-[#2985f7] data-[state=active]:text-white rounded-none'
+                            )}
+                        >
+                            {tab.icon && <i className={tab.icon} />}
+                            <span>{tab.label}</span>
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+
+                <div className="flex-1">
+                    {tabs.map((tab) => (
+                        <TabsContent
+                            key={tab.id}
+                            value={tab.id}
+                            className="p-6 mt-0"
+                        >
+                            {typeof children === 'function'
+                                ? children(tab)
+                                : children}
+                        </TabsContent>
+                    ))}
                 </div>
-            </div>
+            </Tabs>
         </div>
     );
 }
 
+// ---------------------------------------------------------------------------
+// Default export (aggregate)
+// ---------------------------------------------------------------------------
 export default {
     Box,
     BoxChild,

src/admin/pages/Access.js

@@ -4,25 +4,24 @@
 
 import { __ } from '@wordpress/i18n';
 import DataTable from '../components/shared/DataTable';
+import { confirm } from '@/lib/confirm';
+import { toast } from '@/lib/toast';
 import './AdminPages.css';
 
-// SweetAlert2 is loaded via WordPress (global scope)
-const Swal = window.Swal;
-
 export default function AccessPage() {
     const ajaxUrl = window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php';
     const nonce = window.formipayAdmin?.nonce || '';
 
     const handleDelete = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Delete Permanently', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Delete Item', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
+            confirmText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
+            variant: 'destructive',
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-delete-access-item`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -32,20 +31,20 @@ export default function AccessPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item deleted successfully.', 'formipay'));
             window.location.reload();
         }
     };
 
     const handleDuplicate = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Confirm', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Duplicate Item', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
+            confirmText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-duplicate-access-item`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -55,6 +54,7 @@ export default function AccessPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item duplicated successfully.', 'formipay'));
             window.location.reload();
         }
     };

src/admin/pages/Coupons.js

@@ -4,11 +4,10 @@
 
 import { __ } from '@wordpress/i18n';
 import DataTable from '../components/shared/DataTable';
+import { confirm } from '@/lib/confirm';
+import { toast } from '@/lib/toast';
 import './AdminPages.css';
 
-// SweetAlert2 is loaded via WordPress (global scope)
-const Swal = window.Swal;
-
 export default function CouponsPage() {
     const ajaxUrl = window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php';
     const nonce = window.formipayAdmin?.nonce || '';
@@ -19,15 +18,15 @@ export default function CouponsPage() {
     };
 
     const handleDelete = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Delete Permanently', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Delete Item', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
+            confirmText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
+            variant: 'destructive',
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-delete-coupon`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -37,20 +36,20 @@ export default function CouponsPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item deleted successfully.', 'formipay'));
             window.location.reload();
         }
     };
 
     const handleDuplicate = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Confirm', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Duplicate Item', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
+            confirmText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-duplicate-coupon`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -60,6 +59,7 @@ export default function CouponsPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item duplicated successfully.', 'formipay'));
             window.location.reload();
         }
     };

src/admin/pages/Forms.js

@@ -4,24 +4,23 @@
 
 import { __ } from '@wordpress/i18n';
 import DataTable from '../components/shared/DataTable';
-
-// SweetAlert2 is loaded via WordPress (global scope)
-const Swal = window.Swal;
+import { confirm } from '@/lib/confirm';
+import { toast } from '@/lib/toast';
 
 export default function FormsPage() {
     const ajaxUrl = window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php';
     const nonce = window.formipayAdmin?.nonce || '';
 
     const handleDelete = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Delete Permanently', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Delete Item', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
+            confirmText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
+            variant: 'destructive',
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-delete-form`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -31,20 +30,20 @@ export default function FormsPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item deleted successfully.', 'formipay'));
             window.location.reload();
         }
     };
 
     const handleDuplicate = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Confirm', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Duplicate Item', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
+            confirmText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-duplicate-form`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -54,6 +53,7 @@ export default function FormsPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item duplicated successfully.', 'formipay'));
             window.location.reload();
         }
     };
@@ -155,15 +155,7 @@ export default function FormsPage() {
                                     e.currentTarget.innerHTML = originalHTML;
                                 }, 2000);
 
-                                Swal.fire({
-                                    icon: 'success',
-                                    title: __('Shortcode copied!', 'formipay'),
-                                    toast: true,
-                                    position: 'top-end',
-                                    showConfirmButton: false,
-                                    timer: 3000,
-                                    timerProgressBar: true,
-                                });
+                                toast.success(__('Shortcode copied!', 'formipay'));
                             });
                         }}
                     >

src/admin/pages/Licenses.js

@@ -4,25 +4,24 @@
 
 import { __ } from '@wordpress/i18n';
 import DataTable from '../components/shared/DataTable';
+import { confirm } from '@/lib/confirm';
+import { toast } from '@/lib/toast';
 import './AdminPages.css';
 
-// SweetAlert2 is loaded via WordPress (global scope)
-const Swal = window.Swal;
-
 export default function LicensesPage() {
     const ajaxUrl = window.formipayAdmin?.ajaxUrl || '/wp-admin/admin-ajax.php';
     const nonce = window.formipayAdmin?.nonce || '';
 
     const handleDelete = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Delete Permanently', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Delete Item', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
+            confirmText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
+            variant: 'destructive',
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-delete-license`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -32,6 +31,7 @@ export default function LicensesPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item deleted successfully.', 'formipay'));
             window.location.reload();
         }
     };

src/admin/pages/Products.js

@@ -6,11 +6,10 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import DataTable from '../components/shared/DataTable';
 import VariationPricingTable from '../components/products/VariationPricingTable';
+import { confirm } from '@/lib/confirm';
+import { toast } from '@/lib/toast';
 import './AdminPages.css';
 
-// SweetAlert2 is loaded via WordPress (global scope)
-const Swal = window.Swal;
-
 export default function ProductsPage() {
     const [isEditor, setIsEditor] = useState(false);
     const [selectedProductId, setSelectedProductId] = useState(null);
@@ -19,15 +18,15 @@ export default function ProductsPage() {
     const nonce = window.formipayAdmin?.nonce || '';
 
     const handleDelete = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Delete Permanently', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Delete Item', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
+            confirmText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
+            variant: 'destructive',
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-delete-product`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -37,20 +36,20 @@ export default function ProductsPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item deleted successfully.', 'formipay'));
             window.location.reload();
         }
     };
 
     const handleDuplicate = async (id) => {
-        const result = await Swal.fire({
-            icon: 'info',
-            html: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
-            confirmButtonText: __('Confirm', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+        const result = await confirm({
+            title: __('Duplicate Item', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
+            confirmText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
         });
 
-        if (result.isConfirmed) {
+        if (result) {
             await fetch(`${ajaxUrl}?action=formipay-duplicate-product`, {
                 method: 'POST',
                 credentials: 'same-origin',
@@ -60,6 +59,7 @@ export default function ProductsPage() {
                     _wpnonce: nonce,
                 }),
             });
+            toast.success(__('Item duplicated successfully.', 'formipay'));
             window.location.reload();
         }
     };