fix: OrderForm variable product issues - empty colors, desktop dialog, duplicate handling

**Issues Fixed:**

1. **Empty Color Values**
   - Problem: Variation attributes showed 'Color:' with no value
   - Cause: Backend returned empty strings for some attributes
   - Fix: Filter empty values with .filter(([_, value]) => value)
   - Result: Only non-empty attributes displayed

2. **Desktop Should Use Dialog**
   - Problem: Both desktop and mobile used Drawer (bottom sheet)
   - Expected: Desktop = Dialog (modal), Mobile = Drawer
   - Fix: Added useMediaQuery hook, conditional rendering
   - Pattern: Same as Settings pages (Payments, Shipping, etc.)

3. **Duplicate Product+Variation Handling**
   - Problem: Same product+variation created new row each time
   - Expected: Should increment quantity of existing row
   - Fix: Check for existing item before adding
   - Logic: findIndex by product_id + variation_id, then increment qty

**Changes to OrderForm.tsx:**
- Added Dialog and useMediaQuery imports
- Added isDesktop detection
- Split variation selector into Desktop (Dialog) and Mobile (Drawer)
- Fixed variationLabel to filter empty values
- Added duplicate check logic before adding to cart
- If exists: increment qty, else: add new item

**Changes to PROJECT_SOP.md:**
- Added Responsive Modal Pattern section
- Documented Dialog/Drawer pattern with code example
- Added rule 3: Same product+variation = increment qty
- Added rule 6: Filter empty attribute values
- Added rule 7: Responsive modals (Dialog/Drawer)

**Result:**
✅ Color values display correctly (empty values filtered)
✅ Desktop uses Dialog (centered modal)
✅ Mobile uses Drawer (bottom sheet)
✅ Duplicate product+variation increments quantity
✅ UX matches Tokopedia/Shopee pattern
✅ Follows Settings page modal pattern

admin-spa/src/routes/Products/index.tsx

@@ -247,7 +247,8 @@ export default function Products() {
             </button>
           </div>
 
-          <div className="flex gap-3 flex-wrap">
+          <div className="flex gap-2 items-center">
+            <Filter className="min-w-4 w-4 h-4 opacity-60" />
             {/* Status Filter */}
             <Select value={status ?? 'all'} onValueChange={(v) => { setPage(1); setStatus(v === 'all' ? undefined : v); }}>
               <SelectTrigger className="w-[140px]">