codedthemes · ct-vrushti · Jul 18, 2026
diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml
@@ -31,7 +31,7 @@ jobs:
         run: |
           cd vite
           corepack enable
-          yarn set version 4.10.3
+          yarn set version 4.17.1
           yarn
           yarn build
 

diff --git a/vite/.env b/vite/.env
@@ -1,4 +1,4 @@
-VITE_APP_VERSION=v5.1.0
+VITE_APP_VERSION=v5.2.0
 GENERATE_SOURCEMAP=false
 
 ## PUBLIC URL

diff --git a/vite/eslint.config.mjs b/vite/eslint.config.mjs
@@ -79,7 +79,7 @@ export default [
         }
       ],
 
-      'prettier/prettier': 'warn',
+      'prettier/prettier': 'warn'
     }
   },
   {

diff --git a/vite/index.html b/vite/index.html
@@ -2,22 +2,29 @@
 <html lang="en">
   <head>
     <title>Berry - React Material Free Admin Dashboard Template</title>
-    <link rel="icon" href="/favicon.svg" />
+    <link rel="icon" href="/favicon.ico" />
     <!-- Meta Tags-->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#2296f3" />
-    <meta name="title" content="Berry - React Material Admin Dashboard Template by CodedThemes" />
+    <meta name="title" content="Berry - React MUI Admin Dashboard Template" />
     <meta
       name="description"
-      content="Start your next React project with Berry admin template. It build with Reactjs, Material-UI, Redux, and Hook for faster web development."
+      content="Berry is a fully customizable and powerful admin dashboard template built with React.js, MUI, and Next.js for your next project."
     />
     <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" />
-    <script defer src="https://fomo.codedthemes.com/pixel/jAgJNY0WuNyOO0aM7ql1AqLRKRH5d737" ></script>
+
+    <!-- Performance hints for Vite -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <!-- DNS prefetch for external resources -->
+    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
+    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/vite/package.json b/vite/package.json
@@ -1,33 +1,33 @@
 {
   "name": "berry-material-react-js",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@fontsource/inter": "5.2.8",
     "@fontsource/poppins": "5.2.7",
-    "@fontsource/roboto": "5.2.9",
-    "@mui/icons-material": "7.3.5",
-    "@mui/material": "7.3.5",
-    "@tabler/icons-react": "3.35.0",
-    "@vitejs/plugin-react": "5.1.1",
-    "apexcharts": "5.3.6",
-    "framer-motion": "12.23.25",
-    "lodash-es": "4.17.21",
-    "material-ui-popup-state": "5.3.6",
-    "react": "19.2.0",
-    "react-apexcharts": "1.9.0",
+    "@fontsource/roboto": "5.2.10",
+    "@mui/icons-material": "9.1.1",
+    "@mui/material": "9.1.2",
+    "@tabler/icons-react": "3.44.0",
+    "@vitejs/plugin-react": "6.0.3",
+    "apexcharts": "5.15.2",
+    "framer-motion": "12.42.0",
+    "lodash-es": "4.18.1",
+    "material-ui-popup-state": "5.3.7",
+    "react": "19.2.7",
+    "react-apexcharts": "2.1.1",
     "react-device-detect": "2.2.3",
-    "react-dom": "19.2.0",
-    "react-router": "7.9.6",
-    "react-router-dom": "7.9.6",
+    "react-dom": "19.2.7",
+    "react-router": "7.18.0",
+    "react-router-dom": "7.18.0",
     "simplebar-react": "3.3.2",
     "slick-carousel": "1.8.1",
-    "swr": "2.3.7",
-    "vite": "7.2.6",
+    "swr": "2.4.2",
+    "vite": "8.1.0",
     "vite-jsconfig-paths": "2.0.1",
-    "web-vitals": "5.1.0",
+    "web-vitals": "5.3.0",
     "yup": "1.7.1"
   },
   "scripts": {
@@ -60,15 +60,15 @@
     "@eslint/compat": "2.0.0",
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.1",
-    "eslint": "9.39.1",
+    "eslint": "10.5.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-prettier": "5.5.6",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "prettier": "3.7.3",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "prettier": "3.8.5",
     "prettier-eslint-cli": "8.0.1",
-    "sass": "1.94.2"
+    "sass": "1.101.0"
   },
-  "packageManager": "yarn@4.10.3"
+  "packageManager": "yarn@4.17.1"
 }
diff --git a/vite/public/favicon.ico b/vite/public/favicon.ico
diff --git a/vite/src/assets/scss/style.scss b/vite/src/assets/scss/style.scss
@@ -60,6 +60,31 @@
   background-color: var(--palette-grey-200);
 }
 
+.apexcharts-tooltip {
+  border: none !important;
+  border-radius: 5px !important;
+  background-color: var(--palette-background-paper) !important;
+  color: var(--palette-text-primary) !important;
+  padding: 0 !important;
+}
+
+.apexcharts-tooltip-arrow {
+  display: none !important;
+}
+
+.apexcharts-tooltip-series-group {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
+
+.apexcharts-tooltip-title {
+  border-radius: 5px 5px 0 0 !important;
+  background-color: var(--palette-grey-200) !important;
+  border-bottom: 1px solid var(--palette-grey-300) !important;
+  color: var(--palette-text-primary) !important;
+  font-weight: 400 !important;
+}
+
 // ==============================|| ANIMATION KEYFRAMES ||============================== //
 
 @keyframes wings {

diff --git a/vite/src/layout/Customization/FontFamily.jsx b/vite/src/layout/Customization/FontFamily.jsx
@@ -51,7 +51,7 @@ export default function FontFamilyPage() {
                 content={false}
                 sx={(theme) => ({
                   p: 0.75,
-                  bgcolor: fontFamily === item.value ? 'primary.light' : 'grey.50'
+                  bgcolor: fontFamily === item.value ? 'primary.lighter' : 'grey.50'
                 })}
               >
                 <MainCard

diff --git a/vite/src/layout/MainLayout/Footer.jsx b/vite/src/layout/MainLayout/Footer.jsx
@@ -17,23 +17,43 @@ export default function Footer() {
       <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between' }}>
         <Link
           component={RouterLink}
-          to="https://github.com/codedthemes/berry-free-react-admin-template"
+          to="https://mui.com/store/license/"
           underline="hover"
           target="_blank"
           variant="caption"
-          color="text.primary"
+          sx={{ color: 'text.primary' }}
         >
-          GitHub
+          License
         </Link>
         <Link
           component={RouterLink}
-          to="https://www.figma.com/community/file/1468460364009262125/berry-free-dashboard-ui-kit"
+          to="https://codedthemes.com/hire-us/"
           underline="hover"
           target="_blank"
           variant="caption"
-          color="text.primary"
+          sx={{ color: 'text.primary' }}
         >
-          Figma UI Kit
+          Hire us
+        </Link>
+        <Link
+          component={RouterLink}
+          to="https://mui.com/store/terms/"
+          underline="hover"
+          target="_blank"
+          variant="caption"
+          sx={{ color: 'text.primary' }}
+        >
+          Terms
+        </Link>
+        <Link
+          component={RouterLink}
+          to="https://links.codedthemes.com/dAAOP"
+          underline="hover"
+          target="_blank"
+          variant="caption"
+          sx={{ color: 'text.primary' }}
+        >
+          Figma Design System
         </Link>
       </Stack>
     </Stack>

diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
@@ -18,7 +18,10 @@ import Box from '@mui/material/Box';
 import { withAlpha } from 'utils/colorUtils';
 
 // assets
-import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons-react';
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
+import MarkunreadMailboxOutlinedIcon from '@mui/icons-material/MarkunreadMailboxOutlined';
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
+import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';
 import User1 from 'assets/images/users/user-round.svg';
 
 function ListItemWrapper({ children }) {
@@ -84,11 +87,11 @@ export default function NotificationList() {
           <ListItemAvatar>
             <Avatar
               sx={{
-                color: 'success.dark',
-                bgcolor: 'success.light'
+                color: 'success.main',
+                bgcolor: 'success.lighter'
               }}
             >
-              <IconBuildingStore stroke={1.5} size="20px" />
+              <StorefrontOutlinedIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={<Typography variant="subtitle1">Store Verification Done</Typography>} />
@@ -112,17 +115,17 @@ export default function NotificationList() {
             <Avatar
               sx={{
                 color: 'primary.dark',
-                bgcolor: 'primary.light'
+                bgcolor: 'primary.lighter'
               }}
             >
-              <IconMailbox stroke={1.5} size="20px" />
+              <MarkunreadMailboxOutlinedIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={<Typography variant="subtitle1">Check Your Mail.</Typography>} />
         </ListItem>
         <Stack sx={containerSX}>
           <Typography variant="subtitle2">All done! Now check your inbox as you&apos;re in for a sweet treat!</Typography>
-          <Button variant="contained" endIcon={<IconBrandTelegram stroke={1.5} size={20} />} sx={{ width: 'min-content' }}>
+          <Button variant="contained" endIcon={<SendOutlinedIcon />} sx={{ width: 'min-content' }}>
             Mail
           </Button>
         </Stack>
@@ -149,9 +152,9 @@ export default function NotificationList() {
               21 Jan 2020
             </Typography>
           </Typography>
-          <Card sx={{ bgcolor: 'secondary.light' }}>
-            <Stack direction="row" sx={{ p: 2.5, gap: 2 }}>
-              <IconPhoto stroke={1.5} size="20px" />
+          <Card sx={{ bgcolor: 'secondary.lighter' }}>
+            <Stack direction="row" sx={{ p: 2, gap: 1 }}>
+              <ImageOutlinedIcon />
               <Typography variant="subtitle1">demo.jpg</Typography>
             </Stack>
           </Card>

diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
@@ -79,7 +79,7 @@ export default function NotificationSection() {
   }, [open]);
 
   const handleChange = (event) => {
-    event?.target.value && setValue(event?.target.value);
+    if (event?.target.value) setValue(event?.target.value);
   };
 
   return (
@@ -91,12 +91,13 @@ export default function NotificationSection() {
             ...theme.typography.commonAvatar,
             ...theme.typography.mediumAvatar,
             transition: 'all .2s ease-in-out',
-            color: theme.vars.palette.warning.dark,
-            background: theme.vars.palette.warning.light,
+            color: theme.vars.palette.warning.main,
+            background: theme.vars.palette.warning.lighter,
             '&:hover, &[aria-controls="menu-list-grow"]': {
-              color: theme.vars.palette.warning.light,
-              background: theme.vars.palette.warning.dark
-            }
+              color: theme.vars.palette.warning.lighter,
+              background: theme.vars.palette.warning.main
+            },
+            svg: { width: 20, height: 20 }
           }}
           ref={anchorRef}
           aria-controls={open ? 'menu-list-grow' : undefined}
@@ -120,12 +121,12 @@ export default function NotificationSection() {
             <Transitions position={downMD ? 'top' : 'top-right'} in={open} {...TransitionProps}>
               <Paper>
                 <Activity mode={open ? 'visible' : 'hidden'}>
-                  <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]} sx={{ maxWidth: 330 }}>
+                  <MainCard border={false} elevation={16} content={false} sx={{ maxWidth: 330 }}>
                     <Stack sx={{ gap: 2 }}>
                       <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', pt: 2, px: 2 }}>
                         <Stack direction="row" sx={{ gap: 2 }}>
                           <Typography variant="subtitle1">All Notification</Typography>
-                          <Chip size="small" label="01" variant="filled" sx={{ color: 'background.default', bgcolor: 'warning.dark' }} />
+                          <Chip size="small" label="01" variant="filled" sx={{ color: 'background.default', bgcolor: 'warning.main' }} />
                         </Stack>
                         <Typography component={Link} to="#" variant="subtitle2" sx={{ color: 'primary.main' }}>
                           Mark as all read
@@ -153,9 +154,7 @@ export default function NotificationSection() {
                       </Box>
                     </Stack>
                     <CardActions sx={{ p: 1.25, justifyContent: 'center' }}>
-                      <Button size="small" disableElevation>
-                        View All
-                      </Button>
+                      <Button disableElevation>View All</Button>
                     </CardActions>
                   </MainCard>
                 </Activity>

diff --git a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
@@ -23,7 +23,7 @@ export default function UpgradePlanCard() {
   return (
     <Card
       sx={{
-        bgcolor: 'warning.light',
+        bgcolor: 'warning.lighter',
         my: 2,
         overflow: 'hidden',
         position: 'relative',
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ export default [ @@
             }
           ],
-          'prettier/prettier': 'warn',
+          'prettier/prettier': 'warn'
         }
       },
       {
@@ Expand Down @@