// ui.jsx — shared UI: icons, primitives, helpers
const Icon = {
// Generic icons used across the app
home: (p) => ,
users: (p) => ,
doc: (p) => ,
template: (p) => ,
inbox: (p) => ,
settings: (p) => ,
plus: (p) => ,
arrow: (p) => ,
arrowL: (p) => ,
check: (p) => ,
x: (p) => ,
sparkle: (p) => ,
send: (p) => ,
copy: (p) => ,
link: (p) => ,
search: (p) => ,
calendar: (p) => ,
clock: (p) => ,
upload: (p) => ,
money: (p) => ,
pen: (p) => ,
more: (p) => ,
mail: (p) => ,
download: (p) => ,
external: (p) => ,
shield: (p) => ,
flag: (p) => ,
bell: (p) => ,
paperclip: (p) => ,
layers: (p) => ,
trash: (p) => ,
briefcase: (p) => ,
lightning: (p) => ,
chevR: (p) => ,
chevD: (p) => ,
signature: (p) => ,
card: (p) => ,
globe: (p) => ,
refresh: (p) => ,
filter: (p) => ,
};
// Tiny logo mark
function LogoMark({ size = 22, color = "var(--primary)" }) {
return (
);
}
function Avatar({ name, size = 28, bg, fg }) {
const initials = (name || "").split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
const palette = [
["#DCE8E1", "#1B4332"],
["#F4E8DB", "#8A5E2C"],
["#DDE6F4", "#2C4D8A"],
["#F4DDD9", "#B23A2E"],
["#E8DEF0", "#5B3F8A"],
["#E6E6E0", "#5B635E"],
];
const idx = (name || "").split("").reduce((a, c) => a + c.charCodeAt(0), 0) % palette.length;
const [pbg, pfg] = palette[idx];
return (
{initials || "•"}
);
}
function Pill({ status, children }) {
const map = {
"lead": { cls: "pill-lead", dot: "#92400E", label: "Lead" },
"new": { cls: "pill-new", dot: "#2C4D8A", label: "Invited" },
"active": { cls: "pill-active", dot: "#1B4332", label: "Active" },
"pending": { cls: "pill-pending", dot: "#8A5E2C", label: "Pending" },
"done": { cls: "pill-done", dot: "#5B635E", label: "Complete" },
"overdue": { cls: "pill-overdue", dot: "#B23A2E", label: "Overdue" },
};
const s = map[status] || map.pending;
return (
{children || s.label}
);
}
function Card({ children, pad = true, style, className = "" }) {
return {pad ?
{children}
: children}
{(title || right) && (
{title &&
{title}
}
{sub &&
{sub}
}
{right}
)}
{children}
{label}
{value}
{sub && {sub}}
);
}
// Format currency given a code
function fmtMoney(amount, code = "USD") {
const sym = { USD: "$", EUR: "€", GBP: "£", PHP: "₱", CAD: "CA$", AUD: "A$" }[code] || "$";
const n = Number(amount || 0);
return sym + n.toLocaleString("en-US", { maximumFractionDigits: 2 });
}
function fmtDate(d) {
try {
return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
} catch { return d; }
}
function fmtDateShort(d) {
try {
return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric" });
} catch { return d; }
}
// ─────────────────────────────────────────────────────────────────────
// Integration pin — numbered marker at each spot that needs a real API.
// Visible only when tweaks.showIntegrations is on. Hover/click → popover
// with endpoint, request/response shape, recommended service.
// ─────────────────────────────────────────────────────────────────────
function IntegrationPin({ n, name, service, endpoint, request, response, note, placement = "right" }) {
const show = window.__showIntegrations;
const [open, setOpen] = React.useState(false);
if (!show) return null;
const pos = {
right: { left: "100%", top: "50%", transform: "translate(8px, -50%)" },
left: { right: "100%", top: "50%", transform: "translate(-8px, -50%)" },
top: { left: "50%", bottom: "100%", transform: "translate(-50%, -8px)" },
bottom: { left: "50%", top: "100%", transform: "translate(-50%, 8px)" },
}[placement];
return (
setOpen(true)} onMouseLeave={() => setOpen(false)}>
{open && (
#{n}
{name}
mocked
Service
{service}
{endpoint && <>
Endpoint
{endpoint}
}
{request && <>
Request
{request}
}
{response && <>
Response
{response}
}
{note &&
{note}
}
)}
);
}
Object.assign(window, { Icon, LogoMark, Avatar, Pill, Card, Section, Button, StatBlock, fmtMoney, fmtDate, fmtDateShort, IntegrationPin });