@applica-software-guru/react-admin 1.0.41 → 1.0.43

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

@@ -1,22 +1,14 @@
-import {
-  Avatar,
-  Divider,
-  ListItemAvatar,
-  ListItemButton,
-  ListItemSecondaryAction,
-  ListItemText,
-  Typography
-} from '@mui/material'
-import { useCallback, useMemo } from 'react'
-import { useLocaleState, useNotify, useRedirect, useUpdate } from 'react-admin'
+import { Avatar, Divider, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Typography } from '@mui/material';
+import { useCallback, useMemo } from 'react';
+import { useLocaleState, useNotify, useRedirect, useUpdate } from 'react-admin';
 
-import { MessageOutlined } from '@ant-design/icons'
-import PropTypes from 'prop-types'
-import dayjs from 'dayjs'
+import { MessageOutlined } from '@ant-design/icons';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
 
 const NotificationItem = ({ resource, selected, notification, onClick }) => {
-  const notify = useNotify()
-  const redirect = useRedirect()
+  const notify = useNotify();
+  const redirect = useRedirect();
   const [update] = useUpdate(
     resource,
     {
@@ -30,26 +22,23 @@ const NotificationItem = ({ resource, selected, notification, onClick }) => {
       onSuccess: () => {
         if (notification?.resource) {
           if (notification?.resource.startsWith('/')) {
-            redirect(notification?.resource)
-            onClick()
+            redirect(notification?.resource);
+            onClick();
           } else {
-            document.location.href = notification?.resource
+            document.location.href = notification?.resource;
           }
         } else {
-          onClick()
+          onClick();
         }
       },
       onFailure: () => {
-        notify('resources.notifications.messages.readed.error', 'warning')
+        notify('resources.notifications.messages.readed.error', 'warning');
       }
     }
-  )
-  const handleClick = useCallback(() => update(), [update])
-  const [locale] = useLocaleState()
-  const ago = useMemo(
-    () => dayjs(notification.created).locale(locale).fromNow(),
-    [notification, locale]
-  )
+  );
+  const handleClick = useCallback(() => update(), [update]);
+  const [locale] = useLocaleState();
+  const ago = useMemo(() => dayjs(notification.created).locale(locale).fromNow(), [notification, locale]);
   return (
     <>
       <ListItemButton selected={selected} onClick={handleClick}>
@@ -82,15 +71,15 @@ const NotificationItem = ({ resource, selected, notification, onClick }) => {
       </ListItemButton>
       <Divider />
     </>
-  )
-}
+  );
+};
 
-NotificationItem.displayName = 'NotificationItem'
+NotificationItem.displayName = 'NotificationItem';
 
 NotificationItem.defaultProps = {
   resource: 'entities/notification',
   selected: false
-}
+};
 
 NotificationItem.propTypes = {
   resource: PropTypes.string.isRequired,
@@ -101,9 +90,8 @@ NotificationItem.propTypes = {
     content: PropTypes.string.isRequired,
     resource: PropTypes.string,
     readed: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]),
-    created: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)])
-      .isRequired
+    created: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]).isRequired
   }).isRequired,
   onClick: PropTypes.func.isRequired
-}
-export default NotificationItem
+};
+export default NotificationItem;

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

@@ -1,83 +1,66 @@
-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 { 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'
+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}
-    >
+    <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,
-}
+  value: PropTypes.any.isRequired
+};
 
 const Profile = () => {
-  const theme = useTheme()
+  const theme = useTheme();
 
-  const { identity } = useGetIdentity()
+  const { identity } = useGetIdentity();
 
-  const anchorRef = useRef(null)
-  const [open, setOpen] = useState(false)
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
   const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen)
-  }
+    setOpen((prevOpen) => !prevOpen);
+  };
 
   const handleClose = (event) => {
     if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return
+      return;
     }
-    setOpen(false)
-  }
+    setOpen(false);
+  };
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300'
-  const isImpersonating = false // authProvider?.isImpersonating && authProvider?.isImpersonating() === true
-  const logout = useLogout()
+  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 dataProvider = useDataProvider();
+  const authProvider = useAuthProvider();
   const handleLogout = useCallback(() => {
     if (isImpersonating) {
-      authProvider.stopImpersonate().then(() => (document.location.href = '/'))
+      authProvider.stopImpersonate().then(() => (document.location.href = '/'));
     } else {
-      logout()
+      logout();
     }
-  }, [authProvider, isImpersonating, logout])
-  const [profileImage, setProfileImage] = useState(null)
+  }, [authProvider, isImpersonating, logout]);
+  const [profileImage, setProfileImage] = useState(null);
   useEffect(() => {
     async function fetchProfileImage() {
-      var image = await dataProvider.getFile('/profile/me/image')
-      setProfileImage(image)
+      var image = await dataProvider.getFile('/profile/me/image');
+      setProfileImage(image);
     }
-    fetchProfileImage()
-  }, [dataProvider])
+    fetchProfileImage();
+  }, [dataProvider]);
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
@@ -87,12 +70,12 @@ const Profile = () => {
           bgcolor: open ? iconBackColorOpen : 'transparent',
           borderRadius: 1,
           '&:hover': {
-            bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter',
+            bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter'
           },
           '&:focus-visible': {
             outline: `2px solid ${theme.palette.secondary.dark}`,
-            outlineOffset: 2,
-          },
+            outlineOffset: 2
+          }
         }}
         aria-label="open profile"
         ref={anchorRef}
@@ -117,10 +100,10 @@ const Profile = () => {
             {
               name: 'offset',
               options: {
-                offset: [0, 9],
-              },
-            },
-          ],
+                offset: [0, 9]
+              }
+            }
+          ]
         }}
       >
         {({ TransitionProps }) => (
@@ -132,8 +115,8 @@ const Profile = () => {
                 minWidth: 240,
                 maxWidth: 290,
                 [theme.breakpoints.down('md')]: {
-                  maxWidth: 250,
-                },
+                  maxWidth: 250
+                }
               }}
             >
               <ClickAwayListener onClickAway={handleClose}>
@@ -142,11 +125,7 @@ const Profile = () => {
                     <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 }}
-                          />
+                          <Avatar alt="profile user" src={profileImage} sx={{ width: 32, height: 32 }} />
                           <Stack>
                             <Typography variant="h6">{identity?.name}</Typography>
                             <Typography variant="body2" color="textSecondary">
@@ -157,11 +136,7 @@ const Profile = () => {
                       </Grid>
                       <Grid item>
                         <Tooltip title="Logout">
-                          <IconButton
-                            size="large"
-                            sx={{ color: 'text.primary' }}
-                            onClick={handleLogout}
-                          >
+                          <IconButton size="large" sx={{ color: 'text.primary' }} onClick={handleLogout}>
                             <LogoutOutlined />
                           </IconButton>
                         </Tooltip>
@@ -175,7 +150,7 @@ const Profile = () => {
         )}
       </Popper>
     </Box>
-  )
-}
+  );
+};
 
-export default Profile
+export default Profile;

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

@@ -1,22 +1,20 @@
-import { Box, useMediaQuery } from '@mui/material'
-import { useMenuConfig, useThemeConfig } from '../../../../hooks'
+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'
+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()
+  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} />
-      )}
+      {(!drawerOpen || !matchesXs) && isHorizontalLayout(menuOrientation) && <DrawerHeader open logoMain={logoMain} logoIcon={logoIcon} />}
       <Box sx={{ flexGrow: 1 }} />
       {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
 
@@ -25,14 +23,14 @@ const HeaderContent = ({ logoMain, logoIcon, notification, disableNotification }
       {!matchesXs && <Profile />}
       {matchesXs && <MobileSection />}
     </>
-  )
-}
+  );
+};
 
 HeaderContent.propTypes = {
   logoMain: PropTypes.node,
   logoIcon: PropTypes.node,
   notification: PropTypes.string,
   disableNotification: PropTypes.bool
-}
+};
 
-export default HeaderContent
+export default HeaderContent;

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

@@ -1,41 +1,27 @@
-import { AppBar, Toolbar, useMediaQuery } from '@mui/material'
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+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'
+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 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 isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
   const headerContent = useMemo(
-    () => (
-      <HeaderContent
-        logoMain={logoMain}
-        logoIcon={logoIcon}
-        notification={notification}
-        disableNotification={disableNotification}
-      />
-    ),
+    () => <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 iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
+  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
 
   const mainHeader = (
     <Toolbar>
@@ -57,7 +43,7 @@ const Header = ({
       ) : null}
       {headerContent}
     </Toolbar>
-  )
+  );
 
   const appBar = {
     position: 'fixed',
@@ -66,13 +52,9 @@ const Header = ({
     sx: {
       borderBottom: `1px solid ${theme.palette.divider}`,
       zIndex: 1200,
-      width: isHorizontal
-        ? '100%'
-        : open
-        ? 'calc(100% - 260px)'
-        : { xs: '100%', lg: 'calc(100% - 60px)' }
+      width: isHorizontal ? '100%' : open ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' }
     }
-  }
+  };
 
   return (
     <>
@@ -84,8 +66,8 @@ const Header = ({
         <AppBar {...appBar}>{mainHeader}</AppBar>
       )}
     </>
-  )
-}
+  );
+};
 
 Header.propTypes = {
   open: PropTypes.bool,
@@ -94,6 +76,6 @@ Header.propTypes = {
   logoIcon: PropTypes.node,
   notification: PropTypes.string,
   disableNotification: PropTypes.bool
-}
+};
 
-export default Header
+export default Header;

package/src/components/Layout/index.jsx

@@ -1,53 +1,45 @@
-import 'simplebar/dist/simplebar.css'
+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 { 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'
+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 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 { drawerOpen } = useMenuConfig();
+  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
+  const [open, setOpen] = useState(!miniDrawer || drawerOpen);
   const handleDrawerToggle = () => {
-    setOpen(!open)
-    openDrawer(!open)
-  }
+    setOpen(!open);
+    openDrawer(!open);
+  };
   useEffect(() => {
     if (!miniDrawer) {
-      setOpen(!matchDownLG)
-      openDrawer(!matchDownLG)
+      setOpen(!matchDownLG);
+      openDrawer(!matchDownLG);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [matchDownLG])
+  }, [matchDownLG]);
 
   useEffect(() => {
-    if (open !== drawerOpen) setOpen(drawerOpen)
+    if (open !== drawerOpen) setOpen(drawerOpen);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [drawerOpen])
+  }, [drawerOpen]);
 
   return (
     <Box sx={{ display: 'flex', width: '100%' }}>
@@ -60,19 +52,11 @@ const Layout = ({
         disableNotification={disableNotification}
       />
       {!isHorizontal ? (
-        <Drawer
-          open={open}
-          handleDrawerToggle={handleDrawerToggle}
-          logoMain={logoMain}
-          logoIcon={logoIcon}
-        />
+        <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 } }}
-      >
+      <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}
@@ -103,8 +87,8 @@ const Layout = ({
         </Container>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 Layout.propTypes = {
   name: PropTypes.string,
@@ -114,6 +98,6 @@ Layout.propTypes = {
   logoIcon: PropTypes.node,
   notification: PropTypes.string,
   disableNotification: PropTypes.bool
-}
+};
 
-export default Layout
+export default Layout;

package/src/components/Loadable.jsx

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

package/src/components/Loader.jsx

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

package/src/components/Logo.jsx

@@ -1,21 +1,21 @@
-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'
+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 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()
+  const { appDefaultPath } = useThemeConfig();
   return (
     <ButtonBase disableRipple component={Link} to={!to ? appDefaultPath : to} sx={sx}>
       {isIcon ? logoIcon : logoMain}
     </ButtonBase>
-  )
-}
+  );
+};
 
 Logo.propTypes = {
   reverse: PropTypes.bool,
@@ -23,7 +23,7 @@ Logo.propTypes = {
   sx: PropTypes.object,
   to: PropTypes.string,
   logoIcon: PropTypes.node,
-  logoMain: PropTypes.node,
-}
+  logoMain: PropTypes.node
+};
 
-export default Logo
+export default Logo;