Implement Excel-style stock filtering with Smart Filters and Range support

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 }));

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<FilterBarProps> = ({ filters, onFilterChange, options
           onChange={(v) => onFilterChange('asin', v)}
           className="flex-1"
         />
+        <MultiSelectDropdown
+          label="Stock"
+          selected={filters.stock}
+          options={options.stock}
+          onChange={(v) => onFilterChange('stock', v)}
+          className="flex-1"
+          enableRangeSelect={true}
+        />
       </div>
     </div>
   );

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<string, number>): 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<string, { sku: string; line: string }>
+    asinMetadata?: Map<string, { sku: string; line: string }>,
+    stockMap?: Map<string, number>
 ): 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<string, number>): 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;
     });
 };
 

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 {