Fix TopReplenishProducts component

This commit is contained in:
2025-02-10 14:35:24 -05:00
parent d8fd64cf62
commit 09f7103472

View File

@@ -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>