Integrate stock availability data and StockBadge component across all views

This commit is contained in:
Christian Vidal Wolf
2026-01-27 16:51:38 +01:00
parent 219d050bf2
commit 0d1d2c77d4
9 changed files with 634 additions and 470 deletions
+11 -2
View File
@@ -5,11 +5,13 @@ import {
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';
interface DataGridProps {
data: SalesRecord[] | CombinedKPIs[];
hasCustomerFilter: boolean;
adsData?: AdsRecord[];
stockMap?: Map<string, number>;
}
type SortConfig = {
@@ -226,7 +228,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
};
const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData = [] }) => {
const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap }) => {
const [currentPage, setCurrentPage] = useState(1);
const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
const [showChart, setShowChart] = useState(true);
@@ -1081,7 +1083,14 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
<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) || '-'
: (dim === 'sku' || dim === 'asin')
? <div className="flex items-center gap-2">
<span>{(row[dim as keyof PivotRow] as string) || '-'}</span>
{stockMap && dim === 'sku' && (
<StockBadge stock={stockMap.get((row[dim] as string)?.replace(/(DE|EN)$/i, ''))} />
)}
</div>
: (row[dim as keyof PivotRow] as string) || '-'
}
</td>
))}