eek
This commit is contained in:
NotII
268
components/analytics/CustomerInsightsChart.tsx
Normal file
268
components/analytics/CustomerInsightsChart.tsx
Normal file
@@ -0,0 +1,268 @@
|
|||||||
|
"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 { Users, Crown, UserPlus, UserCheck, Star } from "lucide-react";
|
||||||
|
|
||||||
|
interface CustomerInsights {
|
||||||
|
totalCustomers: number;
|
||||||
|
segments: {
|
||||||
|
new: number;
|
||||||
|
returning: number;
|
||||||
|
loyal: number;
|
||||||
|
vip: number;
|
||||||
|
};
|
||||||
|
topCustomers: Array<{
|
||||||
|
_id: string;
|
||||||
|
orderCount: number;
|
||||||
|
totalSpent: number;
|
||||||
|
averageOrderValue: number;
|
||||||
|
firstOrder: string;
|
||||||
|
lastOrder: string;
|
||||||
|
}>;
|
||||||
|
averageOrdersPerCustomer: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CustomerInsightsChart() {
|
||||||
|
const [data, setData] = useState<CustomerInsights | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchCustomerData = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const response = await clientFetch<CustomerInsights>('/analytics/customer-insights');
|
||||||
|
setData(response);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching customer insights:', err);
|
||||||
|
setError('Failed to load customer data');
|
||||||
|
toast({
|
||||||
|
title: "Error",
|
||||||
|
description: "Failed to load customer insights data.",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchCustomerData();
|
||||||
|
}, [toast]);
|
||||||
|
|
||||||
|
const getSegmentColor = (segment: string) => {
|
||||||
|
switch (segment) {
|
||||||
|
case 'new':
|
||||||
|
return 'bg-blue-500';
|
||||||
|
case 'returning':
|
||||||
|
return 'bg-green-500';
|
||||||
|
case 'loyal':
|
||||||
|
return 'bg-purple-500';
|
||||||
|
case 'vip':
|
||||||
|
return 'bg-yellow-500';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-500';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSegmentIcon = (segment: string) => {
|
||||||
|
switch (segment) {
|
||||||
|
case 'new':
|
||||||
|
return <UserPlus className="h-4 w-4" />;
|
||||||
|
case 'returning':
|
||||||
|
return <UserCheck className="h-4 w-4" />;
|
||||||
|
case 'loyal':
|
||||||
|
return <Star className="h-4 w-4" />;
|
||||||
|
case 'vip':
|
||||||
|
return <Crown className="h-4 w-4" />;
|
||||||
|
default:
|
||||||
|
return <Users className="h-4 w-4" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSegmentLabel = (segment: string) => {
|
||||||
|
switch (segment) {
|
||||||
|
case 'new':
|
||||||
|
return 'New Customers';
|
||||||
|
case 'returning':
|
||||||
|
return 'Returning Customers';
|
||||||
|
case 'loyal':
|
||||||
|
return 'Loyal Customers';
|
||||||
|
case 'vip':
|
||||||
|
return 'VIP Customers';
|
||||||
|
default:
|
||||||
|
return 'Unknown';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Users className="h-5 w-5" />
|
||||||
|
Customer Insights
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Customer segmentation and behavior analysis
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Skeleton className="h-32 w-full" />
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<Skeleton className="h-20" />
|
||||||
|
<Skeleton className="h-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !data) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Users className="h-5 w-5" />
|
||||||
|
Customer Insights
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<Users className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||||
|
<p className="text-muted-foreground">Failed to load customer data</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const segments = Object.entries(data.segments);
|
||||||
|
const totalCustomers = data.totalCustomers;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Customer Overview */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Users className="h-5 w-5" />
|
||||||
|
Customer Overview
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Total customers and average orders per customer
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 gap-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold text-blue-600">
|
||||||
|
{data.totalCustomers}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">Total Customers</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold text-green-600">
|
||||||
|
{data.averageOrdersPerCustomer}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">Avg Orders/Customer</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Customer Segments */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Customer Segments</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Breakdown of customers by purchase frequency
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{segments.map(([segment, count]) => {
|
||||||
|
const percentage = totalCustomers > 0 ? (count / totalCustomers * 100).toFixed(1) : '0';
|
||||||
|
const Icon = getSegmentIcon(segment);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={segment} className="flex items-center justify-between p-3 border rounded-lg">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-2 rounded-full ${getSegmentColor(segment)} text-white`}>
|
||||||
|
{Icon}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">{getSegmentLabel(segment)}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{count} customers
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* Top Customers */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Crown className="h-5 w-5" />
|
||||||
|
Top Customers
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Your highest-spending customers
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{data.topCustomers.length === 0 ? (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<Crown className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||||
|
<p className="text-muted-foreground">No customer data available</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{data.topCustomers.map((customer, index) => (
|
||||||
|
<div key={customer._id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex items-center justify-center w-8 h-8 bg-primary text-primary-foreground rounded-full text-sm font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">Customer #{customer._id.slice(-6)}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{customer.orderCount} orders
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-bold text-green-600">
|
||||||
|
${customer.totalSpent.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
${customer.averageOrderValue.toFixed(2)} avg
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
232
components/analytics/ProductPerformanceChart.tsx
Normal file
232
components/analytics/ProductPerformanceChart.tsx
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
import { useToast } from "@/hooks/use-toast";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import { Package, TrendingUp } from "lucide-react";
|
||||||
|
|
||||||
|
interface ProductPerformance {
|
||||||
|
productId: string;
|
||||||
|
name: string;
|
||||||
|
image: string;
|
||||||
|
unitType: string;
|
||||||
|
currentStock: number;
|
||||||
|
stockStatus: string;
|
||||||
|
totalSold: number;
|
||||||
|
totalRevenue: number;
|
||||||
|
orderCount: number;
|
||||||
|
averagePrice: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProductPerformanceChart() {
|
||||||
|
const [data, setData] = useState<ProductPerformance[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchProductData = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const response = await clientFetch<ProductPerformance[]>('/analytics/product-performance');
|
||||||
|
setData(response);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching product performance:', err);
|
||||||
|
setError('Failed to load product data');
|
||||||
|
toast({
|
||||||
|
title: "Error",
|
||||||
|
description: "Failed to load product performance data.",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchProductData();
|
||||||
|
}, [toast]);
|
||||||
|
|
||||||
|
const getStockStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'in_stock':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'low_stock':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'out_of_stock':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStockStatusText = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'in_stock':
|
||||||
|
return 'In Stock';
|
||||||
|
case 'low_stock':
|
||||||
|
return 'Low Stock';
|
||||||
|
case 'out_of_stock':
|
||||||
|
return 'Out of Stock';
|
||||||
|
default:
|
||||||
|
return 'Unknown';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Package className="h-5 w-5" />
|
||||||
|
Product Performance
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Top performing products by revenue and sales
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Skeleton className="h-8 w-full" />
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-4">
|
||||||
|
<Skeleton className="h-12 w-12 rounded" />
|
||||||
|
<div className="space-y-2 flex-1">
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
<Skeleton className="h-3 w-24" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-4 w-16" />
|
||||||
|
<Skeleton className="h-4 w-20" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Package className="h-5 w-5" />
|
||||||
|
Product Performance
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<Package className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||||
|
<p className="text-muted-foreground">Failed to load product data</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Package className="h-5 w-5" />
|
||||||
|
Product Performance
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Top performing products by revenue and sales
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<Package className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||||
|
<p className="text-muted-foreground">No product performance data available</p>
|
||||||
|
<p className="text-sm text-muted-foreground mt-2">
|
||||||
|
Start selling products to see performance metrics
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Package className="h-5 w-5" />
|
||||||
|
Product Performance
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Top performing products by revenue and sales
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Product</TableHead>
|
||||||
|
<TableHead>Stock</TableHead>
|
||||||
|
<TableHead className="text-right">Sold</TableHead>
|
||||||
|
<TableHead className="text-right">Revenue</TableHead>
|
||||||
|
<TableHead className="text-right">Orders</TableHead>
|
||||||
|
<TableHead className="text-right">Avg Price</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((product) => (
|
||||||
|
<TableRow key={product.productId}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
className="h-10 w-10 bg-cover bg-center rounded border flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
backgroundImage: product.image
|
||||||
|
? `url(/api/products/${product.productId}/image)`
|
||||||
|
: 'none'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">{product.name}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{product.unitType}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={getStockStatusColor(product.stockStatus)}
|
||||||
|
>
|
||||||
|
{getStockStatusText(product.stockStatus)}
|
||||||
|
</Badge>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{product.currentStock} available
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-medium">
|
||||||
|
{product.totalSold.toFixed(2)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-medium text-green-600">
|
||||||
|
${product.totalRevenue.toFixed(2)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
{product.orderCount}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
${product.averagePrice.toFixed(2)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
191
components/analytics/RevenueChart.tsx
Normal file
191
components/analytics/RevenueChart.tsx
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { clientFetch } from "@/lib/api";
|
||||||
|
import { useToast } from "@/hooks/use-toast";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import { TrendingUp, DollarSign } from "lucide-react";
|
||||||
|
|
||||||
|
interface RevenueData {
|
||||||
|
_id: {
|
||||||
|
year: number;
|
||||||
|
month: number;
|
||||||
|
day: number;
|
||||||
|
};
|
||||||
|
revenue: number;
|
||||||
|
orders: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RevenueChartProps {
|
||||||
|
timeRange: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RevenueChart({ timeRange }: RevenueChartProps) {
|
||||||
|
const [data, setData] = useState<RevenueData[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchRevenueData = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const response = await clientFetch<RevenueData[]>(`/analytics/revenue-trends?period=${timeRange}`);
|
||||||
|
setData(response);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching revenue data:', err);
|
||||||
|
setError('Failed to load revenue data');
|
||||||
|
toast({
|
||||||
|
title: "Error",
|
||||||
|
description: "Failed to load revenue trends data.",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchRevenueData();
|
||||||
|
}, [timeRange, toast]);
|
||||||
|
|
||||||
|
const totalRevenue = data.reduce((sum, item) => sum + item.revenue, 0);
|
||||||
|
const totalOrders = data.reduce((sum, item) => sum + item.orders, 0);
|
||||||
|
const averageRevenue = data.length > 0 ? totalRevenue / data.length : 0;
|
||||||
|
|
||||||
|
const formatDate = (item: RevenueData) => {
|
||||||
|
const date = new Date(item._id.year, item._id.month - 1, item._id.day);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-5 w-5" />
|
||||||
|
Revenue Trends
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Revenue performance over the selected time period
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Skeleton className="h-64 w-full" />
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<Skeleton className="h-16" />
|
||||||
|
<Skeleton className="h-16" />
|
||||||
|
<Skeleton className="h-16" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-5 w-5" />
|
||||||
|
Revenue Trends
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<DollarSign className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||||
|
<p className="text-muted-foreground">Failed to load revenue data</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-5 w-5" />
|
||||||
|
Revenue Trends
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Revenue performance over the selected time period
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<DollarSign className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||||
|
<p className="text-muted-foreground">No revenue data available for this period</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-5 w-5" />
|
||||||
|
Revenue Trends
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Revenue performance over the selected time period
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{/* Simple bar chart representation */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="h-64 flex items-end justify-between gap-1">
|
||||||
|
{data.map((item, index) => {
|
||||||
|
const maxRevenue = Math.max(...data.map(d => d.revenue));
|
||||||
|
const height = maxRevenue > 0 ? (item.revenue / maxRevenue) * 100 : 0;
|
||||||
|
|
||||||
|
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={`${formatDate(item)}: $${item.revenue.toFixed(2)}`}
|
||||||
|
/>
|
||||||
|
<div className="text-xs text-muted-foreground mt-1 rotate-45 origin-left">
|
||||||
|
{formatDate(item)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary stats */}
|
||||||
|
<div className="grid grid-cols-3 gap-4 pt-4 border-t">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-green-600">
|
||||||
|
${totalRevenue.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">Total Revenue</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-blue-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">
|
||||||
|
${averageRevenue.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">Avg Daily Revenue</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,10 +1,11 @@
|
|||||||
import { Home, Package, Box, Truck, Settings, FolderTree, MessageCircle, BarChart3, Tag, Users } from "lucide-react"
|
import { Home, Package, Box, Truck, Settings, FolderTree, MessageCircle, BarChart3, Tag, Users, TrendingUp } from "lucide-react"
|
||||||
|
|
||||||
export const sidebarConfig = [
|
export const sidebarConfig = [
|
||||||
{
|
{
|
||||||
title: "Overview",
|
title: "Overview",
|
||||||
items: [
|
items: [
|
||||||
{ name: "Dashboard", href: "/dashboard", icon: Home },
|
{ name: "Dashboard", href: "/dashboard", icon: Home },
|
||||||
|
{ name: "Analytics", href: "/dashboard/analytics", icon: TrendingUp },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user