Fix and update bestsellers component
This commit is contained in:
@@ -13,20 +13,21 @@ interface BestSellerProduct {
|
||||
units_sold: number
|
||||
revenue: number
|
||||
profit: number
|
||||
growth_rate: number
|
||||
}
|
||||
|
||||
interface BestSellerVendor {
|
||||
vendor: string
|
||||
products_sold: number
|
||||
interface BestSellerBrand {
|
||||
brand: string
|
||||
units_sold: number
|
||||
revenue: number
|
||||
profit: number
|
||||
order_fill_rate: number
|
||||
growth_rate: number
|
||||
}
|
||||
|
||||
interface BestSellerCategory {
|
||||
category_id: number
|
||||
name: string
|
||||
products_sold: number
|
||||
units_sold: number
|
||||
revenue: number
|
||||
profit: number
|
||||
growth_rate: number
|
||||
@@ -34,7 +35,7 @@ interface BestSellerCategory {
|
||||
|
||||
interface BestSellersData {
|
||||
products: BestSellerProduct[]
|
||||
vendors: BestSellerVendor[]
|
||||
brands: BestSellerBrand[]
|
||||
categories: BestSellerCategory[]
|
||||
}
|
||||
|
||||
@@ -52,49 +53,58 @@ export function BestSellers() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<CardHeader>
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">Best Sellers</CardTitle>
|
||||
<Tabs defaultValue="products">
|
||||
<Tabs defaultValue="products">
|
||||
<CardHeader>
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">Best Sellers</CardTitle>
|
||||
<TabsList>
|
||||
<TabsTrigger value="products">Products</TabsTrigger>
|
||||
<TabsTrigger value="vendors">Vendors</TabsTrigger>
|
||||
<TabsTrigger value="brands">Brands</TabsTrigger>
|
||||
<TabsTrigger value="categories">Categories</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="products">
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TabsContent value="products">
|
||||
<ScrollArea className="h-[400px] w-full">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Product</TableHead>
|
||||
<TableHead className="text-right">Units</TableHead>
|
||||
<TableHead className="text-right">Revenue</TableHead>
|
||||
<TableHead className="text-right">Profit</TableHead>
|
||||
<TableHead className="w-[40%]">Product</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Sales</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Revenue</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Profit</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Growth</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data?.products.map((product) => (
|
||||
<TableRow key={product.product_id}>
|
||||
<TableCell>
|
||||
<TableCell className="w-[40%]">
|
||||
<div>
|
||||
<p className="font-medium">{product.title}</p>
|
||||
<a
|
||||
href={`https://backend.acherryontop.com/product/${product.product_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium hover:underline"
|
||||
>
|
||||
{product.title}
|
||||
</a>
|
||||
<p className="text-sm text-muted-foreground">{product.sku}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{product.units_sold.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{formatCurrency(product.revenue)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{formatCurrency(product.profit)}
|
||||
</TableCell>
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{product.growth_rate > 0 ? '+' : ''}{product.growth_rate.toFixed(1)}%
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
@@ -102,31 +112,35 @@ export function BestSellers() {
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="vendors">
|
||||
<TabsContent value="brands">
|
||||
<ScrollArea className="h-[400px] w-full">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Vendor</TableHead>
|
||||
<TableHead className="text-right">Products</TableHead>
|
||||
<TableHead className="text-right">Revenue</TableHead>
|
||||
<TableHead className="text-right">Fill Rate</TableHead>
|
||||
<TableHead className="w-[40%]">Brand</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Sales</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Revenue</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Profit</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Growth</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data?.vendors.map((vendor) => (
|
||||
<TableRow key={vendor.vendor}>
|
||||
<TableCell>
|
||||
<p className="font-medium">{vendor.vendor}</p>
|
||||
{data?.brands.map((brand) => (
|
||||
<TableRow key={brand.brand}>
|
||||
<TableCell className="w-[40%]">
|
||||
<p className="font-medium">{brand.brand}</p>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{vendor.products_sold.toLocaleString()}
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{brand.units_sold.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{formatCurrency(vendor.revenue)}
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{formatCurrency(brand.revenue)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{vendor.order_fill_rate.toFixed(1)}%
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{formatCurrency(brand.profit)}
|
||||
</TableCell>
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{brand.growth_rate > 0 ? '+' : ''}{brand.growth_rate.toFixed(1)}%
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
@@ -140,26 +154,30 @@ export function BestSellers() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Category</TableHead>
|
||||
<TableHead className="text-right">Products</TableHead>
|
||||
<TableHead className="text-right">Revenue</TableHead>
|
||||
<TableHead className="text-right">Growth</TableHead>
|
||||
<TableHead className="w-[40%]">Category</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Sales</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Revenue</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Profit</TableHead>
|
||||
<TableHead className="w-[15%] text-right">Growth</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data?.categories.map((category) => (
|
||||
<TableRow key={category.category_id}>
|
||||
<TableCell>
|
||||
<TableCell className="w-[40%]">
|
||||
<p className="font-medium">{category.name}</p>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{category.products_sold.toLocaleString()}
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{category.units_sold.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{formatCurrency(category.revenue)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{category.growth_rate.toFixed(1)}%
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{formatCurrency(category.profit)}
|
||||
</TableCell>
|
||||
<TableCell className="w-[15%] text-right">
|
||||
{category.growth_rate > 0 ? '+' : ''}{category.growth_rate.toFixed(1)}%
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
@@ -167,8 +185,8 @@ export function BestSellers() {
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</CardContent>
|
||||
</Tabs>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user