diff --git a/admin-spa/src/components/PageHeader.tsx b/admin-spa/src/components/PageHeader.tsx
index a41b8a6..a55b5ae 100644
--- a/admin-spa/src/components/PageHeader.tsx
+++ b/admin-spa/src/components/PageHeader.tsx
@@ -12,8 +12,9 @@ export function PageHeader({ fullscreen = false }: PageHeaderProps) {
// PageHeader is now ABOVE submenu in DOM order
// z-20 ensures it stays on top when both are sticky
+ // Mobile-only: hidden on desktop (md:hidden)
return (
-
+
{title}
diff --git a/admin-spa/src/components/ui/button.tsx b/admin-spa/src/components/ui/button.tsx
index 65d4fcd..1e1144e 100644
--- a/admin-spa/src/components/ui/button.tsx
+++ b/admin-spa/src/components/ui/button.tsx
@@ -45,7 +45,7 @@ const Button = React.forwardRef
(
const Comp = asChild ? Slot : "button"
return (
diff --git a/admin-spa/src/routes/Dashboard/index.tsx b/admin-spa/src/routes/Dashboard/index.tsx
index 9829de5..09d3865 100644
--- a/admin-spa/src/routes/Dashboard/index.tsx
+++ b/admin-spa/src/routes/Dashboard/index.tsx
@@ -12,6 +12,7 @@ import { useOverviewAnalytics } from '@/hooks/useAnalytics';
import { ErrorCard } from '@/components/ErrorCard';
import { getPageLoadErrorMessage } from '@/lib/errorHandling';
import { useFABConfig } from '@/hooks/useFABConfig';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
// Dummy data for visualization
const DUMMY_DATA = {
@@ -160,12 +161,19 @@ function MetricCard({ title, value, change, icon: Icon, format = 'number', perio
export default function Dashboard() {
useFABConfig('dashboard'); // Add FAB for quick actions
+ const { setPageHeader, clearPageHeader } = usePageHeader();
const { period } = useDashboardPeriod();
const store = getStoreCurrency();
const [hoverIndex, setHoverIndex] = useState(undefined);
const [chartMetric, setChartMetric] = useState<'both' | 'revenue' | 'orders'>('both');
const chartRef = useRef(null);
+ // Set contextual header
+ useEffect(() => {
+ setPageHeader(__('Dashboard'));
+ return () => clearPageHeader();
+ }, [setPageHeader, clearPageHeader]);
+
// Fetch real data or use dummy data based on toggle
const { data, isLoading, error, refetch } = useOverviewAnalytics(DUMMY_DATA);
diff --git a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
index b2208ce..ab6e095 100644
--- a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
+++ b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
@@ -55,12 +55,16 @@ export function SettingsLayout({
)}
);
+ } else if (action) {
+ // If there's a custom action, use it
+ setPageHeader(title, action);
} else {
- clearPageHeader();
+ // Always set the title, even without action
+ setPageHeader(title);
}
return () => clearPageHeader();
- }, [title, onSave, isSaving, isLoading, saveLabel]);
+ }, [title, onSave, isSaving, isLoading, saveLabel, action, setPageHeader, clearPageHeader]);
return (