mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 12:25:22 +02:00
feat: add Top 50 Only filter toggle button
- New toggle button in Weekly Sales toolbar to show only Top 50 products - Button displays with trophy icon and golden gradient when active - Resets pagination when toggled - Works in combination with other filters (search, growth)
This commit is contained in:
@@ -49,6 +49,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all');
|
||||
const [growthThreshold, setGrowthThreshold] = useState(10);
|
||||
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
|
||||
|
||||
// Default sort: most recent week, descending, units
|
||||
const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
|
||||
@@ -61,7 +62,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
||||
// Reset pagination when search changes
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [debouncedSearch]);
|
||||
}, [debouncedSearch, showOnlyTop50]);
|
||||
|
||||
const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => {
|
||||
setSortConfig(prev => {
|
||||
@@ -89,10 +90,15 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
||||
return totals;
|
||||
}, [rows, weeks]);
|
||||
|
||||
// 1. Filter by search term (using debounced value)
|
||||
// 1. Filter by search term, Top 50, and growth (using debounced value)
|
||||
const filteredRows = useMemo(() => {
|
||||
let result = rows;
|
||||
|
||||
// Top 50 Filter
|
||||
if (showOnlyTop50 && top50Ranking) {
|
||||
result = result.filter(r => top50Ranking.has(r.asin.trim().toUpperCase()));
|
||||
}
|
||||
|
||||
// Search Filter
|
||||
if (debouncedSearch) {
|
||||
const lowSearch = debouncedSearch.toLowerCase();
|
||||
@@ -131,7 +137,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [rows, debouncedSearch, growthFilterMode, growthThreshold, sortConfig, weeks]);
|
||||
}, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks]);
|
||||
|
||||
// 2. Sort results
|
||||
const sortedRows = useMemo(() => {
|
||||
@@ -239,6 +245,25 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Top 50 Filter Toggle */}
|
||||
{top50Ranking && top50Ranking.size > 0 && (
|
||||
<button
|
||||
onClick={() => setShowOnlyTop50(!showOnlyTop50)}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${showOnlyTop50
|
||||
? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white border-amber-400 shadow-lg shadow-amber-500/20'
|
||||
: 'bg-slate-950/50 text-slate-400 border-white/10 hover:border-amber-500/50 hover:text-amber-400'
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm">🏆</span>
|
||||
Top 50 Only
|
||||
{showOnlyTop50 && (
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Export Button */}
|
||||
<button
|
||||
onClick={handleExportExcel}
|
||||
|
||||
Reference in New Issue
Block a user