Add Excel-like filter conditions to column filters

Add Condition tab with: equals, not equals, contains, starts with, ends with, greater than, less than, between

src/components/ColumnFilterPopover.tsx

@@ -1,7 +1,15 @@
 import React, { useState, useMemo } from 'react';
-import { Search, Check, X } from 'lucide-react';
+import { Search, Check, X, Filter } from 'lucide-react';
 import { cn } from '../lib/utils';
 
+type FilterType = 'equals' | 'notEquals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'between';
+
+interface FilterCondition {
+  type: FilterType;
+  value: string;
+  value2?: string;
+}
+
 interface ColumnFilterPopoverProps {
   uniqueValues: string[];
   selectedValues: string[];
@@ -24,6 +32,17 @@ export function ColumnFilterPopover({
   className
 }: ColumnFilterPopoverProps) {
   const [search, setSearch] = useState('');
+  const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values');
+  const [condition, setCondition] = useState<FilterCondition>({ type: 'equals', value: '' });
+  const [conditionResult, setConditionResult] = useState<string[]>([]);
+
+  const isDraggingRef = React.useRef(false);
+  const dragStartRef = React.useRef<number | null>(null);
+  const hoveredIndexRef = React.useRef<number | null>(null);
+  const selectedValuesRef = React.useRef<string[]>(selectedValues);
+  const onSelectAllRef = React.useRef(onSelectAll);
+  const filteredValuesRef = React.useRef<string[]>([]);
+  const didDragRef = React.useRef(false);
   const [isDragging, setIsDragging] = useState(false);
   const [dragStart, setDragStart] = useState<number | null>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -36,19 +55,57 @@ export function ColumnFilterPopover({
     );
   }, [uniqueValues, search]);
 
-  const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;
+  filteredValuesRef.current = filteredValues;
-
-  const isDraggingRef = React.useRef(false);
-  const dragStartRef = React.useRef<number | null>(null);
-  const hoveredIndexRef = React.useRef<number | null>(null);
-  const selectedValuesRef = React.useRef<string[]>(selectedValues);
-  const onSelectAllRef = React.useRef(onSelectAll);
-  const filteredValuesRef = React.useRef(filteredValues);
-  const didDragRef = React.useRef(false);
-
   selectedValuesRef.current = selectedValues;
   onSelectAllRef.current = onSelectAll;
-  filteredValuesRef.current = filteredValues;
+
+  const isAllSelected = selectedValues.length === uniqueValues.length && uniqueValues.length > 0;
+
+  const applyCondition = () => {
+    const results: string[] = [];
+    const valNum = parseFloat(condition.value);
+    const val2Num = condition.value2 ? parseFloat(condition.value2) : 0;
+
+    filteredValues.forEach(v => {
+      const strVal = String(v || '');
+      const numVal = parseFloat(v);
+
+      let matches = false;
+
+      switch (condition.type) {
+        case 'equals':
+          matches = strVal.toLowerCase() === condition.value.toLowerCase();
+          break;
+        case 'notEquals':
+          matches = strVal.toLowerCase() !== condition.value.toLowerCase();
+          break;
+        case 'contains':
+          matches = strVal.toLowerCase().includes(condition.value.toLowerCase());
+          break;
+        case 'startsWith':
+          matches = strVal.toLowerCase().startsWith(condition.value.toLowerCase());
+          break;
+        case 'endsWith':
+          matches = strVal.toLowerCase().endsWith(condition.value.toLowerCase());
+          break;
+        case 'greaterThan':
+          matches = !isNaN(numVal) && !isNaN(valNum) && numVal > valNum;
+          break;
+        case 'lessThan':
+          matches = !isNaN(numVal) && !isNaN(valNum) && numVal < valNum;
+          break;
+        case 'between':
+          matches = !isNaN(numVal) && !isNaN(val2Num) && numVal >= valNum && numVal <= val2Num;
+          break;
+      }
+
+      if (matches) results.push(v);
+    });
+
+    setConditionResult(results);
+    onSelectAll(results);
+    setActiveTab('values');
+  };
 
   const handleMouseDown = (index: number) => {
     isDraggingRef.current = true;
@@ -73,7 +130,6 @@ export function ColumnFilterPopover({
         const start = dragStartRef.current;
         const end = hoveredIndexRef.current;
         
-        // Only trigger special drag-select if it covered more than one item
         if (start !== null && end !== null && start !== end) {
           const s = Math.min(start, end);
           const e = Math.max(start, end);
@@ -81,8 +137,6 @@ export function ColumnFilterPopover({
           const newSelected = new Set([...selectedValuesRef.current]);
           itemsToSelect.forEach(v => newSelected.add(v));
           onSelectAllRef.current(Array.from(newSelected));
-          
-          // Set flag to prevent subsequent click event from toggling the end item
           didDragRef.current = true;
           setTimeout(() => { didDragRef.current = false; }, 100);
         }
@@ -102,13 +156,37 @@ export function ColumnFilterPopover({
   return (
     <div
       className={cn(
-        "absolute top-full left-0 mt-1 w-64 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",
+        "absolute top-full left-0 mt-1 w-72 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",
         className
       )}
       onClick={(e) => e.stopPropagation()}
     >
       {title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
 
+      <div className="flex gap-1 border-b border-slate-700 pb-2">
+        <button
+          onClick={() => setActiveTab('values')}
+          className={cn(
+            "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors",
+            activeTab === 'values' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+          )}
+        >
+          Values ({selectedValues.length})
+        </button>
+        <button
+          onClick={() => setActiveTab('condition')}
+          className={cn(
+            "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors flex items-center justify-center gap-1",
+            activeTab === 'condition' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+          )}
+        >
+          <Filter className="w-3 h-3" />
+          Condition
+        </button>
+      </div>
+
+      {activeTab === 'values' ? (
+        <>
           <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
@@ -145,9 +223,7 @@ export function ColumnFilterPopover({
                   onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
                   onMouseEnter={() => handleMouseEnter(idx)}
                   onClick={(e) => {
-                // If a drag operation just happened, ignore the click to avoid double-selection issues
                     if (didDragRef.current) return;
-                
                     if (e.shiftKey && lastClickedIndex !== null) {
                       const start = Math.min(lastClickedIndex, idx);
                       const end = Math.max(lastClickedIndex, idx);
@@ -199,7 +275,7 @@ export function ColumnFilterPopover({
                 onClick={onClear}
                 className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
               >
-            Clear Current
+                Clear
               </button>
             </div>
             <button
@@ -209,6 +285,67 @@ export function ColumnFilterPopover({
               OK
             </button>
           </div>
+        </>
+      ) : (
+        <>
+          <div className="space-y-2">
+            <div>
+              <label className="text-[10px] text-slate-400 uppercase">Condition Type</label>
+              <select
+                value={condition.type}
+                onChange={e => setCondition({ ...condition, type: e.target.value as FilterType })}
+                className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+              >
+                <option value="equals">Equals (=)</option>
+                <option value="notEquals">Not Equals (≠)</option>
+                <option value="contains">Contains</option>
+                <option value="startsWith">Starts With</option>
+                <option value="endsWith">Ends With</option>
+                <option value="greaterThan">Greater Than (&gt;)</option>
+                <option value="lessThan">Less Than (&lt;)</option>
+                <option value="between">Between</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="text-[10px] text-slate-400 uppercase">Value</label>
+              <input
+                type="text"
+                value={condition.value}
+                onChange={e => setCondition({ ...condition, value: e.target.value })}
+                placeholder="Enter value..."
+                className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+              />
+            </div>
+
+            {condition.type === 'between' && (
+              <div>
+                <label className="text-[10px] text-slate-400 uppercase">And</label>
+                <input
+                  type="text"
+                  value={condition.value2 || ''}
+                  onChange={e => setCondition({ ...condition, value2: e.target.value })}
+                  placeholder="Enter second value..."
+                  className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+                />
+              </div>
+            )}
+
+            <button
+              onClick={applyCondition}
+              className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors"
+            >
+              Apply Condition
+            </button>
+          </div>
+
+          {conditionResult.length > 0 && (
+            <div className="text-[10px] text-green-400 text-center pt-2 border-t border-slate-700">
+              Found {conditionResult.length} matching value{conditionResult.length !== 1 ? 's' : ''}
+            </div>
+          )}
+        </>
+      )}
     </div>
   );
 }