Fix forecasting brand list and filter on products received during period selected

inventory/src/components/forecasting/columns.tsx

@@ -10,6 +10,7 @@ interface ProductDetail {
   stock_quantity: number;
   total_sold: number;
   avg_price: number;
+  first_received_date: string;
 }
 
 export interface ForecastItem {
@@ -148,6 +149,7 @@ export const renderSubComponent = ({ row }: { row: any }) => {
           <TableRow>
             <TableHead>Product Name</TableHead>
             <TableHead>SKU</TableHead>
+            <TableHead>First Received</TableHead>
             <TableHead>Stock Quantity</TableHead>
             <TableHead>Total Sold</TableHead>
             <TableHead>Average Price</TableHead>
@@ -158,6 +160,7 @@ export const renderSubComponent = ({ row }: { row: any }) => {
             <TableRow key={product.product_id}>
               <TableCell>{product.name}</TableCell>
               <TableCell>{product.sku}</TableCell>
+              <TableCell>{product.first_received_date}</TableCell>
               <TableCell>{product.stock_quantity.toLocaleString()}</TableCell>
               <TableCell>{product.total_sold.toLocaleString()}</TableCell>
               <TableCell>${product.avg_price.toFixed(2)}</TableCell>

inventory/src/pages/Forecasting.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, Fragment } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useQuery } from "@tanstack/react-query";
@@ -72,6 +72,7 @@ export default function Forecasting() {
           stock_quantity: Number(p.stock_quantity) || 0,
           total_sold: Number(p.total_sold) || 0,
           avg_price: Number(p.avg_price) || 0,
+          first_received_date: p.first_received_date,
         }))
       }));
     },
@@ -145,9 +146,8 @@ export default function Forecasting() {
                 <TableBody>
                   {table.getRowModel().rows?.length ? (
                     table.getRowModel().rows.map((row: Row<ForecastItem>) => (
-                      <>
+                      <Fragment key={row.id}>
                         <TableRow
-                          key={row.id}
                           data-state={row.getIsSelected() && "selected"}
                         >
                           {row.getVisibleCells().map((cell) => (
@@ -163,7 +163,7 @@ export default function Forecasting() {
                             </TableCell>
                           </TableRow>
                         )}
-                      </>
+                      </Fragment>
                     ))
                   ) : (
                     <TableRow>