Fix TopReplenishProducts component

inventory/src/components/dashboard/TopReplenishProducts.tsx

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