feat(frontend): add new enterprise modules

frontend/src/layouts/dashboard/config.js

@@ -1,14 +1,16 @@
 import ChartBarIcon from '@heroicons/react/24/solid/ChartBarIcon';
 import CogIcon from '@heroicons/react/24/solid/CogIcon';
 import ChatBubbleLeftRightIcon from '@heroicons/react/24/solid/ChatBubbleLeftRightIcon'
-import MapIcon from '@heroicons/react/24/solid/MapIcon'
 import RectangleGroupIcon from '@heroicons/react/24/solid/RectangleGroupIcon'
 import ArrowDownOnSquareStackIcon from '@heroicons/react/24/solid/ArrowDownOnSquareStackIcon'
 import UserGroupIcon from '@heroicons/react/24/solid/UserGroupIcon'
 import KeyIcon from '@heroicons/react/24/solid/KeyIcon'
 import CpuChip from '@heroicons/react/24/solid/CpuChipIcon';
-import BriefCaseIcon from '@heroicons/react/24/outline/BriefcaseIcon';
 import { SvgIcon } from '@mui/material';
+import FolderIcon from '@heroicons/react/24/solid/FolderIcon';
+import ShieldCheckIcon from '@heroicons/react/24/solid/ShieldCheckIcon';
+import EnvelopeIcon from '@heroicons/react/24/solid/EnvelopeIcon';
+import UserIcon from '@heroicons/react/24/solid/UserIcon';
 
 export const items = [
   {
@@ -48,19 +50,19 @@ export const items = [
           </SvgIcon>
         ),
         disabled: true
-      }
+      },
+      {
+        title: 'Message',
+        tooltip: 'Upgrade to Business Plan',
+        disabled: true,
+        icon: (
+          <SvgIcon fontSize="small">
+           <EnvelopeIcon color='gray'/>
+          </SvgIcon>
+        )
+      },
     ]
   },
-  {
-    title: 'Map',
-    tooltip: 'Upgrade to Business Plan',
-    icon: (
-      <SvgIcon fontSize="small">
-        <MapIcon color='gray'/>
-      </SvgIcon>
-    ),
-    disabled: true
-  },
   {
     title: 'Credentials',
     path: '/credentials',
@@ -71,11 +73,44 @@ export const items = [
     )
   },
   {
-    title: 'Users',
+    title: 'Access Control',
-    path: '/users',
+    disabled: true,
+    tooltip: 'Upgrade to Business Plan',
     icon: (
       <SvgIcon fontSize="small">
-        <UserGroupIcon />
+        <UserGroupIcon color='gray'/>
+      </SvgIcon>
+    ),
+    children: [
+      {
+        title: 'Roles',
+        disabled: true,
+        tooltip: 'Upgrade to Business Plan',
+        icon: (
+          <SvgIcon fontSize="small">
+            <ShieldCheckIcon color='gray'/>
+          </SvgIcon>
+        )
+      },
+      {
+        title: 'Users',
+        disabled: true,
+        tooltip: 'Upgrade to Business Plan',
+        icon: (
+          <SvgIcon fontSize="small">
+           <UserIcon color='gray'/>
+          </SvgIcon>
+        )
+      },
+     ]
+   },
+  {
+    title: 'File  Server',
+    tooltip: 'Upgrade to Business Plan',
+    disabled: true,
+    icon: (
+      <SvgIcon fontSize="small">
+        <FolderIcon color='gray'/>
       </SvgIcon>
     )
   },

frontend/src/layouts/dashboard/side-nav-item.js

@@ -9,7 +9,7 @@ import { usePathname } from 'next/navigation';
 export const SideNavItem = (props) => {
   const { active = false, disabled, external, icon, path, title, children, padleft, tooltip } = props;
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
   const pathname = usePathname();
 
   const isItemActive = (currentPath, itemPath) => {
@@ -64,10 +64,14 @@ export const SideNavItem = (props) => {
           }
         }}
       >
-        
         {icon && (
           <Box
             component="span"
+            onClick={()=>{
+              if (!path){
+                setOpen(!open)
+              }
+            }}
             sx={{
               alignItems: 'center',
               color: 'neutral.400',
@@ -85,6 +89,11 @@ export const SideNavItem = (props) => {
         )}
         <Box
           component="span"
+          onClick={()=>{
+            if (!path){
+              setOpen(!open)
+            }
+          }}
           sx={{
             color: 'neutral.400',
             flexGrow: 1,