feat: Implement smart back navigation with fallback across all detail/edit pages

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!
This commit is contained in:
dwindown
2025-11-21 10:12:26 +07:00
parent bc4b64fd2f
commit c9e036217e
6 changed files with 60 additions and 6 deletions

View File

@@ -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