mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 14:45:24 +02:00
feat: move filtered totals to Data Grid table header
- DataGrid.tsx: Integrated aggregated totals into a new sticky header row - DataGrid.tsx: Aligned Sell Out and Units totals directly above their respective columns - DataGrid.tsx: Added YoY growth indicators to the header totals - DataGrid.tsx: Improved performance with memoized total calculations - DataGrid.tsx: Fixed syntax errors and TypeScript warnings
This commit is contained in:
Christian Vidal Wolf
+319
-307
@@ -282,7 +282,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
|
||||
|
||||
const { years } = useMemo(() => {
|
||||
// We still need unique years for columns
|
||||
const yearsSet = new Set(data.map(d => String((d as any).year)));
|
||||
const yearsSet = new Set<string>(data.map(d => String(d.year)));
|
||||
return { years: Array.from(yearsSet).sort((a, b) => parseInt(b) - parseInt(a)) };
|
||||
}, [data]);
|
||||
|
||||
@@ -451,6 +451,57 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
|
||||
return result;
|
||||
}, [pivotRows, rowFilters, sortConfig, years]);
|
||||
|
||||
// Calculate aggregated totals for the header row
|
||||
const filteredTotalsByYear = useMemo(() => {
|
||||
const result: { [year: string]: { sellOut: number, units: number, sellOutGrowth?: number, unitsGrowth?: number } } = {};
|
||||
|
||||
years.forEach((year, index) => {
|
||||
const totals = processedRows.reduce(
|
||||
(acc, row) => {
|
||||
const data = row.totalsByYear[year];
|
||||
if (data) {
|
||||
acc.sellOut += data.sellOut;
|
||||
acc.units += data.units;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{ sellOut: 0, units: 0 }
|
||||
);
|
||||
|
||||
result[year] = totals;
|
||||
|
||||
// Calculate YoY growth if previous year exists
|
||||
const prevYear = years[index + 1];
|
||||
if (prevYear) {
|
||||
const prevYearTotals = processedRows.reduce(
|
||||
(acc, row) => {
|
||||
const data = row.totalsByYear[prevYear];
|
||||
if (data) {
|
||||
acc.sellOut += data.sellOut;
|
||||
acc.units += data.units;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{ sellOut: 0, units: 0 }
|
||||
);
|
||||
|
||||
if (prevYearTotals.sellOut > 0) {
|
||||
result[year].sellOutGrowth = ((totals.sellOut - prevYearTotals.sellOut) / prevYearTotals.sellOut) * 100;
|
||||
} else if (totals.sellOut > 0) {
|
||||
result[year].sellOutGrowth = 100;
|
||||
}
|
||||
|
||||
if (prevYearTotals.units > 0) {
|
||||
result[year].unitsGrowth = ((totals.units - prevYearTotals.units) / prevYearTotals.units) * 100;
|
||||
} else if (totals.units > 0) {
|
||||
result[year].unitsGrowth = 100;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}, [processedRows, years]);
|
||||
|
||||
const paginatedRows = useMemo(() => {
|
||||
const start = (currentPage - 1) * ROWS_PER_PAGE;
|
||||
return processedRows.slice(start, start + ROWS_PER_PAGE);
|
||||
@@ -765,338 +816,299 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filter Totals Summary */}
|
||||
<div className="bg-gradient-to-r from-indigo-900/20 to-purple-900/20 border-y border-indigo-500/30 px-4 py-3">
|
||||
<div className="flex flex-wrap items-center gap-6">
|
||||
|
||||
{/* Ads Performance Summary - Shows when ads data is loaded */}
|
||||
{adsSummary && showAdsMetrics && (
|
||||
<div className="bg-gradient-to-r from-fuchsia-900/20 to-indigo-900/20 border-y border-fuchsia-500/30 px-4 py-3">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
|
||||
<span className="text-xs font-bold text-indigo-300 uppercase tracking-wide">Filtered Totals:</span>
|
||||
<span className="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
|
||||
<span className="text-xs font-bold text-fuchsia-300 uppercase tracking-wide">Advertising Data:</span>
|
||||
<span className="text-xs text-slate-400">{adsSummary.recordCount.toLocaleString('de-DE')} records</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">Ad Spend:</span>
|
||||
<span className="text-sm font-bold text-fuchsia-400">€{adsSummary.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">Attr. Sales:</span>
|
||||
<span className="text-sm font-bold text-emerald-400">€{adsSummary.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">ACOS:</span>
|
||||
<span className={`text-sm font-bold ${adsSummary.acos <= 30 ? 'text-emerald-400' : adsSummary.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
|
||||
{adsSummary.acos.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">ROAS:</span>
|
||||
<span className={`text-sm font-bold ${adsSummary.roas >= 3 ? 'text-emerald-400' : adsSummary.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
|
||||
{adsSummary.roas.toFixed(2)}x
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{years.map((year, index) => {
|
||||
const yearTotals = processedRows.reduce(
|
||||
(acc, row) => {
|
||||
const data = row.totalsByYear[year];
|
||||
if (data) {
|
||||
acc.sellOut += data.sellOut;
|
||||
acc.units += data.units;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{ sellOut: 0, units: 0 }
|
||||
);
|
||||
|
||||
// Calculate YoY growth if previous year exists
|
||||
const prevYear = years[index + 1];
|
||||
let sellOutGrowth = null;
|
||||
let unitsGrowth = null;
|
||||
|
||||
if (prevYear) {
|
||||
const prevYearTotals = processedRows.reduce(
|
||||
(acc, row) => {
|
||||
const data = row.totalsByYear[prevYear];
|
||||
if (data) {
|
||||
acc.sellOut += data.sellOut;
|
||||
acc.units += data.units;
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{ sellOut: 0, units: 0 }
|
||||
);
|
||||
|
||||
if (prevYearTotals.sellOut > 0) {
|
||||
sellOutGrowth = ((yearTotals.sellOut - prevYearTotals.sellOut) / prevYearTotals.sellOut) * 100;
|
||||
} else if (yearTotals.sellOut > 0) {
|
||||
sellOutGrowth = 100;
|
||||
}
|
||||
|
||||
if (prevYearTotals.units > 0) {
|
||||
unitsGrowth = ((yearTotals.units - prevYearTotals.units) / prevYearTotals.units) * 100;
|
||||
} else if (yearTotals.units > 0) {
|
||||
unitsGrowth = 100;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={year} className="flex items-center gap-4 px-4 py-2 bg-slate-900/50 border border-slate-700/50 rounded-lg">
|
||||
<span className="text-xs font-bold text-slate-400">{year}</span>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500">S.O:</span>
|
||||
<span className="text-sm font-bold text-emerald-400">
|
||||
€{yearTotals.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
|
||||
</span>
|
||||
{sellOutGrowth !== null && (
|
||||
<span className={`text-xs font-bold ${sellOutGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
||||
{sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(sellOutGrowth).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500">Units:</span>
|
||||
<span className="text-sm font-bold text-blue-400">
|
||||
{yearTotals.units.toLocaleString('de-DE')}
|
||||
</span>
|
||||
{unitsGrowth !== null && (
|
||||
<span className={`text-xs font-bold ${unitsGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
||||
{unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(unitsGrowth).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Ads Performance Summary - Shows when ads data is loaded */}
|
||||
{adsSummary && showAdsMetrics && (
|
||||
<div className="bg-gradient-to-r from-fuchsia-900/20 to-indigo-900/20 border-y border-fuchsia-500/30 px-4 py-3">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
|
||||
<span className="text-xs font-bold text-fuchsia-300 uppercase tracking-wide">Advertising Data:</span>
|
||||
<span className="text-xs text-slate-400">{adsSummary.recordCount.toLocaleString('de-DE')} records</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">Ad Spend:</span>
|
||||
<span className="text-sm font-bold text-fuchsia-400">€{adsSummary.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
|
||||
{/* Data Table */}
|
||||
<div className="overflow-x-auto min-h-[400px]">
|
||||
<table className="w-full text-left text-sm border-collapse">
|
||||
<thead className="bg-slate-950 text-slate-400 uppercase text-xs font-semibold tracking-wider sticky top-0 z-20 shadow-sm border-b border-white/10">
|
||||
{/* NEW: Filtered Totals Header Row */}
|
||||
<tr className="bg-indigo-950/20 border-b border-indigo-500/30">
|
||||
<th colSpan={effectiveDimensions.length} className="px-4 py-3 bg-indigo-900/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||
</svg>
|
||||
<span className="text-[10px] font-black text-indigo-300 tracking-widest uppercase">Filtered Totals</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">Attr. Sales:</span>
|
||||
<span className="text-sm font-bold text-emerald-400">€{adsSummary.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">ACOS:</span>
|
||||
<span className={`text-sm font-bold ${adsSummary.acos <= 30 ? 'text-emerald-400' : adsSummary.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
|
||||
{adsSummary.acos.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
||||
<span className="text-xs text-slate-400 mr-2">ROAS:</span>
|
||||
<span className={`text-sm font-bold ${adsSummary.roas >= 3 ? 'text-emerald-400' : adsSummary.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
|
||||
{adsSummary.roas.toFixed(2)}x
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="overflow-x-auto min-h-[400px]">
|
||||
<table className="w-full text-left text-sm border-collapse">
|
||||
<thead className="bg-slate-950 text-slate-400 uppercase text-xs font-semibold tracking-wider sticky top-0 z-20 shadow-sm">
|
||||
<tr>
|
||||
{/* Dynamic Dimension Headers */}
|
||||
{effectiveDimensions.map(dim => {
|
||||
const label = DIMENSION_OPTIONS.find(d => d.value === dim)?.label || dim;
|
||||
return (
|
||||
<th
|
||||
key={dim}
|
||||
className="px-4 py-3 border-b border-border cursor-pointer hover:text-white group bg-slate-950 min-w-[150px]"
|
||||
onClick={() => requestSort(dim)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
{label} {getSortIcon(dim)}
|
||||
</th>
|
||||
{years.map((year, index) => {
|
||||
const totals = filteredTotalsByYear[year];
|
||||
const prevYear = years[index + 1];
|
||||
return (
|
||||
<React.Fragment key={`totals-${year}`}>
|
||||
<th className="px-4 py-3 text-right border-x border-indigo-500/10 bg-indigo-900/5">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-emerald-400 font-bold text-sm">
|
||||
€{totals.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
|
||||
</span>
|
||||
{totals.sellOutGrowth !== undefined && (
|
||||
<span className={`text-[9px] font-black ${totals.sellOutGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
||||
{totals.sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(totals.sellOutGrowth).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
<th className="px-4 py-3 text-right border-r border-indigo-500/10 bg-indigo-900/5">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-blue-400 font-bold text-sm">
|
||||
{totals.units.toLocaleString('de-DE')}
|
||||
</span>
|
||||
{totals.unitsGrowth !== undefined && (
|
||||
<span className={`text-[9px] font-black ${totals.unitsGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
||||
{totals.unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(totals.unitsGrowth).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
{prevYear && <th colSpan={2} className="bg-indigo-900/5 border-r border-indigo-500/10"></th>}
|
||||
{showAdsMetrics && adsSummary && <th colSpan={2} className="bg-fuchsia-900/5 border-r border-fuchsia-500/10"></th>}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
<tr>
|
||||
{/* Dynamic Dimension Headers */}
|
||||
{effectiveDimensions.map(dim => {
|
||||
const label = DIMENSION_OPTIONS.find(d => d.value === dim)?.label || dim;
|
||||
return (
|
||||
<th
|
||||
key={dim}
|
||||
className="px-4 py-3 border-b border-border cursor-pointer hover:text-white group bg-slate-950 min-w-[150px]"
|
||||
onClick={() => requestSort(dim)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
{label} {getSortIcon(dim)}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Data Columns: Year Groups */}
|
||||
{/* Data Columns: Year Groups */}
|
||||
{years.map((year, index) => {
|
||||
const prevYear = years[index + 1]; // Since years are sorted desc: 2025, 2024... next index is prev year
|
||||
return (
|
||||
<React.Fragment key={year}>
|
||||
{/* Sell Out & Units */}
|
||||
<th
|
||||
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[100px]"
|
||||
onClick={() => requestSort(`total_sellOut_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end">
|
||||
Sell Out {year} {getSortIcon(`total_sellOut_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[80px]"
|
||||
onClick={() => requestSort(`total_units_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end">
|
||||
Units {year} {getSortIcon(`total_units_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
|
||||
{/* Growth Columns (if prev year exists) */}
|
||||
{prevYear && (
|
||||
<>
|
||||
<th
|
||||
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
|
||||
onClick={() => requestSort(`growth_sellOut_${year}_${prevYear}`)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
|
||||
S.O. Δ% {getSortIcon(`growth_sellOut_${year}_${prevYear}`)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
|
||||
onClick={() => requestSort(`growth_units_${year}_${prevYear}`)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
|
||||
Units Δ% {getSortIcon(`growth_units_${year}_${prevYear}`)}
|
||||
</div>
|
||||
</th>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Ads Columns - Only show when ads data exists and toggle is on */}
|
||||
{showAdsMetrics && adsSummary && (
|
||||
<>
|
||||
<th
|
||||
className="px-3 py-3 border-b border-fuchsia-500/30 text-right bg-fuchsia-950/30 min-w-[90px] cursor-pointer hover:bg-fuchsia-900/40 transition-colors"
|
||||
onClick={() => requestSort(`adSpend_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end text-fuchsia-400 text-[10px] uppercase">
|
||||
Ad Spend {year} {getSortIcon(`adSpend_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-3 py-3 border-b border-fuchsia-500/30 text-right bg-fuchsia-950/30 min-w-[70px] cursor-pointer hover:bg-fuchsia-900/40 transition-colors"
|
||||
onClick={() => requestSort(`tacos_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end text-fuchsia-400 text-[10px] uppercase">
|
||||
TACOS {year} {getSortIcon(`tacos_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border text-slate-300">
|
||||
{paginatedRows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-800/50 transition-colors group">
|
||||
{/* Dimension Values */}
|
||||
{effectiveDimensions.map(dim => (
|
||||
<td key={dim} className="px-4 py-3 font-medium text-slate-200 break-words max-w-xs">
|
||||
{dim === 'title'
|
||||
? <div className="line-clamp-2" title={row.title}>{row.title || '-'}</div>
|
||||
: (row[dim as keyof PivotRow] as string) || '-'
|
||||
}
|
||||
</td>
|
||||
))}
|
||||
|
||||
{/* Metric Values */}
|
||||
{years.map((year, index) => {
|
||||
const prevYear = years[index + 1]; // Since years are sorted desc: 2025, 2024... next index is prev year
|
||||
const data = row.totalsByYear[year];
|
||||
const prevYear = years[index + 1];
|
||||
const prevData = prevYear ? row.totalsByYear[prevYear] : null;
|
||||
|
||||
// Calculate Growth
|
||||
let sellOutGrowth = null;
|
||||
let unitsGrowth = null;
|
||||
|
||||
if (prevYear) {
|
||||
const currSO = data?.sellOut || 0;
|
||||
const prevSO = prevData?.sellOut || 0;
|
||||
if (prevSO !== 0) sellOutGrowth = ((currSO - prevSO) / prevSO) * 100;
|
||||
else if (currSO > 0) sellOutGrowth = 100; // New entry
|
||||
|
||||
const currUnits = data?.units || 0;
|
||||
const prevUnits = prevData?.units || 0;
|
||||
if (prevUnits !== 0) unitsGrowth = ((currUnits - prevUnits) / prevUnits) * 100;
|
||||
else if (currUnits > 0) unitsGrowth = 100;
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={year}>
|
||||
{/* Sell Out & Units */}
|
||||
<th
|
||||
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[100px]"
|
||||
onClick={() => requestSort(`total_sellOut_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end">
|
||||
Sell Out {year} {getSortIcon(`total_sellOut_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[80px]"
|
||||
onClick={() => requestSort(`total_units_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end">
|
||||
Units {year} {getSortIcon(`total_units_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
<td className="px-4 py-3 text-right font-medium text-white group-hover:text-emerald-400 transition-colors">
|
||||
{data ? `€${data.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-400">
|
||||
{data ? data.units.toLocaleString('de-DE') : '-'}
|
||||
</td>
|
||||
|
||||
{/* Growth Columns (if prev year exists) */}
|
||||
{/* Growth Cells */}
|
||||
{prevYear && (
|
||||
<>
|
||||
<th
|
||||
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
|
||||
onClick={() => requestSort(`growth_sellOut_${year}_${prevYear}`)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
|
||||
S.O. Δ% {getSortIcon(`growth_sellOut_${year}_${prevYear}`)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
|
||||
onClick={() => requestSort(`growth_units_${year}_${prevYear}`)}
|
||||
>
|
||||
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
|
||||
Units Δ% {getSortIcon(`growth_units_${year}_${prevYear}`)}
|
||||
</div>
|
||||
</th>
|
||||
<td className={`px-2 py-3 text-center font-bold text-xs ${sellOutGrowth !== null ? (sellOutGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
|
||||
{sellOutGrowth !== null ? (
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
{sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(sellOutGrowth).toFixed(0)}%
|
||||
</span>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td className={`px-2 py-3 text-center font-bold text-xs ${unitsGrowth !== null ? (unitsGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
|
||||
{unitsGrowth !== null ? (
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
{unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(unitsGrowth).toFixed(0)}%
|
||||
</span>
|
||||
) : '-'}
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Ads Columns - Only show when ads data exists and toggle is on */}
|
||||
{showAdsMetrics && adsSummary && (
|
||||
<>
|
||||
<th
|
||||
className="px-3 py-3 border-b border-fuchsia-500/30 text-right bg-fuchsia-950/30 min-w-[90px] cursor-pointer hover:bg-fuchsia-900/40 transition-colors"
|
||||
onClick={() => requestSort(`adSpend_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end text-fuchsia-400 text-[10px] uppercase">
|
||||
Ad Spend {year} {getSortIcon(`adSpend_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="px-3 py-3 border-b border-fuchsia-500/30 text-right bg-fuchsia-950/30 min-w-[70px] cursor-pointer hover:bg-fuchsia-900/40 transition-colors"
|
||||
onClick={() => requestSort(`tacos_${year}`)}
|
||||
>
|
||||
<div className="flex items-center justify-end text-fuchsia-400 text-[10px] uppercase">
|
||||
TACOS {year} {getSortIcon(`tacos_${year}`)}
|
||||
</div>
|
||||
</th>
|
||||
</>
|
||||
)}
|
||||
{/* Ads Data Cells */}
|
||||
{showAdsMetrics && adsSummary && (() => {
|
||||
const adsYearData = row.adsByYear?.[year];
|
||||
return (
|
||||
<>
|
||||
<td className="px-3 py-3 text-right text-fuchsia-400 font-medium bg-fuchsia-950/10">
|
||||
{adsYearData ? `€${adsYearData.adSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
|
||||
</td>
|
||||
<td className={`px-3 py-3 text-right font-bold text-xs bg-fuchsia-950/10 ${adsYearData
|
||||
? (adsYearData.tacos <= 10 ? 'text-emerald-400' : adsYearData.tacos <= 20 ? 'text-amber-400' : 'text-red-400')
|
||||
: 'text-slate-600'
|
||||
}`}>
|
||||
{adsYearData ? `${adsYearData.tacos.toFixed(1)}%` : '-'}
|
||||
</td>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border text-slate-300">
|
||||
{paginatedRows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-800/50 transition-colors group">
|
||||
{/* Dimension Values */}
|
||||
{effectiveDimensions.map(dim => (
|
||||
<td key={dim} className="px-4 py-3 font-medium text-slate-200 break-words max-w-xs">
|
||||
{dim === 'title'
|
||||
? <div className="line-clamp-2" title={row.title}>{row.title || '-'}</div>
|
||||
: (row[dim as keyof PivotRow] as string) || '-'
|
||||
}
|
||||
</td>
|
||||
))}
|
||||
))}
|
||||
|
||||
{/* Metric Values */}
|
||||
{years.map((year, index) => {
|
||||
const data = row.totalsByYear[year];
|
||||
const prevYear = years[index + 1];
|
||||
const prevData = prevYear ? row.totalsByYear[prevYear] : null;
|
||||
{paginatedRows.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={effectiveDimensions.length + (years.length * 2)} className="px-6 py-12 text-center text-slate-500 italic">
|
||||
No data matches your filters.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
// Calculate Growth
|
||||
let sellOutGrowth = null;
|
||||
let unitsGrowth = null;
|
||||
|
||||
if (prevYear) {
|
||||
const currSO = data?.sellOut || 0;
|
||||
const prevSO = prevData?.sellOut || 0;
|
||||
if (prevSO !== 0) sellOutGrowth = ((currSO - prevSO) / prevSO) * 100;
|
||||
else if (currSO > 0) sellOutGrowth = 100; // New entry
|
||||
|
||||
const currUnits = data?.units || 0;
|
||||
const prevUnits = prevData?.units || 0;
|
||||
if (prevUnits !== 0) unitsGrowth = ((currUnits - prevUnits) / prevUnits) * 100;
|
||||
else if (currUnits > 0) unitsGrowth = 100;
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment key={year}>
|
||||
<td className="px-4 py-3 text-right font-medium text-white group-hover:text-emerald-400 transition-colors">
|
||||
{data ? `€${data.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-400">
|
||||
{data ? data.units.toLocaleString('de-DE') : '-'}
|
||||
</td>
|
||||
|
||||
{/* Growth Cells */}
|
||||
{prevYear && (
|
||||
<>
|
||||
<td className={`px-2 py-3 text-center font-bold text-xs ${sellOutGrowth !== null ? (sellOutGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
|
||||
{sellOutGrowth !== null ? (
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
{sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(sellOutGrowth).toFixed(0)}%
|
||||
</span>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td className={`px-2 py-3 text-center font-bold text-xs ${unitsGrowth !== null ? (unitsGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
|
||||
{unitsGrowth !== null ? (
|
||||
<span className="flex items-center justify-center gap-1">
|
||||
{unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(unitsGrowth).toFixed(0)}%
|
||||
</span>
|
||||
) : '-'}
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Ads Data Cells */}
|
||||
{showAdsMetrics && adsSummary && (() => {
|
||||
const adsYearData = row.adsByYear?.[year];
|
||||
return (
|
||||
<>
|
||||
<td className="px-3 py-3 text-right text-fuchsia-400 font-medium bg-fuchsia-950/10">
|
||||
{adsYearData ? `€${adsYearData.adSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
|
||||
</td>
|
||||
<td className={`px-3 py-3 text-right font-bold text-xs bg-fuchsia-950/10 ${adsYearData
|
||||
? (adsYearData.tacos <= 10 ? 'text-emerald-400' : adsYearData.tacos <= 20 ? 'text-amber-400' : 'text-red-400')
|
||||
: 'text-slate-600'
|
||||
}`}>
|
||||
{adsYearData ? `${adsYearData.tacos.toFixed(1)}%` : '-'}
|
||||
</td>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
|
||||
{paginatedRows.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={effectiveDimensions.length + (years.length * 2)} className="px-6 py-12 text-center text-slate-500 italic">
|
||||
No data matches your filters.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Pagination */}
|
||||
<div className="p-4 border-t border-border bg-slate-900/50 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="text-sm text-slate-500">
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="p-4 border-t border-border bg-slate-900/50 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="text-sm text-slate-500">
|
||||
Page {currentPage} of {totalPages || 1}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 bg-slate-800 border border-slate-700 rounded text-sm text-slate-300 disabled:opacity-50 hover:bg-slate-700"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="px-3 py-1 bg-slate-800 border border-slate-700 rounded text-sm text-slate-300 disabled:opacity-50 hover:bg-slate-700"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 bg-slate-800 border border-slate-700 rounded text-sm text-slate-300 disabled:opacity-50 hover:bg-slate-700"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="px-3 py-1 bg-slate-800 border border-slate-700 rounded text-sm text-slate-300 disabled:opacity-50 hover:bg-slate-700"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user