fix: Correct Order Detail contextual header implementation
Fixed misunderstanding about Detail page header requirements.
Problem:
- Detail page was hiding contextual header completely
- User wanted contextual header WITH actions (it IS actionable)
- Inline header had duplicates of Back, Title, and Edit
Correct Understanding:
Mobile has 2 headers:
1. Contextual Header: Common actions (Back, Title, Edit)
2. Page Header: Extra desktop actions (Print, Invoice, Label)
Solution:
Order Detail Page:
┌─────────────────────────────────┐
│ [Back] Order #337 [Edit] │ ← Contextual header (mobile + desktop)
├─────────────────────────────────┤
│ [Print] [Invoice] [Label] [...] │ ← Extra actions (desktop only)
│ │
│ Order details... │
└─────────────────────────────────┘
Mobile View:
- Contextual header: [Back] Order #337 [Edit]
- Extra actions: Hidden
Desktop View:
- Contextual header: [Back] Order #337 [Edit]
- Extra actions: [Print] [Invoice] [Label] [Orders]
Implementation:
1. Contextual Header (always visible):
- Back button (ghost)
- Title: "Order #337"
- Edit button (primary)
2. Inline Header (desktop only):
- Hidden on mobile (md:hidden → hidden md:flex)
- Extra actions: Print, Invoice, Label, Orders link
- No Back, no Title, no Edit (already in contextual header)
Changes:
- Detail.tsx: Restored contextual header with Back + Edit
- Inline header: Changed to desktop-only extra actions
- Removed duplicates: Back, Title, Edit from inline header
- Kept extra buttons: Print, Invoice, Label, Orders
Result:
✅ Mobile: Clean contextual header with common actions
✅ Desktop: Contextual header + extra action buttons
✅ No duplication of Back, Title, or Edit
✅ Consistent with mobile-first UX pattern! 🎯