// Shared primitives for Meridian Sales CRM. Exposed on window for cross-file use. /* ---------- ICONS (24px stroke) ---------- */ const Icon = ({ name, size = 18, stroke = "currentColor", strokeWidth = 1.6 }) => { const paths = { home: <>, leads: <>, pipeline: <>, tasks: <>, building: <>, payments: <>, chart: <>, team: <>, settings: <>, search: <>, plus: <>, bell: <>, chevronDown: <>, chevronRight: <>, chevronLeft: <>, sparkles: <>, check: <>, x: <>, phone: <>, mail: <>, note: <>, upload: <>, download: <>, calendar: <>, user: <>, key: <>, bed: <>, ruler: <>, eye: <>, send: <>, moon: <>, sun: <>, pin: <>, handshake: <>, doc: <>, grid: <>, list: <>, filter: <>, arrowRight: <>, star: <>, clock: <>, euro: <>, device: <>, }; return ( ); }; /* ---------- STATUS PILL ---------- */ const PILL_TONES = { neutral: { bg: "var(--pill-neutral-bg)", fg: "var(--pill-neutral-fg)" }, // lead pipeline New: { bg: "rgba(99,102,241,0.14)", fg: "#4f46e5" }, Qualified: { bg: "rgba(14,165,233,0.15)", fg: "#0c81b8" }, Viewing: { bg: "rgba(245,158,11,0.16)", fg: "#b46a08" }, Offer: { bg: "rgba(139,92,246,0.16)", fg: "#7c3aed" }, Reservation: { bg: "rgba(20,184,166,0.16)", fg: "#0d9488" }, Closed: { bg: "rgba(34,160,94,0.16)", fg: "#1f8a52" }, Lost: { bg: "rgba(120,113,108,0.16)", fg: "#78716c" }, // unit Available: { bg: "rgba(34,160,94,0.15)", fg: "#1f8a52" }, Reserved: { bg: "rgba(245,158,11,0.16)", fg: "#b46a08" }, Sold: { bg: "rgba(120,113,108,0.16)", fg: "#6e6a62" }, // payments Paid: { bg: "rgba(34,160,94,0.15)", fg: "#1f8a52" }, Pending: { bg: "rgba(245,158,11,0.16)", fg: "#b46a08" }, Overdue: { bg: "rgba(217,84,74,0.15)", fg: "#cf4436" }, Refunded: { bg: "rgba(120,113,108,0.16)", fg: "#78716c" }, }; const Pill = ({ tone = "neutral", children, dot = false, size = "md" }) => { const t = PILL_TONES[tone] || PILL_TONES.neutral; const padding = size === "sm" ? "2px 9px" : "3px 11px"; return ( {dot && } {children} ); }; const STAGE_COLOR = { New: "#6366f1", Qualified: "#0ea5e9", Viewing: "#f59e0b", Offer: "#8b5cf6", Reservation: "#14b8a6", Closed: "#1f8a52", Lost: "#78716c" }; /* ---------- AVATAR ---------- */ const Avatar = ({ initials, size = 32, color = "var(--brand)", img }) => (
{initials}
); /* ---------- MONEY ---------- */ const CCY = { EUR: { sym: "€", code: "EUR" }, USD: { sym: "$", code: "USD" }, GBP: { sym: "£", code: "GBP" } }; let ACTIVE_CCY = "EUR"; const setCurrency = (c) => { ACTIVE_CCY = c; }; const money = (n, ccy) => { const c = CCY[ccy || ACTIVE_CCY] || CCY.EUR; return c.sym + Math.round(n).toLocaleString("en-US"); }; const moneyK = (n, ccy) => { const c = CCY[ccy || ACTIVE_CCY] || CCY.EUR; if (n >= 1000000) return c.sym + (n / 1000000).toFixed(2).replace(/\.00$/, "") + "M"; if (n >= 1000) return c.sym + Math.round(n / 1000) + "k"; return c.sym + n; }; /* ---------- CHARTS ---------- */ const Sparkline = ({ data, w = 80, h = 24, color = "currentColor", fill = false }) => { const max = Math.max(...data), min = Math.min(...data), range = max - min || 1, step = w / (data.length - 1); const pts = data.map((v, i) => [i * step, h - ((v - min) / range) * (h - 4) - 2]); const d = pts.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(" "); return ( {fill && } ); }; const FunnelChart = ({ stages, color = "var(--brand)" }) => { const max = Math.max(...stages.map((s) => s.value)); return (
{stages.map((s, i) => { const pct = (s.value / max) * 100; return (
{s.label}
{s.value}
); })}
); }; const BarMini = ({ data, w = 120, h = 36, color = "var(--brand)", labels }) => { const max = Math.max(...data), bw = w / data.length - 4; return ( {data.map((v, i) => { const bh = Math.max(2, (v / max) * (h - 4)); return ; })} ); }; /* ---------- DATA TABLE ---------- */ function RCDataTable({ data, columns, views = [], searchKeys = [], onRowClick, bulkActions = [], empty }) { const [view, setView] = React.useState(views[0]?.id || null); const [q, setQ] = React.useState(""); const [sort, setSort] = React.useState(null); const [sel, setSel] = React.useState(new Set()); const activeView = views.find((v) => v.id === view); let rows = data.filter((r) => activeView?.predicate ? activeView.predicate(r) : true); if (q.trim()) { const t = q.toLowerCase(); rows = rows.filter((r) => searchKeys.some((k) => String(r[k] || "").toLowerCase().includes(t))); } if (sort) { rows = [...rows].sort((a, b) => { const av = a[sort.key], bv = b[sort.key]; const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv)); return sort.dir === "asc" ? cmp : -cmp; }); } const toggleSort = (key) => setSort((s) => s && s.key === key ? (s.dir === "asc" ? { key, dir: "desc" } : null) : { key, dir: "asc" }); const allSel = rows.length > 0 && rows.every((r) => sel.has(r.id)); const toggleAll = () => setSel(allSel ? new Set() : new Set(rows.map((r) => r.id))); const toggleOne = (id) => setSel((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); return (
{views.length > 0 && (
{views.map((v) => ( ))}
)} {searchKeys.length > 0 && (
setQ(e.target.value)} />
)}
{sel.size > 0 && bulkActions.length > 0 && (
{sel.size} selected
{bulkActions.map((a) => ( ))}
)} {rows.length === 0 ? (
{empty?.title || "Nothing here yet"}
{empty?.body}
{empty?.cta}
) : (
{bulkActions.length > 0 && ( )} {columns.map((c) => ( ))} {rows.map((r) => ( onRowClick && onRowClick(r)}> {bulkActions.length > 0 && ( )} {columns.map((c) => ( ))} ))}
{allSel && } c.sortable && toggleSort(c.key)}> {c.label} {sort?.key === c.key && {sort.dir === "asc" ? "▲" : "▼"}}
{ e.stopPropagation(); toggleOne(r.id); }}> {sel.has(r.id) && } {c.render ? c.render(r) : r[c.key]}
)}
); } /* ---------- TOASTS ---------- */ const ToastCtx = React.createContext(() => {}); const useToast = () => React.useContext(ToastCtx); function ToastProvider({ children }) { const [toasts, setToasts] = React.useState([]); const push = React.useCallback((t) => { const id = Math.random().toString(36).slice(2); setToasts((s) => [...s, { ...t, id }]); setTimeout(() => setToasts((s) => s.filter((x) => x.id !== id)), 2800); }, []); return ( {children}
{toasts.map((t) => (
{t.title}{t.body && · {t.body}}
))}
); } /* ---------- MODAL ---------- */ function Modal({ open, onClose, title, children, foot }) { if (!open) return null; return (
e.stopPropagation()}>
{title}
{children}
{foot &&
{foot}
}
); } Object.assign(window, { Icon, Pill, STAGE_COLOR, Avatar, money, moneyK, setCurrency, Sparkline, FunnelChart, BarMini, RCDataTable, ToastProvider, useToast, Modal });