dwindown
397e1426dd
feat: Modern tabbed product form (Shopify-inspired UX)
Replaced single-form with modular tabbed interface for better UX.
✨ New Modular Components:
- GeneralTab.tsx - Basic info, descriptions, product type
- PricingTab.tsx - SKU, prices with savings calculator
- InventoryTab.tsx - Stock management with visual status
- VariationsTab.tsx - Attributes & variations generator
- OrganizationTab.tsx - Categories & tags
- ProductFormTabbed.tsx - Main form orchestrator
🎨 UX Improvements:
✅ Progressive Disclosure - Only show relevant fields per tab
✅ Visual Hierarchy - Cards with clear titles & descriptions
✅ Inline Help - Contextual hints below each field
✅ Smart Defaults - Pre-fill variation prices with base price
✅ Better Separator - Use | (pipe) instead of comma (easier to type!)
✅ Visual Feedback - Badges, color-coded status, savings %
✅ Validation Routing - Auto-switch to tab with errors
✅ Mobile Optimized - Responsive tabs, touch-friendly
✅ Disabled State - Variations tab disabled for non-variable products
🔧 Technical:
- Modular architecture (5 separate tab components)
- Type-safe with TypeScript
- Reusable across create/edit
- Form ref support for page header buttons
- Full i18n support
📊 Stats:
- 5 tab components (~150-300 lines each)
- 1 orchestrator component (~250 lines)
- Total: ~1,200 lines well-organized code
- Much better than 600-line single form!
Industry Standard:
Based on Shopify, Shopee, Wix, Magento best practices
2025-11-19 22:13:13 +07:00
..
2025-11-04 11:19:00 +07:00
2025-11-19 22:13:13 +07:00
2025-11-05 18:54:41 +07:00
2025-11-13 10:13:17 +07:00
2025-11-04 11:19:00 +07:00
2025-11-13 11:50:38 +07:00
2025-11-15 20:05:50 +07:00
2025-11-13 09:50:33 +07:00
2025-11-13 13:47:22 +07:00
2025-11-13 15:44:06 +07:00
2025-11-13 11:57:55 +07:00
2025-11-13 12:20:41 +07:00
2025-11-13 12:20:41 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-04 11:19:00 +07:00
2025-11-13 10:34:07 +07:00
2025-11-04 11:19:00 +07:00