Changes
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,367 +0,0 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user