Metrics
This commit is contained in:
NotII
40
app/dashboard/analytics/page.tsx
Normal file
40
app/dashboard/analytics/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
248
components/analytics/AnalyticsDashboard.tsx
Normal file
248
components/analytics/AnalyticsDashboard.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
66
components/analytics/MetricsCard.tsx
Normal file
66
components/analytics/MetricsCard.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user