robobyte-front-builder 1.0.0

package/src/context/SystemContext.js

@@ -0,0 +1,99 @@
+// ** React Imports
+import {createContext, useContext, useEffect, useState} from 'react'
+import axios from 'axios'
+// ** Next Import
+
+// ** Axios
+
+// ** Config
+import {BaseURL, Endpoints, Services} from 'services/Endpoints'
+import {useJsApiLoader} from '@react-google-maps/api'
+import {AuthContext} from './AuthContext'
+import handleChange from 'services/helper/handleChange'
+// ** Defaults
+
+
+const defaultProvider = {
+  shopId: null,
+  mapLoaded: false,
+  incomeAlarms: false,
+  clutre: 'ar',
+  setClutre: () => String
+}
+const SystemContext = createContext(defaultProvider)
+const SystemProvider = ({children}) => {
+  // ** States
+  const [settings, setSettings] = useState()
+  const [clutre, setClutre] = useState('ar')
+  const [bunny, setBunny] = useState({
+    fileStorageZone: null,
+    documentStorageZone: null,
+    streamLibrary: null
+  })
+  const [navigation, setNavigation] = useState(null)
+  const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: 'AIzaSyBTBN8My6oFJXqt3PmFaMlcVFRlT9jQWrI'
+  })
+  // ** Hooks
+
+  axios.defaults.headers.common = {
+    'Accept-Language': clutre
+  }
+  const auth = useContext(AuthContext)
+  //
+  useEffect(() => {
+    if (localStorage.getItem('accessToken') != null) {
+      handleGetNavigationSettings()
+      console.log(navigation)
+    }
+  }, [auth.accessToken])
+
+  // async function handleGetFileStorageZone() {
+  //   try {
+  //     let response = null
+  //     response = await Services.GetService(Endpoints.Buuny.Get.GetFileStorageZone, false, {})
+  //     if (response) {
+  //       if (response.fileStorageZone?.storageServer === 'local') {
+  //         response.fileStorageZone.storageServer = BaseURL
+  //       }
+  //       handleChange(setBunny, 'fileStorageZone', response.fileStorageZone)
+  //       console.log(response)
+  //       handleChange(setBunny,'streamLibrary', response.videoLibrary)
+  //
+  //     } else {
+  //       handleChange(setBunny, 'fileStorageZone', {storageServer: BaseURL})
+  //     }
+  //   } catch (error) {
+  //     handleChange(setBunny, 'fileStorageZone', {storageServer: BaseURL})
+  //   } finally {
+  //   }
+  // }
+
+  async function handleGetNavigationSettings() {
+    try {
+      let response = null
+      response = await Services.GetService(Endpoints.Navigator.Get.NavigatorSetting, false, {})
+      if (response) {
+        let data = JSON.parse(response.data)
+        console.log(data)
+        setNavigation(data)
+        console.log(response)
+      }
+    } catch (error) {
+
+    } finally {
+    }
+  }
+
+  const values = {
+    mapLoaded: isLoaded,
+    bunny: bunny,
+    settings: settings,
+    nav: navigation
+  }
+
+  return <SystemContext.Provider value={values}>{children}</SystemContext.Provider>
+}
+
+export {SystemContext, SystemProvider}

package/src/hooks/useAuth.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { AuthContext } from 'src/context/AuthContext'
+
+export const useAuth = () => useContext(AuthContext)

package/src/layouts/UserLayout.js

@@ -0,0 +1,94 @@
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+// ** Layout Imports
+// !Do not remove this Layout import
+import Layout from 'src/@core/layouts/Layout'
+
+// ** Navigation Imports
+import VerticalNavItems from 'src/navigation/vertical'
+import HorizontalNavItems from 'src/navigation/horizontal'
+
+// ** Component Import
+// Uncomment the below line (according to the layout type) when using server-side menu
+// import ServerSideVerticalNavItems from './components/vertical/ServerSideNavItems'
+// import ServerSideHorizontalNavItems from './components/horizontal/ServerSideNavItems'
+
+import VerticalAppBarContent from './components/vertical/AppBarContent'
+import HorizontalAppBarContent from './components/horizontal/AppBarContent'
+import { useSettings } from 'src/@core/hooks/useSettings'
+import { Box } from '@mui/system'
+import { Typography } from '@mui/material'
+
+const UserLayout = ({ children }) => {
+  // ** Hooks
+  const { settings, saveSettings } = useSettings()
+
+  /**
+   *  The below variable will hide the current layout menu at given screen size.
+   *  The menu will be accessible from the Hamburger icon only (Vertical Overlay Menu).
+   *  You can change the screen size from which you want to hide the current layout menu.
+   *  Please refer useMediaQuery() hook: https://mui.com/material-ui/react-use-media-query/,
+ ط  *  to know more about what values can be passed to this hook.
+   *  ! Do not change this value unless you know what you are doing. It can break the template.
+   */
+  const hidden = useMediaQuery(theme => theme.breakpoints.down('lg'))
+
+  return (
+    <Layout
+      footerContent={() => (
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Box sx={{
+            display: 'flex', color: 'white', padding: 2, borderRadius: 1, transition: 'transform 0.2s, color 0.3s',
+            '&:hover': {
+              transform: 'scale(1.1) translateY(-2px)',
+              color: '#16a085'
+            }
+          }}>
+            <Typography
+              sx={{
+                color: '#FFF',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                fontSize: '12px',
+              }}
+              component="a"
+              href="https://robo-byte.com/ar/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Copyright © RoboByte. All rights reserved
+            </Typography>
+          </Box>
+        </Box>
+      )}
+      hidden={hidden}
+      settings={settings}
+      saveSettings={saveSettings}
+      {...(settings.layout === 'horizontal'
+        ? {
+          // ** Navigation Items
+          horizontalNavItems: HorizontalNavItems(),
+          // Uncomment the below line when using server-side menu in horizontal layout and comment the above line
+          // horizontalNavItems: ServerSideHorizontalNavItems(),
+          // ** AppBar Content
+          horizontalAppBarContent: () => <HorizontalAppBarContent settings={settings} saveSettings={saveSettings} />
+        }
+        : {
+          verticalNavItems: VerticalNavItems(),
+
+          verticalAppBarContent: props => (
+            <VerticalAppBarContent
+              hidden={hidden}
+              settings={settings}
+              saveSettings={saveSettings}
+              toggleNavVisibility={props.toggleNavVisibility}
+            />
+          )
+        })}
+    >
+      {children}
+    </Layout>
+  )
+}
+
+export default UserLayout

package/src/layouts/UserThemeOptions.js

@@ -0,0 +1,191 @@
+// ** To use core palette, uncomment the below import
+// import corePalette from 'src/@core/theme/palette'
+// ** To use mode (light/dark), skin(default/bordered/semi-dark), direction(ltr/rtl), etc. for conditional styles, uncomment below line
+import { useSettings } from 'src/@core/hooks/useSettings'
+const UserThemeOptions = () => {
+  // ** To use mode (light/dark), skin(default/bordered/semi-dark), direction(ltr/rtl), etc. for conditional styles, uncomment below line
+  const { settings } = useSettings()
+  // ** To use mode (light/dark), skin(default/bordered/semi-dark), direction(ltr/rtl), etc. for conditional styles, uncomment below line
+  const { mode, skin } = settings
+  // ** To use core palette, uncomment the below line
+  // const palette = corePalette(mode, skin)
+  return {
+    typography: {
+      fontFamily: '"Cairo", sans-serif'
+    },
+    palette: {
+      primary: {
+        light: '#787EFF',
+        main: '#00989f',
+        dark: '#035357',
+        contrastText: '#FFF'
+      }
+    },
+
+    components: {
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            '& .MuiDataGrid-virtualScroller': {
+              marginTop: '0 !important'
+            }
+          }
+        }
+      },
+
+    }
+    /*
+    MuiDataGrid-virtualScroller
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 768,
+        md: 992,
+        lg: 1200,
+        xl: 1920
+      }
+    },
+    components: {
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true
+        },
+        styleOverrides: {
+          root: {
+            textTransform: 'none'
+          },
+          sizeSmall: {
+            padding: '6px 16px'
+          },
+          sizeMedium: {
+            padding: '8px 20px'
+          },
+          sizeLarge: {
+            padding: '11px 24px'
+          },
+          textSizeSmall: {
+            padding: '7px 12px'
+          },
+          textSizeMedium: {
+            padding: '9px 16px'
+          },
+          textSizeLarge: {
+            padding: '12px 16px'
+          }
+        }
+      },
+      MuiCardActions: {
+        styleOverrides: {
+          root: {
+            padding: '16px 24px'
+          }
+        }
+      },
+      MuiCardContent: {
+        styleOverrides: {
+          root: {
+            padding: '32px 24px',
+            '&:last-child': {
+              paddingBottom: '32px'
+            }
+          }
+        }
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          '*': {
+            boxSizing: 'border-box'
+          },
+          html: {
+            MozOsxFontSmoothing: 'grayscale',
+            WebkitFontSmoothing: 'antialiased',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100%',
+            width: '100%'
+          },
+          body: {
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            minHeight: '100%',
+            width: '100%'
+          },
+          '#__next': {
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%'
+          }
+        }
+      }
+    },
+    shape: {
+      borderRadius: 8
+    },
+    typography: {
+      fontFamily:
+        '"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+    },
+    shadows: mode === 'light' ? [
+      'none',
+      '0px 2px 1px -1px rgba(76, 78, 100, 0.2), 0px 1px 1px 0px rgba(76, 78, 100, 0.14), 0px 1px 3px 0px rgba(76, 78, 100, 0.12)',
+      '0px 3px 1px -2px rgba(76, 78, 100, 0.2), 0px 2px 2px 0px rgba(76, 78, 100, 0.14), 0px 1px 5px 0px rgba(76, 78, 100, 0.12)',
+      '0px 4px 8px -4px rgba(76, 78, 100, 0.42)',
+      '0px 6px 18px -8px rgba(76, 78, 100, 0.56)',
+      '0px 3px 5px -1px rgba(76, 78, 100, 0.2), 0px 5px 8px 0px rgba(76, 78, 100, 0.14), 0px 1px 14px 0px rgba(76, 78, 100, 0.12)',
+      '0px 2px 10px 0px rgba(76, 78, 100, 0.1)',
+      '0px 4px 5px -2px rgba(76, 78, 100, 0.2), 0px 7px 10px 1px rgba(76, 78, 100, 0.14), 0px 2px 16px 1px rgba(76, 78, 100, 0.12)',
+      '0px 5px 5px -3px rgba(76, 78, 100, 0.2), 0px 8px 10px 1px rgba(76, 78, 100, 0.14), 0px 3px 14px 2px rgba(76, 78, 100, 0.12)',
+      '0px 5px 6px -3px rgba(76, 78, 100, 0.2), 0px 9px 12px 1px rgba(76, 78, 100, 0.14), 0px 3px 16px 2px rgba(76, 78, 100, 0.12)',
+      '0px 6px 6px -3px rgba(76, 78, 100, 0.2), 0px 10px 14px 1px rgba(76, 78, 100, 0.14), 0px 4px 18px 3px rgba(76, 78, 100, 0.12)',
+      '0px 6px 7px -4px rgba(76, 78, 100, 0.2), 0px 11px 15px 1px rgba(76, 78, 100, 0.14), 0px 4px 20px 3px rgba(76, 78, 100, 0.12)',
+      '0px 7px 8px -4px rgba(76, 78, 100, 0.2), 0px 12px 17px 2px rgba(76, 78, 100, 0.14), 0px 5px 22px 4px rgba(76, 78, 100, 0.12)',
+      '0px 7px 8px -4px rgba(76, 78, 100, 0.2), 0px 13px 19px 2px rgba(76, 78, 100, 0.14), 0px 5px 24px 4px rgba(76, 78, 100, 0.12)',
+      '0px 7px 9px -4px rgba(76, 78, 100, 0.2), 0px 14px 21px 2px rgba(76, 78, 100, 0.14), 0px 5px 26px 4px rgba(76, 78, 100, 0.12)',
+      '0px 8px 9px -5px rgba(76, 78, 100, 0.2), 0px 15px 22px 2px rgba(76, 78, 100, 0.14), 0px 6px 28px 5px rgba(76, 78, 100, 0.12)',
+      '0px 8px 10px -5px rgba(76, 78, 100, 0.2), 0px 16px 24px 2px rgba(76, 78, 100, 0.14), 0px 6px 30px 5px rgba(76, 78, 100, 0.12)',
+      '0px 8px 11px -5px rgba(76, 78, 100, 0.2), 0px 17px 26px 2px rgba(76, 78, 100, 0.14), 0px 6px 32px 5px rgba(76, 78, 100, 0.12)',
+      '0px 9px 11px -5px rgba(76, 78, 100, 0.2), 0px 18px 28px 2px rgba(76, 78, 100, 0.14), 0px 7px 34px 6px rgba(76, 78, 100, 0.12)',
+      '0px 9px 12px -6px rgba(76, 78, 100, 0.2), 0px 19px 29px 2px rgba(76, 78, 100, 0.14), 0px 7px 36px 6px rgba(76, 78, 100, 0.12)',
+      '0px 10px 13px -6px rgba(76, 78, 100, 0.2), 0px 20px 31px 3px rgba(76, 78, 100, 0.14), 0px 8px 38px 7px rgba(76, 78, 100, 0.12)',
+      '0px 10px 13px -6px rgba(76, 78, 100, 0.2), 0px 21px 33px 3px rgba(76, 78, 100, 0.14), 0px 8px 40px 7px rgba(76, 78, 100, 0.12)',
+      '0px 10px 14px -6px rgba(76, 78, 100, 0.2), 0px 22px 35px 3px rgba(76, 78, 100, 0.14), 0px 8px 42px 7px rgba(76, 78, 100, 0.12)',
+      '0px 11px 14px -7px rgba(76, 78, 100, 0.2), 0px 23px 36px 3px rgba(76, 78, 100, 0.14), 0px 9px 44px 8px rgba(76, 78, 100, 0.12)',
+      '0px 11px 15px -7px rgba(76, 78, 100, 0.2), 0px 24px 38px 3px rgba(76, 78, 100, 0.14), 0px 9px 46px 8px rgba(76, 78, 100, 0.12)'
+    ] : [
+      'none',
+      '0px 2px 1px -1px rgba(20, 21, 33, 0.2), 0px 1px 1px 0px rgba(20, 21, 33, 0.14), 0px 1px 3px 0px rgba(20, 21, 33, 0.12)',
+      '0px 3px 1px -2px rgba(20, 21, 33, 0.2), 0px 2px 2px 0px rgba(20, 21, 33, 0.14), 0px 1px 5px 0px rgba(20, 21, 33, 0.12)',
+      '0px 4px 8px -4px rgba(20, 21, 33, 0.42)',
+      '0px 6px 18px -8px rgba(20, 21, 33, 0.56)',
+      '0px 3px 5px -1px rgba(20, 21, 33, 0.2), 0px 5px 8px 0px rgba(20, 21, 33, 0.14), 0px 1px 14px 0px rgba(20, 21, 33, 0.12)',
+      '0px 2px 10px 0px rgba(20, 21, 33,  0.1)',
+      '0px 4px 5px -2px rgba(20, 21, 33, 0.2), 0px 7px 10px 1px rgba(20, 21, 33, 0.14), 0px 2px 16px 1px rgba(20, 21, 33, 0.12)',
+      '0px 5px 5px -3px rgba(20, 21, 33, 0.2), 0px 8px 10px 1px rgba(20, 21, 33, 0.14), 0px 3px 14px 2px rgba(20, 21, 33, 0.12)',
+      '0px 5px 6px -3px rgba(20, 21, 33, 0.2), 0px 9px 12px 1px rgba(20, 21, 33, 0.14), 0px 3px 16px 2px rgba(20, 21, 33, 0.12)',
+      '0px 6px 6px -3px rgba(20, 21, 33, 0.2), 0px 10px 14px 1px rgba(20, 21, 33, 0.14), 0px 4px 18px 3px rgba(20, 21, 33, 0.12)',
+      '0px 6px 7px -4px rgba(20, 21, 33, 0.2), 0px 11px 15px 1px rgba(20, 21, 33, 0.14), 0px 4px 20px 3px rgba(20, 21, 33, 0.12)',
+      '0px 7px 8px -4px rgba(20, 21, 33, 0.2), 0px 12px 17px 2px rgba(20, 21, 33, 0.14), 0px 5px 22px 4px rgba(20, 21, 33, 0.12)',
+      '0px 7px 8px -4px rgba(20, 21, 33, 0.2), 0px 13px 19px 2px rgba(20, 21, 33, 0.14), 0px 5px 24px 4px rgba(20, 21, 33, 0.12)',
+      '0px 7px 9px -4px rgba(20, 21, 33, 0.2), 0px 14px 21px 2px rgba(20, 21, 33, 0.14), 0px 5px 26px 4px rgba(20, 21, 33, 0.12)',
+      '0px 8px 9px -5px rgba(20, 21, 33, 0.2), 0px 15px 22px 2px rgba(20, 21, 33, 0.14), 0px 6px 28px 5px rgba(20, 21, 33, 0.12)',
+      '0px 8px 10px -5px rgba(20, 21, 33, 0.2), 0px 16px 24px 2px rgba(20, 21, 33, 0.14), 0px 6px 30px 5px rgba(20, 21, 33, 0.12)',
+      '0px 8px 11px -5px rgba(20, 21, 33, 0.2), 0px 17px 26px 2px rgba(20, 21, 33, 0.14), 0px 6px 32px 5px rgba(20, 21, 33, 0.12)',
+      '0px 9px 11px -5px rgba(20, 21, 33, 0.2), 0px 18px 28px 2px rgba(20, 21, 33, 0.14), 0px 7px 34px 6px rgba(20, 21, 33, 0.12)',
+      '0px 9px 12px -6px rgba(20, 21, 33, 0.2), 0px 19px 29px 2px rgba(20, 21, 33, 0.14), 0px 7px 36px 6px rgba(20, 21, 33, 0.12)',
+      '0px 10px 13px -6px rgba(20, 21, 33, 0.2), 0px 20px 31px 3px rgba(20, 21, 33, 0.14), 0px 8px 38px 7px rgba(20, 21, 33, 0.12)',
+      '0px 10px 13px -6px rgba(20, 21, 33, 0.2), 0px 21px 33px 3px rgba(20, 21, 33, 0.14), 0px 8px 40px 7px rgba(20, 21, 33, 0.12)',
+      '0px 10px 14px -6px rgba(20, 21, 33, 0.2), 0px 22px 35px 3px rgba(20, 21, 33, 0.14), 0px 8px 42px 7px rgba(20, 21, 33, 0.12)',
+      '0px 11px 14px -7px rgba(20, 21, 33, 0.2), 0px 23px 36px 3px rgba(20, 21, 33, 0.14), 0px 9px 44px 8px rgba(20, 21, 33, 0.12)',
+      '0px 11px 15px -7px rgba(20, 21, 33, 0.2), 0px 24px 38px 3px rgba(20, 21, 33, 0.14), 0px 9px 46px 8px rgba(20, 21, 33, 0.12)'
+    ],
+    zIndex: {
+      appBar: 1200,
+      drawer: 1100
+    } */
+  }
+}
+
+export default UserThemeOptions

package/src/layouts/components/Direction.js

@@ -0,0 +1,30 @@
+// ** React Imports
+import { useEffect } from 'react'
+
+// ** Emotion Imports
+import createCache from '@emotion/cache'
+import { CacheProvider } from '@emotion/react'
+
+// ** RTL Plugin
+import stylisRTLPlugin from 'stylis-plugin-rtl'
+
+const styleCache = () =>
+  createCache({
+    key: 'rtl',
+    prepend: true,
+    stylisPlugins: [stylisRTLPlugin]
+  })
+
+const Direction = props => {
+  const { children, direction } = props
+  useEffect(() => {
+    document.dir = direction
+  }, [direction])
+  if (direction === 'rtl') {
+    return <CacheProvider value={styleCache()}>{children}</CacheProvider>
+  }
+
+  return <>{children}</>
+}
+
+export default Direction

package/src/layouts/components/HtmlTooltip.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {styled} from '@mui/material/styles';
+import Tooltip, {TooltipProps, tooltipClasses} from '@mui/material/Tooltip';
+
+export const HtmlTooltip = styled(({className, ...props}) => (
+  <Tooltip {...props} classes={{popper: className}}/>
+))(({theme}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: '#f5f5f9',
+    color: 'rgba(0, 0, 0, 0.87)',
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #dadde9',
+    m:'0px'
+  },
+}));

package/src/layouts/components/Translations.js

@@ -0,0 +1,11 @@
+// ** Third Party Import
+import { useTranslation } from 'react-i18next'
+
+const Translations = ({ text }) => {
+  // ** Hook
+  const { t } = useTranslation()
+
+  return <>{`${t(text)}`}</>
+}
+
+export default Translations

package/src/layouts/components/UserDropdown.js

@@ -0,0 +1,217 @@
+// ** React Imports
+import {useState, Fragment, useEffect} from 'react'
+
+// ** Next Import
+import { useRouter } from 'next/router'
+
+// ** MUI Imports
+import {
+  Dialog,
+  Box,
+  Menu,
+  Badge,
+  Avatar,
+  Divider,
+  MenuItem,
+  Typography
+} from '@mui/material';
+import { styled } from '@mui/material/styles'
+// ** Icons Imports
+import LogoutVariant from 'mdi-material-ui/LogoutVariant'
+import AccountOutline from 'mdi-material-ui/AccountOutline'
+
+// ** Context
+import { useAuth } from 'src/hooks/useAuth'
+import { LockOff, LockOpen } from 'mdi-material-ui'
+import handleChange from 'src/services/helper/handleChange'
+import ResetPasswordDialog from '../../views/users/ResetPasswordDialog'
+// ** Styled Components
+const BadgeContentSpan = styled('span')(({ theme }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: '50%',
+  backgroundColor: theme.palette.success.main,
+  boxShadow: `0 0 0 2px ${theme.palette.background.paper}`
+}))
+
+const UserDropdown = props => {
+  // ** Props
+  const { settings } = props
+
+  // ** States
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [openDialogs, setOpenDialogs] = useState({
+    resetPassword: false,
+  })
+  // ** Hooks
+  const router = useRouter()
+  const { logout, user } = useAuth()
+
+  useEffect(() => {
+  console.log(user)
+  }, []);
+  // ** Vars
+  const { direction } = settings
+
+  const handleDropdownOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+  const handleDropdownClose = url => {
+    if (url) {
+      router.push(url)
+    }
+    setAnchorEl(null)
+  }
+  const handleLogout = () => {
+    logout()
+    handleDropdownClose()
+  }
+  const styles = {
+    py: 2,
+    px: 4,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    color: 'text.primary',
+    textDecoration: 'none',
+    '& svg': {
+      fontSize: '1.375rem',
+      color: 'text.secondary'
+    }
+  }
+  return (
+    <Fragment>
+      <Badge
+        overlap='circular'
+        onClick={handleDropdownOpen}
+        sx={{ ml: 2, cursor: 'pointer' }}
+        badgeContent={<BadgeContentSpan />}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+      >
+        <Avatar
+          alt={user.displayName}
+          onClick={handleDropdownOpen}
+          sx={{ width: 40, height: 40 }}
+          src='/images/avatars/1.png'
+        />
+      </Badge>
+
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => handleDropdownClose()}
+        sx={{ '& .MuiMenu-paper': { width: 230, marginTop: 4 } }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: direction === 'ltr' ? 'right' : 'left'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: direction === 'ltr' ? 'right' : 'left'
+        }}
+      >
+        <Box sx={{ pt: 2, pb: 3, px: 4 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Badge
+              overlap='circular'
+              badgeContent={<BadgeContentSpan />}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+              }}
+            >
+              <Avatar alt='John Doe' src='/images/avatars/1.png' sx={{ width: '2.5rem', height: '2.5rem' }} />
+            </Badge>
+            <Box
+              sx={{
+                display: 'flex',
+                marginLeft: 3,
+                alignItems: 'flex-start',
+                flexDirection: 'column'
+              }}
+            >
+              <Typography sx={{ fontWeight: 600 }}>{user?.contact?.name}</Typography>
+              <Typography variant='body2' sx={{ fontSize: '0.8rem', color: 'text.disabled' }}>
+                {user.roles[0]}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+        <Divider sx={{ mt: 0, mb: 1 }} />
+        <MenuItem sx={{ p: 0 }} onClick={() => {
+          handleToggleDialogs('resetPassword')
+          handleDropdownClose()
+        }}>
+          <Box sx={styles}>
+            <LockOpen sx={{ marginRight: 2 }} />
+            تغيير كلمة المرور
+          </Box>
+        </MenuItem>
+        {/* <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
+          <Box sx={styles}>
+            <EmailOutline sx={{ marginRight: 2 }} />
+            Inbox
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
+          <Box sx={styles}>
+            <MessageOutline sx={{ marginRight: 2 }} />
+            Chat
+          </Box>
+        </MenuItem>
+        <Divider />
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
+          <Box sx={styles}>
+            <CogOutline sx={{ marginRight: 2 }} />
+            Settings
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
+          <Box sx={styles}>
+            <CurrencyUsd sx={{ marginRight: 2 }} />
+            Pricing
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
+          <Box sx={styles}>
+            <HelpCircleOutline sx={{ marginRight: 2 }} />
+            FAQ
+          </Box>
+        </MenuItem> */}
+        <Divider />
+        <MenuItem sx={{ py: 2 }} onClick={handleLogout}>
+          <LogoutVariant
+            sx={{
+              marginRight: 2,
+              fontSize: '1.375rem',
+              color: 'text.secondary'
+            }}
+          />
+          Logout
+        </MenuItem>
+      </Menu>
+      <Dialog
+        fullWidth
+        open={openDialogs.resetPassword}
+        maxWidth='md'
+        scroll='body'
+        onClose={() => handleToggleDialogs('resetPassword')}
+      >
+        <ResetPasswordDialog
+          handleToggleDialogs={handleToggleDialogs}
+          userId={user.id}
+          currentUser={true}
+        />
+      </Dialog>
+    </Fragment>
+  )
+}
+
+export default UserDropdown