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

Refactor: Unified Top 50 Badge logic and shared component integration

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-28 08:55:09 +01:00
parent 87e097224b
commit 6c788d335f
6 changed files with 378 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+25 -2
View File
@@ -6,12 +6,18 @@ import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs } from '../types';
import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping } from '../services/dataProcessor';
import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './Icons';
import { StockBadge } from './StockBadge';
import { Top50Badge } from './Top50Badge';
interface DataGridProps {
data: SalesRecord[] | CombinedKPIs[];
hasCustomerFilter: boolean;
adsData?: AdsRecord[];
stockMap?: Map<string, number>;
top50Ranking?: {
eu: Map<string, number>;
uk: Map<string, number>;
};
top50Mode: 'eu' | 'uk';
}
type SortConfig = {
@@ -228,7 +234,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
};
const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap }) => {
const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, top50Ranking, top50Mode }) => {
const [currentPage, setCurrentPage] = useState(1);
const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
const [showChart, setShowChart] = useState(true);
@@ -1087,7 +1093,24 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
)}
</div>
: (row[dim as keyof PivotRow] as string) || '-'
: dim === 'asin' || dim === 'sku'
? <div className="flex items-center gap-1.5">
{(() => {
const asin = (row.asin || '').trim().toUpperCase();
if (asin && top50Ranking) {
if (top50Mode === 'eu') {
const rank = top50Ranking.eu.get(asin);
if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
} else {
const rank = top50Ranking.uk.get(asin);
if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
}
}
return null;
})()}
<span>{(row[dim as keyof PivotRow] as string) || '-'}</span>
</div>
: (row[dim as keyof PivotRow] as string) || '-'
}
</td>
))}