From c9e036217e11cb35270ee73ed4f29431a5e4e6c9 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Fri, 21 Nov 2025 10:12:26 +0700
Subject: [PATCH] feat: Implement smart back navigation with fallback across
 all detail/edit pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented context-aware back button that respects user's navigation path:

Pattern:
```typescript
const handleBack = () => {
  if (window.history.state?.idx > 0) {
    navigate(-1); // Go back in history
  } else {
    navigate('/fallback'); // Safe fallback
  }
};
```

Updated Pages:
✅ Orders/Detail.tsx → Fallback: /orders
✅ Orders/Edit.tsx → Fallback: /orders/:id
✅ Customers/Detail.tsx → Fallback: /customers
✅ Customers/Edit.tsx → Fallback: /customers
✅ Products/Edit.tsx → Fallback: /products
✅ Coupons/Edit.tsx → Fallback: /coupons

User Flow Examples:

1. Normal Navigation (History Available):
   Customers Index → Customer Detail → Orders Tab → Order Detail
   → Click Back → Returns to Customer Detail ✅

2. Direct Access (No History):
   User opens /orders/360 directly
   → Click Back → Goes to /orders (fallback) ✅

3. New Tab (No History):
   User opens order in new tab
   → Click Back → Goes to /orders (fallback) ✅

4. Page Refresh (History Cleared):
   User refreshes page
   → Click Back → Goes to fallback ✅

Benefits:
✅ Respects user's navigation path when possible
✅ Never breaks or leaves the app
✅ Predictable behavior in all scenarios
✅ Professional UX (like Gmail, Shopify, etc.)
✅ Works with deep links and bookmarks

Technical:
- Uses window.history.state.idx to detect history
- Falls back to safe default when no history
- Consistent pattern across all pages
- No URL parameters needed

Result: Back button now works intelligently based on context!
---
 admin-spa/src/routes/Coupons/Edit.tsx     | 11 ++++++++++-
 admin-spa/src/routes/Customers/Detail.tsx | 11 ++++++++++-
 admin-spa/src/routes/Customers/Edit.tsx   | 11 ++++++++++-
 admin-spa/src/routes/Orders/Detail.tsx    | 11 ++++++++++-
 admin-spa/src/routes/Orders/Edit.tsx      | 11 ++++++++++-
 admin-spa/src/routes/Products/Edit.tsx    | 11 ++++++++++-
 6 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/admin-spa/src/routes/Coupons/Edit.tsx b/admin-spa/src/routes/Coupons/Edit.tsx
index 6757668..d252450 100644
--- a/admin-spa/src/routes/Coupons/Edit.tsx
+++ b/admin-spa/src/routes/Coupons/Edit.tsx
@@ -43,11 +43,20 @@ export default function CouponEdit() {
     },
   });
 
+  // Smart back handler: go back in history if available, otherwise fallback to /coupons
+  const handleBack = () => {
+    if (window.history.state?.idx > 0) {
+      navigate(-1); // Go back in history
+    } else {
+      navigate('/coupons'); // Fallback to coupons index
+    }
+  };
+
   // Set contextual header
   useEffect(() => {
     const actions = (
       <div className="flex gap-2">
-        <Button size="sm" variant="ghost" onClick={() => navigate('/coupons')}>
+        <Button size="sm" variant="ghost" onClick={handleBack}>
           {__('Back')}
         </Button>
         <Button
diff --git a/admin-spa/src/routes/Customers/Detail.tsx b/admin-spa/src/routes/Customers/Detail.tsx
index a84f054..123b09d 100644
--- a/admin-spa/src/routes/Customers/Detail.tsx
+++ b/admin-spa/src/routes/Customers/Detail.tsx
@@ -37,6 +37,15 @@ export default function CustomerDetail() {
   const orders = ordersQuery.data?.rows || [];
   const { setPageHeader, clearPageHeader } = usePageHeader();
 
+  // Smart back handler: go back in history if available, otherwise fallback to /customers
+  const handleBack = () => {
+    if (window.history.state?.idx > 0) {
+      navigate(-1); // Go back in history
+    } else {
+      navigate('/customers'); // Fallback to customers index
+    }
+  };
+
   // Page header
   React.useEffect(() => {
     if (!customer) {
@@ -46,7 +55,7 @@ export default function CustomerDetail() {
 
     const actions = (
       <div className="flex gap-2">
-        <Button size="sm" variant="ghost" onClick={() => navigate('/customers')}>
+        <Button size="sm" variant="ghost" onClick={handleBack}>
           {__('Back')}
         </Button>
         <Button size="sm" onClick={() => navigate(`/customers/${customerId}/edit`)}>
diff --git a/admin-spa/src/routes/Customers/Edit.tsx b/admin-spa/src/routes/Customers/Edit.tsx
index 2955820..a31303a 100644
--- a/admin-spa/src/routes/Customers/Edit.tsx
+++ b/admin-spa/src/routes/Customers/Edit.tsx
@@ -46,11 +46,20 @@ export default function CustomerEdit() {
     await updateMutation.mutateAsync(data);
   };
   
+  // Smart back handler: go back in history if available, otherwise fallback to /customers
+  const handleBack = () => {
+    if (window.history.state?.idx > 0) {
+      navigate(-1); // Go back in history
+    } else {
+      navigate('/customers'); // Fallback to customers index
+    }
+  };
+
   // Set page header with back button and save button
   useEffect(() => {
     const actions = (
       <div className="flex gap-2">
-        <Button size="sm" variant="ghost" onClick={() => navigate('/customers')}>
+        <Button size="sm" variant="ghost" onClick={handleBack}>
           {__('Back')}
         </Button>
         <Button 
diff --git a/admin-spa/src/routes/Orders/Detail.tsx b/admin-spa/src/routes/Orders/Detail.tsx
index 8aeab97..c2483a9 100644
--- a/admin-spa/src/routes/Orders/Detail.tsx
+++ b/admin-spa/src/routes/Orders/Detail.tsx
@@ -143,6 +143,15 @@ export default function OrderShow() {
     retryPaymentMutation.mutate();
   }
 
+  // Smart back handler: go back in history if available, otherwise fallback to /orders
+  const handleBack = () => {
+    if (window.history.state?.idx > 0) {
+      nav(-1); // Go back in history
+    } else {
+      nav('/orders'); // Fallback to orders index
+    }
+  };
+
   // Set contextual header with Back button and Edit action
   useEffect(() => {
     if (!order || isPrintMode) {
@@ -152,7 +161,7 @@ export default function OrderShow() {
 
     const actions = (
       <div className="flex gap-2">
-        <Button size="sm" variant="ghost" onClick={() => nav('/orders')}>
+        <Button size="sm" variant="ghost" onClick={handleBack}>
           {__('Back')}
         </Button>
         <Link to={`/orders/${id}/edit`}>
diff --git a/admin-spa/src/routes/Orders/Edit.tsx b/admin-spa/src/routes/Orders/Edit.tsx
index e6b400f..61f57ce 100644
--- a/admin-spa/src/routes/Orders/Edit.tsx
+++ b/admin-spa/src/routes/Orders/Edit.tsx
@@ -60,11 +60,20 @@ export default function OrdersEdit() {
     }
   }, [order.meta]);
 
+  // Smart back handler: go back in history if available, otherwise fallback to order detail
+  const handleBack = () => {
+    if (window.history.state?.idx > 0) {
+      nav(-1); // Go back in history
+    } else {
+      nav(`/orders/${orderId}`); // Fallback to order detail
+    }
+  };
+
   // Set page header with back button and save button
   useEffect(() => {
     const actions = (
       <div className="flex gap-2">
-        <Button size="sm" variant="ghost" onClick={() => nav(`/orders/${orderId}`)}>
+        <Button size="sm" variant="ghost" onClick={handleBack}>
           {__('Back')}
         </Button>
         <Button 
diff --git a/admin-spa/src/routes/Products/Edit.tsx b/admin-spa/src/routes/Products/Edit.tsx
index d3a00fd..3dd7d08 100644
--- a/admin-spa/src/routes/Products/Edit.tsx
+++ b/admin-spa/src/routes/Products/Edit.tsx
@@ -66,11 +66,20 @@ export default function ProductEdit() {
     }
   }, [productQ.data?.meta]);
 
+  // Smart back handler: go back in history if available, otherwise fallback to /products
+  const handleBack = () => {
+    if (window.history.state?.idx > 0) {
+      navigate(-1); // Go back in history
+    } else {
+      navigate('/products'); // Fallback to products index
+    }
+  };
+
   // Set page header with back button and save button
   useEffect(() => {
     const actions = (
       <div className="flex gap-2">
-        <Button size="sm" variant="ghost" onClick={() => navigate('/products')}>
+        <Button size="sm" variant="ghost" onClick={handleBack}>
           {__('Back')}
         </Button>
         <Button