// Shared UI primitives — neumorphic look. All Thai labels.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ===== Modal =====
function Modal({ open, onClose, title, children, footer, size }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => e.key === "Escape" && onClose && onClose();
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}>
{children}
{footer &&
{footer}
}
);
}
// ===== Toast =====
const ToastCtx = React.createContext({ push: () => {} });
function useToast() { return React.useContext(ToastCtx); }
function ToastProvider({ children }) {
const [list, setList] = useState([]);
const push = useCallback((text, kind = "ok") => {
const id = Math.random().toString(36).slice(2);
setList(l => [...l, { id, text, kind }]);
setTimeout(() => setList(l => l.filter(t => t.id !== id)), 3000);
}, []);
return (
{children}
{list.map(t => (
{t.text}
))}
{label}
{value}
{sub &&
{sub}
}
{delta && (
{deltaDir === "down" ? "▼" : "▲"} {delta}
)}
);
}
// ===== Section card =====
function Section({ title, sub, right, children, pad = true }) {
return (
{(title || right) && (
{title &&
{title}
}
{sub &&
{sub}
}
{right}
)}
{children}
{items.map(it => (
))}
);
}
// ===== Sparkline (SVG) =====
function Sparkline({ values, height = 40, color, fill = true }) {
const w = 260, h = height;
const max = Math.max(...values, 1);
const step = w / (values.length - 1);
const pts = values.map((v, i) => [i * step, h - (v / max) * (h - 4) - 2]);
const d = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0] + "," + p[1]).join(" ");
const fillD = d + ` L ${w} ${h} L 0 ${h} Z`;
const c = color || "var(--accent)";
return (
);
}
// ===== Donut =====
function Donut({ slices, size = 140 }) {
const total = slices.reduce((a, s) => a + s.value, 0) || 1;
const r = size / 2 - 14;
const c = 2 * Math.PI * r;
let acc = 0;
return (
);
}
// ===== Bar chart row =====
function BarRow({ label, value, max, sub, color }) {
const pct = max ? (value / max) * 100 : 0;
return (
);
}
// ===== Number input with thousands =====
function NumberInput({ value, onChange, placeholder, prefix }) {
return (
{prefix && {prefix}}
onChange(Number(e.target.value))} placeholder={placeholder} />
);
}
// ===== Confirm =====
function useConfirm() {
const [state, setState] = useState(null);
const ask = useCallback((opts) => new Promise(resolve => setState({ ...opts, resolve })), []);
const node = state ? (
{ state.resolve(false); setState(null); }}
title={state.title}
footer={<>
}
>
{state.body}
) : null;
return { ask, node };
}
// ===== Coin animation (shoot from button to target) =====
function shootCoins(fromEl, count = 8) {
const rect = fromEl.getBoundingClientRect();
for (let i = 0; i < count; i++) {
const coin = document.createElement("div");
coin.className = "coin";
coin.textContent = "฿";
coin.style.left = (rect.left + rect.width / 2 - 14) + "px";
coin.style.top = (rect.top + rect.height / 2 - 14) + "px";
document.body.appendChild(coin);
const tx = (Math.random() - 0.5) * 300;
const ty = -200 - Math.random() * 200;
const dur = 700 + Math.random() * 400;
coin.animate([
{ transform: "translate(0,0) scale(1)", opacity: 1 },
{ transform: `translate(${tx}px, ${ty}px) scale(.7) rotate(${(Math.random() - 0.5) * 540}deg)`, opacity: 0 },
], { duration: dur, easing: "cubic-bezier(.25,.9,.5,1)" });
setTimeout(() => coin.remove(), dur);
}
}
// ===== Icons (inline SVG, simple) =====
const Ico = {
dollar: (p) => ,
bag: (p) => ,
users: (p) => ,
shop: (p) => ,
phone: (p) => ,
cart: (p) => ,
trending: (p) => ,
copy: (p) => ,
ticket: (p) => ,
};
// ===== Heat row (calendar-ish) =====
function HeatRow({ data }) {
const max = Math.max(...data, 1);
return (
{data.map((v, i) => (
))}