Usage
การใช้งานในระดับ SaaS
{[
{ l:"Users (total)", v:totals.users, sub:`${totals.active} active`, i:"users", c:"from-indigo-500 to-indigo-700" },
{ l:"Processes", v:totals.processes, sub:"รวมทุก Tenant", i:"workflow", c:"from-emerald-500 to-emerald-700" },
{ l:"Task Instances", v:totals.tasks, sub:"30 วันล่าสุด", i:"table", c:"from-violet-500 to-violet-700" },
{ l:"Storage", v:`${totals.storage.toFixed(1)} GB`, sub:"รวมทุก Tenant", i:"database", c:"from-sky-500 to-sky-700" },
{ l:"Active Tenants", v:tenants.filter(t=>t.service_status==="active").length, sub:`/ ${tenants.length} ทั้งหมด`, i:"building", c:"from-amber-500 to-amber-700" },
].map((k,i)=>(
))}
Storage usage per tenant
{tenants.map(t => {
const pct = maxStorage>0 ? (t.usage.storage_gb / maxStorage * 100) : 0;
return (
{t.tenant_code}
{t.company_short}
{t.usage.storage_gb.toFixed(1)} GB · {t.usage.users} users · {t.usage.tasks} tasks
);
})}
);
};
// ----- Audit -----
const SuperAuditPage = ({ auditLog, tenants }) => {
const [scope, setScope] = useState("super");
const [q, setQ] = useState("");
const filtered = auditLog.filter(a => (scope==="all" || a.scope===scope) && (!q || JSON.stringify(a).toLowerCase().includes(q.toLowerCase())));
const action_meta = {
create:{ c:"text-emerald-300 bg-emerald-400/10 border-emerald-400/30", i:"plus" },
activate:{ c:"text-emerald-300 bg-emerald-400/10 border-emerald-400/30", i:"play" },
suspend:{ c:"text-amber-300 bg-amber-400/10 border-amber-400/30", i:"pause" },
deactivate:{ c:"text-rose-300 bg-rose-400/10 border-rose-400/30", i:"ban" },
support_access:{ c:"text-indigo-300 bg-indigo-400/10 border-indigo-400/30", i:"shield" },
status_change:{ c:"text-violet-300 bg-violet-400/10 border-violet-400/30", i:"refresh" },
delete:{ c:"text-rose-300 bg-rose-400/10 border-rose-400/30", i:"trash" },
reset_admin_password:{ c:"text-indigo-300 bg-indigo-400/10 border-indigo-400/30", i:"key" },
};
return (
{["เวลา","Scope","Tenant","Action","Performed by","Reason"].map(h=>(| {h} | ))}
{filtered.map(a => {
const tn = tenants.find(t=>t.id===a.tenant_id);
const m = action_meta[a.action] || { c:"text-indigo-300 bg-indigo-400/10 border-indigo-400/30", i:"info" };
return (
| {a.at} |
{a.scope} |
{tn ? `${tn.company_short} [${tn.tenant_code}]` : a.tenant_id} |
{a.action}
|
{a.performed_by} |
{a.reason} |
);
})}
);
};
const SystemSettingsPage = () => {
const toast = useToast();
const [cfg, setCfg] = useState({
isolation: "separate_schema",
support: "logged_24h",
mfa: true,
backup: "daily_02",
email: "raciworks.io",
});
return (
System Settings
toast({kind:"success", msg:"บันทึก System Settings เรียบร้อย"})}>บันทึกการตั้งค่า
setCfg(p=>({...p, isolation:e.target.value}))}>
setCfg(p=>({...p, support:e.target.value}))}>
setCfg(p=>({...p, backup:e.target.value}))}>
setCfg(p=>({...p, email:e.target.value}))} className="!w-56"/>
);
};
const DarkConfigRow = ({ t, sub, children }) => (
);
// --- Edit Company Info modal ---
const EditCompanyModal = ({ tenant, onClose, onSave }) => {
const [f, setF] = useState({});
useEffect(() => { if (tenant) setF({ ...tenant }); }, [tenant]);
if (!tenant) return null;
const set = (k,v) => setF(p=>({ ...p, [k]:v }));
return (
ยกเลิก
onSave(f)}>บันทึกการแก้ไข
}>
set("company_name", e.target.value)}/>
set("company_short", e.target.value)}/>
set("industry", e.target.value)}>
{["การผลิต","ค้าปลีก","บริการ","ขนส่ง","ที่ปรึกษา","ธนาคาร / การเงิน","อื่นๆ"].map(x=>)}
set("contact_person", e.target.value)}/>
set("contact_phone", e.target.value)}/>
set("contact_email", e.target.value)}/>
set("plan", e.target.value)}>
{["Starter","Business","Enterprise"].map(x=>)}
set("seats", +e.target.value)}/>
set("service_start_date", e.target.value)}/>
set("service_expiry_date", e.target.value)}/>
);
};
// --- Edit Admin User modal ---
const EditAdminModal = ({ target, onClose, onSave }) => {
const [f, setF] = useState({});
useEffect(() => { if (target) setF({ ...target.admin }); }, [target]);
if (!target) return null;
const set = (k,v) => setF(p=>({ ...p, [k]:v }));
return (
ยกเลิก
onSave(f)}>บันทึก
}>
set("full_name", e.target.value)}/>
set("employee_code", e.target.value.toUpperCase())} className="font-mono uppercase"/>
set("email", e.target.value)}/>
การแก้ไขรหัสผ่านให้ใช้ปุ่ม รีเซ็ตรหัสผ่าน แยกต่างหาก เพื่อความปลอดภัยและการบันทึก Audit Log
);
};
// --- Reset password modal ---
const ResetPasswordModal = ({ target, onClose, onConfirm, tenantAdmins }) => {
const [mode, setMode] = useState("link"); // link | manual
const [pwd, setPwd] = useState({ next:"", confirm:"" });
useEffect(() => { if (target) { setMode("link"); setPwd({next:"",confirm:""}); } }, [target]);
if (!target) return null;
const admin = tenantAdmins?.[target.id] || TENANT_ADMIN_USERS[target.id];
const canManual = pwd.next.length >= 6 && pwd.next === pwd.confirm;
return (
ยกเลิก
{mode === "link"
?
:
}
}>
{admin?.full_name}
{admin?.email}
{mode === "manual" && (
setPwd(p=>({...p, next:e.target.value}))}/>
setPwd(p=>({...p, confirm:e.target.value}))}/>
ผู้ใช้จะถูกบังคับเปลี่ยนรหัสผ่านใหม่เมื่อ login ครั้งถัดไป
)}
{mode === "link" && (
ระบบจะส่งลิงก์รีเซ็ตรหัสผ่านไปยังอีเมล {admin?.email} โดยลิงก์ใช้งานได้ภายใน 24 ชม.
)}
);
};
Object.assign(window, { SuperAdminPortal });