Update all admin listing pages to use the full-featured DataTable component:
Coupons page:
- All columns (ID, code, type, amount, usages, date limit, status)
- Status filter (All, Active, Inactive)
- Inline actions and bulk delete
- Add New modal
Access page:
- All columns (ID, title, product, status, date)
- Status filter (All, Published, Draft)
- Inline actions and bulk delete
- Add New modal
Customers page:
- All columns (ID, name, email, phone, total orders, date)
- Read-only (no selection or inline actions)
- Search and pagination
Licenses page:
- All columns (ID, license key, product, order, email, status)
- Status labels (Active, Inactive, Expired)
- Read-only (no selection or inline actions)
- Search and pagination
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Implement comprehensive DataTable with all Grid.js features:
- Checkbox selection with "Select All"
- Bulk delete button (shows when rows selected)
- Inline row actions (edit, delete, duplicate) on hover
- Status filter tabs with counts
- Search input with debounce
- Sort dropdown (ID, date, title ASC/DESC)
- Server-side pagination
- "Add New" modal with SweetAlert2
- SweetAlert2 loaded via WordPress global scope
Updated Forms page to use new DataTable component with:
- Full column rendering (ID, title, date, status, shortcode)
- Copy shortcode button with toast notification
- All filter, search, sort, pagination features
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Remove all dual-mode rendering logic since React is now the single
admin interface. Focus on implementing full table features in React.
Changes:
- Remove ?react= query param checks from all page methods
- Remove admin notice and footer toggle from ReactAdmin
- Simplify asset loading - ReactAdmin handles all assets
- Clean up Init.php enqueue method
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
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>
Implement dual-mode rendering allowing classic Grid.js and new React
versions to run side-by-side during migration.
- Add coexistence mode checks to all admin page methods
- Check query param ?react=1 or option 'formipay_use_react_admin'
- Include classic PHP pages when React not active
- Add admin notice showing current version with toggle button
- Add footer toggle link to switch between versions
This ensures zero feature loss - old Grid.js pages continue working
(~20 features per page) while React versions are developed.
Files:
- Form.php, Coupon.php, Access.php, Order.php
- Customer.php, Product.php, License.php
- ReactAdmin.php (added version_notice, footer_toggle)
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
- Remove @wordpress/url (version doesn't exist)
- Remove unused @wordpress/date and @tanstack/react-table
- Keep only core WordPress dependencies that are actually used
- Add build/ directory with compiled assets
- Add placeholder content for Coupons page
- Add placeholder content for Access Items page
- Add placeholder content for Licenses page
- Users can use classic editor until React versions are ready
- Create NotificationLog component with type icons
- Display notification history (email, SMS, WhatsApp)
- Show status badges (sent, failed, pending)
- Include recipient and timestamp information
- Add to OrderDetail sidebar
Components:
- OrderList: table with filters (status, date, search, pagination)
- OrderListItem: single order row with status badge
- OrderDetail: full order view with status update, items, customer info
- OrderTimeline: status change history with visual progress
- AnalyticsDashboard: stats cards (orders, revenue, completed, pending)
Features:
- Order list with keyword search, status filter, date range
- Pagination support
- Status change workflow with immediate update
- Order detail with items breakdown and customer info
- Visual timeline progress indicator
- Analytics dashboard with key metrics
- Placeholder charts for future implementation
Updated Orders page to use new components with list/detail navigation
- Create FormBuilderAjax class for React form builder
- Add formipay_save_form_fields AJAX action
- Add formipay_load_form_fields AJAX action
- Sanitize field data on save
- Update FormBuilder to load fields on mount
- Add save status feedback (saving, saved, error)
- Register FormBuilderAjax singleton in main plugin file
Components:
- FieldPalette: drag-and-drop source for all field types
- FormCanvas: drop target with field list, reordering, CRUD
- FormField: individual field component with actions
- FieldSettingsPanel: edit field properties (label, ID, options, etc.)
- FormFieldOptions: manage select/radio/checkbox options
- FormPreview: live preview of rendered form
- FormFieldPreview: preview individual field types
Features:
- 16 field types (text, email, select, checkbox, radio, etc.)
- Categorized field palette
- Drag-and-drop field reordering
- Per-field settings panel
- Option management for choice fields
- Live form preview
- Save via AJAX
Config:
- fieldTypes.js: field definitions and constants
- Generate unique field IDs
- Field type categories (input, choice, layout, preset, advanced)
- Add package.json with @wordpress/scripts and React dependencies
- Configure webpack for admin bundle output
- Create src/admin directory structure (api, components, pages)
- Implement API client with nonce handling (ajaxRequest, apiRequest)
- Add API methods for orders, customers, products, forms, coupons, licenses
- Create React App component with page routing
- Add placeholder page components for all admin sections
- Create ReactAdmin PHP class to manage asset enqueuing
- Register ReactAdmin singleton in main plugin file
- Bump version to 2.0.0
Build: Run 'npm install && npm run build' to generate assets
- Add currency_code column to formipay_bank_transfer_trx table schema
- Store currency code from product settings when creating transaction
- Prevents data loss by tracking which currency was used for bank transfer payments
- Matches PayPal implementation pattern for consistency
All critical bug fixes, performance improvements, and security
hardening tasks are now complete. Ready to proceed to Phase 2.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PRD.md defines product requirements across 4 phases (critical fixes,
React admin, frontend enhancements, missing features). TASKLIST.md
breaks all work into checkable tasks with file references.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Checkpoint before implementation. Includes audit findings (FINDINGS.md),
architectural recommendation (RECOMMENDATION.md), and existing code changes
to Form, Order, Render, and form-action.js from recent development.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
