From 7e50a9af65df9b8948fcbfe135ddb6f9c412e4e1 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 21 Jan 2026 16:49:11 +0100
Subject: [PATCH] feat: add explicit metric toggle for Weekly Sales sorting

- 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.
---
 components/WeeklyGrid.tsx | 59 ++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 11404f6..3a15ce5 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -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">