/* ===== หลังบ้าน (Admin) — login → dashboard → wizard ===== */ /* ---------- Login ---------- */ function AdminLogin({ onLogin, onBack }) { const [u, setU] = React.useState("admin"); const [p, setP] = React.useState(""); const [show, setShow] = React.useState(false); const [loading, setLoading] = React.useState(false); const [err, setErr] = React.useState(""); async function submit(e) { e.preventDefault(); setErr(""); setLoading(true); try { await api.login(u.trim(), p); onLogin(); } catch (e2) { setErr(e2.message || "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง"); } finally { setLoading(false); } } return (
เข้าสู่ระบบผู้ดูแล
กลุ่มโรงเรียนบ้านด่าน 2
setU(e.target.value)} autoFocus />
setP(e.target.value)} placeholder="••••" style={{ paddingRight: 44 }} />
{err &&
{err}
}
); } /* ---------- Dashboard shell ---------- */ function AdminShell({ children, onLogout, active = "events", onNav, onNew }) { const nav = [ { id: "events", label: "กิจกรรม", icon: Icon.grid }, { id: "recipients", label: "รายชื่อทั้งหมด", icon: Icon.users }, { id: "templates", label: "เทมเพลต", icon: Icon.cert }, { id: "reports", label: "รายงาน / Export", icon: Icon.doc }, { id: "settings", label: "ตั้งค่า", icon: Icon.settings }, ]; return (
{/* sidebar */}
{children}
); } /* ---------- Status badge ---------- */ function StatusBadge({ status }) { if (status === "published") return เผยแพร่แล้ว; if (status === "draft") return ฉบับร่าง; return {status}; } /* ---------- Events list ---------- */ function EventsView({ events, onNew, onOpen, onEdit, onDelete }) { return ( <>

กิจกรรม

จัดการกิจกรรมและออกเกียรติบัตร
{/* stat row */}
{[ { label: "กิจกรรมทั้งหมด", val: events.length, icon: Icon.grid, tone: "primary" }, { label: "เผยแพร่แล้ว", val: events.filter(e => e.status === "published").length, icon: Icon.checkCircle, tone: "ok" }, { label: "เกียรติบัตรที่ออก", val: events.reduce((a, e) => a + (e.status === "published" ? e.count : 0), 0).toLocaleString(), icon: Icon.cert, tone: "gold" }, ].map((s, i) => (
{s.val}
{s.label}
))}
{/* table */}
{events.map((e, i) => ( onOpen(e)} onMouseEnter={ev => ev.currentTarget.style.background = "var(--c-surface-2)"} onMouseLeave={ev => ev.currentTarget.style.background = "transparent"}> ))}
กิจกรรม วันที่ รายชื่อ สถานะ จัดการ
{e.title}
{e.group}
 {e.date} {e.count} คน
); } /* ---------- แก้ไขข้อมูลกิจกรรม ---------- */ function EventEditModal({ event, onClose, onSaved }) { const [title, setTitle] = React.useState(event.title || ""); const [date, setDate] = React.useState(event.date || ""); const [group, setGroup] = React.useState(event.group || ""); const [subtitle, setSubtitle] = React.useState(event.subtitle || ""); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(""); async function save() { if (!title.trim()) { setErr("กรุณาระบุชื่อกิจกรรม"); return; } setErr(""); setBusy(true); try { await api.updateEvent(event.id, { title, date, group, subtitle }); onSaved(); } catch (e) { setErr(e.message || "บันทึกไม่สำเร็จ"); setBusy(false); } } return (
แก้ไขกิจกรรม
setTitle(e.target.value)} autoFocus />
setDate(e.target.value)} />
setGroup(e.target.value)} />
setSubtitle(e.target.value)} />
{err &&
{err}
}
); } /* ---------- กล่องยืนยันการลบ (ใช้ซ้ำได้) ---------- */ function ConfirmModal({ title, message, confirmLabel = "ลบ", onClose, onConfirm }) { const [busy, setBusy] = React.useState(false); return (
{title}
{message}
 ); } /* ---------- แก้ไขรายชื่อ ---------- */ function RecipientEditModal({ rec, onClose, onSaved }) { const [name, setName] = React.useState(rec.name || ""); const [school, setSchool] = React.useState(rec.school || ""); const [role, setRole] = React.useState(rec.role || ""); const [no, setNo] = React.useState(rec.no || ""); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(""); async function save() { if (!name.trim()) { setErr("กรุณาระบุชื่อ–นามสกุล"); return; } setErr(""); setBusy(true); try { await api.updateRecipient(rec.id, { name, school, role, no, tone: toneForRole(role) }); onSaved(); } catch (e) { setErr(e.message || "บันทึกไม่สำเร็จ"); setBusy(false); } } return (
แก้ไขรายชื่อ
setName(e.target.value)} autoFocus />
setSchool(e.target.value)} />
setNo(e.target.value)} placeholder="1/2569" />
setRole(e.target.value)} placeholder="เช่น ได้รับรางวัลชนะเลิศ" />
{err &&
{err}
}
); } /* ---------- รายชื่อทั้งหมด ---------- */ function AllRecipientsView({ onOpenEvent }) { const [q, setQ] = React.useState(""); const [rows, setRows] = React.useState([]); const [loading, setLoading] = React.useState(true); const [editRec, setEditRec] = React.useState(null); const [delRec, setDelRec] = React.useState(null); function load(query) { setLoading(true); api.listAllRecipients(query ?? q) .then(d => setRows(d.recipients || [])) .catch(() => setRows([])) .finally(() => setLoading(false)); } React.useEffect(() => { load(""); }, []); return ( <>

รายชื่อทั้งหมด

ผู้รับเกียรติบัตรจากทุกกิจกรรม
{ e.preventDefault(); load(q); }} style={{ position: "relative", width: "min(320px, 45vw)" }}> setQ(e.target.value)} placeholder="ค้นหาชื่อ / โรงเรียน" style={{ paddingLeft: 38, height: 42 }} />
{loading ? (
) : (
พบ {rows.length} รายชื่อ
{rows.map(r => ( ))} {rows.length === 0 && ( )}
เลขที่ ชื่อ–นามสกุล โรงเรียน กิจกรรม สถานะ จัดการ
{r.no} {r.name} {r.school} {r.event.title}
ยังไม่มีรายชื่อ
)}
{editRec && setEditRec(null)} onSaved={() => { setEditRec(null); load(); }} />} {delRec && ( setDelRec(null)} onConfirm={async () => { await api.deleteRecipient(delRec.id); setDelRec(null); load(); }} /> )} ); } /* TemplatesView ย้ายไปไฟล์ TemplatesAdmin.jsx (จัดการคลังเทมเพลตได้เต็มรูปแบบ) */ /* ---------- ตั้งค่า ---------- */ function adminInfoFromToken() { try { const p = api.token.split(".")[0].replace(/-/g, "+").replace(/_/g, "/"); return JSON.parse(atob(p + "=".repeat((4 - p.length % 4) % 4))); } catch (_) { return {}; } } function SettingsView() { const info = adminInfoFromToken(); const [cur, setCur] = React.useState(""); const [nw, setNw] = React.useState(""); const [cf, setCf] = React.useState(""); const [busy, setBusy] = React.useState(false); const [msg, setMsg] = React.useState(null); // {ok, text} async function submit(e) { e.preventDefault(); setMsg(null); if (nw !== cf) { setMsg({ ok: false, text: "รหัสผ่านใหม่ทั้งสองช่องไม่ตรงกัน" }); return; } if (nw.length < 6) { setMsg({ ok: false, text: "รหัสผ่านใหม่ต้องยาวอย่างน้อย 6 ตัวอักษร" }); return; } setBusy(true); try { await api.changePassword(cur, nw); setMsg({ ok: true, text: "เปลี่ยนรหัสผ่านเรียบร้อยแล้ว" }); setCur(""); setNw(""); setCf(""); } catch (e2) { setMsg({ ok: false, text: e2.message || "เปลี่ยนรหัสผ่านไม่สำเร็จ" }); } finally { setBusy(false); } } return ( <>

ตั้งค่า

บัญชีผู้ดูแลและความปลอดภัย
{/* account info */}
บัญชีผู้ดูแล
ชื่อผู้ใช้{info.username || "admin"}
สิทธิ์{info.role || "admin"}
{/* change password */}
เปลี่ยนรหัสผ่าน
setCur(e.target.value)} autoComplete="current-password" />
setNw(e.target.value)} autoComplete="new-password" />
setCf(e.target.value)} autoComplete="new-password" />
{msg &&
{msg.text}
}
); } /* ---------- รายงาน / Export ---------- */ function statusTh(s) { return s === "published" ? "เผยแพร่แล้ว" : s === "draft" ? "ฉบับร่าง" : (s || ""); } function csvCell(v) { return `"${String(v == null ? "" : v).replace(/"/g, '""')}"`; } function escHtml(v) { return String(v == null ? "" : v).replace(/[&<>"]/g, c => ({ "&": "&", "<": "<", ">": ">", '"': """ }[c])); } function ReportsView() { const [events, setEvents] = React.useState([]); const [scope, setScope] = React.useState("all"); // "all" | event id const [rows, setRows] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { api.listEvents(true).then(d => setEvents(d.events || [])).catch(() => {}); }, []); React.useEffect(() => { setLoading(true); const done = (rs) => { setRows(rs); setLoading(false); }; if (scope === "all") { api.listAllRecipients("").then(d => done((d.recipients || []).map(r => ({ no: r.no, name: r.name, school: r.school, role: r.role, eventTitle: r.event.title, eventDate: r.event.date, status: r.event.status, })))).catch(() => done([])); } else { const ev = events.find(e => e.id === scope); api.getEvent(scope, true).then(d => done((d.recipients || []).map(r => ({ no: r.no, name: r.name, school: r.school, role: r.role, eventTitle: ev?.title || "", eventDate: ev?.date || "", status: ev?.status || "", })))).catch(() => done([])); } }, [scope, events]); const scopeLabel = scope === "all" ? "ทุกกิจกรรม" : (events.find(e => e.id === scope)?.title || ""); function exportCsv() { const head = ["เลขที่", "ชื่อ-นามสกุล", "โรงเรียน", "ประเภท", "กิจกรรม", "วันที่", "สถานะ"]; const lines = rows.map(r => [r.no, r.name, r.school, r.role, r.eventTitle, r.eventDate, statusTh(r.status)].map(csvCell).join(",")); const blob = new Blob(["" + head.map(csvCell).join(",") + "\n" + lines.join("\n")], { type: "text/csv;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `รายงานเกียรติบัตร_${scopeLabel}.csv`; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 4000); } function exportPdf() { const w = window.open("", "_blank"); if (!w) { alert("เบราว์เซอร์บล็อกการเปิดหน้าต่างใหม่ — กรุณาอนุญาต popup"); return; } const body = rows.map((r, i) => `${escHtml(r.no)}${escHtml(r.name)}${escHtml(r.school)}${escHtml(r.role)}${escHtml(r.eventTitle)}${escHtml(statusTh(r.status))}`).join(""); w.document.write(` รายงานเกียรติบัตร ${escHtml(scopeLabel)}

รายงานเกียรติบัตร — ${escHtml(scopeLabel)}

กลุ่มโรงเรียนบ้านด่าน 2 · สพป.บุรีรัมย์ เขต 1
รวม ${rows.length} รายชื่อ · พิมพ์เมื่อ ${new Date().toLocaleString("th-TH")}
${body}
เลขที่ชื่อ–นามสกุลโรงเรียนประเภทกิจกรรมสถานะ