mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 15:55:23 +02:00
1229 lines
72 KiB
TypeScript
1229 lines
72 KiB
TypeScript
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
|
import {
|
|
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
|
|
} from 'recharts';
|
|
import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs } from '../types';
|
|
import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping } from '../services/dataProcessor';
|
|
import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './Icons';
|
|
import { StockBadge } from './StockBadge';
|
|
import { Top50Badge } from './Top50Badge';
|
|
|
|
interface DataGridProps {
|
|
data: SalesRecord[] | CombinedKPIs[];
|
|
hasCustomerFilter: boolean;
|
|
adsData?: AdsRecord[];
|
|
stockMap?: Map<string, number>;
|
|
top50Ranking?: {
|
|
eu: Map<string, number>;
|
|
uk: Map<string, number>;
|
|
};
|
|
top50Mode: 'eu' | 'uk';
|
|
}
|
|
|
|
type SortConfig = {
|
|
key: string | null;
|
|
direction: 'asc' | 'desc';
|
|
};
|
|
|
|
type ConditionalFilter = {
|
|
id: string;
|
|
metric: string;
|
|
operator: 'gt' | 'lt';
|
|
value: number;
|
|
}
|
|
|
|
const ROWS_PER_PAGE = 50;
|
|
const CHART_COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];
|
|
|
|
// Available grouping dimensions
|
|
const DIMENSION_OPTIONS = [
|
|
{ label: 'Product Line', value: 'line' },
|
|
{ label: 'Customer', value: 'customer' },
|
|
{ label: 'SKU', value: 'sku' },
|
|
{ label: 'Title', value: 'title' },
|
|
{ label: 'ASIN', value: 'asin' },
|
|
];
|
|
|
|
// Tooltip for single-period view with Week-over-Week comparison
|
|
const WoWTooltip = ({ active, payload, label, data }: any) => {
|
|
if (active && payload && payload.length && data) {
|
|
const currentIndex = data.findIndex((d: any) => d.name === label);
|
|
const prevData = currentIndex > 0 ? data[currentIndex - 1] : null;
|
|
|
|
return (
|
|
<div className="bg-slate-900 border border-border p-3 rounded shadow-xl text-sm max-w-xs z-50">
|
|
<p className="font-bold text-slate-100 mb-2 border-b border-slate-700 pb-1">{label}</p>
|
|
{payload.map((p: any) => {
|
|
let wowEl = null;
|
|
if (prevData) {
|
|
const prevValue = prevData[p.dataKey];
|
|
const currentValue = p.value;
|
|
if (prevValue != null && prevValue > 0) {
|
|
const pct = ((currentValue - prevValue) / prevValue) * 100;
|
|
wowEl = (
|
|
<span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
|
{pct >= 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div key={p.name} className="flex justify-between items-center gap-2 mb-1">
|
|
<span style={{ color: p.color }}>{p.name}:</span>
|
|
<div className="flex items-center">
|
|
<span className="font-mono font-semibold text-slate-200">
|
|
{p.dataKey === 'sellOut'
|
|
? `€${Number(p.value).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`
|
|
: `${Number(p.value).toLocaleString('de-DE')} u`}
|
|
</span>
|
|
{wowEl}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// Tooltip for multi-year comparison view
|
|
const ComparisonTooltip = ({ active, payload, label }: any) => {
|
|
if (active && payload && payload.length) {
|
|
|
|
interface YearData {
|
|
sellOut?: number;
|
|
units?: number;
|
|
color?: string;
|
|
}
|
|
|
|
const dataByYear: { [year: string]: YearData } = {};
|
|
|
|
payload.forEach((p: any) => {
|
|
const nameParts = p.name.split(' ');
|
|
if (nameParts.length < 2) return;
|
|
|
|
const year = nameParts[nameParts.length - 1];
|
|
const metric = nameParts.slice(0, nameParts.length - 1).join(' ');
|
|
|
|
if (!dataByYear[year]) {
|
|
dataByYear[year] = {};
|
|
}
|
|
// Use the color from the Sell Out line for consistency for that year block
|
|
if (metric.toLowerCase().includes('sell out')) {
|
|
dataByYear[year].sellOut = p.value;
|
|
dataByYear[year].color = p.stroke || p.color;
|
|
} else if (metric.toLowerCase().includes('units')) {
|
|
dataByYear[year].units = p.value;
|
|
if (!dataByYear[year].color) { // fallback color from units line
|
|
dataByYear[year].color = p.stroke || p.color;
|
|
}
|
|
}
|
|
});
|
|
|
|
const sortedYears = Object.keys(dataByYear).sort((a, b) => parseInt(b) - parseInt(a));
|
|
|
|
return (
|
|
<div className="bg-slate-900/90 backdrop-blur-sm border border-border p-3 rounded-lg shadow-xl text-sm w-56 z-50">
|
|
<p className="font-bold text-slate-100 mb-2 border-b border-slate-700 pb-1">{label}</p>
|
|
{sortedYears.map((year, index) => {
|
|
const yearData = dataByYear[year];
|
|
const prevYear = sortedYears[index + 1];
|
|
const prevYearData = prevYear ? dataByYear[prevYear] : null;
|
|
|
|
let sellOutGrowthEl = null;
|
|
if (prevYearData && prevYearData.sellOut != null && prevYearData.sellOut !== 0 && yearData.sellOut != null) {
|
|
const pct = ((yearData.sellOut - prevYearData.sellOut) / prevYearData.sellOut) * 100;
|
|
sellOutGrowthEl = (
|
|
<span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
|
{pct >= 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
|
|
</span>
|
|
);
|
|
}
|
|
|
|
let unitsGrowthEl = null;
|
|
if (prevYearData && prevYearData.units != null && prevYearData.units !== 0 && yearData.units != null) {
|
|
const pct = ((yearData.units - prevYearData.units) / prevYearData.units) * 100;
|
|
unitsGrowthEl = (
|
|
<span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
|
{pct >= 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={year} className="mt-2">
|
|
<p className="font-bold text-slate-200 text-base">{year}</p>
|
|
|
|
{yearData.sellOut != null && (
|
|
<div className="flex justify-between items-center gap-2 pl-1 mt-1">
|
|
<span className="font-medium" style={{ color: yearData.color }}>Sell Out:</span>
|
|
<div className="flex items-center">
|
|
<span className="font-mono font-semibold" style={{ color: yearData.color }}>
|
|
€{Number(yearData.sellOut).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
|
|
</span>
|
|
{sellOutGrowthEl}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{yearData.units != null && (
|
|
<div className="flex justify-between items-center gap-2 pl-1 mt-1">
|
|
<span className="font-medium" style={{ color: yearData.color }}>Units:</span>
|
|
<div className="flex items-center">
|
|
<span className="font-mono font-semibold" style={{ color: yearData.color }}>
|
|
{Number(yearData.units).toLocaleString('de-DE')} u
|
|
</span>
|
|
{unitsGrowthEl}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Reusable Expandable Chart Card
|
|
const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode; className?: string }> = ({ title, children, className }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
const toggleExpand = () => setIsExpanded(!isExpanded);
|
|
|
|
if (isExpanded) {
|
|
return (
|
|
<div className="fixed inset-0 z-[80] bg-slate-950 px-6 pb-6 pt-16 flex flex-col animate-fade-in overflow-hidden">
|
|
<div className="flex justify-between items-center mb-4 border-b border-slate-800 pb-4 shrink-0">
|
|
<h3 className="text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3>
|
|
<button
|
|
onClick={toggleExpand}
|
|
className="p-2 bg-red-600/90 hover:bg-red-500 border border-red-400 rounded-full text-white transition-all shadow-2xl hover:scale-110 flex items-center gap-2 group"
|
|
title="Exit Fullscreen"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-5 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto bg-slate-900 rounded-xl p-6 border border-border custom-scrollbar">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`bg-surface border-b border-border group relative transition-all duration-300 ${className}`}>
|
|
<div className="p-4 flex justify-between items-start">
|
|
<h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wide">{title}</h3>
|
|
<button
|
|
onClick={toggleExpand}
|
|
className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-primary transition-opacity"
|
|
title="Expand to Fullscreen"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>
|
|
</button>
|
|
</div>
|
|
<div className="cursor-pointer px-4 pb-4" onClick={toggleExpand}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, top50Ranking, top50Mode }) => {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
|
|
const [showChart, setShowChart] = useState(true);
|
|
const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']);
|
|
const [showAdsMetrics, setShowAdsMetrics] = useState(true);
|
|
const [showAttributedSales, setShowAttributedSales] = useState(false);
|
|
const [showDimensionMenu, setShowDimensionMenu] = useState(false);
|
|
const dimensionRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close dimension menu on click outside
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (dimensionRef.current && !dimensionRef.current.contains(event.target as Node)) {
|
|
setShowDimensionMenu(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
// Calculate Ads Summary for the Grid
|
|
const adsSummary = useMemo(() => {
|
|
if (!adsData || adsData.length === 0) return null;
|
|
|
|
const totals = adsData.reduce((acc, ad) => ({
|
|
cost: acc.cost + ad.cost,
|
|
attributedSales: acc.attributedSales + ad.attributedSales30d,
|
|
clicks: acc.clicks + ad.clicks,
|
|
impressions: acc.impressions + ad.impressions,
|
|
}), { cost: 0, attributedSales: 0, clicks: 0, impressions: 0 });
|
|
|
|
return {
|
|
totalSpend: totals.cost,
|
|
attributedSales: totals.attributedSales,
|
|
acos: totals.attributedSales > 0 ? (totals.cost / totals.attributedSales) * 100 : 0,
|
|
roas: totals.cost > 0 ? totals.attributedSales / totals.cost : 0,
|
|
recordCount: adsData.length,
|
|
};
|
|
}, [adsData]);
|
|
|
|
// State for dynamic grouping
|
|
const [selectedDimensions, setSelectedDimensions] = useState<string[]>(['line', 'customer', 'sku', 'title']);
|
|
|
|
// State for Advanced Filtering
|
|
const [showFilterBuilder, setShowFilterBuilder] = useState(false);
|
|
const [rowFilters, setRowFilters] = useState<ConditionalFilter[]>([]);
|
|
// Temp state for new filter inputs
|
|
const [newFilterMetric, setNewFilterMetric] = useState<string>('');
|
|
const [newFilterOperator, setNewFilterOperator] = useState<'gt' | 'lt'>('gt');
|
|
const [newFilterValue, setNewFilterValue] = useState<string>('');
|
|
|
|
// Effective dimensions for rendering
|
|
const effectiveDimensions = useMemo(() =>
|
|
selectedDimensions.length > 0 ? selectedDimensions : ['customer'],
|
|
[selectedDimensions]);
|
|
|
|
// Transform flat data into Pivot structure
|
|
const pivotRows = useMemo(() => {
|
|
// Apply Pan-EU grouping when no customer filter is applied
|
|
const processedData = applyPanEUGrouping(data as SalesRecord[], hasCustomerFilter);
|
|
|
|
// pivotSalesData now handles ads aggregation correctly because it receives CombinedKPIs
|
|
const { rows } = pivotSalesData(processedData, effectiveDimensions);
|
|
return rows;
|
|
}, [data, effectiveDimensions, hasCustomerFilter]);
|
|
|
|
const { years } = useMemo(() => {
|
|
// We still need unique years for columns
|
|
const yearsSet = new Set<string>(data.map(d => String(d.year)));
|
|
return { years: Array.from(yearsSet).sort((a, b) => parseInt(b) - parseInt(a)) };
|
|
}, [data]);
|
|
|
|
// Data for the time series chart, supporting single and multi-year comparison
|
|
const { chartData, uniqueYears, isComparisonView, chartTitle } = useMemo(() => {
|
|
const yearsInView = Array.from(new Set(data.map(d => d.year.toString()))).sort((a: string, b: string) => parseInt(b) - parseInt(a));
|
|
const isMultiYear = yearsInView.length > 1;
|
|
|
|
// Get base sales data
|
|
let salesChartData = isMultiYear
|
|
? aggregateForComparisonTimeSeries(data)
|
|
: aggregateForTimeSeries(data);
|
|
|
|
// Aggregate ads data by week/year and merge into chartData
|
|
if (adsData && adsData.length > 0) {
|
|
const adsMap = new Map<number, { [key: string]: number }>();
|
|
|
|
adsData.forEach(ad => {
|
|
if (ad.week >= 1 && ad.week <= 53) {
|
|
if (!adsMap.has(ad.week)) {
|
|
adsMap.set(ad.week, {});
|
|
}
|
|
const weekData = adsMap.get(ad.week)!;
|
|
const adSpendKey = `${ad.year}_adSpend`;
|
|
const attrSalesKey = `${ad.year}_attributedSales`;
|
|
weekData[adSpendKey] = (weekData[adSpendKey] || 0) + ad.cost;
|
|
weekData[attrSalesKey] = (weekData[attrSalesKey] || 0) + ad.attributedSales30d;
|
|
}
|
|
});
|
|
|
|
// Merge ads data into sales chart data
|
|
salesChartData = salesChartData.map(point => {
|
|
const adsWeekData = adsMap.get(point.week) || {};
|
|
return { ...point, ...adsWeekData };
|
|
});
|
|
}
|
|
|
|
return {
|
|
chartData: salesChartData,
|
|
uniqueYears: yearsInView,
|
|
isComparisonView: isMultiYear,
|
|
chartTitle: isMultiYear
|
|
? `Weekly Sales Comparison: ${yearsInView.join(' vs ')}`
|
|
: `Weekly Sales Evolution ${yearsInView[0] || ''}`
|
|
};
|
|
}, [data, adsData]);
|
|
|
|
// Filter Options based on available data
|
|
const metricOptions = useMemo(() => {
|
|
const options = [];
|
|
// Totals
|
|
years.forEach(y => {
|
|
options.push({ label: `Total Sell Out ${y} (€)`, value: `total_sellOut_${y}` });
|
|
options.push({ label: `Total Units ${y}`, value: `total_units_${y}` });
|
|
});
|
|
// Growth (Latest vs Previous)
|
|
if (years.length >= 2) {
|
|
options.push({ label: `Growth % Sell Out (${years[0]} vs ${years[1]})`, value: 'growth_sellOut' });
|
|
options.push({ label: `Growth % Units (${years[0]} vs ${years[1]})`, value: 'growth_units' });
|
|
}
|
|
return options;
|
|
}, [years]);
|
|
|
|
// Apply Advanced Row Filters THEN Sort
|
|
const processedRows = useMemo(() => {
|
|
let result = pivotRows;
|
|
|
|
// 1. Filter
|
|
if (rowFilters.length > 0) {
|
|
const latestYear = years[0];
|
|
const prevYear = years[1];
|
|
|
|
result = result.filter(row => {
|
|
return rowFilters.every(filter => {
|
|
let rowValue = 0;
|
|
|
|
if (filter.metric.startsWith('total_sellOut_')) {
|
|
const y = filter.metric.split('_')[2];
|
|
rowValue = row.totalsByYear[y]?.sellOut || 0;
|
|
}
|
|
else if (filter.metric.startsWith('total_units_')) {
|
|
const y = filter.metric.split('_')[2];
|
|
rowValue = row.totalsByYear[y]?.units || 0;
|
|
}
|
|
else if (filter.metric === 'growth_sellOut') {
|
|
if (!prevYear) return true;
|
|
const curr = row.totalsByYear[latestYear]?.sellOut || 0;
|
|
const prev = row.totalsByYear[prevYear]?.sellOut || 0;
|
|
if (prev === 0) return curr > 0;
|
|
rowValue = ((curr - prev) / prev) * 100;
|
|
}
|
|
else if (filter.metric === 'growth_units') {
|
|
if (!prevYear) return true;
|
|
const curr = row.totalsByYear[latestYear]?.units || 0;
|
|
const prev = row.totalsByYear[prevYear]?.units || 0;
|
|
if (prev === 0) return curr > 0;
|
|
rowValue = ((curr - prev) / prev) * 100;
|
|
}
|
|
|
|
if (filter.operator === 'gt') return rowValue > filter.value;
|
|
if (filter.operator === 'lt') return rowValue < filter.value;
|
|
return true;
|
|
});
|
|
});
|
|
}
|
|
|
|
// 2. Sort
|
|
if (sortConfig.key) {
|
|
// Create a copy to avoid mutating the original array and ensure React detects the change
|
|
result = [...result].sort((a, b) => {
|
|
let valA: number | string = '';
|
|
let valB: number | string = '';
|
|
|
|
// Handle sorting by dimensions
|
|
if (['customer', 'line', 'sku', 'title', 'articleName', 'asin'].includes(sortConfig.key as string)) {
|
|
valA = a[sortConfig.key as keyof PivotRow] as string || '';
|
|
valB = b[sortConfig.key as keyof PivotRow] as string || '';
|
|
}
|
|
// Handle sorting by Total Metrics (total_sellOut_2023)
|
|
else if ((sortConfig.key as string).startsWith('total_')) {
|
|
const parts = (sortConfig.key as string).split('_');
|
|
// parts[1] = metric (sellOut/units), parts[2] = year
|
|
if (parts.length === 3) {
|
|
const y = parts[2];
|
|
const m = parts[1] as 'sellOut' | 'units';
|
|
valA = a.totalsByYear[y]?.[m] || 0;
|
|
valB = b.totalsByYear[y]?.[m] || 0;
|
|
}
|
|
}
|
|
// Handle sorting by Growth Percentages (growth_sellOut_2024_2023)
|
|
else if ((sortConfig.key as string).startsWith('growth_')) {
|
|
const parts = (sortConfig.key as string).split('_');
|
|
// parts[1] = metric (sellOut/units), parts[2] = current year, parts[3] = previous year
|
|
if (parts.length === 4) {
|
|
const metric = parts[1] as 'sellOut' | 'units';
|
|
const currentYear = parts[2];
|
|
const prevYear = parts[3];
|
|
|
|
const currA = a.totalsByYear[currentYear]?.[metric] || 0;
|
|
const prevA = a.totalsByYear[prevYear]?.[metric] || 0;
|
|
valA = prevA !== 0 ? ((currA - prevA) / prevA) * 100 : (currA > 0 ? 100 : 0);
|
|
|
|
const currB = b.totalsByYear[currentYear]?.[metric] || 0;
|
|
const prevB = b.totalsByYear[prevYear]?.[metric] || 0;
|
|
valB = prevB !== 0 ? ((currB - prevB) / prevB) * 100 : (currB > 0 ? 100 : 0);
|
|
}
|
|
}
|
|
|
|
// Handle sorting by Ads Metrics (adSpend_2025, tacos_2025)
|
|
else if ((sortConfig.key as string).includes('_') && !((sortConfig.key as string).startsWith('total_') || (sortConfig.key as string).startsWith('growth_'))) {
|
|
const parts = (sortConfig.key as string).split('_');
|
|
if (parts.length === 2) {
|
|
const metric = parts[0] as 'adSpend' | 'tacos';
|
|
const year = parts[1];
|
|
valA = a.adsByYear?.[year]?.[metric] || 0;
|
|
valB = b.adsByYear?.[year]?.[metric] || 0;
|
|
}
|
|
}
|
|
|
|
if (valA < valB) return sortConfig.direction === 'asc' ? -1 : 1;
|
|
if (valA > valB) return sortConfig.direction === 'asc' ? 1 : -1;
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}, [pivotRows, rowFilters, sortConfig, years]);
|
|
|
|
// Calculate aggregated totals for the header row
|
|
const filteredTotalsByYear = useMemo(() => {
|
|
const result: { [year: string]: { sellOut: number, units: number, sellOutGrowth?: number, unitsGrowth?: number } } = {};
|
|
|
|
years.forEach((year, index) => {
|
|
const totals = processedRows.reduce(
|
|
(acc, row) => {
|
|
const data = row.totalsByYear[year];
|
|
if (data) {
|
|
acc.sellOut += data.sellOut;
|
|
acc.units += data.units;
|
|
}
|
|
const ads = row.adsByYear?.[year];
|
|
if (ads) {
|
|
acc.adSpend += ads.adSpend;
|
|
acc.attributedSales += ads.attributedSales;
|
|
}
|
|
return acc;
|
|
},
|
|
{ sellOut: 0, units: 0, adSpend: 0, attributedSales: 0 }
|
|
);
|
|
|
|
result[year] = totals;
|
|
|
|
// Calculate YoY growth if previous year exists
|
|
const prevYear = years[index + 1];
|
|
if (prevYear) {
|
|
const prevYearTotals = processedRows.reduce(
|
|
(acc, row) => {
|
|
const data = row.totalsByYear[prevYear];
|
|
if (data) {
|
|
acc.sellOut += data.sellOut;
|
|
acc.units += data.units;
|
|
}
|
|
const ads = row.adsByYear?.[prevYear];
|
|
if (ads) {
|
|
acc.adSpend += ads.adSpend;
|
|
}
|
|
return acc;
|
|
},
|
|
{ sellOut: 0, units: 0, adSpend: 0 }
|
|
);
|
|
|
|
if (prevYearTotals.sellOut > 0) {
|
|
result[year].sellOutGrowth = ((totals.sellOut - prevYearTotals.sellOut) / prevYearTotals.sellOut) * 100;
|
|
} else if (totals.sellOut > 0) {
|
|
result[year].sellOutGrowth = 100;
|
|
}
|
|
|
|
if (prevYearTotals.units > 0) {
|
|
result[year].unitsGrowth = ((totals.units - prevYearTotals.units) / prevYearTotals.units) * 100;
|
|
} else if (totals.units > 0) {
|
|
result[year].unitsGrowth = 100;
|
|
}
|
|
|
|
if (prevYearTotals.adSpend > 0) {
|
|
(result[year] as any).adSpendGrowth = ((totals.adSpend - prevYearTotals.adSpend) / prevYearTotals.adSpend) * 100;
|
|
} else if (totals.adSpend > 0) {
|
|
(result[year] as any).adSpendGrowth = 100;
|
|
}
|
|
}
|
|
});
|
|
|
|
return result;
|
|
}, [processedRows, years]);
|
|
|
|
const paginatedRows = useMemo(() => {
|
|
const start = (currentPage - 1) * ROWS_PER_PAGE;
|
|
return processedRows.slice(start, start + ROWS_PER_PAGE);
|
|
}, [processedRows, currentPage]);
|
|
|
|
const totalPages = Math.ceil(processedRows.length / ROWS_PER_PAGE);
|
|
|
|
const requestSort = (key: string) => {
|
|
let direction: 'asc' | 'desc' = 'desc';
|
|
if (sortConfig.key === key && sortConfig.direction === 'desc') {
|
|
direction = 'asc';
|
|
}
|
|
setSortConfig({ key, direction });
|
|
};
|
|
|
|
const getSortIcon = (key: string) => {
|
|
if (sortConfig.key !== key) return <span className="text-slate-600 ml-1">⇅</span>;
|
|
return <span className="text-primary ml-1">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>;
|
|
};
|
|
|
|
const handleExport = () => {
|
|
generateXLSX(processedRows, effectiveDimensions, years);
|
|
};
|
|
|
|
const addFilter = () => {
|
|
if (newFilterMetric && newFilterValue) {
|
|
setRowFilters([
|
|
...rowFilters,
|
|
{
|
|
id: Date.now().toString(),
|
|
metric: newFilterMetric,
|
|
operator: newFilterOperator,
|
|
value: parseFloat(newFilterValue)
|
|
}
|
|
]);
|
|
setNewFilterMetric('');
|
|
setNewFilterValue('');
|
|
setShowFilterBuilder(false);
|
|
}
|
|
};
|
|
|
|
const removeFilter = (id: string) => {
|
|
setRowFilters(rowFilters.filter(f => f.id !== id));
|
|
};
|
|
|
|
// Reset pagination when filters change
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [rowFilters, data, effectiveDimensions]);
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-[95vw] mx-auto animate-fade-in pb-24">
|
|
|
|
{/* 1. Time Series Chart Section */}
|
|
{showChart && chartData.length > 0 && (
|
|
<ExpandableChartCard title={chartTitle} className="rounded-xl overflow-hidden shadow-sm">
|
|
<div className="h-72 w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
|
<XAxis
|
|
dataKey="name"
|
|
stroke="#64748b"
|
|
tick={{ fontSize: 12 }}
|
|
interval={isComparisonView ? 2 : 'preserveStartEnd'}
|
|
/>
|
|
<YAxis
|
|
stroke="#64748b"
|
|
tickFormatter={(val) => `€${(val / 1000).toFixed(0)}k`}
|
|
/>
|
|
<Tooltip content={(props: any) => isComparisonView ? <ComparisonTooltip {...props} /> : <WoWTooltip {...props} data={chartData} />} />
|
|
<Legend />
|
|
|
|
{isComparisonView ? (
|
|
uniqueYears.flatMap((year, idx) => [
|
|
visibleMetrics.includes('sellOut') && (
|
|
<Line
|
|
key={`${year}_so`}
|
|
type="monotone"
|
|
dataKey={`${year}_sellOut`}
|
|
name={`Sell Out ${year}`}
|
|
stroke={CHART_COLORS[idx % CHART_COLORS.length]}
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
),
|
|
visibleMetrics.includes('units') && (
|
|
<Line
|
|
key={`${year}_units`}
|
|
type="monotone"
|
|
dataKey={`${year}_units`}
|
|
name={`Units ${year}`}
|
|
stroke={CHART_COLORS[idx % CHART_COLORS.length]}
|
|
strokeWidth={2}
|
|
strokeDasharray="5 5"
|
|
dot={false}
|
|
/>
|
|
),
|
|
// Ad Spend line (only when ads data exists and showAdsMetrics is on)
|
|
showAdsMetrics && adsSummary && (
|
|
<Line
|
|
key={`${year}_adSpend`}
|
|
type="monotone"
|
|
dataKey={`${year}_adSpend`}
|
|
name={`Ad Spend ${year}`}
|
|
stroke="#d946ef"
|
|
strokeWidth={2}
|
|
strokeDasharray="3 3"
|
|
dot={false}
|
|
/>
|
|
),
|
|
// Attributed Sales line
|
|
showAttributedSales && adsSummary && (
|
|
<Line
|
|
key={`${year}_attrSales`}
|
|
type="monotone"
|
|
dataKey={`${year}_attributedSales`}
|
|
name={`Attr. Sales ${year}`}
|
|
stroke="#fbbf24"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
)
|
|
])
|
|
) : (
|
|
[
|
|
visibleMetrics.includes('sellOut') && (
|
|
<Line
|
|
key="so"
|
|
type="monotone"
|
|
dataKey="sellOut"
|
|
name="Sell Out"
|
|
stroke="#6366f1"
|
|
strokeWidth={3}
|
|
dot={false}
|
|
/>
|
|
),
|
|
visibleMetrics.includes('units') && (
|
|
<Line
|
|
key="units"
|
|
type="monotone"
|
|
dataKey="units"
|
|
name="Units"
|
|
stroke="#10b981"
|
|
strokeWidth={3}
|
|
dot={false}
|
|
yAxisId={0} // Using same axis for simplicity, usually needs dual axis
|
|
/>
|
|
)
|
|
]
|
|
)}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</ExpandableChartCard>
|
|
)}
|
|
|
|
{/* 2. Controls & Grid */}
|
|
<div className="bg-surface border border-border rounded-xl shadow-lg overflow-hidden flex flex-col">
|
|
|
|
{/* Toolbar */}
|
|
<div className="p-4 border-b border-border bg-slate-900/50 flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center">
|
|
|
|
<div className="flex flex-wrap items-center gap-3 w-full lg:w-auto">
|
|
{/* Dimensions Selector */}
|
|
<div className="relative z-30" ref={dimensionRef}>
|
|
<button
|
|
onClick={() => setShowDimensionMenu(!showDimensionMenu)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold transition-all border shadow-sm ${showDimensionMenu ? 'bg-indigo-600 text-white border-indigo-500 shadow-indigo-500/20' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700 hover:border-slate-600'}`}
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 4.5v15m6-15v15m-10.5-15h15a2.25 2.25 0 0 1 2.25 2.25v13.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75A2.25 2.25 0 0 1 4.5 4.5Z" />
|
|
</svg>
|
|
<span>Group By:</span>
|
|
<span className={showDimensionMenu ? 'text-indigo-100' : 'text-indigo-400'}>{effectiveDimensions.length} Columns</span>
|
|
<svg className={`w-3.5 h-3.5 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180 text-white' : 'text-slate-500'}`} fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
|
|
</button>
|
|
{showDimensionMenu && (
|
|
<div className="absolute top-full left-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-3 animate-fade-in z-50 ring-1 ring-white/10">
|
|
<div className="flex justify-between items-center mb-3 px-1">
|
|
<span className="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em]">Select Columns</span>
|
|
<button
|
|
onClick={() => setSelectedDimensions([])}
|
|
className="text-[10px] font-bold text-indigo-400 hover:text-indigo-300 uppercase underline decoration-indigo-500/30 underline-offset-4"
|
|
>
|
|
Clear All
|
|
</button>
|
|
</div>
|
|
<div className="space-y-1">
|
|
{DIMENSION_OPTIONS.map(dim => (
|
|
<label key={dim.value} className="flex items-center gap-3 p-2.5 hover:bg-white/[0.04] rounded-lg cursor-pointer group transition-all active:scale-[0.98]">
|
|
<div className="relative flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedDimensions.includes(dim.value)}
|
|
onChange={() => {
|
|
if (selectedDimensions.includes(dim.value)) {
|
|
setSelectedDimensions(selectedDimensions.filter(d => d !== dim.value));
|
|
} else {
|
|
setSelectedDimensions([...selectedDimensions, dim.value]);
|
|
}
|
|
}}
|
|
className="w-4.5 h-4.5 rounded-md border-slate-600 bg-slate-800 text-indigo-500 focus:ring-indigo-500/50 focus:ring-offset-0 transition-all border-2 cursor-pointer"
|
|
/>
|
|
</div>
|
|
<span className={`text-sm font-semibold transition-colors ${selectedDimensions.includes(dim.value) ? 'text-white' : 'text-slate-400 group-hover:text-slate-300'}`}>
|
|
{dim.label}
|
|
</span>
|
|
{selectedDimensions.includes(dim.value) && (
|
|
<div className="ml-auto w-1 h-4 bg-indigo-500 rounded-full animate-pulse-slow"></div>
|
|
)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 pt-3 border-t border-slate-800 px-1">
|
|
<p className="text-[10px] text-slate-500 leading-relaxed italic">
|
|
The table will automatically refresh when you toggle these options.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Filter Builder Trigger */}
|
|
<button
|
|
onClick={() => setShowFilterBuilder(!showFilterBuilder)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showFilterBuilder || rowFilters.length > 0 ? 'bg-indigo-600/20 text-indigo-400 border-indigo-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
|
|
>
|
|
<FunnelIcon />
|
|
<span>Filter Rows {rowFilters.length > 0 && `(${rowFilters.length})`}</span>
|
|
</button>
|
|
|
|
{/* Chart Toggle */}
|
|
<button
|
|
onClick={() => setShowChart(!showChart)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showChart ? 'bg-indigo-600/20 text-indigo-400 border-indigo-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
|
|
>
|
|
<ChartIcon />
|
|
<span className="hidden sm:inline">{showChart ? 'Hide Chart' : 'Show Chart'}</span>
|
|
</button>
|
|
|
|
{/* Ads Toggle - Only show when ads data is loaded */}
|
|
{adsSummary && (
|
|
<button
|
|
onClick={() => setShowAdsMetrics(!showAdsMetrics)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showAdsMetrics ? 'bg-fuchsia-600/20 text-fuchsia-400 border-fuchsia-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
|
|
</svg>
|
|
<span className="hidden sm:inline">{showAdsMetrics ? 'Hide Ads' : 'Show Ads'}</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Attributed Sales Toggle - Only show when ads data is loaded and ads metrics are shown */}
|
|
{adsSummary && (
|
|
<button
|
|
onClick={() => setShowAttributedSales(!showAttributedSales)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showAttributedSales ? 'bg-amber-600/20 text-amber-400 border-amber-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
|
|
>
|
|
<TrendingIcon className="w-4 h-4" />
|
|
<span className="hidden sm:inline">{showAttributedSales ? 'Hide Attr. Sales' : 'Show Attr. Sales'}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 w-full lg:w-auto justify-between lg:justify-end">
|
|
<div className="text-xs text-slate-500 font-mono">
|
|
Showing {processedRows.length} rows
|
|
</div>
|
|
<button
|
|
onClick={handleExport}
|
|
className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-bold shadow-lg shadow-emerald-900/20 transition-all"
|
|
>
|
|
<DownloadIcon />
|
|
Export CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Builder Panel */}
|
|
{showFilterBuilder && (
|
|
<div className="bg-slate-900 border-b border-border p-4 animate-fade-in">
|
|
<div className="flex flex-col sm:flex-row gap-3 items-end">
|
|
<div className="flex-1 w-full">
|
|
<label className="text-xs font-semibold text-slate-500 uppercase mb-1 block">Metric</label>
|
|
<select
|
|
value={newFilterMetric}
|
|
onChange={(e) => setNewFilterMetric(e.target.value)}
|
|
className="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-primary"
|
|
>
|
|
<option value="">Select Metric...</option>
|
|
{metricOptions.map(opt => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-semibold text-slate-500 uppercase mb-1 block">Operator</label>
|
|
<select
|
|
value={newFilterOperator}
|
|
onChange={(e) => setNewFilterOperator(e.target.value as 'gt' | 'lt')}
|
|
className="bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-primary"
|
|
>
|
|
<option value="gt">Greater Than (>)</option>
|
|
<option value="lt">Less Than (<)</option>
|
|
</select>
|
|
</div>
|
|
<div className="w-32">
|
|
<label className="text-xs font-semibold text-slate-500 uppercase mb-1 block">Value</label>
|
|
<input
|
|
type="number"
|
|
value={newFilterValue}
|
|
onChange={(e) => setNewFilterValue(e.target.value)}
|
|
placeholder="0"
|
|
className="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={addFilter}
|
|
disabled={!newFilterMetric || !newFilterValue}
|
|
className="px-4 py-2 bg-primary hover:bg-indigo-500 text-white rounded-lg text-sm font-medium disabled:opacity-50 transition-colors"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
|
|
{/* Active Filters Chips */}
|
|
{rowFilters.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-800">
|
|
{rowFilters.map(filter => {
|
|
const metricLabel = metricOptions.find(m => m.value === filter.metric)?.label || filter.metric;
|
|
return (
|
|
<div key={filter.id} className="flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/30 text-indigo-300 px-3 py-1 rounded-full text-xs font-medium">
|
|
<span>{metricLabel} {filter.operator === 'gt' ? '>' : '<'} {filter.value}</span>
|
|
<button onClick={() => removeFilter(filter.id)} className="hover:text-white">
|
|
<CloseIcon />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
|
|
{/* Ads Performance Summary - Shows when ads data is loaded */}
|
|
{adsSummary && showAdsMetrics && (
|
|
<div className="bg-gradient-to-r from-fuchsia-900/20 to-indigo-900/20 border-y border-fuchsia-500/30 px-4 py-3">
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
|
|
<span className="text-xs font-bold text-fuchsia-300 uppercase tracking-wide">Advertising Data:</span>
|
|
<span className="text-xs text-slate-400">{adsSummary.recordCount.toLocaleString('de-DE')} records</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
|
<span className="text-xs text-slate-400 mr-2">Ad Spend:</span>
|
|
<span className="text-sm font-bold text-fuchsia-400">€{adsSummary.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
|
|
</div>
|
|
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
|
<span className="text-xs text-slate-400 mr-2">Attr. Sales:</span>
|
|
<span className="text-sm font-bold text-emerald-400">€{adsSummary.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
|
|
</div>
|
|
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
|
<span className="text-xs text-slate-400 mr-2">ACOS:</span>
|
|
<span className={`text-sm font-bold ${adsSummary.acos <= 30 ? 'text-emerald-400' : adsSummary.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
|
|
{adsSummary.acos.toFixed(1)}%
|
|
</span>
|
|
</div>
|
|
<div className="px-3 py-1 bg-slate-900/50 rounded-lg">
|
|
<span className="text-xs text-slate-400 mr-2">ROAS:</span>
|
|
<span className={`text-sm font-bold ${adsSummary.roas >= 3 ? 'text-emerald-400' : adsSummary.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
|
|
{adsSummary.roas.toFixed(2)}x
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Data Table */}
|
|
<div className="overflow-x-auto min-h-[400px]">
|
|
<table className="w-full text-left text-sm border-collapse">
|
|
<thead className="bg-slate-950 text-slate-400 uppercase text-xs font-semibold tracking-wider sticky top-0 z-20 shadow-sm border-b border-white/10">
|
|
{/* NEW: Filtered Totals Header Row */}
|
|
<tr className="bg-indigo-950/20 border-b border-indigo-500/30">
|
|
<th colSpan={effectiveDimensions.length} className="px-4 py-3 bg-indigo-900/10">
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
|
</svg>
|
|
<span className="text-[10px] font-black text-indigo-300 tracking-widest uppercase">Filtered Totals</span>
|
|
</div>
|
|
</th>
|
|
{years.map((year, index) => {
|
|
const totals = filteredTotalsByYear[year];
|
|
const prevYear = years[index + 1];
|
|
return (
|
|
<React.Fragment key={`totals-${year}`}>
|
|
<th className="px-4 py-3 text-right border-x border-indigo-500/10 bg-indigo-900/5">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-emerald-400 font-bold text-sm">
|
|
€{totals.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
|
|
</span>
|
|
{totals.sellOutGrowth !== undefined && (
|
|
<span className={`text-[9px] font-black ${totals.sellOutGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
|
{totals.sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(totals.sellOutGrowth).toFixed(1)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</th>
|
|
<th className="px-4 py-3 text-right border-r border-indigo-500/10 bg-indigo-900/5">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-blue-400 font-bold text-sm">
|
|
{totals.units.toLocaleString('de-DE')}
|
|
</span>
|
|
{totals.unitsGrowth !== undefined && (
|
|
<span className={`text-[9px] font-black ${totals.unitsGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
|
|
{totals.unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(totals.unitsGrowth).toFixed(1)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</th>
|
|
{prevYear && <th colSpan={2} className="bg-indigo-900/5 border-r border-indigo-500/10"></th>}
|
|
{showAdsMetrics && adsSummary && (
|
|
<>
|
|
<th className="px-3 py-3 text-right bg-fuchsia-950/20 border-r border-fuchsia-500/10">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-fuchsia-400 font-bold text-[13px]">
|
|
€{totals.adSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
|
|
</span>
|
|
{(totals as any).adSpendGrowth !== undefined && (
|
|
<span className={`text-[9px] font-black ${(totals as any).adSpendGrowth <= 0 ? 'text-emerald-400' : 'text-amber-400'}`}>
|
|
{(totals as any).adSpendGrowth >= 0 ? '↑' : '↓'} {Math.abs((totals as any).adSpendGrowth).toFixed(1)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</th>
|
|
<th className="px-3 py-3 text-right bg-fuchsia-950/20 border-r border-fuchsia-500/10">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-fuchsia-300 font-bold text-[13px]">
|
|
{totals.sellOut > 0 ? ((totals.adSpend / totals.sellOut) * 100).toFixed(2) : '0.00'}%
|
|
</span>
|
|
<span className="text-[9px] font-black text-slate-500 uppercase">TACOS</span>
|
|
</div>
|
|
</th>
|
|
</>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</tr>
|
|
<tr>
|
|
{/* Dynamic Dimension Headers */}
|
|
{effectiveDimensions.map(dim => {
|
|
const label = DIMENSION_OPTIONS.find(d => d.value === dim)?.label || dim;
|
|
return (
|
|
<th
|
|
key={dim}
|
|
className="px-4 py-3 border-b border-border cursor-pointer hover:text-white group bg-slate-950 min-w-[150px]"
|
|
onClick={() => requestSort(dim)}
|
|
>
|
|
<div className="flex items-center">
|
|
{label} {getSortIcon(dim)}
|
|
</div>
|
|
</th>
|
|
);
|
|
})}
|
|
|
|
{/* Data Columns: Year Groups */}
|
|
{years.map((year, index) => {
|
|
const prevYear = years[index + 1]; // Since years are sorted desc: 2025, 2024... next index is prev year
|
|
return (
|
|
<React.Fragment key={year}>
|
|
{/* Sell Out & Units */}
|
|
<th
|
|
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[100px]"
|
|
onClick={() => requestSort(`total_sellOut_${year}`)}
|
|
>
|
|
<div className="flex items-center justify-end">
|
|
Sell Out {year} {getSortIcon(`total_sellOut_${year}`)}
|
|
</div>
|
|
</th>
|
|
<th
|
|
className="px-4 py-3 border-b border-border text-right cursor-pointer hover:text-white bg-slate-950 min-w-[80px]"
|
|
onClick={() => requestSort(`total_units_${year}`)}
|
|
>
|
|
<div className="flex items-center justify-end">
|
|
Units {year} {getSortIcon(`total_units_${year}`)}
|
|
</div>
|
|
</th>
|
|
|
|
{/* Growth Columns (if prev year exists) */}
|
|
{prevYear && (
|
|
<>
|
|
<th
|
|
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
|
|
onClick={() => requestSort(`growth_sellOut_${year}_${prevYear}`)}
|
|
>
|
|
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
|
|
S.O. Δ% {getSortIcon(`growth_sellOut_${year}_${prevYear}`)}
|
|
</div>
|
|
</th>
|
|
<th
|
|
className="px-2 py-3 border-b border-border text-center bg-slate-950/50 min-w-[80px] cursor-pointer hover:text-white"
|
|
onClick={() => requestSort(`growth_units_${year}_${prevYear}`)}
|
|
>
|
|
<div className="flex items-center justify-center text-[10px] text-slate-500 uppercase">
|
|
Units Δ% {getSortIcon(`growth_units_${year}_${prevYear}`)}
|
|
</div>
|
|
</th>
|
|
</>
|
|
)}
|
|
|
|
{/* Ads Columns - Only show when ads data exists and toggle is on */}
|
|
{showAdsMetrics && adsSummary && (
|
|
<>
|
|
<th
|
|
className="px-3 py-3 border-b border-fuchsia-500/30 text-right bg-fuchsia-950/30 min-w-[90px] cursor-pointer hover:bg-fuchsia-900/40 transition-colors"
|
|
onClick={() => requestSort(`adSpend_${year}`)}
|
|
>
|
|
<div className="flex items-center justify-end text-fuchsia-400 text-[10px] uppercase">
|
|
Ad Spend {year} {getSortIcon(`adSpend_${year}`)}
|
|
</div>
|
|
</th>
|
|
<th
|
|
className="px-3 py-3 border-b border-fuchsia-500/30 text-right bg-fuchsia-950/30 min-w-[70px] cursor-pointer hover:bg-fuchsia-900/40 transition-colors"
|
|
onClick={() => requestSort(`tacos_${year}`)}
|
|
>
|
|
<div className="flex items-center justify-end text-fuchsia-400 text-[10px] uppercase">
|
|
TACOS {year} {getSortIcon(`tacos_${year}`)}
|
|
</div>
|
|
</th>
|
|
</>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border text-slate-300">
|
|
{paginatedRows.map((row) => (
|
|
<tr key={row.id} className="hover:bg-slate-800/50 transition-colors group">
|
|
{effectiveDimensions.map(dim => (
|
|
<td key={dim} className="px-4 py-3 font-medium text-slate-200 break-words max-w-xs">
|
|
{dim === 'title'
|
|
? <div className="flex items-start gap-2">
|
|
<span className="line-clamp-2" title={row.title}>{row.title || '-'}</span>
|
|
{stockMap && (
|
|
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
|
|
)}
|
|
</div>
|
|
: dim === 'asin' || dim === 'sku'
|
|
? <div className="flex items-center gap-1.5">
|
|
{(() => {
|
|
const asin = (row.asin || '').trim().toUpperCase();
|
|
if (asin && top50Ranking) {
|
|
if (top50Mode === 'eu') {
|
|
const rank = top50Ranking.eu.get(asin);
|
|
if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
|
|
} else {
|
|
const rank = top50Ranking.uk.get(asin);
|
|
if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
|
|
}
|
|
}
|
|
return null;
|
|
})()}
|
|
<span>{(row[dim as keyof PivotRow] as string) || '-'}</span>
|
|
</div>
|
|
: (row[dim as keyof PivotRow] as string) || '-'
|
|
}
|
|
</td>
|
|
))}
|
|
|
|
{/* Metric Values */}
|
|
{years.map((year, index) => {
|
|
const data = row.totalsByYear[year];
|
|
const prevYear = years[index + 1];
|
|
const prevData = prevYear ? row.totalsByYear[prevYear] : null;
|
|
|
|
// Calculate Growth
|
|
let sellOutGrowth = null;
|
|
let unitsGrowth = null;
|
|
|
|
if (prevYear) {
|
|
const currSO = data?.sellOut || 0;
|
|
const prevSO = prevData?.sellOut || 0;
|
|
if (prevSO !== 0) sellOutGrowth = ((currSO - prevSO) / prevSO) * 100;
|
|
else if (currSO > 0) sellOutGrowth = 100; // New entry
|
|
|
|
const currUnits = data?.units || 0;
|
|
const prevUnits = prevData?.units || 0;
|
|
if (prevUnits !== 0) unitsGrowth = ((currUnits - prevUnits) / prevUnits) * 100;
|
|
else if (currUnits > 0) unitsGrowth = 100;
|
|
}
|
|
|
|
return (
|
|
<React.Fragment key={year}>
|
|
<td className="px-4 py-3 text-right font-medium text-white group-hover:text-emerald-400 transition-colors">
|
|
{data ? `€${data.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
|
|
</td>
|
|
<td className="px-4 py-3 text-right text-slate-400">
|
|
{data ? data.units.toLocaleString('de-DE') : '-'}
|
|
</td>
|
|
|
|
{/* Growth Cells */}
|
|
{prevYear && (
|
|
<>
|
|
<td className={`px-2 py-3 text-center font-bold text-xs ${sellOutGrowth !== null ? (sellOutGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
|
|
{sellOutGrowth !== null ? (
|
|
<span className="flex items-center justify-center gap-1">
|
|
{sellOutGrowth >= 0 ? '↑' : '↓'} {Math.abs(sellOutGrowth).toFixed(0)}%
|
|
</span>
|
|
) : '-'}
|
|
</td>
|
|
<td className={`px-2 py-3 text-center font-bold text-xs ${unitsGrowth !== null ? (unitsGrowth >= 0 ? 'text-emerald-500' : 'text-red-500') : 'text-slate-600'}`}>
|
|
{unitsGrowth !== null ? (
|
|
<span className="flex items-center justify-center gap-1">
|
|
{unitsGrowth >= 0 ? '↑' : '↓'} {Math.abs(unitsGrowth).toFixed(0)}%
|
|
</span>
|
|
) : '-'}
|
|
</td>
|
|
</>
|
|
)}
|
|
|
|
{/* Ads Data Cells */}
|
|
{showAdsMetrics && adsSummary && (() => {
|
|
const adsYearData = row.adsByYear?.[year];
|
|
return (
|
|
<>
|
|
<td className="px-3 py-3 text-right text-fuchsia-400 font-medium bg-fuchsia-950/10">
|
|
{adsYearData ? `€${adsYearData.adSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
|
|
</td>
|
|
<td className={`px-3 py-3 text-right font-bold text-xs bg-fuchsia-950/10 ${adsYearData
|
|
? (adsYearData.tacos <= 10 ? 'text-emerald-400' : adsYearData.tacos <= 20 ? 'text-amber-400' : 'text-red-400')
|
|
: 'text-slate-600'
|
|
}`}>
|
|
{adsYearData ? `${adsYearData.tacos.toFixed(1)}%` : '-'}
|
|
</td>
|
|
</>
|
|
);
|
|
})()}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
|
|
{paginatedRows.length === 0 && (
|
|
<tr>
|
|
<td colSpan={effectiveDimensions.length + (years.length * 2)} className="px-6 py-12 text-center text-slate-500 italic">
|
|
No data matches your filters.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
<div className="p-4 border-t border-border bg-slate-900/50 flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<div className="text-sm text-slate-500">
|
|
Page {currentPage} of {totalPages || 1}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
disabled={currentPage === 1}
|
|
className="px-3 py-1 bg-slate-800 border border-slate-700 rounded text-sm text-slate-300 disabled:opacity-50 hover:bg-slate-700"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
|
disabled={currentPage === totalPages || totalPages === 0}
|
|
className="px-3 py-1 bg-slate-800 border border-slate-700 rounded text-sm text-slate-300 disabled:opacity-50 hover:bg-slate-700"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DataGrid; |