christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 11:55:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: use adsData directly for ad spend totals in DataGrid header

Browse Source 
Previously the Filtered Totals header row summed ad spend from pivot rows,
which excluded ads-only records (ASINs with zero sales) due to isRealSale filter.
Now uses adSpendByYear memo from raw adsData, matching Dashboard calculation.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-05-11 15:19:40 +02:00
co-authored by Claude Sonnet 4.6
parent a13ddcb46c
commit 43a532a6f0
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+23 -7
View File
@@ -293,6 +293,17 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
};
}, [adsData]);
// Ad spend per year from adsData directly (avoids pivot row filtering that drops ads-only records)
const adSpendByYear = useMemo(() => {
if (!adsData || adsData.length === 0) return {} as Record<number, { adSpend: number; attributedSales: number }>;
return adsData.reduce((acc, ad) => {
if (!acc[ad.year]) acc[ad.year] = { adSpend: 0, attributedSales: 0 };
acc[ad.year].adSpend += ad.cost;
acc[ad.year].attributedSales += ad.attributedSales30d;
return acc;
}, {} as Record<number, { adSpend: number; attributedSales: number }>);
}, [adsData]);
// State for dynamic grouping
const [selectedDimensions, setSelectedDimensions] = useState<string[]>(['sku', 'title']);
@@ -1193,19 +1204,24 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
<th className="px-3 py-3 text-right bg-fuchsia-950/20 border-r border-fuchsia-500/10">
<div className="flex flex-col items-end">
<span className="text-fuchsia-400 font-bold text-[13px]">
€{totals.adSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
€{(adSpendByYear[year]?.adSpend ?? 0).toLocaleString('de-DE', { maximumFractionDigits: 0 })}
</span>
{(totals as any).adSpendGrowth !== undefined && (
<span className={`text-[9px] font-black ${(totals as any).adSpendGrowth <= 0 ? 'text-emerald-400' : 'text-amber-400'}`}>
{(totals as any).adSpendGrowth >= 0 ? '↑' : '↓'} {Math.abs((totals as any).adSpendGrowth).toFixed(1)}%
</span>
)}
{prevYear && adSpendByYear[prevYear]?.adSpend > 0 && (() => {
const curr = adSpendByYear[year]?.adSpend ?? 0;
const prev = adSpendByYear[prevYear]?.adSpend ?? 0;
const growth = ((curr - prev) / prev) * 100;
return (
<span className={`text-[9px] font-black ${growth <= 0 ? 'text-emerald-400' : 'text-amber-400'}`}>
{growth >= 0 ? '↑' : '↓'} {Math.abs(growth).toFixed(1)}%
</span>
);
})()}
</div>
</th>
<th className="px-3 py-3 text-right bg-fuchsia-950/20 border-r border-fuchsia-500/10">
<div className="flex flex-col items-end">
<span className="text-fuchsia-300 font-bold text-[13px]">
{totals.sellOut > 0 ? ((totals.adSpend / totals.sellOut) * 100).toFixed(2) : '0.00'}%
{totals.sellOut > 0 ? (((adSpendByYear[year]?.adSpend ?? 0) / totals.sellOut) * 100).toFixed(2) : '0.00'}%
</span>
<span className="text-[9px] font-black text-slate-500 uppercase">TACOS</span>
</div>