version v 5.0.0 (#147)

* version v 5.0.0

* fix lock file

---------

Co-authored-by: Dikshit Moradiya <phoenixcoded20@outlook.com>

Author: ct-dixit

vite/.env

@@ -1,4 +1,4 @@
-VITE_APP_VERSION=v4.1.0
+VITE_APP_VERSION=v5.0.0
 GENERATE_SOURCEMAP=false
 
 ## PUBLIC URL

vite/package.json

@@ -1,33 +1,33 @@
 {
   "name": "berry-material-react-js",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@fontsource/inter": "5.2.5",
-    "@fontsource/poppins": "5.2.6",
-    "@fontsource/roboto": "5.2.5",
-    "@mui/icons-material": "7.1.0",
-    "@mui/material": "7.1.0",
-    "@tabler/icons-react": "3.31.0",
-    "@vitejs/plugin-react": "4.4.1",
-    "apexcharts": "4.7.0",
-    "framer-motion": "12.10.1",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@fontsource/inter": "5.2.8",
+    "@fontsource/poppins": "5.2.7",
+    "@fontsource/roboto": "5.2.8",
+    "@mui/icons-material": "7.3.4",
+    "@mui/material": "7.3.4",
+    "@tabler/icons-react": "3.35.0",
+    "@vitejs/plugin-react": "5.0.4",
+    "framer-motion": "12.23.22",
     "lodash-es": "4.17.21",
-    "material-ui-popup-state": "5.3.5",
-    "react": "19.1.0",
-    "react-apexcharts": "1.7.0",
-    "react-dom": "19.1.0",
-    "react-perfect-scrollbar": "1.5.8",
-    "react-router": "7.5.3",
-    "react-router-dom": "7.5.3",
+    "material-ui-popup-state": "5.3.6",
+    "react": "19.2.0",
+    "react-apexcharts": "^1.7.0",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "19.2.0",
+    "react-router": "7.9.3",
+    "react-router-dom": "7.9.3",
+    "simplebar-react": "3.3.2",
     "slick-carousel": "1.8.1",
-    "swr": "2.3.3",
-    "vite": "6.3.5",
+    "swr": "2.3.6",
+    "vite": "7.1.9",
     "vite-jsconfig-paths": "2.0.1",
-    "web-vitals": "5.0.0",
-    "yup": "1.6.1"
+    "web-vitals": "5.1.0",
+    "yup": "1.7.1"
   },
   "scripts": {
     "start": "vite",
@@ -56,17 +56,18 @@
     ]
   },
   "devDependencies": {
-    "@eslint/compat": "1.2.9",
+    "@eslint/compat": "1.4.0",
     "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.26.0",
-    "eslint": "9.25.1",
-    "eslint-config-prettier": "10.1.2",
+    "@eslint/js": "9.37.0",
+    "eslint": "9.37.0",
+    "eslint-config-prettier": "10.1.8",
     "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",
-    "prettier": "3.5.3",
-    "sass": "1.87.0"
+    "eslint-plugin-react-hooks": "6.1.1",
+    "prettier": "3.6.2",
+    "prettier-eslint-cli": "8.0.1",
+    "sass": "1.93.2"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.10.3"
 }

vite/src/api/menu.js

@@ -2,17 +2,12 @@ import useSWR, { mutate } from 'swr';
 import { useMemo } from 'react';
 
 const initialState = {
-  openedItem: 'dashboard',
-  openedComponent: 'buttons',
-  openedHorizontalItem: null,
-  isDashboardDrawerOpened: false,
-  isComponentDrawerOpened: true
+  isDashboardDrawerOpened: false
 };
 
-export const endpoints = {
+const endpoints = {
   key: 'api/menu',
-  master: 'master',
-  dashboard: '/dashboard' // server URL
+  master: 'master'
 };
 
 export function useGetMenuMaster() {
@@ -44,15 +39,3 @@ export function handlerDrawerOpen(isDashboardDrawerOpened) {
     false
   );
 }
-
-export function handlerActiveItem(openedItem) {
-  // to update local state based on key
-
-  mutate(
-    endpoints.key + endpoints.master,
-    (currentMenuMaster) => {
-      return { ...currentMenuMaster, openedItem };
-    },
-    false
-  );
-}

vite/src/assets/scss/_themes-vars.module.scss

@@ -154,4 +154,4 @@ $darkTextSecondary: #8492c4;
   darkSecondaryDark: $darkSecondaryDark;
   darkSecondary200: $darkSecondary200;
   darkSecondary800: $darkSecondary800;
-}
+}

vite/src/assets/scss/style.scss

@@ -2,7 +2,7 @@
 @use 'themes-vars.module.scss' as *;
 
 // third party
-@use 'react-perfect-scrollbar/dist/css/styles.css';
+@use 'simplebar-react/dist/simplebar.min.css';
 
 // ==============================|| TAP HIGHLIGHT ||============================== //
 
@@ -12,40 +12,68 @@
 
 // ==============================|| APEXCHART ||============================== //
 
-.apexcharts-legend-series .apexcharts-legend-marker {
-  left: -4px !important;
-  right: -4px !important;
-}
-
-.apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series,
-.apexcharts-legend.apx-legend-position-top .apexcharts-legend-series {
+.apexcharts-legend-series {
   gap: 8px;
 }
 
 .apexcharts-canvas {
+
   .apexcharts-tooltip-series-group.apexcharts-active,
   .apexcharts-tooltip-series-group:last-child {
     padding-bottom: 0;
   }
 }
 
-.apexcharts-legend-series {
-  align-items: center;
-  display: flex;
-  gap: 8px;
+.apexcharts-menu-icon svg,
+.apexcharts-reset-icon svg,
+.apexcharts-zoom-icon svg,
+.apexcharts-zoomin-icon svg,
+.apexcharts-zoomout-icon svg {
+  fill: var(--palette-text-secondary) !important;
+}
+
+.apexcharts-pan-icon svg {
+  stroke: var(--palette-text-secondary) !important;
+  fill: transparent !important;
+}
+
+.apexcharts-zoom-icon.apexcharts-selected svg {
+  fill: var(--palette-primary-main) !important;
+}
+
+.apexcharts-pan-icon.apexcharts-selected svg {
+  stroke: var(--palette-primary-main) !important;
+}
+
+.apexcharts-toolbar .apexcharts-pan-icon:hover:not(.apexcharts-selected) svg {
+  stroke: var(--palette-grey-600) !important;
+}
+
+.apexcharts-toolbar div:hover:not(.apexcharts-selected):not(.apexcharts-pan-icon) svg {
+  fill: var(--palette-grey-600) !important;
+}
+
+.apexcharts-menu {
+  background-color: var(--palette-background-paper);
+}
+
+.apexcharts-menu-item:hover {
+  background-color: var(--palette-grey-200);
 }
 
 // ==============================|| PERFECT SCROLLBAR ||============================== //
 
 .scrollbar-container {
   .ps__rail-y {
-    &:hover > .ps__thumb-y,
-    &:focus > .ps__thumb-y,
+
+    &:hover>.ps__thumb-y,
+    &:focus>.ps__thumb-y,
     &.ps--clicking .ps__thumb-y {
       background-color: $grey500;
       width: 5px;
     }
   }
+
   .ps__thumb-y {
     background-color: $grey500;
     border-radius: 6px;
@@ -55,94 +83,127 @@
 }
 
 .scrollbar-container.ps,
-.scrollbar-container > .ps {
-  &.ps--active-y > .ps__rail-y {
+.scrollbar-container>.ps {
+  &.ps--active-y>.ps__rail-y {
     width: 5px;
     background-color: transparent !important;
     z-index: 999;
+
     &:hover,
     &.ps--clicking {
       width: 5px;
       background-color: transparent;
     }
   }
-  &.ps--scrolling-y > .ps__rail-y,
-  &.ps--scrolling-x > .ps__rail-x {
+
+  &.ps--scrolling-y>.ps__rail-y,
+  &.ps--scrolling-x>.ps__rail-x {
     opacity: 0.4;
     background-color: transparent;
   }
 }
 
+.blog-slider .slick-slide {
+  padding: 0 5px;
+}
+
+.blog-slider .slick-track {
+  padding: 0 -5px;
+}
+
 // ==============================|| ANIMATION KEYFRAMES ||============================== //
 
 @keyframes wings {
   50% {
     transform: translateY(-40px);
   }
+
   100% {
     transform: translateY(0px);
   }
 }
 
+@keyframes wingsReverse {
+  50% {
+    transform: translateY(40px) scaleX(-1);
+  }
+
+  100% {
+    transform: translateY(0px) scaleX(-1);
+  }
+}
+
 @keyframes blink {
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
 
 @keyframes bounce {
+
   0%,
   20%,
   53%,
   to {
     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     transform: translateZ(0);
   }
+
   40%,
   43% {
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     transform: translate3d(0, -5px, 0);
   }
+
   70% {
     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
     transform: translate3d(0, -7px, 0);
   }
+
   80% {
     transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     transform: translateZ(0);
   }
+
   90% {
     transform: translate3d(0, -2px, 0);
   }
 }
 
 @keyframes slideY {
+
   0%,
   50%,
   100% {
     transform: translateY(0px);
   }
+
   25% {
     transform: translateY(-10px);
   }
+
   75% {
     transform: translateY(10px);
   }
 }
 
 @keyframes slideX {
+
   0%,
   50%,
   100% {
     transform: translateX(0px);
   }
+
   25% {
     transform: translateX(-10px);
   }
+
   75% {
     transform: translateX(10px);
   }
-}
+}

vite/src/config.js

@@ -1,4 +1,7 @@
 export const DASHBOARD_PATH = '/sample-page';
+export const DEFAULT_THEME_MODE = 'system';
+
+export const CSS_VAR_PREFIX = '';
 
 const config = {
   fontFamily: `'Roboto', sans-serif`,