feat: Improve settings layout and add addon integration design

🎨 Layout Changes:
- Changed settings from boxed (max-w-5xl) to full-width
- Consistent with Orders/Dashboard pages
- Better use of space for complex forms

📝 Payments Page Reorder:
- Manual payment methods first (Bank Transfer, COD)
- Payment providers second (Stripe, PayPal)
- Payment settings third (test mode, capture)
- Test mode banner moved inside Payment Settings card

📚 Documentation:
- Created SETUP_WIZARD_DESIGN.md
- 5-step wizard flow (Store, Payments, Shipping, Taxes, Product)
- Smart defaults and skip logic
- Complete addon integration architecture

🔌 Addon Integration Design:
- PaymentProviderRegistry with filter hooks
- ShippingMethodRegistry with filter hooks
- REST API endpoints for dynamic loading
- Example addon implementations
- Support for custom React components

✨ Key Features:
- woonoow_payment_providers filter hook
- woonoow_shipping_zones filter hook
- Dynamic component loading from addons
- OAuth flow support for payment gateways
- Backward compatible with WooCommerce

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -58,8 +58,8 @@ export function SettingsLayout({
         </div>
       )}
 
-      {/* Content */}
-      <div className="container max-w-5xl mx-auto px-4 py-8">
+      {/* Content - Full width like Orders/Dashboard */}
+      <div className="px-4 py-8 w-full">
         {!onSave && (
           <div className="mb-8">
             <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
@@ -68,13 +68,12 @@ export function SettingsLayout({
             )}
           </div>
         )}
-
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="space-y-6">{children}</div>
+          <div className="space-y-6 max-w-6xl">{children}</div>
         )}
       </div>
     </div>