robobyte-front-builder 1.0.19 → 1.0.23

package/src/@core/layouts/components/horizontal/navigation/HorizontalNavGroup.js

@@ -1,352 +0,0 @@
-// ** React Imports
-import { useState, useEffect, Fragment, useContext } from 'react'
-
-// ** Next Import
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-
-// ** MUI Imports
-import Box from '@mui/material/Box'
-import Chip from '@mui/material/Chip'
-import Fade from '@mui/material/Fade'
-import List from '@mui/material/List'
-import Paper from '@mui/material/Paper'
-import Typography from '@mui/material/Typography'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import { styled, useTheme } from '@mui/material/styles'
-import ClickAwayListener from '@mui/material/ClickAwayListener'
-import MuiListItem from '@mui/material/ListItem'
-
-// ** Third Party Imports
-import clsx from 'clsx'
-import { usePopper } from 'react-popper'
-
-// ** Icons Imports
-import ChevronDown from 'mdi-material-ui/ChevronDown'
-import ChevronLeft from 'mdi-material-ui/ChevronLeft'
-import ChevronRight from 'mdi-material-ui/ChevronRight'
-
-// ** Theme Config Import
-import themeConfig from 'src/configs/themeConfig'
-
-// ** Custom Components Imports
-import HorizontalNavItems from './HorizontalNavItems'
-import UserIcon from 'src/layouts/components/UserIcon'
-import Translations from 'src/layouts/components/Translations'
-import CanViewNavGroup from 'src/layouts/components/acl/CanViewNavGroup'
-
-// ** Context Import
-import { SystemContext } from 'src/context/SystemContext'
-
-// ** Utils
-import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
-import { hasActiveChild } from 'src/@core/layouts/utils'
-
-// ** Styled Components
-const ListItem = styled(MuiListItem)(({ theme }) => ({
-  cursor: 'pointer',
-  paddingTop: theme.spacing(2.25),
-  paddingBottom: theme.spacing(2.25),
-  '&:hover': {
-    background: theme.palette.action.hover
-  }
-}))
-
-const NavigationMenu = styled(Paper)(({ theme }) => ({
-  overflowY: 'auto',
-  padding: theme.spacing(2, 0),
-  backgroundColor: theme.palette.background.paper,
-  ...(themeConfig.menuTextTruncate ? { width: 260 } : { minWidth: 260 }),
-  '&::-webkit-scrollbar': {
-    width: 6
-  },
-  '&::-webkit-scrollbar-thumb': {
-    borderRadius: 20,
-    background: hexToRGBA(theme.palette.mode === 'light' ? '#BFBFD5' : '#57596C', 0.6)
-  },
-  '&::-webkit-scrollbar-track': {
-    borderRadius: 20,
-    background: 'transparent'
-  },
-  '& .MuiList-root': {
-    paddingTop: 0,
-    paddingBottom: 0
-  },
-  '& .menu-group.Mui-selected': {
-    borderRadius: 0,
-    backgroundColor: theme.palette.action.hover
-  }
-}))
-
-const HorizontalNavGroup = props => {
-  // ** Props
-  const { item, hasParent, settings } = props
-
-  // ** Hooks & Vars
-  const theme = useTheme()
-  const router = useRouter()
-  const systemContext = useContext(SystemContext)
-  const currentURL = router.pathname
-  const { skin, direction } = settings
-  const { navSubItemIcon, menuTextTruncate, horizontalMenuToggle, horizontalMenuAnimation } = themeConfig
-  const popperOffsetHorizontal = direction === 'rtl' ? 16 : -16
-  const popperPlacement = direction === 'rtl' ? 'bottom-end' : 'bottom-start'
-  const popperPlacementSubMenu = direction === 'rtl' ? 'left-start' : 'right-start'
-
-  // ** States
-  const [menuOpen, setMenuOpen] = useState(false)
-  const [popperElement, setPopperElement] = useState(null)
-  const [anchorEl, setAnchorEl] = useState(null)
-  const [referenceElement, setReferenceElement] = useState(null)
-
-  // ** Resolve friendly URL based on item type
-  const getItemHref = () => {
-    const navType = item.type || (item.viewId ? 'dynamic' : item.path ? 'static' : null)
-
-    // Static route: use path directly
-    if (navType === 'static' && item.path) {
-      return item.path
-    }
-
-    // Dynamic route: use registry for friendly URL
-    if (navType === 'dynamic' && item.viewId) {
-      const registry = systemContext.nav?.registry || {}
-      const view = registry[item.viewId]
-
-      if (view && view.slug) {
-        return `/${view.slug}`
-      }
-
-      // Fallback to viewer route
-      return `/viewer/${item.viewId}`
-    }
-
-    // External route
-    if (navType === 'external' && item.externalUrl) {
-      return item.externalUrl
-    }
-
-    // Fallback: if only viewId exists, try registry first
-    if (item.viewId) {
-      const registry = systemContext.nav?.registry || {}
-      const view = registry[item.viewId]
-
-      if (view && view.slug) {
-        return `/${view.slug}`
-      }
-
-      return `/viewer/${item.viewId}`
-    }
-
-    // Default fallback
-    return item.path || null
-  }
-
-  const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
-    placement: hasParent ? popperPlacementSubMenu : popperPlacement,
-    modifiers: [
-      {
-        enabled: true,
-        name: 'offset',
-        options: {
-          offset: hasParent ? [-8, 15] : [popperOffsetHorizontal, 5]
-        }
-      }
-    ]
-  })
-
-  const handleGroupOpen = event => {
-    setAnchorEl(event.currentTarget)
-    setMenuOpen(true)
-    update ? update() : null
-  }
-
-  const handleGroupClose = () => {
-    setAnchorEl(null)
-    setMenuOpen(false)
-  }
-
-  const handleGroupItemClick = event => {
-    // Check if group has a clickable path/viewId
-    const href = getItemHref()
-
-    // If clicking on chevron icon, toggle menu
-    if (event.target.closest('.chevron-icon')) {
-      if (anchorEl) {
-        handleGroupClose()
-      } else {
-        handleGroupOpen(event)
-      }
-      return
-    }
-
-    // If group has a path and not an external link, navigate
-    if (href && item.type !== 'external') {
-      router.push(href)
-      return
-    }
-
-    // If external link, open in new tab
-    if (item.type === 'external' && item.externalUrl) {
-      window.open(item.externalUrl, item.openInNewTab !== false ? '_blank' : '_self')
-      return
-    }
-
-    // Otherwise, toggle menu (for click mode)
-    if (horizontalMenuToggle === 'click') {
-      if (anchorEl) {
-        handleGroupClose()
-      } else {
-        handleGroupOpen(event)
-      }
-    }
-  }
-
-  const handleChevronClick = (event) => {
-    event.stopPropagation()
-    if (anchorEl) {
-      handleGroupClose()
-    } else {
-      handleGroupOpen(event)
-    }
-  }
-
-  useEffect(() => {
-    handleGroupClose()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.asPath])
-  const IconTag = item.icon ? item.icon : navSubItemIcon
-  const ToggleIcon = direction === 'rtl' ? ChevronLeft : ChevronRight
-  const WrapperCondition = horizontalMenuToggle === 'click'
-  const MainWrapper = WrapperCondition ? ClickAwayListener : 'div'
-  const ChildWrapper = WrapperCondition ? 'div' : Fragment
-  const AnimationWrapper = horizontalMenuAnimation ? Fade : Fragment
-
-  const childMenuGroupStyles = () => {
-    if (attributes && attributes.popper) {
-      if (direction === 'ltr') {
-        if (attributes.popper['data-popper-placement'] === 'right-start') {
-          return 'left'
-        }
-        if (attributes.popper['data-popper-placement'] === 'left-start') {
-          return 'right'
-        }
-      } else {
-        if (attributes.popper['data-popper-placement'] === 'right-start') {
-          return 'right'
-        }
-        if (attributes.popper['data-popper-placement'] === 'left-start') {
-          return 'left'
-        }
-      }
-    }
-  }
-
-  return (
-    <CanViewNavGroup navGroup={item}>
-      <MainWrapper {...(WrapperCondition ? { onClickAway: handleGroupClose } : { onMouseLeave: handleGroupClose })}>
-        <ChildWrapper>
-          <List component='div' sx={{ py: skin === 'bordered' ? 2.625 : 2.75 }}>
-            <ListItem
-              aria-haspopup='true'
-              {...(WrapperCondition ? {} : { onMouseEnter: handleGroupOpen })}
-              className={clsx('menu-group', { 'Mui-selected': hasActiveChild(item, currentURL) })}
-              onClick={handleGroupItemClick}
-              sx={{
-                ...(menuOpen ? { backgroundColor: theme.palette.action.hover } : {}),
-                ...(!hasParent
-                  ? {
-                    borderRadius: '8px',
-                    '&.Mui-selected': {
-                      backgroundColor: theme.palette.primary.main,
-                      '& .MuiTypography-root, & .MuiListItemIcon-root, & .MuiSvgIcon-root': {
-                        color: 'common.white'
-                      }
-                    }
-                  }
-                  : {})
-              }}
-            >
-              <Box
-                sx={{
-                  width: '100%',
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between'
-                }}
-                ref={setReferenceElement}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    flexDirection: 'row',
-                    ...(menuTextTruncate && { overflow: 'hidden' })
-                  }}
-                >
-                  <ListItemIcon sx={{ mr: hasParent ? 3 : 2.5, color: 'text.primary' }}>
-                    <UserIcon
-                      icon={IconTag}
-                      componentType='horizontal-menu'
-                      iconProps={{ sx: IconTag === navSubItemIcon ? { fontSize: '0.5rem' } : {} }}
-                    />
-                  </ListItemIcon>
-                  <Typography {...(menuTextTruncate && { noWrap: true })}>
-                    <Translations text={item.title} />
-                  </Typography>
-                </Box>
-                <Box sx={{ ml: 1.5, display: 'flex', alignItems: 'center' }}>
-                  {item.badgeContent ? (
-                    <Chip
-                      size='small'
-                      label={item.badgeContent}
-                      color={item.badgeColor || 'primary'}
-                      sx={{ mr: 0.75, '& .MuiChip-label': { px: 2.5, lineHeight: 1.385, textTransform: 'capitalize' } }}
-                    />
-                  ) : null}
-                  <Box className='chevron-icon' onClick={handleChevronClick}>
-                    {hasParent ? (
-                      <ToggleIcon sx={{ color: 'text.secondary', cursor: 'pointer' }} />
-                    ) : (
-                      <ChevronDown sx={{ color: 'text.secondary', cursor: 'pointer' }} />
-                    )}
-                  </Box>
-                </Box>
-              </Box>
-            </ListItem>
-            <AnimationWrapper {...(horizontalMenuAnimation && { in: menuOpen, timeout: { exit: 300, enter: 400 } })}>
-              <Box
-                style={styles.popper}
-                ref={setPopperElement}
-                {...attributes.popper}
-                sx={{
-                  zIndex: theme.zIndex.appBar,
-                  ...(!horizontalMenuAnimation && { display: menuOpen ? 'block' : 'none' }),
-                  pl: childMenuGroupStyles() === 'left' ? (skin === 'bordered' ? 1.5 : 1.25) : 0,
-                  pr: childMenuGroupStyles() === 'right' ? (skin === 'bordered' ? 1.5 : 1.25) : 0,
-                  ...(hasParent ? { position: 'fixed !important' } : { pt: skin === 'bordered' ? 5.25 : 5.5 })
-                }}
-              >
-                <NavigationMenu
-                  sx={{
-                    ...(hasParent
-                      ? { overflowX: 'visible', maxHeight: 'calc(100vh - 21rem)' }
-                      : { maxHeight: 'calc(100vh - 13rem)' }),
-                    ...(skin === 'bordered'
-                      ? { boxShadow: theme.shadows[0], border: `1px solid ${theme.palette.divider}` }
-                      : { boxShadow: theme.shadows[4] })
-                  }}
-                >
-                  <HorizontalNavItems {...props} hasParent horizontalNavItems={item.children} />
-                </NavigationMenu>
-              </Box>
-            </AnimationWrapper>
-          </List>
-        </ChildWrapper>
-      </MainWrapper>
-    </CanViewNavGroup>
-  )
-}
-
-export default HorizontalNavGroup

package/src/@core/layouts/components/horizontal/navigation/HorizontalNavItems.js

@@ -1,21 +0,0 @@
-// ** Custom Navigation Components
-import HorizontalNavLink from './HorizontalNavLink'
-import HorizontalNavGroup from './HorizontalNavGroup'
-
-const resolveComponent = item => {
-  if (item.children) return HorizontalNavGroup
-
-  return HorizontalNavLink
-}
-
-const HorizontalNavItems = props => {
-  const RenderMenuItems = props.horizontalNavItems?.map((item, index) => {
-    const TagName = resolveComponent(item)
-
-    return <TagName {...props} key={index} item={item} />
-  })
-
-  return <>{RenderMenuItems}</>
-}
-
-export default HorizontalNavItems

package/src/@core/layouts/components/horizontal/navigation/HorizontalNavLink.js

@@ -1,195 +0,0 @@
-// ** React Imports
-import { Fragment, useContext } from 'react'
-
-// ** Next Imports
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-
-// ** MUI Imports
-import Box from '@mui/material/Box'
-import Chip from '@mui/material/Chip'
-import List from '@mui/material/List'
-import { styled } from '@mui/material/styles'
-import Typography from '@mui/material/Typography'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import MuiListItem from '@mui/material/ListItem'
-
-// ** Third Party Imports
-import clsx from 'clsx'
-
-// ** Theme Config Import
-import themeConfig from 'src/configs/themeConfig'
-
-// ** Custom Components Imports
-import UserIcon from 'src/layouts/components/UserIcon'
-import Translations from 'src/layouts/components/Translations'
-import CanViewNavLink from 'src/layouts/components/acl/CanViewNavLink'
-
-// ** Context Import
-import { SystemContext } from 'src/context/SystemContext'
-
-// ** Util Import
-import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
-
-const ListItem = styled(MuiListItem)(({ theme }) => ({
-  width: 'auto',
-  paddingTop: theme.spacing(2.25),
-  color: theme.palette.text.primary,
-  paddingBottom: theme.spacing(2.25),
-  '&:hover': {
-    backgroundColor: theme.palette.action.hover
-  },
-  '&.active, &.active:hover': {
-    backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08)
-  },
-  '&.active .MuiTypography-root, &.active .MuiListItemIcon-root': {
-    color: theme.palette.primary.main
-  }
-}))
-
-const HorizontalNavLink = props  => {
-  // ** Props
-  const { item, settings, hasParent } = props
-
-  // ** Hook & Vars
-  const router = useRouter()
-  const systemContext = useContext(SystemContext)
-  const { navSubItemIcon, menuTextTruncate } = themeConfig
-  const IconTag = item.icon ? item.icon : navSubItemIcon
-  const Wrapper = !hasParent ? List : Fragment
-
-  // ** Resolve friendly URL based on item type
-  const getItemHref = () => {
-    const navType = item.type || (item.viewId ? 'dynamic' : item.path ? 'static' : null)
-
-    // Static route: use path directly
-    if (navType === 'static' && item.path) {
-      return item.path
-    }
-
-    // Dynamic route: use registry for friendly URL
-    if (navType === 'dynamic' && item.viewId) {
-      const registry = systemContext.nav?.registry || {}
-      const view = registry[item.viewId]
-
-      if (view && view.slug) {
-        return `/${view.slug}`
-      }
-
-      // Fallback to viewer route
-      return `/viewer/${item.viewId}`
-    }
-
-    // External route
-    if (navType === 'external' && item.externalUrl) {
-      return item.externalUrl
-    }
-
-    // Fallback: if only viewId exists, try registry first
-    if (item.viewId) {
-      const registry = systemContext.nav?.registry || {}
-      const view = registry[item.viewId]
-
-      if (view && view.slug) {
-        return `/${view.slug}`
-      }
-
-      return `/viewer/${item.viewId}`
-    }
-
-    // Default fallback
-    return item.path || '/'
-  }
-
-  const handleURLQueries = () => {
-    if (Object.keys(router.query).length && item.path) {
-      const arr = Object.keys(router.query)
-
-      return router.asPath.includes(item.path) && router.asPath.includes(router.query[arr[0]])
-    }
-  }
-
-  const isNavLinkActive = () => {
-    const href = getItemHref()
-    if (router.pathname === item.path || router.asPath === href || handleURLQueries()) {
-      return true
-    } else {
-      return false
-    }
-  }
-
-  const handleClick = (e) => {
-    if (item.path === undefined && !item.viewId) {
-      e.preventDefault()
-      e.stopPropagation()
-      return
-    }
-
-    // Handle external links
-    if (item.type === 'external' && item.externalUrl) {
-      e.preventDefault()
-      window.open(item.externalUrl, item.openInNewTab !== false ? '_blank' : '_self')
-    }
-  }
-
-  return (
-    <CanViewNavLink navLink={item}>
-      <Wrapper {...(!hasParent ? { component: 'div', sx: { py: settings.skin === 'bordered' ? 2.625 : 2.75 } } : {})}>
-        <Link href={getItemHref()} passHref>
-          <ListItem
-            component={'a'}
-            disabled={item.disabled}
-            className={clsx({ active: isNavLinkActive()})}
-            target={item.openInNewTab ? '_blank' : undefined}
-            onClick={handleClick}
-            sx={{
-              ...(item.disabled ? { pointerEvents: 'none' } : { cursor: 'pointer' }),
-              ...(!hasParent
-                ? {
-                    borderRadius: '8px',
-                    '&.active, &.active:hover': {
-                      backgroundColor: theme => theme.palette.primary.main,
-                      '& .MuiTypography-root, & .MuiListItemIcon-root': {
-                        color: 'common.white'
-                      }
-                    }
-                  }
-                : {})
-            }}
-          >
-            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  ...(menuTextTruncate && { overflow: 'hidden' })
-                }}
-              >
-                <ListItemIcon sx={{ mr: hasParent ? 3 : 2.5, color: 'text.primary' }}>
-                  <UserIcon
-                    icon={IconTag}
-                    componentType='horizontal-menu'
-                    iconProps={{ sx: IconTag === navSubItemIcon ? { fontSize: '0.5rem' } : {} }}
-                  />
-                </ListItemIcon>
-                <Typography {...(menuTextTruncate && { noWrap: true })}>
-                  <Translations text={item.title} />
-                </Typography>
-              </Box>
-              {item.badgeContent ? (
-                <Chip
-                  size='small'
-                  label={item.badgeContent}
-                  color={item.badgeColor || 'primary'}
-                  sx={{ ml: 1.5, '& .MuiChip-label': { px: 2.5, lineHeight: 1.385, textTransform: 'capitalize' } }}
-                />
-              ) : null}
-            </Box>
-          </ListItem>
-        </Link>
-      </Wrapper>
-    </CanViewNavLink>
-  )
-}
-
-export default HorizontalNavLink

package/src/@core/layouts/components/horizontal/navigation/index.js

@@ -1,31 +0,0 @@
-// ** MUI Imports
-import Box from '@mui/material/Box'
-
-// ** Config Import
-import themeConfig from 'src/configs/themeConfig'
-
-// ** Utils
-// import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
-// ** Menu Components
-import HorizontalNavItems from './HorizontalNavItems'
-
-const Navigation = props => {
-  return (
-    <Box
-      className='menu-content'
-      sx={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        '& > *': {
-          '&:not(:last-child)': { mr: 2 },
-          ...(themeConfig.menuTextTruncate && { maxWidth: 220 })
-        }
-      }}
-    >
-      <HorizontalNavItems {...props} />
-    </Box>
-  )
-}
-
-export default Navigation

package/src/@core/layouts/components/shared-components/LanguageDropdown.js

@@ -1,96 +0,0 @@
-// ** React Imports
-import { Fragment, useEffect, useState } from 'react'
-
-// ** MUI Imports
-import Menu from '@mui/material/Menu'
-import MenuItem from '@mui/material/MenuItem'
-import IconButton from '@mui/material/IconButton'
-
-// ** Icons Imports
-import Translate from 'mdi-material-ui/Translate'
-
-// ** Third Party Import
-import { useTranslation } from 'react-i18next'
-
-const LanguageDropdown = ({ settings, saveSettings }) => {
-  // ** State
-  const [anchorEl, setAnchorEl] = useState(null)
-
-  // ** Hook
-  const { i18n } = useTranslation()
-
-  // ** Vars
-  const { direction } = settings
-  useEffect(() => {
-    if (i18n.language === 'ar' && direction === 'ltr') {
-      saveSettings({ ...settings, direction: 'ltr' })
-    } else if (i18n.language === 'ar' || direction === 'rtl') {
-      saveSettings({ ...settings, direction: 'rtl' })
-    } else {
-      saveSettings({ ...settings, direction: 'ltr' })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [i18n.language, direction])
-
-  const handleLangDropdownOpen = event => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleLangDropdownClose = () => {
-    setAnchorEl(null)
-  }
-
-  const handleLangItemClick = lang => {
-    i18n.changeLanguage(lang)
-    handleLangDropdownClose()
-  }
-
-  return (
-    <Fragment>
-      <IconButton color='inherit' aria-haspopup='true' aria-controls='customized-menu' onClick={handleLangDropdownOpen}>
-        <Translate />
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleLangDropdownClose}
-        sx={{ '& .MuiMenu-paper': { mt: 4, minWidth: 130 } }}
-        anchorOrigin={{ vertical: 'bottom', horizontal: direction === 'ltr' ? 'right' : 'left' }}
-        transformOrigin={{ vertical: 'top', horizontal: direction === 'ltr' ? 'right' : 'left' }}
-      >
-        <MenuItem
-          sx={{ py: 2 }}
-          selected={i18n.language === 'en'}
-          onClick={() => {
-            handleLangItemClick('en')
-            saveSettings({ ...settings, direction: 'ltr' })
-          }}
-        >
-          English
-        </MenuItem>
-        <MenuItem
-          sx={{ py: 2 }}
-          selected={i18n.language === 'fr'}
-          onClick={() => {
-            handleLangItemClick('fr')
-            saveSettings({ ...settings, direction: 'ltr' })
-          }}
-        >
-          French
-        </MenuItem>
-        <MenuItem
-          sx={{ py: 2 }}
-          selected={i18n.language === 'ar'}
-          onClick={() => {
-            handleLangItemClick('ar')
-            saveSettings({ ...settings, direction: 'rtl' })
-          }}
-        >
-          Arabic
-        </MenuItem>
-      </Menu>
-    </Fragment>
-  )
-}
-
-export default LanguageDropdown