// components.jsx — shared UI primitives for Idea Pipeline
const { useState, useRef, useEffect } = React;
const { USERS, ME, STAGES, PRIORITIES, IDEA_STATUS } = window.SEED;
const userById = (id) => USERS.find((u) => u.id === id);
// ---- tiny line-icon set (standard UI glyphs) ----
function Icon({ name, size = 18, stroke = 1.8, style }) {
const p = {
plus: <>,
search: <>,
grid: <>,
board: <>,
check: ,
user: <>,
users: <>,
bolt: ,
chevron: ,
chevronL: ,
clock: <>,
flag: <>,
dots: <>,
x: <>,
calendar: <>,
spark: ,
arrow: <>,
wallet: <>,
receipt: <>,
pie: <>,
download: <>,
comment: ,
send: <>,
logout: <>,
}[name];
return (
);
}
// ---- avatar ----
function Avatar({ id, size = 28, ring = false }) {
const u = userById(id);
if (!u) return null;
return (
{u.initials}
);
}
function AvatarStack({ ids, size = 26, max = 4 }) {
const shown = ids.slice(0, max);
const extra = ids.length - shown.length;
return (
{shown.map((id, i) => (
))}
{extra > 0 && (
+{extra}
)}
);
}
// ---- pills ----
function StatusPill({ status }) {
const s = IDEA_STATUS[status];
return (
{s.label}
);
}
function PriorityTag({ level }) {
const p = PRIORITIES[level];
return (
{p.label}
);
}
// ---- progress bar ----
function Progress({ value, total, hue = 'var(--primary-h)' }) {
const pct = total ? Math.round((value / total) * 100) : 0;
return (
);
}
Object.assign(window, { Icon, Avatar, AvatarStack, StatusPill, PriorityTag, Progress, userById, fmtMoney });
function fmtMoney(n, opts = {}) {
const dp = opts.dp ?? 0;
const s = (n || 0).toLocaleString('en-US', { minimumFractionDigits: dp, maximumFractionDigits: dp });
return opts.bare ? s : 'Rs\u202f' + s;
}
const _MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function fmtDate(iso) {
if (!iso) return null;
const [y, m, d] = iso.split('-').map(Number);
if (!y || !m || !d) return null;
return `${d} ${_MONTHS[m - 1]} ${y}`;
}
Object.assign(window, { fmtDate });