/* Reports List — library of every saved report. Chrome matches Report Center 2.0: TopBar breadcrumb + ReportHeader-style page header + PageSection-style card wrapping the table. */ /* ---------- 37 saved-report rows (matches screenshot order) ---------- */ const REPORT_ROWS = [ { brand: 'American Outdoor Products', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'American Outdoor Products', merchantType: 'Seller', marketplace: 'Mexico', shared: false }, { brand: 'American Outdoor Products', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'American Outdoor Products', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'American Outdoor Products', reports: ['Retail + Ads'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'American Outdoor Products', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'American Outdoor Products', reports: ['American Outdoor Products'], dataSet: null, adData: 'Active', retailData: 'Active', merchantName: 'American Outdoor Products', merchantType: 'Vendor', marketplace: 'United States', shared: false }, { brand: 'Anubis Rio', reports: ['Anubis Rio'], dataSet: null, adData: null, retailData: 'Activate', merchantName: 'Anubis Rio', merchantType: 'Seller', marketplace: 'United States', shared: false, ghost: true }, { brand: 'Ash Apothecary', reports: ['Ash Apothecary'], dataSet: null, adData: null, retailData: 'Activate', merchantName: 'Ash Apothecary', merchantType: 'Seller', marketplace: 'United States', shared: false, ghost: true }, { brand: 'BLUNT USA', reports: ['BLUNT USA'], dataSet: null, adData: null, retailData: 'Activate', merchantName: 'BLUNT USA', merchantType: 'Seller', marketplace: 'United States', shared: false, ghost: true }, { brand: 'Function 101', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Function 101', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'Fuse Lenses', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Fuse Lenses', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'Home IQ USA', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Home IQ USA', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'Hydrapak, LLC', reports: ['Retail + Ads','Retail Performance','Sponsored Ads','Share of Voice'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Hydrapak, LLC', merchantType: 'Seller', marketplace: 'United States', shared: true }, { brand: 'Hydrapak, LLC', reports: ['Retail + Ads','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Hydrapak - CA', merchantType: 'Seller', marketplace: 'Canada', shared: true }, { brand: 'Hydrapak, LLC', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Hydrapak - DE Sporting', merchantType: 'Seller', marketplace: 'Germany (Pan-EU)', shared: true }, { brand: 'Hydrapak, LLC', reports: ['Retail + Ads','Retail Performance'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Hydrapak - IT Sporting', merchantType: 'Seller', marketplace: 'Italy (Pan-EU)', shared: false }, { brand: 'Hydrapak, LLC', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Hydrapak - FR Sporting', merchantType: 'Seller', marketplace: 'France', shared: false }, { brand: 'Hydro Cell', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Hydro Cell', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'JDM Distribution UK', reports: ['Retail + Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'JDM Distribution UK LTD', merchantType: 'Seller', marketplace: 'United Kingdom', shared: false }, { brand: 'KIWA', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'KIWA', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'KOKOLU', reports: ['KOKOLU'], dataSet: null, adData: null, retailData: 'Activate', merchantName: 'KOKOLU', merchantType: 'Seller', marketplace: 'United States', shared: false, ghost: true }, { brand: 'Popi Co', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Popi Co', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'Popi Co', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Popi Co', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'Stretch Labs', reports: ['Retail + Ads','Retail Performance','Sponsored Ads','Share of Voice'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Stretch Labs', merchantType: 'Seller', marketplace: 'United States', shared: true }, { brand: 'Titan Casket', reports: ['Retail + Ads','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Titan Casket', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'YOLO BRICK ROAD', reports: ['Retail + Ads','Retail Performance','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'YOLO BRICK ROAD', merchantType: 'Seller', marketplace: 'United States', shared: false }, { brand: 'American Outdoor Products', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'American Outdoor Products', merchantType: 'Seller', marketplace: 'United Kingdom', shared: false }, { brand: 'American Outdoor Products', reports: ['Sponsored Ads'], dataSet: 'Ads Only', adData: 'Active', retailData: null, merchantName: 'American Outdoor Products', merchantType: 'Seller', marketplace: 'Germany (Pan-EU)', shared: false }, { brand: 'Function 101', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Function 101', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'Fuse Lenses', reports: ['Share of Voice'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Fuse Lenses', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'Hydro Cell', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Hydro Cell', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'Home IQ USA', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Home IQ USA', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'Hydrapak, LLC', reports: ['Sponsored Ads'], dataSet: 'Ads Only', adData: 'Active', retailData: null, merchantName: 'Hydrapak - DE Sporting', merchantType: 'Seller', marketplace: 'Germany (Pan-EU)', shared: false }, { brand: 'Hydrapak, LLC', reports: ['Retail + Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'Hydrapak - FR Sporting', merchantType: 'Seller', marketplace: 'France', shared: false }, { brand: 'Popi Co', reports: ['Sponsored Ads'], dataSet: 'Ads Only', adData: 'Active', retailData: null, merchantName: 'Popi Co', merchantType: 'Seller', marketplace: 'United Kingdom', shared: false }, { brand: 'Stretch Labs', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Stretch Labs', merchantType: 'Seller', marketplace: 'Canada', shared: true }, { brand: 'Titan Casket', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'Titan Casket', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'YOLO BRICK ROAD', reports: ['Retail Performance'], dataSet: 'Retail Only', adData: null, retailData: 'Active', merchantName: 'YOLO BRICK ROAD', merchantType: 'Seller', marketplace: 'Canada', shared: false }, { brand: 'KIWA', reports: ['Retail + Ads','Sponsored Ads'], dataSet: 'Ads + Ops', adData: 'Active', retailData: 'Active', merchantName: 'KIWA', merchantType: 'Seller', marketplace: 'Canada', shared: false }, ]; /* ---------- Chip palette ---------- */ const reportChipPalette = { 'Retail + Ads': { bg: 'color-mix(in srgb, var(--rc-green) 13%, transparent)', fg: 'var(--rc-green-ink)', border: 'color-mix(in srgb, var(--rc-green) 28%, transparent)' }, 'Retail Performance': { bg: 'color-mix(in srgb, var(--rc-green) 13%, transparent)', fg: 'var(--rc-green-ink)', border: 'color-mix(in srgb, var(--rc-green) 28%, transparent)' }, 'Sponsored Ads': { bg: 'color-mix(in srgb, var(--rc-green) 13%, transparent)', fg: 'var(--rc-green-ink)', border: 'color-mix(in srgb, var(--rc-green) 28%, transparent)' }, 'Share of Voice': { bg: 'color-mix(in srgb, var(--rc-green) 13%, transparent)', fg: 'var(--rc-green-ink)', border: 'color-mix(in srgb, var(--rc-green) 28%, transparent)' }, }; const StatusPill = ({ label }) => { if (!label) return N/A; const active = label === 'Active'; return ( {label} ); }; const ReportChip = ({ label, merchantName }) => { const pal = reportChipPalette[label]; const href = `Report Center 2.0.html?merchant=${encodeURIComponent(merchantName || '')}&report=${encodeURIComponent(label)}`; if (pal) { return ( {label} ); } // Ghost — not yet saved return ( {label} ); }; const SortCaret = ({ dir }) => ( ); /* Filter-chip style matching BreadChip in TopBar */ const ActiveFilterChip = ({ label, onRemove, icon = 'sort' }) => ( {label} ); const ChipIcon = ({ name }) => { if (name === 'sort') return ( ); if (name === 'group') return ( ); return ; }; /* ---------- Top Bar specific to Reports list ---------- */ const ReportsTopBar = ({ role = 'admin' }) => { const roleLabel = { admin: 'Admin', editor: 'Editor', viewer: 'Viewer' }[role]; return (
Reports
/ All merchants
{roleLabel}
$ USD
); }; /* ---------- Page header (ReportHeader echo) ---------- */ const ReportsPageHeader = () => (
Workspace Reports

Reports

Browse, group, and share the report library for your brands and merchants.
Save View Export New Report
); /* ---------- Table (PageSection-style card) ---------- */ const Th = ({ children, style, onClick, sorted, dir }) => ( {children} {sorted && } ); const Td = ({ children, style }) => ( {children} ); const RLCheckbox = ({ checked, indeterminate, onChange, onClick }) => { const ref = React.useRef(null); React.useEffect(() => { if (ref.current) ref.current.indeterminate = !!indeterminate && !checked; }, [indeterminate, checked]); return ( { e.stopPropagation(); onClick && onClick(e); }} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 14, height: 14, borderRadius: 3, cursor: 'pointer', flexShrink: 0, border: '1.5px solid ' + (checked || indeterminate ? 'var(--rc-green)' : 'var(--rc-border)'), background: checked || indeterminate ? 'var(--rc-green)' : 'var(--rc-card)', color: '#fff', }}> {checked && ( )} {indeterminate && !checked && ( )} {})} style={{ display: 'none' }} /> ); }; const PageBtn = ({ children, onClick, active, disabled }) => ( ); const DragHandle = () => ( ); /* Bulk action button — outline style matching Btn but compact */ const BulkBtn = ({ children, icon, onClick, danger }) => ( ); /* RC-RPT-011 — inline editable merchant name (admin/manager only). Double-click to edit; Enter saves; Esc cancels. Client-side only until Data Hub wires the persistence mutation. */ const EditableName = ({ value, canEdit, editing, onStartEdit, onSave, onCancel }) => { const [draft, setDraft] = React.useState(value); React.useEffect(() => { if (editing) setDraft(value); }, [editing, value]); const inputRef = React.useRef(null); React.useEffect(() => { if (editing && inputRef.current) { inputRef.current.focus(); inputRef.current.select(); } }, [editing]); if (editing) { return ( setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); onSave(draft.trim() || value); } if (e.key === 'Escape') { e.preventDefault(); onCancel(); } }} onBlur={() => onSave(draft.trim() || value)} onClick={e => e.stopPropagation()} style={{ padding: '4px 8px', borderRadius: 5, border: '1px solid var(--rc-green)', background: 'var(--rc-card)', color: 'var(--rc-text)', fontSize: 12, fontFamily: 'inherit', outline: 'none', minWidth: 180, }} /> ); } return ( { e.stopPropagation(); onStartEdit(); } : undefined} title={canEdit ? 'Double-click to rename' : value} style={{ display: 'inline-block', padding: '2px 0', borderRadius: 3, cursor: canEdit ? 'text' : 'default', }} >{value} ); }; /* ---------- Main page ---------- */ const ReportsListApp = () => { const [theme, setTheme] = React.useState('light'); const [sortCol, setSortCol] = React.useState('brand'); const [sortDir, setSortDir] = React.useState('asc'); const [page, setPage] = React.useState(1); const [groupBy, setGroupBy] = React.useState('brand'); // 'brand' | null const [expanded, setExpanded] = React.useState({ 'American Outdoor Products': true }); const [selected, setSelected] = React.useState(new Set()); // row indexes const [shareOpen, setShareOpen] = React.useState(false); /* RC-RPT-011 — rename inline edit state */ const [editingName, setEditingName] = React.useState(null); // { id, value } /* RC-RPT-013 — delete confirm modal state */ const [deleteModal, setDeleteModal] = React.useState(null); // { name, ids, isCore } /* override map: id → renamed merchantName (client-side only until Data Hub) */ const [renameMap, setRenameMap] = React.useState({}); const pageSize = 10; // Assign stable ids const rowsById = React.useMemo( () => REPORT_ROWS.map((r, i) => ({ ...r, __id: i })), [] ); React.useEffect(() => { document.documentElement.setAttribute('data-rc-theme', theme); }, [theme]); const sortedRows = React.useMemo(() => { const rows = [...rowsById]; const dir = sortDir === 'asc' ? 1 : -1; rows.sort((a, b) => { const av = (a[sortCol] ?? '').toString().toLowerCase(); const bv = (b[sortCol] ?? '').toString().toLowerCase(); return av < bv ? -dir : av > bv ? dir : 0; }); return rows; }, [sortCol, sortDir, rowsById]); // Build grouped structure when groupBy active; else flat const grouped = React.useMemo(() => { if (!groupBy) return null; const map = new Map(); sortedRows.forEach(r => { const key = r[groupBy]; if (!map.has(key)) map.set(key, []); map.get(key).push(r); }); // sort group keys alphabetically return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0])); }, [sortedRows, groupBy]); // For grouped view we page by group keys (one page = 10 groups); for flat by rows const totalItems = groupBy ? grouped.length : sortedRows.length; const totalPages = Math.max(1, Math.ceil(totalItems / pageSize)); const pageSlice = groupBy ? grouped.slice((page - 1) * pageSize, page * pageSize) : sortedRows.slice((page - 1) * pageSize, page * pageSize); const onSort = (col) => { if (sortCol === col) setSortDir(sortDir === 'asc' ? 'desc' : 'asc'); else { setSortCol(col); setSortDir('asc'); } }; const toggleGroup = (key) => setExpanded(prev => ({ ...prev, [key]: !prev[key] })); // Selection helpers const toggleRow = (id) => setSelected(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); const toggleRows = (ids, on) => setSelected(prev => { const next = new Set(prev); ids.forEach(id => on ? next.add(id) : next.delete(id)); return next; }); const clearSelection = () => setSelected(new Set()); const selectAllIds = rowsById.map(r => r.__id); const allSelected = selected.size === rowsById.length; const anySelected = selected.size > 0; // Ids visible on the current page (needed for the header checkbox + "select page" bulk) const visibleIds = React.useMemo(() => { if (!groupBy) return pageSlice.map(r => r.__id); return pageSlice.flatMap(([, rows]) => rows.map(r => r.__id)); }, [pageSlice, groupBy]); const allVisibleSelected = visibleIds.length > 0 && visibleIds.every(id => selected.has(id)); const someVisibleSelected = visibleIds.some(id => selected.has(id)); React.useEffect(() => { setPage(1); }, [groupBy]); window.__role = 'admin'; return (
setTheme(theme === 'dark' ? 'light' : 'dark')} />
{/* PageSection-style card */}
{/* Section header — mirrors PageSection */}

{sortedRows.length} reports{groupBy && ` · ${grouped.length} groups`}

{}} /> {}} /> {groupBy && setGroupBy(null)} />}
{/* Table */}
{groupBy ? ( /* GROUPED view */ pageSlice.map(([groupKey, groupRows]) => { const open = !!expanded[groupKey]; const groupIds = groupRows.map(r => r.__id); const groupAll = groupIds.every(id => selected.has(id)); const groupSome = groupIds.some(id => selected.has(id)); return ( toggleGroup(groupKey)} style={{ cursor: 'pointer', background: open ? 'var(--rc-subtle)' : 'transparent' }} onMouseEnter={e => { if (!open) e.currentTarget.style.background = 'var(--rc-hover)'; }} onMouseLeave={e => { if (!open) e.currentTarget.style.background = 'transparent'; }}> {open && groupRows.map((row, i) => { const isSel = selected.has(row.__id); return ( { if (!isSel) e.currentTarget.style.background = 'var(--rc-hover)'; }} onMouseLeave={e => { e.currentTarget.style.background = isSel ? 'color-mix(in srgb, var(--rc-green) 6%, transparent)' : 'transparent'; }}> ); })} ); }) ) : ( /* FLAT view */ pageSlice.map((row, i) => { const isSel = selected.has(row.__id); return ( { if (!isSel) e.currentTarget.style.background = 'var(--rc-hover)'; }} onMouseLeave={e => { e.currentTarget.style.background = isSel ? 'color-mix(in srgb, var(--rc-green) 6%, transparent)' : 'transparent'; }}> ); }) )}
toggleRows(visibleIds, !allVisibleSelected)} /> onSort('brand')} sorted={sortCol === 'brand'} dir={sortDir}>Brand Name Reports Data Set Ad Data Retail Data onSort('merchantName')} sorted={sortCol === 'merchantName'} dir={sortDir}>Merchant Name Merchant Type Marketplace Shared {' '}
toggleRows(groupIds, !groupAll)} /> {groupKey} ({groupRows.length})  
toggleRow(row.__id)} /> ↳
{row.reports.map((r, j) => )}
{row.dataSet || —} setEditingName({ id: row.__id, value: renameMap[row.__id] || row.merchantName })} onSave={(v) => { setRenameMap(m => ({ ...m, [row.__id]: v })); setEditingName(null); }} onCancel={() => setEditingName(null)} /> {row.merchantType} {row.marketplace} {row.shared ? Shared : Not shared}
toggleRow(row.__id)} /> {row.brand}
{row.reports.map((r, j) => )}
{row.dataSet || —} setEditingName({ id: row.__id, value: renameMap[row.__id] || row.merchantName })} onSave={(v) => { setRenameMap(m => ({ ...m, [row.__id]: v })); setEditingName(null); }} onCancel={() => setEditingName(null)} /> {row.merchantType} {row.marketplace} {row.shared ? Shared : Not shared}
{/* Bulk action bar — appears when any rows selected */} {anySelected && (
{selected.size} selected
setShareOpen(true)}>Share Export Add to group Duplicate
{ const ids = [...selected]; const rows = rowsById.filter(r => ids.includes(r.__id)); // Core instance suppression: treat any row flagged "ghost" (activate path) // or the first seeded row for each merchant × marketplace as core. const hasCore = rows.some(r => r.ghost) || rows.length === rowsById.length; setDeleteModal({ name: rows.length === 1 ? rows[0].merchantName : `${rows.length} reports`, ids, isCore: hasCore, }); }}>Delete
)} {/* Pagination */}
Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, totalItems)} of {totalItems} {groupBy ? 'groups' : 'results'}
Rows per page 10
setPage(1)} disabled={page === 1}>« setPage(Math.max(1, page - 1))} disabled={page === 1}>‹ {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => ( setPage(p)} active={p === page}>{p} ))} setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages}>› setPage(totalPages)} disabled={page === totalPages}>»
setShareOpen(false)} subjectCount={selected.size} /> {/* RC-RPT-013 — delete report confirmation */} setDeleteModal(null)} reportName={deleteModal?.name || ''} isCore={!!deleteModal?.isCore} onConfirm={() => { const ids = deleteModal?.ids || []; if (window.__rcToast && window.__rcToast.push) { window.__rcToast.push({ tone: 'success', title: `Deleted ${ids.length} report${ids.length === 1 ? '' : 's'}`, detail: 'Client-side only — real delete lands with Data Hub.', }); } clearSelection(); }} />
); }; ReactDOM.createRoot(document.getElementById('root')).render();