/* ===== Reports: manager view + board panel + submit modal ===== */ const { useState: useStateR, useMemo: useMemoR, useEffect: useEffectR } = React; function dueRuleText(s) { const h = `${String(s.dueHour).padStart(2,"0")}:00`; if (s.cadence === "daily") return `ทุกวัน ${h} น.`; if (s.cadence === "weekly") return `ทุกวัน${DOW_TH[s.dueDow]} ${h} น.`; return `ทุกวันที่ ${s.dueDom} ของเดือน ${h} น.`; } function scheduleStats(s, submissions) { const periods = periodsFor(s).map(p => { const sub = submissions[subKey(s.id, p.key)]; return { ...p, sub, status: reportStatus(p, sub) }; }); const due = periods.filter(p => p.status !== "pending"); const ontime = due.filter(p => p.status === "ontime").length; const late = due.filter(p => p.status === "late").length; const missed = due.filter(p => p.status === "missed").length; const pct = due.length ? Math.round((ontime / due.length) * 100) : 0; let streak = 0; for (let i = periods.length - 1; i >= 0; i--) { if (periods[i].status === "pending") continue; if (periods[i].status === "ontime") streak++; else break; } return { periods, dueCount: due.length, ontime, late, missed, pct, streak }; } /* ---- dot strip (contribution-style) ---- */ function DotStrip({ periods, onPick }) { return (
{periods.map(p => { const st = REPORT_STATUS[p.status]; const isPending = p.status === "pending"; const tip = `${p.label} · ${st.label}` + (p.sub ? ` (${new Date(p.sub.at).toLocaleString("th-TH",{day:"numeric",month:"short",hour:"2-digit",minute:"2-digit"})})` : ""); return (
); } function MiniCount({ n, color, label }) { return (
{n} {label}
); } /* ===== Manager reports tab ===== */ function ReportsView({ schedules, submissions, members, onGotoBoard, onSubmitReport, onAddSchedule, onEditSchedule }) { const memberList = members || MEMBERS; const [filter, setFilter] = useStateR("all"); // member id or "all" const [activeSub, setActiveSub] = useStateR(null); // { schedule, period, existing } const rows = useMemoR(() => { return schedules .map(s => ({ s, m: MEMBER_MAP[s.owner], stats: scheduleStats(s, submissions) })) .filter(r => r.m) // skip schedules whose owner was deleted .filter(r => filter === "all" || r.s.owner === filter) .sort((a, b) => { const ai = memberList.findIndex(x => x.id === a.s.owner); const bi = memberList.findIndex(x => x.id === b.s.owner); if (ai !== bi) return ai - bi; return a.s.name.localeCompare(b.s.name, "th"); }); }, [schedules, submissions, filter, memberList]); const agg = useMemoR(() => { let ontime = 0, late = 0, missed = 0; rows.forEach(r => { ontime += r.stats.ontime; late += r.stats.late; missed += r.stats.missed; }); const total = ontime + late + missed; return { ontime, late, missed, total, pct: total ? Math.round((ontime / total) * 100) : 0 }; }, [rows]); const summary = [ { label: "อัตราส่งตรงเวลา", value: agg.pct + "%", color: "var(--primary)", big: true }, { label: "ส่งตรงเวลา", value: agg.ontime, color: "var(--done)" }, { label: "ส่งช้า", value: agg.late, color: "var(--review)" }, { label: "ขาดส่ง", value: agg.missed, color: "var(--high)" }, ]; return (
รายงานประจำ · Recurring reports

การส่งรายงานของทีม

ติดตามว่าใครส่งตรงเวลา ส่งช้า หรือขาดส่ง — แต่ละคนตั้งความถี่ได้เอง
{summary.map(c => (
{c.label}
{c.value}
))}
{memberList.map(m => { const count = schedules.filter(s => s.owner === m.id).length; if (count === 0) return null; const on = filter === m.id; return ( ); })}
รายงานรายคน · By person ชี้ที่จุดเพื่อดูวันที่ · คลิกชื่อเพื่อเปิดบอร์ด
{onAddSchedule && ( )}
{rows.length === 0 && (
{filter === "all" ? "ยังไม่มีรายงานในระบบ" : "คนนี้ยังไม่มีรายงานประจำ"}
)} {rows.map(({ s, m, stats }) => (
setActiveSub({ schedule: s, period: p, existing: p.sub }) : undefined} />
= 80 ? "var(--done)" : stats.pct >= 50 ? "var(--review)" : "var(--high)" }}> {stats.pct}%
{stats.streak > 0 &&
🔥 ตรงเวลา {stats.streak} รอบ
} {onEditSchedule && ( )}
))}
{activeSub && ( setActiveSub(null)} onSubmit={(remark, atMs) => { onSubmitReport(activeSub.schedule.id, activeSub.period.key, remark, atMs); setActiveSub(null); }} /> )}
); } function Legend() { const items = [["ontime","ส่งตรงเวลา"],["late","ส่งช้า"],["missed","ขาดส่ง"],["pending","รอส่ง"]]; return (
{items.map(([k, label]) => { const st = REPORT_STATUS[k]; const pending = k === "pending"; return (
{label}
); })}
); } /* ===== Board panel: my reports to submit ===== */ function ReportPanel({ currentUser, schedules, submissions, onSubmit, onAddSchedule, onEditSchedule }) { const mine = schedules.filter(s => s.owner === currentUser); const [active, setActive] = useStateR(null); // {schedule, period} const showAdd = !!onAddSchedule; if (!mine.length && !showAdd) return null; return ( <>
📋 รายงานที่ต้องส่ง กดส่งเพื่อบันทึกเวลา · ตั้งรอบส่งได้เอง
{showAdd && ( )}
{mine.length === 0 && (
ยังไม่มีรายงานประจำ
กด “เพิ่มรายงาน” เพื่อตั้งความถี่และเวลาส่ง
)} {mine.map(s => { const stats = scheduleStats(s, submissions); const cur = stats.periods[stats.periods.length - 1]; const st = REPORT_STATUS[cur.status]; const done = cur.status === "ontime" || cur.status === "late"; return (
{s.name}
{CADENCES[s.cadence].label} รอบ {cur.label} · กำหนด {String(s.dueHour).padStart(2,"0")}:00 น.
setActive({ schedule: s, period: p, existing: p.sub })} />
คลิกจุดเพื่อแก้ไขรอบเก่า
{st.label}
{onEditSchedule && ( )}
); })}
{active && ( setActive(null)} onSubmit={(remark, atMs) => { onSubmit(active.schedule.id, active.period.key, remark, atMs); setActive(null); }} /> )} ); } // แปลง ms -> "YYYY-MM-DDTHH:mm" สำหรับ datetime-local input (ใช้ local time) function msToInputLocal(ms) { const d = new Date(ms); const pad = (n) => String(n).padStart(2, "0"); return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; } function inputLocalToMs(str) { return new Date(str).getTime(); } function ReportSubmitModal({ schedule, period, existing, onClose, onSubmit }) { const [remark, setRemark] = useStateR(existing?.remark || ""); // default เวลาที่ส่ง: ถ้าแก้รายการเดิม = ค่าเดิม, ถ้าใหม่ = ตอนนี้ const [atMs, setAtMs] = useStateR(existing?.at ?? Date.now()); useEffectR(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); // คำนวณสถานะ live ตาม atMs ปัจจุบัน const ontime = atMs <= period.dueMs; const willBe = ontime ? "ส่งตรงเวลา" : "ส่งช้า"; const willColor = ontime ? "var(--done)" : "var(--review)"; const willBg = ontime ? "var(--done-soft)" : "var(--review-soft)"; // ขอบเขต: ไม่ก่อนรอบเริ่ม, ไม่หลังตอนนี้ const minMs = period.date.getTime(); // วันเริ่มรอบ 00:00 const maxMs = Date.now(); // ไม่ใส่อนาคต const minStr = msToInputLocal(minMs); const maxStr = msToInputLocal(maxMs); const setPreset = (kind) => { if (kind === "now") setAtMs(Date.now()); else if (kind === "due") setAtMs(period.dueMs - 30 * 60 * 1000); // 30 นาทีก่อนกำหนด else if (kind === "early") setAtMs(period.dueMs - 4 * 60 * 60 * 1000); // 4 ชม. ก่อนกำหนด }; const handleSubmit = () => { let safeMs = atMs; if (safeMs > maxMs) safeMs = maxMs; if (safeMs < minMs) safeMs = minMs; onSubmit(remark, safeMs); }; return (
e.stopPropagation()}>
ส่งรายงาน · {CADENCES[schedule.cadence].label}
{schedule.name}
รอบ {period.label} · กำหนด {dueRuleText(schedule)}
{/* สถานะที่จะถูกบันทึก */}
จะบันทึกเป็น "{willBe}" · เวลาที่ส่ง {new Date(atMs).toLocaleString("th-TH",{day:"numeric",month:"short",hour:"2-digit",minute:"2-digit"})} น.
{/* เวลาที่ส่ง — ปรับย้อนหลังได้ */}