docs: Add CRUD Module Pattern SOP to PROJECT_SOP.md

Added comprehensive CRUD pattern standard operating procedure:

**Core Principle:**
- All CRUD modules MUST use submenu tab pattern
- Products pattern wins (industry standard)

**UI Structure:**
- Submenu: [All Entity] [New] [Categories] [Tags]
- Toolbar: [Bulk Actions] [Filters] [Search]

**Variable Product Handling:**
- Tokopedia/Shopee pattern
- Each variation = separate line item
- Variation selector (dropdown/drawer)
- No auto-selection

**Why:**
- Industry standard (Shopify, WooCommerce, WordPress)
- Scalable and consistent
- Clear visual hierarchy

**Next Steps:**
1. Update Orders module to follow pattern
2. Implement variable product handling in OrderForm

PROJECT_SOP.md

@@ -154,7 +154,160 @@ Admin-SPA
 - In Fullscreen mode, `Menu Bar` becomes a collapsible sidebar while all others remain visible.
 - Sticky layout rules ensure `App Bar` and `Menu Bar` remain fixed while content scrolls independently.
 
-### 5.7 Mobile Responsiveness & UI Controls
+### 5.7 CRUD Module Pattern (Standard Operating Procedure)
+
+WooNooW enforces a **consistent CRUD pattern** for all entity management modules (Orders, Products, Customers, etc.) to ensure predictable UX and maintainability.
+
+**Core Principle:** All CRUD modules MUST follow the submenu tab pattern with consistent toolbar structure.
+
+#### UI Structure
+
+**Submenu Tabs Pattern:**
+```
+[All {Entity}] [New] [Categories] [Tags] [Other Sections...]
+```
+
+**Toolbar Structure:**
+```
+[Bulk Actions] [Filters...] [Search]
+```
+
+**Examples:**
+- **Products:** `All products | New | Categories | Tags | Attributes`
+- **Orders:** `All orders | New | Drafts | Recurring`
+- **Customers:** `All customers | New | Groups | Segments`
+
+#### Implementation Rules
+
+1. **✅ Use Submenu Tabs** for main sections
+   - Primary action (New) is a tab, NOT a toolbar button
+   - Tabs for related entities (Categories, Tags, etc.)
+   - Consistent with WordPress/WooCommerce patterns
+
+2. **✅ Toolbar for Actions & Filters**
+   - Bulk actions (Delete, Export, etc.)
+   - Filter dropdowns (Status, Type, Date, etc.)
+   - Search input
+   - NO primary CRUD buttons (New, Edit, etc.)
+
+3. **❌ Don't Mix Patterns**
+   - Don't put "New" button in toolbar if using submenu
+   - Don't duplicate actions in both toolbar and submenu
+   - Don't use different patterns for different modules
+
+#### Why This Pattern?
+
+**Industry Standard:**
+- Shopify Admin uses submenu tabs
+- WooCommerce uses submenu tabs
+- WordPress core uses submenu tabs
+
+**Benefits:**
+- **Scalability:** Easy to add new sections
+- **Consistency:** Users know where to find actions
+- **Clarity:** Visual hierarchy between main actions and filters
+
+#### Migration Checklist
+
+When updating an existing module to follow this pattern:
+
+- [ ] Move "New {Entity}" button from toolbar to submenu tab
+- [ ] Add other relevant tabs (Drafts, Categories, etc.)
+- [ ] Keep filters and bulk actions in toolbar
+- [ ] Update navigation tree in `NavigationRegistry.php`
+- [ ] Test mobile responsiveness (tabs scroll horizontally)
+
+#### Code Example
+
+**Navigation Tree (PHP):**
+```php
+'orders' => [
+    'label' => __('Orders', 'woonoow'),
+    'path' => '/orders',
+    'icon' => 'ShoppingCart',
+    'children' => [
+        'all' => [
+            'label' => __('All orders', 'woonoow'),
+            'path' => '/orders',
+        ],
+        'new' => [
+            'label' => __('New', 'woonoow'),
+            'path' => '/orders/new',
+        ],
+        'drafts' => [
+            'label' => __('Drafts', 'woonoow'),
+            'path' => '/orders/drafts',
+        ],
+    ],
+],
+```
+
+**Submenu Component (React):**
+```typescript
+<SubMenu>
+  <SubMenuItem to="/orders" label={__('All orders')} />
+  <SubMenuItem to="/orders/new" label={__('New')} />
+  <SubMenuItem to="/orders/drafts" label={__('Drafts')} />
+</SubMenu>
+```
+
+**Toolbar (React):**
+```typescript
+<Toolbar>
+  <BulkActions />
+  <FilterDropdown options={statusOptions} />
+  <SearchInput />
+</Toolbar>
+```
+
+#### Variable Product Handling in Order Forms
+
+When adding products to orders, variable products MUST follow the Tokopedia/Shopee pattern:
+
+**Desktop Pattern:**
+```
+[Search Product...]
+↓
+[Product Name - Variable Product]
+  └─ [Select Variation ▼] → Dropdown: Red, Blue, Green
+     [Add to Order]
+```
+
+**Mobile Pattern:**
+```
+[Search Product...]
+↓
+[Product Card]
+  Product Name
+  [Select Variation →] → Opens drawer with variation chips
+  [Add]
+```
+
+**Cart Display (Each variation = separate row):**
+```
+✓ Anker Earbuds
+  White                    Rp296,000  [-] 1 [+] [🗑️]
+
+✓ Anker Earbuds  
+  Black                    Rp296,000  [-] 1 [+] [🗑️]
+```
+
+**Rules:**
+1. ✅ Each variation is a **separate line item**
+2. ✅ Show variation name clearly next to product name
+3. ✅ Allow adding same product multiple times with different variations
+4. ✅ Mobile: Click variation to open drawer for selection
+5. ❌ Don't auto-select first variation
+6. ❌ Don't hide variation selector
+
+**Implementation:**
+- Product search shows variable products
+- If variable, show variation selector (dropdown/drawer)
+- User must select variation before adding
+- Each selected variation becomes separate cart item
+- Can repeat for different variations
+
+### 5.8 Mobile Responsiveness & UI Controls
 
 WooNooW enforces a mobile‑first responsive standard across all SPA interfaces to ensure usability on small screens.