Fix GRID tab empty table regression by correcting filter logic and prop passing

This commit is contained in:
Christian Vidal Wolf
2026-02-09 12:05:03 +01:00
parent ac791b5265
commit d5bcbeda1a
3 changed files with 8 additions and 16 deletions
+1
View File
@@ -761,6 +761,7 @@ const App: React.FC = () => {
<div className={view === 'table' ? '' : 'hidden'}> <div className={view === 'table' ? '' : 'hidden'}>
<DataGrid <DataGrid
data={ytdGridData} data={ytdGridData}
filters={filters}
hasCustomerFilter={filters.customer.length > 0} hasCustomerFilter={filters.customer.length > 0}
adsData={filteredAdsData} adsData={filteredAdsData}
stockMap={stockMap} stockMap={stockMap}
+6 -15
View File
@@ -2,7 +2,7 @@ import React, { useState, useMemo, useEffect, useRef } from 'react';
import { import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts'; } from 'recharts';
import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs, ColumnFilterCondition } from '../types'; import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs, ColumnFilterCondition, FilterState } from '../types';
import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping, filterData } from '../services/dataProcessor'; import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping, filterData } from '../services/dataProcessor';
import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './Icons'; import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './Icons';
import { StockBadge } from './StockBadge'; import { StockBadge } from './StockBadge';
@@ -13,6 +13,7 @@ import { ExcelFilter } from './ExcelFilter';
interface DataGridProps { interface DataGridProps {
data: SalesRecord[] | CombinedKPIs[]; data: SalesRecord[] | CombinedKPIs[];
filters: FilterState;
hasCustomerFilter: boolean; hasCustomerFilter: boolean;
adsData?: AdsRecord[]; adsData?: AdsRecord[];
stockMap?: Map<string, number>; stockMap?: Map<string, number>;
@@ -242,7 +243,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
}; };
const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode, velocityMap, buyBoxLostMap, defaultSort }) => { const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode, velocityMap, buyBoxLostMap, defaultSort }) => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [sortConfig, setSortConfig] = useState<SortConfig>(defaultSort || { key: null, direction: 'desc' }); const [sortConfig, setSortConfig] = useState<SortConfig>(defaultSort || { key: null, direction: 'desc' });
@@ -323,18 +324,8 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
// Apply our comprehensive filters (includes Column Filters now) // Apply our comprehensive filters (includes Column Filters now)
const filterState: any = { const filterState: any = {
customer: [], ...filters,
year: [], bulkSearch: searchTerm, // searchTerm from the DataGrid's local search input
month: [],
line: [],
asin: [],
sku: [],
title: [],
week: [],
stock: [],
vendorStock: [],
woc: [],
bulkSearch: searchTerm,
columnFilters columnFilters
}; };
const filteredFlatData = filterData(processedData, filterState, stockMap, vendorStockMap, top50Mode); const filteredFlatData = filterData(processedData, filterState, stockMap, vendorStockMap, top50Mode);
@@ -342,7 +333,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
// pivotSalesData now handles ads aggregation correctly because it receives CombinedKPIs // pivotSalesData now handles ads aggregation correctly because it receives CombinedKPIs
const { rows } = pivotSalesData(filteredFlatData, effectiveDimensions); const { rows } = pivotSalesData(filteredFlatData, effectiveDimensions);
return rows; return rows;
}, [data, effectiveDimensions, hasCustomerFilter, columnFilters, searchTerm, stockMap, vendorStockMap, top50Mode]); }, [data, filters, effectiveDimensions, hasCustomerFilter, columnFilters, searchTerm, stockMap, vendorStockMap, top50Mode]);
const { years } = useMemo(() => { const { years } = useMemo(() => {
// We still need unique years for columns // We still need unique years for columns
+1 -1
View File
@@ -917,7 +917,7 @@ export const filterData = (
// 2. Filter Checks // 2. Filter Checks
const customerMatch = filters.customer.length === 0 const customerMatch = filters.customer.length === 0
? PAN_EU_COUNTRIES.includes(item.customer) ? (PAN_EU_COUNTRIES.includes(item.customer) || item.customer === 'Pan-EU')
: filters.customer.includes(item.customer); : filters.customer.includes(item.customer);
const yearMatch = filters.year.length === 0 || filters.year.includes(item.year.toString()); const yearMatch = filters.year.length === 0 || filters.year.includes(item.year.toString());