From bc5fefdf83afea5967d0a430c3ab907e6782dd21 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 20:51:58 +0700
Subject: [PATCH] feat: Reorder PageHeader and SubmenuBar using
 flex-col-reverse
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented elegant CSS-only solution for header ordering.

Solution:
- Wrapped PageHeader and SubmenuBar in flex container
- Mobile: flex-col (PageHeader first, then SubmenuBar)
- Desktop: flex-col-reverse (SubmenuBar first, then PageHeader)

Result:
✅ Mobile: Contextual header stays on top (better UX)
✅ Desktop: Submenu tabs appear above contextual header (traditional layout)
✅ No JavaScript logic needed
✅ Pure CSS flexbox solution
✅ Applied to both fullscreen and normal layouts

Benefits:
- Clean, maintainable code
- No conditional rendering complexity
- Responsive without media query logic
- Performance: CSS-only, no re-renders
---
 admin-spa/src/App.tsx                         | 30 +++++++++++--------
 .../routes/Orders/components/OrderCard.tsx    | 20 +++++++------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index d2855da..dbf3292 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -487,12 +487,15 @@ function Shell() {
             </div>
           ) : (
             <div className="flex flex-1 flex-col min-h-0">
-              <PageHeader fullscreen={true} />
-              {!isMorePage && (isDashboardRoute ? (
-                <DashboardSubmenuBar items={main.children} fullscreen={true} />
-              ) : (
-                <SubmenuBar items={main.children} fullscreen={true} />
-              ))}
+              {/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
+              <div className="flex flex-col md:flex-col-reverse">
+                <PageHeader fullscreen={true} />
+                {!isMorePage && (isDashboardRoute ? (
+                  <DashboardSubmenuBar items={main.children} fullscreen={true} />
+                ) : (
+                  <SubmenuBar items={main.children} fullscreen={true} />
+                ))}
+              </div>
               <main className="flex-1 flex flex-col min-h-0 min-w-0 pb-14">
                 <div ref={scrollContainerRef} className="flex-1 overflow-auto p-4 min-w-0">
                   <AppRoutes />
@@ -505,12 +508,15 @@ function Shell() {
         ) : (
           <div className="flex flex-1 flex-col min-h-0">
             <TopNav />
-            <PageHeader fullscreen={false} />
-            {isDashboardRoute ? (
-              <DashboardSubmenuBar items={main.children} fullscreen={false} />
-            ) : (
-              <SubmenuBar items={main.children} fullscreen={false} />
-            )}
+            {/* Flex wrapper: mobile = col (PageHeader first), desktop = col-reverse (SubmenuBar first) */}
+            <div className="flex flex-col md:flex-col-reverse">
+              <PageHeader fullscreen={false} />
+              {isDashboardRoute ? (
+                <DashboardSubmenuBar items={main.children} fullscreen={false} />
+              ) : (
+                <SubmenuBar items={main.children} fullscreen={false} />
+              )}
+            </div>
             <main className="flex-1 flex flex-col min-h-0 min-w-0">
               <div className="flex-1 overflow-auto p-4 min-w-0">
                 <AppRoutes />
diff --git a/admin-spa/src/routes/Orders/components/OrderCard.tsx b/admin-spa/src/routes/Orders/components/OrderCard.tsx
index 2baa89d..1fa8ff8 100644
--- a/admin-spa/src/routes/Orders/components/OrderCard.tsx
+++ b/admin-spa/src/routes/Orders/components/OrderCard.tsx
@@ -50,17 +50,19 @@ export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCa
           </div>
         )}
 
-        {/* Order ID Badge with Status Color */}
-        <div className={`flex-shrink-0 w-16 h-16 rounded-xl ${statusColors.bg} ${statusColors.text} flex items-center justify-center font-bold text-base`}>
-          #{order.number}
-        </div>
-
         {/* Content */}
         <div className="flex-1 min-w-0">
-          {/* Line 1: Date (small) */}
-          <div className="text-xs text-muted-foreground leading-tight mb-0.5">
-            {formatRelativeOrDate(order.date_ts)}
-          </div>
+            <div className="flex items-center gap-2 mb-2">
+
+                {/* Order ID Badge with Status Color */}
+                <div className={`flex-shrink-0 p-2 rounded-xl ${statusColors.bg} ${statusColors.text} flex items-center justify-center font-bold text-base`}>
+                #{order.number}
+                </div>
+                {/* Line 1: Date (small) */}
+                <div className="text-xs text-muted-foreground leading-tight mb-0.5">
+                    {formatRelativeOrDate(order.date_ts)}
+                </div>
+            </div>
 
           {/* Line 2: Customer */}
           <h3 className="font-bold text-base leading-tight mb-1">