fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

src/admin/pages/Forms.js

@@ -3,30 +3,120 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import FormBuilder from '../components/formBuilder/FormBuilder';
+import { useState, useCallback, useEffect } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { formsApi } from '../api/client';
+import DataTable from '../components/shared/DataTable';
+import './AdminPages.css';
 
 export default function FormsPage({ initialData }) {
     const [isBuilder, setIsBuilder] = useState(false);
     const [selectedFormId, setSelectedFormId] = useState(null);
+    const [forms, setForms] = useState([]);
+    const [loading, setLoading] = useState(true);
 
-    if (isBuilder) {
-        return (
-            <div className="formipay-page-forms">
-                <FormBuilder
-                    formId={selectedFormId}
-                    initialData={initialData}
-                />
-            </div>
-        );
+    const loadForms = useCallback(() => {
+        setLoading(true);
+        formsApi.list()
+            .then(result => {
+                console.log('Forms API result:', result);
+                // Handle both WordPress format and direct format
+                const formsData = result.data?.results || result.results || result.data || [];
+                console.log('Forms data extracted:', formsData);
+                console.log('Forms data length:', formsData.length);
+                setForms(formsData);
+            })
+            .catch(error => {
+                console.error('Load forms error:', error);
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    }, []);
+
+    useEffect(() => {
+        loadForms();
+    }, [loadForms]);
+
+    if (isBuilder && selectedFormId) {
+        window.location.href = `${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${selectedFormId}&action=edit`;
+        return null;
     }
 
+    const columns = [
+        {
+            key: 'id',
+            label: __('ID', 'formipay'),
+            render: (row) => <strong>#{row.ID || row.id}</strong>
+        },
+        {
+            key: 'title',
+            label: __('Title', 'formipay'),
+            render: (row) => (
+                <a
+                    href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post.php?post=${row.ID || row.id}&action=edit`}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        setIsBuilder(true);
+                        setSelectedFormId(row.ID || row.id);
+                    }}
+                >
+                    {row.post_title || row.title || __('Untitled', 'formipay')}
+                </a>
+            )
+        },
+        {
+            key: 'shortcode',
+            label: __('Shortcode', 'formipay'),
+            render: (row) => <code>[formipay id="{row.ID || row.id}"]</code>
+        },
+        {
+            key: 'status',
+            label: __('Status', 'formipay'),
+            render: (row) => {
+                const status = row.post_status || row.status || 'unknown';
+                const statusLabels = {
+                    publish: __('Published', 'formipay'),
+                    draft: __('Draft', 'formipay'),
+                    pending: __('Pending', 'formipay'),
+                };
+                const statusLabel = statusLabels[status] || status;
+                return (
+                    <span className={`status-badge status-${status === 'publish' ? 'active' : 'draft'}`}>
+                        {statusLabel}
+                    </span>
+                );
+            }
+        },
+        {
+            key: 'date',
+            label: __('Date', 'formipay'),
+            render: (row) => {
+                const date = row.post_date || row.date;
+                if (!date) return '-';
+                return new Date(date).toLocaleDateString();
+            }
+        },
+    ];
+
     return (
         <div className="formipay-page-forms">
-            <div className="formipay-forms-list">
+            <div className="formipay-page-header">
                 <h1>{ __('Forms', 'formipay') }</h1>
-                <p>{ __('Forms list coming soon. Use the classic editor for now.', 'formipay') }</p>
+                <Button
+                    variant="primary"
+                    href={`${window.formipayAdmin?.siteUrl || ''}/wp-admin/post-new.php?post_type=formipay-form`}
+                >
+                    { __('+ Add New Form', 'formipay') }
+                </Button>
             </div>
+
+            <DataTable
+                columns={columns}
+                data={forms}
+                loading={loading}
+                emptyMessage={__('No forms found', 'formipay')}
+            />
         </div>
     );
 }