// Core components, shared styles, and icons for the admin dashboard. // Brand-matched palette: #0a0a0a background, #ff5a1f accent, Archivo display, // Inter UI, JetBrains Mono for labels / numbers / timestamps. const DATA = window.PSData; // Density scale — app-wide tweak. Compact is the default shown in the design. const DENSITY = { compact: { rowH: 36, cardPad: 18, sectPad: 20, fs: 13, kpiNum: 34, gap: 12 }, comfortable: { rowH: 44, cardPad: 24, sectPad: 28, fs: 14, kpiNum: 42, gap: 18 }, spacious: { rowH: 54, cardPad: 32, sectPad: 36, fs: 15, kpiNum: 54, gap: 24 }, }; // ── Icons ────────────────────────────────────────────────────────────── const Icon = { dash: (p) => , inbox: (p) => , users: (p) => , mail: (p) => , press: (p) => , phone: (p) => , finance: (p) => , search: (p) => , up: (p) => , down: (p) => , plus: (p) => , }; // ── Formatting helpers ───────────────────────────────────────────────── function fmtMoney(n) { return '$' + n.toLocaleString('en-US'); } function fmtNum(n) { return n.toLocaleString('en-US'); } function relTime(iso) { const d = Date.now() - new Date(iso).getTime(); const mins = Math.floor(d / 60000); if (mins < 1) return 'just now'; if (mins < 60) return `${mins}m`; const hrs = Math.floor(mins / 60); if (hrs < 24) return `${hrs}h`; const days = Math.floor(hrs / 24); if (days < 30) return `${days}d`; return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); } // ── Shared styles ────────────────────────────────────────────────────── const mono = { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'rgba(245,243,239,0.75)', fontWeight: 500 }; const btnPrimary = { background: '#ff5a1f', color: '#0a0a0a', border: 'none', padding: '8px 14px', borderRadius: 7, fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, cursor: 'pointer', letterSpacing: '-0.005em', display: 'inline-flex', alignItems: 'center', gap: 6, }; const btnSecondary = { background: 'transparent', color: 'rgba(245,243,239,0.8)', border: '1px solid rgba(255,255,255,0.12)', padding: '7px 14px', borderRadius: 7, fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600, cursor: 'pointer', }; // ── Status pill ──────────────────────────────────────────────────────── function Status({ kind }) { const map = { 'new': { bg: '#ff5a1f22', fg: '#ff5a1f', label: 'New' }, 'contacted': { bg: '#ffffff10', fg: '#bfbcb3', label: 'Contacted' }, 'qualified': { bg: '#ffb83322', fg: '#ffb833', label: 'Qualified' }, 'customer': { bg: '#34c75922', fg: '#34c759', label: 'Customer' }, 'active': { bg: '#34c75922', fg: '#34c759', label: 'Active' }, 'paused': { bg: '#ffffff10', fg: '#bfbcb3', label: 'Paused' }, 'draft': { bg: '#ffffff10', fg: '#bfbcb3', label: 'Draft' }, 'scheduled': { bg: '#ffb83322', fg: '#ffb833', label: 'Scheduled' }, 'in-production': { bg: '#ff5a1f22', fg: '#ff5a1f', label: 'In production' }, 'mailed': { bg: '#34c75922', fg: '#34c759', label: 'Mailed' }, 'completed': { bg: '#ffffff10', fg: '#bfbcb3', label: 'Completed' }, }; const s = map[kind] || map['draft']; return ( {s.label} ); } // ── Sparkline (mini chart on KPI cards) ──────────────────────────────── function Spark({ data, w = 120, h = 32, color = '#ff5a1f' }) { const max = Math.max(...data, 1); const step = w / (data.length - 1); const pts = data.map((v, i) => `${i * step},${h - (v / max) * h}`).join(' '); const area = `0,${h} ${pts} ${w},${h}`; return ( ); } // ── KPI card ─────────────────────────────────────────────────────────── function Kpi({ label, value, unit, delta, spark, density }) { const D = DENSITY[density]; const positive = delta !== undefined && delta >= 0; return (
{label}
{value}
{unit &&
{unit}
}
{delta !== undefined && (
{positive ? : } {Math.abs(delta)}% vs prev
)} {spark && }
); } // ── Card primitive (used to frame every section) ─────────────────────── function Card({ title, subtitle, right, children, pad, style }) { return (
{(title || right) && (
{title &&
{title}
} {subtitle &&
{subtitle}
}
{right}
)} {children}
); } // ── Reusable table ───────────────────────────────────────────────────── function Table({ rows, cols, density, onRowClick }) { const D = DENSITY[density]; return (
c.w).join(' '), padding: `10px ${D.cardPad}px`, borderBottom: '1px solid rgba(255,255,255,0.06)', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'rgba(245,243,239,0.5)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700, gap: 16, }}> {cols.map((c, i) => (
{c.label}
))}
{rows.map((row, i) => (
onRowClick && onRowClick(row)} style={{ display: 'grid', gridTemplateColumns: cols.map(c => c.w).join(' '), padding: `0 ${D.cardPad}px`, height: D.rowH, alignItems: 'center', borderBottom: i < rows.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none', fontSize: D.fs, color: 'rgba(245,243,239,0.8)', cursor: onRowClick ? 'pointer' : 'default', gap: 16, transition: 'background .1s', }} onMouseEnter={e => { if (onRowClick) e.currentTarget.style.background = 'rgba(255,255,255,0.02)'; }} onMouseLeave={e => { if (onRowClick) e.currentTarget.style.background = 'transparent'; }} > {cols.map((c, j) => (
{c.render(row)}
))}
))}
); } // ── Bigger chart (used on Overview) ──────────────────────────────────── function BigChart({ data }) { const w = 720, h = 200; const max = Math.max(...data, 1); const barW = (w - 20) / data.length - 4; return ( {[0.25, 0.5, 0.75, 1].map((r, i) => ( ))} {data.map((v, i) => { const bh = (v / max) * (h - 20); return ( = data.length - 7 ? 1 : 0.35} /> ); })} ); } // ── Sidebar ──────────────────────────────────────────────────────────── function Sidebar({ page, setPage, role, setRole }) { const items = [ { id: 'overview', label: 'Overview', icon: Icon.dash, roles: ['all','kyle','chad','aden','max'] }, { id: 'signups', label: 'Signups', icon: Icon.inbox, roles: ['all','kyle','aden'], badge: 18 }, { id: 'customers', label: 'Customers', icon: Icon.users, roles: ['all','kyle','aden','max'] }, { id: 'campaigns', label: 'Campaigns', icon: Icon.mail, roles: ['all','kyle','aden'] }, { id: 'production', label: 'Production', icon: Icon.press, roles: ['all','chad','kyle'], badge: 6 }, { id: 'attribution', label: 'Attribution', icon: Icon.phone, roles: ['all','kyle','aden'] }, { id: 'finance', label: 'Finance', icon: Icon.finance, roles: ['all','max','kyle'] }, ]; const roles = [ { id: 'all', label: 'All' }, { id: 'kyle', label: 'Kyle' }, { id: 'chad', label: 'Chad' }, { id: 'aden', label: 'Aden' }, { id: 'max', label: 'Max' }, ]; return ( ); } // ── Top bar ──────────────────────────────────────────────────────────── function Topbar({ title, subtitle, right, density }) { const D = DENSITY[density]; return (

{title}

{subtitle &&
{subtitle}
}
Search signups, customers, campaigns… ⌘K
{right}
); } Object.assign(window, { DATA, DENSITY, Icon, Status, Spark, Kpi, Card, Table, BigChart, Sidebar, Topbar, fmtMoney, fmtNum, relTime, mono, btnPrimary, btnSecondary, });