feat(frontend): side nav business plan warn

frontend/src/layouts/dashboard/config.js

@@ -7,6 +7,7 @@ import ArrowDownOnSquareStackIcon from '@heroicons/react/24/solid/ArrowDownOnSqu
 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';
 
 export const items = [
@@ -35,10 +36,12 @@ export const items = [
         <RectangleGroupIcon color='gray'/>
       </SvgIcon>
     ),
+    tooltip: 'Upgrade to Business Plan',
     disabled: true,
     children: [
       {
         title: 'Firmware Update',
+        tooltip: 'Upgrade to Business Plan',
         icon: (
           <SvgIcon fontSize="small">
             <ArrowDownOnSquareStackIcon color='gray'/>
@@ -50,6 +53,7 @@ export const items = [
   },
   {
     title: 'Map',
+    tooltip: 'Upgrade to Business Plan',
     icon: (
       <SvgIcon fontSize="small">
         <MapIcon color='gray'/>

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

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import NextLink from 'next/link';
 import PropTypes from 'prop-types';
-import { Box, ButtonBase, Collapse, SvgIcon } from '@mui/material';
+import { Box, ButtonBase, Collapse, SvgIcon, Tooltip } from '@mui/material';
 import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
 import ChevronUpIcon from '@heroicons/react/24/outline/ChevronUpIcon';
 import { usePathname } from 'next/navigation';
 
 export const SideNavItem = (props) => {
-  const { active = false, disabled, external, icon, path, title, children, padleft } = props;
+  const { active = false, disabled, external, icon, path, title, children, padleft, tooltip } = props;
 
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
@@ -43,6 +43,7 @@ export const SideNavItem = (props) => {
 
   return (
     <li>
+      <Tooltip title={tooltip} placement='bottom-end'>
       <ButtonBase
         sx={{
           alignItems: 'center',
@@ -63,6 +64,7 @@ export const SideNavItem = (props) => {
           }
         }}
       >
+        
         {icon && (
           <Box
             component="span"
@@ -137,6 +139,7 @@ export const SideNavItem = (props) => {
           </Box>
         }
       </ButtonBase>
+      </Tooltip>
       <Collapse in={open}>
         {
             children &&
@@ -153,6 +156,7 @@ export const SideNavItem = (props) => {
                       title={child.title}
                       children={child?.children}
                       padleft={padleft + 2}
+                      tooltip={child.tooltip}
                     />
                   );
                 })

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

@@ -133,6 +133,7 @@ export const SideNav = (props) => {
                   title={item.title}
                   children={item?.children}
                   padleft={2}
+                  tooltip={item.tooltip}
                 />
               );
             })}