diff --git a/components/AdsPerformance.tsx b/components/AdsPerformance.tsx index f75971f..0a5f863 100644 --- a/components/AdsPerformance.tsx +++ b/components/AdsPerformance.tsx @@ -6,6 +6,7 @@ import { StockBadge } from './StockBadge'; import { Top50Badge } from './Top50Badge'; import { VendorStockBadge } from './VendorStockBadge'; import { InColumnStockFilter } from './InColumnStockFilter'; +import { WarehouseIcon, AmazonSmileIcon, CoverageIcon } from './Icons'; interface AdsPerformanceProps { data: CombinedKPIs[]; @@ -427,11 +428,13 @@ const AdsPerformance: React.FC = ({ currentFilters={stockFilter} onFilterChange={onStockFilterChange} title="Warehouse Stock" + icon={} /> } options={[ 'Out of Stock (0)', 'In Stock (>0)', @@ -443,6 +446,7 @@ const AdsPerformance: React.FC = ({ currentFilters={wocFilter} onFilterChange={onWocFilterChange} title="Week Coverage" + icon={} options={[ '< 4 Weeks', '> 4 Weeks', diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx index ee60534..9ea6617 100644 --- a/components/ForecastView.tsx +++ b/components/ForecastView.tsx @@ -3,6 +3,7 @@ import * as XLSX from 'xlsx'; import { ProductForecastData, FilterState, CombinedKPIs } from '../types'; import { DownloadIcon, FunnelIcon, TrendingIcon, ChartIcon } from './Icons'; import { StockBadge } from './StockBadge'; +import { WarehouseIcon, AmazonSmileIcon, CoverageIcon } from './Icons'; import { Top50Badge } from './Top50Badge'; import { VendorStockBadge } from './VendorStockBadge'; import { InColumnStockFilter } from './InColumnStockFilter'; @@ -436,10 +437,29 @@ const ForecastView: React.FC = ({ className="bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none w-64" /> + } + /> + } + options={[ + 'Out of Stock (0)', + 'In Stock (>0)', + 'In Stock (>20)', + 'Low Stock (<10)', + ]} + /> } options={[ '< 4 Weeks', '> 4 Weeks', diff --git a/components/Icons.tsx b/components/Icons.tsx index 31abc34..84e6eec 100644 --- a/components/Icons.tsx +++ b/components/Icons.tsx @@ -27,15 +27,15 @@ export const SendIcon = () => ( ); export const ChartIcon = () => ( - - - + + + ); export const TableIcon = () => ( - - - + + + ); export const SearchIcon = () => ( @@ -51,9 +51,9 @@ export const DownloadIcon = () => ( ); export const FunnelIcon = () => ( - - - + + + ); export const TrendingIcon = () => ( @@ -67,3 +67,24 @@ export const MegaphoneIcon = () => ( ); + +export const WarehouseIcon = ({ className = "w-4 h-4" }) => ( + + + + + +); + +export const AmazonSmileIcon = ({ className = "w-4 h-4" }) => ( + + + +); + +export const CoverageIcon = ({ className = "w-4 h-4" }) => ( + + + + +); diff --git a/components/InColumnStockFilter.tsx b/components/InColumnStockFilter.tsx index d301347..922c043 100644 --- a/components/InColumnStockFilter.tsx +++ b/components/InColumnStockFilter.tsx @@ -5,6 +5,7 @@ interface InColumnStockFilterProps { onFilterChange: (newFilters: string[]) => void; title?: string; options?: string[]; + icon?: React.ReactNode; } const DEFAULT_STOCK_OPTIONS = [ @@ -17,7 +18,8 @@ export const InColumnStockFilter: React.FC = ({ currentFilters, onFilterChange, title = "Stock Filter", - options = DEFAULT_STOCK_OPTIONS + options = DEFAULT_STOCK_OPTIONS, + icon }) => { const [isOpen, setIsOpen] = useState(false); const containerRef = useRef(null); @@ -55,12 +57,18 @@ export const InColumnStockFilter: React.FC = ({ e.stopPropagation(); setIsOpen(!isOpen); }} - className={`p-1 rounded hover:bg-white/10 transition-colors ${currentFilters.length > 0 ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`} - title="Filter by Stock" + className={`flex flex-col items-center gap-0.5 p-1 rounded hover:bg-white/10 transition-all ${currentFilters.length > 0 ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`} + title={`Filter by ${title}`} > - - - + {icon ? ( +
+ {icon} +
+ ) : ( + + + + )} {isOpen && ( diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx index fd06013..54c98b9 100644 --- a/components/WeeklyGrid.tsx +++ b/components/WeeklyGrid.tsx @@ -6,6 +6,7 @@ import { StockBadge } from './StockBadge'; import { InColumnStockFilter } from './InColumnStockFilter'; import { Top50Badge } from './Top50Badge'; import { VendorStockBadge } from './VendorStockBadge'; +import { WarehouseIcon, AmazonSmileIcon, CoverageIcon } from './Icons'; interface WeeklyGridProps { data: CombinedKPIs[]; @@ -518,11 +519,13 @@ const WeeklyGrid: React.FC = ({ currentFilters={stockFilter} onFilterChange={onStockFilterChange} title="Warehouse Stock" + icon={} /> } options={[ 'Out of Stock (0)', 'In Stock (>0)', @@ -534,6 +537,7 @@ const WeeklyGrid: React.FC = ({ currentFilters={wocFilter} onFilterChange={onWocFilterChange} title="Week Coverage" + icon={} options={[ '< 4 Weeks', '> 4 Weeks',