feat: add Smart Range filter for Weeks

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"

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);
 
@@ -75,6 +77,49 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
     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>
@@ -114,6 +159,27 @@ 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