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

feat: add filtered totals summary above Grid table

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-17 11:54:46 +01:00
parent bcb1a7a6d1
commit 1de07d3342
1 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+42
View File
@@ -630,6 +630,48 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
</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">
<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>
</div>
{years.map((year) => {
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 }
);
return (
<div key={year} className="flex items-center gap-4 px-4 py-1 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 items-center gap-1">
<span className="text-xs text-slate-500">S.O:</span>
<span className="text-sm font-bold text-emerald-400">
€{yearTotals.sellOut.toLocaleString(undefined, { maximumFractionDigits: 0 })}
</span>
</div>
<div className="h-3 w-px bg-slate-700"></div>
<div className="flex items-center gap-1">
<span className="text-xs text-slate-500">Units:</span>
<span className="text-sm font-bold text-blue-400">
{yearTotals.units.toLocaleString()}
</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">