// 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; // Wrap setAuditLog: also POST to API for persistence. // Use a callback shape: appendAudit({ action, reason, entity_type, entity_id, who }) const appendAudit = (entry) => { const optimistic = { id: "a" + Math.random().toString(36).slice(2, 7), scope: "tenant", tenant_id: tenant?.id, action: entry.action || "update", reason: entry.reason || "", performed_by: entry.who || currentUser?.full_name || "ผู้ใช้", at: nowStamp(), }; setAuditLog(prev => [optimistic, ...prev]); if (window.apiClient && tenant?.id) { window.apiClient.addAuditLog(tenant.id, { action: entry.action, reason: entry.reason, entity_type: entry.entity_type, entity_id: entry.entity_id, }).catch(() => {}); } }; // Expose to child pages (process-master / org-chart / etc passes setAuditLog still) // Override setAuditLog wrapper that also posts to API const setAuditLogPersist = (updater) => { setAuditLog(prev => { const next = typeof updater === "function" ? updater(prev) : updater; // Detect newly added entries (compared to prev) — POST them to API if (window.apiClient && tenant?.id && Array.isArray(next) && Array.isArray(prev)) { const prevIds = new Set(prev.map(x => x.id)); next.filter(x => !prevIds.has(x.id)).forEach(entry => { window.apiClient.addAuditLog(tenant.id, { action: entry.action, reason: entry.reason, entity_type: entry.entity_type, entity_id: entry.entity_id, }).catch(() => {}); }); } return next; }); }; // Only Company Admin (or Super Admin in support mode) can edit master data const canEdit = currentRole === "admin" || supportMode; // === Persistence: Process Master + Org Chart + Employee Mapping + Tasks State === const pmHydratedRef = useRef(false); const orgHydratedRef = useRef(false); const epHydratedRef = useRef(false); const tsHydratedRef = useRef(false); const toastApi = useToast(); // Track recent save errors so we don't spam — show one toast per category per 30s. const lastErrorAtRef = useRef({}); const reportSaveError = (category, err) => { const now = Date.now(); if ((now - (lastErrorAtRef.current[category] || 0)) < 30000) return; lastErrorAtRef.current[category] = now; toastApi({ kind: "error", msg: `บันทึก ${category} ลงระบบไม่สำเร็จ — เครือข่ายหรือสิทธิ์มีปัญหา · กรุณาลองรีเฟรชหน้า (${err?.message || "unknown"})` }); }; useEffect(() => { if (!tenant?.id || !window.apiClient) return; pmHydratedRef.current = false; orgHydratedRef.current = false; epHydratedRef.current = false; tsHydratedRef.current = false; // Process Master — always replace (empty arrays from API mean "tenant has no data yet") window.apiClient.getProcessMaster(tenant.id).then(data => { setMainProcesses(Array.isArray(data?.main_processes) ? data.main_processes : []); setProcesses(Array.isArray(data?.processes) ? data.processes : []); setSubprocesses(Array.isArray(data?.sub_processes) ? data.sub_processes : []); setTimeout(() => { pmHydratedRef.current = true; }, 200); }).catch(() => { setTimeout(() => { pmHydratedRef.current = true; }, 200); }); // Org Chart — always replace window.apiClient.getOrgChart(tenant.id).then(data => { setDivisions(Array.isArray(data?.divisions) ? data.divisions : []); setDepartments(Array.isArray(data?.departments) ? data.departments : []); setPositions(Array.isArray(data?.positions) ? data.positions : []); setTimeout(() => { orgHydratedRef.current = true; }, 200); }).catch(() => { setTimeout(() => { orgHydratedRef.current = true; }, 200); }); // Users (tenant members) + Employee Positions — load both, then merge Promise.all([ window.apiClient.getUsers(tenant.id).catch(() => []), window.apiClient.getEmployeePositions(tenant.id).catch(() => []), ]).then(([rows, posRows]) => { const userList = Array.isArray(rows) ? rows : []; const byUser = {}; (Array.isArray(posRows) ? posRows : []).forEach(r => { if (!byUser[r.user_id]) byUser[r.user_id] = []; byUser[r.user_id].push(r.position_id); }); const mapped = userList.map(r => ({ id: r.user_id || r.id, membership_id: r.id, api_user_id: r.user_id, full_name: ((r.first_name || '') + ' ' + (r.last_name || '')).trim() || r.email, email: r.email, employee_code: r.employee_code || '', system_role: r.role, status: r.status, positions: byUser[r.user_id || r.id] || [], from_api: true, })); setUsers(mapped); setTimeout(() => { epHydratedRef.current = true; }, 200); }); // Tenant Audit Log window.apiClient.getTenantAuditLogs(tenant.id, 200).then(rows => { if (Array.isArray(rows)) { setAuditLog(rows.map(r => ({ id: r.id, scope: "tenant", tenant_id: r.tenant_id, action: r.action, reason: r.details || r.action, performed_by: r.performed_by || "system", at: r.created_at, }))); } }).catch(() => {}); // Tasks State — always replace window.apiClient.getTasksState(tenant.id).then(data => { setTasks(Array.isArray(data?.tasks) ? data.tasks : []); setTaskHistory(data?.task_history && typeof data.task_history === 'object' ? data.task_history : {}); setComments(data?.comments && typeof data.comments === 'object' ? data.comments : {}); setTimeout(() => { tsHydratedRef.current = true; }, 300); }).catch(() => { setTimeout(() => { tsHydratedRef.current = true; }, 300); }); // eslint-disable-next-line }, [tenant?.id]); // Autosave Process Master useEffect(() => { if (!pmHydratedRef.current || !tenant?.id || !window.apiClient || !canEdit) return; const handle = setTimeout(() => { window.apiClient.saveProcessMaster(tenant.id, { main_processes: mainProcesses, processes, sub_processes: subprocesses, }).catch(e => reportSaveError("Process Master", e)); }, 800); return () => clearTimeout(handle); }, [mainProcesses, processes, subprocesses, tenant?.id, canEdit]); // Autosave Org Chart useEffect(() => { if (!orgHydratedRef.current || !tenant?.id || !window.apiClient || !canEdit) return; const handle = setTimeout(() => { window.apiClient.saveOrgChart(tenant.id, { divisions, departments, positions }) .catch(e => reportSaveError("Organization Chart", e)); }, 800); return () => clearTimeout(handle); }, [divisions, departments, positions, tenant?.id, canEdit]); // Autosave Employee Mapping (extract user.positions[] back into mapping rows) useEffect(() => { if (!epHydratedRef.current || !tenant?.id || !window.apiClient || !canEdit) return; const handle = setTimeout(() => { const items = []; users.forEach(u => { // Persist API-backed users only — must have a real users.id from server if (!u.id || !String(u.id).startsWith('usr-')) return; (u.positions || []).forEach((pid, idx) => { items.push({ user_id: u.id, position_id: pid, is_primary: idx === 0 ? 1 : 0 }); }); }); window.apiClient.saveEmployeePositions(tenant.id, items) .catch(e => reportSaveError("Employee Mapping", e)); }, 800); return () => clearTimeout(handle); }, [users, tenant?.id, canEdit]); // Autosave Tasks State (snapshot + history + comments) — longer debounce because payload is bigger. // Any active member can update (R submits, A approves, etc.) → no canEdit gate here. useEffect(() => { if (!tsHydratedRef.current || !tenant?.id || !window.apiClient) return; const handle = setTimeout(() => { window.apiClient.saveTasksState(tenant.id, { tasks, task_history: taskHistory, comments, }).catch(e => reportSaveError("สถานะรายวัน", e)); }, 2000); return () => clearTimeout(handle); }, [tasks, taskHistory, comments, tenant?.id]); 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 */} {/* 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, tenantId }) => { 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={async (patch)=>{ try { if (window.apiClient) { const fullName = (patch.full_name || "").trim(); const firstName = fullName.split(" ")[0] || fullName; const lastName = fullName.split(" ").slice(1).join(" ") || ""; // Update user identity (name + phone) via /auth/me — works for both tenant users and super admin await window.apiClient.updateMyProfile({ first_name: firstName, last_name: lastName, phone: patch.phone || "", }); // Also sync name to tenant_users membership row so list shows new name if (currentUser?.membership_id && tenantId) { await window.apiClient.updateMember(tenantId, currentUser.membership_id, { first_name: firstName, last_name: lastName, }).catch(() => {}); } } setUsers(prev => prev.map(u => u.id === currentUser.id ? { ...u, ...patch } : u)); toast({ kind: "success", msg: "บันทึกข้อมูลโปรไฟล์เรียบร้อย" }); setEditOpen(false); } catch (e) { toast({ kind: "error", msg: e.message || "บันทึกไม่สำเร็จ" }); } }}/>
); }; // Edit current-user profile modal const ProfileEditModal = ({ open, onClose, user, onSave }) => { const [f, setF] = useState({}); // Hydrate from API when modal opens — covers phone which isn't in tenant_users list useEffect(() => { if (!open || !user) return; setF({ full_name: user.full_name || "", email: user.email || "", phone: user.phone || "", employee_code: user.employee_code || "", }); if (window.apiClient) { window.apiClient.getMyProfile().then(p => { setF(prev => ({ ...prev, phone: p.phone || "" })); }).catch(() => {}); } }, [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 = () => { onSave(f); }; return ( }>
{f.full_name}
{user.employee_code} · {user.email}
{positions.length > 0 &&
{positions.join(" · ")}
}
set("full_name", e.target.value)}/> set("phone", e.target.value)} placeholder="08x-xxx-xxxx"/>
หากต้องการเปลี่ยนรหัสผ่าน · กรุณาออกจากระบบและเปลี่ยนรหัสผ่านที่หน้าเข้าสู่ระบบ
การแก้ไขโปรไฟล์จะถูกบันทึกลง 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 = (typeof window !== "undefined" && window.TODAY) || new Date().toISOString().slice(0,10); 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]); // Notification bell shows ONLY items where the current user is responsible (R) or accountable (A). // If the user has no position mapped (e.g. brand-new admin), there are no personal tasks. const finalNotes = notes; return (
{open && (
การแจ้งเตือน
{finalNotes.length}
{finalNotes.length === 0 ? (
ไม่มีงานค้าง
{myPosIds.length === 0 ? "บัญชีนี้ยังไม่ได้ผูกกับตำแหน่งในองค์กร · ขอให้ Company Admin ผูกตำแหน่งจากหน้า Employee Mapping" : "ไม่มีงานที่ต้องดำเนินการของคุณในขณะนี้"}
) : (
{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 [busy, setBusy] = useState(false); const toast = useToast(); const filtered = users.filter(u => !q || (u.full_name+u.email+(u.employee_code||"")).toLowerCase().includes(q.toLowerCase())); // Users are loaded centrally in ClientWorkspace on tenant change — no duplicate fetch here. const saveUser = async (u) => { // Editing existing user if (u.id) { // If it's an API-backed user with membership_id, sync to API if (u.from_api && u.membership_id && window.apiClient) { try { const fullName = (u.full_name || "").trim(); const firstName = fullName.split(' ')[0] || fullName; const lastName = fullName.split(' ').slice(1).join(' ') || ''; await window.apiClient.updateMember(tenant.id, u.membership_id, { role: u.system_role, status: u.status, employee_code: u.employee_code || "", first_name: firstName, last_name: lastName, }); } catch (e) { toast({ kind: "error", msg: e.message || "บันทึกการแก้ไขล้มเหลว" }); return; } } setUsers(prev => prev.map(x => x.id === u.id ? u : x)); toast({ kind:"success", msg:"บันทึกข้อมูลผู้ใช้แล้ว" }); setEditFor(null); setAdding(false); return; } // Adding a new user — call API if (!window.apiClient) { // No API → local-only fallback 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} แล้ว (local เท่านั้น)` }); setEditFor(null); setAdding(false); return; } setBusy(true); try { const res = await window.apiClient.addMember(tenant.id, { email: u.email, full_name: u.full_name, role: u.system_role || "employee", employee_code: u.employee_code || "", password: u.password || undefined, // optional — only when creating new user identity }); const newU = { id: res.user_id, membership_id: res.membership_id, api_user_id: res.user_id, full_name: u.full_name, email: u.email, employee_code: u.employee_code || "", system_role: u.system_role || "employee", status: "active", positions: [], from_api: true, }; setUsers(prev => [newU, ...prev]); toast({ kind: "success", msg: res.created_user ? `สร้างบัญชีใหม่ + เพิ่ม ${u.full_name} เป็นพนักงานของบริษัท` : `เพิ่ม ${u.full_name} (บัญชีที่มีอยู่) เป็นพนักงานของบริษัท`, }); setEditFor(null); setAdding(false); } catch (e) { if (e.status === 404) { toast({ kind: "error", msg: `${u.email} ยังไม่มีบัญชีในระบบ · กรุณาให้กรอกรหัสผ่านเริ่มต้นเพื่อสร้างบัญชีพร้อมเพิ่มเป็นสมาชิก`, }); } else if (e.status === 409) { toast({ kind: "error", msg: "ผู้ใช้นี้เป็นสมาชิกของบริษัทอยู่แล้ว" }); } else { toast({ kind: "error", msg: e.message || "เพิ่มผู้ใช้ไม่สำเร็จ" }); } } finally { setBusy(false); } }; 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={async (reason) => { const target = deleteFor; if (target.from_api && target.membership_id && window.apiClient) { try { await window.apiClient.removeMember(tenant.id, target.membership_id); } catch (e) { toast({ kind: "error", msg: e.message || "ลบไม่สำเร็จ" }); return; } } setUsers(prev => prev.filter(x => x.id !== target.id)); toast({ kind: "success", msg: `ลบ ${target.full_name} แล้ว · บันทึก Audit Log` }); setDeleteFor(null); }} title={`ลบผู้ใช้ ${deleteFor?.full_name}`} subtitle="ผู้ใช้จะถูกถอนออกจากบริษัทนี้ (account identity ยังอยู่)" 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 });