diff --git a/App.tsx b/App.tsx index 260e3c5..bdd4991 100644 --- a/App.tsx +++ b/App.tsx @@ -62,6 +62,7 @@ const App: React.FC = () => { asin: [], sku: [], title: [], + stock: [], }); // Handle Data Fetch (Simplified) @@ -386,8 +387,8 @@ const App: React.FC = () => { return metaMap; }, [rawData]); - const filteredData = useMemo(() => filterData(rawData, filters), [rawData, filters]); - const filteredAdsData = useMemo(() => filterAdsData(adsData, filters, globalAsinMetadata), [adsData, filters, globalAsinMetadata]); + const filteredData = useMemo(() => filterData(rawData, filters, stockMap), [rawData, filters, stockMap]); + const filteredAdsData = useMemo(() => filterAdsData(adsData, filters, globalAsinMetadata, stockMap), [adsData, filters, globalAsinMetadata, stockMap]); const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]); // Calculate country-aware Top 50 Best Sellers for 2025 @@ -445,7 +446,8 @@ const App: React.FC = () => { line: activeLines, // Force these lines sku: [], // Clear specific item filters asin: [], - title: [] + title: [], + stock: [] }; // 3. Process this broader dataset @@ -466,8 +468,14 @@ const App: React.FC = () => { sku: getUniqueValues(rawData, 'sku'), title: getUniqueValues(rawData, 'title'), week: Array.from(new Set(rawData.map(r => r.week).filter(w => w !== undefined))).sort((a, b) => (a as number) - (b as number)).map(w => `W${w}`), + stock: [ + 'Out of Stock (0)', + 'In Stock (>0)', + 'Low Stock (<10)', + ...Array.from(new Set(Array.from(stockMap.values()).map(String))).sort((a, b) => parseFloat(a) - parseFloat(b)) + ] }; - }, [rawData]); + }, [rawData, stockMap]); const handleFilterChange = (key: keyof FilterState, value: string[]) => { setFilters(prev => ({ ...prev, [key]: value })); diff --git a/components/FilterBar.tsx b/components/FilterBar.tsx index 9eb7cae..e0c0110 100644 --- a/components/FilterBar.tsx +++ b/components/FilterBar.tsx @@ -15,6 +15,7 @@ interface FilterBarProps { sku: string[]; title: string[]; week: string[]; + stock: string[]; }; } @@ -79,6 +80,14 @@ const FilterBar: React.FC = ({ filters, onFilterChange, options onChange={(v) => onFilterChange('asin', v)} className="flex-1" /> + onFilterChange('stock', v)} + className="flex-1" + enableRangeSelect={true} + /> ); diff --git a/services/dataProcessor.ts b/services/dataProcessor.ts index 9bbca76..f0c48cc 100644 --- a/services/dataProcessor.ts +++ b/services/dataProcessor.ts @@ -701,11 +701,51 @@ export const mergeSalesAndAdsData = ( // --- EXISTING HELPERS --- +// Helper to check stock filter +const checkStockFilter = (sku: string, filters: string[], stockMap?: Map): boolean => { + if (!filters || filters.length === 0) return true; + if (!stockMap) return true; + + // Normalize SKU (remove DE/EN) to match stock map + const baseSku = sku?.replace(/(DE|EN)$/i, ''); + const stockValue = stockMap.get(baseSku) || 0; + + return filters.some(f => { + // Smart Filters + if (f === 'Out of Stock (0)') return stockValue === 0; + if (f === 'In Stock (>0)') return stockValue > 0; + if (f === 'Low Stock (<10)') return stockValue < 10; + + // Numeric Range (e.g. ">10", "1-50") + const input = f.trim().toLowerCase(); + if (input.includes('-')) { + const [start, end] = input.split('-').map(s => parseFloat(s.trim())); + if (!isNaN(start) && !isNaN(end)) return stockValue >= start && stockValue <= end; + } else if (input.startsWith('<=')) { + const val = parseFloat(input.substring(2).trim()); + if (!isNaN(val)) return stockValue <= val; + } else if (input.startsWith('>=')) { + const val = parseFloat(input.substring(2).trim()); + if (!isNaN(val)) return stockValue >= val; + } else if (input.startsWith('<')) { + const val = parseFloat(input.substring(1).trim()); + if (!isNaN(val)) return stockValue < val; + } else if (input.startsWith('>')) { + const val = parseFloat(input.substring(1).trim()); + if (!isNaN(val)) return stockValue > val; + } + + // Exact Match + return stockValue.toString() === f; + }); +}; + // Filter Ads Data by Country, Year, Week, ASIN, SKU, and Product Line export const filterAdsData = ( adsData: AdsRecord[], filters: FilterState, - asinMetadata?: Map + asinMetadata?: Map, + stockMap?: Map ): AdsRecord[] => { return adsData.filter(ad => { const asin = ad.asin.trim().toUpperCase(); @@ -740,11 +780,14 @@ export const filterAdsData = ( lineMatch = meta ? filters.line.includes(meta.line) : false; } - return countryMatch && yearMatch && weekMatch && asinMatch && skuMatch && lineMatch; + // Stock match + const stockMatch = checkStockFilter(meta?.sku || '', filters.stock, stockMap); + + return countryMatch && yearMatch && weekMatch && asinMatch && skuMatch && lineMatch && stockMatch; }); }; -export const filterData = (data: SalesRecord[], filters: FilterState): SalesRecord[] => { +export const filterData = (data: SalesRecord[], filters: FilterState, stockMap?: Map): SalesRecord[] => { return data.filter(item => { // 1. Month Logic: Handle "Apr-23" matching "Apr" filter const recordMonth = item.month; // e.g. "Apr-23" @@ -769,7 +812,10 @@ export const filterData = (data: SalesRecord[], filters: FilterState): SalesReco const weekStr = item.week ? `W${item.week}` : ''; const weekMatch = filters.week.length === 0 || (weekStr !== '' && filters.week.includes(weekStr)); - return customerMatch && yearMatch && monthMatch && lineMatch && asinMatch && skuMatch && titleMatch && weekMatch; + // Stock match + const stockMatch = checkStockFilter(item.sku, filters.stock, stockMap); + + return customerMatch && yearMatch && monthMatch && lineMatch && asinMatch && skuMatch && titleMatch && weekMatch && stockMatch; }); }; diff --git a/types.ts b/types.ts index 2b2573e..5910894 100644 --- a/types.ts +++ b/types.ts @@ -23,6 +23,7 @@ export interface FilterState { sku: string[]; title: string[]; // Added Title filter week: string[]; // Added Week filter + stock: string[]; // Added Stock filter } export interface GrowthMetric {