// Calendar Status View — alternate view of the RACI matrix that shows daily status // per sub-process across all days of the selected month. // Each row = sub-process; columns = days of month with status colored cells. const CalendarStatusView = ({ subprocesses, mainProcesses, processes, positions, departments, divisions, tasks, taskHistory, setTaskHistory, setTasks, setAuditLog, period, tenant, currentRole, currentUser, users, filterFn, // (sp) => bool for filters/search/mine setTimelineFor, setDrawerFor, comments, setComments, density, }) => { const toast = useToast(); const [cellAction, setCellAction] = useState(null); // { sp, date, status, anchor } const myPositionIds = currentUser?.positions || []; // Build days of selected month const days = useMemo(() => { const { month, year } = period; const last = new Date(year, month, 0).getDate(); const arr = []; for (let d = 1; d <= last; d++) { const dt = new Date(year, month-1, d); const ds = `${year}-${String(month).padStart(2,"0")}-${String(d).padStart(2,"0")}`; const dow = dt.getDay(); // 0 Sun .. 6 Sat arr.push({ d, ds, dow, isWeekend: dow===0||dow===6, isToday: ds === "2026-05-22", isFuture: dt > new Date("2026-05-22T23:59:59") }); } return arr; }, [period]); // Filtered rows from passed-in filter const rows = useMemo(() => subprocesses.filter(filterFn), [subprocesses, filterFn]); // Cell size + left sticky widths const CELL_W = density === "compact" ? 26 : 32; const LEFT_W = { mp: 150, pr: 150, sp: 220, due: 90 }; const LEFT_TOTAL = LEFT_W.mp + LEFT_W.pr + LEFT_W.sp + LEFT_W.due; const RIGHT_W = 70; // timeline+comment icons // Update handler — same logic as matrix, abbreviated const updateInstance = (sp, dateStr, patch, audit) => { const stamp = nowStamp(); if (sp.frequency === "daily" || sp.frequency === "weekly" || sp.frequency === "monthly" || sp.frequency === "quarterly") { setTaskHistory(prev => { const list = (prev[sp.id] || []).slice(); let idx = -1; if (sp.frequency === "monthly" || sp.frequency === "quarterly") { idx = list.findIndex(h => h.date.slice(0,7) === dateStr.slice(0,7)); } else if (sp.frequency === "weekly") { idx = list.findIndex(h => Math.abs((new Date(h.date) - new Date(dateStr)) / 86400000) <= 6); } else { idx = list.findIndex(h => h.date === dateStr); } if (idx >= 0) list[idx] = { ...list[idx], ...patch, updated: stamp }; else { list.push({ date: dateStr, status: "blank", ...patch, updated: stamp }); list.sort((a,b) => a.date.localeCompare(b.date)); } return { ...prev, [sp.id]: list }; }); } if (dateStr === "2026-05-22" || sp.frequency === "ad-hoc") { setTasks(prev => prev.map(t => t.sub_process_id === sp.id ? { ...t, ...patch, updated: stamp } : t)); } if (audit) { const lbl = dateStr === "2026-05-22" ? "วันนี้" : `งวด ${dateStr}`; setAuditLog(prev => [{ id:"a"+Math.random().toString(36).slice(2,7), scope:"tenant", tenant_id:tenant.id, action:"status_change", reason:`${audit} · ${lbl}`, performed_by: currentUser?.full_name || (currentRole==="admin"?"ธนพร อัศวิน":"ทีมงาน"), at: stamp }, ...prev]); } }; // Resolve a status letter + tone for any day const cellFor = (sp, ds) => { if (sp.frequency === "daily") { const h = (taskHistory[sp.id]||[]).find(x => x.date === ds); return h || { status: "blank", date: ds }; } if (sp.frequency === "monthly" || sp.frequency === "quarterly") { // Only show on the due day of the month const isLast = (sp.due_day||"").includes("สุดท้าย"); const dayNum = +ds.slice(-2); let dueDay = null; if (isLast) { // Compute last workday of the month const [yy, mm] = ds.split("-").map(Number); let last = new Date(yy, mm, 0); // last calendar day while (last.getDay() === 0 || last.getDay() === 6) last.setDate(last.getDate() - 1); dueDay = last.getDate(); } else { const m = (sp.due_day||"").match(/\d+/); dueDay = m ? +m[0] : null; } if (dueDay && dayNum === dueDay) { const h = (taskHistory[sp.id]||[]).find(x => x.date === ds); return h || { status: "blank", date: ds, isMonthlyDue: true }; } return null; } if (sp.frequency === "weekly") { const dt = new Date(ds); if (dt.getDay() !== 5) return null; // Friday only const h = (taskHistory[sp.id]||[]).find(x => Math.abs((new Date(x.date) - dt)/86400000) <= 3); return h || { status: "blank", date: ds }; } // ad-hoc — show only on dates with instances const h = (taskHistory[sp.id]||[]).find(x => x.date === ds); return h || null; }; // Aggregated per-row stats for the month const rowStats = (sp) => { let s=0,a=0,c=0,p=0,b=0,total=0; days.forEach(d => { if (d.isFuture) return; const cell = cellFor(sp, d.ds); if (!cell) return; if (sp.frequency === "daily" && d.isWeekend) return; total++; if (cell.status === "S") s++; else if (cell.status === "A") a++; else if (cell.status === "C") c++; else if (cell.status === "P") p++; else b++; }); return { s, a, c, p, b, total, pct: total ? Math.round(s/total*100) : 0 }; }; return (
{/* Sticky left header */} {/* Day headers */} {days.map(day => ( ))} {/* Stats summary header */} {rows.length === 0 && ( )} {rows.map((sp, rIdx) => { const mp = mainProcesses.find(m=>m.id===sp.main_process_id); const pr = processes.find(p=>p.id===sp.process_id); const prev = rows[rIdx-1]; const newMp = !prev || prev.main_process_id !== sp.main_process_id; const newPr = !prev || prev.process_id !== sp.process_id; const stats = rowStats(sp); const rUser = users.find(u => u.positions.includes(sp.R)); const aUser = users.find(u => u.positions.includes(sp.A)); return ( {/* Main process */} {/* Process */} {/* Sub-process */} {/* Due rule */} {/* Day cells */} {days.map(day => { const cell = cellFor(sp, day.ds); const isWeekendDaily = sp.frequency === "daily" && day.isWeekend; if (!cell || isWeekendDaily) { return ( ); } const m = STATUS_META[cell.status]; const isR = myPositionIds.includes(sp.R); const isA = myPositionIds.includes(sp.A); const trackingOff = sp.track_status === false; return ( ); })} {/* Month summary */} {/* Timeline + Comment */} ); })}
Process Hierarchy
Main · Process · Sub-process · Due
{["อา","จ","อ","พ","พฤ","ศ","ส"][day.dow]} {day.d} {day.isToday && }
Month Summary
{period.month}/{period.year}
{newMp &&
{mp?.name}
} 		{newPr &&
{pr?.name}
}
{sp.name}
{sp.frequency}
{sp.due_day}
 · {stats.total > 0 ? (
=80?"text-emerald-600":stats.pct>=50?"text-amber-600":"text-rose-600"}`}>{stats.pct}%
{stats.s}/{stats.total}
) : —}
{/* Cell action popover (modal-style) */} setCellAction(null)} onApply={(newStatus, commentText) => { const { sp, date, status } = cellAction; const stamp = nowStamp(); const author = currentUser?.full_name || (currentRole==="admin" ? "ธนพร อัศวิน" : "ทีมงาน"); const addCmt = (type, text) => { if (!text) return; setComments?.(prev => ({ ...prev, [sp.id]: [...(prev[sp.id]||[]), { id:"c"+Math.random().toString(36).slice(2,8), type, author_name:author, text, at:stamp, task_date: date }] })); }; if (newStatus === "P") updateInstance(sp, date, { status:"P" }, `เปลี่ยนสถานะเป็น P (รอจัดทำ) — ${sp.name}`); else if (newStatus === "A") { updateInstance(sp, date, { status:"A" }, `เปลี่ยนสถานะเป็น A (รอตรวจสอบ) — ${sp.name}`); if (status === "C") addCmt("response", commentText); // R → A after correction } else if (newStatus === "S") updateInstance(sp, date, { status:"S" }, `เปลี่ยนสถานะเป็น S (สำเร็จ) — ${sp.name}`); else if (newStatus === "C") { updateInstance(sp, date, { status:"C" }, `เปลี่ยนสถานะเป็น C (มี comment) — ${sp.name}`); if (status === "A") addCmt("correction", commentText); // A → C reject with comment else if (status === "S") addCmt("cancel_success", `ยกเลิกสถานะสำเร็จ: ${commentText}`); // S → C cancel } toast({ kind:"success", msg:`อัปเดตสถานะวัน ${date} เป็น ${STATUS_META[newStatus].label} แล้ว` }); setCellAction(null); }} users={users} positions={positions} comments={comments} currentRole={currentRole} myPositionIds={myPositionIds} />
); }; // Permission helper — only R/A (or admin) may act on a given status const canActOnCellStatic = (sp, status, currentRole, myPositionIds) => { if (currentRole === "admin") return true; if (currentRole === "viewer") return false; const isR = myPositionIds.includes(sp.R); const isA = myPositionIds.includes(sp.A); if (!isR && !isA) return false; // C / I → no action if (status === "blank") return isR || isA; if (status === "P") return isR; if (status === "A") return isA; if (status === "C") return isR; if (status === "S") return isA; return false; }; // Inline cell action modal — choose what to set status to for a specific day const CellActionModal = ({ action, onClose, onApply, users, positions, currentRole, myPositionIds, comments }) => { const [stage, setStage] = useState("choose"); // choose | comment const [chosenStatus, setChosenStatus] = useState(null); const [text, setText] = useState(""); useEffect(() => { if (action) { setStage("choose"); setChosenStatus(null); setText(""); } }, [action]); if (!action) return null; const { sp, date, status, cell } = action; const m = STATUS_META[status]; const rUser = users.find(u => u.positions.includes(sp.R)); const aUser = users.find(u => u.positions.includes(sp.A)); const canAct = canActOnCellStatic(sp, status, currentRole, myPositionIds); const myRoleOnSp = myPositionIds.includes(sp.R) ? "R" : myPositionIds.includes(sp.A) ? "A" : sp.C.some(id=>myPositionIds.includes(id)) ? "C" : sp.I.some(id=>myPositionIds.includes(id)) ? "I" : null; // Latest correction comment (shown in C → A response flow) const latestCorrection = (comments?.[sp.id] || []).filter(c => c.type === "correction").slice(-1)[0]; const NextOptions = () => { // depending on status, suggest next moves; also allow override. const opts = []; if (status === "blank") opts.push({ key:"P", label:"เริ่มจัดทำ", tone:"blue" }, { key:"S", label:"บันทึกเป็นสำเร็จ (back-fill)", tone:"emerald" }); if (status === "P") opts.push({ key:"A", label:"ส่งให้ผู้ตรวจสอบ", tone:"violet" }); if (status === "A") opts.push({ key:"S", label:"อนุมัติเป็นสำเร็จ", tone:"emerald" }, { key:"C", label:"ส่งกลับให้แก้ไข", tone:"amber", needComment:true }); if (status === "C") opts.push({ key:"A", label:"ส่งกลับให้ตรวจสอบอีกครั้ง", tone:"violet", needComment:true }); if (status === "S") opts.push({ key:"C", label:"ยกเลิกสถานะสำเร็จ", tone:"amber", needComment:true }); return opts; }; const opts = NextOptions(); const currentOpt = opts.find(o => o.key === chosenStatus); const toneClasses = { emerald:"bg-emerald-600 hover:bg-emerald-700 text-white", violet:"bg-violet-600 hover:bg-violet-700 text-white", amber:"bg-amber-500 hover:bg-amber-600 text-white", blue:"bg-blue-600 hover:bg-blue-700 text-white", }; const handlePick = (o) => { if (o.needComment) { setChosenStatus(o.key); setStage("comment"); } else { onApply(o.key); } }; const submitComment = () => { if (!text.trim()) return; onApply(chosenStatus, text.trim()); }; // Comment field title/placeholder based on transition const commentMeta = (() => { if (!chosenStatus) return null; if (status === "A" && chosenStatus === "C") return { label:"วิธีการแก้ไข / สิ่งที่ต้องแก้", placeholder:"ระบุรายละเอียดที่ต้องการให้ผู้รับผิดชอบแก้ไข", title:"ส่ง Comment ให้แก้ไข", tone:"amber" }; if (status === "C" && chosenStatus === "A") return { label:"วิธีการแก้ไข / คำตอบกลับ", placeholder:"อธิบายสิ่งที่ได้แก้ไขให้ผู้ตรวจสอบทราบ", title:"ตอบกลับให้ตรวจสอบ", tone:"violet" }; if (status === "S" && chosenStatus === "C") return { label:"เหตุผลในการยกเลิกสถานะสำเร็จ", placeholder:"ระบุเหตุผลที่ต้องยกเลิกสถานะสำเร็จ", title:"ยกเลิกสถานะสำเร็จ", tone:"amber" }; return { label:"Comment", placeholder:"", title:"ใส่ Comment", tone:"violet" }; })(); return (
{date}}/> }/> {myRoleOnSp && (
บทบาทของคุณในงานนี้
{RACI_META[myRoleOnSp].label}
)}
{cell?.updated &&
อัปเดตล่าสุด: {cell.updated}
}
{canAct ? ( stage === "choose" ? ( <>
เลือกสถานะที่ต้องการเปลี่ยนเป็น
{opts.map(o => ( ))} {opts.length === 0 &&
ไม่มีสถานะถัดไป
}
การเปลี่ยนแปลงทั้งหมดจะถูกบันทึกใน Audit Log พร้อมระบุวันที่ของงวด
) : ( <> {/* Comment input stage */}
{commentMeta.title}
เปลี่ยนสถานะของวัน {date} · {sp.name}
{/* show latest correction comment if this is C→A response */} {status === "C" && latestCorrection && (
Comment จากผู้ตรวจสอบ · {latestCorrection.author_name}
{latestCorrection.text}
{latestCorrection.at}
)}