From a31b2ef42673523a00f1b3b7948dd31af65439a5 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 15:51:39 +0700
Subject: [PATCH] fix: Correct Order Detail contextual header implementation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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! 🎯
---
 admin-spa/src/routes/Orders/Detail.tsx | 38 ++++++++++++++++++--------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/admin-spa/src/routes/Orders/Detail.tsx b/admin-spa/src/routes/Orders/Detail.tsx
index da31409..da172bd 100644
--- a/admin-spa/src/routes/Orders/Detail.tsx
+++ b/admin-spa/src/routes/Orders/Detail.tsx
@@ -142,11 +142,33 @@ export default function OrderShow() {
     retryPaymentMutation.mutate();
   }
 
-  // Hide contextual header on detail page (has its own inline header)
+  // Set contextual header with Back button and Edit action
   useEffect(() => {
-    clearPageHeader();
+    if (!order || isPrintMode) {
+      clearPageHeader();
+      return;
+    }
+
+    const actions = (
+      <div className="flex gap-2">
+        <Button size="sm" variant="ghost" onClick={() => nav('/orders')}>
+          {__('Back')}
+        </Button>
+        <Link to={`/orders/${id}/edit`}>
+          <Button size="sm">
+            {__('Edit')}
+          </Button>
+        </Link>
+      </div>
+    );
+
+    setPageHeader(
+      order.number ? `${__('Order')} #${order.number}` : __('Order'),
+      actions
+    );
+
     return () => clearPageHeader();
-  }, [clearPageHeader]);
+  }, [order, isPrintMode, id, setPageHeader, clearPageHeader, nav]);
 
   useEffect(() => {
     if (!isPrintMode || !qrRef.current || !order) return;
@@ -164,11 +186,8 @@ export default function OrderShow() {
 
   return (
     <div className={`space-y-4 ${mode === 'label' ? 'woonoow-label-mode' : ''}`}>
-      <div className="flex flex-wrap items-center gap-2">
-        <Link className="border rounded-md px-3 py-2 text-sm flex items-center gap-2" to={`/orders`}>
-          <ArrowLeft className="w-4 h-4" /> {__('Back')}
-        </Link>
-        <h2 className="text-lg font-semibold flex-1 min-w-[160px]">{__('Order')} {order?.number ? `#${order.number}` : (id ? `#${id}` : '')}</h2>
+      {/* Desktop extra actions - hidden on mobile, shown on desktop */}
+      <div className="hidden md:flex flex-wrap items-center gap-2">
         <div className="ml-auto flex flex-wrap items-center gap-2">
           <button className="border rounded-md px-3 py-2 text-sm flex items-center gap-2 no-print" onClick={printInvoice} title={__('Print order')}>
             <Printer className="w-4 h-4" /> {__('Print')}
@@ -179,9 +198,6 @@ export default function OrderShow() {
           <button className="border rounded-md px-3 py-2 text-sm flex items-center gap-2 no-print" onClick={printLabel} title={__('Print shipping label')}>
             <Ticket className="w-4 h-4" /> {__('Label')}
           </button>
-          <Link className="border rounded-md px-3 py-2 text-sm flex items-center gap-2 no-print" to={`/orders/${id}/edit`} title={__('Edit order')}>
-            <Pencil className="w-4 h-4" /> {__('Edit')}
-          </Link>
           <Link className="border rounded-md px-3 py-2 text-sm flex items-center gap-2 no-print" to={`/orders`} title={__('Back to orders list')}>
             <ExternalLink className="w-4 h-4" /> {__('Orders')}
           </Link>