fix: resolve maximum call stack size exceeded error and optimize master table

This commit is contained in:
Christian Vidal Wolf
2026-03-16 13:19:21 +01:00
parent 845a8e0ae6
commit b304e0ddb8
3 changed files with 22 additions and 17 deletions
+14 -13
View File
@@ -158,19 +158,20 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
</tr>
{/* Product Rows */}
{sortedProducts.map((product) => {
const metrics = calculateProductMetrics(product, includeCOGS);
// Data bar width calculation (relative to max sales)
const maxSales = Math.max(...products.map(p => p.grossSales));
const salesBarWidth = `${(product.grossSales / maxSales) * 100}%`;
{(() => {
const maxSales = products.reduce((max, p) => Math.max(max, p.grossSales), 0);
return sortedProducts.map((product) => {
const metrics = calculateProductMetrics(product, includeCOGS);
// Data bar width calculation (relative to max sales)
const salesBarWidth = maxSales > 0 ? `${(product.grossSales / maxSales) * 100}%` : '0%';
return (
<tr
key={product.id}
className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
onClick={() => onProductClick(product)}
>
return (
<tr
key={product.id}
className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
onClick={() => onProductClick(product)}
>
<td className="px-6 py-4 whitespace-normal min-w-[250px] max-w-[300px]">
<div className="font-medium text-slate-200 group-hover:text-indigo-400 transition-colors line-clamp-2" title={product.name}>{product.name}</div>
<div className="text-xs text-slate-500 font-mono mt-0.5">{product.sku} | {product.asin}</div>
@@ -230,7 +231,7 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
</td>
</tr>
);
})}
})})()}
</tbody>
</table>
</div>