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,21 +1,43 @@
 /**
  * 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 {
+import { cn } from '@/lib/utils';
-    Button,
+import { confirm } from '@/lib/confirm';
-    Modal,
+import { toast } from '@/lib/toast';
-    TextControl,
-    SelectControl,
-    Spinner,
-} from '@wordpress/components';
-import './DataTable.css';
 
-// SweetAlert2 is loaded via WordPress (global scope)
+// shadcn/ui components
-const Swal = window.Swal;
+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
@@ -190,15 +212,15 @@ export default function DataTable({
 	const handleBulkDelete = async () => {
 		if (selectedRows.size === 0) return;
 
-        const result = await Swal.fire({
+		const confirmed = await confirm({
-            icon: 'info',
+			title: __('Delete Selected', 'formipay'),
-            html: __('Do you want to delete the selected item(s)?', 'formipay'),
+			message: __('Do you want to delete the selected item(s)?', 'formipay'),
-            showCancelButton: true,
+			confirmText: __('Confirm', 'formipay'),
-            confirmButtonText: __('Confirm', 'formipay'),
+			cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('Cancel', 'formipay'),
+			variant: 'destructive',
 		});
 
-        if (result.isConfirmed) {
+		if (confirmed) {
 			await fetch(`${ajaxUrl}?action=${bulkDeleteAction}`, {
 				method: 'POST',
 				credentials: 'same-origin',
@@ -213,21 +235,14 @@ export default function DataTable({
 			setSelectAll(false);
 			loadData();
 
-            Swal.fire({
+			toast.success(__('Items deleted successfully.', 'formipay'));
-                title: __('Done!', 'formipay'),
-                html: __('Items deleted successfully.', 'formipay'),
-                icon: 'success',
-            });
 		}
 	};
 
 	// Handle Add New
 	const handleAddNew = async () => {
 		if (!newItemTitle.trim()) {
-            Swal.fire({
+			toast.error(__('Title is required.', 'formipay'));
-                html: __('Title is required.', 'formipay'),
-                icon: 'error',
-            });
 			return;
 		}
 
@@ -253,21 +268,20 @@ export default function DataTable({
 				loadData();
 			}
 		} else {
-            Swal.fire({
+			toast.error(response.data.message || __('Error creating item.', 'formipay'));
-                html: response.data.message || __('Error creating item.', 'formipay'),
-                icon: 'error',
-            });
 		}
 	};
 
+	// Compute total pages
+	const totalPages = Math.ceil(total / currentPageSize);
+
 	return (
-        <div className="formipay-data-table-wrapper">
+		<div className="formipay-design-system">
 			{/* Toolbar */}
-            <div className="formipay-table-toolbar">
+			<div className="flex items-center gap-3 mb-4 flex-wrap">
 				{/* Add New Button */}
 				{actions.addNew && (
 					<Button
-                        variant="primary"
 						onClick={() => setIsAddModalOpen(true)}
 					>
 						{actions.addNew.label || __('+ Add New', 'formipay')}
@@ -277,8 +291,7 @@ export default function DataTable({
 				{/* Bulk Delete Button */}
 				{actions.bulkDelete && selectable && selectedRows.size > 0 && (
 					<Button
-                        variant="secondary"
+						variant="destructive"
-                        isDestructive
 						onClick={handleBulkDelete}
 					>
 						{__('Delete Selected', 'formipay')} ({selectedRows.size})
@@ -287,37 +300,41 @@ export default function DataTable({
 
 				{/* Search */}
 				{searchable && (
-                    <TextControl
+					<Input
 						placeholder={searchPlaceholder}
 						value={searchQuery}
-                        onChange={setSearchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
-                        className="formipay-table-search"
+						className="max-w-75 grow"
 					/>
 				)}
 
 				{/* Sort */}
 				{sortable && (
-                    <SelectControl
+					<Select
 						value={`${sortBy}-${sortOrder}`}
-                        options={[
+						onValueChange={(value) => {
-                            { 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);
 						}}
-                    />
+					>
+						<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>
 				)}
 
 				{/* Refresh Button */}
 				<Button
-                    variant="secondary"
+					variant="outline"
 					onClick={loadData}
 					disabled={loading}
 				>
@@ -327,16 +344,28 @@ export default function DataTable({
 
 			{/* Filter Tabs */}
 			{filterOptions && (
-                <div className="formipay-filter-tabs">
+				<div className="flex gap-2 mb-4">
 					{filterOptions.options.map(option => (
 						<button
 							key={option.value}
-                            className={`filter-tab ${activeFilter === option.value ? 'active' : ''}`}
+							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="count">
+								<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>
 							)}
@@ -346,139 +375,165 @@ export default function DataTable({
 			)}
 
 			{/* Table */}
-            <div className="formipay-table-container">
+			<div className="rounded-lg border bg-card">
 				{loading ? (
-                    <div className="formipay-table-loading">
+					<div className="flex flex-col items-center justify-center py-12">
-                        <Spinner />
+						<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="formipay-table-empty">
+					<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                        {emptyMessage}
+						<p>{emptyMessage}</p>
 					</div>
 				) : (
-                    <table className="formipay-table wp-list-table widefat fixed striped">
+					<Table>
-                        <thead>
+						<TableHeader>
-                            <tr>
+							<TableRow>
 								{/* Checkbox column */}
 								{selectable && (
-                                    <th className="column-select">
+									<TableHead className="w-10 text-center">
-                                        <input
+										<Checkbox
-                                            type="checkbox"
 											checked={selectAll}
-                                            onChange={handleSelectAll}
+											onCheckedChange={handleSelectAll}
 										/>
-                                    </th>
+									</TableHead>
 								)}
 								{/* Data columns */}
 								{columns.map((column) => (
-                                    <th key={column.key} className={`column-${column.key}`}>
+									<TableHead key={column.key}>
 										{column.label}
-                                    </th>
+									</TableHead>
 								))}
-                            </tr>
+							</TableRow>
-                        </thead>
+						</TableHeader>
-                        <tbody>
+						<TableBody>
 							{data.map((row, rowIndex) => {
 								const rowId = row.ID || row.id;
 								return (
-                                    <tr key={rowIndex} className="formipay-table-row">
+									<TableRow key={rowIndex}>
 										{/* Checkbox */}
 										{selectable && (
-                                            <td>
+											<TableCell className="w-10 text-center">
-                                                <input
+												<Checkbox
-                                                    type="checkbox"
 													checked={selectedRows.has(rowId)}
-                                                    onChange={() => handleRowSelect(rowId)}
+													onCheckedChange={() => handleRowSelect(rowId)}
 												/>
-                                            </td>
+											</TableCell>
 										)}
 										{/* Data columns */}
 										{columns.map((column) => (
-                                            <td key={column.key}>
+											<TableCell key={column.key}>
 												{column.render ? column.render(row) : row[column.key]}
-                                            </td>
+											</TableCell>
 										))}
-                                    </tr>
+									</TableRow>
 								);
 							})}
-                        </tbody>
+						</TableBody>
-                    </table>
+					</Table>
 				)}
 			</div>
 
 			{/* Pagination */}
 			{pagination && total > currentPageSize && (
-                <div className="formipay-table-pagination">
+				<div className="flex items-center justify-between mt-4">
-                    <div className="pagination-info">
+					<div className="text-sm text-muted-foreground">
 						{__('Showing', 'formipay')} {((currentPage - 1) * currentPageSize) + 1} - {Math.min(currentPage * currentPageSize, total)} {__('of', 'formipay')} {total}
 					</div>
-                    <div className="pagination-controls">
+					<div className="flex items-center gap-2">
 						<Button
-                            variant="secondary"
+							variant="outline"
+							size="icon"
 							disabled={currentPage === 1}
 							onClick={() => setCurrentPage(1)}
 						>
-                            {'««'}
+							{'\u00AB'}
 						</Button>
 						<Button
-                            variant="secondary"
+							variant="outline"
+							size="icon"
 							disabled={currentPage === 1}
 							onClick={() => setCurrentPage(currentPage - 1)}
 						>
-                            {'‹'}
+							{'\u2039'}
 						</Button>
-                        <span className="page-info">
+						<span className="px-2 text-sm text-muted-foreground">
-                            {__('Page', 'formipay')} {currentPage} {__('of', 'formipay')} {Math.ceil(total / currentPageSize)}
+							{__('Page', 'formipay')} {currentPage} {__('of', 'formipay')} {totalPages}
 						</span>
 						<Button
-                            variant="secondary"
+							variant="outline"
-                            disabled={currentPage >= Math.ceil(total / currentPageSize)}
+							size="icon"
+							disabled={currentPage >= totalPages}
 							onClick={() => setCurrentPage(currentPage + 1)}
 						>
-                            {'›'}
+							{'\u203A'}
 						</Button>
 						<Button
-                            variant="secondary"
+							variant="outline"
-                            disabled={currentPage >= Math.ceil(total / currentPageSize)}
+							size="icon"
-                            onClick={() => setCurrentPage(Math.ceil(total / currentPageSize))}
+							disabled={currentPage >= totalPages}
+							onClick={() => setCurrentPage(totalPages)}
 						>
-                            {'»'}
+							{'\u00BB'}
 						</Button>
-                        <SelectControl
+						<Select
 							value={currentPageSize.toString()}
-                            options={pageSizeOptions.map(size => ({
+							onValueChange={(value) => {
-                                label: size.toString(),
-                                value: size.toString(),
-                            }))}
-                            onChange={(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 Modal - only render when open */}
+			{/* Add New Dialog */}
-            {actions.addNew && isAddModalOpen && (
+			{actions.addNew && (
-                <Modal
+				<Dialog open={isAddModalOpen} onOpenChange={(open) => {
-                    title={actions.addNew.label || __('Add New', 'formipay')}
+					if (!open) {
-                    onRequestClose={() => {
 						setIsAddModalOpen(false);
 						setNewItemTitle('');
-                    }}
+					}
-                >
+				}}>
-                    <TextControl
+					<DialogContent>
-                        __next40pxDefaultSize
+						<DialogHeader>
-                        __nextHasNoMarginBottom
+							<DialogTitle>
-                        label={__('Title', 'formipay')}
+								{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={setNewItemTitle}
+								onChange={(e) => setNewItemTitle(e.target.value)}
 								autoFocus
 							/>
-                    <div className="formipay-modal-actions">
+						</div>
+						<DialogFooter>
 							<Button
-                            variant="secondary"
+								variant="outline"
 								onClick={() => {
 									setIsAddModalOpen(false);
 									setNewItemTitle('');
@@ -487,13 +542,13 @@ export default function DataTable({
 								{__('Cancel', 'formipay')}
 							</Button>
 							<Button
-                            variant="primary"
 								onClick={handleAddNew}
 							>
 								{__('Create', 'formipay')}
 							</Button>
-                    </div>
+						</DialogFooter>
-                </Modal>
+					</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
+// shadcn/ui primitives
-export function Box({ children, className = '', ...props }) {
+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">
-                {tabs.map((tab) => (
         <div
-                        key={tab.id}
+            className={cn(
-                        className={`formipay-wpcfto-nav ${activeTab === tab.id ? 'active' : ''} ${tab.submenu ? 'has-submenu' : ''} ${!tab.icon ? 'no-icon' : ''}`}
+                '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}>
+                        <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)}
                         >
-                        <div className="formipay-wpcfto-nav-title">
+                            {tab.icon && <i className={tab.icon} />}
-                            {tab.icon && <i className={tab.icon}></i>}
                             <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>
-                </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
-            <div className="formipay-field-aside">
+            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' : ''}`}>
+                    <Label className={cn(required && "after:content-['*'] after:ml-0.5 after:text-destructive")}>
-                        <span className="formipay-field-label-text">{label}</span>
+                        {label}
-                    </div>
+                    </Label>
                 )}
                 {description && (
-                    <div className="formipay-field-description">{description}</div>
+                    <p className="mt-2 text-[13px] text-muted-foreground">{description}</p>
                 )}
-            </div>
+            </aside>
-            <div className="formipay-field-content">
+            <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
+            <ShadcnTextarea rows={rows} className={cn(className)} {...props} />
-                className={`formipay-textarea ${className}`}
-                rows={rows}
-                {...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}>
+            <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) => (
-                    <option key={option.value} value={option.value}>
+                        <SelectItem key={option.value} value={String(option.value)}>
                             {option.label}
-                    </option>
+                        </SelectItem>
                     ))}
-            </select>
+                </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}`}>
+        <label
-            <div className={`formipay-admin-checkbox-wrapper ${isToggle ? 'is_toggle' : ''}`}>
+            className={cn(
-                <div className="formipay-checkbox-switcher"></div>
+                'inline-flex items-center gap-2 cursor-pointer',
-                <input
+                className
-                    type="checkbox"
+            )}
+        >
+            <Switch
                 checked={checked}
-                    onChange={onChange}
+                onCheckedChange={(val) =>
+                    onChange?.({ target: { checked: val } })
+                }
                 {...props}
             />
-            </div>
+            {label && <span className="text-sm">{label}</span>}
-            <span>{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
+        <ShadcnButton
-            className={`formipay-btn ${variantClass} ${sizeClass} ${className}`}
+            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
-                        className="formipay-repeater-header"
+                    key={item.id || index}
+                    className={cn(
+                        'border rounded-lg overflow-hidden',
+                        item.collapsed && 'border-transparent'
+                    )}
+                >
+                    <div
+                        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">
+                        <div className="flex items-center gap-2 text-sm font-medium">
-                            <span className="formipay-repeater-toggle">▼</span>
+                            <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">
+                        <button
-                            <span
+                            type="button"
-                                className="formipay-repeater-delete"
+                            className="text-muted-foreground hover:text-destructive text-sm px-1"
                             onClick={(e) => {
                                 e.stopPropagation();
                                 onRemove?.(item.id, index);
                             }}
                         >
-                                ✕
+                            &#10005;
-                            </span>
+                        </button>
-                        </div>
-                    </div>
-                    <div className="formipay-repeater-body">
-                        {renderItem(item, index)}
                     </div>
+                    {!item.collapsed && (
+                        <div className="p-4">{renderItem(item, index)}</div>
+                    )}
                 </div>
             ))}
-            <button className="formipay-repeater-add" onClick={onAdd}>
+            <ShadcnButton
-                <span>+</span>
+                variant="outline"
-                <span>{addLabel}</span>
+                size="sm"
-            </button>
+                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}`}>
+        <Alert className={cn(noticeStyles[type] || noticeStyles.info, className)}>
-            <div className="formipay-notice-icon">
+            <span className="absolute left-4 top-4 text-base font-bold">
-                {type === 'success' && '✓'}
+                {noticeIcons[type]}
-                {type === 'warning' && '⚠'}
+            </span>
-                {type === 'error' && '✕'}
+            <div className="pl-6">
-                {type === 'info' && 'ℹ'}
+                {title && <AlertTitle>{title}</AlertTitle>}
-            </div>
+                <AlertDescription>{children}</AlertDescription>
-            <div className="formipay-notice-content">
-                {title && <div className="formipay-notice-title">{title}</div>}
-                <div>{children}</div>
             </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({
+// GroupTitle
-    title,
+// ---------------------------------------------------------------------------
-    icon,
+export function GroupTitle({ title, icon, className }) {
-    className = '',
-}) {
     return (
-        <div className={`formipay-group-title ${className}`}>
+        <div
-            {icon && <i className={icon}></i>}
+            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 = '' }) {
+// Spinner
-    const sizeClass = size !== 'md' ? `formipay-spinner-${size}` : '';
+// ---------------------------------------------------------------------------
+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={cn('flex items-center justify-center', className)}>
-            <div className={`formipay-spinner ${sizeClass}`}></div>
+            <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}`}>
+        <div
-            {icon && <div className="formipay-empty-icon">{icon}</div>}
+            className={cn(
-            {title && <div className="formipay-empty-title">{title}</div>}
+                '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({
+// Badge
-    variant = 'default',
+// ---------------------------------------------------------------------------
-    children,
+export function Badge({ variant = 'default', children, className }) {
-    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}`}>
+            <div className={cn('flex flex-col items-center justify-center py-12 text-muted-foreground', className)}>
-                <EmptyState
+                <EmptyState title={emptyMessage} />
-                    title={emptyMessage}
-                />
             </div>
         );
     }
 
     return (
-        <div className={`formipay-table-wrapper ${className}`}>
+        <div className={cn('rounded-lg border', className)}>
-            <table className="formipay-table">
+            <ShadcnTable>
-                <thead>
+                <TableHeader>
-                    <tr>
+                    <TableRow>
                         {columns.map((column) => (
-                            <th key={column.key}>{column.label}</th>
+                            <TableHead key={column.key}>{column.label}</TableHead>
                         ))}
-                    </tr>
+                    </TableRow>
-                </thead>
+                </TableHeader>
-                <tbody>
+                <TableBody>
                     {data.map((row, rowIndex) => (
-                        <tr key={rowIndex}>
+                        <TableRow key={rowIndex}>
                             {columns.map((column) => (
-                                <td key={column.key}>
+                                <TableCell key={column.key}>
-                                    {column.render ? column.render(row, rowIndex) : row[column.key]}
+                                    {column.render
-                                </td>
+                                        ? column.render(row, rowIndex)
+                                        : row[column.key]}
+                                </TableCell>
                             ))}
-                        </tr>
+                        </TableRow>
                     ))}
-                </tbody>
+                </TableBody>
-            </table>
+            </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="bg-white rounded-[10px] overflow-hidden shadow-sm">
-            <div className="formipay-wpcfto-metabox-inner">
+            <Tabs
-                <div className="formipay-wpcfto-container">
+                value={activeTab}
-                    <TabNav tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
+                onValueChange={onTabChange}
-                    <div className="formipay-wpcfto-tabs">
+                className="flex flex-row"
-                        {children}
+            >
-                    </div>
+                <TabsList className="flex-col w-[273px] h-auto bg-[#2c3e50] rounded-none p-5">
-                </div>
+                    {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>
+            </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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Delete Item', 'formipay'),
-            html: __('Do you want to delete this item?', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Delete Permanently', 'formipay'),
-            confirmButtonText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Duplicate Item', 'formipay'),
-            html: __('Do you want to duplicate this item?', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Confirm', 'formipay'),
-            confirmButtonText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Delete Item', 'formipay'),
-            html: __('Do you want to delete this item?', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Delete Permanently', 'formipay'),
-            confirmButtonText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Duplicate Item', 'formipay'),
-            html: __('Do you want to duplicate this item?', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Confirm', 'formipay'),
-            confirmButtonText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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';
-
+import { confirm } from '@/lib/confirm';
-// SweetAlert2 is loaded via WordPress (global scope)
+import { toast } from '@/lib/toast';
-const Swal = window.Swal;
 
 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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Delete Item', 'formipay'),
-            html: __('Do you want to delete this item?', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Delete Permanently', 'formipay'),
-            confirmButtonText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Duplicate Item', 'formipay'),
-            html: __('Do you want to duplicate this item?', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Confirm', 'formipay'),
-            confirmButtonText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+                                toast.success(__('Shortcode copied!', 'formipay'));
-                                    icon: 'success',
-                                    title: __('Shortcode copied!', 'formipay'),
-                                    toast: true,
-                                    position: 'top-end',
-                                    showConfirmButton: false,
-                                    timer: 3000,
-                                    timerProgressBar: true,
-                                });
                             });
                         }}
                     >

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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Delete Item', 'formipay'),
-            html: __('Do you want to delete this item?', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Delete Permanently', 'formipay'),
-            confirmButtonText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Delete Item', 'formipay'),
-            html: __('Do you want to delete this item?', 'formipay'),
+            message: __('Do you want to delete this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Delete Permanently', 'formipay'),
-            confirmButtonText: __('Delete Permanently', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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({
+        const result = await confirm({
-            icon: 'info',
+            title: __('Duplicate Item', 'formipay'),
-            html: __('Do you want to duplicate this item?', 'formipay'),
+            message: __('Do you want to duplicate this item?', 'formipay'),
-            showCancelButton: true,
+            confirmText: __('Confirm', 'formipay'),
-            confirmButtonText: __('Confirm', 'formipay'),
+            cancelText: __('Cancel', 'formipay'),
-            cancelButtonText: __('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();
         }
     };