Fix TopReplenishProducts component
This commit is contained in:
@@ -4,23 +4,29 @@ import { ScrollArea } from "@/components/ui/scroll-area"
|
|||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||||
import config from "@/config"
|
import config from "@/config"
|
||||||
|
|
||||||
interface Product {
|
interface ReplenishmentMetricsData {
|
||||||
pid: number;
|
productsToReplenish: number;
|
||||||
sku: string;
|
unitsToReplenish: number;
|
||||||
|
replenishmentCost: number;
|
||||||
|
replenishmentRetail: number;
|
||||||
|
topVariants: {
|
||||||
|
id: number;
|
||||||
title: string;
|
title: string;
|
||||||
stock_quantity: number;
|
currentStock: number;
|
||||||
daily_sales_avg: string;
|
replenishQty: number;
|
||||||
reorder_qty: number;
|
replenishCost: number;
|
||||||
last_purchase_date: string | null;
|
replenishRetail: number;
|
||||||
|
status: string;
|
||||||
|
}[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TopReplenishProducts() {
|
export function TopReplenishProducts() {
|
||||||
const { data } = useQuery<Product[]>({
|
const { data } = useQuery<ReplenishmentMetricsData>({
|
||||||
queryKey: ["top-replenish-products"],
|
queryKey: ["replenishment-metrics"],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const response = await fetch(`${config.apiUrl}/dashboard/replenish/products?limit=50`)
|
const response = await fetch(`${config.apiUrl}/dashboard/replenishment/metrics`)
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error("Failed to fetch products to replenish")
|
throw new Error("Failed to fetch replenishment metrics")
|
||||||
}
|
}
|
||||||
return response.json()
|
return response.json()
|
||||||
},
|
},
|
||||||
@@ -38,29 +44,28 @@ export function TopReplenishProducts() {
|
|||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead>Product</TableHead>
|
<TableHead>Product</TableHead>
|
||||||
<TableHead className="text-right">Stock</TableHead>
|
<TableHead className="text-right">Stock</TableHead>
|
||||||
<TableHead className="text-right">Daily Sales</TableHead>
|
|
||||||
<TableHead className="text-right">Reorder Qty</TableHead>
|
<TableHead className="text-right">Reorder Qty</TableHead>
|
||||||
<TableHead>Last Purchase</TableHead>
|
<TableHead className="text-right">Cost</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{data?.map((product) => (
|
{data?.topVariants?.map((product) => (
|
||||||
<TableRow key={product.pid}>
|
<TableRow key={product.id}>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<a
|
<a
|
||||||
href={`https://backend.acherryontop.com/product/${product.pid}`}
|
href={`https://backend.acherryontop.com/product/${product.id}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="hover:underline"
|
className="hover:underline"
|
||||||
>
|
>
|
||||||
{product.title}
|
{product.title}
|
||||||
</a>
|
</a>
|
||||||
<div className="text-sm text-muted-foreground">{product.sku}</div>
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="text-right">{product.stock_quantity}</TableCell>
|
<TableCell className="text-right">{product.currentStock}</TableCell>
|
||||||
<TableCell className="text-right">{Number(product.daily_sales_avg).toFixed(1)}</TableCell>
|
<TableCell className="text-right">{product.replenishQty}</TableCell>
|
||||||
<TableCell className="text-right">{product.reorder_qty}</TableCell>
|
<TableCell className="text-right">${product.replenishCost.toFixed(2)}</TableCell>
|
||||||
<TableCell>{product.last_purchase_date ? product.last_purchase_date : '-'}</TableCell>
|
<TableCell>{product.status}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
|
|||||||
Reference in New Issue
Block a user