feat: Comprehensive contextual headers for all pages

Applied "bigger picture" thinking - added contextual headers to ALL submenu pages consistently.

Problem: Only some pages had headers, creating inconsistent UX

Issues Fixed:

1. Dashboard Submenu Pages - All Now Have Headers
   Before: Only Overview had header
   After: All 6 pages have headers (Revenue, Orders, Products, Customers, Coupons, Taxes)

2. Settings Pages Desktop - Show Headers (Except Payments)
   Before: PageHeader was md:hidden on all pages
   After: Shows on desktop for Settings pages, hidden only for Payments (special case)

Implementation:
- Added usePageHeader to 6 Dashboard submenu pages
- Modified PageHeader to show on desktop by default
- Auto-detect Payments page and hide header there

Result:
- ALL Dashboard pages have contextual headers
- ALL Settings pages have contextual headers on desktop
- Payments page special case handled
- Consistent UX across entire app
- No more bald pages!

Files Modified: 6 Dashboard pages + PageHeader.tsx

admin-spa/src/components/PageHeader.tsx

@@ -1,20 +1,26 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 interface PageHeaderProps {
   fullscreen?: boolean;
+  hideOnDesktop?: boolean;
 }
 
-export function PageHeader({ fullscreen = false }: PageHeaderProps) {
+export function PageHeader({ fullscreen = false, hideOnDesktop = false }: PageHeaderProps) {
   const { title, action } = usePageHeader();
+  const location = useLocation();
 
   if (!title) return null;
 
+  // Special case: Payments page should hide header on desktop (has its own layout)
+  const isPaymentsPage = location.pathname.startsWith('/settings/payments');
+  const shouldHideOnDesktop = hideOnDesktop || isPaymentsPage;
+
   // 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 (
-    <div className="sticky top-0 z-20 border-b bg-background md:hidden">
+    <div className={`sticky top-0 z-20 border-b bg-background ${shouldHideOnDesktop ? '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>