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

@@ -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) {
+            if (prev?.key === weekKey && prev.metric === activeMetric) {
-                // Cycle: (Units, desc) -> (Units, asc) -> (Spend, desc) -> (Spend, asc)
+                // Just toggle direction if already sorting by this week and metric
-                if (prev.metric === 'units') {
+                return { key: weekKey, direction: prev.direction === 'asc' ? 'desc' : 'asc', metric: activeMetric };
-                    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' };
             }
-            }
+            // Start fresh with DESC for the current active metric
-            return { key: weekKey, direction: 'desc', metric: 'units' };
+            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 */}
+            {/* Toolbar: Search & Metric Toggle & 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="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-96">
+                <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}