From 4e2cf857f828e6212370281121c44692b7ec4d9c Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 22 Jan 2026 08:53:20 +0100
Subject: [PATCH] feat: add Excel export and improve table layout in Weekly
 Sales

- Added Export Excel button to download filtered data as .xlsx
- Increased table container height to maximize visible rows
- Headers remain sticky at viewport top during scroll
---
 components/WeeklyGrid.tsx | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 31f39ca..724a085 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState, useEffect } from 'react';
+import * as XLSX from 'xlsx';
 import { CombinedKPIs } from '../types';
 import { pivotWeeklySalesData, WeeklyPivotRow } from '../services/dataProcessor';
 
@@ -143,6 +144,29 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
         );
     };
 
+    // Export to Excel
+    const handleExportExcel = () => {
+        // Prepare data for export
+        const exportData = filteredRows.map(row => {
+            const rowData: { [key: string]: string | number } = {
+                SKU: row.sku,
+                ASIN: row.asin,
+                Title: row.title,
+                Line: row.line,
+            };
+            weeks.forEach(week => {
+                rowData[`${week} Units`] = row.unitsByWeek[week] || 0;
+                rowData[`${week} Spend`] = row.spendByWeek[week] || 0;
+            });
+            return rowData;
+        });
+
+        const ws = XLSX.utils.json_to_sheet(exportData);
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, 'Weekly Sales');
+        XLSX.writeFile(wb, `Weekly_Sales_Export_${new Date().toISOString().slice(0, 10)}.xlsx`);
+    };
+
     return (
         <div className="flex flex-col gap-4 animate-fade-in">
             {/* Toolbar: Search & Pagination */}
@@ -188,6 +212,17 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
                             </div>
                         )}
                     </div>
+
+                    {/* Export Button */}
+                    <button
+                        onClick={handleExportExcel}
+                        className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-3 py-1.5 rounded-lg text-xs font-bold transition-colors border border-emerald-500/50"
+                    >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        Export Excel
+                    </button>
                 </div>
 
                 <div className="flex items-center gap-3">
@@ -216,8 +251,8 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
                 </div>
             </div>
 
-            <div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden shadow-2xl">
-                <div className="overflow-x-auto overflow-y-auto max-h-[calc(100vh-360px)] custom-scrollbar">
+            <div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden shadow-2xl flex-1 min-h-0">
+                <div className="overflow-x-auto overflow-y-auto h-full max-h-[calc(100vh-220px)] custom-scrollbar">
                     <table className="w-full text-left border-collapse min-w-[max-content]">
                         <thead className="sticky top-0 z-20 bg-slate-900">
                             <tr className="bg-slate-900 border-b border-white/10">