Implement Excel-style filters (SKU, ASIN, Title, Line) across GRID, WEEKLY SALES, and FC26 tabs

components/DataGrid.tsx

@@ -2,13 +2,14 @@ import React, { useState, useMemo, useEffect, useRef } from 'react';
 import {
     LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
 } from 'recharts';
-import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs } from '../types';
+import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs, ColumnFilterCondition } from '../types';
-import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping } from '../services/dataProcessor';
+import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping, filterData } from '../services/dataProcessor';
 import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './Icons';
 import { StockBadge } from './StockBadge';
 import { Top50Badge } from './Top50Badge';
 import { VendorStockBadge } from './VendorStockBadge';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
+import { ExcelFilter } from './ExcelFilter';
 
 interface DataGridProps {
     data: SalesRecord[] | CombinedKPIs[];
@@ -297,6 +298,19 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
     const [newFilterOperator, setNewFilterOperator] = useState<'gt' | 'lt'>('gt');
     const [newFilterValue, setNewFilterValue] = useState<string>('');
 
+    // State for Column Filters
+    const [columnFilters, setColumnFilters] = useState<Record<string, ColumnFilterCondition>>({});
+
+    const handleColumnFilterChange = (columnKey: string, condition: ColumnFilterCondition | undefined) => {
+        setColumnFilters(prev => {
+            const next = { ...prev };
+            if (condition) next[columnKey] = condition;
+            else delete next[columnKey];
+            return next;
+        });
+        setCurrentPage(1);
+    };
+
     // Effective dimensions for rendering
     const effectiveDimensions = useMemo(() =>
         selectedDimensions.length > 0 ? selectedDimensions : ['customer'],
@@ -307,10 +321,28 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
         // Apply Pan-EU grouping when no customer filter is applied
         const processedData = applyPanEUGrouping(data as SalesRecord[], hasCustomerFilter);
 
+        // Apply our comprehensive filters (includes Column Filters now)
+        const filterState: any = {
+            customer: [],
+            year: [],
+            month: [],
+            line: [],
+            asin: [],
+            sku: [],
+            title: [],
+            week: [],
+            stock: [],
+            vendorStock: [],
+            woc: [],
+            bulkSearch: searchTerm,
+            columnFilters
+        };
+        const filteredFlatData = filterData(processedData, filterState, stockMap, vendorStockMap, top50Mode);
+
         // pivotSalesData now handles ads aggregation correctly because it receives CombinedKPIs
-        const { rows } = pivotSalesData(processedData, effectiveDimensions);
+        const { rows } = pivotSalesData(filteredFlatData, effectiveDimensions);
         return rows;
-    }, [data, effectiveDimensions, hasCustomerFilter]);
+    }, [data, effectiveDimensions, hasCustomerFilter, columnFilters, searchTerm, stockMap, vendorStockMap, top50Mode]);
 
     const { years } = useMemo(() => {
         // We still need unique years for columns
@@ -452,13 +484,9 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
 
         // 1. Filter
         if (rowFilters.length > 0) {
-            const latestYear = years[0];
-            const prevYear = years[1];
-
             result = result.filter(row => {
                 return rowFilters.every(filter => {
                     let rowValue = 0;
-
                     if (filter.metric.startsWith('total_sellOut_')) {
                         const y = filter.metric.split('_')[2];
                         rowValue = row.totalsByYear[y]?.sellOut || 0;
@@ -468,6 +496,8 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                         rowValue = row.totalsByYear[y]?.units || 0;
                     }
                     else if (filter.metric === 'growth_sellOut') {
+                        const latestYear = years[0];
+                        const prevYear = years[1];
                         if (!prevYear) return true;
                         const curr = row.totalsByYear[latestYear]?.sellOut || 0;
                         const prev = row.totalsByYear[prevYear]?.sellOut || 0;
@@ -475,6 +505,8 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                         rowValue = ((curr - prev) / prev) * 100;
                     }
                     else if (filter.metric === 'growth_units') {
+                        const latestYear = years[0];
+                        const prevYear = years[1];
                         if (!prevYear) return true;
                         const curr = row.totalsByYear[latestYear]?.units || 0;
                         const prev = row.totalsByYear[prevYear]?.units || 0;
@@ -1186,15 +1218,31 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                             {/* Dynamic Dimension Headers */}
                             {effectiveDimensions.map(dim => {
                                 const label = DIMENSION_OPTIONS.find(d => d.value === dim)?.label || dim;
+                                // Extract unique values for this dimension from ALL pivot rows (pre-filter)
+                                const uniqueValues = Array.from(new Set(pivotRows.map(r => String((r as any)[dim] || ''))))
+                                    .filter(Boolean)
+                                    .sort();
+
                                 return (
                                     <th
                                         key={dim}
-                                        className={`px-4 py-3 border-b border-border cursor-pointer hover:text-white group bg-slate-950 ${dim === 'title' ? 'min-w-[450px]' : 'min-w-[150px]'}`}
+                                        className={`px-4 py-3 border-b border-border group bg-slate-950 ${dim === 'title' ? 'min-w-[450px]' : 'min-w-[150px]'}`}
+                                    >
+                                        <div className="flex items-center justify-between">
+                                            <div
+                                                className="flex items-center cursor-pointer hover:text-white"
                                                 onClick={() => requestSort(dim)}
                                             >
-                                        <div className="flex items-center">
                                                 {label} {getSortIcon(dim)}
                                             </div>
+                                            <ExcelFilter
+                                                columnKey={dim}
+                                                title={label}
+                                                uniqueValues={uniqueValues}
+                                                currentFilter={columnFilters[dim]}
+                                                onFilterChange={handleColumnFilterChange}
+                                            />
+                                        </div>
                                     </th>
                                 );
                             })}

components/ExcelFilter.tsx

@@ -0,0 +1,246 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { ColumnFilterCondition } from '../types';
+import { CloseIcon, FunnelIcon } from './Icons';
+
+interface ExcelFilterProps {
+    columnKey: string;
+    title: string;
+    uniqueValues: string[];
+    currentFilter?: ColumnFilterCondition;
+    onFilterChange: (columnKey: string, condition: ColumnFilterCondition | undefined) => void;
+    icon?: React.ReactNode;
+}
+
+const OPERATORS = [
+    { label: 'Elija uno', value: '' },
+    { label: 'Es igual a', value: 'equals' },
+    { label: 'No es igual a', value: 'notEquals' },
+    { label: 'Contiene', value: 'contains' },
+    { label: 'No contiene', value: 'notContains' },
+    { label: 'Comienza por', value: 'startsWith' },
+    { label: 'No comienza por', value: 'notStartsWith' },
+    { label: 'Termina con', value: 'endsWith' },
+    { label: 'No termina con', value: 'notEndsWith' },
+] as const;
+
+export const ExcelFilter: React.FC<ExcelFilterProps> = ({
+    columnKey,
+    title,
+    uniqueValues,
+    currentFilter,
+    onFilterChange,
+    icon
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [operator, setOperator] = useState<typeof OPERATORS[number]['value']>(currentFilter?.textFilter?.operator || '');
+    const [textValue, setTextValue] = useState(currentFilter?.textFilter?.value || '');
+    const [searchValue, setSearchValue] = useState('');
+    const [tempSelectedValues, setTempSelectedValues] = useState<string[]>(currentFilter?.selectedValues || []);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Synchronization with currentFilter prop
+    useEffect(() => {
+        if (isOpen) {
+            setOperator(currentFilter?.textFilter?.operator || '');
+            setTextValue(currentFilter?.textFilter?.value || '');
+            setTempSelectedValues(currentFilter?.selectedValues || []);
+        }
+    }, [isOpen, currentFilter]);
+
+    // Close when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const filteredValues = useMemo(() => {
+        if (!searchValue) return uniqueValues;
+        const lowerSearch = searchValue.toLowerCase();
+        return uniqueValues.filter(v => String(v).toLowerCase().includes(lowerSearch));
+    }, [uniqueValues, searchValue]);
+
+    const handleToggleSelectAll = () => {
+        if (tempSelectedValues.length === uniqueValues.length) {
+            setTempSelectedValues([]);
+        } else {
+            setTempSelectedValues([...uniqueValues]);
+        }
+    };
+
+    const handleToggleValue = (val: string) => {
+        setTempSelectedValues(prev =>
+            prev.includes(val) ? prev.filter(v => v !== val) : [...prev, val]
+        );
+    };
+
+    const handleApply = () => {
+        const newCondition: ColumnFilterCondition = {
+            ...currentFilter,
+            selectedValues: tempSelectedValues.length > 0 ? tempSelectedValues : undefined,
+            textFilter: operator ? { operator: operator as any, value: textValue } : undefined
+        };
+
+        // Remove empty properties
+        if (!newCondition.selectedValues) delete newCondition.selectedValues;
+        if (!newCondition.textFilter) delete newCondition.textFilter;
+
+        onFilterChange(columnKey, Object.keys(newCondition).length > 0 ? newCondition : undefined);
+        setIsOpen(false);
+    };
+
+    const handleClear = () => {
+        onFilterChange(columnKey, undefined);
+        setOperator('');
+        setTextValue('');
+        setTempSelectedValues([]);
+        setIsOpen(false);
+    };
+
+    const handleSort = (direction: 'asc' | 'desc') => {
+        onFilterChange(columnKey, { ...currentFilter, sort: direction });
+        setIsOpen(false);
+    };
+
+    const hasActiveFilter = !!(currentFilter?.textFilter || currentFilter?.selectedValues);
+
+    return (
+        <div className="relative inline-block ml-1" ref={containerRef}>
+            <button
+                onClick={(e) => {
+                    e.stopPropagation();
+                    setIsOpen(!isOpen);
+                }}
+                className={`flex flex-col items-center gap-0.5 p-1 rounded hover:bg-white/10 transition-all ${hasActiveFilter ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
+                title={`Filter by ${title}`}
+            >
+                {icon || <FunnelIcon className="w-3 h-3" />}
+            </button>
+
+            {isOpen && (
+                <div className="absolute left-0 mt-2 w-72 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] overflow-hidden animate-in fade-in zoom-in duration-150">
+                    <div className="bg-slate-950 px-4 py-3 border-b border-slate-800 flex justify-between items-center">
+                        <span className="text-xs font-black text-slate-300 uppercase tracking-widest">{title}</span>
+                        <button onClick={() => setIsOpen(false)} className="text-slate-500 hover:text-white">
+                            <CloseIcon />
+                        </button>
+                    </div>
+
+                    <div className="p-4 space-y-4 max-h-[80vh] overflow-y-auto custom-scrollbar">
+                        {/* Sort Section */}
+                        <div className="space-y-2">
+                            <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Ordenar</span>
+                            <div className="flex gap-2">
+                                <button
+                                    onClick={() => handleSort('asc')}
+                                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'asc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
+                                >
+                                    <span className="text-lg">A↓Z</span> Ascendente
+                                </button>
+                                <button
+                                    onClick={() => handleSort('desc')}
+                                    className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-xs font-bold transition-all ${currentFilter?.sort === 'desc' ? 'bg-indigo-600 border-indigo-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'}`}
+                                >
+                                    <span className="text-lg">Z↓A</span> Descendente
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Condition Filter Section */}
+                        <div className="space-y-2">
+                            <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Filtro</span>
+                            <div className="space-y-2">
+                                <select
+                                    value={operator}
+                                    onChange={(e) => setOperator(e.target.value as any)}
+                                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
+                                >
+                                    {OPERATORS.map(op => (
+                                        <option key={op.value} value={op.value}>{op.label}</option>
+                                    ))}
+                                </select>
+                                {operator && (
+                                    <input
+                                        type="text"
+                                        value={textValue}
+                                        onChange={(e) => setTextValue(e.target.value)}
+                                        placeholder="Valor..."
+                                        className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-indigo-500"
+                                        autoFocus
+                                    />
+                                )}
+                            </div>
+                        </div>
+
+                        {/* List Selection Section */}
+                        <div className="space-y-2">
+                            <div className="flex justify-between items-center mb-1">
+                                <span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Seleccionar valores</span>
+                            </div>
+
+                            <input
+                                type="text"
+                                placeholder="Buscar en la lista..."
+                                value={searchValue}
+                                onChange={(e) => setSearchValue(e.target.value)}
+                                className="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-indigo-500 mb-2"
+                            />
+
+                            <div className="bg-slate-950 border border-slate-800 rounded-lg p-1 max-h-48 overflow-y-auto custom-scrollbar">
+                                <div
+                                    onClick={handleToggleSelectAll}
+                                    className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs font-bold text-indigo-400"
+                                >
+                                    <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${tempSelectedValues.length === uniqueValues.length ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
+                                        {tempSelectedValues.length === uniqueValues.length && <CheckMark />}
+                                    </div>
+                                    (Seleccionar todo)
+                                </div>
+                                {filteredValues.map(val => {
+                                    const isSelected = tempSelectedValues.includes(val);
+                                    return (
+                                        <div
+                                            key={val}
+                                            onClick={() => handleToggleValue(val)}
+                                            className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer text-xs text-slate-300"
+                                        >
+                                            <div className={`w-3.5 h-3.5 rounded border flex items-center justify-center ${isSelected ? 'bg-indigo-600 border-indigo-500' : 'border-slate-600'}`}>
+                                                {isSelected && <CheckMark />}
+                                            </div>
+                                            <span className="truncate">{val}</span>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-slate-950 p-4 border-t border-slate-800 flex gap-2">
+                        <button
+                            onClick={handleApply}
+                            className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
+                        >
+                            Aplicar filtro
+                        </button>
+                        <button
+                            onClick={handleClear}
+                            className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
+                        >
+                            Borrar filtro
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const CheckMark = () => (
+    <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={4}>
+        <path d="M5 13l4 4L19 7" />
+    </svg>
+);

components/ForecastView.tsx

@@ -13,6 +13,8 @@ import {
     BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
     LineChart, Line, Legend, ComposedChart, Area
 } from 'recharts';
+import { ExcelFilter } from './ExcelFilter';
+import { ColumnFilterCondition } from '../types';
 
 interface ForecastViewProps {
     data: ProductForecastData[];
@@ -195,6 +197,18 @@ const ForecastView: React.FC<ForecastViewProps> = ({
     const [displayCount, setDisplayCount] = useState(50);
     const [sortConfig, setSortConfig] = useState<{ key: string; direction: 'asc' | 'desc' }>({ key: 'actualUnits', direction: 'desc' });
 
+    // State for Column Filters (SKU, ASIN, Title, Line)
+    const [columnFilters, setColumnFilters] = useState<Record<string, ColumnFilterCondition>>({});
+
+    const handleColumnFilterChange = (columnKey: string, condition: ColumnFilterCondition | undefined) => {
+        setColumnFilters(prev => {
+            const next = { ...prev };
+            if (condition) next[columnKey] = condition;
+            else delete next[columnKey];
+            return next;
+        });
+    };
+
     const activeMonths = useMemo(() => {
         if (filters.month && filters.month.length > 0) {
             return filters.month.map(m => m.split('-')[0]);
@@ -262,6 +276,40 @@ const ForecastView: React.FC<ForecastViewProps> = ({
             }
         }
 
+        // Column Filters (Excel-style)
+        if (Object.keys(columnFilters).length > 0) {
+            (Object.entries(columnFilters) as [string, ColumnFilterCondition][]).forEach(([key, condition]) => {
+                if (!condition) return;
+
+                if (condition.selectedValues && condition.selectedValues.length > 0) {
+                    result = result.filter(p => {
+                        const val = String((p as any)[key] || '');
+                        return condition.selectedValues?.includes(val);
+                    });
+                }
+
+                if (condition.textFilter) {
+                    const { operator, value } = condition.textFilter;
+                    const lowerValue = value.toLowerCase();
+
+                    result = result.filter(p => {
+                        const rowVal = String((p as any)[key] || '').toLowerCase();
+                        switch (operator) {
+                            case 'equals': return rowVal === lowerValue;
+                            case 'notEquals': return rowVal !== lowerValue;
+                            case 'contains': return rowVal.includes(lowerValue);
+                            case 'notContains': return !rowVal.includes(lowerValue);
+                            case 'startsWith': return rowVal.startsWith(lowerValue);
+                            case 'notStartsWith': return !rowVal.startsWith(lowerValue);
+                            case 'endsWith': return rowVal.endsWith(lowerValue);
+                            case 'notEndsWith': return !rowVal.endsWith(lowerValue);
+                            default: return true;
+                        }
+                    });
+                }
+            });
+        }
+
         // Apply WOC Filter
         if (wocFilter && wocFilter.length > 0 && vendorStockMap) {
             result = result.filter(p => {
@@ -304,7 +352,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({
         });
 
         return result;
-    }, [calculatedData, debouncedSearch, showOnlyTop50, top50Ranking, top50Mode, sortConfig, wocFilter, vendorStockMap]);
+    }, [calculatedData, debouncedSearch, showOnlyTop50, top50Ranking, top50Mode, sortConfig, wocFilter, vendorStockMap, columnFilters]);
 
     // [MOVED HERE] Global Summary - Now respects all filters including Search/WOC
     const globalSummary = useMemo(() => {
@@ -492,8 +540,75 @@ const ForecastView: React.FC<ForecastViewProps> = ({
                     <table className="w-full text-left border-collapse relative">
                         <thead className="sticky top-0 z-20 bg-slate-950 shadow-sm text-[10px] font-black text-slate-500 uppercase tracking-wider">
                             <tr>
-                                <th className="px-6 py-4 text-white w-[30%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('sku')}>
+                                <th className="px-6 py-4 text-left w-[30%]">
+                                    <div className="flex flex-col gap-2">
+                                        <div className="flex items-center justify-between">
+                                            <span
+                                                className="text-[10px] font-black text-slate-400 uppercase tracking-widest cursor-pointer hover:text-white"
+                                                onClick={() => handleSort('sku')}
+                                            >
                                                 Product Info <SortIndicator column="sku" />
+                                            </span>
+                                            <div className="flex items-center gap-1">
+                                                <ExcelFilter
+                                                    columnKey="sku"
+                                                    title="SKU"
+                                                    uniqueValues={Array.from(new Set(data.map(d => d.sku))).sort()}
+                                                    currentFilter={columnFilters['sku']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">SKU</span>}
+                                                />
+                                                <ExcelFilter
+                                                    columnKey="asin"
+                                                    title="ASIN"
+                                                    uniqueValues={Array.from(new Set(data.map(d => d.asin))).sort()}
+                                                    currentFilter={columnFilters['asin']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">ASIN</span>}
+                                                />
+                                                <ExcelFilter
+                                                    columnKey="title"
+                                                    title="Title"
+                                                    uniqueValues={Array.from(new Set(data.map(d => d.title))).sort()}
+                                                    currentFilter={columnFilters['title']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">Title</span>}
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <InColumnStockFilter
+                                                currentFilters={stockFilter}
+                                                onFilterChange={onStockFilterChange}
+                                                title="Warehouse Stock"
+                                                icon={<WarehouseIcon className="w-3" />}
+                                            />
+                                            <InColumnStockFilter
+                                                currentFilters={vendorStockFilter}
+                                                onFilterChange={onVendorStockFilterChange}
+                                                title="Vendor Stock"
+                                                icon={<AmazonSmileIcon className="w-max" />}
+                                                options={[
+                                                    'Out of Stock (0)',
+                                                    'In Stock (>0)',
+                                                    'In Stock (>20)',
+                                                    'Low Stock (<10)',
+                                                ]}
+                                            />
+                                            <InColumnStockFilter
+                                                currentFilters={wocFilter}
+                                                onFilterChange={onWocFilterChange}
+                                                title="Week Coverage"
+                                                icon={<CoverageIcon className="w-3" />}
+                                                options={[
+                                                    '< 4 Weeks',
+                                                    '> 4 Weeks',
+                                                    'Out of Stock',
+                                                    'Infinite Cover'
+                                                ]}
+                                            />
+                                        </div>
+                                    </div>
                                 </th>
                                 <th className="px-6 py-4 text-center w-[12%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('annualForecast')}>
                                     Annual Forecast <SortIndicator column="annualForecast" />

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 { CombinedKPIs, ColumnFilterCondition, SalesRecord } from '../types';
-import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES, checkNumericConditions } from '../services/dataProcessor';
+import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES, checkNumericConditions, filterData } from '../services/dataProcessor';
 import { StockBadge } from './StockBadge';
 import { InColumnStockFilter } from './InColumnStockFilter';
 import { NumericColumnFilter, NumericFilterConfig, passesNumericFilter } from './NumericColumnFilter';
@@ -9,6 +9,7 @@ import { Top50Badge } from './Top50Badge';
 import { VendorStockBadge } from './VendorStockBadge';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 import { WarehouseIcon, AmazonSmileIcon, CoverageIcon } from './Icons';
+import { ExcelFilter } from './ExcelFilter';
 
 interface WeeklyGridProps {
     data: CombinedKPIs[];
@@ -325,6 +326,19 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
     const [displayCount, setDisplayCount] = useState(50);
     const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+    // State for Column Filters (SKU, ASIN, Title, Line)
+    const [columnFilters, setColumnFilters] = useState<Record<string, ColumnFilterCondition>>({});
+
+    const handleColumnFilterChange = (columnKey: string, condition: ColumnFilterCondition | undefined) => {
+        setColumnFilters(prev => {
+            const next = { ...prev };
+            if (condition) next[columnKey] = condition;
+            else delete next[columnKey];
+            return next;
+        });
+        setCurrentPage(1);
+    };
+
     // Numeric filters for Units, Spend, GV
     const [numericFilters, setNumericFilters] = useState<NumericFilterConfig[]>([]);
 
@@ -409,6 +423,40 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
             });
         }
 
+        // Column Filters (Excel-style) - using logic adapted from filterData
+        if (Object.keys(columnFilters).length > 0) {
+            (Object.entries(columnFilters) as [string, ColumnFilterCondition][]).forEach(([key, condition]) => {
+                if (!condition) return;
+
+                if (condition.selectedValues && condition.selectedValues.length > 0) {
+                    result = result.filter(r => {
+                        const val = String((r as any)[key] || '');
+                        return condition.selectedValues?.includes(val);
+                    });
+                }
+
+                if (condition.textFilter) {
+                    const { operator, value } = condition.textFilter;
+                    const lowerValue = value.toLowerCase();
+
+                    result = result.filter(r => {
+                        const rowVal = String((r as any)[key] || '').toLowerCase();
+                        switch (operator) {
+                            case 'equals': return rowVal === lowerValue;
+                            case 'notEquals': return rowVal !== lowerValue;
+                            case 'contains': return rowVal.includes(lowerValue);
+                            case 'notContains': return !rowVal.includes(lowerValue);
+                            case 'startsWith': return rowVal.startsWith(lowerValue);
+                            case 'notStartsWith': return !rowVal.startsWith(lowerValue);
+                            case 'endsWith': return rowVal.endsWith(lowerValue);
+                            case 'notEndsWith': return !rowVal.endsWith(lowerValue);
+                            default: return true;
+                        }
+                    });
+                }
+            });
+        }
+
         // Search Filter
         if (debouncedSearch) {
             const searchTerms = debouncedSearch.toLowerCase().split(/[\s,]+/).filter(t => t.length > 0);
@@ -492,7 +540,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
         }
 
         return result;
-    }, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks, top50Mode, wocFilter, velocityMap, vendorStockMap, numericFilters]);
+    }, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks, top50Mode, wocFilter, velocityMap, vendorStockMap, numericFilters, columnFilters]);
 
     // 2. Sort results
     const sortedRows = useMemo(() => {
@@ -696,11 +744,56 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                         <thead className="sticky top-0 z-20 bg-slate-900">
                             <tr className="bg-slate-900 border-b border-white/10 relative z-30">
                                 <th
+                                    className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-40 bg-slate-900 border-r border-white/10 min-w-[240px]"
+                                >
+                                    <div className="flex flex-col gap-2">
+                                        <div className="flex items-center justify-between pr-2">
+                                            <div
+                                                className="flex items-center gap-2 cursor-pointer hover:text-white group"
                                                 onClick={() => handleSort('rank', 'rank')}
-                                    className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-40 bg-slate-900 border-r border-white/10 min-w-[240px] cursor-pointer hover:bg-white/5 transition-colors group"
                                             >
-                                    <div className="flex items-center gap-2">
                                                 <span>Product Details</span>
+                                                {sortConfig?.metric === 'rank' && (
+                                                    <span className="text-amber-500 font-black text-sm animate-bounce-subtle">
+                                                        {sortConfig.direction === 'asc' ? '↑' : '↓'}
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <div className="flex items-center gap-1">
+                                                <ExcelFilter
+                                                    columnKey="sku"
+                                                    title="SKU"
+                                                    uniqueValues={Array.from(new Set(rows.map(r => r.sku))).sort()}
+                                                    currentFilter={columnFilters['sku']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">SKU</span>}
+                                                />
+                                                <ExcelFilter
+                                                    columnKey="asin"
+                                                    title="ASIN"
+                                                    uniqueValues={Array.from(new Set(rows.map(r => r.asin))).sort()}
+                                                    currentFilter={columnFilters['asin']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">ASIN</span>}
+                                                />
+                                                <ExcelFilter
+                                                    columnKey="title"
+                                                    title="Title"
+                                                    uniqueValues={Array.from(new Set(rows.map(r => r.title))).sort()}
+                                                    currentFilter={columnFilters['title']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">Title</span>}
+                                                />
+                                                <ExcelFilter
+                                                    columnKey="line"
+                                                    title="Line"
+                                                    uniqueValues={Array.from(new Set(rows.map(r => r.line))).sort()}
+                                                    currentFilter={columnFilters['line']}
+                                                    onFilterChange={handleColumnFilterChange}
+                                                    icon={<span className="text-[10px]">Line</span>}
+                                                />
+                                            </div>
+                                        </div>
                                         <div className="flex items-center gap-1">
                                             <InColumnStockFilter
                                                 currentFilters={stockFilter}
@@ -733,11 +826,6 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                                                 ]}
                                             />
                                         </div>
-                                        {sortConfig?.metric === 'rank' && (
-                                            <span className="text-amber-500 font-black text-sm animate-bounce-subtle">
-                                                {sortConfig.direction === 'asc' ? '↑' : '↓'}
-                                            </span>
-                                        )}
                                     </div>
                                 </th>
                                 {weeks.map(week => (

services/dataProcessor.ts

@@ -871,7 +871,46 @@ export const filterData = (
     vendorStockMap?: Map<string, { eu: number; uk: number }>,
     top50Mode: 'eu' | 'uk' = 'eu'
 ): SalesRecord[] => {
-    return data.filter(item => {
+    let result = data; // Changed from rawData to data
+
+    // 1. Column Filters (Excel-style)
+    if (filters.columnFilters) {
+        Object.entries(filters.columnFilters).forEach(([key, condition]) => {
+            if (!condition) return;
+
+            // Apply selected values filter
+            if (condition.selectedValues && condition.selectedValues.length > 0) {
+                result = result.filter(r => {
+                    const val = String((r as any)[key] || '');
+                    return condition.selectedValues?.includes(val);
+                });
+            }
+
+            // Apply text condition filter
+            if (condition.textFilter) {
+                const { operator, value } = condition.textFilter;
+                const lowerValue = value.toLowerCase();
+
+                result = result.filter(r => {
+                    const rowVal = String((r as any)[key] || '').toLowerCase();
+                    switch (operator) {
+                        case 'equals': return rowVal === lowerValue;
+                        case 'notEquals': return rowVal !== lowerValue;
+                        case 'contains': return rowVal.includes(lowerValue);
+                        case 'notContains': return !rowVal.includes(lowerValue);
+                        case 'startsWith': return rowVal.startsWith(lowerValue);
+                        case 'notStartsWith': return !rowVal.startsWith(lowerValue);
+                        case 'endsWith': return rowVal.endsWith(lowerValue);
+                        case 'notEndsWith': return !rowVal.endsWith(lowerValue);
+                        default: return true;
+                    }
+                });
+            }
+        });
+    }
+
+    // 2. Standard Filters
+    return result.filter(item => { // Apply remaining filters to the 'result'
         // 1. Month Logic: Handle "Apr-23" matching "Apr" filter
         const recordMonth = item.month; // e.g. "Apr-23"
         const pureMonth = recordMonth.split('-')[0]; // "Apr"

types.ts

@@ -27,6 +27,16 @@ export interface FilterState {
   vendorStock: string[]; // Added Vendor Stock filter
   woc: string[]; // Added Weeks of Coverage filter
   bulkSearch: string; // Added Bulk Search support
+  columnFilters: Record<string, ColumnFilterCondition>; // Added Excel-style column filters
+}
+
+export interface ColumnFilterCondition {
+  textFilter?: {
+    operator: 'equals' | 'notEquals' | 'contains' | 'notContains' | 'startsWith' | 'notStartsWith' | 'endsWith' | 'notEndsWith';
+    value: string;
+  };
+  selectedValues?: string[];
+  sort?: 'asc' | 'desc';
 }
 
 export interface GrowthMetric {