@xeplr/ui-account 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-account",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Account UI: auth, profile, RBAC admin, tenant management — React controller hooks and designs",
   "type": "module",
   "main": "src/index.js",
@@ -33,5 +33,8 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.js"
   }
 }

package/src/adminApi.js

@@ -37,3 +37,24 @@ export function toggleModuleRole({ module, action, roleId, assign }) {
     body: JSON.stringify({ module, action, roleId, assign }),
   });
 }
+
+// ── Menu items: key, label, order, visibility (Super Admin) ──────────────
+
+/** Every menu item, hidden ones included: [{ name, label, shown, sortOrder, isHidden, isPublic }]. */
+export function listMenuItems() {
+  return authFetch('/auth/api/admin/menu-items');
+}
+
+/** Rename / reorder / hide by key: [{ name, label?, sortOrder?, isHidden? }]. */
+export function saveMenuItems(items) {
+  return authFetch('/auth/api/admin/menu-items', { method: 'POST', body: JSON.stringify({ items }) });
+}
+
+/** A new item — e.g. a form added to the menu: { name: key, label }. */
+export function addMenuItem(item) {
+  return authFetch('/auth/api/admin/menu-items/add', { method: 'POST', body: JSON.stringify(item) });
+}
+
+export function removeMenuItem(name) {
+  return authFetch('/auth/api/admin/menu-items/remove', { method: 'POST', body: JSON.stringify({ name }) });
+}

package/src/designs/AccountMenu.jsx

@@ -52,8 +52,8 @@ function AccountMenu({
 
           {(accountItems || []).map(function(item) {
             return (
-              <Link key={item.name} to={item.path} className="xeplr-nav-account-item" role="menuitem" onClick={closeAccount}>
-                {item.name}
+              <Link key={item.key || item.name} to={item.path} className="xeplr-nav-account-item" role="menuitem" onClick={closeAccount}>
+                {item.label || item.name}
               </Link>
             );
           })}

package/src/designs/NavDrawer.jsx

@@ -55,7 +55,7 @@ function NavDrawer({
   var visibleItems = useMemo(function() {
     if (!drawerOpen || !query.trim()) return drawerItems;
     var q = query.trim().toLowerCase();
-    return drawerItems.filter(function(item) { return item.name.toLowerCase().indexOf(q) !== -1; });
+    return drawerItems.filter(function(item) { return String(item.label || item.name).toLowerCase().indexOf(q) !== -1; });
   }, [drawerItems, query, drawerOpen]);
 
   var buckets = useMemo(function() { return bucketItems(visibleItems); }, [visibleItems]);
@@ -74,13 +74,13 @@ function NavDrawer({
     var badge = item.badge === 0 || item.badge == null || item.badge === '' ? null : item.badge;
     return (
       <button
-        key={item.name}
+        key={item.key || item.name}
         type="button"
         className={'xeplr-nav-drawer-link' + (badge ? ' xeplr-nav-drawer-link-badged' : '')}
         onClick={item.clickHandler}
         // The count belongs in the tooltip too — the collapsed dot says
         // "something", and the hover has to say how many.
-        title={badge ? item.name + ' (' + badge + ')' : item.name}
+        title={badge ? (item.label || item.name) + ' (' + badge + ')' : (item.label || item.name)}
       >
         {item.icon && (
           <span className="xeplr-nav-drawer-icon">
@@ -88,7 +88,7 @@ function NavDrawer({
             {badge && !drawerOpen && <span className="xeplr-nav-drawer-dot" aria-hidden="true" />}
           </span>
         )}
-        {drawerOpen && <span className="xeplr-nav-drawer-label">{item.name}</span>}
+        {drawerOpen && <span className="xeplr-nav-drawer-label">{item.label || item.name}</span>}
         {drawerOpen && badge && <span className="xeplr-nav-drawer-badge">{badge}</span>}
       </button>
     );

package/src/index.js

@@ -41,7 +41,8 @@ export { ProtectedRoute } from './ProtectedRoute.jsx';
 export { AccessGuard } from './AccessGuard.jsx';
 
 // Admin API (model layer for RBAC management)
-export { getUsers, getRoles, getAccessItems, toggleUserRole, toggleAccessRole, toggleModuleRole } from './adminApi.js';
+export { getUsers, getRoles, getAccessItems, toggleUserRole, toggleAccessRole, toggleModuleRole, listMenuItems, saveMenuItems, addMenuItem, removeMenuItem } from './adminApi.js';
+export { labelMenuItems } from './menuLabels.js';
 export { getMasterItems, saveMasterItem, deleteMasterItem, MASTER_TYPES } from './masterApi.js';
 
 // Design validation (use when building custom designs)

package/src/menuLabels.js

@@ -0,0 +1,40 @@
+// MENU KEYS AND LABELS — no React.
+//
+// An app lists its menu items by KEY (drawerItems: [{ key: 'Tasks', icon, … }]).
+// The server says which keys this person may see, what each is CALLED, and in
+// what order (access.menuItems — renamed from the app without touching code).
+//
+// `name` is still accepted as the key, so drawer catalogs written before keys
+// existed keep working; with no label from the server, the item's own `label`
+// or its key is shown.
+
+/**
+ * @param catalog  the app's items: [{ key | name, label?, icon?, … }]
+ * @param access   { menus: [keys], menuItems?: [{ name, label, sortOrder }] }
+ * @returns the items this person may see, each with `key` and `label`, in the server's order
+ */
+export function labelMenuItems(catalog, access) {
+  var allowed = (access && access.menus) || [];
+  var fromServer = {};
+  var position = {};
+  ((access && access.menuItems) || []).forEach(function(m, i) {
+    if (!m || !m.name) return;
+    fromServer[m.name] = m.label;
+    position[m.name] = i;
+  });
+
+  return (catalog || [])
+    .map(function(item, i) {
+      var key = item.key || item.name;
+      return { item: item, key: key, index: i };
+    })
+    .filter(function(x) { return x.key && allowed.indexOf(x.key) !== -1; })
+    .sort(function(a, b) {
+      var pa = position[a.key] === undefined ? Infinity : position[a.key];
+      var pb = position[b.key] === undefined ? Infinity : position[b.key];
+      return pa !== pb ? pa - pb : a.index - b.index;
+    })
+    .map(function(x) {
+      return Object.assign({}, x.item, { key: x.key, label: fromServer[x.key] || x.item.label || x.key });
+    });
+}

package/src/useNavController.js

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { labelMenuItems } from './menuLabels.js';
 import { useAccessStrict } from './AccessContext.jsx';
 import { authPath } from './authRoutes.jsx';
 
@@ -180,21 +181,20 @@ export function useNavController(props) {
   // Settings dropdown, in render order: app overrides first, then the fixed
   // builtin section — role-filtered the same way for both.
   var accountItems = useMemo(function() {
-    var overrides = (props.settingsOverrides || [])
-      .filter(function(item) { return allowedMenus.indexOf(item.name) !== -1; });
+    var overrides = labelMenuItems(props.settingsOverrides, access);
     var builtin = BUILTIN_SETTINGS_ITEMS
       .filter(function(item) { return allowedMenus.indexOf(item.menuName) !== -1; })
       .map(function(item) { return { name: item.menuName, path: authPath(item.authKey) }; });
     return overrides.concat(builtin);
-  }, [allowedMenus, props.settingsOverrides]);
+  }, [allowedMenus, access, props.settingsOverrides]);
 
   var notificationsAllowed = allowedMenus.indexOf(NOTIFICATIONS_MENU_NAME) !== -1;
 
-  // Role-filter the app's own drawer catalog down to what this user can actually see.
+  // Role-filter the app's own drawer catalog down to what this user can see —
+  // matched by KEY, shown by the LABEL the server holds, in the server's order.
   var drawerItems = useMemo(function() {
-    var catalog = props.drawerItems || [];
-    return catalog.filter(function(m) { return allowedMenus.indexOf(m.name) !== -1; });
-  }, [props.drawerItems, allowedMenus]);
+    return labelMenuItems(props.drawerItems, access);
+  }, [props.drawerItems, access]);
 
   return {
     user: accessCtx.user,