mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 15:45:24 +02:00
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
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import React, { useMemo, useState, useEffect } from 'react';
|
import React, { useMemo, useState, useEffect } from 'react';
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
import { CombinedKPIs } from '../types';
|
import { CombinedKPIs } from '../types';
|
||||||
import { pivotWeeklySalesData, WeeklyPivotRow } from '../services/dataProcessor';
|
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 (
|
return (
|
||||||
<div className="flex flex-col gap-4 animate-fade-in">
|
<div className="flex flex-col gap-4 animate-fade-in">
|
||||||
{/* Toolbar: Search & Pagination */}
|
{/* Toolbar: Search & Pagination */}
|
||||||
@@ -188,6 +212,17 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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>
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
@@ -216,8 +251,8 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden shadow-2xl">
|
<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 max-h-[calc(100vh-360px)] custom-scrollbar">
|
<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]">
|
<table className="w-full text-left border-collapse min-w-[max-content]">
|
||||||
<thead className="sticky top-0 z-20 bg-slate-900">
|
<thead className="sticky top-0 z-20 bg-slate-900">
|
||||||
<tr className="bg-slate-900 border-b border-white/10">
|
<tr className="bg-slate-900 border-b border-white/10">
|
||||||
|
|||||||
Reference in New Issue
Block a user