feat: standardize ColumnFilterPopover and add SELECT ALL to all views/tabs

src/components/PricingView.tsx

@@ -15,6 +15,7 @@ import {
   Search,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
+import { ColumnFilterPopover } from './ColumnFilterPopover';
 
 interface PricingViewProps {
   data: ExcelRow[];
@@ -648,80 +649,6 @@ function TextFilterPopover({ value, onChange, onClose }: {
   );
 }
 
-// ── Multi-select column filter popover ────────────────────────────────────────
-function ColumnFilterPopover({ uniqueValues, selectedValues, onToggle, onSelectAll, onClear, onClose }: {
-  uniqueValues: string[];
-  selectedValues: string[];
-  onToggle: (val: string) => void;
-  onSelectAll: (vals: string[]) => void;
-  onClear: () => void;
-  onClose: () => void;
-}) {
-  const [search, setSearch] = useState('');
-  const filtered = uniqueValues.filter(v => v.toLowerCase().includes(search.toLowerCase()));
-
-  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="Filter values…"
-          value={search}
-          onChange={e => setSearch(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>
-
-      <div className="flex items-center justify-between px-1">
-        <label className="flex items-center gap-2 py-1 px-1.5 hover:bg-slate-700/50 rounded cursor-pointer group">
-          <div className={cn(
-            "w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
-            selectedValues.length === uniqueValues.length ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
-          )}>
-            {selectedValues.length === uniqueValues.length && <Check className="w-3 h-3 text-white" />}
-          </div>
-          <input
-            type="checkbox"
-            className="hidden"
-            checked={selectedValues.length === uniqueValues.length}
-            onChange={() => {
-              if (selectedValues.length === uniqueValues.length) {
-                onSelectAll([]);
-              } else {
-                onSelectAll(uniqueValues);
-              }
-            }}
-          />
-          <span className="text-[11px] font-semibold text-slate-300">Select All</span>
-        </label>
-        <span className="text-[10px] text-slate-500">{selectedValues.length} selected</span>
-      </div>
-
-      <div className="max-h-48 overflow-y-auto space-y-0.5">
-        {filtered.map(val => (
-          <label key={val} className="flex items-center gap-2 px-1.5 py-1 hover:bg-slate-700/50 rounded cursor-pointer group">
-            <div className={cn(
-              'w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors',
-              selectedValues.includes(val) ? 'bg-blue-600 border-blue-600' : 'border-slate-600 bg-slate-900 group-hover:border-slate-500'
-            )}>
-              {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
-            </div>
-            <input type="checkbox" className="hidden" checked={selectedValues.includes(val)} onChange={() => onToggle(val)} />
-            <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
-          </label>
-        ))}
-        {filtered.length === 0 && <p className="text-[10px] text-slate-500 text-center py-2">No values</p>}
-      </div>
-      <div className="flex items-center justify-between pt-1 border-t border-slate-700">
-        <button onClick={onClear} 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>
-    </div>
-  );
-}
-
 // ── Stat card ─────────────────────────────────────────────────────────────────
 function StatCard({
   label,