docs: Update PROJECT_SOP and PROGRESS_NOTE with mobile patterns

Added comprehensive documentation for Mobile Contextual Header Pattern.

PROJECT_SOP.md Updates:
- Added section 5.8: Mobile Contextual Header Pattern
- Documented dual-header system concept
- Provided implementation examples
- Added CRUD page rules table
- Included form submit pattern
- Listed best practices and file references

PROGRESS_NOTE.md Updates:
- Added complete progress entry for Mobile Orders UI Enhancement
- Documented all 6 major features implemented
- Included technical implementation details
- Listed all modified files
- Added testing checklist
- Documented git commits
- Defined next steps

Key Documentation:
✅ Dual header system (Contextual + Page Header)
✅ Implementation patterns with code examples
✅ CRUD page header rules
✅ Form ref pattern for header submit buttons
✅ Responsive action button patterns
✅ Industry standard references
✅ Complete feature list and benefits
✅ Zero eslint errors/warnings achievement

Status: Production ready, fully documented

PROJECT_SOP.md

@@ -173,7 +173,104 @@ WooNooW enforces a mobile‑first responsive standard across all SPA interfaces
 - File: `admin-spa/src/ui/tokens.css` defines base CSS variables for control sizing.
 - File: `admin-spa/src/index.css` imports `./ui/tokens.css` and applies the `.ui-ctrl` rules globally.
 
-These rules ensure consistent UX across device classes while maintaining WooNooW’s design hierarchy.
+These rules ensure consistent UX across device classes while maintaining WooNooW's design hierarchy.
+
+### 5.8 Mobile Contextual Header Pattern
+
+WooNooW implements a **dual-header system** for mobile-first UX, ensuring actionable pages have consistent navigation and action buttons.
+
+**Concept: Two Headers on Mobile**
+
+1. **Contextual Header** (Mobile + Desktop)
+   - Common actions that work everywhere
+   - Format: `[Back Button] Page Title [Primary Action]`
+   - Always visible (sticky)
+   - Examples: Back, Edit, Save, Create
+
+2. **Page Header / Extra Actions** (Desktop Only)
+   - Additional desktop-specific actions
+   - Hidden on mobile (`hidden md:flex`)
+   - Examples: Print, Invoice, Label, Export
+
+**Implementation Pattern**
+
+```typescript
+import { usePageHeader } from '@/contexts/PageHeaderContext';
+import { Button } from '@/components/ui/button';
+
+export default function MyPage() {
+  const { setPageHeader, clearPageHeader } = usePageHeader();
+  const nav = useNavigate();
+  
+  // Set contextual header
+  useEffect(() => {
+    const actions = (
+      <div className="flex gap-2">
+        <Button size="sm" variant="ghost" onClick={() => nav('/parent')}>
+          {__('Back')}
+        </Button>
+        <Button size="sm" onClick={handlePrimaryAction}>
+          {__('Save')}
+        </Button>
+      </div>
+    );
+    
+    setPageHeader(__('Page Title'), actions);
+    return () => clearPageHeader();
+  }, [dependencies]);
+  
+  return (
+    <div>
+      {/* Desktop-only extra actions */}
+      <div className="hidden md:flex gap-2">
+        <button onClick={printAction}>{__('Print')}</button>
+        <button onClick={exportAction}>{__('Export')}</button>
+      </div>
+      
+      {/* Page content */}
+    </div>
+  );
+}
+```
+
+**Rules for CRUD Pages**
+
+| Page Type | Contextual Header | Page Header |
+|-----------|-------------------|-------------|
+| **List** | None (list page) | Filters, Search |
+| **Detail** | [Back] Title [Edit] | Print, Invoice, Label |
+| **New** | [Back] Title [Create] | None |
+| **Edit** | [Back] Title [Save] | None |
+
+**Form Submit Pattern**
+
+For New/Edit pages, move submit button to contextual header:
+
+```typescript
+// Use formRef to trigger submit from header
+const formRef = useRef<HTMLFormElement>(null);
+
+const actions = (
+  <Button onClick={() => formRef.current?.requestSubmit()}>
+    {__('Save')}
+  </Button>
+);
+
+<OrderForm formRef={formRef} hideSubmitButton={true} />
+```
+
+**Best Practices**
+
+1. **No Duplication** - If action is in contextual header, remove from page body
+2. **Mobile First** - Contextual header shows essential actions only
+3. **Desktop Enhancement** - Extra actions in page header (desktop only)
+4. **Consistent Pattern** - All CRUD pages follow same structure
+5. **Loading States** - Buttons show loading state during mutations
+
+**Files**
+- `admin-spa/src/contexts/PageHeaderContext.tsx` - Context provider
+- `admin-spa/src/hooks/usePageHeader.ts` - Hook for setting headers
+- `admin-spa/src/components/PageHeader.tsx` - Header component
 
 ### 5.8 Error Handling & User Notifications