mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 12:15:23 +02:00
feat: add growth filtering in Weekly Sales grid
- Added Gaining/Dropping/Stable filter modes with configurable threshold - Filter compares unit volume between active week and previous week - Updated toolbar UI with growth filter dropdown and threshold input
This commit is contained in:
Christian Vidal Wolf
+95
-28
@@ -19,6 +19,8 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all');
|
||||
const [growthThreshold, setGrowthThreshold] = useState(10);
|
||||
|
||||
// Default sort: most recent week, descending, units
|
||||
const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
|
||||
@@ -46,15 +48,50 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
|
||||
|
||||
// 1. Filter by search term
|
||||
const filteredRows = useMemo(() => {
|
||||
if (!searchTerm) return rows;
|
||||
const lowSearch = searchTerm.toLowerCase();
|
||||
return rows.filter(r =>
|
||||
r.sku.toLowerCase().includes(lowSearch) ||
|
||||
r.asin.toLowerCase().includes(lowSearch) ||
|
||||
r.title.toLowerCase().includes(lowSearch) ||
|
||||
r.line.toLowerCase().includes(lowSearch)
|
||||
);
|
||||
}, [rows, searchTerm]);
|
||||
let result = rows;
|
||||
|
||||
// 1. Search Filter
|
||||
if (searchTerm) {
|
||||
const lowSearch = searchTerm.toLowerCase();
|
||||
result = result.filter(r =>
|
||||
r.sku.toLowerCase().includes(lowSearch) ||
|
||||
r.asin.toLowerCase().includes(lowSearch) ||
|
||||
r.title.toLowerCase().includes(lowSearch) ||
|
||||
r.line.toLowerCase().includes(lowSearch)
|
||||
);
|
||||
}
|
||||
|
||||
// 2. Growth Filter (if active)
|
||||
if (growthFilterMode !== 'all' && sortConfig) {
|
||||
const currentWeek = sortConfig.key;
|
||||
const currentWeekIdx = weeks.indexOf(currentWeek);
|
||||
const prevWeek = weeks[currentWeekIdx + 1];
|
||||
|
||||
if (prevWeek) {
|
||||
result = result.filter(r => {
|
||||
const currentUnits = r.unitsByWeek[currentWeek] || 0;
|
||||
const prevUnits = r.unitsByWeek[prevWeek] || 0;
|
||||
|
||||
// Handle edge case: units were 0 in previous week
|
||||
if (prevUnits === 0) {
|
||||
if (currentUnits === 0) return growthFilterMode === 'stable';
|
||||
return growthFilterMode === 'up'; // Gained from 0
|
||||
}
|
||||
|
||||
// Calculate percentage growth
|
||||
const growth = ((currentUnits - prevUnits) / prevUnits) * 100;
|
||||
|
||||
// For 'down', we use the absolute threshold to check if it dropped BY at least that amount
|
||||
if (growthFilterMode === 'up') return growth >= growthThreshold;
|
||||
if (growthFilterMode === 'down') return growth <= -Math.abs(growthThreshold);
|
||||
if (growthFilterMode === 'stable') return Math.abs(growth) < growthThreshold;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [rows, searchTerm, growthFilterMode, growthThreshold, sortConfig, weeks]);
|
||||
|
||||
// 2. Sort results
|
||||
const sortedRows = useMemo(() => {
|
||||
@@ -109,41 +146,71 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4 animate-fade-in">
|
||||
{/* Toolbar: Search & Pagination */}
|
||||
<div className="flex flex-col lg:flex-row justify-between items-center gap-4 bg-slate-900/50 p-4 border border-white/10 rounded-xl">
|
||||
<div className="relative w-full md:w-80">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search SKU, Title, or Line..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-base text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
|
||||
/>
|
||||
<svg className="absolute left-3 top-3 w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<div className="flex flex-col lg:flex-row justify-between items-center gap-4 bg-slate-900 border border-white/10 p-4 rounded-xl shadow-lg">
|
||||
<div className="flex flex-wrap items-center gap-4 w-full lg:w-auto">
|
||||
{/* Search Input */}
|
||||
<div className="relative w-full md:w-80">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search SKU, Title, or ASIN..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
|
||||
/>
|
||||
<svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Growth Filter */}
|
||||
<div className="flex items-center gap-2 bg-slate-950/50 p-1.5 px-3 rounded-lg border border-white/5">
|
||||
<span className="text-[11px] font-black text-slate-500 uppercase tracking-widest">Growth Filter</span>
|
||||
<select
|
||||
value={growthFilterMode}
|
||||
onChange={(e) => setGrowthFilterMode(e.target.value as any)}
|
||||
className="bg-slate-900 border border-white/10 rounded px-2 py-1 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
>
|
||||
<option value="all">All Products</option>
|
||||
<option value="up">Gaining</option>
|
||||
<option value="down">Dropping</option>
|
||||
<option value="stable">Stable</option>
|
||||
</select>
|
||||
{growthFilterMode !== 'all' && (
|
||||
<div className="flex items-center gap-1.5 ml-1 border-l border-white/10 pl-3">
|
||||
<span className="text-[10px] text-slate-500 font-bold">Thresh:</span>
|
||||
<input
|
||||
type="number"
|
||||
value={growthThreshold}
|
||||
onChange={(e) => setGrowthThreshold(Number(e.target.value))}
|
||||
className="w-12 bg-slate-900 border border-white/10 rounded px-1.5 py-1 text-xs text-white text-center focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-[10px] text-slate-500">%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-slate-500">
|
||||
Showing {Math.min(sortedRows.length, (currentPage - 1) * ROWS_PER_PAGE + 1)}-{Math.min(sortedRows.length, currentPage * ROWS_PER_PAGE)} of {sortedRows.length}
|
||||
<span className="text-sm text-slate-500 whitespace-nowrap">
|
||||
Showing {Math.min(filteredRows.length, (currentPage - 1) * ROWS_PER_PAGE + 1)}-{Math.min(filteredRows.length, currentPage * ROWS_PER_PAGE)} of {filteredRows.length}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2.5 bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:hover:bg-slate-800 rounded-lg transition-colors border border-white/5"
|
||||
className="p-2 bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:hover:bg-slate-800 rounded-lg transition-colors border border-white/5"
|
||||
>
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
|
||||
</button>
|
||||
<span className="bg-slate-950 border border-white/10 px-4 py-2 rounded-lg text-sm font-bold text-white min-w-[70px] text-center">
|
||||
<span className="bg-slate-950 border border-white/10 px-3 py-1.5 rounded-lg text-xs font-bold text-white min-w-[60px] text-center">
|
||||
{currentPage} / {Math.max(1, totalPages)}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage >= totalPages}
|
||||
className="p-2.5 bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:hover:bg-slate-800 rounded-lg transition-colors border border-white/5"
|
||||
className="p-2 bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:hover:bg-slate-800 rounded-lg transition-colors border border-white/5"
|
||||
>
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user