christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 14:05:24 +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
+26 -13
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,9 +108,10 @@ 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">
{/* 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..."
@@ -127,6 +124,22 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
</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">
<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}