Implement Vendor Stock Filtering across Weekly Sales, Ads, and Forecast views

components/InColumnStockFilter.tsx

@@ -3,15 +3,22 @@ import React, { useState, useRef, useEffect } from 'react';
 interface InColumnStockFilterProps {
     currentFilters: string[];
     onFilterChange: (newFilters: string[]) => void;
+    title?: string;
+    options?: string[];
 }
 
-const STOCK_OPTIONS = [
+const DEFAULT_STOCK_OPTIONS = [
     'Out of Stock (0)',
     'In Stock (>0)',
     'Low Stock (<10)',
 ];
 
-export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({ currentFilters, onFilterChange }) => {
+export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
+    currentFilters,
+    onFilterChange,
+    title = "Stock Filter",
+    options = DEFAULT_STOCK_OPTIONS
+}) => {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -59,12 +66,12 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({ curren
             {isOpen && (
                 <div className="absolute left-0 mt-2 w-48 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
                     <div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-1 flex justify-between items-center">
-                        <span>Stock Filter</span>
+                        <span>{title}</span>
                         {currentFilters.length > 0 && (
                             <button onClick={clearFilters} className="text-indigo-400 hover:text-indigo-300">Clear</button>
                         )}
                     </div>
-                    {STOCK_OPTIONS.map(option => {
+                    {options.map(option => {
                         const isSelected = currentFilters.includes(option);
                         return (
                             <div