/* eslint-disable */ // ============================================================ // SETTINGS & RBAC MANAGER (PartialView: "RBACManager") // ACTION LIBRARY (PartialView: "ActionLibrary") // // Two admin-only pages that drive the entire framework configuration. // ============================================================ const { useState: useNv_S, useMemo: useNv_M, useEffect: useNv_E } = React; // ---- Curated icon set users pick from in the menu editor ---- const MENU_ICONS = [ "layoutDashboard", "sparkles", "zap", "users", "building", "inbox", "bookOpen", "layers", "shield", "sliders", "database", "barChart", "diamond", "pulse", "calendar", "tag", "rocket", "globe", ]; const IconPicker = ({ value, onChange }) => { const [open, setOpen] = useNv_S(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [open]); return (
{open && (
Icon
{MENU_ICONS.map((n) => ( ))}
)}
); }; // ============================================================ // MENU ITEM ROW // ============================================================ const MenuItemRow = ({ item, action, idx, total, onChange, onMove, onRemove }) => { const set = (patch) => onChange({ ...item, ...patch }); return (
set({ visible: v })} />
{item.label}
actionId {item.actionId} · {action?.PartialView || "?"}
{!item.locked && ( )}
set({ icon: v })} /> set({ label: v })} /> set({ section: v })} placeholder="(none)" />
); }; // ============================================================ // RBAC MANAGER PAGE // ============================================================ const RBACManagerPage = ({ onToast, rbac, setRbac, menus, setMenus, theme, setTheme }) => { const [selectedRole, setSelectedRole] = useNv_S("Admin"); const allActions = useNv_M(() => mockApi.state.getAllActions(), []); const persona = PERSONAS[selectedRole]; const items = menus[selectedRole] || []; // Persist on changes const setMenuItems = async (next) => { setMenus({ ...menus, [selectedRole]: next }); await mockApi.putRoleMenu(selectedRole, next).catch(() => {}); }; const updateItem = (id, next) => setMenuItems(items.map((it) => (it.id === id ? next : it))); const moveItem = (idx, dir) => { const arr = [...items]; const t = idx + dir; if (t < 0 || t >= arr.length) return; [arr[idx], arr[t]] = [arr[t], arr[idx]]; setMenuItems(arr); }; const removeItem = (id) => setMenuItems(items.filter((it) => it.id !== id)); // Actions available to add (PartialView page-like, not already in menu) const pageActions = Object.values(allActions).filter((a) => ["Grid", "Dashboard", "RBACManager", "ActionLibrary"].includes(a.PartialView)); const availableToAdd = pageActions.filter((a) => !items.find((it) => it.actionId === a.ActionId)); const addAction = async (a) => { const next = [...items, { id: `m-${a.ActionId}`, actionId: a.ActionId, label: a.ActionTitle || a.ActionName, icon: a.PartialView === "Dashboard" ? "layoutDashboard" : a.PartialView === "Grid" ? "layers" : "sliders", section: a.PartialView === "RBACManager" || a.PartialView === "ActionLibrary" ? "Administration" : "Workspace", visible: true, }]; setMenuItems(next); // Also grant RBAC if not yet if (!rbac[selectedRole]?.has(a.ActionId)) { const updated = { ...rbac, [selectedRole]: new Set(rbac[selectedRole] || []).add(a.ActionId) }; setRbac(updated); await mockApi.putRoleAccess(selectedRole, a.ActionId, true); } onToast({ kind: "ok", text: `Added ${a.ActionName} to ${selectedRole}'s menu` }); }; return (
{/* Role picker bar */}
Configure for role
{ROLES.map((r) => { const active = r.id === selectedRole; return ( ); })}
{(rbac[selectedRole] || new Set()).size} actions allowed · {items.filter((i) => i.visible).length} in menu
Menu order
{items.length === 0 ? (
No menu items for this role
Add actions from the panel on the right.
) : items.map((it, idx) => ( updateItem(it.id, next)} onMove={moveItem} onRemove={() => removeItem(it.id)} /> ))} {/* Add action */} {availableToAdd.length > 0 && (
Add page to menu
{availableToAdd.map((a) => ( ))}
)}
Live sidebar preview · {persona.name}
This is exactly what {persona.name} sees when signed in as {selectedRole}. Switch the preview user (bottom-right) to feel it.
); }; // ---- Sidebar mini-preview ---- const SidebarMiniPreview = ({ menu, persona }) => { const sections = []; (menu || []).forEach((it) => { if (!it.visible) return; const key = it.section || ""; let s = sections.find((x) => x.label === key); if (!s) { s = { label: key, items: [] }; sections.push(s); } s.items.push(it); }); return (
Green House
workspace
{sections.length === 0 &&
No visible items
} {sections.map((sec, i) => (
{sec.label &&
{sec.label}
} {sec.items.map((it, j) => (
{it.label}
))}
))}
{persona.name}
{persona.title}
); }; // ============================================================ // ACTION LIBRARY PAGE // ============================================================ const ActionLibraryPage = ({ onToast, rbac, setRbac }) => { const [actions, setActions] = useNv_S(() => mockApi.state.getAllActions()); const [filterKind, setFilterKind] = useNv_S("all"); const [search, setSearch] = useNv_S(""); const [selectedId, setSelectedId] = useNv_S(20); // default to Problems grid const selected = actions[selectedId]; const kinds = useNv_M(() => { const m = { all: 0 }; Object.values(actions).forEach((a) => { m[a.PartialView] = (m[a.PartialView] || 0) + 1; m.all++; }); return m; }, [actions]); const filtered = useNv_M(() => { const q = search.toLowerCase(); return Object.values(actions).filter((a) => { if (filterKind !== "all" && a.PartialView !== filterKind) return false; if (!q) return true; return [a.ActionName, a.ActionTitle, String(a.ActionId), a.PartialView].some((v) => String(v || "").toLowerCase().includes(q)); }).sort((a, b) => a.ActionId - b.ActionId); }, [actions, filterKind, search]); return (
setSearch(e.target.value)} placeholder="Search actions…" className="w-full h-8 pl-8 pr-3 text-[13px] focus:outline-none focus:border-[var(--primary)]" style={{ background: "var(--surface-2)", color: "var(--ink)", border: "1px solid var(--border)", borderRadius: 7 }} />
{[["all","All"],["Grid","Grids"],["Dashboard","Dashboards"],["KPICardWidget","KPIs"],["ToolbarButton","Toolbar"],["RowAction","Row"],["BulkAction","Bulk"],["Detail","Detail"],["DetailTab","Tabs"]].map(([k, label]) => { const active = filterKind === k; const n = kinds[k] || 0; if (n === 0 && k !== "all") return null; return ( ); })}
{filtered.map((a) => ( ))}
{!selected ? ( ) : ( <>
actionId {selected.ActionId}
{selected.ActionTitle || selected.ActionName}
PartialView: {selected.PartialView}
{ if (next.MergedParams) { await mockApi.putActionConfig(selected.ActionId, next.MergedParams); } setActions({ ...actions, [selected.ActionId]: next }); }} onToast={onToast} />
)}
); }; // Small per-role visibility dots in the action library list const RbacDots = ({ actionId, rbac }) => (
{ROLES.map((r) => { const has = rbac[r.id]?.has(actionId); return ( ); })}
); Object.assign(window, { RBACManagerPage, ActionLibraryPage, SidebarMiniPreview });