feat: ingredient product

src/components/layout/shared/UserDropdown.tsx

@@ -31,6 +31,7 @@ import { useSettings } from '@core/hooks/useSettings'
 import { getLocalizedUrl } from '@/utils/i18n'
 import { useAuthMutation } from '../../../services/mutations/auth'
 import { useAuth } from '../../../contexts/authContext'
+import { CircularProgress } from '@mui/material'
 
 // Styled component for badge content
 const BadgeContentSpan = styled('span')({
@@ -162,8 +163,9 @@ const UserDropdown = () => {
                       endIcon={<i className='tabler-logout' />}
                       onClick={handleUserLogout}
                       sx={{ '& .MuiButton-endIcon': { marginInlineStart: 1.5 } }}
+                      disabled={logout.isPending}
                     >
-                      Logout
+                      Logout {logout.isPending && <CircularProgress size={16} />}
                     </Button>
                   </div>
                 </MenuList>

src/components/layout/vertical/Navigation.tsx

@@ -29,6 +29,8 @@ import { getLocalizedUrl } from '@/utils/i18n'
 
 // Style Imports
 import navigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
+import { useAuth } from '../../../contexts/authContext'
+import SuperAdminVerticalMenu from './SuperAdminVerticalMenu'
 
 type Props = {
   dictionary: Awaited<ReturnType<typeof getDictionary>>
@@ -64,6 +66,8 @@ const Navigation = (props: Props) => {
   const { mode: muiMode, systemMode: muiSystemMode } = useColorScheme()
   const theme = useTheme()
 
+  const { currentUser } = useAuth()
+
   // Refs
   const shadowRef = useRef(null)
 
@@ -129,7 +133,12 @@ const Navigation = (props: Props) => {
         )}
       </NavHeader>
       <StyledBoxForShadow ref={shadowRef} />
-      <VerticalMenu dictionary={dictionary} scrollMenu={scrollMenu} />
+
+      {currentUser?.role === 'superadmin' ? (
+        <SuperAdminVerticalMenu dictionary={dictionary} scrollMenu={scrollMenu} />
+      ) : (
+        <VerticalMenu dictionary={dictionary} scrollMenu={scrollMenu} />
+      )}
     </VerticalNav>
   )
 }

src/components/layout/vertical/SuperAdminVerticalMenu.tsx

@@ -0,0 +1,91 @@
+// Next Imports
+import { useParams } from 'next/navigation'
+
+// MUI Imports
+import { useTheme } from '@mui/material/styles'
+
+// Third-party Imports
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// Type Imports
+import type { getDictionary } from '@/utils/getDictionary'
+import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
+
+// Component Imports
+import { Menu, MenuItem, MenuSection, SubMenu } from '@menu/vertical-menu'
+
+// import { GenerateVerticalMenu } from '@components/GenerateMenu'
+
+// Hook Imports
+import useVerticalNav from '@menu/hooks/useVerticalNav'
+
+// Styled Component Imports
+import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
+
+// Style Imports
+import menuItemStyles from '@core/styles/vertical/menuItemStyles'
+import menuSectionStyles from '@core/styles/vertical/menuSectionStyles'
+
+// Menu Data Imports
+// import menuData from '@/data/navigation/verticalMenuData'
+
+type RenderExpandIconProps = {
+  open?: boolean
+  transitionDuration?: VerticalMenuContextProps['transitionDuration']
+}
+
+type Props = {
+  dictionary: Awaited<ReturnType<typeof getDictionary>>
+  scrollMenu: (container: any, isPerfectScrollbar: boolean) => void
+}
+
+const RenderExpandIcon = ({ open, transitionDuration }: RenderExpandIconProps) => (
+  <StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
+    <i className='tabler-chevron-right' />
+  </StyledVerticalNavExpandIcon>
+)
+
+const SuperAdminVerticalMenu = ({ dictionary, scrollMenu }: Props) => {
+  // Hooks
+  const theme = useTheme()
+  const verticalNavOptions = useVerticalNav()
+  const params = useParams()
+
+  // Vars
+  const { isBreakpointReached, transitionDuration } = verticalNavOptions
+  const { lang: locale } = params
+
+  const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar
+
+  return (
+    // eslint-disable-next-line lines-around-comment
+    /* Custom scrollbar instead of browser scroll, remove if you want browser scroll only */
+    <ScrollWrapper
+      {...(isBreakpointReached
+        ? {
+            className: 'bs-full overflow-y-auto overflow-x-hidden',
+            onScroll: container => scrollMenu(container, false)
+          }
+        : {
+            options: { wheelPropagation: false, suppressScrollX: true },
+            onScrollY: container => scrollMenu(container, true)
+          })}
+    >
+      {/* Incase you also want to scroll NavHeader to scroll with Vertical Menu, remove NavHeader from above and paste it below this comment */}
+      {/* Vertical Menu */}
+      <Menu
+        popoutMenuOffset={{ mainAxis: 23 }}
+        menuItemStyles={menuItemStyles(verticalNavOptions, theme)}
+        renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
+        renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
+        menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
+      >
+        <SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-smart-home' />}>
+          <MenuItem href={`/${locale}/sa/organizations/list`}>{dictionary['navigation'].list}</MenuItem>
+        </SubMenu>
+      </Menu>
+    </ScrollWrapper>
+  )
+}
+
+export default SuperAdminVerticalMenu

src/components/layout/vertical/VerticalMenu.tsx

@@ -91,7 +91,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
         </SubMenu>
         <MenuSection label={dictionary['navigation'].appsPages}>
           <SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-shopping-cart' />}>
-            <MenuItem href={`/${locale}/apps/ecommerce/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem>
+            {/* <MenuItem href={`/${locale}/apps/ecommerce/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem> */}
             <SubMenu label={dictionary['navigation'].products}>
               <MenuItem href={`/${locale}/apps/ecommerce/products/list`}>{dictionary['navigation'].list}</MenuItem>
               <MenuItem className='hidden' href={`/${locale}/apps/ecommerce/products/${params.id}/detail`}>
@@ -122,7 +122,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
                 {dictionary['navigation'].adjustment}
               </MenuItem>
             </SubMenu>
-            <MenuItem href={`/${locale}/apps/ecommerce/settings`}>{dictionary['navigation'].settings}</MenuItem>
+            {/* <MenuItem href={`/${locale}/apps/ecommerce/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
           </SubMenu>
           <SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-sitemap' />}>
             <SubMenu label={dictionary['navigation'].outlet}>