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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user