eek
This commit is contained in:
NotII
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user