// ============================================================================ // IMS — Shared primitives (components shared across all roles) // ============================================================================ const { useState, useMemo, useEffect, useRef, useCallback, createContext, useContext } = React; // ---------------- App context ---------------- const AppCtx = createContext(null); const useApp = () => useContext(AppCtx); // ---------------- Icons (inline SVG) ---------------- const Ic = { search: (p) => , plus: (p) => , x: (p) => , check: (p) => , arrowRight: (p) => , arrowLeft: (p) => , ext: (p) => , upload: (p) => , mic: (p) => , info: (p) => , warn: (p) => , filter: (p) => , caret: (p) => , dots: (p) => , bell: (p) => , linear: (p) => , copy: (p) => , gear: (p) => , }; // ---------------- Helper components ---------------- function Chip({ tone = "neutral", square, mono, outline, xs, children }) { const cls = ["chip", tone, square && "square", mono && "mono", outline && "outline", xs && "xs"].filter(Boolean).join(" "); return {children}; } function InfCell({ name, handle, avatarTone }) { const initials = name.split(" ").map(n => n[0]).slice(0, 2).join(""); return (
{initials}
{name}
{handle}
); } function StatusChip({ status }) { const map = { "Not Contacted": "neutral", "Contacted": "info", "Accepted": "ok", "Interested": "accent-soft", "Rejected": "bad", "Paid": "ok", "Unpaid": "warn", "Pending": "neutral", "In Progress": "info", "Complete": "ok", "Locked": "neutral", "Open": "warn", "Awaiting Admin": "warn", "Resolved": "ok", "Provided": "ok", "Not Interested": "bad", "Not Responding": "neutral", "Approved": "ok", "Denied": "bad", "Skipped": "neutral", "Dropped": "bad", }; return {status}; } function BundleIdChip({ id }) { const isLead = id?.startsWith("LB"); return ( {id} ); } function NotesCell({ note, count = 3 }) { const { role } = useApp(); if (role !== "admin") return —; if (!note) return No notes; return ( e.stopPropagation()}>
{note}
Latest · {count} total
{note}
); } // ---------------- Modal ---------------- function Modal({ open, onClose, title, sub, size, children, foot }) { useEffect(() => { if (!open) return; const onKey = (e) => e.key === "Escape" && onClose?.(); document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; const sizeCls = size === "wide" ? "wide" : size === "xwide" ? "xwide" : ""; return (
e.stopPropagation()}>
{sub &&
{sub}
}
{title}
{children}
{foot &&
{foot}
}
); } // ---------------- Toasts ---------------- function Toast({ items }) { return (
{items.map((t) => (
{t.tick !== false && } {t.msg}
))}
); } // ---------------- Column filter (dropdown) ---------------- function useColumnFilter(rows, columns) { // columns: [{ key, label, accessor }] const [filters, setFilters] = useState({}); // { key: value } const [openFor, setOpenFor] = useState(null); const filtered = useMemo(() => { if (Object.keys(filters).length === 0) return rows; return rows.filter(r => Object.entries(filters).every(([k, v]) => { const col = columns.find(c => c.key === k); const got = col.accessor(r); return got === v; })); }, [rows, filters, columns]); // Cache distinct values per column — only recomputed when rows change const distinctsCache = useMemo(() => { const cache = {}; columns.forEach(col => { const s = new Set(rows.map(col.accessor).filter(Boolean)); cache[col.key] = [...s].sort(); }); return cache; }, [rows, columns]); const distinctFor = (key) => distinctsCache[key] || []; const set = (k, v) => setFilters({ ...filters, [k]: v }); const clear = (k) => { const next = { ...filters }; delete next[k]; setFilters(next); }; return { filtered, filters, set, clear, openFor, setOpenFor, distinctFor }; } function FilterHeader({ col, filters, openFor, setOpenFor, distincts, onPick, onClear }) { const active = filters[col.key] != null; const isOpen = openFor === col.key; const thRef = useRef(null); const dropRef = useRef(null); const [search, setSearch] = useState(""); const [alignRight, setAlignRight] = useState(false); // Close on outside click useEffect(() => { if (!isOpen) return; const handler = (e) => { if (thRef.current && !thRef.current.contains(e.target)) setOpenFor(null); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [isOpen, setOpenFor]); // Flip to right-align if dropdown would overflow viewport useEffect(() => { if (isOpen && dropRef.current) { const rect = dropRef.current.getBoundingClientRect(); setAlignRight(rect.right > window.innerWidth - 12); } if (!isOpen) { setSearch(""); setAlignRight(false); } }, [isOpen]); const visibleOptions = useMemo(() => { const q = search.trim().toLowerCase(); return q ? distincts.filter(v => v.toLowerCase().includes(q)) : distincts; }, [distincts, search]); return ( { e.stopPropagation(); setOpenFor(isOpen ? null : col.key); }}> {col.label} {isOpen && (
e.stopPropagation()} style={{ position: "absolute", top: "calc(100% + 4px)", [alignRight ? "right" : "left"]: 0, zIndex: 40, background: "var(--bg)", border: "1px solid var(--line-2)", boxShadow: "var(--shadow-md)", borderRadius: 4, minWidth: 210, width: "max-content", maxWidth: 280, }}> {/* Search input */}
setSearch(e.target.value)} onClick={e => e.stopPropagation()} style={{ border: "none", outline: "none", background: "transparent", fontSize: 12.5, fontFamily: "inherit", color: "var(--ink)", width: "100%", minWidth: 0, }} /> {search && ( )}
{/* Options list — scrollable */}
{visibleOptions.length === 0 ? (
No matches for "{search}"
) : visibleOptions.map(v => ( ))}
{/* Clear filter */} {active && ( <>
)}
)} ); } function ActiveFilterChips({ filters, columns, onClear }) { const entries = Object.entries(filters); if (!entries.length) return null; return (
Filters {entries.map(([k, v]) => { const col = columns.find(c => c.key === k); return ( {col?.label}: {v} ); })}
); } // ============================================================================ // Settings // ============================================================================ const SETTINGS_KEY = "ims:settings:v1"; const DEFAULT_SETTINGS = { bundleSize: 2, snapshotDay: "Friday", snapshotTime: "14:00", minPaymentThreshold: 50 }; function loadSettings() { try { const r = localStorage.getItem(SETTINGS_KEY); return r ? JSON.parse(r) : null; } catch { return null; } } function saveSettings(s) { localStorage.setItem(SETTINGS_KEY, JSON.stringify(s)); } function useSettings() { const [settings, setS] = useState(() => ({ ...DEFAULT_SETTINGS, ...(loadSettings() || {}) })); const update = (u) => setS(s => { const n = { ...s, ...u }; saveSettings(n); return n; }); return [settings, update]; } window.useSettings = useSettings; function SettingsPage() { const { notify } = useApp(); const [settings, updateSettings] = useSettings(); const [local, setLocal] = useState({ ...settings }); const dirty = JSON.stringify(local) !== JSON.stringify(settings); const save = () => { updateSettings(local); notify("Settings saved.", "success"); }; const SectionLabel = ({ children }) => (
{children}
); const Field = ({ label, hint, children }) => (
{hint &&
{hint}
} {children}
); return (

Settings

System-wide configuration — Admin only.
Bundle Configuration
setLocal(s => ({ ...s, bundleSize: Math.max(1, Math.min(100, +e.target.value || 1)) }))} /> influencers per bundle
Payment Snapshot setLocal(s => ({ ...s, snapshotTime: e.target.value }))} />
setLocal(s => ({ ...s, minPaymentThreshold: Math.max(0, +e.target.value || 0) }))} /> USD minimum
{dirty && }
); } // ---------------- Exports ---------------- Object.assign(window, { useState, useMemo, useEffect, useRef, useCallback, AppCtx, useApp, Ic, Chip, InfCell, StatusChip, BundleIdChip, NotesCell, Modal, Toast, useColumnFilter, FilterHeader, ActiveFilterChips, SettingsPage, useSettings, });