From f61a7e027655a36ebaf0ad2d1b78596614d31049 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Sun, 29 Jun 2025 03:05:42 +0100
Subject: [PATCH] Metrics

---
 app/dashboard/analytics/page.tsx            |  40 ++++
 components/analytics/AnalyticsDashboard.tsx | 248 ++++++++++++++++++++
 components/analytics/MetricsCard.tsx        |  66 ++++++
 3 files changed, 354 insertions(+)
 create mode 100644 app/dashboard/analytics/page.tsx
 create mode 100644 components/analytics/AnalyticsDashboard.tsx
 create mode 100644 components/analytics/MetricsCard.tsx

diff --git a/app/dashboard/analytics/page.tsx b/app/dashboard/analytics/page.tsx
new file mode 100644
index 0000000..bb94346
--- /dev/null
+++ b/app/dashboard/analytics/page.tsx
@@ -0,0 +1,40 @@
+import AnalyticsDashboard from "@/components/analytics/AnalyticsDashboard";
+import { fetchServer } from '@/lib/api';
+
+interface AnalyticsOverview {
+  orders: {
+    total: number;
+    completed: number;
+    pending: number;
+    completionRate: string;
+  };
+  revenue: {
+    total: number;
+    monthly: number;
+    weekly: number;
+    averageOrderValue: number;
+  };
+  products: {
+    total: number;
+  };
+  customers: {
+    unique: number;
+  };
+}
+
+export default async function AnalyticsPage() {
+  const analyticsData = await fetchServer<AnalyticsOverview>("/analytics/overview");
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-foreground">Analytics Dashboard</h1>
+        <p className="text-muted-foreground mt-2">
+          Comprehensive insights into your store performance, sales trends, and customer behavior.
+        </p>
+      </div>
+      
+      <AnalyticsDashboard initialData={analyticsData} />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/analytics/AnalyticsDashboard.tsx b/components/analytics/AnalyticsDashboard.tsx
new file mode 100644
index 0000000..a4968ec
--- /dev/null
+++ b/components/analytics/AnalyticsDashboard.tsx
@@ -0,0 +1,248 @@
+"use client"
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { 
+  TrendingUp, 
+  ShoppingCart, 
+  Users, 
+  Package, 
+  DollarSign, 
+  BarChart3,
+  PieChart,
+  Activity,
+  RefreshCw
+} from "lucide-react";
+import { clientFetch } from "@/lib/api";
+import { useToast } from "@/hooks/use-toast";
+import RevenueChart from "./RevenueChart";
+import ProductPerformanceChart from "./ProductPerformanceChart";
+import CustomerInsightsChart from "./CustomerInsightsChart";
+import OrderAnalyticsChart from "./OrderAnalyticsChart";
+import MetricsCard from "./MetricsCard";
+
+interface AnalyticsOverview {
+  orders: {
+    total: number;
+    completed: number;
+    pending: number;
+    completionRate: string;
+  };
+  revenue: {
+    total: number;
+    monthly: number;
+    weekly: number;
+    averageOrderValue: number;
+  };
+  products: {
+    total: number;
+  };
+  customers: {
+    unique: number;
+  };
+}
+
+interface AnalyticsDashboardProps {
+  initialData: AnalyticsOverview;
+}
+
+export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardProps) {
+  const [data, setData] = useState<AnalyticsOverview>(initialData);
+  const [isLoading, setIsLoading] = useState(false);
+  const [timeRange, setTimeRange] = useState('30');
+  const { toast } = useToast();
+
+  const refreshData = async () => {
+    try {
+      setIsLoading(true);
+      const newData = await clientFetch<AnalyticsOverview>("/analytics/overview");
+      setData(newData);
+      toast({
+        title: "Data refreshed",
+        description: "Analytics data has been updated successfully.",
+      });
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to refresh analytics data.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const metrics = [
+    {
+      title: "Total Revenue",
+      value: `$${data.revenue.total.toLocaleString()}`,
+      description: "All-time revenue",
+      icon: DollarSign,
+      trend: data.revenue.monthly > 0 ? "up" : "neutral",
+      trendValue: `$${data.revenue.monthly.toLocaleString()} this month`
+    },
+    {
+      title: "Total Orders",
+      value: data.orders.total.toLocaleString(),
+      description: "All-time orders",
+      icon: ShoppingCart,
+      trend: data.orders.completed > 0 ? "up" : "neutral",
+      trendValue: `${data.orders.completed} completed`
+    },
+    {
+      title: "Unique Customers",
+      value: data.customers.unique.toLocaleString(),
+      description: "Total customers",
+      icon: Users,
+      trend: "neutral",
+      trendValue: "Lifetime customers"
+    },
+    {
+      title: "Products",
+      value: data.products.total.toLocaleString(),
+      description: "Active products",
+      icon: Package,
+      trend: "neutral",
+      trendValue: "In your store"
+    }
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Header with refresh button */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-semibold">Performance Overview</h2>
+          <p className="text-muted-foreground">
+            Key metrics and insights about your store performance
+          </p>
+        </div>
+        <Button 
+          onClick={refreshData} 
+          disabled={isLoading}
+          variant="outline"
+          className="flex items-center gap-2"
+        >
+          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          Refresh Data
+        </Button>
+      </div>
+
+      {/* Key Metrics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {metrics.map((metric) => (
+          <MetricsCard key={metric.title} {...metric} />
+        ))}
+      </div>
+
+      {/* Completion Rate Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Activity className="h-5 w-5" />
+            Order Completion Rate
+          </CardTitle>
+          <CardDescription>
+            Percentage of orders that have been successfully completed
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <div className="text-3xl font-bold">
+              {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}%` }}
+                />
+              </div>
+            </div>
+            <Badge variant="secondary">
+              {data.orders.completed} / {data.orders.total}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Analytics Tabs */}
+      <Tabs defaultValue="revenue" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="revenue" className="flex items-center gap-2">
+            <TrendingUp className="h-4 w-4" />
+            Revenue
+          </TabsTrigger>
+          <TabsTrigger value="products" className="flex items-center gap-2">
+            <Package className="h-4 w-4" />
+            Products
+          </TabsTrigger>
+          <TabsTrigger value="customers" className="flex items-center gap-2">
+            <Users className="h-4 w-4" />
+            Customers
+          </TabsTrigger>
+          <TabsTrigger value="orders" className="flex items-center gap-2">
+            <BarChart3 className="h-4 w-4" />
+            Orders
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="revenue" className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold">Revenue Trends</h3>
+              <p className="text-muted-foreground">
+                Track your revenue performance over time
+              </p>
+            </div>
+            <Select value={timeRange} onValueChange={setTimeRange}>
+              <SelectTrigger className="w-32">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="7">7 days</SelectItem>
+                <SelectItem value="30">30 days</SelectItem>
+                <SelectItem value="90">90 days</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <RevenueChart timeRange={timeRange} />
+        </TabsContent>
+
+        <TabsContent value="products" className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Product Performance</h3>
+            <p className="text-muted-foreground">
+              Analyze which products are performing best
+            </p>
+          </div>
+          <ProductPerformanceChart />
+        </TabsContent>
+
+        <TabsContent value="customers" className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Customer Insights</h3>
+            <p className="text-muted-foreground">
+              Understand your customer base and behavior
+            </p>
+          </div>
+          <CustomerInsightsChart />
+        </TabsContent>
+
+        <TabsContent value="orders" className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold">Order Analytics</h3>
+            <p className="text-muted-foreground">
+              Detailed analysis of order patterns and status distribution
+            </p>
+          </div>
+          <OrderAnalyticsChart timeRange={timeRange} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/analytics/MetricsCard.tsx b/components/analytics/MetricsCard.tsx
new file mode 100644
index 0000000..a2c4f6b
--- /dev/null
+++ b/components/analytics/MetricsCard.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { LucideIcon } from "lucide-react";
+
+interface MetricsCardProps {
+  title: string;
+  value: string;
+  description: string;
+  icon: LucideIcon;
+  trend: "up" | "down" | "neutral";
+  trendValue: string;
+}
+
+export default function MetricsCard({ 
+  title, 
+  value, 
+  description, 
+  icon: Icon, 
+  trend, 
+  trendValue 
+}: MetricsCardProps) {
+  const getTrendIcon = () => {
+    switch (trend) {
+      case "up":
+        return <TrendingUp className="h-4 w-4 text-green-500" />;
+      case "down":
+        return <TrendingDown className="h-4 w-4 text-red-500" />;
+      default:
+        return <Minus className="h-4 w-4 text-gray-500" />;
+    }
+  };
+
+  const getTrendColor = () => {
+    switch (trend) {
+      case "up":
+        return "text-green-600";
+      case "down":
+        return "text-red-600";
+      default:
+        return "text-gray-600";
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {title}
+        </CardTitle>
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        <p className="text-xs text-muted-foreground mt-1">{description}</p>
+        <div className="flex items-center gap-1 mt-2">
+          {getTrendIcon()}
+          <span className={`text-xs ${getTrendColor()}`}>
+            {trendValue}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+} 
\ No newline at end of file