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