From f8247faf2219714054e3da47428862637b185cdc Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 5 Nov 2025 14:51:00 +0700
Subject: [PATCH] refactor: Adopt Shopify-inspired settings structure

- Updated SETTINGS_TREE_PLAN.md with modern SaaS approach
- Renamed settings pages for clarity (Store Details, Shipping & Delivery, etc.)
- Card-based UI design instead of boring forms
- Progressive disclosure and smart defaults
- Updated navigation in both backend (NavigationRegistry.php) and frontend (tree.ts)
- Added comprehensive comparison table and design decisions
- 8 pages total, 40-53 hours estimated
---
 SETTINGS_TREE_PLAN.md                  | 993 +++++++++++++++++--------
 admin-spa/src/nav/tree.ts              |  21 +-
 includes/Compat/NavigationRegistry.php |  21 +-
 3 files changed, 693 insertions(+), 342 deletions(-)

diff --git a/SETTINGS_TREE_PLAN.md b/SETTINGS_TREE_PLAN.md
index efe0398..3d9c51c 100644
--- a/SETTINGS_TREE_PLAN.md
+++ b/SETTINGS_TREE_PLAN.md
@@ -2,294 +2,485 @@
 
 ## 📋 Overview
 
-This document defines the complete settings structure for WooNooW Admin SPA, including what needs to be built, priorities, and implementation approach.
+This document defines the complete settings structure for WooNooW Admin SPA, using a **Shopify-inspired approach** that focuses on store success rather than technical configuration.
 
 ---
 
-## 🎯 Strategy: Option A - Everyday Use Dashboard
+## 🎯 Strategy: Modern SaaS Approach (Shopify-Inspired)
 
 **Philosophy:**
-- Focus on most-used settings (80/20 rule)
-- Bridge to wp-admin for advanced/rarely-used features
-- Extensible for 3rd party plugins
-- Coexist with WooCommerce (no replacement)
+- **Store-first, not tech-first** - Settings encourage business growth
+- **Simple, fast, smooth** - Better UX than WooCommerce's complex tabs
+- **Logical grouping** - Our own hierarchy, not WooCommerce's legacy structure
+- **Progressive disclosure** - Show what matters, hide complexity
+- **Action-oriented** - "Set up payments" not "Payment gateway settings"
+
+**Key Differences from WooCommerce:**
+- ❌ No confusing tabs and sub-tabs
+- ❌ No technical jargon
+- ❌ No overwhelming forms
+- ✅ Clear sections with visual cards
+- ✅ Setup wizards for complex tasks
+- ✅ Inline help and examples
+- ✅ Mobile-friendly interface
 
 ---
 
-## 🌲 Settings Tree Structure
+## 🌲 Settings Tree Structure (Shopify-Inspired)
 
 ```
 Settings
-├── 🔧 WooNooW (Plugin Settings)
-│   └── /settings
+├── 🏪 Store Details
+│   └── /settings/store
+│       • Store name, contact info
+│       • Store address (for invoices, shipping origin)
+│       • Currency & formatting
+│       • Timezone & units
+│       • Store industry/type
 │
-├── 🏪 General (Store Settings)
-│   └── /settings/general
-│
-├── 💳 Payments (Payment Gateways)
+├── 💳 Payments
 │   └── /settings/payments
+│       • Payment providers (cards: Stripe, PayPal, etc.)
+│       • Manual methods (bank transfer, cash, check)
+│       • Payment capture settings
+│       • Test mode toggle
 │
-├── 📦 Shipping (Zones & Methods)
+├── 📦 Shipping & Delivery
 │   └── /settings/shipping
+│       • Shipping zones (visual map)
+│       • Shipping rates (simple table)
+│       • Local pickup options
+│       • Free shipping rules
+│       • Delivery time estimates
 │
-├── 📦 Products (Inventory & Downloads)
-│   └── /settings/products
+├── 💰 Taxes
+│   └── /settings/taxes
+│       • Tax calculation (auto or manual)
+│       • Tax rates by region (simple table)
+│       • Tax-inclusive pricing toggle
+│       • Tax exemptions
 │
-├── 💰 Tax (Tax Rates & Classes)
-│   └── /settings/tax
+├── 🛍️ Checkout
+│   └── /settings/checkout
+│       • Checkout fields (required/optional)
+│       • Guest checkout toggle
+│       • Account creation options
+│       • Order notes
+│       • Terms & conditions
 │
-├── 👤 Accounts & Privacy
-│   └── /settings/accounts
+├── 👤 Customer Accounts
+│   └── /settings/customers
+│       • Account creation settings
+│       • Login options
+│       • Customer data retention
+│       • Privacy policy
 │
-├── 📧 Emails (Templates & Settings)
-│   └── /settings/emails
+├── 📧 Notifications
+│   └── /settings/notifications
+│       • Email templates (visual editor)
+│       • Order notifications (customer & admin)
+│       • Shipping notifications
+│       • Email sender details
+│       • SMS notifications (future)
+│
+├── 🎨 Brand & Appearance
+│   └── /settings/brand
+│       • Logo upload
+│       • Brand colors
+│       • Email header/footer
+│       • Invoice template
+│
+├── 🔧 WooNooW Settings
+│   └── /settings/woonoow
+│       • Plugin preferences
+│       • Performance settings
+│       • Feature toggles
+│       • License & updates
 │
 ├── ⚙️ Advanced (Bridge to wp-admin)
 │   └── /wp-admin/admin.php?page=wc-settings&tab=advanced
 │
-├── 🔌 Integration (Bridge to wp-admin)
+├── 🔌 Integrations (Bridge to wp-admin)
 │   └── /wp-admin/admin.php?page=wc-settings&tab=integration
 │
-├── 🔍 Status (System Status)
+├── 🔍 System Status (Bridge to wp-admin)
 │   └── /wp-admin/admin.php?page=wc-status
 │
-└── 🧩 Extensions (Marketplace)
+└── 🧩 Extensions (Bridge to wp-admin)
     └── /wp-admin/admin.php?page=wc-addons
 ```
 
 ---
 
-## 📊 Implementation Priority
+## 📊 Implementation Priority (Shopify-Inspired)
 
-### **Phase 1: Core Settings (HIGH PRIORITY)** 🔴
+### **Phase 1: Foundation (HIGH PRIORITY)** 🔴
 
-#### 1. General Settings (`/settings/general`)
-**Purpose:** Store address, currency, units  
-**Complexity:** Medium  
-**Estimated Time:** 4-6 hours
-
-**Fields:**
-- Store Address (address 1, address 2, city, country, state, postcode)
-- Selling Location (sell to all countries, specific countries)
-- Shipping Location (ship to all countries, specific countries, disable shipping)
-- Default Customer Location (shop country, geolocate, no location by default)
-- Currency (currency, position, thousand separator, decimal separator, decimals)
-- API Settings (REST API enabled)
-
-**UI Components:**
-- Text inputs
-- Country/State selectors
-- Currency selector
-- Radio groups
-- Checkboxes
-
----
-
-#### 2. Payment Settings (`/settings/payments`)
-**Purpose:** Enable/disable payment gateways, configure settings  
-**Complexity:** Medium-High  
-**Estimated Time:** 6-8 hours
-
-**Features:**
-- List all available payment gateways
-- Enable/disable toggle for each gateway
-- Gateway-specific settings (expandable panels)
-- Drag-and-drop ordering
-- Test mode indicators
-
-**UI Components:**
-- Sortable list
-- Toggle switches
-- Expandable panels (accordion)
-- Gateway-specific forms (dynamic based on gateway)
-
-**Gateways to Support:**
-- Direct Bank Transfer (BACS)
-- Check Payments
-- Cash on Delivery
-- PayPal (if installed)
-- Stripe (if installed)
-- Other 3rd party gateways (extensible)
-
----
-
-#### 3. Shipping Settings (`/settings/shipping`)
-**Purpose:** Shipping zones, methods, and classes  
-**Complexity:** High  
-**Estimated Time:** 8-12 hours
-
-**Features:**
-- **Shipping Zones:**
-  - List all zones
-  - Add/edit/delete zones
-  - Zone regions (countries, states, postcodes)
-  - Zone methods (flat rate, free shipping, local pickup)
-  
-- **Shipping Classes:**
-  - List all classes
-  - Add/edit/delete classes
-  - Class descriptions
-
-- **Shipping Options:**
-  - Enable/disable shipping calculator
-  - Hide shipping costs until address entered
-  - Debug mode
-
-**UI Components:**
-- Zone list with drag-and-drop
-- Region selector (multi-select countries/states)
-- Method configuration forms
-- Shipping class manager
-- Cost calculator inputs
-
----
-
-### **Phase 2: Product & Customer Settings (MEDIUM PRIORITY)** 🟡
-
-#### 4. Product Settings (`/settings/products`)
-**Purpose:** Shop page, inventory, downloadable products  
-**Complexity:** Medium  
-**Estimated Time:** 4-6 hours
-
-**Sections:**
-- **General:**
-  - Shop page
-  - Add to cart behavior
-  - Placeholder images
-  
-- **Inventory:**
-  - Manage stock
-  - Hold stock (minutes)
-  - Notifications (low stock, out of stock)
-  - Low stock threshold
-  - Out of stock threshold
-  - Hide out of stock items
-  
-- **Downloadable Products:**
-  - File download method
-  - Access restriction
-  - Grant access after payment
-
-**UI Components:**
-- Page selectors
-- Number inputs
-- Checkboxes
-- Radio groups
-- Select dropdowns
-
----
-
-#### 5. Tax Settings (`/settings/tax`)
-**Purpose:** Tax rates, classes, and options  
-**Complexity:** Medium-High  
-**Estimated Time:** 6-8 hours
-
-**Features:**
-- **Tax Options:**
-  - Prices entered with tax
-  - Calculate tax based on (customer address, shop address)
-  - Shipping tax class
-  - Rounding
-  - Additional tax classes
-  
-- **Standard Rates:**
-  - Country/State/Postcode
-  - Rate %
-  - Tax name
-  - Priority
-  - Compound
-  - Shipping
-  
-- **Tax Classes:**
-  - List all classes
-  - Add/edit/delete classes
-
-**UI Components:**
-- Tax rate table (sortable, editable)
-- Country/State selectors
-- Percentage inputs
-- Checkbox groups
-- Tax class manager
-
----
-
-#### 6. Accounts & Privacy (`/settings/accounts`)
-**Purpose:** Guest checkout, account creation, privacy  
+#### 1. Store Details (`/settings/store`)
+**Purpose:** Core store information - the foundation of everything  
 **Complexity:** Low-Medium  
-**Estimated Time:** 3-4 hours
+**Estimated Time:** 4-6 hours  
+**Shopify Equivalent:** Settings > General
+
+**Layout:** Single-page form with clear sections
 
 **Sections:**
-- **Guest Checkout:**
-  - Allow customers to place orders without account
-  - Allow customers to log in during checkout
-  
-- **Account Creation:**
-  - Allow customers to create account during checkout
-  - Allow customers to create account on "My Account" page
-  - Automatically generate username
-  - Automatically generate password
-  
-- **Privacy:**
-  - Privacy policy page
-  - Registration privacy policy text
-  - Checkout privacy policy text
-  - Remove personal data (retention period)
-  - Remove access to download (retention period)
 
-**UI Components:**
-- Checkboxes
-- Page selector
-- Textarea for policy text
-- Number inputs (retention periods)
+**A. Store Identity**
+- Store name (text input with live preview)
+- Contact email (for customer inquiries)
+- Customer support email (separate from admin)
+- Store phone number (optional)
+
+**B. Store Address** 
+- Country/Region (dropdown with flags)
+- Street address (autocomplete)
+- City, State/Province, Postal code
+- _Used for: shipping origin, invoices, tax calculations_
+
+**C. Currency & Formatting**
+- Currency (searchable dropdown with symbols)
+- Currency position (before/after amount)
+- Thousand separator (`,` or `.` or space)
+- Decimal separator (`.` or `,`)
+- Number of decimals (0-4)
+- _Live preview: $1,234.56_
+
+**D. Standards & Formats**
+- Timezone (auto-detect with manual override)
+- Unit system (Metric / Imperial)
+- Weight unit (kg, g, lb, oz)
+- Dimension unit (cm, m, in, ft)
+
+**E. Store Type** (helps with recommendations)
+- Industry (dropdown: Fashion, Electronics, Food, etc.)
+- Business type (B2C, B2B, Both)
+
+**UI/UX:**
+- Clean, spacious layout
+- Inline validation
+- Live preview for currency formatting
+- Auto-save draft (save button at top)
+- "Your store is located in Indonesia 🇮🇩" summary card
 
 ---
 
-### **Phase 3: Communication (MEDIUM PRIORITY)** 🟡
+#### 2. Payments (`/settings/payments`)
+**Purpose:** Get paid - make it dead simple  
+**Complexity:** Medium  
+**Estimated Time:** 6-8 hours  
+**Shopify Equivalent:** Settings > Payments
 
-#### 7. Email Settings (`/settings/emails`)
-**Purpose:** Email templates and settings  
+**Layout:** Card-based interface, not a table
+
+**Sections:**
+
+**A. Payment Providers** (Visual Cards)
+```
+┌─────────────────────────────────────┐
+│ 💳 Credit & Debit Cards             │
+│                                     │
+│ [Stripe Logo]  Stripe Payments     │
+│ ○ Not connected                     │
+│ [Set up Stripe] button              │
+│                                     │
+│ Accept Visa, Mastercard, Amex      │
+│ 2.9% + $0.30 per transaction       │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│ [PayPal Logo]  PayPal              │
+│ ● Connected                         │
+│ [Manage] [Disconnect]               │
+│                                     │
+│ buyer@example.com                   │
+│ 3.49% + fixed fee per transaction  │
+└─────────────────────────────────────┘
+```
+
+**B. Manual Payment Methods** (Simpler cards)
+- Bank Transfer (BACS) - toggle + instructions field
+- Cash on Delivery - toggle + fee option
+- Check Payments - toggle + instructions
+
+**C. Payment Settings**
+- Test mode (big toggle with warning banner)
+- Payment capture (Authorize only / Authorize and capture)
+- Accepted payment methods (checkboxes with icons)
+
+**UI/UX:**
+- Big, visual cards (not boring table rows)
+- "Add payment provider" button with modal
+- Setup wizard for Stripe/PayPal (not raw API keys)
+- Test mode banner: "⚠️ Test Mode Active - No real charges"
+- Drag to reorder (shows on checkout)
+
+---
+
+#### 3. Shipping & Delivery (`/settings/shipping`)
+**Purpose:** Get products to customers  
 **Complexity:** Medium-High  
-**Estimated Time:** 6-8 hours
+**Estimated Time:** 8-10 hours  
+**Shopify Equivalent:** Settings > Shipping and delivery
 
-**Features:**
-- **Email List:**
-  - New Order (admin)
-  - Cancelled Order (admin)
-  - Failed Order (admin)
-  - Order On-Hold (customer)
-  - Processing Order (customer)
-  - Completed Order (customer)
-  - Refunded Order (customer)
-  - Customer Invoice
-  - Customer Note
-  - Reset Password
-  - New Account
-  
-- **Email Settings (per email):**
-  - Enable/disable
-  - Subject
-  - Heading
-  - Additional content
-  - Email type (plain text, HTML, multipart)
-  
-- **Global Settings:**
-  - "From" name
-  - "From" email address
-  - Header image
-  - Footer text
-  - Base color
-  - Background color
-  - Body background color
-  - Body text color
+**Layout:** Zone-based with visual hierarchy
 
-**UI Components:**
-- Email list with enable/disable toggles
-- Email editor (per email)
-- Color pickers
-- Image uploader
-- Text inputs
-- Textarea
-- Email preview
+**Sections:**
+
+**A. Shipping Zones** (Card list, not table)
+```
+┌─────────────────────────────────────┐
+│ 🌍 Domestic (Indonesia)             │
+│                                     │
+│ Regions: All Indonesia             │
+│ Rates: 3 shipping rates            │
+│                                     │
+│ • Standard Shipping - Rp 15,000    │
+│ • Express Shipping - Rp 30,000     │
+│ • Free Shipping - Free (>Rp 500k)  │
+│                                     │
+│ [Edit zone] [Delete]                │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│ 🌏 International                    │
+│                                     │
+│ Regions: Rest of world             │
+│ Rates: 1 shipping rate             │
+│                                     │
+│ • International - Calculated       │
+│                                     │
+│ [Edit zone]                         │
+└─────────────────────────────────────┘
+
+[+ Add shipping zone] button
+```
+
+**B. Zone Editor** (Modal or slide-over)
+- Zone name
+- Countries/Regions (multi-select with search)
+- Shipping rates:
+  - Name (e.g., "Standard Shipping")
+  - Price (flat rate or calculated)
+  - Conditions (order total, weight, etc.)
+  - Transit time (e.g., "3-5 business days")
+
+**C. Local Pickup**
+- Enable local pickup (toggle)
+- Pickup locations (list with add/edit)
+- Pickup instructions
+
+**D. Shipping Settings**
+- Show delivery estimates (toggle)
+- Require shipping address (toggle)
+- Hide shipping costs until address entered (toggle)
+
+**UI/UX:**
+- Visual zone cards, not boring table
+- "Add rate" button per zone
+- Inline rate editor (no page reload)
+- Drag to reorder rates
+- Smart defaults: "Domestic" zone auto-created
+- Map visualization (future enhancement)
+
+---
+
+### **Phase 2: Customer Experience (MEDIUM PRIORITY)** 🟡
+
+#### 4. Taxes (`/settings/taxes`)
+**Purpose:** Handle taxes simply  
+**Complexity:** Medium  
+**Estimated Time:** 5-7 hours  
+**Shopify Equivalent:** Settings > Taxes and duties
+
+**Layout:** Simple toggle + table
+
+**Sections:**
+
+**A. Tax Collection**
+- Collect taxes (big toggle)
+- Prices include tax (toggle)
+- Calculate tax based on (customer address / shop address)
+
+**B. Tax Rates** (Simple table, not WooCommerce's complex structure)
+```
+┌──────────────┬─────────┬────────┬─────────┐
+│ Region       │ Rate    │ Shipping│ Actions │
+├──────────────┼─────────┼────────┼─────────┤
+│ Indonesia    │ 11%     │ ✓      │ Edit    │
+│ Singapore    │ 9%      │ ✓      │ Edit    │
+│ Malaysia     │ 6%      │ ✓      │ Edit    │
+└──────────────┴─────────┴────────┴─────────┘
+[+ Add tax rate]
+```
+
+**C. Tax Settings**
+- Show tax breakdown at checkout (toggle)
+- Tax exemptions (for wholesale, etc.)
+
+**UI/UX:**
+- Auto-detect tax rates by country (suggest common rates)
+- Simple table, not WooCommerce's confusing priority/compound system
+- "Need help? We can set this up for you" link
+
+---
+
+#### 5. Checkout (`/settings/checkout`)
+**Purpose:** Optimize the buying experience  
+**Complexity:** Low-Medium  
+**Estimated Time:** 4-5 hours  
+**Shopify Equivalent:** Settings > Checkout
+
+**Layout:** Toggle-heavy with smart defaults
+
+**Sections:**
+
+**A. Customer Information**
+- Company name (Show / Hide / Optional)
+- Phone number (Required / Optional / Hidden)
+- Address line 2 (Show / Hide)
+
+**B. Checkout Options**
+- Guest checkout (toggle - default ON)
+- Account creation at checkout (toggle)
+- Order notes field (toggle)
+- Marketing opt-in checkbox (toggle)
+
+**C. Order Processing**
+- Terms and conditions (toggle + page selector)
+- Privacy policy (toggle + page selector)
+- Automatically complete orders (for digital products)
+
+**UI/UX:**
+- Live preview of checkout form
+- Smart defaults (guest checkout ON, company name optional)
+- "Recommended" badges on best practices
+
+---
+
+#### 6. Customer Accounts (`/settings/customers`)
+**Purpose:** Customer login and data  
+**Complexity:** Low  
+**Estimated Time:** 3-4 hours  
+**Shopify Equivalent:** Settings > Customer accounts
+
+**Layout:** Simple toggles and options
+
+**Sections:**
+
+**A. Account Creation**
+- Customers can create accounts (toggle)
+- Account creation locations:
+  - ☑ During checkout
+  - ☑ On "My Account" page
+  - ☐ Require accounts to purchase
+
+**B. Login Options**
+- Email or username (radio)
+- Social login (future: Google, Facebook)
+- Password requirements (dropdown: None / Medium / Strong)
+
+**C. Customer Data**
+- Data retention period (dropdown: Forever / 1 year / 2 years / 3 years)
+- Download data retention (dropdown: Forever / 6 months / 1 year)
+- Privacy policy page (page selector)
+
+**UI/UX:**
+- Clear explanations for GDPR compliance
+- "Learn about data privacy" help links
+
+---
+
+### **Phase 3: Communication & Branding (MEDIUM PRIORITY)** 🟡
+
+#### 7. Notifications (`/settings/notifications`)
+**Purpose:** Keep customers informed  
+**Complexity:** Medium  
+**Estimated Time:** 6-8 hours  
+**Shopify Equivalent:** Settings > Notifications
+
+**Layout:** Email list + visual editor
+
+**Sections:**
+
+**A. Customer Notifications** (Card list with toggle)
+```
+┌─────────────────────────────────────┐
+│ ● Order confirmation                │
+│   Sent when order is placed         │
+│   [Edit template]                   │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│ ● Shipping confirmation             │
+│   Sent when order is shipped        │
+│   [Edit template]                   │
+└─────────────────────────────────────┘
+
+┌─────────────────────────────────────┐
+│ ○ Order cancelled                   │
+│   Sent when order is cancelled      │
+│   [Edit template]                   │
+└─────────────────────────────────────┘
+```
+
+**B. Admin Notifications**
+- New order (toggle + recipients)
+- Low stock alert (toggle + threshold)
+- Failed payment (toggle)
+
+**C. Email Settings**
+- Sender name (e.g., "WooNooW Store")
+- Sender email (e.g., "noreply@yourstore.com")
+- Email footer text
+
+**D. Template Editor** (Per email, modal/slide-over)
+- Subject line (with variables: {{order_number}}, {{customer_name}})
+- Email heading
+- Body content (rich text editor)
+- Live preview (desktop + mobile)
+
+**UI/UX:**
+- Visual email builder (not raw HTML)
+- Variable picker (click to insert {{customer_name}})
+- Send test email button
+- Mobile preview
+
+---
+
+#### 8. Brand & Appearance (`/settings/brand`)
+**Purpose:** Make it yours  
+**Complexity:** Low-Medium  
+**Estimated Time:** 4-5 hours  
+**Shopify Equivalent:** Settings > Brand (new in Shopify)
+
+**Layout:** Visual, design-focused
+
+**Sections:**
+
+**A. Logo & Colors**
+- Store logo (upload, max 500KB)
+- Brand color (color picker)
+- Accent color (color picker)
+- _Used in: emails, invoices, admin interface_
+
+**B. Email Design**
+- Email header image (upload)
+- Email background color
+- Email text color
+- Footer text (e.g., "© 2025 Your Store")
+
+**C. Invoice Template**
+- Invoice logo (use store logo / upload different)
+- Invoice header text
+- Invoice footer text
+- Tax ID / Business registration number
+
+**UI/UX:**
+- Live preview of email with your branding
+- Live preview of invoice
+- Color picker with presets
+- Image cropper for logo
 
 ---
 
@@ -332,13 +523,22 @@ These settings are rarely used and can remain in wp-admin:
 
 **REST Endpoints:**
 ```php
-GET  /wp-json/woonoow/v1/settings/general
-POST /wp-json/woonoow/v1/settings/general
+GET  /wp-json/woonoow/v1/settings/store
+POST /wp-json/woonoow/v1/settings/store
 GET  /wp-json/woonoow/v1/settings/payments
 POST /wp-json/woonoow/v1/settings/payments
 GET  /wp-json/woonoow/v1/settings/shipping
 POST /wp-json/woonoow/v1/settings/shipping
-// ... etc
+GET  /wp-json/woonoow/v1/settings/taxes
+POST /wp-json/woonoow/v1/settings/taxes
+GET  /wp-json/woonoow/v1/settings/checkout
+POST /wp-json/woonoow/v1/settings/checkout
+GET  /wp-json/woonoow/v1/settings/customers
+POST /wp-json/woonoow/v1/settings/customers
+GET  /wp-json/woonoow/v1/settings/notifications
+POST /wp-json/woonoow/v1/settings/notifications
+GET  /wp-json/woonoow/v1/settings/brand
+POST /wp-json/woonoow/v1/settings/brand
 ```
 
 **Data Flow:**
@@ -358,21 +558,26 @@ POST /wp-json/woonoow/v1/settings/shipping
 ```
 admin-spa/src/routes/Settings/
 ├── index.tsx              ✅ Done (WooNooW settings)
-├── General.tsx            ✅ Placeholder created
-├── Payments.tsx           ✅ Placeholder created
-├── Shipping.tsx           ✅ Placeholder created
-├── Products.tsx           ⏳ To create
-├── Tax.tsx                ⏳ To create
-├── Accounts.tsx           ⏳ To create
-├── Emails.tsx             ⏳ To create
+├── Store.tsx              ⏳ Store details (Shopify-style)
+├── Payments.tsx           ⏳ Payment providers (card-based)
+├── Shipping.tsx           ⏳ Shipping zones (visual cards)
+├── Taxes.tsx              ⏳ Tax rates (simple table)
+├── Checkout.tsx           ⏳ Checkout options
+├── Customers.tsx          ⏳ Customer accounts
+├── Notifications.tsx      ⏳ Email templates
+├── Brand.tsx              ⏳ Branding & appearance
 └── components/
-    ├── SettingsForm.tsx       ⏳ Reusable form component
-    ├── SettingsSection.tsx    ⏳ Section wrapper
-    ├── SettingsField.tsx      ⏳ Field renderer
-    ├── PaymentGatewayList.tsx ⏳ Payment gateway manager
-    ├── ShippingZoneList.tsx   ⏳ Shipping zone manager
-    ├── TaxRateTable.tsx       ⏳ Tax rate editor
-    └── EmailTemplateList.tsx  ⏳ Email template manager
+    ├── SettingsLayout.tsx     ⏳ Consistent layout wrapper
+    ├── SettingsCard.tsx       ⏳ Card component (Shopify-style)
+    ├── SettingsSection.tsx    ⏳ Section with heading
+    ├── ToggleField.tsx        ⏳ Toggle switch
+    ├── PaymentProviderCard.tsx ⏳ Payment provider card
+    ├── ShippingZoneCard.tsx   ⏳ Shipping zone card
+    ├── TaxRateTable.tsx       ⏳ Simple tax table
+    ├── EmailTemplateCard.tsx  ⏳ Email template card
+    ├── ColorPicker.tsx        ⏳ Color picker
+    ├── ImageUploader.tsx      ⏳ Image upload
+    └── LivePreview.tsx        ⏳ Live preview component
 ```
 
 **Shared Components:**
@@ -386,70 +591,111 @@ admin-spa/src/routes/Settings/
 
 ---
 
-## 🎨 UI/UX Guidelines
+## 🎨 UI/UX Guidelines (Shopify-Inspired)
 
-### Layout
-- Two-column layout on desktop (sidebar + content)
-- Single column on mobile
-- Sticky save button
-- Breadcrumb navigation
-- Section anchors (jump to section)
+### Visual Design
+- **Card-based layout** - Not boring forms
+- **Generous whitespace** - Breathable, not cramped
+- **Visual hierarchy** - Clear sections with icons
+- **Color-coded status** - Green (active), Gray (inactive), Yellow (test mode)
+- **Illustrations** - Empty states, onboarding
 
-### Forms
-- Clear labels and help text
-- Inline validation
-- Required field indicators
-- Default values shown
-- Reset to defaults button
-- Unsaved changes warning
+### Layout Patterns
+- **Single-column on mobile** - Stack everything
+- **Two-column on desktop** - Content + sidebar (for help/tips)
+- **Sticky save bar** - Always visible at top
+- **Progressive disclosure** - Show basics, hide advanced in expandable sections
 
-### Feedback
-- Loading spinners during save
-- Success toast notifications
-- Error messages with details
-- Confirmation dialogs for destructive actions
+### Interactive Elements
+- **Big toggle switches** - Not tiny checkboxes
+- **Visual cards** - Payment providers, shipping zones as cards
+- **Inline editing** - Edit in place, not separate pages
+- **Drag and drop** - Reorder zones, rates, emails
+- **Live previews** - Currency format, email templates, invoices
+
+### Forms & Validation
+- **Smart defaults** - Pre-fill with best practices
+- **Inline validation** - Real-time feedback
+- **Help text everywhere** - Explain what each field does
+- **Examples** - "e.g., Standard Shipping"
+- **Recommended badges** - "✓ Recommended" for best practices
+
+### Feedback & States
+- **Optimistic updates** - Show change immediately, save in background
+- **Toast notifications** - "Settings saved" (not alerts)
+- **Loading states** - Skeleton screens, not spinners
+- **Empty states** - "No payment providers yet. Add one to get started."
+- **Error states** - Friendly messages with solutions
+
+### Mobile-First
+- **Touch-friendly** - 44px minimum tap targets
+- **Swipe actions** - Swipe to delete/edit
+- **Bottom sheets** - Modals slide from bottom on mobile
+- **Responsive tables** - Stack columns on mobile
 
 ### Accessibility
-- Keyboard navigation
-- Screen reader support
-- Focus indicators
-- ARIA labels
-- Color contrast compliance
+- **Keyboard navigation** - Tab through everything
+- **Screen reader labels** - Descriptive ARIA labels
+- **Focus indicators** - Clear blue outline
+- **Color contrast** - WCAG AA compliant
+- **Skip links** - Skip to main content
 
 ---
 
-## 📝 Implementation Checklist
+## 📝 Implementation Checklist (Shopify-Inspired)
 
-### Phase 1: Core Settings
-- [ ] General Settings page
-  - [ ] Store address fields
-  - [ ] Currency settings
-  - [ ] Location settings
+### Phase 1: Foundation
+- [ ] **Store Details** (`/settings/store`)
+  - [ ] Store identity section (name, emails, phone)
+  - [ ] Store address with autocomplete
+  - [ ] Currency selector with live preview
+  - [ ] Timezone & units
+  - [ ] Store type/industry
   - [ ] Save/load functionality
-  - [ ] Validation
   
-- [ ] Payment Settings page
-  - [ ] Gateway list
-  - [ ] Enable/disable toggles
-  - [ ] Gateway configuration
+- [ ] **Payments** (`/settings/payments`)
+  - [ ] Payment provider cards (visual)
+  - [ ] Stripe/PayPal setup wizards
+  - [ ] Manual methods (bank, COD, check)
+  - [ ] Test mode toggle with banner
   - [ ] Drag-and-drop ordering
   - [ ] Save/load functionality
   
-- [ ] Shipping Settings page
-  - [ ] Shipping zones list
-  - [ ] Zone editor
-  - [ ] Region selector
-  - [ ] Shipping methods
-  - [ ] Shipping classes
+- [ ] **Shipping & Delivery** (`/settings/shipping`)
+  - [ ] Shipping zone cards (visual)
+  - [ ] Zone editor (modal/slide-over)
+  - [ ] Rate configuration
+  - [ ] Local pickup options
+  - [ ] Drag-and-drop zones/rates
   - [ ] Save/load functionality
 
-### Phase 2: Product & Customer Settings
-- [ ] Product Settings page
-- [ ] Tax Settings page
-- [ ] Accounts & Privacy page
+### Phase 2: Customer Experience
+- [ ] **Taxes** (`/settings/taxes`)
+  - [ ] Tax collection toggle
+  - [ ] Simple tax rate table
+  - [ ] Auto-detect common rates
+  
+- [ ] **Checkout** (`/settings/checkout`)
+  - [ ] Checkout field options
+  - [ ] Guest checkout toggle
+  - [ ] Terms & privacy
+  
+- [ ] **Customer Accounts** (`/settings/customers`)
+  - [ ] Account creation settings
+  - [ ] Login options
+  - [ ] Data retention (GDPR)
 
-### Phase 3: Communication
-- [ ] Email Settings page
+### Phase 3: Communication & Branding
+- [ ] **Notifications** (`/settings/notifications`)
+  - [ ] Email template cards
+  - [ ] Visual email editor
+  - [ ] Variable picker
+  - [ ] Live preview
+  
+- [ ] **Brand & Appearance** (`/settings/brand`)
+  - [ ] Logo uploader
+  - [ ] Color pickers
+  - [ ] Email/invoice preview
 
 ---
 
@@ -502,37 +748,58 @@ admin-spa/src/routes/Settings/
 
 ---
 
-## 🎯 Success Metrics
+## 🎯 Success Metrics (Shopify-Inspired)
 
 ### Phase 1 Complete When:
-- ✅ General, Payments, Shipping pages functional
+- ✅ Store, Payments, Shipping pages functional
+- ✅ Visual card-based UI (not boring forms)
 - ✅ All fields save/load correctly
-- ✅ Mobile responsive
+- ✅ Live previews working (currency, etc.)
+- ✅ Mobile responsive with touch-friendly UI
 - ✅ No console errors
-- ✅ User testing passed
+- ✅ Feels like Shopify (fast, smooth, delightful)
 
 ### Phase 2 Complete When:
-- ✅ Products, Tax, Accounts pages functional
+- ✅ Taxes, Checkout, Customers pages functional
+- ✅ Simple tables (not WooCommerce complexity)
 - ✅ All validations working
+- ✅ Smart defaults applied
 - ✅ Performance acceptable (<2s load)
 
 ### Phase 3 Complete When:
-- ✅ Email settings functional
-- ✅ Email preview working
+- ✅ Notifications, Brand pages functional
+- ✅ Visual email editor working
+- ✅ Live email/invoice preview
+- ✅ Color pickers, image uploaders working
 - ✅ Template customization working
 
 ---
 
-## 📅 Timeline Estimate
+## 📅 Timeline Estimate (Shopify-Inspired Approach)
 
 | Phase | Pages | Estimated Time | Priority |
 |-------|-------|----------------|----------|
-| Phase 1 | General, Payments, Shipping | 18-26 hours | 🔴 HIGH |
-| Phase 2 | Products, Tax, Accounts | 13-18 hours | 🟡 MEDIUM |
-| Phase 3 | Emails | 6-8 hours | 🟡 MEDIUM |
-| **Total** | **7 pages** | **37-52 hours** | |
+| **Phase 1: Foundation** | Store, Payments, Shipping | 18-24 hours | 🔴 HIGH |
+| **Phase 2: Customer Experience** | Taxes, Checkout, Customers | 12-16 hours | 🟡 MEDIUM |
+| **Phase 3: Communication & Branding** | Notifications, Brand | 10-13 hours | 🟡 MEDIUM |
+| **Total** | **8 pages** | **40-53 hours** | |
 
-**Note:** Times include design, implementation, testing, and documentation.
+**Breakdown:**
+- **Store Details:** 4-6 hours (simple, but needs autocomplete & live preview)
+- **Payments:** 6-8 hours (card UI, setup wizards, drag-drop)
+- **Shipping:** 8-10 hours (zone cards, rate editor, complex)
+- **Taxes:** 5-7 hours (simple table, auto-detect)
+- **Checkout:** 4-5 hours (toggles, live preview)
+- **Customers:** 3-4 hours (simple toggles)
+- **Notifications:** 6-8 hours (email editor, preview)
+- **Brand:** 4-5 hours (color pickers, image upload, preview)
+
+**Note:** Times include:
+- UI design (Shopify-style cards, not forms)
+- Component development (reusable)
+- Backend API integration
+- Testing (functional + UX)
+- Documentation
 
 ---
 
@@ -542,9 +809,91 @@ admin-spa/src/routes/Settings/
 - `SPA_ADMIN_MENU_PLAN.md` - Menu structure
 - `PROJECT_SOP.md` - Development standards
 - `STANDALONE_MODE_SUMMARY.md` - Mode documentation
+- `MENU_FIX_SUMMARY.md` - Navigation fix details
+
+---
+
+## 📊 WooCommerce vs WooNooW Settings Comparison
+
+| Aspect | WooCommerce | WooNooW (Shopify-Inspired) |
+|--------|-------------|----------------------------|
+| **Layout** | Tabs within tabs | Single pages with cards |
+| **Navigation** | Confusing hierarchy | Flat, clear menu |
+| **Forms** | Dense, technical | Spacious, visual |
+| **Payment Setup** | Raw API keys | Setup wizards |
+| **Shipping** | Complex table | Visual zone cards |
+| **Taxes** | Priority/compound system | Simple rate table |
+| **Emails** | HTML code editor | Visual template builder |
+| **Branding** | Scattered settings | Dedicated Brand page |
+| **Mobile** | Not optimized | Touch-friendly |
+| **Help** | External docs | Inline help everywhere |
+| **Defaults** | Empty/technical | Smart, business-focused |
+| **Feel** | Admin panel | Modern SaaS app |
+
+---
+
+## 💡 Key Design Decisions
+
+### 1. **Store Details Instead of General**
+- **Why:** "General" is vague. "Store Details" is clear and action-oriented.
+- **Benefit:** Merchants know exactly what to expect.
+
+### 2. **Card-Based Payment Providers**
+- **Why:** Visual cards are more engaging than table rows.
+- **Benefit:** Easier to scan, understand status at a glance.
+
+### 3. **Shipping Zones as Cards**
+- **Why:** WooCommerce's table is overwhelming.
+- **Benefit:** Visual hierarchy, easier to manage multiple zones.
+
+### 4. **Simple Tax Table**
+- **Why:** WooCommerce's priority/compound system confuses users.
+- **Benefit:** 90% of stores just need region + rate.
+
+### 5. **Separate Checkout & Customer Pages**
+- **Why:** WooCommerce lumps them together.
+- **Benefit:** Clearer separation of concerns.
+
+### 6. **Notifications Instead of Emails**
+- **Why:** "Notifications" is more modern and broader (future: SMS, push).
+- **Benefit:** Future-proof naming.
+
+### 7. **Brand & Appearance Page**
+- **Why:** Shopify's newest addition, highly requested.
+- **Benefit:** One place for all branding (logo, colors, templates).
+
+### 8. **Progressive Disclosure**
+- **Why:** Don't overwhelm with all options at once.
+- **Benefit:** Show basics, hide advanced in expandable sections.
+
+---
+
+## 🚀 Implementation Strategy
+
+### Week 1-2: Foundation (Phase 1)
+1. **Store Details** - Get the basics right
+2. **Payments** - Critical for business
+3. **Shipping** - Most complex, tackle early
+
+### Week 3: Customer Experience (Phase 2)
+4. **Taxes** - Simpler than WooCommerce
+5. **Checkout** - Quick wins with toggles
+6. **Customers** - Simple settings
+
+### Week 4: Polish (Phase 3)
+7. **Notifications** - Email templates
+8. **Brand** - Visual polish
+
+### Ongoing: Iteration
+- User feedback
+- Performance optimization
+- Mobile refinement
+- Accessibility audit
 
 ---
 
 **Last Updated:** November 5, 2025  
-**Status:** 📋 Planning Complete, Ready for Implementation  
-**Next Step:** Implement Phase 1 - General Settings
+**Status:** 📋 Planning Complete - Shopify-Inspired Approach Adopted  
+**Strategy:** Store-first, visual, simple, fast  
+**Next Step:** Implement Phase 1 - Store Details page  
+**Estimated Total:** 40-53 hours for all 8 pages
diff --git a/admin-spa/src/nav/tree.ts b/admin-spa/src/nav/tree.ts
index c14b249..ff3f9cb 100644
--- a/admin-spa/src/nav/tree.ts
+++ b/admin-spa/src/nav/tree.ts
@@ -107,19 +107,20 @@ function getStaticFallbackTree(): MainNode[] {
         // WooNooW Settings
         { label: 'WooNooW', mode: 'spa' as const, path: '/settings' },
         
-        // WooCommerce Settings (Most Used First)
-        { label: 'General',  mode: 'spa' as const, path: '/settings/general' },
+        // Core Settings (Shopify-inspired)
+        { label: 'Store Details', mode: 'spa' as const, path: '/settings/store' },
         { label: 'Payments', mode: 'spa' as const, path: '/settings/payments' },
-        { label: 'Shipping', mode: 'spa' as const, path: '/settings/shipping' },
-        { label: 'Products', mode: 'spa' as const, path: '/settings/products' },
-        { label: 'Tax',      mode: 'spa' as const, path: '/settings/tax' },
-        { label: 'Accounts & Privacy', mode: 'spa' as const, path: '/settings/accounts' },
-        { label: 'Emails',   mode: 'spa' as const, path: '/settings/emails' },
+        { label: 'Shipping & Delivery', mode: 'spa' as const, path: '/settings/shipping' },
+        { label: 'Taxes', mode: 'spa' as const, path: '/settings/taxes' },
+        { label: 'Checkout', mode: 'spa' as const, path: '/settings/checkout' },
+        { label: 'Customer Accounts', mode: 'spa' as const, path: '/settings/customers' },
+        { label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' },
+        { label: 'Brand & Appearance', mode: 'spa' as const, path: '/settings/brand' },
         
-        // Less Common (Bridge to WP Admin for now)
+        // Advanced (Bridge to WP Admin)
         { label: 'Advanced', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=advanced` },
-        { label: 'Integration', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=integration` },
-        { label: 'Status',   mode: 'bridge' as const, href: `${admin}?page=wc-status` },
+        { label: 'Integrations', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=integration` },
+        { label: 'System Status', mode: 'bridge' as const, href: `${admin}?page=wc-status` },
         { label: 'Extensions', mode: 'bridge' as const, href: `${admin}?page=wc-addons` },
       ],
     },
diff --git a/includes/Compat/NavigationRegistry.php b/includes/Compat/NavigationRegistry.php
index 7a8e466..cda15f7 100644
--- a/includes/Compat/NavigationRegistry.php
+++ b/includes/Compat/NavigationRegistry.php
@@ -173,19 +173,20 @@ class NavigationRegistry {
             // WooNooW Settings
             ['label' => __('WooNooW', 'woonoow'), 'mode' => 'spa', 'path' => '/settings'],
             
-            // WooCommerce Settings (Most Used First)
-            ['label' => __('General', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/general'],
+            // Core Settings (Shopify-inspired)
+            ['label' => __('Store Details', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/store'],
             ['label' => __('Payments', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/payments'],
-            ['label' => __('Shipping', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/shipping'],
-            ['label' => __('Products', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/products'],
-            ['label' => __('Tax', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/tax'],
-            ['label' => __('Accounts & Privacy', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/accounts'],
-            ['label' => __('Emails', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/emails'],
+            ['label' => __('Shipping & Delivery', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/shipping'],
+            ['label' => __('Taxes', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/taxes'],
+            ['label' => __('Checkout', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/checkout'],
+            ['label' => __('Customer Accounts', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/customers'],
+            ['label' => __('Notifications', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/notifications'],
+            ['label' => __('Brand & Appearance', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/brand'],
             
-            // Less Common (Bridge to WP Admin for now)
+            // Advanced (Bridge to WP Admin)
             ['label' => __('Advanced', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=advanced'],
-            ['label' => __('Integration', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=integration'],
-            ['label' => __('Status', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-status'],
+            ['label' => __('Integrations', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=integration'],
+            ['label' => __('System Status', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-status'],
             ['label' => __('Extensions', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-addons'],
         ];
     }