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.
2025-07-28 22:50:55 +02:00
parent 2452a3c5f6
commit 48cfd45fb1
6 changed files with 460 additions and 287 deletions
--- a/components/analytics/AnalyticsDashboard.tsx
+++ b/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>

--- a/components/analytics/RevenueChart.tsx
+++ b/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>