Implement Custom Numeric Filtering (>10, 5-10) for Stock/WOC columns in Weekly Sales

components/InColumnStockFilter.tsx

@@ -22,7 +22,9 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
     icon
 }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [customInput, setCustomInput] = useState('');
     const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     // Close when clicking outside
     useEffect(() => {
@@ -50,6 +52,15 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
         setIsOpen(false);
     };
 
+    const handleCustomAdd = () => {
+        if (customInput.trim()) {
+            if (!currentFilters.includes(customInput.trim())) {
+                onFilterChange([...currentFilters, customInput.trim()]);
+            }
+            setCustomInput('');
+        }
+    };
+
     return (
         <div className="relative inline-block ml-1" ref={containerRef}>
             <button
@@ -72,13 +83,36 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
             </button>
 
             {isOpen && (
-                <div className="absolute left-0 mt-2 w-48 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
+                <div className="absolute left-0 mt-2 w-56 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
-                    <div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-1 flex justify-between items-center">
+                    <div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-2 flex justify-between items-center">
                         <span>{title}</span>
                         {currentFilters.length > 0 && (
                             <button onClick={clearFilters} className="text-indigo-400 hover:text-indigo-300">Clear</button>
                         )}
                     </div>
+
+                    {/* Custom Input */}
+                    <div className="px-2 mb-2 flex gap-1">
+                        <input
+                            ref={inputRef}
+                            type="text"
+                            className="bg-slate-950 border border-slate-700 text-xs text-white rounded px-2 py-1 w-full focus:border-indigo-500 focus:outline-none placeholder:text-slate-600"
+                            placeholder="e.g. >10, 50-100"
+                            value={customInput}
+                            onChange={(e) => setCustomInput(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') handleCustomAdd();
+                                e.stopPropagation(); // Prevent grid row clicks if any
+                            }}
+                            autoFocus
+                        />
+                        <button
+                            onClick={handleCustomAdd}
+                            className="bg-indigo-600 hover:bg-indigo-500 text-white px-2 rounded text-xs font-bold"
+                        >
+                            +
+                        </button>
+                    </div>
                     {options.map(option => {
                         const isSelected = currentFilters.includes(option);
                         return (

components/WeeklyGrid.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import * as XLSX from 'xlsx';
 import { CombinedKPIs } from '../types';
-import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES } from '../services/dataProcessor';
+import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES, checkNumericConditions } from '../services/dataProcessor';
 import { StockBadge } from './StockBadge';
 import { InColumnStockFilter } from './InColumnStockFilter';
 import { Top50Badge } from './Top50Badge';
@@ -307,13 +307,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                     woc = 999;
                 }
 
-                return wocFilter.some(f => {
+                return checkNumericConditions(woc, wocFilter);
-                    if (f === '< 4 Weeks') return woc < 4;
-                    if (f === '> 4 Weeks') return woc >= 4;
-                    if (f === 'Out of Stock') return woc === 0;
-                    if (f === 'Infinite Cover') return woc === 999;
-                    return true;
-                });
             });
         }
 

services/dataProcessor.ts

@@ -49,6 +49,55 @@ const parseUnits = (value: string): number => {
 
 const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
+// Helper for numeric filtering (e.g. ">5", "10-20")
+export const checkNumericConditions = (value: number, filters: string[]): boolean => {
+    if (!filters || filters.length === 0) return true;
+
+    return filters.some(f => {
+        // Handle specific string labels
+        if (f.includes('Out of Stock') || f === 'Out of Stock') return value === 0;
+        if (f.includes('In Stock') && !f.includes('Low')) return value > 0;
+        if (f.includes('Low Stock')) return value < 10;
+        if (f === '< 4 Weeks') return value < 4;
+        if (f === '> 4 Weeks') return value >= 4;
+        if (f === 'Infinite Cover') return value === 999;
+
+        const input = f.trim().toLowerCase();
+
+        // Range: 10-20
+        if (input.includes('-') && !input.startsWith('-')) { // Avoid negative numbers confusion if possible, though simple range usually 10-20
+            const parts = input.split('-').map(s => parseFloat(s.trim()));
+            if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
+                return value >= parts[0] && value <= parts[1];
+            }
+        }
+
+        // Expressions
+        if (input.startsWith('<=')) {
+            const val = parseFloat(input.substring(2));
+            return !isNaN(val) && value <= val;
+        }
+        if (input.startsWith('>=')) {
+            const val = parseFloat(input.substring(2));
+            return !isNaN(val) && value >= val;
+        }
+        if (input.startsWith('<')) {
+            const val = parseFloat(input.substring(1));
+            return !isNaN(val) && value < val;
+        }
+        if (input.startsWith('>')) {
+            const val = parseFloat(input.substring(1));
+            return !isNaN(val) && value > val;
+        }
+
+        // Exact Match
+        const val = parseFloat(input);
+        if (!isNaN(val)) return value === val;
+
+        return false;
+    });
+};
+
 // Comprehensive Month Mapping (English + Spanish + Short/Full)
 const MONTH_MAP: Record<string, string> = {
     // English Short
@@ -735,34 +784,7 @@ const checkStockFilter = (sku: string, filters: string[], stockMap?: Map<string,
     const baseSku = sku?.replace(/(DE|EN)$/i, '');
     const stockValue = stockMap.get(baseSku) || 0;
 
-    return filters.some(f => {
+    return checkNumericConditions(stockValue, filters);
-        // 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;
-    });
 };
 
 const checkVendorStockFilter = (asin: string, filters: string[], vendorStockMap?: Map<string, { eu: number; uk: number }>, mode: 'eu' | 'uk' = 'eu'): boolean => {
@@ -772,33 +794,7 @@ const checkVendorStockFilter = (asin: string, filters: string[], vendorStockMap?
     const data = vendorStockMap.get(asin);
     const stockValue = data ? (mode === 'uk' ? data.uk : data.eu) : 0;
 
-    return filters.some(f => {
+    return checkNumericConditions(stockValue, filters);
-        if (f === 'Out of Stock (0)') return stockValue === 0;
-        if (f === 'In Stock (>20)') return stockValue > 20;
-        if (f === 'In Stock (>0)') return stockValue > 0;
-        if (f === 'Low Stock (<10)') return stockValue < 10;
-
-        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;
-        } else if (!isNaN(parseFloat(input))) {
-            return stockValue === parseFloat(input);
-        }
-        return false;
-    });
 };
 
 // Filter Ads Data by Country, Year, Week, ASIN, SKU, and Product Line