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>
 

components/analytics/RevenueChart.tsx

@@ -12,6 +12,7 @@ import { ChartSkeleton } from './SkeletonLoaders';
 
 interface RevenueChartProps {
   timeRange: string;
+  hideNumbers?: boolean;
 }
 
 interface ChartDataPoint {
@@ -21,7 +22,7 @@ interface ChartDataPoint {
   formattedDate: string;
 }
 
-export default function RevenueChart({ timeRange }: RevenueChartProps) {
+export default function RevenueChart({ timeRange, hideNumbers = false }: RevenueChartProps) {
   const [data, setData] = useState<RevenueData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -75,6 +76,19 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
   const totalOrders = safeData.reduce((sum, item) => sum + (item.orders || 0), 0);
   const averageRevenue = safeData.length > 0 ? totalRevenue / safeData.length : 0;
 
+  // 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
+    return '***';
+  };
+
   // Custom tooltip for the chart
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {
@@ -83,10 +97,10 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
         <div className="bg-white p-3 border border-gray-200 rounded-lg shadow-lg">
           <p className="text-sm font-medium text-gray-900">{data.formattedDate}</p>
           <p className="text-sm text-blue-600">
-            Revenue: <span className="font-semibold">{formatGBP(data.revenue)}</span>
+            Revenue: <span className="font-semibold">{hideNumbers ? '£***' : formatGBP(data.revenue)}</span>
           </p>
           <p className="text-sm text-green-600">
-            Orders: <span className="font-semibold">{data.orders}</span>
+            Orders: <span className="font-semibold">{hideNumbers ? '***' : data.orders}</span>
           </p>
         </div>
       );
@@ -173,7 +187,7 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
                 />
                 <YAxis 
                   tick={{ fontSize: 12 }}
-                  tickFormatter={(value) => `£${(value / 1000).toFixed(0)}k`}
+                  tickFormatter={(value) => hideNumbers ? '***' : `£${(value / 1000).toFixed(0)}k`}
                 />
                 <Tooltip content={<CustomTooltip />} />
                 <Bar 
@@ -191,19 +205,19 @@ export default function RevenueChart({ timeRange }: RevenueChartProps) {
           <div className="grid grid-cols-3 gap-4 pt-4 border-t">
             <div className="text-center">
               <div className="text-2xl font-bold text-green-600">
-                {formatGBP(totalRevenue)}
+                {maskValue(formatGBP(totalRevenue))}
               </div>
               <div className="text-sm text-muted-foreground">Total Revenue</div>
             </div>
             <div className="text-center">
               <div className="text-2xl font-bold text-blue-600">
-                {totalOrders}
+                {maskValue(totalOrders.toString())}
               </div>
               <div className="text-sm text-muted-foreground">Total Orders</div>
             </div>
             <div className="text-center">
               <div className="text-2xl font-bold text-purple-600">
-                {formatGBP(averageRevenue)}
+                {maskValue(formatGBP(averageRevenue))}
               </div>
               <div className="text-sm text-muted-foreground">Avg Daily Revenue</div>
             </div>

components/notifications/UnifiedNotifications.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -13,264 +13,21 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { clientFetch } from "@/lib/api";
-import { toast } from "sonner";
-import { getCookie } from "@/lib/api";
-import axios from "axios";
-import { cacheUtils } from '@/lib/api-client';
-
-interface Order {
-  _id: string;
-  orderId: string;
-  status: string;
-  totalPrice: number;
-  orderDate: string;
-  underpaid?: boolean;
-  underpaymentAmount?: number;
-}
-
-interface ChatMessage {
-  chatId: string;
-  buyerId: string;
-  messageCount: number;
-}
-
-interface UnreadCounts {
-  totalUnread: number;
-  chatCounts: Record<string, number>;
-}
+import { useNotifications } from "@/lib/notification-context";
 
 export default function UnifiedNotifications() {
   const router = useRouter();
-  
-  // Chat notification state
-  const [unreadCounts, setUnreadCounts] = useState<UnreadCounts>({ totalUnread: 0, chatCounts: {} });
-  const [previousUnreadTotal, setPreviousUnreadTotal] = useState<number>(0);
-  const [chatMetadata, setChatMetadata] = useState<Record<string, { buyerId: string }>>({});
-  
-  // Order notification state
-  const [newOrders, setNewOrders] = useState<Order[]>([]);
-  const seenOrderIds = useRef<Set<string>>(new Set());
-  const isInitialOrdersFetch = useRef(true);
-  
-  // Shared state
-  const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<string>("all");
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const vendorIdRef = useRef<string | null>(null);
-
-  // Total notifications count
-  const totalNotifications = unreadCounts.totalUnread + newOrders.length;
   
-  // Initialize audio
-  useEffect(() => {
-    audioRef.current = new Audio('/notification.mp3');
-    
-    audioRef.current.addEventListener('error', () => {
-      audioRef.current = null;
-    });
-    
-    return () => {
-      if (audioRef.current) {
-        audioRef.current = null;
-      }
-    };
-  }, []);
-
-  // Get vendor ID from JWT token
-  const getVendorIdFromToken = () => {
-    if (vendorIdRef.current) {
-      return vendorIdRef.current;
-    }
-
-    const authToken = getCookie("Authorization") || "";
-    
-    if (!authToken) {
-      throw new Error("No auth token found");
-    }
-    
-    const tokenParts = authToken.split(".");
-    if (tokenParts.length !== 3) {
-      throw new Error("Invalid token format");
-    }
-    
-    const payload = JSON.parse(atob(tokenParts[1]));
-    const vendorId = payload.id;
-    
-    if (!vendorId) {
-      throw new Error("Vendor ID not found in token");
-    }
-
-    vendorIdRef.current = vendorId;
-    return vendorId;
-  };
-  
-  // Function to play notification sound
-  const playNotificationSound = () => {
-    if (audioRef.current) {
-      audioRef.current.currentTime = 0;
-      audioRef.current.play().catch(err => {
-        console.log('Error playing sound:', err);
-        // Fallback beep if audio file fails
-        try {
-          const context = new (window.AudioContext || (window as any).webkitAudioContext)();
-          const oscillator = context.createOscillator();
-          oscillator.type = 'sine';
-          oscillator.frequency.setValueAtTime(800, context.currentTime);
-          oscillator.connect(context.destination);
-          oscillator.start();
-          oscillator.stop(context.currentTime + 0.2);
-        } catch (e) {
-          console.error('Could not play fallback audio', e);
-        }
-      });
-    }
-  };
-
-  // Check for new paid orders
-  useEffect(() => {
-    // Only run this on dashboard pages
-    if (typeof window === 'undefined' || !window.location.pathname.includes("/dashboard")) return;
-
-    const checkForNewOrders = async () => {
-      try {
-        // Get orders from the last 24 hours with a more efficient query
-        const yesterday = new Date();
-        yesterday.setDate(yesterday.getDate() - 1);
-        const timestamp = yesterday.toISOString();
-        
-        const orderData = await clientFetch(`/orders?status=paid&limit=10&orderDate[gte]=${timestamp}`);
-        const orders: Order[] = orderData.orders || [];
-
-        // Filter out orders that are still showing as underpaid (cache issue)
-        const validPaidOrders = orders.filter(order => {
-          // Only include orders that are actually fully paid (not underpaid)
-          return order.status === 'paid' && 
-                 (!order.underpaid || order.underpaymentAmount === 0);
-        });
-
-        // If this is the first fetch, just store the orders without notifications
-        if (isInitialOrdersFetch.current) {
-          validPaidOrders.forEach(order => seenOrderIds.current.add(order._id));
-          isInitialOrdersFetch.current = false;
-          return;
-        }
-
-        // Check for new paid orders that haven't been seen before
-        const latestNewOrders = validPaidOrders.filter(order => !seenOrderIds.current.has(order._id));
-        
-        // Show notifications for new orders
-        if (latestNewOrders.length > 0) {
-          // Update the seen orders set
-          latestNewOrders.forEach(order => seenOrderIds.current.add(order._id));
-          
-          // Show a toast notification for each new order
-          latestNewOrders.forEach(order => {
-            toast.success(
-              <div className="flex flex-col">
-                <p className="font-semibold">New Paid Order!</p>
-                <p className="text-sm">Order #{order.orderId}</p>
-                <p className="text-sm font-semibold">£{order.totalPrice.toFixed(2)}</p>
-              </div>,
-              {
-                duration: 8000,
-                icon: <Package className="h-5 w-5" />,
-                action: {
-                  label: "View",
-                  onClick: () => window.open(`/dashboard/orders/${order._id}`, "_blank")
-                }
-              }
-            );
-          });
-          
-          // Play notification sound
-          playNotificationSound();
-          
-          // Update the state with new orders for the dropdown
-          setNewOrders(prev => [...latestNewOrders, ...prev].slice(0, 10));
-          
-          // Invalidate order cache to ensure all components refresh
-          cacheUtils.invalidateOrderData();
-        }
-      } catch (error) {
-        console.error("Error checking for new orders:", error);
-      }
-    };
-
-    // Check for new orders every minute
-    const orderInterval = setInterval(checkForNewOrders, 60000);
-    
-    // Initial check for orders
-    checkForNewOrders();
-    
-    return () => {
-      clearInterval(orderInterval);
-    };
-  }, []);
-
-  // Fetch unread chat counts
-  useEffect(() => {
-    // Only run this on dashboard pages
-    if (typeof window === 'undefined' || !window.location.pathname.includes("/dashboard")) return;
-    
-    const fetchUnreadCounts = async () => {
-      try {
-        // Get vendor ID from token
-        const vendorId = getVendorIdFromToken();
-        
-        // Use clientFetch which will properly route through Next.js API rewrites
-        const response = await clientFetch(`/chats/vendor/${vendorId}/unread`);
-        
-        // Check if there are new notifications and play sound if needed
-        if (!loading && response.totalUnread > previousUnreadTotal) {
-          playNotificationSound();
-        }
-        
-        // Update chat state - note that clientFetch already parses the JSON response
-        setUnreadCounts(response);
-        setPreviousUnreadTotal(response.totalUnread);
-        
-        if (response.totalUnread > 0) {
-          const chatIds = Object.keys(response.chatCounts);
-          
-          if (chatIds.length > 0) {
-            // Create a simplified metadata object with just needed info
-            const metadata: Record<string, { buyerId: string }> = {};
-            
-            // Fetch each chat to get buyer IDs
-            await Promise.all(
-              chatIds.map(async (chatId) => {
-                try {
-                  // Use markAsRead=false to ensure we don't mark messages as read
-                  const chatResponse = await clientFetch(`/chats/${chatId}?markAsRead=false`);
-                  metadata[chatId] = {
-                    buyerId: chatResponse.buyerId,
-                  };
-                } catch (error) {
-                  console.error(`Error fetching chat ${chatId}:`, error);
-                }
-              })
-            );
-            
-            setChatMetadata(metadata);
-          }
-        }
-        
-        setLoading(false);
-      } catch (error) {
-        console.error("Error fetching unread counts:", error);
-        setLoading(false);
-      }
-    };
-    
-    // Initial fetch
-    fetchUnreadCounts();
-    
-    // Set polling interval (every 10 seconds for more responsive chat notifications)
-    const chatInterval = setInterval(fetchUnreadCounts, 10000);
-    
-    return () => clearInterval(chatInterval);
-  }, [loading, previousUnreadTotal]);
+  // Get notification state from context
+  const {
+    unreadCounts,
+    chatMetadata,
+    newOrders,
+    clearOrderNotifications,
+    totalNotifications,
+    loading,
+  } = useNotifications();
 
   // Navigation handlers
   const handleChatClick = (chatId: string) => {
@@ -281,11 +38,6 @@ export default function UnifiedNotifications() {
     router.push(`/dashboard/orders/${orderId}`);
   };
   
-  // Clear notification handlers
-  const clearOrderNotifications = () => {
-    setNewOrders([]);
-  };
-  
   // Format the price as currency
   const formatPrice = (price: number) => {
     return `£${price.toFixed(2)}`;