Reverted to commit a06d538170

2026-01-06 23:56:25 +00:00
parent 93e454a42e
commit fdf6b08c07
9 changed files with 1605 additions and 160 deletions
@@ -0,0 +1,367 @@
+import { useState, useEffect, useMemo } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  LineChart,
+  Line,
+  Legend,
+} from "recharts";
+import {
+  TrendingUp,
+  TrendingDown,
+  DollarSign,
+  ShoppingCart,
+  Users,
+  CreditCard,
+  Calendar,
+  RefreshCw,
+} from "lucide-react";
+import { CONFIG } from "@/config/payments";
+
+interface Order {
+  id: string;
+  amount: number;
+  status: string;
+  payment_method: string;
+  created_at: string;
+  customer_email: string;
+}
+
+const COLORS = ["hsl(142, 76%, 36%)", "hsl(38, 92%, 50%)", "hsl(0, 84%, 60%)", "hsl(240, 4%, 46%)"];
+
+const AnalyticsTab = () => {
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [timeRange, setTimeRange] = useState("30");
+
+  useEffect(() => {
+    fetchOrders();
+  }, [timeRange]);
+
+  const fetchOrders = async () => {
+    setLoading(true);
+    try {
+      const startDate = new Date();
+      startDate.setDate(startDate.getDate() - parseInt(timeRange));
+
+      const { data, error } = await supabase
+        .from("orders")
+        .select("id, amount, status, payment_method, created_at, customer_email")
+        .gte("created_at", startDate.toISOString())
+        .order("created_at", { ascending: true });
+
+      if (error) throw error;
+      setOrders(data || []);
+    } catch (error) {
+      console.error("Failed to fetch analytics data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const stats = useMemo(() => {
+    const verifiedOrders = orders.filter(o => o.status === "verified" || o.status === "completed");
+    const totalRevenue = verifiedOrders.reduce((sum, o) => sum + Number(o.amount), 0);
+    const avgOrderValue = verifiedOrders.length > 0 ? totalRevenue / verifiedOrders.length : 0;
+    const uniqueCustomers = new Set(orders.map(o => o.customer_email)).size;
+    const conversionRate = orders.length > 0 ? (verifiedOrders.length / orders.length) * 100 : 0;
+
+    return {
+      totalRevenue,
+      totalOrders: orders.length,
+      verifiedOrders: verifiedOrders.length,
+      avgOrderValue,
+      uniqueCustomers,
+      conversionRate,
+    };
+  }, [orders]);
+
+  const revenueByDay = useMemo(() => {
+    const grouped: Record<string, { date: string; revenue: number; orders: number }> = {};
+    
+    orders.forEach(order => {
+      if (order.status === "verified" || order.status === "completed") {
+        const date = new Date(order.created_at).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+        });
+        if (!grouped[date]) {
+          grouped[date] = { date, revenue: 0, orders: 0 };
+        }
+        grouped[date].revenue += Number(order.amount);
+        grouped[date].orders += 1;
+      }
+    });
+
+    return Object.values(grouped);
+  }, [orders]);
+
+  const paymentMethodData = useMemo(() => {
+    const grouped: Record<string, number> = {};
+    
+    orders.forEach(order => {
+      const method = order.payment_method || "unknown";
+      grouped[method] = (grouped[method] || 0) + 1;
+    });
+
+    return Object.entries(grouped).map(([name, value]) => ({
+      name: name.charAt(0).toUpperCase() + name.slice(1),
+      value,
+    }));
+  }, [orders]);
+
+  const statusData = useMemo(() => {
+    const grouped: Record<string, number> = {};
+    
+    orders.forEach(order => {
+      grouped[order.status] = (grouped[order.status] || 0) + 1;
+    });
+
+    return Object.entries(grouped).map(([name, value]) => ({
+      name: name.charAt(0).toUpperCase() + name.slice(1),
+      value,
+    }));
+  }, [orders]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-16 text-muted-foreground">
+        <RefreshCw className="h-5 w-5 animate-spin mr-2" />
+        Loading analytics...
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Time Range Selector */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold flex items-center gap-2">
+          <Calendar className="h-5 w-5" />
+          Analytics Overview
+        </h2>
+        <Select value={timeRange} onValueChange={setTimeRange}>
+          <SelectTrigger className="w-[160px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="7">Last 7 days</SelectItem>
+            <SelectItem value="30">Last 30 days</SelectItem>
+            <SelectItem value="90">Last 90 days</SelectItem>
+            <SelectItem value="365">Last year</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Key Metrics */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Total Revenue
+            </CardTitle>
+            <DollarSign className="h-4 w-4 text-primary" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-primary">
+              {CONFIG.store.currencySymbol}{stats.totalRevenue.toFixed(2)}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              From {stats.verifiedOrders} verified orders
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Total Orders
+            </CardTitle>
+            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.totalOrders}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.verifiedOrders} completed
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Avg. Order Value
+            </CardTitle>
+            <TrendingUp className="h-4 w-4 text-primary" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {CONFIG.store.currencySymbol}{stats.avgOrderValue.toFixed(2)}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              Per verified order
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Conversion Rate
+            </CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.conversionRate.toFixed(1)}%</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.uniqueCustomers} unique customers
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts */}
+      <div className="grid lg:grid-cols-2 gap-6">
+        {/* Revenue Over Time */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Revenue Over Time</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {revenueByDay.length === 0 ? (
+              <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+                No revenue data for this period
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height={300}>
+                <LineChart data={revenueByDay}>
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                  <XAxis
+                    dataKey="date"
+                    tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+                  />
+                  <YAxis
+                    tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+                    tickFormatter={(value) => `$${value}`}
+                  />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "hsl(var(--card))",
+                      border: "1px solid hsl(var(--border))",
+                      borderRadius: "8px",
+                    }}
+                    labelStyle={{ color: "hsl(var(--foreground))" }}
+                    formatter={(value: number) => [`$${value.toFixed(2)}`, "Revenue"]}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="revenue"
+                    stroke="hsl(142, 76%, 36%)"
+                    strokeWidth={2}
+                    dot={{ fill: "hsl(142, 76%, 36%)" }}
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Orders by Status */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Orders by Status</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {statusData.length === 0 ? (
+              <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+                No order data for this period
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height={300}>
+                <PieChart>
+                  <Pie
+                    data={statusData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={60}
+                    outerRadius={100}
+                    paddingAngle={2}
+                    dataKey="value"
+                    label={({ name, value }) => `${name}: ${value}`}
+                  >
+                    {statusData.map((_, index) => (
+                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "hsl(var(--card))",
+                      border: "1px solid hsl(var(--border))",
+                      borderRadius: "8px",
+                    }}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Payment Methods */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-base">Orders by Payment Method</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {paymentMethodData.length === 0 ? (
+              <div className="h-[250px] flex items-center justify-center text-muted-foreground">
+                No payment data for this period
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height={250}>
+                <BarChart data={paymentMethodData} layout="vertical">
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+                  <XAxis type="number" tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }} />
+                  <YAxis
+                    type="category"
+                    dataKey="name"
+                    tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+                    width={100}
+                  />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "hsl(var(--card))",
+                      border: "1px solid hsl(var(--border))",
+                      borderRadius: "8px",
+                    }}
+                    formatter={(value: number) => [value, "Orders"]}
+                  />
+                  <Bar dataKey="value" fill="hsl(142, 76%, 36%)" radius={[0, 4, 4, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default AnalyticsTab;