Item Breakdown
{rows.length} items
{
const run = () => {
const sid = window.__rcToast.exportStarted({ scope: 'item breakdown' });
setTimeout(() => {
window.__rcToast.dismiss(sid);
if (Math.random() < 0.6) {
window.__rcToast.exportSucceeded({
scope: 'items',
filename: `${reportType.id}_items.xlsx`,
});
} else {
window.__rcToast.exportFailed({ scope: 'item breakdown', onRetry: run });
}
}, 900);
};
run();
}} />
setColPickerOpen(!colPickerOpen)} />
{colPickerOpen && (
<>
setColPickerOpen(false)}
style={{ position: 'fixed', inset: 0, zIndex: 40 }} />
Columns · drag to reorder
{colState.order.map((col, idx) => {
const label = col === 'asin' ? 'ASIN' :
col === 'sku' ? 'SKU' :
col === 'name' ? 'Product Name' :
col === 'campaign' ? 'Campaign' :
col === 'type' ? 'Type' :
METRIC_LABELS[col] || col;
const visible = !colState.hidden.has(col);
return (
setDragCol(col)}
onDragOver={(e) => { e.preventDefault(); setDropTarget(col); }}
onDragEnd={() => { setDragCol(null); setDropTarget(null); }}
onDrop={(e) => {
e.preventDefault();
if (!dragCol || dragCol === col) return;
const next = [...colState.order];
const from = next.indexOf(dragCol);
const to = next.indexOf(col);
next.splice(from, 1);
next.splice(to, 0, dragCol);
persistColState({ order: next, hidden: colState.hidden });
setDragCol(null); setDropTarget(null);
}}
style={{
display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px',
borderRadius: 5, fontSize: 12, color: 'var(--rc-text)',
background: dropTarget === col ? 'var(--rc-hover)' : 'transparent',
borderTop: dropTarget === col && dragCol ? '2px solid var(--rc-green)' : '2px solid transparent',
opacity: dragCol === col ? 0.5 : 1,
cursor: 'grab',
}}>
toggleHideCol(col)}
style={{ cursor: 'pointer', accentColor: 'var(--rc-green)' }} />
{label}
);
})}
{(colState.hidden.size > 0 || colState.order.join('|') !== defaultCols.join('|')) && (
)}
)}
{cols.map((col, i) => {
const isText = col === 'asin' || col === 'name' || col === 'campaign' || col === 'type' || col === 'sku';
const label = col === 'asin' ? 'ASIN' :
col === 'sku' ? 'SKU' :
col === 'name' ? 'Product Name' :
col === 'campaign' ? 'Campaign' :
col === 'type' ? 'Type' :
METRIC_LABELS[col] || col;
const isSorted = sort.col === col;
const bgActive = isSorted
? 'color-mix(in srgb, var(--rc-green) 8%, var(--rc-subtle))'
: 'var(--rc-subtle)';
const handleHeaderClick = () => {
if (isText) return;
// Single-click toggles value-sort direction (most common action)
if (sort.col === col && sort.by === 'value') {
setSort({ col, by: 'value', dir: sort.dir === 'desc' ? 'asc' : 'desc' });
} else {
setSort({ col, by: 'value', dir: 'desc' });
}
};
return (
|
{label}
{isSorted && (
{sort.by === 'value' ? 'val' : sort.by === 'netDelta' ? 'Δ' : '%'}
)}
{!isText && (
)}
{menuCol === col && !isText && (
setMenuCol(null)} comparison={comparison} />
)}
|
);
})}
{rows.map((r, i) => (
{cols.map((col, ci) => {
if (col === 'asin') return (
|
|
);
if (col === 'sku') return (
{r.sku} |
);
if (col === 'name') return (
{r.name} |
);
if (col === 'campaign') {
const cf = (window.CAMPAIGN_FIXTURES || [])[i % 10] || { campaign: `SP | Auto | ${r.asin}`, type: 'SP' };
return (
{cf.type}
{cf.campaign}
|
);
}
if (col === 'type') return SP | ;
const val = r[col];
const prior = val * (1 - 0.05 - (i % 3) * 0.03);
const dir = changeDirection(col, val - prior);
const changeStr = comparison !== 'none' ? formatChange(col, val, prior, changeMode) : null;
return (
{formatValue(col, val)}
{changeStr && {changeStr} }
|
);
})}
))}
Records {(page - 1) * pageSize + 1} – {Math.min(page * pageSize, totalRecords)} of {totalRecords}
);
};
const tdCellL = { padding: '10px 12px', textAlign: 'left', color: 'var(--rc-text-sub)', verticalAlign: 'top' };
const tdCellR = { padding: '10px 12px', textAlign: 'right', color: 'var(--rc-text-sub)', verticalAlign: 'top' };
const Paginator = ({ page = 1, totalPages = 26, onChange = () => {} }) => {
const go = (p) => {
const n = Math.max(1, Math.min(totalPages, p));
if (n !== page) onChange(n);
};
// Build page buttons: 1, cur-1, cur, cur+1, …, last (with ellipses where needed)
const buttons = [];
const push = (v) => buttons.push(v);
push('‹');
const nums = new Set([1, 2, page - 1, page, page + 1, totalPages - 1, totalPages]);
const sorted = [...nums].filter(n => n >= 1 && n <= totalPages).sort((a, b) => a - b);
let last = 0;
sorted.forEach(n => {
if (n - last > 1) push('…');
push(n);
last = n;
});
push('›');
return (
{buttons.map((p, i) => {
const isNum = typeof p === 'number';
const isCur = isNum && p === page;
const isEllipsis = p === '…';
const isPrev = p === '‹';
const isNext = p === '›';
const disabled = isEllipsis || (isPrev && page === 1) || (isNext && page === totalPages);
return (
);
})}
);
};
const SectionHeader = ({ title, subtitle }) => (
{title}
{subtitle}
);
Object.assign(window, { PageOverTime, ChartPanel, PageOverRange, ItemBreakdownTable, Paginator, SectionHeader, ALL_CHART_PANELS });