codedthemes · ct-jahidhasan · Sep 25, 2024 · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024
diff --git a/.env b/.env
@@ -1,4 +1,4 @@
-VITE_APP_VERSION=v1.3.0
+VITE_APP_VERSION=v1.4.0
 GENERATE_SOURCEMAP=false
 
 ## Backend API URL

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantis-free-react-admin-template",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "homepage": "https://mantisdashboard.io/free",
   "author": {
@@ -17,42 +17,42 @@
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@ant-design/colors": "^7.0.2",
-    "@ant-design/icons": "^5.3.1",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/inter": "^5.0.17",
-    "@fontsource/poppins": "^5.0.12",
-    "@fontsource/public-sans": "^5.0.17",
-    "@fontsource/roboto": "^5.0.12",
-    "@mui/base": "^5.0.0-beta.38",
-    "@mui/lab": "^5.0.0-alpha.167",
-    "@mui/material": "^5.15.12",
-    "@mui/system": "^5.15.12",
+    "@ant-design/colors": "^7.1.0",
+    "@ant-design/icons": "^5.5.1",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/inter": "^5.1.0",
+    "@fontsource/poppins": "^5.1.0",
+    "@fontsource/public-sans": "^5.1.1",
+    "@fontsource/roboto": "^5.1.0",
+    "@mui/base": "^5.0.0-beta.58",
+    "@mui/lab": "^6.0.0-beta.11",
+    "@mui/material": "^6.1.3",
+    "@mui/system": "^6.1.3",
     "@svgr/webpack": "^8.1.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "apexcharts": "^3.49.0",
-    "formik": "^2.4.5",
-    "framer-motion": "^11.0.8",
+    "@vitejs/plugin-react": "^4.3.2",
+    "apexcharts": "^3.54.0",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.11.8",
     "lodash": "^4.17.21",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
-    "react-number-format": "^5.3.3",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3",
-    "simplebar-react": "^3.2.4",
+    "react-dom": "^18.3.1",
+    "react-number-format": "^5.4.2",
+    "react-router": "^6.27.0",
+    "react-router-dom": "^6.27.0",
+    "simplebar-react": "^3.2.6",
     "slick-carousel": "^1.8.1",
     "swr": "^2.2.5",
     "util": "^0.12.5",
-    "vite": "^5.2.10",
+    "vite": "^5.4.8",
     "vite-jsconfig-paths": "^2.0.1",
-    "web-vitals": "^3.5.2",
+    "web-vitals": "^4.2.3",
     "yup": "^1.4.0"
   },
   "eslintConfig": {
@@ -79,19 +79,19 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/eslint-parser": "^7.23.10",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "eslint": "^8.56.0",
+    "@babel/core": "^7.25.8",
+    "@babel/eslint-parser": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "react-error-overlay": "6.0.11"
   }
 }
diff --git a/src/components/@extended/Avatar.jsx b/src/components/@extended/Avatar.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 // material-ui
-import { styled, useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import MuiAvatar from '@mui/material/Avatar';
 
 // project import
@@ -95,10 +95,8 @@ const AvatarStyle = styled(MuiAvatar, { shouldForwardProp: (prop) => prop !== 'c
 );
 
 export default function Avatar({ children, color = 'primary', type, size = 'md', ...others }) {
-  const theme = useTheme();
-
   return (
-    <AvatarStyle theme={theme} color={color} type={type} size={size} {...others}>
+    <AvatarStyle color={color} type={type} size={size} {...others}>
       {children}
     </AvatarStyle>
   );

diff --git a/src/components/@extended/Breadcrumbs.jsx b/src/components/@extended/Breadcrumbs.jsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 // material-ui
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
 
@@ -74,7 +74,7 @@ export default function Breadcrumbs({ navigation, title, ...others }) {
       breadcrumbContent = (
         <MainCard border={false} sx={{ mb: 3, bgcolor: 'transparent' }} {...others} content={false}>
           <Grid container direction="column" justifyContent="flex-start" alignItems="flex-start" spacing={1}>
-            <Grid item>
+            <Grid>
               <MuiBreadcrumbs aria-label="breadcrumb">
                 <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
                   Home
@@ -84,7 +84,7 @@ export default function Breadcrumbs({ navigation, title, ...others }) {
               </MuiBreadcrumbs>
             </Grid>
             {title && (
-              <Grid item sx={{ mt: 2 }}>
+              <Grid sx={{ mt: 2 }}>
                 <Typography variant="h5">{item.title}</Typography>
               </Grid>
             )}
@@ -111,5 +111,6 @@ Breadcrumbs.propTypes = {
   title: PropTypes.bool,
   titleBottom: PropTypes.bool,
   sx: PropTypes.any,
-  others: PropTypes.any
+  others: PropTypes.any,
+  navigation: PropTypes.object
 };
diff --git a/src/components/MainCard.jsx b/src/components/MainCard.jsx
@@ -6,7 +6,6 @@ import { useTheme } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardHeader from '@mui/material/CardHeader';
-import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 
 // header style

diff --git a/src/components/cards/statistics/AnalyticEcommerce.jsx b/src/components/cards/statistics/AnalyticEcommerce.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 // material-ui
 import Chip from '@mui/material/Chip';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -24,13 +24,13 @@ export default function AnalyticEcommerce({ color = 'primary', title, count, per
           {title}
         </Typography>
         <Grid container alignItems="center">
-          <Grid item>
+          <Grid>
             <Typography variant="h4" color="inherit">
               {count}
             </Typography>
           </Grid>
           {percentage && (
-            <Grid item>
+            <Grid>
               <Chip
                 variant="combined"
                 color={color}

diff --git a/src/layout/Dashboard/Drawer/DrawerHeader/index.jsx b/src/layout/Dashboard/Drawer/DrawerHeader/index.jsx
@@ -1,19 +1,14 @@
 import PropTypes from 'prop-types';
 
-// material-ui
-import { useTheme } from '@mui/material/styles';
-
 // project import
 import DrawerHeaderStyled from './DrawerHeaderStyled';
 import Logo from 'components/logo';
 
 // ==============================|| DRAWER HEADER ||============================== //
 
 export default function DrawerHeader({ open }) {
-  const theme = useTheme();
-
   return (
-    <DrawerHeaderStyled theme={theme} open={!!open}>
+    <DrawerHeaderStyled open={!!open}>
       <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} />
     </DrawerHeaderStyled>
   );

diff --git a/src/layout/Dashboard/Header/HeaderContent/Notification.jsx b/src/layout/Dashboard/Header/HeaderContent/Notification.jsx
@@ -12,7 +12,6 @@ import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemText from '@mui/material/ListItemText';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import Tooltip from '@mui/material/Tooltip';
@@ -38,12 +37,13 @@ const avatarSX = {
 };
 
 const actionSX = {
-  mt: '6px',
+  mt: 1,
   ml: 1,
   top: 'auto',
   right: 'auto',
   alignSelf: 'flex-start',
-
+  position: 'relative',
+  overflow: 'inherit',
   transform: 'none'
 };
 
@@ -122,8 +122,7 @@ export default function Notification() {
                       '& .MuiListItemButton-root': {
                         py: 0.5,
                         '&.Mui-selected': { bgcolor: 'grey.50', color: 'text.primary' },
-                        '& .MuiAvatar-root': avatarSX,
-                        '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                        '& .MuiAvatar-root': avatarSX
                       }
                     }}
                   >
@@ -145,11 +144,9 @@ export default function Notification() {
                         }
                         secondary="2 min ago"
                       />
-                      <ListItemSecondaryAction>
-                        <Typography variant="caption" noWrap>
-                          3:00 AM
-                        </Typography>
-                      </ListItemSecondaryAction>
+                      <Typography sx={actionSX} variant="caption" noWrap>
+                        3:00 AM
+                      </Typography>
                     </ListItemButton>
                     <Divider />
                     <ListItemButton>
@@ -169,11 +166,9 @@ export default function Notification() {
                         }
                         secondary="5 August"
                       />
-                      <ListItemSecondaryAction>
-                        <Typography variant="caption" noWrap>
-                          6:00 PM
-                        </Typography>
-                      </ListItemSecondaryAction>
+                      <Typography sx={actionSX} variant="caption" noWrap>
+                        6:00 PM
+                      </Typography>
                     </ListItemButton>
                     <Divider />
                     <ListItemButton selected={read > 0}>
@@ -193,11 +188,9 @@ export default function Notification() {
                         }
                         secondary="7 hours ago"
                       />
-                      <ListItemSecondaryAction>
-                        <Typography variant="caption" noWrap>
-                          2:45 PM
-                        </Typography>
-                      </ListItemSecondaryAction>
+                      <Typography sx={actionSX} variant="caption" noWrap>
+                        2:45 PM
+                      </Typography>
                     </ListItemButton>
                     <Divider />
                     <ListItemButton>
@@ -218,11 +211,9 @@ export default function Notification() {
                         }
                         secondary="Daily scrum meeting time"
                       />
-                      <ListItemSecondaryAction>
-                        <Typography variant="caption" noWrap>
-                          9:10 PM
-                        </Typography>
-                      </ListItemSecondaryAction>
+                      <Typography sx={actionSX} variant="caption" noWrap>
+                        9:10 PM
+                      </Typography>
                     </ListItemButton>
                     <Divider />
                     <ListItemButton sx={{ textAlign: 'center', py: `${12}px !important` }}>

diff --git a/src/layout/Dashboard/Header/HeaderContent/Profile/index.jsx b/src/layout/Dashboard/Header/HeaderContent/Profile/index.jsx
@@ -6,7 +6,7 @@ import { useTheme } from '@mui/material/styles';
 import ButtonBase from '@mui/material/ButtonBase';
 import CardContent from '@mui/material/CardContent';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import Popper from '@mui/material/Popper';
@@ -120,7 +120,7 @@ export default function Profile() {
                 <MainCard elevation={0} border={false} content={false}>
                   <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid container justifyContent="space-between" alignItems="center">
-                      <Grid item>
+                      <Grid>
                         <Stack direction="row" spacing={1.25} alignItems="center">
                           <Avatar alt="profile user" src={avatar1} sx={{ width: 32, height: 32 }} />
                           <Stack>
@@ -131,7 +131,7 @@ export default function Profile() {
                           </Stack>
                         </Stack>
                       </Grid>
-                      <Grid item>
+                      <Grid>
                         <Tooltip title="Logout">
                           <IconButton size="large" sx={{ color: 'text.primary' }}>
                             <LogoutOutlined />

diff --git a/src/pages/authentication/AuthWrapper.jsx b/src/pages/authentication/AuthWrapper.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 // material-ui
-import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 
 // project import
@@ -18,28 +18,21 @@ export default function AuthWrapper({ children }) {
   return (
     <Box sx={{ minHeight: '100vh' }}>
       <AuthBackground />
-      <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
-        <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
+      <Stack justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
+        <Box sx={{ ml: 3, mt: 3 }}>
           <Logo />
-        </Grid>
-        <Grid item xs={12}>
-          <Grid
-            item
-            xs={12}
-            container
-            justifyContent="center"
-            alignItems="center"
-            sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
-          >
-            <Grid item>
-              <AuthCard>{children}</AuthCard>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Grid item xs={12} sx={{ m: 3, mt: 1 }}>
+        </Box>
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
+        >
+          <AuthCard>{children}</AuthCard>
+        </Stack>
+        <Box size={12} sx={{ m: 3, mt: 1 }}>
           <AuthFooter />
-        </Grid>
-      </Grid>
+        </Box>
+      </Stack>
     </Box>
   );
 }