eek
This commit is contained in:
NotII
296
components/analytics/OrderAnalyticsChart.tsx
Normal file
296
components/analytics/OrderAnalyticsChart.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { clientFetch } from "@/lib/api";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle } from "lucide-react";
|
||||
|
||||
interface OrderAnalytics {
|
||||
statusDistribution: Array<{
|
||||
_id: string;
|
||||
count: number;
|
||||
}>;
|
||||
dailyOrders: Array<{
|
||||
_id: {
|
||||
year: number;
|
||||
month: number;
|
||||
day: number;
|
||||
};
|
||||
orders: number;
|
||||
revenue: number;
|
||||
}>;
|
||||
averageProcessingDays: number;
|
||||
}
|
||||
|
||||
interface OrderAnalyticsChartProps {
|
||||
timeRange: string;
|
||||
}
|
||||
|
||||
export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartProps) {
|
||||
const [data, setData] = useState<OrderAnalytics | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOrderData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const response = await clientFetch<OrderAnalytics>(`/analytics/order-analytics?period=${timeRange}`);
|
||||
setData(response);
|
||||
} catch (err) {
|
||||
console.error('Error fetching order analytics:', err);
|
||||
setError('Failed to load order data');
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load order analytics data.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrderData();
|
||||
}, [timeRange, toast]);
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
case 'acknowledged':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'paid':
|
||||
case 'shipped':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
case 'unpaid':
|
||||
case 'confirming':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'cancelled':
|
||||
return 'bg-red-100 text-red-800';
|
||||
case 'disputed':
|
||||
return 'bg-orange-100 text-orange-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
case 'acknowledged':
|
||||
return <CheckCircle className="h-4 w-4" />;
|
||||
case 'paid':
|
||||
case 'shipped':
|
||||
return <Clock className="h-4 w-4" />;
|
||||
case 'unpaid':
|
||||
case 'confirming':
|
||||
return <AlertCircle className="h-4 w-4" />;
|
||||
case 'cancelled':
|
||||
return <XCircle className="h-4 w-4" />;
|
||||
default:
|
||||
return <BarChart3 className="h-4 w-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'Completed';
|
||||
case 'acknowledged':
|
||||
return 'Acknowledged';
|
||||
case 'paid':
|
||||
return 'Paid';
|
||||
case 'shipped':
|
||||
return 'Shipped';
|
||||
case 'unpaid':
|
||||
return 'Unpaid';
|
||||
case 'confirming':
|
||||
return 'Confirming';
|
||||
case 'cancelled':
|
||||
return 'Cancelled';
|
||||
case 'disputed':
|
||||
return 'Disputed';
|
||||
default:
|
||||
return status.charAt(0).toUpperCase() + status.slice(1);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
Order Analytics
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Order status distribution and trends
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !data) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
Order Analytics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-8">
|
||||
<BarChart3 className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||
<p className="text-muted-foreground">Failed to load order data</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const totalOrders = data.statusDistribution.reduce((sum, item) => sum + item.count, 0);
|
||||
const totalRevenue = data.dailyOrders.reduce((sum, item) => sum + item.revenue, 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Order Status Distribution */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Order Status Distribution</CardTitle>
|
||||
<CardDescription>
|
||||
Breakdown of orders by current status
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{data.statusDistribution.map((status) => {
|
||||
const percentage = totalOrders > 0 ? (status.count / totalOrders * 100).toFixed(1) : '0';
|
||||
const Icon = getStatusIcon(status._id);
|
||||
|
||||
return (
|
||||
<div key={status._id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-full ${getStatusColor(status._id)}`}>
|
||||
{Icon}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{getStatusLabel(status._id)}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{status.count} orders
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold">{percentage}%</div>
|
||||
<div className="text-sm text-muted-foreground">of total</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Daily Order Trends */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Daily Order Trends</CardTitle>
|
||||
<CardDescription>
|
||||
Orders and revenue over the selected time period
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data.dailyOrders.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<BarChart3 className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||
<p className="text-muted-foreground">No order data available for this period</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Summary Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{data.dailyOrders.length}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Days with Orders</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{totalOrders}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Total Orders</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">
|
||||
${totalRevenue.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Total Revenue</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
<div className="h-64 flex items-end justify-between gap-1">
|
||||
{data.dailyOrders.map((item, index) => {
|
||||
const maxOrders = Math.max(...data.dailyOrders.map(d => d.orders));
|
||||
const height = maxOrders > 0 ? (item.orders / maxOrders) * 100 : 0;
|
||||
const date = new Date(item._id.year, item._id.month - 1, item._id.day);
|
||||
const dateLabel = date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
|
||||
return (
|
||||
<div key={index} className="flex-1 flex flex-col items-center">
|
||||
<div
|
||||
className="w-full bg-primary/20 hover:bg-primary/30 transition-colors rounded-t"
|
||||
style={{ height: `${height}%` }}
|
||||
title={`${dateLabel}: ${item.orders} orders, $${item.revenue.toFixed(2)} revenue`}
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground mt-1 rotate-45 origin-left">
|
||||
{dateLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Processing Time */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="h-5 w-5" />
|
||||
Order Processing Time
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Average time to complete orders
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
{data.averageProcessingDays.toFixed(1)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Average Days to Complete</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user