codedthemes · phoenixcoded20 · Oct 29, 2025 · Oct 16, 2025 · Oct 16, 2025 · Oct 17, 2025
diff --git a/.env b/.env
@@ -1,4 +1,4 @@
-VITE_APP_VERSION = v1.6.0
+VITE_APP_VERSION = v2.0.0
 GENERATE_SOURCEMAP = false
 
 ## Public URL

diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml
@@ -30,7 +30,7 @@ jobs:
       - name: 🔨 Build Project
         run: |
           corepack enable
-          yarn set version 4.9.1
+          yarn set version 4.10.3
           yarn
           yarn build
 

diff --git a/index.html b/index.html
@@ -1,51 +1,48 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <title>Mantis React Admin Dashboard</title>
-    <link rel="icon" href="/favicon.svg" />
 
-    <!-- Meta Tags-->
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#1677ff" />
-    <meta name="title" content="Mantis - React Admin Dashboard Template by CodedThemes" />
-    <meta
-      name="description"
-      content="Start your next React project with Mantis admin template. It build with Reactjs, Material-UI, SWR, and Hook for faster web development."
-    />
-    <meta
-      name="keywords"
-      content="react admin template, material-ui react dashboard template, reactjs admin template, reactjs dashboard, react backend template"
-    />
-    <meta name="author" content="CodedThemes" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
+<head>
+  <title>Mantis React Admin Dashboard</title>
+  <link rel="icon" href="/favicon.svg" />
 
-    <!-- Performance hints for Vite -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <!-- Meta Tags-->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#1677ff" />
+  <meta name="title" content="Mantis - React Admin Dashboard Template by CodedThemes" />
+  <meta name="description"
+    content="Start your next React project with Mantis admin template. It build with Reactjs, Material-UI, SWR, and Hook for faster web development." />
+  <meta name="keywords"
+    content="react admin template, material-ui react dashboard template, reactjs admin template, reactjs dashboard, react backend template" />
+  <meta name="author" content="CodedThemes" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
 
-    <!-- DNS prefetch for external resources -->
-    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
-    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
+  <!-- Performance hints for Vite -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-    <!-- this is to resolve issue in old safari browser in tablet -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ResizeObserver.min.js"></script>
-    <!-- Buy Now  -->
-    <script defer="" src="https://fomo.codedthemes.com/pixel/Oo2pYDncP8R8qhhETpWKGA04b8jPhUjF"></script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <!-- DNS prefetch for external resources -->
+  <link rel="dns-prefetch" href="//fonts.googleapis.com" />
+  <link rel="dns-prefetch" href="//fonts.gstatic.com" />
+
+  <!-- this is to resolve issue in old safari browser in tablet -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ResizeObserver.min.js"></script>
+  <!-- Buy Now  -->
+  <script defer="" src="https://fomo.codedthemes.com/pixel/Oo2pYDncP8R8qhhETpWKGA04b8jPhUjF"></script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
-
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
-
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script type="module" src="/src/index.jsx"></script>
-  </body>
-</html>
+  <script type="module" src="/src/index.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantis-material-free-react",
-  "version": "1.6.0",
+  "version": "4.0.0",
   "homepage": "https://mantisdashboard.com/free",
   "author": {
     "name": "CodedThemes",
@@ -16,36 +16,33 @@
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@ant-design/colors": "8.0.0",
-    "@ant-design/icons": "6.0.0",
+    "@ant-design/colors": "7.2.1",
+    "@ant-design/icons": "6.1.0",
     "@emotion/cache": "11.14.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "@fontsource/inter": "5.2.6",
-    "@fontsource/poppins": "5.2.6",
-    "@fontsource/public-sans": "5.2.6",
-    "@fontsource/roboto": "5.2.6",
+    "@fontsource/public-sans": "5.2.7",
     "@mui/base": "5.0.0-beta.70",
-    "@mui/lab": "7.0.0-beta.10",
-    "@mui/material": "7.0.2",
-    "@mui/system": "7.0.2",
-    "@mui/x-charts": "8.1.0",
-    "@vitejs/plugin-react": "4.6.0",
+    "@mui/lab": "7.0.1-beta.18",
+    "@mui/material": "7.3.4",
+    "@mui/system": "7.3.3",
+    "@mui/x-charts": "8.14.0",
+    "@vitejs/plugin-react": "5.0.4",
     "formik": "2.4.6",
-    "framer-motion": "12.8.2",
+    "framer-motion": "12.23.24",
     "lodash-es": "4.17.21",
-    "react": "19.1.0",
+    "react": "19.2.0",
     "react-device-detect": "2.2.3",
-    "react-dom": "19.1.0",
+    "react-dom": "19.2.0",
     "react-number-format": "5.4.4",
-    "react-router": "7.6.3",
-    "react-router-dom": "7.6.3",
+    "react-router": "7.9.4",
+    "react-router-dom": "7.9.4",
     "simplebar-react": "3.3.2",
-    "swr": "2.3.4",
-    "vite": "7.0.4",
+    "swr": "2.3.6",
+    "vite": "7.1.9",
     "vite-jsconfig-paths": "2.0.1",
-    "web-vitals": "4.2.4",
-    "yup": "1.6.1"
+    "web-vitals": "5.1.0",
+    "yup": "1.7.1"
   },
   "eslintConfig": {
     "extends": [
@@ -66,16 +63,16 @@
     ]
   },
   "devDependencies": {
-    "@eslint/compat": "1.3.1",
+    "@eslint/compat": "1.4.0",
     "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.31.0",
-    "eslint": "9.25.1",
+    "@eslint/js": "9.37.0",
+    "eslint": "9.37.0",
     "eslint-config-prettier": "10.1.2",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.6",
+    "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "7.0.0",
     "prettier": "3.6.2"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.10.3"
 }
diff --git a/src/components/@extended/Avatar.jsx b/src/components/@extended/Avatar.jsx
@@ -92,7 +92,7 @@ const AvatarStyle = styled(MuiAvatar, { shouldForwardProp: (prop) => prop !== 'c
       {
         props: { size: 'badge' },
         style: {
-          borderColor: theme.palette.background.default
+          borderColor: theme.vars.palette.background.default
         }
       }
     ]

diff --git a/src/components/@extended/Breadcrumbs.jsx b/src/components/@extended/Breadcrumbs.jsx
@@ -45,7 +45,7 @@ export default function Breadcrumbs({
     marginLeft: 0,
     width: '1rem',
     height: '1rem',
-    color: theme.palette.secondary.main
+    color: theme.vars.palette.secondary.main
   };
 
   let customLocation = location.pathname;
@@ -128,9 +128,8 @@ export default function Breadcrumbs({
           <Grid
             container
             direction={rightAlign ? 'row' : 'column'}
-            justifyContent={rightAlign ? 'space-between' : 'flex-start'}
-            alignItems={rightAlign ? 'center' : 'flex-start'}
             spacing={1}
+            sx={{ justifyContent: rightAlign ? 'space-between' : 'flex-start', alignItems: rightAlign ? 'center' : 'flex-start' }}
           >
             <Grid>
               <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
@@ -214,9 +213,8 @@ export default function Breadcrumbs({
           <Grid
             container
             direction={rightAlign ? 'row' : 'column'}
-            justifyContent={rightAlign ? 'space-between' : 'flex-start'}
-            alignItems={rightAlign ? 'center' : 'flex-start'}
             spacing={1}
+            sx={{ justifyContent: rightAlign ? 'space-between' : 'flex-start', alignItems: rightAlign ? 'center' : 'flex-start' }}
           >
             {title && !titleBottom && (
               <Grid>

diff --git a/src/components/@extended/Dot.jsx b/src/components/@extended/Dot.jsx
@@ -6,13 +6,14 @@ import Box from '@mui/material/Box';
 // project imports
 import getColors from 'utils/getColors';
 
-export default function Dot({ color, size, variant, sx }) {
+export default function Dot({ color, size, variant, sx, ...rest }) {
   const theme = useTheme();
   const colors = getColors(theme, color || 'primary');
   const { main } = colors;
 
   return (
     <Box
+      {...rest}
       sx={{
         width: size || 8,
         height: size || 8,
@@ -24,4 +25,4 @@ export default function Dot({ color, size, variant, sx }) {
   );
 }
 
-Dot.propTypes = { color: PropTypes.any, size: PropTypes.number, variant: PropTypes.string, sx: PropTypes.any };
+Dot.propTypes = { color: PropTypes.any, size: PropTypes.number, variant: PropTypes.string, sx: PropTypes.any, rest: PropTypes.any };
diff --git a/src/components/@extended/IconButton.jsx b/src/components/@extended/IconButton.jsx
@@ -2,11 +2,12 @@ import PropTypes from 'prop-types';
 
 // material-ui
 import MuiIconButton from '@mui/material/IconButton';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 
 // project imports
 import getColors from 'utils/getColors';
 import getShadow from 'utils/getShadow';
+import { withAlpha } from 'utils/colorUtils';
 
 function getColorStyle({ variant, theme, color }) {
   const colors = getColors(theme, color);
@@ -17,10 +18,10 @@ function getColorStyle({ variant, theme, color }) {
 
   const commonShadow = {
     '&::after': {
-      boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`
+      boxShadow: `0 0 6px 6px ${withAlpha(main, 0.9)}`
     },
     '&:active::after': {
-      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
+      boxShadow: `0 0 0 0 ${withAlpha(main, 0.9)}`
     },
     '&:focus-visible': {
       outline: `2px solid ${dark}`,
@@ -43,7 +44,7 @@ function getColorStyle({ variant, theme, color }) {
         color: main,
         background: lighter,
         '&:hover': {
-          background: alpha(light, 0.5)
+          background: withAlpha(light, 0.5)
         },
         ...commonShadow
       };
@@ -81,7 +82,7 @@ function getColorStyle({ variant, theme, color }) {
       return {
         '&:hover': {
           color: dark,
-          background: color === 'secondary' ? alpha(light, 0.1) : lighter
+          background: color === 'secondary' ? withAlpha(light, 0.1) : lighter
         },
         ...commonShadow
       };
@@ -142,10 +143,10 @@ const IconButtonStyle = styled(MuiIconButton, { shouldForwardProp: (prop) => pro
         props: ({ variant }) => variant !== 'text',
         style: {
           '&.Mui-disabled': {
-            background: theme.palette.grey[200],
+            background: theme.vars.palette.grey[200],
             '&:hover': {
-              background: theme.palette.grey[200],
-              color: theme.palette.grey[300],
+              background: theme.vars.palette.grey[200],
+              color: theme.vars.palette.grey[300],
               borderColor: 'inherit'
             }
           }

diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -6,7 +6,7 @@ import Box from '@mui/material/Box';
 
 export default function Loader() {
   return (
-    <Box sx={{ position: 'fixed', top: 0, left: 0, zIndex: 2001, width: '100%' }}>
+    <Box sx={{ position: 'fixed', top: 0, left: 0, zIndex: 2001, width: 1 }}>
       <LinearProgress color="primary" />
     </Box>
   );