0dace90597
Implemented intelligent header rules based on user feedback.
Problem Analysis:
1. Dashboard submenu tabs already show page names (Overview, Revenue, Orders...)
2. Showing "Orders" header is ambiguous (Analytics or Management?)
3. Wasted vertical space for redundant information
4. FAB already handles actions on management pages
Solution: Headers ONLY When They Add Value
Rules Implemented:
1. Dashboard Pages: NO HEADERS
- Submenu tabs are sufficient
- Saves vertical space
- No ambiguity
Before:
Dashboard → Overview = "Dashboard" header (redundant!)
Dashboard → Orders = "Orders" header (confusing!)
After:
Dashboard → Overview = No header (tabs show "Overview")
Dashboard → Orders = No header (tabs show "Orders")
2. Settings Pages: HEADERS ONLY WITH ACTIONS
- Store Details + [Save] = Show header ✓
- Payments + [Refresh] = Show header ✓
- Pages without actions = No header (save space)
Logic: If there is an action button, we need a place to put it → header
If no action button, header is just wasting space → remove it
3. Management Pages: NO HEADERS
- FAB handles actions ([+ Add Order])
- No need for redundant header with action button
4. Payments Exception: REMOVED
- Treat Payments like any other settings page
- Has action (Refresh) = show header
- Consistent with other pages
Implementation:
Dashboard Pages (7 files):
- Removed usePageHeader hook
- Removed useEffect for setting header
- Removed unused imports (useEffect, usePageHeader)
- Result: Clean, no headers, tabs are enough
PageHeader Component:
- Removed Payments special case detection
- Removed useLocation import
- Simplified logic: hideOnDesktop prop only
SettingsLayout Component:
- Changed logic: Only set header when onSave OR action exists
- If no action: clearPageHeader() instead of setPageHeader(title)
- Result: Headers only appear when needed
Benefits:
✅ Saves vertical space (no redundant headers)
✅ No ambiguity (Dashboard Orders vs Orders Management)
✅ Consistent logic (action = header, no action = no header)
✅ Cleaner UI (less visual clutter)
✅ FAB handles management page actions
Files Modified:
- Dashboard/index.tsx (Overview)
- Dashboard/Revenue.tsx
- Dashboard/Orders.tsx
- Dashboard/Products.tsx
- Dashboard/Customers.tsx
- Dashboard/Coupons.tsx
- Dashboard/Taxes.tsx
- PageHeader.tsx
- SettingsLayout.tsx
Result: Smart headers that only appear when they add value! 🎯
28 lines
961 B
TypeScript
28 lines
961 B
TypeScript
import React from 'react';
|
|
import { usePageHeader } from '@/contexts/PageHeaderContext';
|
|
|
|
interface PageHeaderProps {
|
|
fullscreen?: boolean;
|
|
hideOnDesktop?: boolean;
|
|
}
|
|
|
|
export function PageHeader({ fullscreen = false, hideOnDesktop = false }: PageHeaderProps) {
|
|
const { title, action } = usePageHeader();
|
|
|
|
if (!title) return null;
|
|
|
|
// PageHeader is now ABOVE submenu in DOM order
|
|
// z-20 ensures it stays on top when both are sticky
|
|
// Only hide on desktop if explicitly requested (for mobile-only headers)
|
|
return (
|
|
<div className={`sticky top-0 z-20 border-b bg-background ${hideOnDesktop ? 'md:hidden' : ''}`}>
|
|
<div className="w-full max-w-5xl mx-auto px-4 py-3 flex items-center justify-between min-w-0">
|
|
<div className="min-w-0 flex-1">
|
|
<h1 className="text-lg font-semibold truncate">{title}</h1>
|
|
</div>
|
|
{action && <div className="flex-shrink-0 ml-4">{action}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|