feat: split Incentives into Deals and Promos in MKT tab

This commit is contained in:
Christian Vidal Wolf
2026-03-11 09:31:39 +01:00
parent 455cd8ed08
commit f323e2a96e
+22 -11
View File
@@ -9,7 +9,7 @@ interface MasterTableProps {
onProductClick: (product: Product) => void;
}
type SortKey = 'name' | 'grossSales' | 'ppcSpend' | 'incentives' | 'chargebacks' | 'netMargin' | 'marginPercent';
type SortKey = 'name' | 'grossSales' | 'ppcSpend' | 'deals' | 'promos' | 'chargebacks' | 'netMargin' | 'marginPercent';
type SortOrder = 'asc' | 'desc';
export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS, onProductClick }) => {
@@ -30,11 +30,12 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
const metrics = calculateProductMetrics(product, includeCOGS);
acc.grossSales += product.grossSales;
acc.ppcSpend += product.ppcSpend;
acc.incentives += metrics.incentives;
acc.deals += product.deals;
acc.promos += product.promos;
acc.chargebacks += product.chargebacks;
acc.netMargin += metrics.netMargin;
return acc;
}, { grossSales: 0, ppcSpend: 0, incentives: 0, chargebacks: 0, netMargin: 0 });
}, { grossSales: 0, ppcSpend: 0, deals: 0, promos: 0, chargebacks: 0, netMargin: 0 });
}, [products, includeCOGS]);
const totalMarginPercent = totals.grossSales > 0 ? totals.netMargin / totals.grossSales : 0;
@@ -61,9 +62,13 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
valA = a.ppcSpend;
valB = b.ppcSpend;
break;
case 'incentives':
valA = metricsA.incentives;
valB = metricsB.incentives;
case 'deals':
valA = a.deals;
valB = b.deals;
break;
case 'promos':
valA = a.promos;
valB = b.promos;
break;
case 'chargebacks':
valA = a.chargebacks;
@@ -110,8 +115,11 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
<th className="px-6 py-4 cursor-pointer hover:bg-[#1A1E2A] transition-colors text-right" onClick={() => handleSort('ppcSpend')}>
PPC Spend (ACOS) <SortIcon columnKey="ppcSpend" />
</th>
<th className="px-6 py-4 cursor-pointer hover:bg-[#1A1E2A] transition-colors text-right" onClick={() => handleSort('incentives')}>
Incentives <SortIcon columnKey="incentives" />
<th className="px-6 py-4 cursor-pointer hover:bg-[#1A1E2A] transition-colors text-right" onClick={() => handleSort('deals')}>
Deals <SortIcon columnKey="deals" />
</th>
<th className="px-6 py-4 cursor-pointer hover:bg-[#1A1E2A] transition-colors text-right" onClick={() => handleSort('promos')}>
Promos <SortIcon columnKey="promos" />
</th>
<th className="px-6 py-4 cursor-pointer hover:bg-[#1A1E2A] transition-colors text-right" onClick={() => handleSort('chargebacks')}>
Op. Chargebacks <SortIcon columnKey="chargebacks" />
@@ -133,7 +141,8 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
{formatCurrency(totals.ppcSpend)}
<div className="text-xs text-amber-400 font-normal mt-0.5">ACOS: {formatPercent(totalAcos)}</div>
</td>
<td className="px-6 py-4 text-right text-slate-200">{formatCurrency(totals.incentives)}</td>
<td className="px-6 py-4 text-right text-slate-200">{formatCurrency(totals.deals)}</td>
<td className="px-6 py-4 text-right text-slate-200">{formatCurrency(totals.promos)}</td>
<td className="px-6 py-4 text-right text-slate-200">{formatCurrency(totals.chargebacks)}</td>
<td className="px-6 py-4 text-right text-emerald-400">{formatCurrency(totals.netMargin)}</td>
<td className="px-6 py-4 text-right text-slate-200">
@@ -179,8 +188,10 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
<div className="text-xs text-slate-500 mt-0.5">ACOS: <span className="text-amber-400">{formatPercent(metrics.acos)}</span></div>
</td>
<td className="px-6 py-4 text-right">
<div className="font-medium text-slate-200">{formatCurrency(metrics.incentives)}</div>
<div className="text-xs text-slate-500 mt-0.5">D: {formatCurrency(product.deals)} | P: {formatCurrency(product.promos)}</div>
<div className="font-medium text-slate-200">{formatCurrency(product.deals)}</div>
</td>
<td className="px-6 py-4 text-right">
<div className="font-medium text-slate-200">{formatCurrency(product.promos)}</div>
</td>
<td className="px-6 py-4 text-right">
<div className="flex items-center justify-end gap-2">