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 Excel export and improve table layout in Weekly Sales

Browse Source 
- 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
This commit is contained in:
Christian Vidal Wolf
2026-01-22 08:53:20 +01:00
parent a4ede0ea5a
commit 4e2cf857f8
1 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+37 -2
View File
@@ -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">