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

package/src/components/Layout/Drawer/DrawerHeader/DrawerHeaderStyled.jsx

@@ -1,20 +1,18 @@
-import { Box } from '@mui/material'
-import PropTypes from 'prop-types'
-import { styled } from '@mui/material/styles'
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 
-const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => ({
-    ...theme.mixins.toolbar,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: open ? 'flex-start' : 'center',
-    paddingLeft: theme.spacing(open ? 3 : 0),
-  }),
-)
+const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+  ...theme.mixins.toolbar,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: open ? 'flex-start' : 'center',
+  paddingLeft: theme.spacing(open ? 3 : 0)
+}));
 
 DrawerHeaderStyled.propTypes = {
   theme: PropTypes.object,
-  open: PropTypes.bool,
-}
+  open: PropTypes.bool
+};
 
-export default DrawerHeaderStyled
+export default DrawerHeaderStyled;

package/src/components/Layout/Drawer/DrawerHeader/index.jsx

@@ -1,17 +1,17 @@
-import DrawerHeaderStyled from './DrawerHeaderStyled'
-import Logo from '../../../Logo'
-import PropTypes from 'prop-types'
-import { useMediaQuery } from '@mui/material'
-import { useTheme } from '@mui/material/styles'
-import { useThemeConfig } from '../../../../hooks'
+import DrawerHeaderStyled from './DrawerHeaderStyled';
+import Logo from '../../../Logo';
+import PropTypes from 'prop-types';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useThemeConfig } from '../../../../hooks';
 
 const DrawerHeader = ({ open, logoMain, logoIcon }) => {
-  const theme = useTheme()
+  const theme = useTheme();
 
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
-  const { menuOrientation, isHorizontalLayout } = useThemeConfig()
-  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG
+  const { menuOrientation, isHorizontalLayout } = useThemeConfig();
+  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
 
   return (
     <DrawerHeaderStyled
@@ -22,23 +22,18 @@ const DrawerHeader = ({ open, logoMain, logoIcon }) => {
         width: isHorizontal ? { xs: '100%', lg: '424px' } : 'inherit',
         paddingTop: isHorizontal ? { xs: '10px', lg: '0' } : '8px',
         paddingBottom: isHorizontal ? { xs: '18px', lg: '0' } : '8px',
-        paddingLeft: isHorizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0,
+        paddingLeft: isHorizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0
       }}
     >
-      <Logo
-        isIcon={!open}
-        sx={{ width: open ? 'auto' : 35, height: 35 }}
-        logoMain={logoMain}
-        logoIcon={logoIcon}
-      />
+      <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} logoMain={logoMain} logoIcon={logoIcon} />
     </DrawerHeaderStyled>
-  )
-}
+  );
+};
 
 DrawerHeader.propTypes = {
   open: PropTypes.bool,
   logoMain: PropTypes.node,
-  logoIcon: PropTypes.node,
-}
+  logoIcon: PropTypes.node
+};
 
-export default DrawerHeader
+export default DrawerHeader;

package/src/components/Layout/Drawer/HorizontalBar.jsx

@@ -1,31 +1,31 @@
-import { AppBar, Box, Container, useScrollTrigger } from '@mui/material'
+import { AppBar, Box, Container, useScrollTrigger } from '@mui/material';
 
-import Navigation from './DrawerContent/Navigation'
-import React from 'react'
-import { useTheme } from '@mui/material/styles'
-import { useThemeConfig } from '../../../hooks'
+import Navigation from './DrawerContent/Navigation';
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useThemeConfig } from '../../../hooks';
 
 function ElevationScroll({ children, window }) {
-  const theme = useTheme()
+  const theme = useTheme();
   // Note that you normally won't need to set the window ref as useScrollTrigger
   // will default to window.
   // This is only being set here because the demo is in an iframe.
   const trigger = useScrollTrigger({
     disableHysteresis: true,
     threshold: 0,
-    target: window,
-  })
+    target: window
+  });
 
-  theme.shadows[4] = theme.customShadows.z1
+  theme.shadows[4] = theme.customShadows.z1;
 
   return React.cloneElement(children, {
-    elevation: trigger ? 4 : 0,
-  })
+    elevation: trigger ? 4 : 0
+  });
 }
 
 const CustomAppBar = () => {
-  const theme = useTheme()
-  const { container } = useThemeConfig()
+  const theme = useTheme();
+  const { container } = useThemeConfig();
 
   return (
     <ElevationScroll>
@@ -39,7 +39,7 @@ const CustomAppBar = () => {
           borderTop: `1px solid ${theme.palette.divider}`,
           borderBottom: `1px solid ${theme.palette.divider}`,
           zIndex: 1098,
-          color: theme.palette.grey[500],
+          color: theme.palette.grey[500]
         }}
       >
         <Container maxWidth={container ? 'xl' : false}>
@@ -49,7 +49,7 @@ const CustomAppBar = () => {
         </Container>
       </AppBar>
     </ElevationScroll>
-  )
-}
+  );
+};
 
-export default CustomAppBar
+export default CustomAppBar;

package/src/components/Layout/Drawer/MiniDrawerStyled.jsx

@@ -1,47 +1,45 @@
-import Drawer from '@mui/material/Drawer'
-import { styled } from '@mui/material/styles'
-import { useThemeConfig } from '../../../hooks'
+import Drawer from '@mui/material/Drawer';
+import { styled } from '@mui/material/styles';
+import { useThemeConfig } from '../../../hooks';
 
 const openedMixin = (theme, drawerWidth) => ({
   width: drawerWidth,
   borderRight: `1px solid ${theme.palette.divider}`,
   transition: theme.transitions.create('width', {
     easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.enteringScreen,
+    duration: theme.transitions.duration.enteringScreen
   }),
   overflowX: 'hidden',
-  boxShadow: theme.palette.mode === 'dark' ? theme.customShadows.z1 : 'none',
-})
+  boxShadow: theme.palette.mode === 'dark' ? theme.customShadows.z1 : 'none'
+});
 
 const closedMixin = (theme) => ({
   transition: theme.transitions.create('width', {
     easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
+    duration: theme.transitions.duration.leavingScreen
   }),
   overflowX: 'hidden',
   width: theme.spacing(7.5),
   borderRight: 'none',
-  boxShadow: theme.customShadows.z1,
-})
+  boxShadow: theme.customShadows.z1
+});
 
-const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => {
-    const { drawerWidth } = useThemeConfig()
-    return {
-      width: drawerWidth,
-      flexShrink: 0,
-      whiteSpace: 'nowrap',
-      boxSizing: 'border-box',
-      ...(open && {
-        ...openedMixin(theme, drawerWidth),
-        '& .MuiDrawer-paper': openedMixin(theme, drawerWidth),
-      }),
-      ...(!open && {
-        ...closedMixin(theme),
-        '& .MuiDrawer-paper': closedMixin(theme),
-      }),
-    }
-  },
-)
+const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => {
+  const { drawerWidth } = useThemeConfig();
+  return {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+    ...(open && {
+      ...openedMixin(theme, drawerWidth),
+      '& .MuiDrawer-paper': openedMixin(theme, drawerWidth)
+    }),
+    ...(!open && {
+      ...closedMixin(theme),
+      '& .MuiDrawer-paper': closedMixin(theme)
+    })
+  };
+});
 
-export default MiniDrawerStyled
+export default MiniDrawerStyled;

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

@@ -1,23 +1,20 @@
-import { Box, Drawer, useMediaQuery } from '@mui/material'
+import { Box, Drawer, useMediaQuery } from '@mui/material';
 
-import DrawerContent from './DrawerContent'
-import DrawerHeader from './DrawerHeader'
-import MiniDrawerStyled from './MiniDrawerStyled'
-import PropTypes from 'prop-types'
-import { useMemo } from 'react'
-import { useTheme } from '@mui/material/styles'
-import { useThemeConfig } from '../../../hooks'
+import DrawerContent from './DrawerContent';
+import DrawerHeader from './DrawerHeader';
+import MiniDrawerStyled from './MiniDrawerStyled';
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useThemeConfig } from '../../../hooks';
 
 const MainDrawer = ({ open, handleDrawerToggle, window, logoMain, logoIcon }) => {
-  const theme = useTheme()
-  const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'))
-  const container = window !== undefined ? () => window().document.body : undefined
-  const drawerContent = useMemo(() => <DrawerContent />, [])
-  const drawerHeader = useMemo(
-    () => <DrawerHeader open={open} logoMain={logoMain} logoIcon={logoIcon} />,
-    [open, logoMain, logoIcon],
-  )
-  const { drawerWidth } = useThemeConfig()
+  const theme = useTheme();
+  const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));
+  const container = window !== undefined ? () => window().document.body : undefined;
+  const drawerContent = useMemo(() => <DrawerContent />, []);
+  const drawerHeader = useMemo(() => <DrawerHeader open={open} logoMain={logoMain} logoIcon={logoIcon} />, [open, logoMain, logoIcon]);
+  const { drawerWidth } = useThemeConfig();
 
   return (
     <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1200 }} aria-label="mailbox folders">
@@ -40,8 +37,8 @@ const MainDrawer = ({ open, handleDrawerToggle, window, logoMain, logoIcon }) =>
               width: drawerWidth,
               borderRight: `1px solid ${theme.palette.divider}`,
               backgroundImage: 'none',
-              boxShadow: 'inherit',
-            },
+              boxShadow: 'inherit'
+            }
           }}
         >
           {drawerHeader}
@@ -49,15 +46,15 @@ const MainDrawer = ({ open, handleDrawerToggle, window, logoMain, logoIcon }) =>
         </Drawer>
       )}
     </Box>
-  )
-}
+  );
+};
 
 MainDrawer.propTypes = {
   open: PropTypes.bool,
   window: PropTypes.object,
   handleDrawerToggle: PropTypes.func,
   logoMain: PropTypes.node,
-  logoIcon: PropTypes.node,
-}
+  logoIcon: PropTypes.node
+};
 
-export default MainDrawer
+export default MainDrawer;

package/src/components/Layout/Footer.jsx

@@ -1,23 +1,18 @@
-import { Stack, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material';
 
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 const Footer = ({ name, version }) => (
-  <Stack
-    direction="row"
-    justifyContent="space-between"
-    alignItems="center"
-    sx={{ p: '24px 16px 0px', mt: 'auto' }}
-  >
+  <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: '24px 16px 0px', mt: 'auto' }}>
     <Typography variant="caption">
       &copy; Applica Software Guru for {name} - {version}
     </Typography>
   </Stack>
-)
+);
 
 Footer.propTypes = {
   name: PropTypes.string.isRequired,
-  version: PropTypes.string.isRequired,
-}
+  version: PropTypes.string.isRequired
+};
 
-export default Footer
+export default Footer;

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

@@ -1,34 +1,32 @@
-import AppBar from '@mui/material/AppBar'
-import PropTypes from 'prop-types'
-import { styled } from '@mui/material/styles'
-import { useThemeConfig } from '../../../hooks'
+import AppBar from '@mui/material/AppBar';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useThemeConfig } from '../../../hooks';
 
-const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => {
-    const { drawerWidth } = useThemeConfig()
-    return {
-      zIndex: theme.zIndex.drawer + 1,
+const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => {
+  const { drawerWidth } = useThemeConfig();
+  return {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    ...(!open && {
+      width: `calc(100% - ${theme.spacing(7.5)})`
+    }),
+    ...(open && {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
       transition: theme.transitions.create(['width', 'margin'], {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      ...(!open && {
-        width: `calc(100% - ${theme.spacing(7.5)})`,
-      }),
-      ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-      }),
-    }
-  },
-)
+        duration: theme.transitions.duration.enteringScreen
+      })
+    })
+  };
+});
 
 AppBarStyled.propTypes = {
-  open: PropTypes.bool,
-}
+  open: PropTypes.bool
+};
 
-export default AppBarStyled
+export default AppBarStyled;

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

@@ -1,39 +1,39 @@
-import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material'
-import { IconButton, Transitions } from '../../../@extended'
-import { useEffect, useRef, useState } from 'react'
+import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
+import { IconButton, Transitions } from '../../../@extended';
+import { useEffect, useRef, useState } from 'react';
 
-import { MoreOutlined } from '@ant-design/icons'
-import Profile from './Profile'
-import { useTheme } from '@mui/material/styles'
+import { MoreOutlined } from '@ant-design/icons';
+import Profile from './Profile';
+import { useTheme } from '@mui/material/styles';
 
 const MobileSection = () => {
-  const theme = useTheme()
+  const theme = useTheme();
 
-  const [open, setOpen] = useState(false)
-  const anchorRef = useRef(null)
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
 
   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 prevOpen = useRef(open)
+  const prevOpen = useRef(open);
   useEffect(() => {
     if (prevOpen.current === true && open === false) {
-      anchorRef.current.focus()
+      anchorRef.current.focus();
     }
 
-    prevOpen.current = open
-  }, [open])
+    prevOpen.current = open;
+  }, [open]);
 
-  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';
 
   return (
     <>
@@ -64,10 +64,10 @@ const MobileSection = () => {
             {
               name: 'offset',
               options: {
-                offset: [0, 9],
-              },
-            },
-          ],
+                offset: [0, 9]
+              }
+            }
+          ]
         }}
       >
         {({ TransitionProps }) => (
@@ -85,7 +85,7 @@ const MobileSection = () => {
         )}
       </Popper>
     </>
-  )
-}
+  );
+};
 
-export default MobileSection
+export default MobileSection;

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

@@ -1,28 +1,19 @@
-import {
-  Badge,
-  Box,
-  ClickAwayListener,
-  List,
-  Paper,
-  Popper,
-  Tooltip,
-  useMediaQuery
-} from '@mui/material'
-import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons'
-import { IconButton, Transitions } from '../../../@extended'
-import { useEffect, useRef, useState } from 'react'
+import { Badge, Box, ClickAwayListener, List, Paper, Popper, Tooltip, useMediaQuery } from '@mui/material';
+import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { IconButton, Transitions } from '../../../@extended';
+import { useEffect, useRef, useState } from 'react';
 
-import MainCard from '../../../MainCard'
-import NotificationItem from './NotificationItem'
-import PropTypes from 'prop-types'
-import { useGetList } from 'react-admin'
-import { useTheme } from '@mui/material/styles'
+import MainCard from '../../../MainCard';
+import NotificationItem from './NotificationItem';
+import PropTypes from 'prop-types';
+import { useGetList } from 'react-admin';
+import { useTheme } from '@mui/material/styles';
 
 const avatarSX = {
   width: 36,
   height: 36,
   fontSize: '1rem'
-}
+};
 
 const actionSX = {
   mt: '6px',
@@ -32,27 +23,27 @@ const actionSX = {
   alignSelf: 'flex-start',
 
   transform: 'none'
-}
+};
 
 const Notification = ({ resource }) => {
-  const theme = useTheme()
-  const matchesXs = useMediaQuery(theme.breakpoints.down('md'))
+  const theme = useTheme();
+  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
 
-  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 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 { data, isLoading } = useGetList(resource, {
     pagination: { page: 1, perPage: 50 },
@@ -60,10 +51,10 @@ const Notification = ({ resource }) => {
     filter: {
       readed: false
     }
-  })
-  const [notifications, setNotifications] = useState([])
-  useEffect(() => setNotifications(!isLoading && data ? data : []), [data, isLoading])
-  const read = notifications.filter((item) => item.readed === null).length
+  });
+  const [notifications, setNotifications] = useState([]);
+  useEffect(() => setNotifications(!isLoading && data ? data : []), [data, isLoading]);
+  const read = notifications.filter((item) => item.readed === null).length;
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
@@ -100,13 +91,7 @@ const Notification = ({ resource }) => {
         }}
       >
         {({ TransitionProps }) => (
-          <Transitions
-            type="grow"
-            position={matchesXs ? 'top' : 'top-right'}
-            sx={{ overflow: 'hidden' }}
-            in={open}
-            {...TransitionProps}
-          >
+          <Transitions type="grow" position={matchesXs ? 'top' : 'top-right'} sx={{ overflow: 'hidden' }} in={open} {...TransitionProps}>
             <Paper
               sx={{
                 boxShadow: theme.customShadows.z1,
@@ -149,13 +134,7 @@ const Notification = ({ resource }) => {
                     }}
                   >
                     {notifications.map((item) => (
-                      <NotificationItem
-                        resource={resource}
-                        key={item.id}
-                        selected={read > 0}
-                        notification={item}
-                        onClick={handleClose}
-                      />
+                      <NotificationItem resource={resource} key={item.id} selected={read > 0} notification={item} onClick={handleClose} />
                     ))}
                   </List>
                 </MainCard>
@@ -165,15 +144,15 @@ const Notification = ({ resource }) => {
         )}
       </Popper>
     </Box>
-  )
-}
+  );
+};
 
-Notification.displayName = 'Notification'
+Notification.displayName = 'Notification';
 Notification.defaultProps = {
   resource: 'entities/notification'
-}
+};
 Notification.propTypes = {
   resource: PropTypes.string.isRequired
-}
+};
 
-export default Notification
+export default Notification;