// Client Company Workspace shell — sidebar + topbar + page router const WS_NAV = [ { id:"dashboard", label:"Dashboard", icon:"dashboard" }, { id:"matrix", label:"RACI Matrix", icon:"table" }, { id:"process", label:"Process Master", icon:"workflow" }, { id:"org", label:"Organization Chart", icon:"network" }, { id:"mapping", label:"Employee Mapping", icon:"users" }, { id:"users", label:"User Management", icon:"user" }, { id:"audit", label:"Audit Logs", icon:"history" }, { id:"settings", label:"Settings", icon:"settings" }, ]; const ROLE_META = { super_admin: { label:"Super Admin", color:"bg-indigo-950 text-white" }, admin: { label:"Company Admin", color:"bg-indigo-600 text-white" }, manager:{ label:"Manager / Approver", color:"bg-violet-600 text-white" }, employee:{ label:"Employee / Preparer", color:"bg-blue-600 text-white" }, viewer:{ label:"Viewer / Executive", color:"bg-slate-600 text-white" }, }; const ClientWorkspace = ({ tenant, currentRole, setCurrentRole, currentUserId, setCurrentUserId, onLogout, onReturnSuperAdmin, supportMode, tweaks, setTweak, tasks, setTasks, taskHistory, setTaskHistory, comments, setComments, auditLog, setAuditLog, subprocesses, setSubprocesses, // editable master data positions, setPositions, divisions, setDivisions, departments, setDepartments, users, setUsers, mainProcesses, setMainProcesses, processes, setProcesses, }) => { const [page, setPage] = useState("dashboard"); const [collapsed, setCollapsed] = useState(false); const [period, setPeriod] = useState({ month: 5, year: 2026 }); const [matrixFullscreen, setMatrixFullscreen] = useState(false); const [pendingMatrixDate, setPendingMatrixDate] = useState(null); // when user jumps from dashboard const accentClass = tweaks.accent === "emerald" ? "from-emerald-500 to-emerald-700" : tweaks.accent === "sky" ? "from-sky-500 to-sky-700" : tweaks.accent === "violet" ? "from-violet-500 to-violet-700" : "from-indigo-500 to-indigo-700"; // current user object for role const currentUser = users.find(u => u.id === currentUserId) || null; // Only Company Admin (or Super Admin in support mode) can edit master data const canEdit = currentRole === "admin" || supportMode; const pageMeta = { dashboard: { title:"Management Dashboard", subtitle:"มอนิเตอร์การปฏิบัติงานตาม RACI Matrix แบบ Real-time" }, matrix: { title:"RACI Matrix", subtitle:"ตารางหลักของการมอบหมายความรับผิดชอบและสถานะรายวัน" }, process: { title:"Process Master", subtitle:"กำหนด Main Process → Process → Sub-process และผูก RACI" }, org: { title:"Organization Chart", subtitle:"จัดการ Division → Department → Position" }, mapping: { title:"Employee Mapping", subtitle:"ผูกพนักงานกับตำแหน่งในผังองค์กร" }, users: { title:"User Management", subtitle:"จัดการผู้ใช้งานและสิทธิ์ในบริษัท" }, audit: { title:"Audit Logs", subtitle:"ติดตามการเปลี่ยนแปลงในระบบทั้งหมด" }, settings: { title:"Settings", subtitle:"การตั้งค่าทั่วไป" }, }; if (matrixFullscreen) { // Full-bleed matrix return ( setMatrixFullscreen(false)}/> ); } return (
{/* Sidebar */} {/* Main */}
{/* Support mode banner */} {supportMode && (
SUPPORT MODE: คุณกำลังเข้าถึงข้อมูลของ {tenant.company_short} ในฐานะ Super Admin · การกระทำทุกอย่างจะถูกบันทึก
)} {/* Top bar */}
{/* Breadcrumb */}
{tenant.company_name} {pageMeta[page]?.title}
{/* Period selector */}
{/* Search */}
{/* Notifications */} setPage("matrix")}/> {/* Dark mode toggle */} {/* Role switcher (demo) */} {/* Profile */}
{/* Page content */}
{page === "dashboard" && ( { if (date) setPendingMatrixDate(date); setPage("matrix"); }} tweaks={tweaks}/> )} {page === "matrix" && ( setPendingMatrixDate(null)} onFullscreen={()=>setMatrixFullscreen(true)} fullscreen={false}/> )} {page === "process" && ( )} {page === "org" && ( )} {page === "mapping" && ( )} {page === "users" && } {page === "audit" && } {page === "settings" && }
); }; // ----- role switcher ----- const RoleSwitcher = ({ value, onChange, userId, onUserChange, users }) => { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const close = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, []); const roles = [ { v:"admin", l:"Company Admin", i:"shield" }, { v:"manager", l:"Manager / Approver", i:"checkCircle" }, { v:"employee", l:"Employee / Preparer", i:"user" }, { v:"viewer", l:"Viewer / Executive", i:"eye" }, ]; const m = ROLE_META[value]; return (
{open && (
Switch demo role
{roles.map(r => ( ))} {(value === "employee" || value === "manager") && ( <>
เป็นผู้ใช้:
{users.filter(u => u.system_role === value && u.status==="active").map(u => ( ))}
)}
)}
); }; const ProfileMenu = ({ currentRole, currentUser, setUsers, onLogout }) => { const [open, setOpen] = useState(false); const [editOpen, setEditOpen] = useState(false); const ref = useRef(null); const toast = useToast(); useEffect(() => { const close = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, []); const name = currentUser?.full_name || (currentRole==="admin" ? "ธนพร อัศวิน" : currentRole==="viewer" ? "ผู้บริหาร (Demo)" : "ทีมงาน Demo"); const meta = ROLE_META[currentRole]; // Resolve actual position names from currentUser's position IDs (set via Employee Mapping) const positionLabels = (currentUser?.positions || []) .map(pid => POSITIONS.find(p => p.id === pid)?.name) .filter(Boolean) .join(" · "); return (
{open && (
{name}
{currentUser?.email || "user@example.com"}
{positionLabels &&
{positionLabels}
}
)} setEditOpen(false)} user={currentUser} onSave={(patch)=>{ setUsers(prev => prev.map(u => u.id === currentUser.id ? { ...u, ...patch } : u)); toast({ kind:"success", msg:"บันทึกข้อมูลโปรไฟล์เรียบร้อย" }); setEditOpen(false); }}/>
); }; // Edit current-user profile modal const ProfileEditModal = ({ open, onClose, user, onSave }) => { const [f, setF] = useState({}); const [pwdOpen, setPwdOpen] = useState(false); const [pwd, setPwd] = useState({ current:"", next:"", confirm:"" }); const toast = useToast(); useEffect(() => { if (open && user) { setF({ full_name:user.full_name||"", email:user.email||"", phone:user.phone||"", employee_code:user.employee_code||"" }); setPwdOpen(false); setPwd({current:"",next:"",confirm:""}); } }, [open, user]); if (!user) return null; const set = (k,v) => setF(p=>({ ...p, [k]:v })); const positions = (user.positions || []).map(pid => POSITIONS.find(p=>p.id===pid)?.name).filter(Boolean); const submit = () => { if (pwdOpen) { if (!pwd.current || !pwd.next || pwd.next.length < 6) { toast({kind:"warn", msg:"รหัสผ่านใหม่ต้องยาวอย่างน้อย 6 ตัว"}); return; } if (pwd.next !== pwd.confirm) { toast({kind:"warn", msg:"รหัสผ่านใหม่ไม่ตรงกัน"}); return; } } onSave(f); }; return ( }>
{f.full_name}
{user.employee_code} · {user.email}
{positions.length > 0 &&
{positions.join(" · ")}
}
set("full_name", e.target.value)}/> set("email", e.target.value)}/> set("phone", e.target.value)} placeholder="08x-xxx-xxxx"/>
รหัสผ่าน
เปลี่ยนรหัสผ่านเข้าระบบ (แนะนำแต่ละ 90 วัน)
{pwdOpen && (
setPwd(p=>({...p, current:e.target.value}))}/> setPwd(p=>({...p, next:e.target.value}))}/> setPwd(p=>({...p, confirm:e.target.value}))}/>
)}
การแก้ไขโปรไฟล์จะถูกบันทึกลง Audit Log ของบริษัท
); }; // Notification bell with mock dropdown const NotificationBell = ({ tasks, taskHistory, subprocesses, users, positions, currentUser, currentRole, onGoMatrix }) => { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const close = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, []); const myPosIds = currentUser?.positions || []; // Build today's snapshot from taskHistory (authoritative source) instead of static tasks const TODAY = "2026-05-22"; const todaySnapshot = useMemo(() => { const out = []; subprocesses.forEach(sp => { const hist = taskHistory?.[sp.id] || []; let match; if (sp.frequency === "daily") match = hist.find(h => h.date === TODAY); else if (sp.frequency === "weekly") match = hist.find(h => Math.abs((new Date(h.date) - new Date(TODAY))/86400000) <= 6); else if (sp.frequency === "monthly" || sp.frequency === "quarterly") match = hist.find(h => h.date.slice(0,7) === TODAY.slice(0,7)); // ad-hoc — fall back to current snapshot only when nothing in history if (!match && sp.frequency === "ad-hoc") { const cur = tasks.find(t => t.sub_process_id === sp.id); if (cur) match = { date: cur.due_date, status: cur.status, updated: cur.updated, overdue: cur.overdue }; } if (match) out.push({ sp, ...match }); }); return out; }, [subprocesses, taskHistory, tasks]); // Build a list of relevant notifications for the current user from today's snapshot const notes = useMemo(() => { const list = []; todaySnapshot.forEach(({ sp, status, date, overdue }) => { const isR = myPosIds.includes(sp.R); const isA = myPosIds.includes(sp.A); if (status === "A" && isA) list.push({ k:"approve", sp, msg:`รอตรวจสอบ: ${sp.name}`, sub:`ครบกำหนด ${date}`, color:"violet", icon:"checkCircle" }); if (status === "C" && isR) list.push({ k:"correct", sp, msg:`มี Comment ให้แก้ไข: ${sp.name}`, sub:`ครบกำหนด ${date}`, color:"amber", icon:"message" }); if (status === "P" && isR) list.push({ k:"prep", sp, msg:`รอจัดทำ: ${sp.name}`, sub:`ครบกำหนด ${date}`, color:"blue", icon:"arrowUp" }); if (overdue && status !== "S" && (isR || isA)) list.push({ k:"overdue", sp, msg:`⚠ เลยกำหนด: ${sp.name}`, sub:`ครบกำหนด ${date}`, color:"rose", icon:"alert" }); }); return list.slice(0, 12); }, [todaySnapshot, myPosIds]); // Admin and viewer see global summary instead const isStaff = myPosIds.length > 0; const fallback = !isStaff ? [ { k:"summary", msg:`งานรอตรวจสอบ ${todaySnapshot.filter(t=>t.status==="A").length} รายการ`, sub:"ผู้ตรวจสอบ A ต้องพิจารณา", color:"violet", icon:"checkCircle" }, { k:"summary", msg:`งานแก้ไข ${todaySnapshot.filter(t=>t.status==="C").length} รายการ`, sub:"รอ ผู้รับผิดชอบ R ตอบกลับ", color:"amber", icon:"message" }, { k:"summary", msg:`งานรอจัดทำ ${todaySnapshot.filter(t=>t.status==="P").length} รายการ`, sub:"รอ ผู้รับผิดชอบ R จัดทำ", color:"blue", icon:"arrowUp" }, ] : []; const finalNotes = isStaff ? notes : fallback; return (
{open && (
การแจ้งเตือน
{finalNotes.length}
{finalNotes.length === 0 ? (
ไม่มีงานค้าง
ไม่มีงานที่ต้องดำเนินการของคุณในขณะนี้
) : (
{finalNotes.map((n,i) => ( ))}
)}
ระบบแจ้งอัตโนมัติตามสิทธิ์ R/A ของคุณ
)}
); }; // ----- User Management placeholder page (uses real users list) ----- const UserManagementPage = ({ users, setUsers, tenant, canEdit }) => { const [q, setQ] = useState(""); const [editFor, setEditFor] = useState(null); // user being edited const [deleteFor, setDeleteFor] = useState(null); const [adding, setAdding] = useState(false); const toast = useToast(); const filtered = users.filter(u => !q || (u.full_name+u.email+u.employee_code).toLowerCase().includes(q.toLowerCase())); const saveUser = (u) => { if (u.id) { setUsers(prev => prev.map(x => x.id === u.id ? u : x)); toast({ kind:"success", msg:"บันทึกข้อมูลผู้ใช้แล้ว" }); } else { const newU = { ...u, id:"u"+Date.now(), positions:[], status:u.status||"active", system_role:u.system_role||"employee" }; setUsers(prev => [...prev, newU]); toast({ kind:"success", msg:`เพิ่ม ${newU.full_name} แล้ว` }); } setEditFor(null); setAdding(false); }; const resetPassword = (u) => { toast({ kind:"success", msg:`ส่งลิงก์รีเซ็ตรหัสผ่านไปยัง ${u.email} แล้ว` }); }; const exportUsers = () => { downloadCsv(`${tenant.tenant_code}_users.csv`, ["Employee Code","Full Name","Email","System Role","Status","Positions"], users.map(u => [u.employee_code, u.full_name, u.email, u.system_role, u.status, u.positions.map(pid => POSITIONS.find(p=>p.id===pid)?.name).filter(Boolean).join(" / ")]) ); toast({ kind:"success", msg:"ส่งออกไฟล์ผู้ใช้เรียบร้อย" }); }; return (
{canEdit ? : อ่านอย่างเดียว} }/> {!canEdit && (
คุณกำลังดูรายชื่อผู้ใช้แบบ อ่านอย่างเดียว · ติดต่อ Company Admin เพื่อขอสิทธิ์จัดการผู้ใช้
)}
setQ(e.target.value)} placeholder="ค้นหาผู้ใช้…" className="w-full h-9 pl-9 pr-3 text-[13px] border border-ink-200 rounded-lg bg-white focus:border-brand-500 ring-focus"/>
{filtered.length} รายการ
{["ผู้ใช้","Employee Code","อีเมล","ตำแหน่ง","System Role","สถานะ","Action"].map(h => ( ))} {filtered.map(u => { const positions = u.positions.map(pid => POSITIONS.find(p=>p.id===pid)?.name).filter(Boolean); return ( ); })}
{h}
{u.full_name}
 {u.employee_code} {u.email} {positions.length ? positions.join(", ") : ยังไม่ผูกตำแหน่ง} {u.system_role} {u.status}
{canEdit ? <> : view only}
{/* Edit / Add modal */} { setEditFor(null); setAdding(false); }} onSave={saveUser}/> {/* Delete with reason */} setDeleteFor(null)} onConfirm={(reason)=>{ setUsers(prev=>prev.filter(x=>x.id!==deleteFor.id)); toast({kind:"success", msg:`ลบ ${deleteFor.full_name} แล้ว · บันทึก Audit Log`}); setDeleteFor(null); }} title={`ลบผู้ใช้ ${deleteFor?.full_name}`} subtitle="ผู้ใช้จะถูกลบถาวร ไม่สามารถฟื้นได้" confirmLabel="ลบผู้ใช้"/>
); }; const UserEditModal = ({ open, user, onClose, onSave }) => { const [f, setF] = useState({ full_name:"", email:"", employee_code:"", phone:"", system_role:"employee", status:"active" }); useEffect(() => { if (open) setF(user ? { ...user } : { full_name:"", email:"", employee_code:"", phone:"", system_role:"employee", status:"active" }); }, [open, user]); const set = (k,v) => setF(p => ({ ...p, [k]:v })); const valid = f.full_name && f.email && f.employee_code; return ( } >
set("full_name", e.target.value)} placeholder="เช่น สมชาย ใจดี"/> set("employee_code", e.target.value.toUpperCase())} className="font-mono uppercase"/> set("email", e.target.value)}/> set("phone", e.target.value)} placeholder="08x-xxx-xxxx"/>
); }; const SettingsPage = ({ tenant }) => { const toast = useToast(); return (
toast({kind:"success", msg:"บันทึกการตั้งค่าเรียบร้อย"})}>บันทึกการตั้งค่า}/>
{[ { t:"ชื่อบริษัท", v:tenant.company_name }, { t:"Tenant Code", v:{tenant.tenant_code} }, { t:"Plan", v:`${tenant.plan} · ${tenant.seats} seats` }, { t:"การแยกข้อมูล", v:{tenant.database_type} }, { t:"Database / Schema", v:{tenant.database_name} / {tenant.schema_name} }, { t:"วันสิ้นสุดบริการ", v:{tenant.service_expiry_date} }, { t:"Time zone", v:"Asia/Bangkok (GMT+7)" }, { t:"Default language", v:"ภาษาไทย" }, ].map((c,i) => (
{c.t}
{c.v}
))}
); }; Object.assign(window, { ClientWorkspace, ROLE_META });