christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 12:15:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add explicit metric toggle for Weekly Sales sorting

Browse Source 
- Added Units/Spend toggle to the toolbar.
- Refactored column sorting to use the active toggle metric.
- Simplified sort cycling to just toggle direction (DESC/ASC).
- Fixed JSX structure and code duplication.
This commit is contained in:
Christian Vidal Wolf
2026-01-21 16:49:11 +01:00
parent daad27c26d
commit 7e50a9af65
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+36 -23
View File
@@ -19,6 +19,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
const [searchTerm, setSearchTerm] = useState('');
const [currentPage, setCurrentPage] = useState(1);
const [activeMetric, setActiveMetric] = useState<'units' | 'spend'>('units');
// Default sort: most recent week, descending, units
const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
@@ -35,17 +36,12 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
const handleSort = (weekKey: string) => {
setSortConfig(prev => {
if (prev?.key === weekKey) {
// Cycle: (Units, desc) -> (Units, asc) -> (Spend, desc) -> (Spend, asc)
if (prev.metric === 'units') {
if (prev.direction === 'desc') return { key: weekKey, direction: 'asc', metric: 'units' };
return { key: weekKey, direction: 'desc', metric: 'spend' };
} else {
if (prev.direction === 'desc') return { key: weekKey, direction: 'asc', metric: 'spend' };
return { key: weekKey, direction: 'desc', metric: 'units' };
}
if (prev?.key === weekKey && prev.metric === activeMetric) {
// Just toggle direction if already sorting by this week and metric
return { key: weekKey, direction: prev.direction === 'asc' ? 'desc' : 'asc', metric: activeMetric };
}
return { key: weekKey, direction: 'desc', metric: 'units' };
// Start fresh with DESC for the current active metric
return { key: weekKey, direction: 'desc', metric: activeMetric };
});
};
@@ -112,19 +108,36 @@ 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 md: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-96">
<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>
{/* Toolbar: Search & Metric Toggle & 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="flex flex-col md:flex-row items-center gap-4 w-full lg:w-auto">
<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>
<div className="flex items-center bg-slate-950 p-1 rounded-lg border border-white/10">
<button
onClick={() => setActiveMetric('units')}
className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-widest transition-all ${activeMetric === 'units' ? 'bg-indigo-500 text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
>
Units
</button>
<button
onClick={() => setActiveMetric('spend')}
className={`px-4 py-1.5 rounded-md text-xs font-black uppercase tracking-widest transition-all ${activeMetric === 'spend' ? 'bg-indigo-500 text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
>
Spend
</button>
</div>
</div>
<div className="flex items-center gap-3">