setOpen(o => !o)}>
{initials}
{open && (
<>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 99 }} />
{user ? (
<>
{user.displayName || '—'}
{user.email}
{user.role}
) : (
💻 Desktop mode (Electron)
)}
)}
);
}
// ── Section header ────────────────────────────────────────────
function PageHeader({ title, subtitle, actions }) {
return (
{title}
{subtitle &&
{subtitle}
}
{actions &&
{actions}
}
);
}
// ── Stat card ────────────────────────────────────────────────
function StatCard({ label, value, delta, hint, accent, icon }) {
const Icon = I[icon] || null;
return (
{label}
{value}
{delta != null && (
= 0 ? "var(--emerald)" : "var(--rose)", fontWeight: 500 }}>
{delta >= 0 ? "▲" : "▼"} {Math.abs(delta)}% vs last month
)}
{hint &&
{hint}
}
{Icon && (
)}
);
}
// ── Status badge ─────────────────────────────────────────────
function StatusBadge({ status }) {
const map = {
active: { c: "success", l: "ดำเนินการ" },
done: { c: "info", l: "เสร็จสิ้น" },
closing: { c: "warn", l: "ใกล้ปิดงาน" },
paid: { c: "success", l: "จ่ายแล้ว" },
issued: { c: "info", l: "ออกแล้ว" },
draft: { c: "", l: "ร่าง" },
pending: { c: "warn", l: "รออนุมัติ" },
approved: { c: "success", l: "อนุมัติแล้ว" },
sent: { c: "info", l: "ส่งแล้ว" },
received: { c: "success", l: "รับของแล้ว" },
rejected: { c: "danger", l: "ปฏิเสธ" },
billed: { c: "gold", l: "วางบิลแล้ว" },
ongoing: { c: "info", l: "กำลังทำ" },
planned: { c: "", l: "วางแผน" },
};
const s = map[status] || { c: "", l: status };
return
{s.l};
}
Object.assign(window, { ToastProvider, useToast, Sidebar, Topbar, PageHeader, StatCard, StatusBadge, ProjectFilter, useSort, SortTH });
// ── Project filter dropdown (used across pages) ──────────────
function ProjectFilter({ value, onChange, lang, includeAll = true }) {
return (
{lang === "th" ? "โครงการ:" : "Project:"}
);
}
// ── Sortable hook ─────────────────────────────────────────────
function useSort(rows, initialKey, initialDir = "asc") {
const [key, setKey] = useState(initialKey);
const [dir, setDir] = useState(initialDir);
const sorted = useMemo(() => {
if (!key) return rows;
const arr = [...rows];
arr.sort((a, b) => {
const av = a[key], bv = b[key];
if (av == null) return 1; if (bv == null) return -1;
if (typeof av === "number" && typeof bv === "number") return dir === "asc" ? av - bv : bv - av;
return dir === "asc" ? String(av).localeCompare(String(bv), "th") : String(bv).localeCompare(String(av), "th");
});
return arr;
}, [rows, key, dir]);
const toggle = (k) => {
if (key === k) setDir(d => d === "asc" ? "desc" : "asc");
else { setKey(k); setDir("asc"); }
};
return { sorted, key, dir, toggle };
}
function SortTH({ label, k, sort, align }) {
const active = sort.key === k;
return (
sort.toggle(k)} style={{ cursor: "pointer", userSelect: "none", textAlign: align || "left" }}>
{label}
▲
|
);
}