}
);
}
// ============ TOPBAR ============
function Topbar({ title, subtitle, actions, onMenuClick }) {
return (
);
}
// ============ STAT CARD ============
function StatCard({ label, value, suffix, prefix, icon, color, trend, isCurrency }) {
const animated = useCountUp(value);
const display = isCurrency ? formatBaht(animated) : formatNumber(animated);
return (
{prefix}{display}{suffix}
{trend && (
{trend.value}
{trend.label}
)}
);
}
// ============ CHART: AREA / BARS ============
function RevenueChart({ data, height = 240 }) {
const [hover, setHover] = React.useState(null);
const W = 100; // %
const H = height;
const padY = 30;
const max = Math.max(...data.map(d => Math.max(d.rev, d.exp))) * 1.15;
const barW = 80 / data.length / 2.4;
const pts = (key) => data.map((d, i) => {
const x = ((i + 0.5) / data.length) * W;
const y = padY + (1 - d[key] / max) * (H - padY * 1.5);
return [x, y];
});
const revPts = pts('rev');
const expPts = pts('exp');
const toPath = (ps) => ps.map((p, i) => `${i ? 'L' : 'M'} ${p[0]} ${p[1]}`).join(' ');
const toArea = (ps) => `${toPath(ps)} L ${ps[ps.length-1][0]} ${H-10} L ${ps[0][0]} ${H-10} Z`;
return (
{/* x labels */}
{data.map((d, i) => {d.d})}
{hover !== null && (
ວັນທີ {data[hover].d} ພ.ສ.
ລາຍຮັບ: {formatBaht(data[hover].rev)}
ລາຍຈ່າຍ: {formatBaht(data[hover].exp)}
)}
);
}
// ============ RING CHART ============
function Ring({ percent, size = 140, color = 'url(#ringGrad)' }) {
const r = (size - 18) / 2;
const c = 2 * Math.PI * r;
const [anim, setAnim] = React.useState(0);
React.useEffect(() => {
requestAnimationFrame(() => setAnim(percent));
}, [percent]);
return (
);
}
// ============ DONUT ============
function Donut({ data, size = 160 }) {
const total = data.reduce((s, d) => s + d.value, 0);
const r = (size - 24) / 2;
const c = 2 * Math.PI * r;
let acc = 0;
const [anim, setAnim] = React.useState(false);
React.useEffect(() => { requestAnimationFrame(() => setAnim(true)); }, []);
return (
);
}
// ============ MODAL SHELL ============
function Modal({ title, subtitle, onClose, children, footer }) {
React.useEffect(() => {
const k = (e) => e.key === 'Escape' && onClose();
window.addEventListener('keydown', k);
return () => window.removeEventListener('keydown', k);
}, [onClose]);
return (
e.stopPropagation()}>
{children}
{footer &&
{footer}
}
);
}
window.UI = { Icon, useCountUp, formatBaht, formatNumber, Sidebar, Topbar, StatCard, RevenueChart, Ring, Donut, Modal };