@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/components/Layout/Header/HeaderContent/Profile.jsx

@@ -0,0 +1,181 @@
+import { Avatar, IconButton, Transitions } from '../../../@extended'
+import {
+  Box,
+  ButtonBase,
+  CardContent,
+  ClickAwayListener,
+  Grid,
+  Paper,
+  Popper,
+  Stack,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { useAuthProvider, useDataProvider, useGetIdentity, useLogout } from 'react-admin'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { LogoutOutlined } from '@ant-design/icons'
+import MainCard from '../../../MainCard'
+import PropTypes from 'prop-types'
+import { useTheme } from '@mui/material/styles'
+
+function TabPanel({ children, value, index, ...other }) {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`profile-tabpanel-${index}`}
+      aria-labelledby={`profile-tab-${index}`}
+      {...other}
+    >
+      {value === index && children}
+    </div>
+  )
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+}
+
+const Profile = () => {
+  const theme = useTheme()
+
+  const { identity } = useGetIdentity()
+
+  const anchorRef = useRef(null)
+  const [open, setOpen] = useState(false)
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen)
+  }
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return
+    }
+    setOpen(false)
+  }
+
+  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300'
+  const isImpersonating = false // authProvider?.isImpersonating && authProvider?.isImpersonating() === true
+  const logout = useLogout()
+
+  const dataProvider = useDataProvider()
+  const authProvider = useAuthProvider()
+  const handleLogout = useCallback(() => {
+    if (isImpersonating) {
+      authProvider.stopImpersonate().then(() => (document.location.href = '/'))
+    } else {
+      logout()
+    }
+  }, [authProvider, isImpersonating, logout])
+  const [profileImage, setProfileImage] = useState(null)
+  useEffect(() => {
+    async function fetchProfileImage() {
+      var image = await dataProvider.getFile('/profile/me/image')
+      setProfileImage(image)
+    }
+    fetchProfileImage()
+  }, [dataProvider])
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+      <ButtonBase
+        sx={{
+          p: 0.25,
+          bgcolor: open ? iconBackColorOpen : 'transparent',
+          borderRadius: 1,
+          '&:hover': {
+            bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter',
+          },
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2,
+          },
+        }}
+        aria-label="open profile"
+        ref={anchorRef}
+        aria-controls={open ? 'profile-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <Stack direction="row" spacing={2} alignItems="center" sx={{ p: 0.5 }}>
+          <Avatar alt={identity?.name?.toUpperCase()} src={profileImage} size="xs" />
+          <Typography variant="subtitle1">{identity?.name}</Typography>
+        </Stack>
+      </ButtonBase>
+      <Popper
+        placement="bottom-end"
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 9],
+              },
+            },
+          ],
+        }}
+      >
+        {({ TransitionProps }) => (
+          <Transitions type="grow" position="top-right" in={open} {...TransitionProps}>
+            <Paper
+              sx={{
+                boxShadow: theme.customShadows.z1,
+                width: 290,
+                minWidth: 240,
+                maxWidth: 290,
+                [theme.breakpoints.down('md')]: {
+                  maxWidth: 250,
+                },
+              }}
+            >
+              <ClickAwayListener onClickAway={handleClose}>
+                <MainCard elevation={0} border={false} content={false}>
+                  <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid container justifyContent="space-between" alignItems="center">
+                      <Grid item>
+                        <Stack direction="row" spacing={1.25} alignItems="center">
+                          <Avatar
+                            alt="profile user"
+                            src={profileImage}
+                            sx={{ width: 32, height: 32 }}
+                          />
+                          <Stack>
+                            <Typography variant="h6">{identity?.name}</Typography>
+                            <Typography variant="body2" color="textSecondary">
+                              {identity?.roles?.map((r) => r.name).join(',')}
+                            </Typography>
+                          </Stack>
+                        </Stack>
+                      </Grid>
+                      <Grid item>
+                        <Tooltip title="Logout">
+                          <IconButton
+                            size="large"
+                            sx={{ color: 'text.primary' }}
+                            onClick={handleLogout}
+                          >
+                            <LogoutOutlined />
+                          </IconButton>
+                        </Tooltip>
+                      </Grid>
+                    </Grid>
+                  </CardContent>
+                </MainCard>
+              </ClickAwayListener>
+            </Paper>
+          </Transitions>
+        )}
+      </Popper>
+    </Box>
+  )
+}
+
+export default Profile

package/src/components/Layout/Header/HeaderContent/index.jsx

@@ -0,0 +1,38 @@
+import { Box, useMediaQuery } from '@mui/material'
+import { useMenuConfig, useThemeConfig } from '../../../../hooks'
+
+import DrawerHeader from '../../Drawer/DrawerHeader'
+import { LoadingIndicator } from 'react-admin'
+import MobileSection from './MobileSection'
+import Notification from './Notification'
+import Profile from './Profile'
+import PropTypes from 'prop-types'
+
+const HeaderContent = ({ logoMain, logoIcon, notification, disableNotification }) => {
+  const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'))
+  const { isHorizontalLayout, menuOrientation } = useThemeConfig()
+  const { drawerOpen } = useMenuConfig()
+  return (
+    <>
+      {(!drawerOpen || !matchesXs) && isHorizontalLayout(menuOrientation) && (
+        <DrawerHeader open logoMain={logoMain} logoIcon={logoIcon} />
+      )}
+      <Box sx={{ flexGrow: 1 }} />
+      {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
+
+      <LoadingIndicator />
+      {!disableNotification && <Notification resource={notification} />}
+      {!matchesXs && <Profile />}
+      {matchesXs && <MobileSection />}
+    </>
+  )
+}
+
+HeaderContent.propTypes = {
+  logoMain: PropTypes.node,
+  logoIcon: PropTypes.node,
+  notification: PropTypes.string,
+  disableNotification: PropTypes.bool
+}
+
+export default HeaderContent

package/src/components/Layout/Header/index.jsx

@@ -0,0 +1,99 @@
+import { AppBar, Toolbar, useMediaQuery } from '@mui/material'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+
+import AppBarStyled from './AppBarStyled'
+import HeaderContent from './HeaderContent'
+import { IconButton } from '../../@extended'
+import PropTypes from 'prop-types'
+import { useMemo } from 'react'
+import { useTheme } from '@mui/material/styles'
+import { useThemeConfig } from '../../../hooks'
+
+const Header = ({
+  open,
+  logoMain,
+  logoIcon,
+  handleDrawerToggle,
+  notification,
+  disableNotification
+}) => {
+  const theme = useTheme()
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+  const { menuOrientation, isHorizontalLayout } = useThemeConfig()
+
+  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG
+  const headerContent = useMemo(
+    () => (
+      <HeaderContent
+        logoMain={logoMain}
+        logoIcon={logoIcon}
+        notification={notification}
+        disableNotification={disableNotification}
+      />
+    ),
+    [logoMain, logoIcon, notification]
+  )
+
+  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300'
+  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100'
+
+  const mainHeader = (
+    <Toolbar>
+      {!isHorizontal ? (
+        <IconButton
+          aria-label="open drawer"
+          onClick={handleDrawerToggle}
+          edge="start"
+          color="secondary"
+          variant="light"
+          sx={{
+            color: 'text.primary',
+            bgcolor: open ? iconBackColorOpen : iconBackColor,
+            ml: { xs: 0, lg: -2 }
+          }}
+        >
+          {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </IconButton>
+      ) : null}
+      {headerContent}
+    </Toolbar>
+  )
+
+  const appBar = {
+    position: 'fixed',
+    color: 'inherit',
+    elevation: 0,
+    sx: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      zIndex: 1200,
+      width: isHorizontal
+        ? '100%'
+        : open
+        ? 'calc(100% - 260px)'
+        : { xs: '100%', lg: 'calc(100% - 60px)' }
+    }
+  }
+
+  return (
+    <>
+      {!downLG ? (
+        <AppBarStyled open={open} {...appBar}>
+          {mainHeader}
+        </AppBarStyled>
+      ) : (
+        <AppBar {...appBar}>{mainHeader}</AppBar>
+      )}
+    </>
+  )
+}
+
+Header.propTypes = {
+  open: PropTypes.bool,
+  handleDrawerToggle: PropTypes.func,
+  logoMain: PropTypes.node,
+  logoIcon: PropTypes.node,
+  notification: PropTypes.string,
+  disableNotification: PropTypes.bool
+}
+
+export default Header

package/src/components/Layout/index.jsx

@@ -0,0 +1,119 @@
+import 'simplebar/dist/simplebar.css'
+
+import { Box, Container, Toolbar, useMediaQuery } from '@mui/material'
+import { useBreadcrumbs, useMenuConfig, useThemeConfig } from '../../hooks'
+import { useEffect, useState } from 'react'
+
+import Breadcrumbs from '../@extended/Breadcrumbs'
+import Drawer from './Drawer'
+import Footer from './Footer'
+import Header from './Header'
+import HorizontalBar from './Drawer/HorizontalBar'
+import { Outlet } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import { useTheme } from '@mui/material/styles'
+
+const Layout = ({
+  children,
+  name,
+  version,
+  logoMain,
+  logoIcon,
+  notification,
+  disableNotification
+}) => {
+  const theme = useTheme()
+  const { openDrawer } = useMenuConfig()
+  const { isLoading, navigation, breadcrumbs } = useBreadcrumbs()
+  const matchDownLG = useMediaQuery(theme.breakpoints.down('xl'))
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+  const { container, miniDrawer, menuOrientation, isHorizontalLayout } = useThemeConfig()
+
+  const { drawerOpen } = useMenuConfig()
+  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG
+  const [open, setOpen] = useState(!miniDrawer || drawerOpen)
+  const handleDrawerToggle = () => {
+    setOpen(!open)
+    openDrawer(!open)
+  }
+  useEffect(() => {
+    if (!miniDrawer) {
+      setOpen(!matchDownLG)
+      openDrawer(!matchDownLG)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [matchDownLG])
+
+  useEffect(() => {
+    if (open !== drawerOpen) setOpen(drawerOpen)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [drawerOpen])
+
+  return (
+    <Box sx={{ display: 'flex', width: '100%' }}>
+      <Header
+        open={open}
+        handleDrawerToggle={handleDrawerToggle}
+        logoMain={logoMain}
+        logoIcon={logoIcon}
+        notification={notification}
+        disableNotification={disableNotification}
+      />
+      {!isHorizontal ? (
+        <Drawer
+          open={open}
+          handleDrawerToggle={handleDrawerToggle}
+          logoMain={logoMain}
+          logoIcon={logoIcon}
+        />
+      ) : (
+        <HorizontalBar />
+      )}
+      <Box
+        component="main"
+        sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}
+      >
+        <Toolbar sx={{ mt: isHorizontal ? 8 : 'inherit' }} />
+        <Container
+          maxWidth={container ? 'xl' : false}
+          sx={{
+            ...(container && { px: { xs: 0, sm: 2 } }),
+            position: 'relative',
+            minHeight: 'calc(100vh - 110px)',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          {!isLoading && (
+            <Breadcrumbs
+              titleBottom
+              mode="breadcrumbs"
+              navigation={navigation}
+              breadcrumbs={breadcrumbs}
+              card={false}
+              divider={false}
+              icon
+              icons
+              home={false}
+            />
+          )}
+          {children}
+          <Outlet />
+          <Footer name={name} version={version} />
+        </Container>
+      </Box>
+    </Box>
+  )
+}
+
+Layout.propTypes = {
+  name: PropTypes.string,
+  version: PropTypes.string,
+  children: PropTypes.node,
+  logoMain: PropTypes.node,
+  logoIcon: PropTypes.node,
+  notification: PropTypes.string,
+  disableNotification: PropTypes.bool
+}
+
+export default Layout

package/src/components/Loadable.jsx

@@ -0,0 +1,11 @@
+import Loader from './Loader'
+import { Suspense } from 'react'
+
+const Loadable = (Component) => (props) =>
+  (
+    <Suspense fallback={<Loader />}>
+      <Component {...props} />
+    </Suspense>
+  )
+
+export default Loadable

package/src/components/Loader.jsx

@@ -0,0 +1,21 @@
+import LinearProgress from '@mui/material/LinearProgress'
+import { styled } from '@mui/material/styles'
+
+const LoaderWrapper = styled('div')(({ theme }) => ({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 2001,
+  width: '100%',
+  '& > * + *': {
+    marginTop: theme.spacing(2),
+  },
+}))
+
+const Loader = () => (
+  <LoaderWrapper>
+    <LinearProgress color="primary" />
+  </LoaderWrapper>
+)
+
+export default Loader

package/src/components/Logo.jsx

@@ -0,0 +1,29 @@
+import { ButtonBase } from '@mui/material'
+import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import logoIcon from '../assets/logo-icon.png'
+import logoMain from '../assets/logo-main.png'
+import { useThemeConfig } from '../hooks'
+
+const defaultIcon = <img src={logoIcon} alt="Applica" width="20px" />
+const defaultMain = <img src={logoMain} alt="Applica" width="100px" />
+
+const Logo = ({ isIcon, sx, to, logoIcon = defaultIcon, logoMain = defaultMain }) => {
+  const { appDefaultPath } = useThemeConfig()
+  return (
+    <ButtonBase disableRipple component={Link} to={!to ? appDefaultPath : to} sx={sx}>
+      {isIcon ? logoIcon : logoMain}
+    </ButtonBase>
+  )
+}
+
+Logo.propTypes = {
+  reverse: PropTypes.bool,
+  isIcon: PropTypes.bool,
+  sx: PropTypes.object,
+  to: PropTypes.string,
+  logoIcon: PropTypes.node,
+  logoMain: PropTypes.node,
+}
+
+export default Logo

package/src/components/MainCard.jsx

@@ -0,0 +1,111 @@
+import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material'
+
+import PropTypes from 'prop-types'
+import { forwardRef } from 'react'
+import { useTheme } from '@mui/material/styles'
+
+const headerSX = {
+  p: 2.5,
+  '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' },
+}
+
+const MainCard = forwardRef(
+  (
+    {
+      border = true,
+      boxShadow,
+      children,
+      subheader,
+      content = true,
+      contentSX = {},
+      darkTitle,
+      divider = true,
+      elevation,
+      secondary,
+      shadow,
+      sx = {},
+      title,
+      modal = false,
+      ...others
+    },
+    ref,
+  ) => {
+    const theme = useTheme()
+    boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow
+
+    return (
+      <Card
+        elevation={elevation || 0}
+        ref={ref}
+        {...others}
+        sx={{
+          position: 'relative',
+          border: border ? '1px solid' : 'none',
+          borderRadius: 1,
+          borderColor:
+            theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+          boxShadow:
+            boxShadow && (!border || theme.palette.mode === 'dark')
+              ? shadow || theme.customShadows.z1
+              : 'inherit',
+          ':hover': {
+            boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit',
+          },
+          ...(modal && {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: { xs: `calc( 100% - 50px)`, sm: 'auto' },
+            '& .MuiCardContent-root': {
+              overflowY: 'auto',
+              minHeight: 'auto',
+              maxHeight: `calc(100vh - 200px)`,
+            },
+          }),
+          ...sx,
+        }}
+      >
+        {!darkTitle && title && (
+          <CardHeader
+            sx={headerSX}
+            titleTypographyProps={{ variant: 'subtitle1' }}
+            title={title}
+            action={secondary}
+            subheader={subheader}
+          />
+        )}
+        {darkTitle && title && (
+          <CardHeader
+            sx={headerSX}
+            title={<Typography variant="h4">{title}</Typography>}
+            action={secondary}
+          />
+        )}
+        {title && divider && <Divider />}
+        {content && <CardContent sx={contentSX}>{children}</CardContent>}
+        {!content && children}
+      </Card>
+    )
+  },
+)
+
+MainCard.propTypes = {
+  border: PropTypes.bool,
+  boxShadow: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  subheader: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  content: PropTypes.bool,
+  contentClass: PropTypes.string,
+  contentSX: PropTypes.object,
+  darkTitle: PropTypes.bool,
+  divider: PropTypes.bool,
+  elevation: PropTypes.number,
+  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+  shadow: PropTypes.string,
+  sx: PropTypes.object,
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+  modal: PropTypes.bool,
+}
+
+export default MainCard

package/src/components/MainIcon.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import { Typography } from '@mui/material'
+
+const MainIcon = ({ title }) => (
+  <>
+    <Typography variant="h2" sx={{ fontWeight: 'regular', letterSpacing: -2.5 }}>
+      a.
+    </Typography>
+    &nbsp;
+    <Typography variant="h2" sx={{ fontWeight: 'bold' }}>
+      {title}
+    </Typography>
+  </>
+)
+
+MainIcon.propTypes = {
+  title: PropTypes.string.isRequired,
+}
+
+export default MainIcon

package/src/components/MenuPopover/MenuPopover.jsx

@@ -0,0 +1,61 @@
+import { Popover } from '@mui/material'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { StyledArrow } from './styles'
+import getPosition from './getPosition'
+
+const MenuPopover = ({ open, children, arrow = 'top-right', disabledArrow, sx, ...other }) => {
+  const { style, anchorOrigin, transformOrigin } = getPosition(arrow)
+
+  return (
+    <Popover
+      open={Boolean(open)}
+      anchorEl={open}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transformOrigin}
+      PaperProps={{
+        sx: {
+          p: 1,
+          width: 'auto',
+          overflow: 'inherit',
+          ...style,
+          '& .MuiMenuItem-root': {
+            px: 1,
+            typography: 'body2',
+            borderRadius: 0.75,
+            '& svg': { mr: 2, width: 20, height: 20, flexShrink: 0 },
+          },
+          ...sx,
+        },
+      }}
+      {...other}
+    >
+      {!disabledArrow && <StyledArrow arrow={arrow} />}
+
+      {children}
+    </Popover>
+  )
+}
+
+MenuPopover.propTypes = {
+  sx: PropTypes.object,
+  open: PropTypes.object,
+  children: PropTypes.node,
+  disabledArrow: PropTypes.bool,
+  arrow: PropTypes.oneOf([
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+    'left-top',
+    'left-center',
+    'left-bottom',
+    'right-top',
+    'right-center',
+    'right-bottom',
+  ]),
+}
+
+export default MenuPopover