Move menu items to new System Settings section

frontend/src/components/AsideMenuItem.tsx

@@ -14,6 +14,15 @@ type Props = {
 };
 
 const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+  // Render section header for System Settings
+  if (item.isSectionHeader) {
+    return (
+      <li className="px-3 py-2 uppercase text-xs font-semibold text-gray-500">
+        {item.label}
+      </li>
+    );
+  }
+
   const [isLinkActive, setIsLinkActive] = useState(false);
   const [isDropdownActive, setIsDropdownActive] = useState(false);
 

frontend/src/interfaces/index.ts

@@ -12,6 +12,8 @@ export type MenuAsideItem = {
   color?: ColorButtonKey;
   isLogout?: boolean;
   withDevider?: boolean;
+  isSectionHeader?: boolean;
+
   menu?: MenuAsideItem[];
   permissions?: string | string[];
 };

frontend/src/menuAside.ts

@@ -8,14 +8,6 @@ const menuAside: MenuAsideItem[] = [
     label: 'Dashboard',
   },
 
-  {
-    href: '/users/users-list',
-    label: 'Users',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS',
-  },
   {
     href: '/batches/batches-list',
     label: 'Batches',
@@ -49,6 +41,21 @@ const menuAside: MenuAsideItem[] = [
         : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_SCANNED_DOCUMENTS',
   },
+  {
+    href: '/profile',
+    label: 'Profile',
+    icon: icon.mdiAccountCircle,
+  },
+
+  { withDevider: true, permissions: 'READ_USERS' },
+  { label: 'System Settings', isSectionHeader: true, permissions: 'READ_USERS' },
+  {
+    href: '/api-docs',
+    target: '_blank',
+    label: 'API Reference',
+    icon: icon.mdiFileCode,
+    permissions: 'READ_API_DOCS',
+  },
   {
     href: '/roles/roles-list',
     label: 'Roles',
@@ -65,19 +72,17 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
     permissions: 'READ_PERMISSIONS',
   },
-  {
-    href: '/profile',
-    label: 'Profile',
-    icon: icon.mdiAccountCircle,
-  },
+
 
   {
-    href: '/api-docs',
-    target: '_blank',
-    label: 'Swagger API',
-    icon: icon.mdiFileCode,
-    permissions: 'READ_API_DOCS',
+    href: '/users/users-list',
+    label: 'Users',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiAccountGroup ?? icon.mdiTable,
+    permissions: 'READ_USERS',
   },
+
 ];
 
 export default menuAside;