From b850803f701f449055fa366e366c775e2104ceff Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 16 Jan 2026 13:11:10 +0100
Subject: [PATCH] feat: add Smart Range filter for Weeks

---
 components/FilterBar.tsx           |   1 +
 components/MultiSelectDropdown.tsx | 104 +++++++++++++++++++++++------
 2 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/components/FilterBar.tsx b/components/FilterBar.tsx
index 34f1a0b..9eb7cae 100644
--- a/components/FilterBar.tsx
+++ b/components/FilterBar.tsx
@@ -49,6 +49,7 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
           options={options.week}
           onChange={(v) => onFilterChange('week', v)}
           className="flex-1"
+          enableRangeSelect={true}
         />
         <MultiSelectDropdown
           label="Product Line"
diff --git a/components/MultiSelectDropdown.tsx b/components/MultiSelectDropdown.tsx
index c7993e3..4938b76 100644
--- a/components/MultiSelectDropdown.tsx
+++ b/components/MultiSelectDropdown.tsx
@@ -8,11 +8,13 @@ interface MultiSelectDropdownProps {
   options: string[];
   onChange: (newSelected: string[]) => void;
   className?: string;
+  enableRangeSelect?: boolean;
 }
 
-const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, selected, options, onChange, className }) => {
+const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, selected, options, onChange, className, enableRangeSelect }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [rangeInput, setRangeInput] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -72,21 +74,64 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
   };
 
   const handleClear = () => {
-      onChange([]);
+    onChange([]);
   };
 
+  const handleRangeApply = () => {
+    if (!rangeInput.trim()) return;
+
+    const input = rangeInput.trim().toLowerCase().replace('w', ''); // Allow "W5" -> "5"
+    let predicate: (num: number) => boolean = () => false;
+
+    // Parse Input
+    if (input.includes('-')) {
+      const [start, end] = input.split('-').map(s => parseFloat(s.trim()));
+      if (!isNaN(start) && !isNaN(end)) {
+        predicate = (n) => n >= start && n <= end;
+      }
+    } else if (input.startsWith('<=')) {
+      const val = parseFloat(input.substring(2).trim());
+      if (!isNaN(val)) predicate = (n) => n <= val;
+    } else if (input.startsWith('>=')) {
+      const val = parseFloat(input.substring(2).trim());
+      if (!isNaN(val)) predicate = (n) => n >= val;
+    } else if (input.startsWith('<')) {
+      const val = parseFloat(input.substring(1).trim());
+      if (!isNaN(val)) predicate = (n) => n < val;
+    } else if (input.startsWith('>')) {
+      const val = parseFloat(input.substring(1).trim());
+      if (!isNaN(val)) predicate = (n) => n > val;
+    } else {
+      // Exact match
+      const val = parseFloat(input);
+      if (!isNaN(val)) predicate = (n) => n === val;
+    }
+
+    // Apply to Options
+    const newSelected = options.filter(opt => {
+      // Extract number from option (e.g. "W1" -> 1, "2023" -> 2023)
+      const num = parseFloat(opt.replace(/\D/g, ''));
+      if (isNaN(num)) return false;
+      return predicate(num);
+    });
+
+    onChange(newSelected);
+    setRangeInput(''); // Clear input after apply
+  };
+
+
   return (
     <div className={`flex flex-col min-w-[150px] relative ${className}`} ref={dropdownRef}>
       <label className="text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">{label}</label>
-      
+
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={`w-full text-left bg-surface border border-border hover:border-slate-600 text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors flex justify-between items-center
         ${selected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
       >
         <span className="truncate">
-          {selected.length === 0 
-            ? (label === 'Customer' ? 'All Customers' : `All ${label}s`) 
+          {selected.length === 0
+            ? (label === 'Customer' ? 'All Customers' : `All ${label}s`)
             : `${selected.length} selected`}
         </span>
         <svg className={`fill-current h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -96,16 +141,16 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
 
       {isOpen && (
         <div className="absolute top-[calc(100%+4px)] left-0 w-64 max-h-96 overflow-hidden bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[100] animate-fade-in flex flex-col">
-          
+
           {/* Search Bar */}
           <div className="p-2 border-b border-slate-800 sticky top-0 bg-slate-900 z-10">
             <div className="relative">
               <span className="absolute left-2.5 top-2.5 text-slate-500">
                 <SearchIcon />
               </span>
-              <input 
+              <input
                 ref={inputRef}
-                type="text" 
+                type="text"
                 placeholder={`Search ${label}...`}
                 className="w-full bg-slate-950 border border-slate-700 text-slate-200 text-sm rounded-md py-1.5 pl-9 pr-2 focus:outline-none focus:border-primary"
                 value={searchTerm}
@@ -114,18 +159,39 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
             </div>
           </div>
 
+          {/* Range Filter (Optional) */}
+          {enableRangeSelect && (
+            <div className="p-2 border-b border-slate-800 bg-slate-900/80 items-center flex gap-2">
+              <input
+                type="text"
+                placeholder="Range (e.g. <=5, 1-5)"
+                className="flex-1 bg-slate-950 border border-slate-700 text-slate-200 text-xs rounded px-2 py-1 focus:outline-none focus:border-primary"
+                value={rangeInput}
+                onChange={(e) => setRangeInput(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleRangeApply()}
+              />
+              <button
+                onClick={handleRangeApply}
+                className="px-2 py-1 bg-indigo-600 hover:bg-indigo-500 text-white text-xs rounded"
+              >
+                Apply
+              </button>
+            </div>
+          )}
+
+
           <div className="flex justify-between py-2 px-2 border-b border-slate-800 bg-slate-900/50">
-              <button onClick={handleSelectAll} className="text-xs text-primary hover:text-indigo-400 font-medium px-2">
-                  {searchTerm 
-                    ? (filteredOptions.every(opt => selected.includes(opt)) ? 'Unselect Results' : 'Select Results')
-                    : (selected.length === options.length ? 'Unselect All' : 'Select All')
-                  }
-              </button>
-              <button onClick={handleClear} className="text-xs text-slate-400 hover:text-white px-2">
-                  Clear
-              </button>
+            <button onClick={handleSelectAll} className="text-xs text-primary hover:text-indigo-400 font-medium px-2">
+              {searchTerm
+                ? (filteredOptions.every(opt => selected.includes(opt)) ? 'Unselect Results' : 'Select Results')
+                : (selected.length === options.length ? 'Unselect All' : 'Select All')
+              }
+            </button>
+            <button onClick={handleClear} className="text-xs text-slate-400 hover:text-white px-2">
+              Clear
+            </button>
           </div>
-          
+
           <div className="space-y-1 overflow-y-auto custom-scrollbar p-2 max-h-60">
             {filteredOptions.map((opt) => (
               <label key={opt} className="flex items-center space-x-3 p-2 rounded hover:bg-slate-800 cursor-pointer group">
@@ -136,7 +202,7 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
                   className="form-checkbox h-4 w-4 text-primary rounded border-slate-600 bg-slate-800 focus:ring-primary focus:ring-offset-slate-900 transition duration-150 ease-in-out"
                 />
                 <span className={`text-sm break-all group-hover:text-white ${selected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
-                    {opt}
+                  {opt}
                 </span>
               </label>
             ))}