Add notification context and privacy toggle for analytics

Introduces a NotificationProvider context to centralize notification logic and state, refactoring UnifiedNotifications to use this context. Adds a privacy toggle to AnalyticsDashboard and RevenueChart to allow hiding sensitive numbers. Updates layout to wrap the app with NotificationProvider.

components/analytics/AnalyticsDashboard.tsx

@@ -15,7 +15,9 @@ import {
   BarChart3,
   PieChart,
   Activity,
-  RefreshCw
+  RefreshCw,
+  Eye,
+  EyeOff
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import MetricsCard from "./MetricsCard";
@@ -70,8 +72,27 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
   const [data, setData] = useState<AnalyticsOverview>(initialData);
   const [isLoading, setIsLoading] = useState(false);
   const [timeRange, setTimeRange] = useState('30');
+  const [hideNumbers, setHideNumbers] = useState(false);
   const { toast } = useToast();
 
+  // Function to mask sensitive numbers
+  const maskValue = (value: string): string => {
+    if (!hideNumbers) return value;
+    
+    // For currency values (£X.XX), show £***
+    if (value.includes('£')) {
+      return '£***';
+    }
+    
+    // For regular numbers, replace with asterisks maintaining similar length
+    if (value.match(/^\d/)) {
+      const numLength = value.replace(/[,\.]/g, '').length;
+      return '*'.repeat(Math.min(numLength, 4));
+    }
+    
+    return value;
+  };
+
   const refreshData = async () => {
     try {
       setIsLoading(true);
@@ -95,23 +116,23 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
   const metrics = [
     {
       title: "Total Revenue",
-      value: formatGBP(data.revenue.total),
+      value: maskValue(formatGBP(data.revenue.total)),
       description: "All-time revenue",
       icon: DollarSign,
       trend: data.revenue.monthly > 0 ? "up" as const : "neutral" as const,
-      trendValue: `${formatGBP(data.revenue.monthly)} this month`
+      trendValue: hideNumbers ? "Hidden" : `${formatGBP(data.revenue.monthly)} this month`
     },
     {
       title: "Total Orders",
-      value: data.orders.total.toLocaleString(),
+      value: maskValue(data.orders.total.toLocaleString()),
       description: "All-time orders",
       icon: ShoppingCart,
       trend: data.orders.completed > 0 ? "up" as const : "neutral" as const,
-      trendValue: `${data.orders.completed} completed`
+      trendValue: hideNumbers ? "Hidden" : `${data.orders.completed} completed`
     },
     {
       title: "Unique Customers",
-      value: data.customers.unique.toLocaleString(),
+      value: maskValue(data.customers.unique.toLocaleString()),
       description: "Total customers",
       icon: Users,
       trend: "neutral" as const,
@@ -119,7 +140,7 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
     },
     {
       title: "Products",
-      value: data.products.total.toLocaleString(),
+      value: maskValue(data.products.total.toLocaleString()),
       description: "Active products",
       icon: Package,
       trend: "neutral" as const,
@@ -129,6 +150,46 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
 
   return (
     <div className="space-y-6">
+      {/* Header with Privacy Toggle */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight">Analytics Dashboard</h2>
+          <p className="text-muted-foreground">
+            Overview of your store's performance and metrics.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setHideNumbers(!hideNumbers)}
+            className="flex items-center gap-2"
+          >
+            {hideNumbers ? (
+              <>
+                <EyeOff className="h-4 w-4" />
+                Show Numbers
+              </>
+            ) : (
+              <>
+                <Eye className="h-4 w-4" />
+                Hide Numbers
+              </>
+            )}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={refreshData}
+            disabled={isLoading}
+            className="flex items-center gap-2"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+            Refresh
+          </Button>
+        </div>
+      </div>
+
       {/* Key Metrics Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {isLoading ? (
@@ -165,18 +226,18 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
           ) : (
             <div className="flex items-center gap-4">
               <div className="text-3xl font-bold">
-                {data.orders.completionRate}%
+                {hideNumbers ? "**%" : `${data.orders.completionRate}%`}
               </div>
               <div className="flex-1">
                 <div className="w-full bg-secondary rounded-full h-2">
                   <div 
                     className="bg-primary h-2 rounded-full transition-all duration-300"
-                    style={{ width: `${data.orders.completionRate}%` }}
+                    style={{ width: hideNumbers ? "0%" : `${data.orders.completionRate}%` }}
                   />
                 </div>
               </div>
               <Badge variant="secondary">
-                {data.orders.completed} / {data.orders.total}
+                {hideNumbers ? "** / **" : `${data.orders.completed} / ${data.orders.total}`}
               </Badge>
             </div>
           )}
@@ -186,7 +247,7 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
       {/* Time Period Selector */}
       <div className="flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
         <div>
-          <h3 className="text-lg font-semibold">Time period:</h3>
+          <h3 className="text-lg font-semibold">Time Period</h3>
           <p className="text-sm text-muted-foreground">
             Revenue and Orders tabs use time filtering. Products and Customers show all-time data.
           </p>
@@ -227,7 +288,7 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
 
           <TabsContent value="revenue" className="space-y-6">
             <Suspense fallback={<ChartSkeleton />}>
-              <RevenueChart timeRange={timeRange} />
+              <RevenueChart timeRange={timeRange} hideNumbers={hideNumbers} />
             </Suspense>
           </TabsContent>