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

package/src/components/@extended/progress/CircularWithLabel.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 // material-ui
-import { Box, CircularProgress, Typography } from '@mui/material'
+import { Box, CircularProgress, Typography } from '@mui/material';
 
 // ==============================|| PROGRESS - CIRCULAR LABEL ||============================== //
 
@@ -18,17 +18,15 @@ export default function CircularWithLabel({ value, ...others }) {
           position: 'absolute',
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
+          justifyContent: 'center'
         }}
       >
-        <Typography variant="caption" component="div" color="text.secondary">{`${Math.round(
-          value,
-        )}%`}</Typography>
+        <Typography variant="caption" component="div" color="text.secondary">{`${Math.round(value)}%`}</Typography>
       </Box>
     </Box>
-  )
+  );
 }
 
 CircularWithLabel.propTypes = {
-  value: PropTypes.number,
-}
+  value: PropTypes.number
+};

package/src/components/@extended/progress/CircularWithPath.jsx

@@ -1,20 +1,11 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 // material-ui
-import { Box, CircularProgress, Typography, circularProgressClasses } from '@mui/material'
+import { Box, CircularProgress, Typography, circularProgressClasses } from '@mui/material';
 
 // ==============================|| PROGRESS - CIRCULAR PATH ||============================== //
 
-export default function CircularWithPath({
-  value,
-  size,
-  variant,
-  thickness,
-  showLabel,
-  pathColor,
-  sx,
-  ...others
-}) {
+export default function CircularWithPath({ value, size, variant, thickness, showLabel, pathColor, sx, ...others }) {
   return (
     <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress
@@ -35,7 +26,7 @@ export default function CircularWithPath({
             position: 'absolute',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center',
+            justifyContent: 'center'
           }}
         >
           <Typography variant="caption" component="div" color="text.secondary">
@@ -50,8 +41,8 @@ export default function CircularWithPath({
           position: 'absolute',
           left: 0,
           [`& .${circularProgressClasses.circle}`]: {
-            strokeLinecap: 'round',
-          },
+            strokeLinecap: 'round'
+          }
         }}
         size={size}
         thickness={thickness}
@@ -59,7 +50,7 @@ export default function CircularWithPath({
         {...others}
       />
     </Box>
-  )
+  );
 }
 
 CircularWithPath.propTypes = {
@@ -70,5 +61,5 @@ CircularWithPath.propTypes = {
   showLabel: PropTypes.bool,
   pathColor: PropTypes.string,
   sx: PropTypes.array,
-  others: PropTypes.array,
-}
+  others: PropTypes.array
+};

package/src/components/@extended/progress/LinearWithIcon.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 // material-ui
-import { Box, LinearProgress } from '@mui/material'
+import { Box, LinearProgress } from '@mui/material';
 
 // ==============================|| PROGRESS - LINEAR ICON ||============================== //
 
@@ -13,10 +13,10 @@ export default function LinearWithIcon({ icon, value, ...others }) {
       </Box>
       <Box sx={{ minWidth: 35 }}>{icon}</Box>
     </Box>
-  )
+  );
 }
 
 LinearWithIcon.propTypes = {
   icon: PropTypes.node,
-  value: PropTypes.number,
-}
+  value: PropTypes.number
+};

package/src/components/@extended/progress/LinearWithLabel.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 // material-ui
-import { Box, LinearProgress, Typography } from '@mui/material'
+import { Box, LinearProgress, Typography } from '@mui/material';
 
 // ==============================|| PROGRESS - LINEAR WITH LABEL ||============================== //
 
@@ -15,9 +15,9 @@ export default function LinearWithLabel({ value, ...others }) {
         <Typography variant="body2" color="text.secondary">{`${Math.round(value)}%`}</Typography>
       </Box>
     </Box>
-  )
+  );
 }
 
 LinearWithLabel.propTypes = {
-  value: PropTypes.number,
-}
+  value: PropTypes.number
+};

package/src/components/@extended/progress/index.jsx

@@ -1,6 +1,6 @@
-import CircularWithLabel from './CircularWithLabel'
-import CircularWithPath from './CircularWithPath'
-import LinearWithIcon from './LinearWithIcon'
-import LinearWithLabel from './LinearWithLabel'
+import CircularWithLabel from './CircularWithLabel';
+import CircularWithPath from './CircularWithPath';
+import LinearWithIcon from './LinearWithIcon';
+import LinearWithLabel from './LinearWithLabel';
 
-export { CircularWithLabel, CircularWithPath, LinearWithIcon, LinearWithLabel }
+export { CircularWithLabel, CircularWithPath, LinearWithIcon, LinearWithLabel };

package/src/components/Layout/Drawer/DrawerContent/Navigation/NavCollapse.jsx

@@ -1,4 +1,4 @@
-import { BorderOutlined, DownOutlined, RightOutlined, UpOutlined } from '@ant-design/icons'
+import { BorderOutlined, DownOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
 import {
   Box,
   ClickAwayListener,
@@ -10,16 +10,16 @@ import {
   Paper,
   Popper,
   Typography,
-  useMediaQuery,
-} from '@mui/material'
-import { Dot, Transitions } from '../../../../@extended'
-import React, { useEffect, useMemo, useState } from 'react'
-import { styled, useTheme } from '@mui/material/styles'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useMenuConfig, useThemeConfig } from '../../../../../hooks'
+  useMediaQuery
+} from '@mui/material';
+import { Dot, Transitions } from '../../../../@extended';
+import React, { useEffect, useMemo, useState } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useMenuConfig, useThemeConfig } from '../../../../../hooks';
 
-import NavItem from './NavItem'
-import PropTypes from 'prop-types'
+import NavItem from './NavItem';
+import PropTypes from 'prop-types';
 
 const PopperStyled = styled(Popper)(({ theme }) => ({
   overflow: 'visible',
@@ -37,116 +37,108 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
     transform: 'translateY(-50%) rotate(45deg)',
     zIndex: 120,
     borderLeft: `1px solid ${theme.palette.grey.A800}`,
-    borderBottom: `1px solid ${theme.palette.grey.A800}`,
-  },
-}))
+    borderBottom: `1px solid ${theme.palette.grey.A800}`
+  }
+}));
 
-const NavCollapse = ({
-  menu,
-  level,
-  parentId,
-  setSelectedItems,
-  selectedItems,
-  setSelectedLevel,
-  selectedLevel,
-}) => {
-  const theme = useTheme()
-  const { activeItem } = useMenuConfig()
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
-  const { drawerOpen } = useMenuConfig()
-  const { menuOrientation, isVerticalLayout } = useThemeConfig()
-  const Navigation = useNavigate()
+const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }) => {
+  const theme = useTheme();
+  const { activeItem } = useMenuConfig();
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
+  const { drawerOpen } = useMenuConfig();
+  const { menuOrientation, isVerticalLayout } = useThemeConfig();
+  const Navigation = useNavigate();
 
-  const [open, setOpen] = useState(false)
-  const [selected, setSelected] = useState(null)
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
 
-  const [anchorEl, setAnchorEl] = useState(null)
+  const [anchorEl, setAnchorEl] = useState(null);
 
   const handleClick = (event) => {
-    setAnchorEl(null)
-    setSelectedLevel(level)
+    setAnchorEl(null);
+    setSelectedLevel(level);
     if (drawerOpen) {
-      setOpen(!open)
-      setSelected(!selected ? menu.id : null)
-      setSelectedItems(!selected ? menu.id : '')
-      if (menu.url) Navigation(`${menu.url}`)
+      setOpen(!open);
+      setSelected(!selected ? menu.id : null);
+      setSelectedItems(!selected ? menu.id : '');
+      if (menu.url) Navigation(`${menu.url}`);
     } else {
-      setAnchorEl(event?.currentTarget)
+      setAnchorEl(event?.currentTarget);
     }
-  }
+  };
 
   const handlerIconLink = () => {
     if (!drawerOpen) {
-      if (menu.url) Navigation(`${menu.url}`)
+      if (menu.url) Navigation(`${menu.url}`);
     }
-  }
+  };
 
   const handleHover = (event) => {
-    setAnchorEl(event?.currentTarget)
-  }
+    setAnchorEl(event?.currentTarget);
+  };
 
   const handleClose = () => {
-    setOpen(false)
-    setSelected(null)
-    setAnchorEl(null)
-  }
+    setOpen(false);
+    setSelected(null);
+    setAnchorEl(null);
+  };
 
   useMemo(() => {
     if (selected === selectedItems) {
       if (level === 1) {
-        setOpen(true)
+        setOpen(true);
       }
     } else {
       if (level === selectedLevel) {
-        setOpen(false)
-        setSelected(null)
+        setOpen(false);
+        setSelected(null);
       }
     }
-  }, [selectedItems, level, selected, selectedLevel])
+  }, [selectedItems, level, selected, selectedLevel]);
 
-  const { pathname } = useLocation()
-  const openMini = Boolean(anchorEl)
+  const { pathname } = useLocation();
+  const openMini = Boolean(anchorEl);
 
   const checkOpenForParent = (child, id) => {
     child.forEach((item) => {
       if (item.url === pathname) {
-        setOpen(true)
-        setSelected(id)
+        setOpen(true);
+        setSelected(id);
       }
-    })
-  }
+    });
+  };
 
   useEffect(() => {
-    setOpen(false)
-    setSelected(null)
-    if (openMini) setAnchorEl(null)
+    setOpen(false);
+    setSelected(null);
+    if (openMini) setAnchorEl(null);
     if (menu.children) {
       menu.children.forEach((item) => {
         if (item.children?.length) {
-          checkOpenForParent(item.children, menu.id)
+          checkOpenForParent(item.children, menu.id);
         }
         if (item.url === pathname) {
-          setSelected(menu.id)
-          setOpen(true)
+          setSelected(menu.id);
+          setOpen(true);
         }
         if (pathname.includes(item.url)) {
-          setSelected(menu.id)
-          setOpen(true)
+          setSelected(menu.id);
+          setOpen(true);
         }
-      })
+      });
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname, menu.children])
+  }, [pathname, menu.children]);
 
   useEffect(() => {
     if (menu.url === pathname && selected !== menu.id) {
-      activeItem([menu.id])
-      setSelected(menu.id)
-      setAnchorEl(null)
-      setOpen(true)
+      activeItem([menu.id]);
+      setSelected(menu.id);
+      setAnchorEl(null);
+      setOpen(true);
     }
-  }, [pathname, menu, selected, activeItem])
+  }, [pathname, menu, selected, activeItem]);
 
   const navCollapse = menu.children?.map((item) => {
     switch (item.type) {
@@ -162,38 +154,31 @@ const NavCollapse = ({
             level={level + 1}
             parentId={parentId}
           />
-        )
+        );
       case 'item':
-        return <NavItem key={item.id} item={item} level={level + 1} />
+        return <NavItem key={item.id} item={item} level={level + 1} />;
       default:
         return (
           <Typography key={item.id} variant="h6" color="error" align="center">
             Fix - Collapse or Item
           </Typography>
-        )
+        );
     }
-  })
+  });
 
-  const isSelected = selected === menu.id
-  const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false
-  const Icon = menu.icon
-  const menuIcon = menu.icon ? (
-    <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} />
-  ) : (
-    borderIcon
-  )
-  const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary'
-  const iconSelectedColor =
-    theme.palette.mode === 'dark' && drawerOpen
-      ? theme.palette.text.primary
-      : theme.palette.primary.main
-  const popperId = openMini ? `collapse-pop-${menu.id}` : undefined
+  const isSelected = selected === menu.id;
+  const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false;
+  const Icon = menu.icon;
+  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
+  const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary';
+  const iconSelectedColor = theme.palette.mode === 'dark' && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
+  const popperId = openMini ? `collapse-pop-${menu.id}` : undefined;
   const FlexBox = {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    width: '100%',
-  }
+    width: '100%'
+  };
 
   return (
     <>
@@ -209,28 +194,28 @@ const NavCollapse = ({
               py: !drawerOpen && level === 1 ? 1.25 : 1,
               ...(drawerOpen && {
                 '&:hover': {
-                  bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
+                  bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter'
                 },
                 '&.Mui-selected': {
                   bgcolor: 'transparent',
                   color: iconSelectedColor,
                   '&:hover': {
                     color: iconSelectedColor,
-                    bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'transparent',
-                  },
-                },
+                    bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'transparent'
+                  }
+                }
               }),
               ...(!drawerOpen && {
                 '&:hover': {
-                  bgcolor: 'transparent',
+                  bgcolor: 'transparent'
                 },
                 '&.Mui-selected': {
                   '&:hover': {
-                    bgcolor: 'transparent',
+                    bgcolor: 'transparent'
                   },
-                  bgcolor: 'transparent',
-                },
-              }),
+                  bgcolor: 'transparent'
+                }
+              })
             }}
           >
             {menuIcon && (
@@ -246,18 +231,16 @@ const NavCollapse = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                     '&:hover': {
-                      bgcolor:
-                        theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter',
-                    },
+                      bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter'
+                    }
                   }),
                   ...(!drawerOpen &&
                     selected === menu.id && {
                       bgcolor: theme.palette.mode === 'dark' ? 'primary.900' : 'primary.lighter',
                       '&:hover': {
-                        bgcolor:
-                          theme.palette.mode === 'dark' ? 'primary.darker' : 'primary.lighter',
-                      },
-                    }),
+                        bgcolor: theme.palette.mode === 'dark' ? 'primary.darker' : 'primary.lighter'
+                      }
+                    })
                 }}
               >
                 {menuIcon}
@@ -281,9 +264,7 @@ const NavCollapse = ({
             )}
             {(drawerOpen || (!drawerOpen && level !== 1)) &&
               (openMini || open ? (
-                <UpOutlined
-                  style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }}
-                />
+                <UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
               ) : (
                 <DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1 }} />
               ))}
@@ -294,17 +275,17 @@ const NavCollapse = ({
                 anchorEl={anchorEl}
                 placement="right-start"
                 style={{
-                  zIndex: 2001,
+                  zIndex: 2001
                 }}
                 popperOptions={{
                   modifiers: [
                     {
                       name: 'offset',
                       options: {
-                        offset: [-12, 1],
-                      },
-                    },
-                  ],
+                        offset: [-12, 1]
+                      }
+                    }
+                  ]
                 }}
               >
                 {({ TransitionProps }) => (
@@ -315,7 +296,7 @@ const NavCollapse = ({
                         mt: 1.5,
                         boxShadow: theme.customShadows.z1,
                         backgroundImage: 'none',
-                        border: `1px solid ${theme.palette.divider}`,
+                        border: `1px solid ${theme.palette.divider}`
                       }}
                     >
                       <ClickAwayListener onClickAway={handleClose}>
@@ -345,8 +326,8 @@ const NavCollapse = ({
             aria-describedby={popperId}
             sx={{
               '&.Mui-selected': {
-                bgcolor: 'transparent',
-              },
+                bgcolor: 'transparent'
+              }
             }}
           >
             <Box onClick={handlerIconLink} sx={FlexBox}>
@@ -355,7 +336,7 @@ const NavCollapse = ({
                   sx={{
                     my: 'auto',
                     minWidth: !menu.icon ? 18 : 36,
-                    color: theme.palette.secondary.dark,
+                    color: theme.palette.secondary.dark
                   }}
                 >
                   {menuIcon}
@@ -367,7 +348,7 @@ const NavCollapse = ({
                     my: 'auto',
                     minWidth: !menu.icon ? 18 : 36,
                     bgcolor: 'transparent',
-                    '&:hover': { bgcolor: 'transparent' },
+                    '&:hover': { bgcolor: 'transparent' }
                   }}
                 >
                   <Dot size={4} color={isSelected ? 'primary' : 'secondary'} />
@@ -390,15 +371,15 @@ const NavCollapse = ({
                 anchorEl={anchorEl}
                 placement="right-start"
                 style={{
-                  zIndex: 2001,
+                  zIndex: 2001
                 }}
                 modifiers={[
                   {
                     name: 'offset',
                     options: {
-                      offset: [-10, 0],
-                    },
-                  },
+                      offset: [-10, 0]
+                    }
+                  }
                 ]}
               >
                 {({ TransitionProps }) => (
@@ -409,7 +390,7 @@ const NavCollapse = ({
                         mt: 1.5,
                         py: 0.5,
                         boxShadow: theme.shadows[8],
-                        backgroundImage: 'none',
+                        backgroundImage: 'none'
                       }}
                     >
                       <ClickAwayListener onClickAway={handleClose}>
@@ -424,8 +405,8 @@ const NavCollapse = ({
         </>
       )}
     </>
-  )
-}
+  );
+};
 
 NavCollapse.propTypes = {
   menu: PropTypes.object,
@@ -434,7 +415,7 @@ NavCollapse.propTypes = {
   setSelectedItems: PropTypes.func,
   selectedItems: PropTypes.string,
   setSelectedLevel: PropTypes.func,
-  selectedLevel: PropTypes.number,
-}
+  selectedLevel: PropTypes.number
+};
 
-export default NavCollapse
+export default NavCollapse;