Ma trận Vùng × Vai trò
Mỗi cột là một vai trò · ô chứa thành viên mang vai trò đó tại vùng — gán nhiều người cùng lúc
{[["all", "Tất cả"], ["str", "Kết cấu"], ["mep", "MEP"], ["inf", "Hạ tầng"]].map(([k, l]) => (
))}
| VÙNG TÀI LIỆU |
{ROLE_LIST.map(r => (
{r.name}
|
))}
{folders.map(f => {
const d = depthOf(f);
const stateColor = f.state === "WIP" ? "var(--warn)" : f.state === "Shared" ? "var(--str)" : f.state === "Published" ? "var(--ok)" : null;
const { map, blocked } = membersByRole(f.id);
return (
|
{f.disc && d <= 1 ? : }
{f.name}
{f.state && {f.state}}
{f.owner && }
{blocked.length > 0 && USERS[b].name).join(", ")}`}> {blocked.length}}
|
{ROLE_LIST.map(r => (
{}} /> |
))}
);
})}
avatar mờ = kế thừa từ vùng cha
số người bị chặn rõ ràng tại vùng
Role định nghĩa ở tab Vai trò & Quyền · bấm ô để gán người
);
}
/* ========================================================
4) Tab — Vai trò & Quyền (RBAC matrix)
======================================================== */
function RoleManager() {
const [grants, setGrants] = useState(() => { const m = {}; ROLE_LIST.forEach(r => { m[r.key] = new Set(r.perms); }); return m; });
const toggle = (roleKey, permKey) => setGrants(g => {
const n = { ...g }; const s = new Set(n[roleKey]); s.has(permKey) ? s.delete(permKey) : s.add(permKey); n[roleKey] = s; return n;
});
return (
Thành viên dự án
{members.length} người · {roles.length} vai trò · dữ liệu THẬT của dự án · lớp ① multi-tenant isolation
setQ(e.target.value)} placeholder="Tìm thành viên…" style={{ flex: 1, border: 0, background: "transparent", outline: "none", font: "inherit", fontSize: 13, color: "var(--ink)", minWidth: 0 }} />
| Thành viên | Tài khoản | Vai trò (RBAC) |
|---|
{rows.map(m => {
const tm = TIER_META[m.accountRole] || ["—", "tier-member"];
return (
|
{m.name}
|
{tm[0]} |
{m.roleIds.length ? m.roleIds.map(rid => {roleName(rid)}) : chưa gán} |
);
})}
Bộ môn × Trạng thái là “vùng”; ma trận Vùng × Vai trò & engine đang minh hoạ trên dữ liệu mẫu — nối vùng thật sau theo brief.
);
}
/* ========================================================
6) Tab — Kiểm tra quyền (Inspector)
======================================================== */
function Inspector() {
const [userId, setUserId] = useState("an");
const [docId, setDocId] = useState("d1");
const [action, setAction] = useState("document.view");
const [classGate, setClassGate] = useState(false);
const u = USERS[userId]; const doc = docById(docId);
const res = evaluate(u, action, doc, classGate);
return (
Nhật ký truy cập (Audit)
Bất biến · mọi thay đổi quyền & truy cập nhạy cảm — phục vụ tranh chấp/bàn giao · demo
{[["all", "Tất cả"], ["permission_grant", "Cấp quyền"], ["permission_revoke", "Thu hồi"], ["role_assign", "Gán vai trò"], ["denied_access", "Bị chặn"], ["document_download", "Tải về"]].map(([k, l]) => )}
{rows.map((a, i) => {
const m = EV_META[a.ev]; const Ico = Icon[m.ic];
return (
{USERS[a.actor] ? USERS[a.actor].name : a.actor} · {m.label} · {a.res}
{a.detail}
{a.time}
);
})}
);
}
/* ========================================================
8) Root — tab strip + screen, live Members loader
======================================================== */
const TABS = [
{ id: "matrix", label: "Ma trận quyền", icon: "grid" },
{ id: "roles", label: "Vai trò & quyền", icon: "shield" },
{ id: "members", label: "Thành viên", icon: "users" },
{ id: "inspect", label: "Kiểm tra quyền", icon: "key" },
{ id: "audit", label: "Nhật ký truy cập", icon: "clock" },
];
function AccessControl() {
const [tab, setTab] = useState("matrix");
const auth = (typeof window.useAuthCtx === "function") ? window.useAuthCtx() : null;
const live = !!(auth && auth.user && window.CDE_READY && window.cdeRoles);
const [members, setMembers] = useState(null);
const [roles, setRoles] = useState([]);
useEffect(() => {
let alive = true;
if (!live) { setMembers(null); return; }
Promise.all([window.cdeRoles.membersWithRoles(), window.cdeRoles.list()])
.then(([ms, rs]) => { if (!alive) return; setMembers(ms || []); setRoles(rs || []); })
.catch(e => { console.warn("access live:", e.message); if (alive) setMembers(null); });
return () => { alive = false; };
}, [live]);
const screen = () => {
switch (tab) {
case "matrix": return