/* TaxFlow — shared primitives, sidebar, topbar, charts, modal */
/* globals React, ReactDOM */
const { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } = React;
/* --------------------------- ICONS (inline SVG) --------------------------- */
const I = {
grid: (p) => (
),
trend: (p) => (
),
doc: (p) => (
),
bag: (p) => (
),
cart: (p) => (
),
users: (p) => (
),
audit: (p) => (
),
trash: (p) => (
),
plus: (p) => (),
search: (p) => (),
download: (p) => (),
chevDown: (p) => (),
arrowUp: (p) => (),
arrowDown: (p) => (),
edit: (p) => (),
x: (p) => (),
check: (p) => (),
clip: (p) => (),
restore: (p) => (),
bell: (p) => (),
sun: (p) => (),
moon: (p) => (),
filter: (p) => (),
sparkle: (p) => (),
};
window.I = I;
/* --------------------------- TINY UTILS --------------------------- */
function cls(...a){ return a.filter(Boolean).join(" "); }
window.cls = cls;
/* Animated number counter — smooth easing */
function NumberCounter({ value, decimals = 2, duration = 900, prefix = "฿", suffix = "" }) {
const [v, setV] = useState(value);
const fromRef = useRef(value);
useEffect(() => {
const from = fromRef.current;
const to = value;
const start = performance.now();
let raf;
const tick = (t) => {
const k = Math.min(1, (t - start) / duration);
const e = 1 - Math.pow(1 - k, 3); // easeOutCubic
const cur = from + (to - from) * e;
setV(cur);
if (k < 1) raf = requestAnimationFrame(tick);
else fromRef.current = to;
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [value, duration]);
const s = v.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
return (
{prefix && {prefix}}
{s}
{suffix && {suffix}}
);
}
window.NumberCounter = NumberCounter;
/* --------------------------- SIDEBAR --------------------------- */
const NAV = [
{ id: "dashboard", label: "Dashboard", icon: I.grid, section: "ภาพรวม" },
{ id: "pl", label: "กำไร/ขาดทุน", icon: I.trend, section: "ภาพรวม" },
{ id: "vat", label: "VAT Report", icon: I.doc, section: "ภาพรวม" },
{ id: "sales", label: "ขาย", icon: I.bag, section: "รายการ" },
{ id: "purchases", label: "ซื้อ", icon: I.cart, section: "รายการ" },
{ id: "suppliers", label: "ผู้ขาย", icon: I.users, section: "รายการ" },
{ id: "audit", label: "Audit Log", icon: I.audit, section: "กิจกรรม" },
{ id: "trash", label: "ถังขยะ", icon: I.trash, section: "กิจกรรม" },
];
window.NAV = NAV;
function Sidebar({ page, setPage, dark, setDark }) {
// Group nav by section, preserve order
const groups = [];
let curSec = null, curGroup = null;
for (const n of NAV) {
if (n.section !== curSec) { curSec = n.section; curGroup = { section: curSec, items: [] }; groups.push(curGroup); }
curGroup.items.push(n);
}
return (
);
}
window.Sidebar = Sidebar;
/* --------------------------- TOPBAR --------------------------- */
function Topbar({ title, subtitle, right, search, onSearch, searchPlaceholder }) {
return (
);
}
window.Topbar = Topbar;
/* --------------------------- MONTH PICKER --------------------------- */
function MonthPicker({ value, onChange }) {
// value: { y, m } 1-based month
const [open, setOpen] = useState(false);
const ref = useRef();
useEffect(() => {
const fn = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", fn);
return () => document.removeEventListener("mousedown", fn);
}, []);
const label = `${window.THAI_MONTH[value.m - 1]} ${value.y + 543}`;
return (
{open && (
{value.y + 543}
{window.THAI_MONTH_SHORT.map((m, i) => (
))}
)}
);
}
window.MonthPicker = MonthPicker;
/* --------------------------- PERIOD BAR — chips + month picker --------------------------- */
function PeriodBar({ value, onChange, anchor }) {
// anchor = today's "now" month for chip semantics; defaults to seed (May 2026)
const now = anchor || { y: 2026, m: 5 };
const isSame = (a, b) => a && b && a.y === b.y && a.m === b.m;
const lastMo = window.prevMonth(now);
const chip = (lb, m, key) => (
);
return (
{chip("เดือนนี้", now, "this")}
{chip("เดือนก่อน", lastMo, "last")}
);
}
window.PeriodBar = PeriodBar;
/* --------------------------- AREA CHART (draw-on) --------------------------- */
function AreaChart({ data, height = 240, ymax }) {
// data: [{ label, value }]
const W = 800, H = height, pad = { l: 48, r: 16, t: 24, b: 32 };
const max = ymax ?? Math.max(1800, ...data.map(d => d.value)) * 1.05;
const xs = (i) => pad.l + (i * (W - pad.l - pad.r)) / Math.max(1, data.length - 1);
const ys = (v) => pad.t + (H - pad.t - pad.b) * (1 - v / max);
// smooth path via catmull-rom -> bezier
const pts = data.map((d, i) => [xs(i), ys(d.value)]);
const path = pts.reduce((p, [x, y], i) => {
if (i === 0) return `M ${x} ${y}`;
const [px, py] = pts[i - 1];
const cx1 = px + (x - px) / 2, cy1 = py;
const cx2 = px + (x - px) / 2, cy2 = y;
return p + ` C ${cx1} ${cy1} ${cx2} ${cy2} ${x} ${y}`;
}, "");
const area = path + ` L ${xs(data.length - 1)} ${H - pad.b} L ${xs(0)} ${H - pad.b} Z`;
// gridlines (4 horizontal)
const gridY = [0, 0.33, 0.66, 1].map((k) => pad.t + (H - pad.t - pad.b) * k);
// animate path draw
const pathRef = useRef(null);
const [len, setLen] = useState(0);
useLayoutEffect(() => {
if (!pathRef.current) return;
const l = pathRef.current.getTotalLength();
setLen(l);
pathRef.current.style.strokeDasharray = l;
pathRef.current.style.strokeDashoffset = l;
requestAnimationFrame(() => {
pathRef.current.style.transition = "stroke-dashoffset 1100ms cubic-bezier(.2,.7,.2,1)";
pathRef.current.style.strokeDashoffset = 0;
});
}, [data]);
// hover
const [hov, setHov] = useState(-1);
const svgRef = useRef();
const onMove = (e) => {
const r = svgRef.current.getBoundingClientRect();
const x = ((e.clientX - r.left) / r.width) * W;
let best = 0, bd = Infinity;
pts.forEach(([px], i) => { const d = Math.abs(px - x); if (d < bd) { bd = d; best = i; } });
setHov(best);
};
return (
{hov >= 0 && (
{data[hov].label}
{window.formatBaht(data[hov].value)}
)}
);
}
window.AreaChart = AreaChart;
/* --------------------------- SPARKLINE --------------------------- */
function Sparkline({ data, height = 36, width = 120 }) {
const max = Math.max(...data, 1);
const min = Math.min(...data, 0);
const range = max - min || 1;
const pts = data.map((v, i) => [
(i / (data.length - 1)) * width,
height - ((v - min) / range) * (height - 4) - 2,
]);
const d = pts.reduce((p, [x, y], i) => p + (i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`), "");
return (
);
}
window.Sparkline = Sparkline;
/* --------------------------- MODAL --------------------------- */
function Modal({ open, onClose, title, children, footer, width = 560 }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}>
{children}
{footer &&
{footer}
}
);
}
window.Modal = Modal;
/* --------------------------- BADGES & BUTTONS --------------------------- */
function Badge({ children, tone = "neutral" }) {
return {children};
}
window.Badge = Badge;
function Btn({ variant = "default", className, children, ...rest }) {
return ;
}
window.Btn = Btn;
function IconBtn({ title, children, ...rest }) {
return ;
}
window.IconBtn = IconBtn;
/* --------------------------- TOAST --------------------------- */
let toastSetter = null;
function ToastHost() {
const [items, setItems] = useState([]);
useEffect(() => {
toastSetter = (msg, tone = "ok") => {
const id = Math.random().toString(36).slice(2);
setItems((s) => [...s, { id, msg, tone }]);
setTimeout(() => setItems((s) => s.filter((x) => x.id !== id)), 2600);
};
}, []);
return (
{items.map((t) => (
{t.tone === "ok" ? : }
{t.msg}
))}