From dbc47d95cb3972f9317d5d8e4646f26aea0ddc5a Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 24 Apr 2026 12:27:30 +0200
Subject: [PATCH] feat: implement advanced Excel-style Custom Filter for SKU
 and Name columns and fix search clear bug

---
 src/components/PricingView.tsx | 162 +++++++++++++++++++++++++--------
 1 file changed, 124 insertions(+), 38 deletions(-)

diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx
index 0da3223..3d4db04 100644
--- a/src/components/PricingView.tsx
+++ b/src/components/PricingView.tsx
@@ -80,7 +80,8 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
   const [lineMultiFilter, setLineMultiFilter] = useState<string[]>([]);
   const [classificationFilter, setClassificationFilter] = useState<string[]>([]);
   const [productTypeFilter, setProductTypeFilter] = useState<string[]>([]);
-  const [nameColFilter, setNameColFilter] = useState('');
+  const [nameColFilter, setNameColFilter] = useState<{ t1: string; t2: string; op: 'and' | 'or' }>({ t1: '', t2: '', op: 'and' });
+  const [articleNoColFilter, setArticleNoColFilter] = useState<{ t1: string; t2: string; op: 'and' | 'or' }>({ t1: '', t2: '', op: 'and' });
   const [openFilter, setOpenFilter] = useState<string | null>(null);
   const [unitsOuterFilter, setUnitsOuterFilter] = useState<string[]>([]);
   const [outerWFilter, setOuterWFilter] = useState<string[]>([]);
@@ -335,15 +336,24 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
     }
 
     // Column filters
-    // Column-specific name filter - Multi-word AND support
-    if (nameColFilter) {
-      const terms = nameColFilter.toLowerCase().split(/\s+/).filter(Boolean);
-      if (terms.length > 0) {
-        result = result.filter(r => {
-          const name = String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase();
-          return terms.every(term => name.includes(term));
-        });
-      }
+    // Column-specific name filter - Excel-style Custom Filter
+    if (nameColFilter.t1 || nameColFilter.t2) {
+      result = result.filter(r => {
+        const name = String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase();
+        const m1 = nameColFilter.t1 ? name.includes(nameColFilter.t1.toLowerCase()) : (nameColFilter.op === 'and');
+        const m2 = nameColFilter.t2 ? name.includes(nameColFilter.t2.toLowerCase()) : (nameColFilter.op === 'and');
+        return nameColFilter.op === 'and' ? (m1 && m2) : (m1 || m2);
+      });
+    }
+
+    // Column-specific SKU filter - Excel-style Custom Filter
+    if (articleNoColFilter.t1 || articleNoColFilter.t2) {
+      result = result.filter(r => {
+        const sku = String(r.row[COLUMNS.ARTICLE_NO] || '').toLowerCase();
+        const m1 = articleNoColFilter.t1 ? sku.includes(articleNoColFilter.t1.toLowerCase()) : (articleNoColFilter.op === 'and');
+        const m2 = articleNoColFilter.t2 ? sku.includes(articleNoColFilter.t2.toLowerCase()) : (articleNoColFilter.op === 'and');
+        return articleNoColFilter.op === 'and' ? (m1 && m2) : (m1 || m2);
+      });
     }
     if (lineMultiFilter.length > 0) {
       result = result.filter(r => lineMultiFilter.includes(String(r.row[COLUMNS.LINE] || '')));
@@ -761,12 +771,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
             />
             {selectedSearchItems.size > 0 ? (
               <button
-                onClick={handleClearSearch}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-blue-400 hover:text-white flex items-center gap-1"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClearSearch();
+                }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white flex items-center gap-1.5 px-2 py-1 rounded-md transition-all shadow-lg active:scale-95"
+                title="Clear selection"
               >
-                <span className="text-xs bg-blue-600 text-white rounded-full w-5 h-5 flex items-center justify-center">
+                <span className="text-[10px] font-bold">
                   {selectedSearchItems.size}
                 </span>
+                <X className="w-3.5 h-3.5" />
               </button>
             ) : search ? (
               <button
@@ -823,10 +838,14 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
               </div>
               <div className="flex items-center justify-between px-4 py-2 bg-slate-900/50 border-t border-slate-700">
                 <button
-                  onClick={handleClearSearch}
-                  className="text-xs text-slate-400 hover:text-white"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClearSearch();
+                  }}
+                  className="flex items-center gap-1 text-xs text-red-400 hover:text-red-300 font-medium transition-colors"
                 >
-                  Clear ({selectedSearchItems.size})
+                  <X className="w-3 h-3" />
+                  Clear Selection ({selectedSearchItems.size})
                 </button>
                 <button
                   onClick={handleApplySearch}
@@ -909,10 +928,26 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
           <table ref={tableRef} className="w-full text-sm border-collapse table-fixed">
             <thead className="sticky top-0 z-10 bg-slate-900 border-b border-slate-700">
               <tr>
-                <th style={{ width: columnWidths.articleNo }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap relative group cursor-pointer hover:bg-slate-800/50 transition-colors" onClick={() => handleSort('articleNo')}>
-                  <div className="flex items-center justify-between gap-1">
-                    <span className="flex items-center gap-1">Art. No. <SortIcon current={sortConfig.key === 'articleNo' ? sortConfig.direction : null} /></span>
+                <th style={{ width: columnWidths.articleNo }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative" onClick={() => handleSort('articleNo')}>
+                  <div className="flex items-center gap-1">
+                    <span className="truncate flex items-center gap-1">Article No <SortIcon current={sortConfig.key === 'articleNo' ? sortConfig.direction : null} /></span>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setOpenFilter(openFilter === 'sku' ? null : 'sku'); }}
+                      className={cn(
+                        'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
+                        (articleNoColFilter.t1 || articleNoColFilter.t2) ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
+                      )}
+                    >
+                      <Filter className="w-3 h-3" />
+                    </button>
                   </div>
+                  {openFilter === 'sku' && (
+                    <TextFilterPopover
+                      value={articleNoColFilter}
+                      onChange={setArticleNoColFilter}
+                      onClose={() => setOpenFilter(null)}
+                    />
+                  )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleNo', columnWidths.articleNo); }} />
                 </th>
                 <th style={{ width: columnWidths.articleName }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative" onClick={() => handleSort('articleName')}>
@@ -922,7 +957,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onClick={(e) => { e.stopPropagation(); setOpenFilter(openFilter === 'name' ? null : 'name'); }}
                       className={cn(
                         'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
-                        nameColFilter ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
+                        (nameColFilter.t1 || nameColFilter.t2) ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
                       )}
                     >
                       <Filter className="w-3 h-3" />
@@ -1607,29 +1642,80 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
 
 // ── Text filter popover ───────────────────────────────────────────────────────
 function TextFilterPopover({ value, onChange, onClose }: {
-  value: string;
-  onChange: (v: string) => void;
+  value: { t1: string; t2: string; op: 'and' | 'or' };
+  onChange: (v: { t1: string; t2: string; op: 'and' | 'or' }) => void;
   onClose: () => void;
 }) {
   return (
-    <div className="absolute top-full left-0 mt-1 w-56 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100">
-      <div className="relative">
-        <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
-        <input
-          type="text"
-          placeholder="Search (multiple words supported)..."
-          value={value}
-          onChange={e => onChange(e.target.value)}
-          autoFocus
-          className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 text-xs text-white focus:outline-none focus:border-blue-500"
-        />
-        <div className="mt-1 text-[9px] text-slate-500 italic px-1">
-          Use spaces to search multiple terms (AND logic)
+    <div className="absolute top-full left-0 mt-1 w-64 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-4 flex flex-col gap-4 animate-in fade-in zoom-in-95 duration-100">
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Show rows where name contains:</label>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
+            <input
+              type="text"
+              placeholder="First term..."
+              value={value.t1}
+              onChange={e => onChange({ ...value, t1: e.target.value })}
+              autoFocus
+              className="w-full bg-slate-900 border border-slate-700 rounded-md p-2 pl-8 text-xs text-white focus:outline-none focus:border-blue-500 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4 px-1">
+          <label className="flex items-center gap-2 cursor-pointer group">
+            <input 
+              type="radio" 
+              name="op" 
+              checked={value.op === 'and'} 
+              onChange={() => onChange({ ...value, op: 'and' })}
+              className="w-3 h-3 text-blue-600 bg-slate-900 border-slate-700 focus:ring-blue-500"
+            />
+            <span className={cn("text-[10px] font-bold transition-colors", value.op === 'and' ? "text-blue-400" : "text-slate-500 group-hover:text-slate-300")}>AND</span>
+          </label>
+          <label className="flex items-center gap-2 cursor-pointer group">
+            <input 
+              type="radio" 
+              name="op" 
+              checked={value.op === 'or'} 
+              onChange={() => onChange({ ...value, op: 'or' })}
+              className="w-3 h-3 text-blue-600 bg-slate-900 border-slate-700 focus:ring-blue-500"
+            />
+            <span className={cn("text-[10px] font-bold transition-colors", value.op === 'or' ? "text-blue-400" : "text-slate-500 group-hover:text-slate-300")}>OR</span>
+          </label>
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Second term..."
+              value={value.t2}
+              onChange={e => onChange({ ...value, t2: e.target.value })}
+              className="w-full bg-slate-900 border border-slate-700 rounded-md p-2 pl-8 text-xs text-white focus:outline-none focus:border-blue-500 transition-all"
+            />
+          </div>
         </div>
       </div>
-      <div className="flex items-center justify-between pt-1 border-t border-slate-700">
-        <button onClick={() => { onChange(''); onClose(); }} className="text-[10px] font-medium text-slate-400 hover:text-white transition-colors">Clear</button>
-        <button onClick={onClose} className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors">OK</button>
+
+      <div className="flex items-center justify-between pt-2 border-t border-slate-700/50">
+        <button 
+          onClick={() => { onChange({ t1: '', t2: '', op: 'and' }); onClose(); }} 
+          className="text-[10px] font-bold text-slate-500 hover:text-red-400 transition-colors"
+        >
+          Clear All
+        </button>
+        <div className="flex gap-2">
+          <button 
+            onClick={onClose} 
+            className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded shadow-lg shadow-blue-900/20 active:scale-95 transition-all"
+          >
+            Apply Filter
+          </button>
+        </div>
       </div>
     </div>
   );