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
397e1426dd