/* Tachiara — shared UI primitives. * All Lucide icons inlined as React SVGs (no external lucide-react dep). * Style with className="icon" / "icon-sm" / "icon-lg" via parent. */ const Icon = ({ d, paths, children, ...rest }) => ( {children} ); const I = { home: () => , wallet: () => , users: () => , user: () => , chart: () => , plus: () => , arrowRight: () => , arrowLeft: () => , check: () => , x: () => , copy: () => , bell: () => , trash: () => , edit: () => , settings: () => , receipt: () => , share: () => , link: () => , doorOpen: () => , qr: () => , logout: () => , calendar: () => , search: () => , more: () => , bank: () => , arrowDownRight: () => , arrowUpRight: () => , handshake: () => , filePlus: () => , inbox: () => , }; // ── Avatar ──────────────────────────────────────────────────────────── function Avatar({ user, size = "md" }) { if (!user) return null; const cls = "avatar" + (size === "sm" ? " avatar-sm" : size === "lg" ? " avatar-lg" : size === "xl" ? " avatar-xl" : ""); return (
{window.QC.initials(user.name)}
); } function AvatarStack({ users, max = 4 }) { const shown = users.slice(0, max); const extra = users.length - shown.length; return (
{shown.map(u => )} {extra > 0 && (
+{extra}
)}
); } // ── Button ──────────────────────────────────────────────────────────── function Button({ variant = "primary", size, icon, children, ...rest }) { const cls = "btn btn-" + variant + (size === "sm" ? " btn-sm" : size === "lg" ? " btn-lg" : ""); return ( ); } // ── Modal ───────────────────────────────────────────────────────────── function Modal({ open, onClose, title, children, footer, size }) { React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()}>
{title}
{children}
{footer &&
{footer}
}
); } // ── Toast (host pinned at root) ─────────────────────────────────────── const ToastContext = React.createContext({ toast: () => {} }); function ToastHost({ children }) { const [items, setItems] = React.useState([]); const toast = React.useCallback((msg) => { const id = Math.random().toString(36).slice(2); setItems(prev => [...prev, { id, msg }]); setTimeout(() => setItems(prev => prev.filter(i => i.id !== id)), 2600); }, []); return ( {children}
{items.map(i =>
{i.msg}
)}
); } const useToast = () => React.useContext(ToastContext).toast; // ── Number input that handles VND nicely ────────────────────────────── function MoneyInput({ value, onChange, placeholder = "0", ...rest }) { const display = value ? Number(value).toLocaleString("vi-VN") : ""; return (
{ const raw = e.target.value.replace(/[^0-9]/g, ""); onChange(raw ? Number(raw) : 0); }} {...rest} />
₫
); } // ── Mini bar/donut charts ───────────────────────────────────────────── function Donut({ segments, size = 160, thickness = 18 }) { const total = segments.reduce((s, x) => s + x.value, 0) || 1; const radius = (size - thickness) / 2; const circ = 2 * Math.PI * radius; let offset = 0; return ( {segments.map((seg, i) => { const len = (seg.value / total) * circ; const el = ( ); offset += len; return el; })} ); } function BarList({ items, max }) { const m = max || Math.max(...items.map(i => i.value), 1); return (
{items.map((it, i) => (
{it.label}
{window.QC.formatVND(it.value)}
))}
); } // ── Tabs ────────────────────────────────────────────────────────────── function Tabs({ tabs, value, onChange }) { return (
{tabs.map(t => ( ))}
); } // ── Field ───────────────────────────────────────────────────────────── function Field({ label, hint, error, children }) { return (
{label && } {children} {error ?
{error}
: hint ?
{hint}
: null}
); } // ── Empty state ─────────────────────────────────────────────────────── function Empty({ icon, title, children, action }) { return (
{icon ?
{icon}
: null} {title &&
{title}
} {children &&
{children}
} {action &&
{action}
}
); } // ── Copyable invite code ────────────────────────────────────────────── function CopyCode({ code }) { const toast = useToast(); const copy = () => { navigator.clipboard?.writeText(code); toast("Đã copy mã mời"); }; return ( ); } Object.assign(window, { Icon, I, Avatar, AvatarStack, Button, Modal, ToastHost, ToastContext, useToast, MoneyInput, Donut, BarList, Tabs, Field, Empty, CopyCode, });