/* global React, Icons, Toggle, Checkbox, ProductImage, Sparkline, Stars */ const { useState, useEffect, useMemo } = React; /* ============================================================ Master column definitions. The same set is used on Search and Leads — each page can default-show a subset. ============================================================ */ const MASTER_COLUMNS = [ { key: 'product', label: 'Product', sticky: true, width: 260 }, { key: 'asin', label: 'ASIN', mono: true }, { key: 'brand', label: 'Brand' }, { key: 'category', label: 'Category' }, { key: 'source', label: 'Source' }, { key: 'addedDate', label: 'Added' }, { key: 'price', label: 'Price', num: true }, { key: 'revenue30d', label: '30d Revenue', num: true }, { key: 'monthlySales', label: 'Monthly Sales', num: true }, { key: 'bsr', label: '90d BSR', num: true }, { key: 'reviews', label: 'Review Count', num: true }, { key: 'rating', label: 'Rating' }, { key: 'variations', label: '# Variations', num: true }, { key: 'videos', label: 'Videos', num: true }, { key: 'hasMainVideo', label: 'Brand Video', center: true }, { key: 'cc', label: 'CC %', num: true }, { key: 'onSite', label: 'On‑Site %', num: true }, { key: 'onSiteCommission',label: 'On‑Site Commission', num: true }, { key: 'ccCommission', label: 'CC Commission', num: true }, { key: 'campaignStart', label: 'Campaign Start' }, { key: 'campaignEnd', label: 'Campaign End' }, { key: 'campaignDate', label: 'Campaign Date' }, { key: 'budget', label: 'Budget', num: true }, { key: 'remainingBudget', label: 'Remaining Budget', num: true }, { key: 'totalSlots', label: 'Total Slots', num: true }, { key: 'availableSlots', label: 'Available Slots', num: true }, { key: 'slotsTrend', label: 'Slots Left' }, { key: 'listingAge', label: 'Listing Age', num: true }, { key: 'trend', label: 'Budget Left' }, ]; const COLUMN_BY_KEY = Object.fromEntries(MASTER_COLUMNS.map(c => [c.key, c])); function ProductCell({ p, i }) { const [imgError, setImgError] = useState(false); const [hovered, setHovered] = useState(false); const imgSrc = !imgError && p.image ? `https://m.media-amazon.com/images/I/${p.image}` : null; return (
{imgSrc ? (
setHovered(true)} onMouseLeave={() => setHovered(false)} > setImgError(true)} /> {hovered && (
)}
) : ( )}
e.stopPropagation()} > {p.name}
{p.brand} · {p.source}
); } function renderProductCell(p, i) { return ; } function CopyableAsin({ asin }) { const [copied, setCopied] = useState(false); const copy = () => { navigator.clipboard.writeText(asin); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return ( {copied ? '✓ Copied' : asin} ); } function BudgetBar({ p }) { const [hovered, setHovered] = useState(false); if (!p.budget || p.budget <= 0) return —; const pct = Math.round((p.remainingBudget / p.budget) * 100); const clamped = Math.max(0, Math.min(100, pct)); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} > {/* Track */}
{/* Fill */}
{hovered && (
{pct}% budget remaining
)}
); } function SlotsBar({ p }) { const [hovered, setHovered] = useState(false); if (!p.totalSlots || p.totalSlots <= 0) return —; const pct = Math.round(((p.availableSlots ?? 0) / p.totalSlots) * 100); const clamped = Math.max(0, Math.min(100, pct)); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} >
{hovered && (
{p.availableSlots ?? 0} of {p.totalSlots} slots available
)}
); } const fmtIsoDate = (s) => s ? new Date(s + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—'; function renderCellValue(key, p, i, fmtUSD, fmtInt, fmtBSR) { switch (key) { case 'product': return renderProductCell(p, i); case 'asin': return ; case 'brand': { if (!p.brand) return null; const creatorId = localStorage.getItem('aip_creator_id'); const params = new URLSearchParams({ status: 'opportunity', type: 'affiliate-plus', sortBy: 'recommended_for_you', keyword: p.brand, filterExpanderStatus: 'false', categories: '', nonFullyClaimedOnly: 'false', campaignStatuses: 'active,pending', earlyAccessOnly: 'false', topBrandsOnly: 'false', creatorFavoritesOnly: 'false', brands: '', contentType: '', budgetAvailability: '', }); if (creatorId) params.set('creatorId', creatorId); const url = `https://affiliate-program.amazon.com/p/connect/requests?${params}`; return ( e.target.style.textDecoration = 'underline'} onMouseLeave={e => e.target.style.textDecoration = 'none'} >{p.brand} ); } case 'category': return {p.category}; case 'source': return {p.source}; case 'addedDate': return {p.addedDate}; case 'price': return {fmtUSD(p.price)}; case 'revenue30d': return {p.revenue30d != null ? fmtUSD(p.revenue30d) : '—'}; case 'monthlySales': return {fmtInt(p.monthlySales)}; case 'bsr': return {fmtBSR(p.bsr)}; case 'reviews': return {fmtInt(p.reviews)}; case 'rating': return ( {p.rating} ); case 'variations': return {p.variations}; case 'videos': return 0 ? 'var(--text-0)' : 'var(--text-3)' }}>{p.videos != null ? p.videos : '—'}; case 'hasMainVideo': return p.hasMainVideo ? (
) : null; case 'cc': { const color = p.cc >= 20 ? 'var(--success)' : 'var(--text-2)'; const creatorId = localStorage.getItem('aip_creator_id'); const params = new URLSearchParams({ status: 'opportunity', type: 'affiliate-plus', sortBy: 'recommended_for_you', keyword: p.asin, filterExpanderStatus: 'false', categories: '', nonFullyClaimedOnly: 'false', campaignStatuses: 'active,pending', earlyAccessOnly: 'false', topBrandsOnly: 'false', creatorFavoritesOnly: 'false', brands: '', contentType: '', budgetAvailability: '', }); if (creatorId) params.set('creatorId', creatorId); const url = `https://affiliate-program.amazon.com/p/connect/requests?${params}`; return ( e.target.style.textDecoration = 'underline'} onMouseLeave={e => e.target.style.textDecoration = 'none'} >{p.cc}% ); } case 'onSite': return {p.onSite}%; case 'onSiteCommission': return {fmtUSD(p.onSiteCommission)}; case 'ccCommission': return {fmtUSD(p.ccCommission)}; case 'campaignStart': return {fmtIsoDate(p.campaignStart)}; case 'campaignEnd': return {fmtIsoDate(p.campaignEnd)}; case 'campaignDate': { const dateRange = `${fmtIsoDate(p.campaignStart)} → ${fmtIsoDate(p.campaignEnd)}`; if (p.campaignId) { const fullId = p.campaignId.startsWith('amzn1.campaign.') ? p.campaignId : `amzn1.campaign.${p.campaignId}`; const creatorId = localStorage.getItem('aip_creator_id'); const params = [ creatorId ? `creatorId=${creatorId}` : null, `adId=${fullId}`, `campaignId=${fullId}`, 'recc=0', 'early-acc=0', 'type=spcc', 'status=opportunity', ].filter(Boolean).join('&'); const url = `https://affiliate-program.amazon.com/p/connect/request?${params}`; return e.target.style.textDecoration='underline'} onMouseLeave={e => e.target.style.textDecoration='none'}>{dateRange}; } return {dateRange}; } case 'budget': return {fmtUSD(p.budget)}; case 'remainingBudget': return {fmtUSD(p.remainingBudget)}; case 'totalSlots': return {p.totalSlots ?? '—'}; case 'availableSlots': return 0 ? 'var(--success)' : 'var(--text-3)' }}>{p.availableSlots ?? '—'}; case 'slotsTrend': return ; case 'listingAge': return {p.listingAge > 0 ? `${p.listingAge.toLocaleString()}d` : '—'}; case 'trend': return ; default: return null; } } // Plain-text version of renderCellValue — used for clipboard copy function getPlainValue(key, p, fmtUSD, fmtInt, fmtBSR) { switch (key) { case 'product': return p.name || ''; case 'asin': return p.asin || ''; case 'brand': return p.brand || ''; case 'category': return p.category || ''; case 'source': return p.source || ''; case 'addedDate': return p.addedDate || ''; case 'price': return p.price != null ? fmtUSD(p.price) : ''; case 'revenue30d': return p.revenue30d != null ? fmtUSD(p.revenue30d) : ''; case 'monthlySales': return fmtInt(p.monthlySales); case 'bsr': return fmtBSR(p.bsr); case 'reviews': return fmtInt(p.reviews); case 'rating': return p.rating != null ? String(p.rating) : ''; case 'variations': return p.variations != null ? String(p.variations) : ''; case 'videos': return p.videos != null ? String(p.videos) : ''; case 'hasMainVideo': return p.hasMainVideo ? 'Yes' : 'No'; case 'cc': return p.cc != null ? `${p.cc}%` : ''; case 'onSite': return p.onSite != null ? `${p.onSite}%` : ''; case 'onSiteCommission': return p.onSiteCommission != null ? fmtUSD(p.onSiteCommission) : ''; case 'ccCommission': return p.ccCommission != null ? fmtUSD(p.ccCommission) : ''; case 'campaignStart': return fmtIsoDate(p.campaignStart); case 'campaignEnd': return fmtIsoDate(p.campaignEnd); case 'campaignDate': return `${fmtIsoDate(p.campaignStart)} - ${fmtIsoDate(p.campaignEnd)}`; case 'budget': return p.budget != null ? fmtUSD(p.budget) : ''; case 'remainingBudget': return p.remainingBudget != null ? fmtUSD(p.remainingBudget) : ''; case 'totalSlots': return p.totalSlots != null ? String(p.totalSlots) : ''; case 'availableSlots': return p.availableSlots != null ? String(p.availableSlots) : ''; case 'slotsTrend': return p.totalSlots > 0 ? `${Math.round(((p.availableSlots ?? 0) / p.totalSlots) * 100)}%` : ''; case 'listingAge': return p.listingAge > 0 ? `${p.listingAge}d` : ''; case 'trend': return p.budget > 0 ? `${Math.round((p.remainingBudget / p.budget) * 100)}%` : ''; default: return ''; } } /* ============================================================ Drag-to-reorder list. Uses HTML5 DnD on row containers. onReorder(fromIdx, toIdx) ============================================================ */ function ReorderableList({ items, onReorder, renderItem, keyField = 'key' }) { const [dragIdx, setDragIdx] = useState(null); const [overIdx, setOverIdx] = useState(null); return (
{items.map((it, i) => (
setDragIdx(i)} onDragOver={(e) => { e.preventDefault(); setOverIdx(i); }} onDragEnd={() => { setDragIdx(null); setOverIdx(null); }} onDrop={(e) => { e.preventDefault(); if (dragIdx !== null && dragIdx !== i) onReorder(dragIdx, i); setDragIdx(null); setOverIdx(null); }} style={{ opacity: dragIdx === i ? 0.4 : 1, borderTop: overIdx === i && dragIdx !== null && dragIdx > i ? '2px solid var(--accent)' : '2px solid transparent', borderBottom: overIdx === i && dragIdx !== null && dragIdx < i ? '2px solid var(--accent)' : '2px solid transparent', transition: 'opacity 0.12s', }} > {renderItem(it, i)}
))}
); } /* ============================================================ Manage Columns Drawer — shared between Search & Leads. Props: order: [colKey...] -> current visible order setOrder(next) hidden: Set -> keys hidden setHidden(next) customCols: [{key,label}] -> only Leads passes these setCustomCols -> if omitted, custom column UI is not shown onClose ============================================================ */ function ManageColumnsDrawer({ order, setOrder, hidden, setHidden, customCols, setCustomCols, onClose, defaultOrder, }) { const allowCustom = !!setCustomCols; // resolve labels via master + custom const labelFor = (key) => { const std = COLUMN_BY_KEY[key]; if (std) return std.label; return customCols?.find(c => c.key === key)?.label || 'Untitled'; }; const isCustom = (key) => key.startsWith('cust_'); const isSticky = (key) => COLUMN_BY_KEY[key]?.sticky; const reorder = (from, to) => { setOrder(prev => { const next = [...prev]; const [m] = next.splice(from, 1); next.splice(to, 0, m); return next; }); }; const toggleHidden = (key) => { setHidden(prev => { const n = new Set(prev); if (n.has(key)) n.delete(key); else n.add(key); return n; }); }; const addCustom = () => { const id = 'cust_' + Date.now(); setCustomCols(prev => [...prev, { key: id, label: 'New column' }]); setOrder(prev => [...prev, id]); }; const renameCustom = (key, label) => setCustomCols(prev => prev.map(c => c.key === key ? { ...c, label } : c)); const deleteCustom = (key) => { setCustomCols(prev => prev.filter(c => c.key !== key)); setOrder(prev => prev.filter(k => k !== key)); setHidden(prev => { const n = new Set(prev); n.delete(key); return n; }); }; const reset = () => { setOrder(defaultOrder); setHidden(new Set()); }; // available standard columns NOT yet in order const inOrder = new Set(order); const availableStd = MASTER_COLUMNS.filter(c => !inOrder.has(c.key)); const addStandard = (key) => { setOrder(prev => [...prev, key]); setHidden(prev => { const n = new Set(prev); n.delete(key); return n; }); }; const items = order.map(k => ({ key: k, label: labelFor(k), custom: isCustom(k), sticky: isSticky(k) })); return ( <>
Manage columns
Drag to reorder · toggle visibility{allowCustom ? ' · add note columns' : ''}
Active columns ({items.length})
(
{it.custom ? ( renameCustom(it.key, e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }} /> ) : ( {it.label} )} {it.custom && note} {it.sticky && required} !it.sticky && toggleHidden(it.key)} /> {it.custom && ( )}
)} /> {availableStd.length > 0 && ( <>
Add column
{availableStd.map(c => ( ))}
)} {allowCustom && ( <>
Custom note columns
Custom columns are free‑form notes — perfect for tracking video status, supplier contacts, or test dates.
)}
); } window.MASTER_COLUMNS = MASTER_COLUMNS; window.COLUMN_BY_KEY = COLUMN_BY_KEY; window.renderCellValue = renderCellValue; window.ManageColumnsDrawer = ManageColumnsDrawer; window.ReorderableList = ReorderableList;