diff --git a/admin-spa/src/components/PageHeader.tsx b/admin-spa/src/components/PageHeader.tsx index a55b5ae..a4b0cf1 100644 --- a/admin-spa/src/components/PageHeader.tsx +++ b/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 ( -
+

{title}

diff --git a/admin-spa/src/routes/Dashboard/Coupons.tsx b/admin-spa/src/routes/Dashboard/Coupons.tsx index e27b3b4..69bf718 100644 --- a/admin-spa/src/routes/Dashboard/Coupons.tsx +++ b/admin-spa/src/routes/Dashboard/Coupons.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; import { Tag, DollarSign, TrendingUp, ShoppingCart } from 'lucide-react'; import { __ } from '@/lib/i18n'; @@ -12,11 +12,18 @@ import { ChartCard } from './components/ChartCard'; import { DataTable, Column } from './components/DataTable'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DUMMY_COUPONS_DATA, CouponsData, CouponPerformance } from './data/dummyCoupons'; +import { usePageHeader } from '@/contexts/PageHeaderContext'; export default function CouponsReport() { + const { setPageHeader, clearPageHeader } = usePageHeader(); const { period } = useDashboardPeriod(); const store = getStoreCurrency(); + useEffect(() => { + setPageHeader(__('Coupons')); + return () => clearPageHeader(); + }, [setPageHeader, clearPageHeader]); + // Fetch real data or use dummy data based on toggle const { data, isLoading, error, refetch } = useCouponsAnalytics(DUMMY_COUPONS_DATA); diff --git a/admin-spa/src/routes/Dashboard/Customers.tsx b/admin-spa/src/routes/Dashboard/Customers.tsx index 5046f84..1fa0c28 100644 --- a/admin-spa/src/routes/Dashboard/Customers.tsx +++ b/admin-spa/src/routes/Dashboard/Customers.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; import { Users, TrendingUp, DollarSign, ShoppingCart, UserPlus, UserCheck, Info } from 'lucide-react'; import { __ } from '@/lib/i18n'; @@ -12,11 +12,18 @@ import { ChartCard } from './components/ChartCard'; import { DataTable, Column } from './components/DataTable'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DUMMY_CUSTOMERS_DATA, CustomersData, TopCustomer } from './data/dummyCustomers'; +import { usePageHeader } from '@/contexts/PageHeaderContext'; export default function CustomersAnalytics() { + const { setPageHeader, clearPageHeader } = usePageHeader(); const { period } = useDashboardPeriod(); const store = getStoreCurrency(); + useEffect(() => { + setPageHeader(__('Customers')); + return () => clearPageHeader(); + }, [setPageHeader, clearPageHeader]); + // Fetch real data or use dummy data based on toggle const { data, isLoading, error, refetch } = useCustomersAnalytics(DUMMY_CUSTOMERS_DATA); diff --git a/admin-spa/src/routes/Dashboard/Orders.tsx b/admin-spa/src/routes/Dashboard/Orders.tsx index a0c3d98..6662519 100644 --- a/admin-spa/src/routes/Dashboard/Orders.tsx +++ b/admin-spa/src/routes/Dashboard/Orders.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo, useRef } from 'react'; +import React, { useState, useMemo, useRef, useEffect } from 'react'; import { BarChart, Bar, LineChart, Line, AreaChart, Area, ComposedChart, PieChart, Pie, Cell, Label, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; import { ShoppingCart, TrendingUp, Package, XCircle, DollarSign, CheckCircle, Clock } from 'lucide-react'; import { __ } from '@/lib/i18n'; @@ -12,13 +12,20 @@ import { ChartCard } from './components/ChartCard'; import { DataTable, Column } from './components/DataTable'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DUMMY_ORDERS_DATA, OrdersData } from './data/dummyOrders'; +import { usePageHeader } from '@/contexts/PageHeaderContext'; export default function OrdersAnalytics() { + const { setPageHeader, clearPageHeader } = usePageHeader(); const { period } = useDashboardPeriod(); const store = getStoreCurrency(); const [hoverIndex, setHoverIndex] = useState(undefined); const chartRef = useRef(null); + useEffect(() => { + setPageHeader(__('Orders')); + return () => clearPageHeader(); + }, [setPageHeader, clearPageHeader]); + // Fetch real data or use dummy data based on toggle const { data, isLoading, error, refetch } = useOrdersAnalytics(DUMMY_ORDERS_DATA); diff --git a/admin-spa/src/routes/Dashboard/Products.tsx b/admin-spa/src/routes/Dashboard/Products.tsx index 4132cf5..cc6aa42 100644 --- a/admin-spa/src/routes/Dashboard/Products.tsx +++ b/admin-spa/src/routes/Dashboard/Products.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import { Package, TrendingUp, DollarSign, AlertTriangle, XCircle } from 'lucide-react'; import { __ } from '@/lib/i18n'; import { formatMoney, getStoreCurrency } from '@/lib/currency'; @@ -12,11 +12,18 @@ import { DataTable, Column } from './components/DataTable'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { DUMMY_PRODUCTS_DATA, ProductsData, TopProduct, ProductByCategory, StockAnalysisProduct } from './data/dummyProducts'; +import { usePageHeader } from '@/contexts/PageHeaderContext'; export default function ProductsPerformance() { + const { setPageHeader, clearPageHeader } = usePageHeader(); const { period } = useDashboardPeriod(); const store = getStoreCurrency(); + useEffect(() => { + setPageHeader(__('Products')); + return () => clearPageHeader(); + }, [setPageHeader, clearPageHeader]); + // Fetch real data or use dummy data based on toggle const { data, isLoading, error, refetch } = useProductsAnalytics(DUMMY_PRODUCTS_DATA); diff --git a/admin-spa/src/routes/Dashboard/Revenue.tsx b/admin-spa/src/routes/Dashboard/Revenue.tsx index f0c1d1d..87db4e4 100644 --- a/admin-spa/src/routes/Dashboard/Revenue.tsx +++ b/admin-spa/src/routes/Dashboard/Revenue.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; import { DollarSign, TrendingUp, TrendingDown, CreditCard, Truck, RefreshCw } from 'lucide-react'; import { __ } from '@/lib/i18n'; @@ -13,12 +13,19 @@ import { DataTable, Column } from './components/DataTable'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DUMMY_REVENUE_DATA, RevenueData, RevenueByProduct, RevenueByCategory, RevenueByPaymentMethod, RevenueByShippingMethod } from './data/dummyRevenue'; +import { usePageHeader } from '@/contexts/PageHeaderContext'; export default function RevenueAnalytics() { + const { setPageHeader, clearPageHeader } = usePageHeader(); const { period } = useDashboardPeriod(); const [granularity, setGranularity] = useState<'day' | 'week' | 'month'>('day'); const store = getStoreCurrency(); + useEffect(() => { + setPageHeader(__('Revenue')); + return () => clearPageHeader(); + }, [setPageHeader, clearPageHeader]); + // Fetch real data or use dummy data based on toggle const { data, isLoading, error, refetch } = useRevenueAnalytics(DUMMY_REVENUE_DATA, granularity); diff --git a/admin-spa/src/routes/Dashboard/Taxes.tsx b/admin-spa/src/routes/Dashboard/Taxes.tsx index 4c3c9b1..96cac63 100644 --- a/admin-spa/src/routes/Dashboard/Taxes.tsx +++ b/admin-spa/src/routes/Dashboard/Taxes.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; import { DollarSign, FileText, ShoppingCart, TrendingUp } from 'lucide-react'; import { __ } from '@/lib/i18n'; @@ -12,11 +12,18 @@ import { ChartCard } from './components/ChartCard'; import { DataTable, Column } from './components/DataTable'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DUMMY_TAXES_DATA, TaxesData, TaxByRate, TaxByLocation } from './data/dummyTaxes'; +import { usePageHeader } from '@/contexts/PageHeaderContext'; export default function TaxesReport() { + const { setPageHeader, clearPageHeader } = usePageHeader(); const { period } = useDashboardPeriod(); const store = getStoreCurrency(); + useEffect(() => { + setPageHeader(__('Taxes')); + return () => clearPageHeader(); + }, [setPageHeader, clearPageHeader]); + // Fetch real data or use dummy data based on toggle const { data, isLoading, error, refetch } = useTaxesAnalytics(DUMMY_TAXES_DATA);