mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 13:15:24 +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 [currentPage, setCurrentPage] = useState(1);
|
||||||
const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all');
|
const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all');
|
||||||
const [growthThreshold, setGrowthThreshold] = useState(10);
|
const [growthThreshold, setGrowthThreshold] = useState(10);
|
||||||
|
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
|
||||||
|
|
||||||
// Default sort: most recent week, descending, units
|
// Default sort: most recent week, descending, units
|
||||||
const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
|
const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
|
||||||
@@ -61,7 +62,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
|||||||
// Reset pagination when search changes
|
// Reset pagination when search changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}, [debouncedSearch]);
|
}, [debouncedSearch, showOnlyTop50]);
|
||||||
|
|
||||||
const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => {
|
const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => {
|
||||||
setSortConfig(prev => {
|
setSortConfig(prev => {
|
||||||
@@ -89,10 +90,15 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
|||||||
return totals;
|
return totals;
|
||||||
}, [rows, weeks]);
|
}, [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(() => {
|
const filteredRows = useMemo(() => {
|
||||||
let result = rows;
|
let result = rows;
|
||||||
|
|
||||||
|
// Top 50 Filter
|
||||||
|
if (showOnlyTop50 && top50Ranking) {
|
||||||
|
result = result.filter(r => top50Ranking.has(r.asin.trim().toUpperCase()));
|
||||||
|
}
|
||||||
|
|
||||||
// Search Filter
|
// Search Filter
|
||||||
if (debouncedSearch) {
|
if (debouncedSearch) {
|
||||||
const lowSearch = debouncedSearch.toLowerCase();
|
const lowSearch = debouncedSearch.toLowerCase();
|
||||||
@@ -131,7 +137,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}, [rows, debouncedSearch, growthFilterMode, growthThreshold, sortConfig, weeks]);
|
}, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks]);
|
||||||
|
|
||||||
// 2. Sort results
|
// 2. Sort results
|
||||||
const sortedRows = useMemo(() => {
|
const sortedRows = useMemo(() => {
|
||||||
@@ -239,6 +245,25 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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 */}
|
{/* Export Button */}
|
||||||
<button
|
<button
|
||||||
onClick={handleExportExcel}
|
onClick={handleExportExcel}
|
||||||
|
|||||||
Reference in New Issue
Block a user