Feat: use vite

.env

@@ -1,2 +1 @@
-REACT_APP_VERSION = v1.2.0
-GENERATE_SOURCEMAP = false
+VITE_APP_VERSION = testing

.idea/codeStyles/Project.xml

@@ -2,13 +2,11 @@
   <code_scheme name="Project" version="173">
     <HTMLCodeStyleSettings>
       <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-      <option name="HTML_QUOTE_STYLE" value="Single" />
       <option name="HTML_ENFORCE_QUOTES" value="true" />
     </HTMLCodeStyleSettings>
     <JSCodeStyleSettings version="0">
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
@@ -17,7 +15,6 @@
     <TypeScriptCodeStyleSettings version="0">
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
@@ -28,33 +25,35 @@
       <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
     </VueCodeStyleSettings>
     <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="140" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
+        <option name="INDENT_SIZE" value="5" />
+        <option name="CONTINUATION_INDENT_SIZE" value="5" />
+        <option name="TAB_SIZE" value="5" />
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="140" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
+        <option name="INDENT_SIZE" value="5" />
+        <option name="CONTINUATION_INDENT_SIZE" value="5" />
+        <option name="TAB_SIZE" value="5" />
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="140" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
+        <option name="INDENT_SIZE" value="5" />
+        <option name="CONTINUATION_INDENT_SIZE" value="5" />
+        <option name="TAB_SIZE" value="5" />
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="140" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="INDENT_SIZE" value="5" />
+        <option name="CONTINUATION_INDENT_SIZE" value="5" />
+        <option name="TAB_SIZE" value="5" />
       </indentOptions>
     </codeStyleSettings>
   </code_scheme>

.idea/gfwservice-frontend.iml

@@ -8,5 +8,6 @@
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="ts-external-references" level="project" />
   </component>
 </module>

.idea/jsLibraryMappings.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{ts-external-references}" />
     <includedPredefinedLibrary name="Node.js Core" />
   </component>
 </project>

.idea/libraries/ts_external_references.xml

@@ -0,0 +1,16 @@
+<component name="libraryTable">
+  <library name="ts-external-references" type="javaScript">
+    <properties>
+      <sourceFilesUrls>
+        <item url="file://$PROJECT_DIR$/node_modules/.pnpm/@types+node@17.0.19/node_modules/@types/node/index.d.ts" />
+        <item url="file://$PROJECT_DIR$/node_modules/.pnpm/@types+react@17.0.39/node_modules/@types/react/index.d.ts" />
+      </sourceFilesUrls>
+    </properties>
+    <CLASSES>
+      <root url="file://$PROJECT_DIR$/node_modules/.pnpm/@types+node@17.0.19/node_modules/@types/node/index.d.ts" />
+      <root url="file://$PROJECT_DIR$/node_modules/.pnpm/@types+react@17.0.39/node_modules/@types/react/index.d.ts" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>

.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

.prettierrc

@@ -1,7 +1,7 @@
 {
   "bracketSpacing": true,
-  "printWidth": 140,
-  "singleQuote": true,
+  "printWidth": 120,
+  "singleQuote": false,
   "trailingComma": "none",
   "tabWidth": 2,
   "useTabs": false

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8' />
+    <link href='/favicon.svg' rel='icon' />
+    <meta content='width=device-width, initial-scale=1' name='viewport' />
+    <meta content='#000000' name='theme-color' />
+    <link href='/favicon.svg' rel='apple-touch-icon' />
+    <title>GFW Service</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id='root'></div>
+    <script src='/src/index.tsx' type='module'></script>
+  </body>
+</html>

package.json

@@ -14,49 +14,108 @@
     "@mui/system": "^5.10.9",
     "@mui/x-date-pickers": "^5.0.4",
     "@reduxjs/toolkit": "^1.8.6",
+    "@rollup/plugin-image": "^3.0.1",
+    "@vitejs/plugin-react": "^3.0.0",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
     "buffer": "^6.0.3",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "crypto-browserify": "^3.12.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
     "firebase": "^9.13.0",
     "formik": "^2.2.9",
     "framer-motion": "^7.5.3",
+    "fs-extra": "^10.0.0",
     "history": "^5.3.0",
-    "lodash": "^4.17.21",
+    "identity-obj-proxy": "^3.0.0",
+    "lodash-es": "^4.17.21",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
     "process": "^0.11.10",
+    "prompts": "^2.4.2",
     "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
     "react-app-rewired": "^2.2.1",
+    "react-dev-utils": "^12.0.1",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-intl": "^6.2.0",
-    "react-redux": "^7.2.6",
+    "react-redux": "^8.0.5",
+    "react-refresh": "^0.11.0",
     "react-router": "^6.4.2",
     "react-router-dom": "^6.4.2",
-    "react-scripts": "^5.0.1",
     "react-timer-hook": "^3.0.5",
     "react18-input-otp": "^1.1.0",
+    "redux": "^4.2.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "resolve": "^1.20.0",
+    "semver": "^7.3.5",
     "simplebar": "^5.3.8",
     "simplebar-react": "^2.4.1",
     "stream-browserify": "^3.0.0",
     "stylis-plugin-rtl": "^2.1.1",
+    "tailwindcss": "^3.0.2",
+    "terser": "^5.16.1",
     "util": "^0.12.5",
     "uuid": "^9.0.0",
+    "vite": "^4.0.1",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@types/lodash": "^4.14.186",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.6",
+    "@types/uuid": "^8.3.4",
+    "@types/webpack-env": "^1.18.0",
+    "@typescript-eslint/eslint-plugin": "5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "@vitejs/plugin-legacy": "^3.0.1",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "eslint": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "immutable": "^4.1.0",
+    "prettier": "^2.7.1",
+    "prettier-eslint-cli": "^6.0.1",
+    "react-error-overlay": "6.0.9",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "typescript": "^4.8.4"
+  },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "pnpm run type-check && vite build",
+    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css}",
+    "preinstall": "npx only-allow pnpm",
+    "type-check": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "react/jsx-uses-react": "off",
+      "react/react-in-jsx-scope": "off"
+    }
   },
   "babel": {
     "presets": [
-      "@babel/preset-react"
+      "react-app"
     ]
   },
   "browserslist": {
@@ -71,28 +130,57 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/eslint-parser": "^7.19.1",
-    "@types/lodash": "^4.14.186",
-    "@types/react-dom": "^18.0.6",
-    "@types/uuid": "^8.3.4",
-    "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "^5.7.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "immutable": "^4.1.0",
-    "prettier": "^2.7.1",
-    "prettier-eslint-cli": "^6.0.1",
-    "react-error-overlay": "6.0.9",
-    "typescript": "^4.8.4"
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [
+      "C:\\Users\\ahdar\\Documents\\Code\\star-horizon\\gfwservice-frontend\\src"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true
   }
 }

src/App.tsx

@@ -1,13 +1,15 @@
+import React from "react";
+
 // project import
-import Routes from 'routes';
-import ThemeCustomization from 'themes';
-import Locales from 'components/Locales';
-// import RTLLayout from 'components/RTLLayout';
-import ScrollTop from 'components/ScrollTop';
-import Snackbar from 'components/@extended/Snackbar';
+import Routes from "@/routes";
+import ThemeCustomization from "@/themes";
+import Locales from "@/components/Locales";
+// import RTLLayout from '@/components/RTLLayout';
+import ScrollTop from "@/components/ScrollTop";
+import Snackbar from "@/components/@extended/Snackbar";
 
 // auth provider
-import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
+import { FirebaseProvider as AuthProvider } from "@/contexts/FirebaseContext";
 
 // ==============================|| APP - THEME, ROUTER, LOCAL  ||============================== //
 

src/_api/readme.txt

@@ -1 +0,0 @@
-use for api

src/components/@extended/Avatar.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 // material-ui
-import { styled, useTheme, Theme } from '@mui/material/styles';
-import MuiAvatar from '@mui/material/Avatar';
-import { AvatarProps } from '@mui/material';
+import { styled, useTheme, Theme } from "@mui/material/styles";
+import MuiAvatar from "@mui/material/Avatar";
+import { AvatarProps } from "@mui/material";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { AvatarTypeProps, ColorProps, ExtendedStyleProps, SizeProps } from 'types/extended';
+import { AvatarTypeProps, ColorProps, ExtendedStyleProps, SizeProps } from "@/types/extended";
 
 // ==============================|| AVATAR - COLOR STYLE ||============================== //
 
 interface AvatarStyleProps extends ExtendedStyleProps {
-  variant?: AvatarProps['variant'];
+  variant?: AvatarProps["variant"];
   type?: AvatarTypeProps;
 }
 
@@ -23,22 +23,22 @@ function getColorStyle({ variant, theme, color, type }: AvatarStyleProps) {
   const { lighter, light, main, contrastText } = colors;
 
   switch (type) {
-    case 'filled':
+    case "filled":
       return {
         color: contrastText,
         backgroundColor: main
       };
-    case 'outlined':
+    case "outlined":
       return {
         color: main,
-        border: '1px solid',
+        border: "1px solid",
         borderColor: main,
-        backgroundColor: 'transparent'
+        backgroundColor: "transparent"
       };
-    case 'combined':
+    case "combined":
       return {
         color: main,
-        border: '1px solid',
+        border: "1px solid",
         borderColor: light,
         backgroundColor: lighter
       };
@@ -54,41 +54,41 @@ function getColorStyle({ variant, theme, color, type }: AvatarStyleProps) {
 
 function getSizeStyle(size?: SizeProps) {
   switch (size) {
-    case 'badge':
+    case "badge":
       return {
-        border: '2px solid',
-        fontSize: '0.675rem',
+        border: "2px solid",
+        fontSize: "0.675rem",
         width: 20,
         height: 20
       };
-    case 'xs':
+    case "xs":
       return {
-        fontSize: '0.75rem',
+        fontSize: "0.75rem",
         width: 24,
         height: 24
       };
-    case 'sm':
+    case "sm":
       return {
-        fontSize: '0.875rem',
+        fontSize: "0.875rem",
         width: 32,
         height: 32
       };
-    case 'lg':
+    case "lg":
       return {
-        fontSize: '1.2rem',
+        fontSize: "1.2rem",
         width: 52,
         height: 52
       };
-    case 'xl':
+    case "xl":
       return {
-        fontSize: '1.5rem',
+        fontSize: "1.5rem",
         width: 64,
         height: 64
       };
-    case 'md':
+    case "md":
     default:
       return {
-        fontSize: '1rem',
+        fontSize: "1rem",
         width: 40,
         height: 40
       };
@@ -99,21 +99,21 @@ function getSizeStyle(size?: SizeProps) {
 
 interface StyleProps {
   color: ColorProps;
-  variant?: AvatarProps['variant'];
+  variant?: AvatarProps["variant"];
   type?: AvatarTypeProps;
   theme: Theme;
   size?: SizeProps;
 }
 
-const AvatarStyle = styled(MuiAvatar, { shouldForwardProp: (prop) => prop !== 'color' && prop !== 'type' && prop !== 'size' })(
-  ({ theme, variant, color, type, size }: StyleProps) => ({
-    ...getSizeStyle(size),
-    ...getColorStyle({ variant, theme, color, type }),
-    ...(size === 'badge' && {
-      borderColor: theme.palette.background.default
-    })
+const AvatarStyle = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== "color" && prop !== "type" && prop !== "size"
+})(({ theme, variant, color, type, size }: StyleProps) => ({
+  ...getSizeStyle(size),
+  ...getColorStyle({ variant, theme, color, type }),
+  ...(size === "badge" && {
+    borderColor: theme.palette.background.default
   })
-);
+}));
 
 // ==============================|| EXTENDED - AVATAR ||============================== //
 
@@ -124,7 +124,14 @@ export interface Props extends AvatarProps {
   size?: SizeProps;
 }
 
-export default function Avatar({ variant = 'circular', children, color = 'primary', type, size = 'md', ...others }: Props) {
+export default function Avatar({
+  variant = "circular",
+  children,
+  color = "primary",
+  type,
+  size = "md",
+  ...others
+}: Props) {
   const theme = useTheme();
 
   return (

src/components/@extended/Breadcrumbs.tsx

@@ -1,20 +1,20 @@
-import { CSSProperties, ReactElement, useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { CSSProperties, ReactElement, useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
 
 // material-ui
-import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
-import { useTheme } from '@mui/material/styles';
-import { Divider, Grid, Typography } from '@mui/material';
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import { useTheme } from "@mui/material/styles";
+import { Divider, Grid, Typography } from "@mui/material";
 
 // project imports
-import MainCard from '../MainCard';
+import MainCard from "../MainCard";
 
 // assets
-import { ApartmentOutlined, HomeOutlined, HomeFilled } from '@ant-design/icons';
+import { ApartmentOutlined, HomeOutlined, HomeFilled } from "@ant-design/icons";
 
 // types
-import { OverrideIcon } from 'types/root';
-import { NavItemType } from 'types/menu';
+import { OverrideIcon } from "@/types/root";
+import { NavItemType } from "@/types/menu";
 
 // ==============================|| BREADCRUMBS ||============================== //
 
@@ -59,14 +59,14 @@ const Breadcrumbs = ({
   const iconSX = {
     marginRight: theme.spacing(0.75),
     marginTop: `-${theme.spacing(0.25)}`,
-    width: '1rem',
-    height: '1rem',
+    width: "1rem",
+    height: "1rem",
     color: theme.palette.secondary.main
   };
 
   useEffect(() => {
     navigation?.items?.map((menu: NavItemType, index: number) => {
-      if (menu.type && menu.type === 'group') {
+      if (menu.type && menu.type === "group") {
         getCollapse(menu as { children: NavItemType[]; type?: string });
       }
       return false;
@@ -76,21 +76,21 @@ const Breadcrumbs = ({
   let customLocation = location.pathname;
 
   // only used for component demo breadcrumbs
-  if (customLocation === '/components-overview/breadcrumbs') {
-    customLocation = '/dashboard/analytics';
+  if (customLocation === "/components-overview/breadcrumbs") {
+    customLocation = "/dashboard/analytics";
   }
 
-  if (customLocation === '/apps/kanban/backlogs') {
-    customLocation = '/apps/kanban/board';
+  if (customLocation === "/apps/kanban/backlogs") {
+    customLocation = "/apps/kanban/board";
   }
 
   // set active item state
   const getCollapse = (menu: NavItemType) => {
     if (menu.children) {
       menu.children.filter((collapse: NavItemType) => {
-        if (collapse.type && collapse.type === 'collapse') {
+        if (collapse.type && collapse.type === "collapse") {
           getCollapse(collapse as { children: NavItemType[]; type?: string });
-        } else if (collapse.type && collapse.type === 'item') {
+        } else if (collapse.type && collapse.type === "item") {
           if (customLocation === collapse.url) {
             setMain(menu);
             setItem(collapse);
@@ -103,20 +103,26 @@ const Breadcrumbs = ({
 
   // item separator
   const SeparatorIcon = separator!;
-  const separatorIcon = separator ? <SeparatorIcon style={{ fontSize: '0.75rem', marginTop: 2 }} /> : '/';
+  const separatorIcon = separator ? <SeparatorIcon style={{ fontSize: "0.75rem", marginTop: 2 }} /> : "/";
 
   let mainContent;
   let itemContent;
   let breadcrumbContent: ReactElement = <Typography />;
-  let itemTitle: NavItemType['title'] = '';
+  let itemTitle: NavItemType["title"] = "";
   let CollapseIcon;
   let ItemIcon;
 
   // collapse item
-  if (main && main.type === 'collapse') {
+  if (main && main.type === "collapse") {
     CollapseIcon = main.icon ? main.icon : ApartmentOutlined;
     mainContent = (
-      <Typography component={Link} to={document.location.pathname} variant="h6" sx={{ textDecoration: 'none' }} color="textSecondary">
+      <Typography
+        component={Link}
+        to={document.location.pathname}
+        variant="h6"
+        sx={{ textDecoration: "none" }}
+        color="textSecondary"
+      >
         {icons && <CollapseIcon style={iconSX} />}
         {main.title}
       </Typography>
@@ -124,7 +130,7 @@ const Breadcrumbs = ({
   }
 
   // items
-  if (item && item.type === 'item') {
+  if (item && item.type === "item") {
     itemTitle = item.title;
 
     ItemIcon = item.icon ? item.icon : ApartmentOutlined;
@@ -140,16 +146,16 @@ const Breadcrumbs = ({
       breadcrumbContent = (
         <MainCard
           border={card}
-          sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
+          sx={card === false ? { mb: 3, bgcolor: "transparent", ...sx } : { mb: 3, ...sx }}
           {...others}
           content={card}
           shadow="none"
         >
           <Grid
             container
-            direction={rightAlign ? 'row' : 'column'}
-            justifyContent={rightAlign ? 'space-between' : 'flex-start'}
-            alignItems={rightAlign ? 'center' : 'flex-start'}
+            direction={rightAlign ? "row" : "column"}
+            justifyContent={rightAlign ? "space-between" : "flex-start"}
+            alignItems={rightAlign ? "center" : "flex-start"}
             spacing={1}
           >
             {title && !titleBottom && (
@@ -159,10 +165,10 @@ const Breadcrumbs = ({
             )}
             <Grid item>
               <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
-                <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
+                <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: "none" }}>
                   {icons && <HomeOutlined style={iconSX} />}
                   {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
-                  {(!icon || icons) && 'Home'}
+                  {(!icon || icons) && "Home"}
                 </Typography>
                 {mainContent}
                 {itemContent}

src/components/@extended/Dot.tsx

@@ -1,10 +1,10 @@
 // material-ui
-import { CSSObject, useTheme } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { CSSObject, useTheme } from "@mui/material/styles";
+import { Box } from "@mui/material";
 
 // project import
-import { ColorProps } from 'types/extended';
-import getColors from 'utils/getColors';
+import { ColorProps } from "@/types/extended";
+import getColors from "@/utils/getColors";
 
 interface Props {
   color?: ColorProps;
@@ -15,7 +15,7 @@ interface Props {
 
 const Dot = ({ color, size, variant, sx }: Props) => {
   const theme = useTheme();
-  const colors = getColors(theme, color || 'primary');
+  const colors = getColors(theme, color || "primary");
   const { main } = colors;
 
   return (
@@ -24,9 +24,9 @@ const Dot = ({ color, size, variant, sx }: Props) => {
       sx={{
         width: size || 8,
         height: size || 8,
-        borderRadius: '50%',
-        bgcolor: variant === 'outlined' ? '' : main,
-        ...(variant === 'outlined' && {
+        borderRadius: "50%",
+        bgcolor: variant === "outlined" ? "" : main,
+        ...(variant === "outlined" && {
           border: `1px solid ${main}`
         }),
         ...sx

src/components/@extended/IconButton.tsx

@@ -1,16 +1,16 @@
-import { forwardRef, ReactNode, ReactChild, ReactFragment, ReactPortal, Ref } from 'react';
+import { forwardRef, ReactNode, ReactChild, ReactFragment, ReactPortal, Ref } from "react";
 
 // material-ui
-import MuiIconButton from '@mui/material/IconButton';
-import { alpha, styled, useTheme } from '@mui/material/styles';
-import { IconButtonProps } from '@mui/material';
+import MuiIconButton from "@mui/material/IconButton";
+import { alpha, styled, useTheme } from "@mui/material/styles";
+import { IconButtonProps } from "@mui/material";
 
 // project imports
-import getColors from 'utils/getColors';
-import getShadow from 'utils/getShadow';
+import getColors from "@/utils/getColors";
+import getShadow from "@/utils/getShadow";
 
 // types
-import { ButtonVariantProps, ExtendedStyleProps, IconButtonShapeProps } from 'types/extended';
+import { ButtonVariantProps, ExtendedStyleProps, IconButtonShapeProps } from "@/types/extended";
 
 // ==============================|| ICON BUTTON - COLOR STYLE ||============================== //
 
@@ -26,70 +26,70 @@ function getColorStyle({ variant, theme, color }: IconButtonStyleProps) {
   const shadows = getShadow(theme, buttonShadow);
 
   const commonShadow = {
-    '&::after': {
+    "&::after": {
       boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`
     },
-    '&:active::after': {
+    "&:active::after": {
       boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
     },
-    '&:focus-visible': {
+    "&:focus-visible": {
       outline: `2px solid ${dark}`,
       outlineOffset: 2
     }
   };
 
   switch (variant) {
-    case 'contained':
+    case "contained":
       return {
         color: contrastText,
         backgroundColor: main,
-        '&:hover': {
+        "&:hover": {
           backgroundColor: dark
         },
         ...commonShadow
       };
-    case 'light':
+    case "light":
       return {
         color: main,
         backgroundColor: lighter,
-        '&:hover': {
+        "&:hover": {
           backgroundColor: light
         },
         ...commonShadow
       };
-    case 'shadow':
+    case "shadow":
       return {
         boxShadow: shadows,
         color: contrastText,
         backgroundColor: main,
-        '&:hover': {
-          boxShadow: 'none',
+        "&:hover": {
+          boxShadow: "none",
           backgroundColor: dark
         },
         ...commonShadow
       };
-    case 'outlined':
+    case "outlined":
       return {
-        '&:hover': {
-          backgroundColor: 'transparent',
+        "&:hover": {
+          backgroundColor: "transparent",
           color: dark,
           borderColor: dark
         },
         ...commonShadow
       };
-    case 'dashed':
+    case "dashed":
       return {
         backgroundColor: lighter,
-        '&:hover': {
+        "&:hover": {
           color: dark,
           borderColor: dark
         },
         ...commonShadow
       };
-    case 'text':
+    case "text":
     default:
       return {
-        '&:hover': {
+        "&:hover": {
           color: dark,
           backgroundColor: lighter
         },
@@ -104,43 +104,43 @@ interface StyleProps extends IconButtonStyleProps {
   shape?: IconButtonShapeProps;
 }
 
-const IconButtonStyle = styled(MuiIconButton, { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape' })(
+const IconButtonStyle = styled(MuiIconButton, { shouldForwardProp: (prop) => prop !== "variant" && prop !== "shape" })(
   ({ theme, variant, shape, color }: StyleProps) => ({
-    position: 'relative',
-    '::after': {
+    position: "relative",
+    "::after": {
       content: '""',
-      display: 'block',
-      position: 'absolute',
+      display: "block",
+      position: "absolute",
       left: 0,
       top: 0,
-      width: '100%',
-      height: '100%',
-      borderRadius: shape === 'rounded' ? '50%' : 4,
+      width: "100%",
+      height: "100%",
+      borderRadius: shape === "rounded" ? "50%" : 4,
       opacity: 0,
-      transition: 'all 0.5s'
+      transition: "all 0.5s"
     },
 
-    ':active::after': {
-      position: 'absolute',
-      borderRadius: shape === 'rounded' ? '50%' : 4,
+    ":active::after": {
+      position: "absolute",
+      borderRadius: shape === "rounded" ? "50%" : 4,
       left: 0,
       top: 0,
       opacity: 1,
-      transition: '0s'
+      transition: "0s"
     },
-    ...(shape === 'rounded' && {
-      borderRadius: '50%'
+    ...(shape === "rounded" && {
+      borderRadius: "50%"
     }),
-    ...(variant === 'outlined' && {
-      border: '1px solid',
-      borderColor: 'inherit'
+    ...(variant === "outlined" && {
+      border: "1px solid",
+      borderColor: "inherit"
     }),
-    ...(variant === 'dashed' && {
-      border: '1px dashed',
-      borderColor: 'inherit'
+    ...(variant === "dashed" && {
+      border: "1px dashed",
+      borderColor: "inherit"
     }),
-    ...(variant !== 'text' && {
-      '&.Mui-disabled': {
+    ...(variant !== "text" && {
+      "&.Mui-disabled": {
         backgroundColor: theme.palette.grey[200]
       }
     }),
@@ -158,7 +158,10 @@ export interface Props extends IconButtonProps {
 }
 
 const IconButton = forwardRef(
-  ({ variant = 'text', shape = 'square', children, color = 'primary', tooltip, ...others }: Props, ref: Ref<HTMLButtonElement>) => {
+  (
+    { variant = "text", shape = "square", children, color = "primary", tooltip, ...others }: Props,
+    ref: Ref<HTMLButtonElement>
+  ) => {
     const theme = useTheme();
 
     return (
@@ -169,6 +172,6 @@ const IconButton = forwardRef(
   }
 );
 
-IconButton.displayName = 'IconButton';
+IconButton.displayName = "IconButton";
 
 export default IconButton;

src/components/@extended/LoadingButton.tsx

@@ -1,23 +1,23 @@
-import { forwardRef, ReactNode, Ref } from 'react';
+import { forwardRef, ReactNode, Ref } from "react";
 
 // material-ui
-import MuiLoadingButton from '@mui/lab/LoadingButton';
-import { alpha, styled, useTheme } from '@mui/material/styles';
-import { ButtonProps } from '@mui/material';
-import { LoadingButtonProps } from '@mui/lab';
+import MuiLoadingButton from "@mui/lab/LoadingButton";
+import { alpha, styled, useTheme } from "@mui/material/styles";
+import { ButtonProps } from "@mui/material";
+import { LoadingButtonProps } from "@mui/lab";
 
 // project imports
-import getColors from 'utils/getColors';
-import getShadow from 'utils/getShadow';
+import getColors from "@/utils/getColors";
+import getShadow from "@/utils/getShadow";
 
 // types
-import { ButtonVariantProps, ExtendedStyleProps, IconButtonShapeProps } from 'types/extended';
+import { ButtonVariantProps, ExtendedStyleProps, IconButtonShapeProps } from "@/types/extended";
 
 // ==============================|| LOADING BUTTON - COLOR STYLE ||============================== //
 
 interface LoadingButtonStyleProps extends ExtendedStyleProps {
   variant: ButtonVariantProps;
-  loadingPosition?: LoadingButtonProps['loadingPosition'];
+  loadingPosition?: LoadingButtonProps["loadingPosition"];
 }
 
 function getColorStyle({ variant, theme, color, loadingPosition }: LoadingButtonStyleProps) {
@@ -28,90 +28,90 @@ function getColorStyle({ variant, theme, color, loadingPosition }: LoadingButton
   const shadows = getShadow(theme, buttonShadow);
 
   const loadingIndicator = {
-    '& .MuiLoadingButton-loadingIndicator': {
+    "& .MuiLoadingButton-loadingIndicator": {
       color: main
     }
   };
 
   const loadingColor = {
     ...(loadingPosition &&
-      loadingPosition !== 'center' && {
+      loadingPosition !== "center" && {
         color: main
       })
   };
 
   const commonShadow = {
-    '&::after': {
+    "&::after": {
       boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`
     },
-    '&:active::after': {
+    "&:active::after": {
       boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
     },
-    '&:focus-visible': {
+    "&:focus-visible": {
       outline: `2px solid ${dark}`,
       outlineOffset: 2
     }
   };
 
   switch (variant) {
-    case 'contained':
+    case "contained":
       return {
         backgroundColor: main,
         ...(loadingPosition &&
-          loadingPosition !== 'center' && {
+          loadingPosition !== "center" && {
             color: contrastText
           }),
-        '& .MuiLoadingButton-loadingIndicator': {
+        "& .MuiLoadingButton-loadingIndicator": {
           color: contrastText
         },
-        '&:hover': {
+        "&:hover": {
           backgroundColor: dark,
           color: contrastText
         },
         ...commonShadow
       };
-    case 'light':
+    case "light":
       return {
         backgroundColor: main,
         ...(loadingPosition &&
-          loadingPosition !== 'center' && {
+          loadingPosition !== "center" && {
             color: contrastText
           }),
-        '& .MuiLoadingButton-loadingIndicator': {
+        "& .MuiLoadingButton-loadingIndicator": {
           color: contrastText
         },
-        '&:hover': {
+        "&:hover": {
           backgroundColor: dark,
           color: contrastText
         },
         ...commonShadow
       };
-    case 'shadow':
+    case "shadow":
       return {
         boxShadow: shadows,
         backgroundColor: main,
         ...(loadingPosition &&
-          loadingPosition !== 'center' && {
+          loadingPosition !== "center" && {
             color: contrastText
           }),
-        '& .MuiLoadingButton-loadingIndicator': {
+        "& .MuiLoadingButton-loadingIndicator": {
           color: contrastText
         },
-        '&:hover': {
-          boxShadow: 'none',
+        "&:hover": {
+          boxShadow: "none",
           backgroundColor: dark,
           color: contrastText
         },
         ...commonShadow
       };
-    case 'outlined':
+    case "outlined":
       return {
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         borderColor: main,
         ...loadingColor,
         ...loadingIndicator
       };
-    case 'dashed':
+    case "dashed":
       return {
         backgroundColor: lighter,
         borderColor: main,
@@ -119,7 +119,7 @@ function getColorStyle({ variant, theme, color, loadingPosition }: LoadingButton
         ...loadingIndicator,
         ...commonShadow
       };
-    case 'text':
+    case "text":
     default:
       return {
         color: main,
@@ -133,96 +133,96 @@ function getColorStyle({ variant, theme, color, loadingPosition }: LoadingButton
 
 interface StyleProps extends LoadingButtonStyleProps {
   shape?: IconButtonShapeProps;
-  loading: LoadingButtonProps['loading'];
+  loading: LoadingButtonProps["loading"];
 }
 
-const LoadingButtonStyle = styled(MuiLoadingButton, { shouldForwardProp: (prop) => prop !== 'shape' && prop !== 'variant' })(
-  ({ theme, variant, shape, color, loading, loadingPosition }: StyleProps) => ({
-    '::after': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
-      borderRadius: shape === 'rounded' ? '50%' : 4,
-      opacity: 0,
-      transition: 'all 0.5s'
+const LoadingButtonStyle = styled(MuiLoadingButton, {
+  shouldForwardProp: (prop) => prop !== "shape" && prop !== "variant"
+})(({ theme, variant, shape, color, loading, loadingPosition }: StyleProps) => ({
+  "::after": {
+    content: '""',
+    display: "block",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: shape === "rounded" ? "50%" : 4,
+    opacity: 0,
+    transition: "all 0.5s"
+  },
+
+  ":active::after": {
+    position: "absolute",
+    borderRadius: shape === "rounded" ? "50%" : 4,
+    left: 0,
+    top: 0,
+    opacity: 1,
+    transition: "0s"
+  },
+  ...(variant === "text" && {
+    ...getColorStyle({ variant, theme, color, loadingPosition }),
+    "&.MuiButton-sizeMedium": {
+      height: 36
     },
-
-    ':active::after': {
-      position: 'absolute',
-      borderRadius: shape === 'rounded' ? '50%' : 4,
-      left: 0,
-      top: 0,
-      opacity: 1,
-      transition: '0s'
+    "&.MuiButton-sizeSmall": {
+      height: 30
     },
-    ...(variant === 'text' && {
-      ...getColorStyle({ variant, theme, color, loadingPosition }),
-      '&.MuiButton-sizeMedium': {
-        height: 36
-      },
-      '&.MuiButton-sizeSmall': {
-        height: 30
-      },
-      '&.MuiButton-sizeLarge': {
-        height: 44
-      }
-    }),
-    ...(shape && {
-      minWidth: 0,
-      '&.MuiButton-sizeMedium': {
-        width: 36,
-        height: 36
-      },
-      '&.MuiButton-sizeSmall': {
-        width: 30,
-        height: 30
-      },
-      '&.MuiButton-sizeLarge': {
-        width: 44,
-        height: 44
-      },
-      ...(shape === 'rounded' && {
-        borderRadius: '50%'
-      })
+    "&.MuiButton-sizeLarge": {
+      height: 44
+    }
+  }),
+  ...(shape && {
+    minWidth: 0,
+    "&.MuiButton-sizeMedium": {
+      width: 36,
+      height: 36
+    },
+    "&.MuiButton-sizeSmall": {
+      width: 30,
+      height: 30
+    },
+    "&.MuiButton-sizeLarge": {
+      width: 44,
+      height: 44
+    },
+    ...(shape === "rounded" && {
+      borderRadius: "50%"
+    })
+  }),
+
+  ...(variant === "outlined" && {
+    border: "1px solid"
+  }),
+  ...(variant === "dashed" && {
+    border: "1px dashed"
+  }),
+  ...((variant === "contained" || variant === "shadow") &&
+    !loading && {
+      color: "#fff"
     }),
+  ...(variant !== "text" && {
+    ...getColorStyle({ variant, theme, color, loadingPosition })
+  }),
 
-    ...(variant === 'outlined' && {
-      border: '1px solid'
-    }),
-    ...(variant === 'dashed' && {
-      border: '1px dashed'
-    }),
-    ...((variant === 'contained' || variant === 'shadow') &&
-      !loading && {
-        color: '#fff'
-      }),
-    ...(variant !== 'text' && {
+  "&.Mui-disabled": {
+    ...(variant !== "text" && {
       ...getColorStyle({ variant, theme, color, loadingPosition })
-    }),
-
-    '&.Mui-disabled': {
-      ...(variant !== 'text' && {
-        ...getColorStyle({ variant, theme, color, loadingPosition })
-      })
-    }
-  })
-);
+    })
+  }
+}));
 
 // ==============================|| EXTENDED - LOADING BUTTON ||============================== //
 
 interface Props extends LoadingButtonProps {
-  color?: ButtonProps['color'];
+  color?: ButtonProps["color"];
   variant?: ButtonVariantProps;
   shape?: IconButtonShapeProps;
   children: ReactNode;
 }
 
 const LoadingButton = forwardRef(
-  ({ variant = 'text', shape, children, color = 'primary', ...others }: Props, ref: Ref<HTMLButtonElement>) => {
+  ({ variant = "text", shape, children, color = "primary", ...others }: Props, ref: Ref<HTMLButtonElement>) => {
     const theme = useTheme();
 
     return (
@@ -242,6 +242,6 @@ const LoadingButton = forwardRef(
   }
 );
 
-LoadingButton.displayName = 'LoadingButton';
+LoadingButton.displayName = "LoadingButton";
 
 export default LoadingButton;

src/components/@extended/Snackbar.tsx

@@ -1,18 +1,18 @@
-import { SyntheticEvent } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { SyntheticEvent } from "react";
+import { useDispatch, useSelector } from "react-redux";
 
 // material-ui
-import { Alert, Button, Fade, Grow, Slide, SlideProps } from '@mui/material';
-import MuiSnackbar from '@mui/material/Snackbar';
+import { Alert, Button, Fade, Grow, Slide, SlideProps } from "@mui/material";
+import MuiSnackbar from "@mui/material/Snackbar";
 
 // project-import
-import IconButton from './IconButton';
+import IconButton from "./IconButton";
 
 // assets
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined } from "@ant-design/icons";
 
-import { KeyedObject, RootStateProps } from 'types/root';
-import { closeSnackbar } from 'store/reducers/snackbar';
+import { KeyedObject, RootStateProps } from "@/types/root";
+import { closeSnackbar } from "@/store/reducers/snackbar";
 
 // animation function
 function TransitionSlideLeft(props: SlideProps) {
@@ -53,7 +53,7 @@ const Snackbar = () => {
   const { actionButton, anchorOrigin, alert, close, message, open, transition, variant } = snackbar;
 
   const handleClose = (event: SyntheticEvent | Event, reason?: string) => {
-    if (reason === 'clickaway') {
+    if (reason === "clickaway") {
       return;
     }
     dispatch(closeSnackbar());
@@ -62,7 +62,7 @@ const Snackbar = () => {
   return (
     <>
       {/* default snackbar */}
-      {variant === 'default' && (
+      {variant === "default" && (
         <MuiSnackbar
           anchorOrigin={anchorOrigin}
           open={open}
@@ -84,7 +84,7 @@ const Snackbar = () => {
       )}
 
       {/* alert snackbar */}
-      {variant === 'alert' && (
+      {variant === "alert" && (
         <MuiSnackbar
           TransitionComponent={animation[transition]}
           anchorOrigin={anchorOrigin}
@@ -117,8 +117,8 @@ const Snackbar = () => {
               </>
             }
             sx={{
-              ...(alert.variant === 'outlined' && {
-                bgcolor: 'grey.0'
+              ...(alert.variant === "outlined" && {
+                bgcolor: "grey.0"
               })
             }}
           >

src/components/Locales.tsx

@@ -1,15 +1,15 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from "react";
 
 // third-party
-import { IntlProvider, MessageFormatElement } from 'react-intl';
+import { IntlProvider, MessageFormatElement } from "react-intl";
 
 // project import
-import useConfig from 'hooks/useConfig';
-import { I18n } from 'types/config';
+import useConfig from "@/hooks/useConfig";
+import { I18n } from "@/types/config";
 
 // load locales files
 const loadLocaleData = (locale: I18n) => {
-  return import('utils/locales/en.json');
+  return import("@/utils/locales/en.json");
 };
 
 // ==============================|| LOCALIZATION ||============================== //
@@ -21,12 +21,16 @@ interface Props {
 const Locales = ({ children }: Props) => {
   const { i18n } = useConfig();
 
-  const [messages, setMessages] = useState<Record<string, string> | Record<string, MessageFormatElement[]> | undefined>();
+  const [messages, setMessages] = useState<
+    Record<string, string> | Record<string, MessageFormatElement[]> | undefined
+  >();
 
   useEffect(() => {
-    loadLocaleData(i18n).then((d: { default: Record<string, string> | Record<string, MessageFormatElement[]> | undefined }) => {
-      setMessages(d.default);
-    });
+    loadLocaleData(i18n).then(
+      (d: { default: Record<string, string> | Record<string, MessageFormatElement[]> | undefined }) => {
+        setMessages(d.default);
+      }
+    );
   }, [i18n]);
 
   return (

src/components/MainCard.tsx

@@ -1,16 +1,25 @@
-import { forwardRef, CSSProperties, ReactNode, Ref } from 'react';
+import { forwardRef, CSSProperties, ReactNode, Ref } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Card, CardContent, CardHeader, Divider, Typography, CardProps, CardHeaderProps, CardContentProps } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  Typography,
+  CardProps,
+  CardHeaderProps,
+  CardContentProps
+} from "@mui/material";
 
 // types
-import { KeyedObject } from 'types/root';
+import { KeyedObject } from "@/types/root";
 
 // header style
 const headerSX = {
   p: 2.5,
-  '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
+  "& .MuiCardHeader-action": { m: "0px auto", alignSelf: "center" }
 };
 
 // ==============================|| CUSTOM - MAIN CARD ||============================== //
@@ -22,11 +31,11 @@ export interface MainCardProps extends KeyedObject {
   subheader?: ReactNode | string;
   style?: CSSProperties;
   content?: boolean;
-  contentSX?: CardContentProps['sx'];
+  contentSX?: CardContentProps["sx"];
   darkTitle?: boolean;
   divider?: boolean;
-  sx?: CardProps['sx'];
-  secondary?: CardHeaderProps['action'];
+  sx?: CardProps["sx"];
+  secondary?: CardHeaderProps["action"];
   shadow?: string;
   elevation?: number;
   title?: ReactNode | string;
@@ -55,7 +64,7 @@ const MainCard = forwardRef(
     ref: Ref<HTMLDivElement>
   ) => {
     const theme = useTheme();
-    boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;
+    boxShadow = theme.palette.mode === "dark" ? boxShadow || true : boxShadow;
 
     return (
       <Card
@@ -63,23 +72,24 @@ const MainCard = forwardRef(
         ref={ref}
         {...others}
         sx={{
-          position: 'relative',
-          border: border ? '1px solid' : 'none',
+          position: "relative",
+          border: border ? "1px solid" : "none",
           borderRadius: 1,
-          borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
-          boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
-          ':hover': {
-            boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
+          borderColor: theme.palette.mode === "dark" ? theme.palette.divider : theme.palette.grey.A800,
+          boxShadow:
+            boxShadow && (!border || theme.palette.mode === "dark") ? shadow || theme.customShadows.z1 : "inherit",
+          ":hover": {
+            boxShadow: boxShadow ? shadow || theme.customShadows.z1 : "inherit"
           },
           ...(modal && {
-            position: 'absolute' as 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: { xs: `calc( 100% - 50px)`, sm: 'auto' },
-            '& .MuiCardContent-root': {
-              overflowY: 'auto',
-              minHeight: 'auto',
+            position: "absolute" as "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: { xs: `calc( 100% - 50px)`, sm: "auto" },
+            "& .MuiCardContent-root": {
+              overflowY: "auto",
+              minHeight: "auto",
               maxHeight: `calc(100vh - 200px)`
             }
           }),
@@ -90,13 +100,15 @@ const MainCard = forwardRef(
         {!darkTitle && title && (
           <CardHeader
             sx={headerSX}
-            titleTypographyProps={{ variant: 'subtitle1' }}
+            titleTypographyProps={{ variant: "subtitle1" }}
             title={title}
             action={secondary}
             subheader={subheader}
           />
         )}
-        {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />}
+        {darkTitle && title && (
+          <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />
+        )}
 
         {/* content & header divider */}
         {title && divider && <Divider />}

src/components/RTLLayout.tsx

@@ -1,14 +1,14 @@
-import { useEffect, ReactNode } from 'react';
+import { useEffect, ReactNode } from "react";
 
 // material-ui
-import { CacheProvider } from '@emotion/react';
-import createCache, { StylisPlugin } from '@emotion/cache';
+import { CacheProvider } from "@emotion/react";
+import createCache, { StylisPlugin } from "@emotion/cache";
 
 // third-party
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from "stylis-plugin-rtl";
 
 // project import
-import useConfig from 'hooks/useConfig';
+import useConfig from "@/hooks/useConfig";
 
 // ==============================|| RTL LAYOUT ||============================== //
 
@@ -24,9 +24,9 @@ const RTLLayout = ({ children }: Props) => {
   }, [themeDirection]);
 
   const cacheRtl = createCache({
-    key: themeDirection === 'rtl' ? 'rtl' : 'css',
+    key: themeDirection === "rtl" ? "rtl" : "css",
     prepend: true,
-    stylisPlugins: themeDirection === 'rtl' ? [rtlPlugin as StylisPlugin] : []
+    stylisPlugins: themeDirection === "rtl" ? [rtlPlugin as StylisPlugin] : []
   });
 
   return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;

src/components/cards/skeleton/ProductPlaceholder.tsx

@@ -1,8 +1,8 @@
 // material-ui
-import { CardContent, Grid, Skeleton, Stack } from '@mui/material';
+import { CardContent, Grid, Skeleton, Stack } from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
+import MainCard from "@/components/MainCard";
 
 // ===========================|| SKELETON TOTAL GROWTH BAR CHART ||=========================== //
 
@@ -17,7 +17,7 @@ const ProductPlaceholder = () => (
         <Grid item xs={12}>
           <Skeleton variant="rectangular" height={45} />
         </Grid>
-        <Grid item xs={12} sx={{ pt: '8px !important' }}>
+        <Grid item xs={12} sx={{ pt: "8px !important" }}>
           <Stack direction="row" alignItems="center" spacing={1}>
             <Skeleton variant="rectangular" height={20} width={90} />
             <Skeleton variant="rectangular" height={20} width={38} />

src/components/cards/statistics/AnalyticEcommerce.tsx

@@ -1,11 +1,11 @@
 // material-ui
-import { Box, Chip, ChipProps, Grid, Stack, Typography } from '@mui/material';
+import { Box, Chip, ChipProps, Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
+import MainCard from "@/components/MainCard";
 
 // assets
-import { RiseOutlined, FallOutlined } from '@ant-design/icons';
+import { RiseOutlined, FallOutlined } from "@ant-design/icons";
 
 // ==============================|| STATISTICS - ECOMMERCE CARD  ||============================== //
 
@@ -14,11 +14,11 @@ interface Props {
   count: string;
   percentage?: number;
   isLoss?: boolean;
-  color?: ChipProps['color'];
+  color?: ChipProps["color"];
   extra: string;
 }
 
-const AnalyticEcommerce = ({ color = 'primary', title, count, percentage, isLoss, extra }: Props) => (
+const AnalyticEcommerce = ({ color = "primary", title, count, percentage, isLoss, extra }: Props) => (
   <MainCard contentSX={{ p: 2.25 }}>
     <Stack spacing={0.5}>
       <Typography variant="h6" color="textSecondary">
@@ -37,8 +37,8 @@ const AnalyticEcommerce = ({ color = 'primary', title, count, percentage, isLoss
               color={color}
               icon={
                 <>
-                  {!isLoss && <RiseOutlined style={{ fontSize: '0.75rem', color: 'inherit' }} />}
-                  {isLoss && <FallOutlined style={{ fontSize: '0.75rem', color: 'inherit' }} />}
+                  {!isLoss && <RiseOutlined style={{ fontSize: "0.75rem", color: "inherit" }} />}
+                  {isLoss && <FallOutlined style={{ fontSize: "0.75rem", color: "inherit" }} />}
                 </>
               }
               label={`${percentage}%`}
@@ -51,10 +51,10 @@ const AnalyticEcommerce = ({ color = 'primary', title, count, percentage, isLoss
     </Stack>
     <Box sx={{ pt: 2.25 }}>
       <Typography variant="caption" color="textSecondary">
-        You made an extra{' '}
-        <Typography component="span" variant="caption" sx={{ color: `${color || 'primary'}.main` }}>
+        You made an extra{" "}
+        <Typography component="span" variant="caption" sx={{ color: `${color || "primary"}.main` }}>
           {extra}
-        </Typography>{' '}
+        </Typography>{" "}
         this year
       </Typography>
     </Box>

src/components/cards/statistics/AnalyticsDataCard.tsx

@@ -1,11 +1,11 @@
 // material-ui
-import { Box, Chip, ChipProps, Stack, Typography } from '@mui/material';
+import { Box, Chip, ChipProps, Stack, Typography } from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
+import MainCard from "@/components/MainCard";
 
 // assets
-import { RiseOutlined, FallOutlined } from '@ant-design/icons';
+import { RiseOutlined, FallOutlined } from "@ant-design/icons";
 
 // ==============================|| STATISTICS - ECOMMERCE CARD  ||============================== //
 
@@ -14,11 +14,11 @@ interface Props {
   count: string;
   percentage?: number;
   isLoss?: boolean;
-  color?: ChipProps['color'];
+  color?: ChipProps["color"];
   children: any;
 }
 
-const AnalyticsDataCard = ({ color = 'primary', title, count, percentage, isLoss, children }: Props) => (
+const AnalyticsDataCard = ({ color = "primary", title, count, percentage, isLoss, children }: Props) => (
   <MainCard content={false}>
     <Box sx={{ p: 2.25 }}>
       <Stack spacing={0.5}>
@@ -35,8 +35,8 @@ const AnalyticsDataCard = ({ color = 'primary', title, count, percentage, isLoss
               color={color}
               icon={
                 <>
-                  {!isLoss && <RiseOutlined style={{ fontSize: '0.75rem', color: 'inherit' }} />}
-                  {isLoss && <FallOutlined style={{ fontSize: '0.75rem', color: 'inherit' }} />}
+                  {!isLoss && <RiseOutlined style={{ fontSize: "0.75rem", color: "inherit" }} />}
+                  {isLoss && <FallOutlined style={{ fontSize: "0.75rem", color: "inherit" }} />}
                 </>
               }
               label={`${percentage}%`}

src/components/logo/index.tsx

@@ -1,14 +1,14 @@
-import { Link } from 'react-router-dom';
-import { To } from 'history';
+import { Link } from "react-router-dom";
+import { To } from "history";
 
 // material-ui
-import { ButtonBase } from '@mui/material';
-import { SxProps } from '@mui/system';
+import { ButtonBase } from "@mui/material";
+import { SxProps } from "@mui/system";
 
 // project import
-import Logo from './LogoMain';
-import LogoIcon from './LogoIcon';
-import config from 'config';
+import Logo from "./LogoMain";
+import LogoIcon from "./LogoIcon";
+import config from "@/config";
 
 // ==============================|| MAIN LOGO ||============================== //
 

src/config.ts

@@ -1,5 +1,5 @@
 // types
-import { DefaultConfigProps } from 'types/config';
+import { DefaultConfigProps } from '@/types/config';
 
 export const drawerWidth = 260;
 

src/contexts/ConfigContext.tsx

@@ -1,11 +1,11 @@
-import { createContext, ReactNode } from 'react';
+import { createContext, ReactNode } from "react";
 
 // project import
-import config from 'config';
-import useLocalStorage from 'hooks/useLocalStorage';
+import config from "@/config";
+import useLocalStorage from "@/hooks/useLocalStorage";
 
 // types
-import { CustomizationProps, FontFamily, PresetColor, ThemeDirection, ThemeMode } from 'types/config';
+import { CustomizationProps, FontFamily, PresetColor, ThemeDirection, ThemeMode } from "@/types/config";
 
 // initial state
 const initialState: CustomizationProps = {
@@ -27,7 +27,7 @@ type ConfigProviderProps = {
 };
 
 function ConfigProvider({ children }: ConfigProviderProps) {
-  const [config, setConfig] = useLocalStorage('mantis-react-ts-config', initialState);
+  const [config, setConfig] = useLocalStorage("mantis-react-ts-config", initialState);
 
   const onChangeContainer = () => {
     setConfig({

src/contexts/FirebaseContext.tsx

@@ -1,17 +1,17 @@
-import React, { createContext, useEffect, useReducer } from 'react';
+import React, { createContext, useEffect, useReducer } from "react";
 
 // third-party
-import firebase from 'firebase/compat/app';
-import 'firebase/compat/auth';
+import firebase from "firebase/compat/app";
+import "firebase/compat/auth";
 
 // action - state management
-import { LOGIN, LOGOUT } from 'store/reducers/actions';
-import authReducer from 'store/reducers/auth';
+import { LOGIN, LOGOUT } from "@/store/reducers/actions";
+import authReducer from "@/store/reducers/auth";
 
 // project import
-import Loader from 'components/Loader';
-import { FIREBASE_API } from 'config';
-import { AuthProps, FirebaseContextType } from 'types/auth';
+import Loader from "@/components/Loader";
+import { FIREBASE_API } from "@/config";
+import { AuthProps, FirebaseContextType } from "@/types/auth";
 
 // firebase initialize
 if (!firebase.apps.length) {
@@ -43,8 +43,8 @@ export const FirebaseProvider = ({ children }: { children: React.ReactElement })
               user: {
                 id: user.uid,
                 email: user.email!,
-                name: user.displayName || 'Stebin Ben',
-                role: 'UI/UX Designer'
+                name: user.displayName || "Stebin Ben",
+                role: "UI/UX Designer"
               }
             }
           });
@@ -58,7 +58,8 @@ export const FirebaseProvider = ({ children }: { children: React.ReactElement })
     [dispatch]
   );
 
-  const firebaseEmailPasswordSignIn = (email: string, password: string) => firebase.auth().signInWithEmailAndPassword(email, password);
+  const firebaseEmailPasswordSignIn = (email: string, password: string) =>
+    firebase.auth().signInWithEmailAndPassword(email, password);
 
   const firebaseGoogleSignIn = () => {
     const provider = new firebase.auth.GoogleAuthProvider();
@@ -75,7 +76,8 @@ export const FirebaseProvider = ({ children }: { children: React.ReactElement })
     return firebase.auth().signInWithPopup(provider);
   };
 
-  const firebaseRegister = async (email: string, password: string) => firebase.auth().createUserWithEmailAndPassword(email, password);
+  const firebaseRegister = async (email: string, password: string) =>
+    firebase.auth().createUserWithEmailAndPassword(email, password);
 
   const logout = () => firebase.auth().signOut();
 

src/hooks/useAuth.ts

@@ -1,14 +1,14 @@
-import { useContext } from 'react';
+import { useContext } from "react";
 
 // auth provider
-import AuthContext from 'contexts/FirebaseContext';
+import AuthContext from "@/contexts/FirebaseContext";
 
 // ==============================|| AUTH HOOKS ||============================== //
 
 const useAuth = () => {
   const context = useContext(AuthContext);
 
-  if (!context) throw new Error('context must be use inside provider');
+  if (!context) throw new Error("context must be use inside provider");
 
   return context;
 };

src/hooks/useConfig.ts

@@ -1,5 +1,5 @@
-import { useContext } from 'react';
-import { ConfigContext } from 'contexts/ConfigContext';
+import { useContext } from "react";
+import { ConfigContext } from "@/contexts/ConfigContext";
 
 // ==============================|| CONFIG - HOOKS  ||============================== //
 

src/index.tsx

@@ -1,25 +1,48 @@
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 
 // third-party
-import { Provider as ReduxProvider } from 'react-redux';
+import { Provider as ReduxProvider } from "react-redux";
 
 // scroll bar
-import 'simplebar/src/simplebar.css';
+import "simplebar/src/simplebar.css";
 
 // apex-chart
-import 'assets/third-party/apex-chart.css';
-import 'assets/third-party/react-table.css';
+import "@/assets/third-party/apex-chart.css";
+import "@/assets/third-party/react-table.css";
+
+// resize observer
+import ResizeObserver from "resize-observer-polyfill";
 
 // project import
-import App from './App';
-import { store } from 'store';
-import { ConfigProvider } from 'contexts/ConfigContext';
-import reportWebVitals from './reportWebVitals';
+import App from "@/App";
+import { store } from "@/store";
+import { ConfigProvider } from "@/contexts/ConfigContext";
+import reportWebVitals from "@/reportWebVitals";
 
-const container = document.getElementById('root');
+const container = document.getElementById("root");
 const root = createRoot(container!);
 
+const ro = new ResizeObserver((entries, observer) =>
+  entries.forEach((entry) => {
+    const { left, top, width, height } = entry.contentRect;
+
+    if (import.meta.env.DEV) {
+      console.log("Element:", entry.target);
+      console.log(`Element's size: ${width}px x ${height}px`);
+      console.log(`Element's paddings: ${top}px ; ${left}px`);
+    }
+
+    document.documentElement.style.setProperty("--width", `${width - entry.target.clientWidth}px`);
+    document.documentElement.style.setProperty("--height", `${height - entry.target.clientHeight}px`);
+
+    observer.observe(entry.target);
+  })
+);
+
+ro.observe(container!);
+
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
 
 root.render(

src/layout/CommonLayout/FooterBlock.tsx

@@ -1,23 +1,23 @@
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, Button, Container, CardMedia, Divider, Grid, Link, Typography } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Box, Button, Container, CardMedia, Divider, Grid, Link, Typography } from "@mui/material";
 
 // third party
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
 
 // project import
-import useConfig from 'hooks/useConfig';
+import useConfig from "@/hooks/useConfig";
 
 // assets
-import { SendOutlined } from '@ant-design/icons';
+import { SendOutlined } from "@ant-design/icons";
 
-import imgfooterlogo from 'assets/images/landing/codedthemes-logo.svg';
-import imgfootersoc1 from 'assets/images/landing/img-soc1.svg';
-import imgfootersoc2 from 'assets/images/landing/img-soc2.svg';
-import imgfootersoc3 from 'assets/images/landing/img-soc3.svg';
-import AnimateButton from 'components/@extended/AnimateButton';
+import imgfooterlogo from "@/assets/images/landing/codedthemes-logo.svg";
+import imgfootersoc1 from "@/assets/images/landing/img-soc1.svg";
+import imgfootersoc2 from "@/assets/images/landing/img-soc2.svg";
+import imgfootersoc3 from "@/assets/images/landing/img-soc3.svg";
+import AnimateButton from "@/components/@extended/AnimateButton";
 
-const dashImage = require.context('assets/images/landing', true);
+const dashImage = require.context("assets/images/landing", true);
 
 // ==============================|| LANDING - FOOTER PAGE ||============================== //
 
@@ -31,11 +31,11 @@ const FooterBlock = ({ isFull }: showProps) => {
 
   const linkSX = {
     color: theme.palette.common.white,
-    fontSize: '0.875rem',
+    fontSize: "0.875rem",
     fontWeight: 400,
-    opacity: '0.6',
-    '&:hover': {
-      opacity: '1'
+    opacity: "0.6",
+    "&:hover": {
+      opacity: "1"
     }
   };
 
@@ -44,17 +44,17 @@ const FooterBlock = ({ isFull }: showProps) => {
       {isFull && (
         <Box
           sx={{
-            position: 'relative',
+            position: "relative",
             bgcolor: theme.palette.grey.A700,
             zIndex: 1,
             mt: { xs: 0, md: 13.75 },
             pt: { xs: 8, sm: 7.5, md: 18.75 },
             pb: { xs: 2.5, md: 10 },
-            '&:after': {
+            "&:after": {
               content: '""',
-              position: 'absolute',
-              width: '100%',
-              height: '80%',
+              position: "absolute",
+              width: "100%",
+              height: "80%",
               bottom: 0,
               left: 0,
               background: `linear-gradient(180deg, transparent 0%, ${theme.palette.grey.A700} 70%)`
@@ -65,18 +65,18 @@ const FooterBlock = ({ isFull }: showProps) => {
             component="img"
             image={dashImage(`./img-footer-${presetColor}.png`)}
             sx={{
-              display: { xs: 'none', md: 'block' },
-              width: '55%',
+              display: { xs: "none", md: "block" },
+              width: "55%",
               maxWidth: 700,
-              position: 'absolute',
-              top: '-28%',
+              position: "absolute",
+              top: "-28%",
               right: 0
             }}
           />
           <Container>
             <Grid container alignItems="center" justifyContent="space-between" spacing={2}>
-              <Grid item xs={12} md={6} sx={{ position: 'relative', zIndex: 1 }}>
-                <Grid container spacing={2} sx={{ [theme.breakpoints.down('md')]: { pr: 0, textAlign: 'center' } }}>
+              <Grid item xs={12} md={6} sx={{ position: "relative", zIndex: 1 }}>
+                <Grid container spacing={2} sx={{ [theme.breakpoints.down("md")]: { pr: 0, textAlign: "center" } }}>
                   <Grid item xs={12}>
                     <Typography variant="subtitle1" sx={{ color: theme.palette.common.white }}>
                       Roadmap
@@ -87,7 +87,7 @@ const FooterBlock = ({ isFull }: showProps) => {
                       initial={{ opacity: 0, translateY: 550 }}
                       animate={{ opacity: 1, translateY: 0 }}
                       transition={{
-                        type: 'spring',
+                        type: "spring",
                         stiffness: 150,
                         damping: 30
                       }}
@@ -109,7 +109,7 @@ const FooterBlock = ({ isFull }: showProps) => {
                     </Typography>
                   </Grid>
                   <Grid item xs={12} sx={{ my: 2 }}>
-                    <Box sx={{ display: 'inline-block' }}>
+                    <Box sx={{ display: "inline-block" }}>
                       <AnimateButton>
                         <Button
                           size="large"
@@ -139,19 +139,19 @@ const FooterBlock = ({ isFull }: showProps) => {
                 initial={{ opacity: 0, translateY: 550 }}
                 animate={{ opacity: 1, translateY: 0 }}
                 transition={{
-                  type: 'spring',
+                  type: "spring",
                   stiffness: 150,
                   damping: 30
                 }}
               >
                 <Grid container spacing={2}>
                   <Grid item xs={12}>
-                    <CardMedia component="img" image={imgfooterlogo} sx={{ width: 'auto' }} />
+                    <CardMedia component="img" image={imgfooterlogo} sx={{ width: "auto" }} />
                   </Grid>
                   <Grid item xs={12}>
                     <Typography variant="subtitle1" sx={{ fontWeight: 400, color: theme.palette.common.white }}>
-                      Since 2017, More than 50K+ Developers trust the CodedThemes Digital Product. Mantis React is Manage under their
-                      Experienced Team Players.
+                      Since 2017, More than 50K+ Developers trust the CodedThemes Digital Product. Mantis React is
+                      Manage under their Experienced Team Players.
                     </Typography>
                   </Grid>
                 </Grid>
@@ -164,7 +164,7 @@ const FooterBlock = ({ isFull }: showProps) => {
                     initial={{ opacity: 0, translateY: 550 }}
                     animate={{ opacity: 1, translateY: 0 }}
                     transition={{
-                      type: 'spring',
+                      type: "spring",
                       stiffness: 150,
                       damping: 30,
                       delay: 0.2
@@ -187,7 +187,12 @@ const FooterBlock = ({ isFull }: showProps) => {
                         </Link>
                       </Grid>
                       <Grid item xs={12}>
-                        <Link href="https://material-ui.com/store/contributors/codedthemes/" underline="none" sx={linkSX} target="_blank">
+                        <Link
+                          href="https://material-ui.com/store/contributors/codedthemes/"
+                          underline="none"
+                          sx={linkSX}
+                          target="_blank"
+                        >
                           Portfolio
                         </Link>
                       </Grid>
@@ -204,7 +209,7 @@ const FooterBlock = ({ isFull }: showProps) => {
                     initial={{ opacity: 0, translateY: 550 }}
                     animate={{ opacity: 1, translateY: 0 }}
                     transition={{
-                      type: 'spring',
+                      type: "spring",
                       stiffness: 150,
                       damping: 30,
                       delay: 0.4
@@ -217,7 +222,12 @@ const FooterBlock = ({ isFull }: showProps) => {
                         </Typography>
                       </Grid>
                       <Grid item xs={12}>
-                        <Link href="https://codedthemes.gitbook.io/mantis/" underline="none" target="_blank" sx={linkSX}>
+                        <Link
+                          href="https://codedthemes.gitbook.io/mantis/"
+                          underline="none"
+                          target="_blank"
+                          sx={linkSX}
+                        >
                           Documentation
                         </Link>
                       </Grid>
@@ -227,7 +237,12 @@ const FooterBlock = ({ isFull }: showProps) => {
                         </Link>
                       </Grid>
                       <Grid item xs={12}>
-                        <Link href="https://codedthemes.gitbook.io/mantis/changelog" underline="none" target="_blank" sx={linkSX}>
+                        <Link
+                          href="https://codedthemes.gitbook.io/mantis/changelog"
+                          underline="none"
+                          target="_blank"
+                          sx={linkSX}
+                        >
                           Change Log
                         </Link>
                       </Grid>
@@ -239,7 +254,7 @@ const FooterBlock = ({ isFull }: showProps) => {
                     initial={{ opacity: 0, translateY: 550 }}
                     animate={{ opacity: 1, translateY: 0 }}
                     transition={{
-                      type: 'spring',
+                      type: "spring",
                       stiffness: 150,
                       damping: 30,
                       delay: 0.6
@@ -289,11 +304,11 @@ const FooterBlock = ({ isFull }: showProps) => {
           </Grid>
         </Container>
       </Box>
-      <Divider sx={{ borderColor: 'grey.700' }} />
+      <Divider sx={{ borderColor: "grey.700" }} />
       <Box
         sx={{
           py: 1.5,
-          bgcolor: theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[800]
+          bgcolor: theme.palette.mode === "dark" ? theme.palette.grey[50] : theme.palette.grey[800]
         }}
       >
         <Container>
@@ -304,7 +319,7 @@ const FooterBlock = ({ isFull }: showProps) => {
               </Typography>
             </Grid>
             <Grid item xs={12} sm={4}>
-              <Grid container spacing={2} alignItems="center" sx={{ justifyContent: 'flex-end' }}>
+              <Grid container spacing={2} alignItems="center" sx={{ justifyContent: "flex-end" }}>
                 <Grid item>
                   <Link href="#" underline="none" sx={linkSX}>
                     <CardMedia component="img" image={imgfootersoc1} />

src/layout/CommonLayout/Header.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import * as React from "react";
+import { useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
 
 // material-ui
-import AppBar from '@mui/material/AppBar';
-import { useTheme } from '@mui/material/styles';
+import AppBar from "@mui/material/AppBar";
+import { useTheme } from "@mui/material/styles";
 import {
   useMediaQuery,
   Box,
@@ -21,16 +21,16 @@ import {
   Toolbar,
   Typography,
   useScrollTrigger
-} from '@mui/material';
+} from "@mui/material";
 
 // project import
-import config from 'config';
-import IconButton from 'components/@extended/IconButton';
-import AnimateButton from 'components/@extended/AnimateButton';
-import Logo from 'components/logo';
+import config from "@/config";
+import IconButton from "@/components/@extended/IconButton";
+import AnimateButton from "@/components/@extended/AnimateButton";
+import Logo from "@/components/logo";
 
 // assets
-import { MenuOutlined, LineOutlined } from '@ant-design/icons';
+import { MenuOutlined, LineOutlined } from "@ant-design/icons";
 
 // ==============================|| COMPONENTS - APP BAR ||============================== //
 
@@ -45,8 +45,8 @@ function ElevationScroll({ layout, children, window }: any) {
     target: window ? window() : undefined
   });
 
-  const backColorScroll = theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[800];
-  const backColor = layout !== 'landing' ? backColorScroll : 'transparent';
+  const backColorScroll = theme.palette.mode === "dark" ? theme.palette.grey[50] : theme.palette.grey[800];
+  const backColor = layout !== "landing" ? backColorScroll : "transparent";
 
   return React.cloneElement(children, {
     style: {
@@ -60,14 +60,14 @@ interface Props {
   layout?: string;
 }
 
-const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
+const Header = ({ handleDrawerOpen, layout = "landing", ...others }: Props) => {
   const theme = useTheme();
-  const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));
+  const matchDownMd = useMediaQuery(theme.breakpoints.down("md"));
   const [drawerToggle, setDrawerToggle] = useState<boolean>(false);
 
   /** Method called on multiple components with different event types */
   const drawerToggler = (open: boolean) => (event: any) => {
-    if (event.type! === 'keydown' && (event.key! === 'Tab' || event.key! === 'Shift')) {
+    if (event.type! === "keydown" && (event.key! === "Tab" || event.key! === "Shift")) {
       return;
     }
     setDrawerToggle(open);
@@ -75,45 +75,58 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
 
   return (
     <ElevationScroll layout={layout} {...others}>
-      <AppBar sx={{ bgcolor: 'transparent', color: theme.palette.text.primary, boxShadow: 'none' }}>
+      <AppBar sx={{ bgcolor: "transparent", color: theme.palette.text.primary, boxShadow: "none" }}>
         <Container disableGutters={matchDownMd}>
           <Toolbar sx={{ px: { xs: 1.5, md: 0, lg: 0 }, py: 2 }}>
-            <Stack direction="row" sx={{ flexGrow: 1, display: { xs: 'none', md: 'block' } }} alignItems="center">
-              <Typography component="div" sx={{ textAlign: 'left', display: 'inline-block' }}>
+            <Stack direction="row" sx={{ flexGrow: 1, display: { xs: "none", md: "block" } }} alignItems="center">
+              <Typography component="div" sx={{ textAlign: "left", display: "inline-block" }}>
                 <Logo reverse to="/" />
               </Typography>
               <Chip
-                label={process.env.REACT_APP_VERSION}
+                label={import.meta.env.VITE_APP_VERSION}
                 variant="outlined"
                 size="small"
                 color="secondary"
-                sx={{ mt: 0.5, ml: 1, fontSize: '0.725rem', height: 20, '& .MuiChip-label': { px: 0.5 } }}
+                sx={{ mt: 0.5, ml: 1, fontSize: "0.725rem", height: 20, "& .MuiChip-label": { px: 0.5 } }}
               />
             </Stack>
             <Stack
               direction="row"
               sx={{
-                '& .header-link': { px: 1, '&:hover': { color: theme.palette.primary.main } },
-                display: { xs: 'none', md: 'block' }
+                "& .header-link": { px: 1, "&:hover": { color: theme.palette.primary.main } },
+                display: { xs: "none", md: "block" }
               }}
               spacing={2}
             >
-              <Link className="header-link" color="white" component={RouterLink} to="/login" target="_blank" underline="none">
+              <Link
+                className="header-link"
+                color="white"
+                component={RouterLink}
+                to="/login"
+                target="_blank"
+                underline="none"
+              >
                 Dashboard
               </Link>
               <Link
                 className="header-link"
-                color={handleDrawerOpen ? 'primary' : 'white'}
+                color={handleDrawerOpen ? "primary" : "white"}
                 component={RouterLink}
                 to="/components-overview/buttons"
                 underline="none"
               >
                 Components
               </Link>
-              <Link className="header-link" color="white" href="https://codedthemes.gitbook.io/mantis/" target="_blank" underline="none">
+              <Link
+                className="header-link"
+                color="white"
+                href="https://codedthemes.gitbook.io/mantis/"
+                target="_blank"
+                underline="none"
+              >
                 Documentation
               </Link>
-              <Box sx={{ display: 'inline-block' }}>
+              <Box sx={{ display: "inline-block" }}>
                 <AnimateButton>
                   <Button
                     component={Link}
@@ -129,17 +142,17 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
             </Stack>
             <Box
               sx={{
-                width: '100%',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                display: { xs: 'flex', md: 'none' }
+                width: "100%",
+                alignItems: "center",
+                justifyContent: "space-between",
+                display: { xs: "flex", md: "none" }
               }}
             >
-              <Typography component="div" sx={{ textAlign: 'left', display: 'inline-block' }}>
+              <Typography component="div" sx={{ textAlign: "left", display: "inline-block" }}>
                 <Logo reverse to="/" />
               </Typography>
               <Stack direction="row" spacing={2}>
-                {layout === 'component' && (
+                {layout === "component" && (
                   <Button
                     variant="outlined"
                     size="small"
@@ -151,7 +164,7 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
                     Dashboard
                   </Button>
                 )}
-                {layout !== 'component' && (
+                {layout !== "component" && (
                   <Button
                     variant="outlined"
                     size="small"
@@ -166,25 +179,27 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
 
                 <IconButton
                   color="secondary"
-                  {...(layout === 'component' ? { onClick: handleDrawerOpen } : { onClick: drawerToggler(true) })}
+                  {...(layout === "component" ? { onClick: handleDrawerOpen } : { onClick: drawerToggler(true) })}
                   sx={{
-                    '&:hover': { bgcolor: theme.palette.mode === 'dark' ? 'secondary.lighter' : 'secondary.dark' }
+                    "&:hover": { bgcolor: theme.palette.mode === "dark" ? "secondary.lighter" : "secondary.dark" }
                   }}
                 >
-                  <MenuOutlined style={{ color: theme.palette.mode === 'dark' ? 'inherit' : theme.palette.grey[100] }} />
+                  <MenuOutlined
+                    style={{ color: theme.palette.mode === "dark" ? "inherit" : theme.palette.grey[100] }}
+                  />
                 </IconButton>
               </Stack>
               <Drawer
                 anchor="top"
                 open={drawerToggle}
                 onClose={drawerToggler(false)}
-                sx={{ '& .MuiDrawer-paper': { backgroundImage: 'none' } }}
+                sx={{ "& .MuiDrawer-paper": { backgroundImage: "none" } }}
               >
                 <Box
                   sx={{
-                    width: 'auto',
-                    '& .MuiListItemIcon-root': {
-                      fontSize: '1rem',
+                    width: "auto",
+                    "& .MuiListItemIcon-root": {
+                      fontSize: "1rem",
                       minWidth: 28
                     }
                   }}
@@ -193,24 +208,30 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
                   onKeyDown={drawerToggler(false)}
                 >
                   <List>
-                    <Link style={{ textDecoration: 'none' }} href="/login" target="_blank">
+                    <Link style={{ textDecoration: "none" }} href="/login" target="_blank">
                       <ListItemButton component="span">
                         <ListItemIcon>
                           <LineOutlined />
                         </ListItemIcon>
-                        <ListItemText primary="Dashboard" primaryTypographyProps={{ variant: 'h6', color: 'text.primary' }} />
+                        <ListItemText
+                          primary="Dashboard"
+                          primaryTypographyProps={{ variant: "h6", color: "text.primary" }}
+                        />
                       </ListItemButton>
                     </Link>
-                    <Link style={{ textDecoration: 'none' }} href="/components-overview/buttons" target="_blank">
+                    <Link style={{ textDecoration: "none" }} href="/components-overview/buttons" target="_blank">
                       <ListItemButton component="span">
                         <ListItemIcon>
                           <LineOutlined />
                         </ListItemIcon>
-                        <ListItemText primary="All Components" primaryTypographyProps={{ variant: 'h6', color: 'text.primary' }} />
+                        <ListItemText
+                          primary="All Components"
+                          primaryTypographyProps={{ variant: "h6", color: "text.primary" }}
+                        />
                       </ListItemButton>
                     </Link>
                     <Link
-                      style={{ textDecoration: 'none' }}
+                      style={{ textDecoration: "none" }}
                       href="https://github.com/codedthemes/mantis-free-react-admin-template"
                       target="_blank"
                     >
@@ -218,27 +239,40 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
                         <ListItemIcon>
                           <LineOutlined />
                         </ListItemIcon>
-                        <ListItemText primary="Free Version" primaryTypographyProps={{ variant: 'h6', color: 'text.primary' }} />
+                        <ListItemText
+                          primary="Free Version"
+                          primaryTypographyProps={{ variant: "h6", color: "text.primary" }}
+                        />
                       </ListItemButton>
                     </Link>
-                    <Link style={{ textDecoration: 'none' }} href="https://codedthemes.gitbook.io/mantis/" target="_blank">
+                    <Link
+                      style={{ textDecoration: "none" }}
+                      href="https://codedthemes.gitbook.io/mantis/"
+                      target="_blank"
+                    >
                       <ListItemButton component="span">
                         <ListItemIcon>
                           <LineOutlined />
                         </ListItemIcon>
-                        <ListItemText primary="Documentation" primaryTypographyProps={{ variant: 'h6', color: 'text.primary' }} />
+                        <ListItemText
+                          primary="Documentation"
+                          primaryTypographyProps={{ variant: "h6", color: "text.primary" }}
+                        />
                       </ListItemButton>
                     </Link>
-                    <Link style={{ textDecoration: 'none' }} href="https://codedthemes.support-hub.io/" target="_blank">
+                    <Link style={{ textDecoration: "none" }} href="https://codedthemes.support-hub.io/" target="_blank">
                       <ListItemButton component="span">
                         <ListItemIcon>
                           <LineOutlined />
                         </ListItemIcon>
-                        <ListItemText primary="Support" primaryTypographyProps={{ variant: 'h6', color: 'text.primary' }} />
+                        <ListItemText
+                          primary="Support"
+                          primaryTypographyProps={{ variant: "h6", color: "text.primary" }}
+                        />
                       </ListItemButton>
                     </Link>
                     <Link
-                      style={{ textDecoration: 'none' }}
+                      style={{ textDecoration: "none" }}
                       href="https://mui.com/store/items/mantis-react-admin-dashboard-template/"
                       target="_blank"
                     >
@@ -246,7 +280,10 @@ const Header = ({ handleDrawerOpen, layout = 'landing', ...others }: Props) => {
                         <ListItemIcon>
                           <LineOutlined />
                         </ListItemIcon>
-                        <ListItemText primary="Purchase Now" primaryTypographyProps={{ variant: 'h6', color: 'text.primary' }} />
+                        <ListItemText
+                          primary="Purchase Now"
+                          primaryTypographyProps={{ variant: "h6", color: "text.primary" }}
+                        />
                         <Chip color="primary" label="v1.0" size="small" />
                       </ListItemButton>
                     </Link>

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
 
 // material-ui
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, useTheme } from "@mui/material/styles";
 import {
   Box,
   Collapse,
@@ -15,18 +15,18 @@ import {
   Paper,
   Popper,
   Typography
-} from '@mui/material';
+} from "@mui/material";
 
 // project import
-import NavItem from './NavItem';
-import Transitions from 'components/@extended/Transitions';
+import NavItem from "./NavItem";
+import Transitions from "@/components/@extended/Transitions";
 
 // assets
-import { BorderOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
+import { BorderOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
 
 // types
-import { NavItemType } from 'types/menu';
-import { RootStateProps } from 'types/root';
+import { NavItemType } from "@/types/menu";
+import { RootStateProps } from "@/types/root";
 
 type VirtualElement = {
   getBoundingClientRect: () => ClientRect | DOMRect;
@@ -35,19 +35,19 @@ type VirtualElement = {
 
 // mini-menu - wrapper
 const PopperStyled = styled(Popper)(({ theme }) => ({
-  overflow: 'visible',
+  overflow: "visible",
   zIndex: 1202,
   minWidth: 180,
-  '&:before': {
+  "&:before": {
     content: '""',
-    display: 'block',
-    position: 'absolute',
+    display: "block",
+    position: "absolute",
     top: 38,
     left: -5,
     width: 10,
     height: 10,
     backgroundColor: theme.palette.background.paper,
-    transform: 'translateY(-50%) rotate(45deg)',
+    transform: "translateY(-50%) rotate(45deg)",
     zIndex: 120,
     borderLeft: `1px solid ${theme.palette.grey.A800}`,
     borderBottom: `1px solid ${theme.palette.grey.A800}`
@@ -72,7 +72,9 @@ const NavCollapse = ({ menu, level }: Props) => {
 
   const [anchorEl, setAnchorEl] = useState<VirtualElement | (() => VirtualElement) | null | undefined>(null);
 
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
+  const handleClick = (
+    event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement, MouseEvent> | undefined
+  ) => {
     setAnchorEl(null);
     if (drawerOpen) {
       setOpen(!open);
@@ -91,8 +93,8 @@ const NavCollapse = ({ menu, level }: Props) => {
   useEffect(() => {
     const childrens = menu.children ? menu.children : [];
     childrens.forEach((item) => {
-      if (pathname && pathname.includes('product-details')) {
-        if (item.url && item.url.includes('product-details')) {
+      if (pathname && pathname.includes("product-details")) {
+        if (item.url && item.url.includes("product-details")) {
           setOpen(true);
         }
       }
@@ -108,9 +110,9 @@ const NavCollapse = ({ menu, level }: Props) => {
 
   const navCollapse = menu.children?.map((item) => {
     switch (item.type) {
-      case 'collapse':
+      case "collapse":
         return <NavCollapse key={item.id} menu={item} level={level + 1} />;
-      case 'item':
+      case "item":
         return <NavItem key={item.id} item={item} level={level + 1} />;
       default:
         return (
@@ -121,11 +123,12 @@ const NavCollapse = ({ menu, level }: Props) => {
     }
   });
 
-  const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false;
+  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 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;
 
   return (
     <>
@@ -138,24 +141,27 @@ const NavCollapse = ({ menu, level }: Props) => {
           pl: drawerOpen ? `${level * 28}px` : 1.5,
           py: !drawerOpen && level === 1 ? 1.25 : 1,
           ...(drawerOpen && {
-            '&:hover': {
-              bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter'
+            "&:hover": {
+              bgcolor: theme.palette.mode === "dark" ? "divider" : "primary.lighter"
             },
-            '&.Mui-selected': {
-              bgcolor: 'transparent',
+            "&.Mui-selected": {
+              bgcolor: "transparent",
               color: iconSelectedColor,
-              '&:hover': { color: iconSelectedColor, bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'transparent' }
+              "&:hover": {
+                color: iconSelectedColor,
+                bgcolor: theme.palette.mode === "dark" ? "divider" : "transparent"
+              }
             }
           }),
           ...(!drawerOpen && {
-            '&:hover': {
-              bgcolor: 'transparent'
+            "&:hover": {
+              bgcolor: "transparent"
             },
-            '&.Mui-selected': {
-              '&:hover': {
-                bgcolor: 'transparent'
+            "&.Mui-selected": {
+              "&:hover": {
+                bgcolor: "transparent"
               },
-              bgcolor: 'transparent'
+              bgcolor: "transparent"
             }
           })
         }}
@@ -164,22 +170,22 @@ const NavCollapse = ({ menu, level }: Props) => {
           <ListItemIcon
             sx={{
               minWidth: 28,
-              color: selected === menu.id ? 'primary.main' : textColor,
+              color: selected === menu.id ? "primary.main" : textColor,
               ...(!drawerOpen && {
                 borderRadius: 1.5,
                 width: 36,
                 height: 36,
-                alignItems: 'center',
-                justifyContent: 'center',
-                '&:hover': {
-                  bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter'
+                alignItems: "center",
+                justifyContent: "center",
+                "&:hover": {
+                  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.900" : "primary.lighter",
+                  "&:hover": {
+                    bgcolor: theme.palette.mode === "dark" ? "primary.darker" : "primary.lighter"
                   }
                 })
             }}
@@ -190,7 +196,7 @@ const NavCollapse = ({ menu, level }: Props) => {
         {(drawerOpen || (!drawerOpen && level !== 1)) && (
           <ListItemText
             primary={
-              <Typography variant="h6" color={selected === menu.id ? 'primary' : textColor}>
+              <Typography variant="h6" color={selected === menu.id ? "primary" : textColor}>
                 {menu.title}
               </Typography>
             }
@@ -205,9 +211,9 @@ const NavCollapse = ({ menu, level }: Props) => {
         )}
         {(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 }} />
+            <DownOutlined style={{ fontSize: "0.625rem", marginLeft: 1 }} />
           ))}
 
         {!drawerOpen && (
@@ -221,7 +227,7 @@ const NavCollapse = ({ menu, level }: Props) => {
             popperOptions={{
               modifiers: [
                 {
-                  name: 'offset',
+                  name: "offset",
                   options: {
                     offset: [-12, 1]
                   }
@@ -233,10 +239,10 @@ const NavCollapse = ({ menu, level }: Props) => {
               <Transitions in={openMini} {...TransitionProps}>
                 <Paper
                   sx={{
-                    overflow: 'hidden',
+                    overflow: "hidden",
                     mt: 1.5,
                     boxShadow: theme.customShadows.z1,
-                    backgroundImage: 'none',
+                    backgroundImage: "none",
                     border: `1px solid ${theme.palette.divider}`
                   }}
                 >

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavGroup.tsx

@@ -1,16 +1,16 @@
-import { useSelector } from 'react-redux';
+import { useSelector } from "react-redux";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, List, Typography } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Box, List, Typography } from "@mui/material";
 
 // project import
-import NavItem from './NavItem';
-import NavCollapse from './NavCollapse';
+import NavItem from "./NavItem";
+import NavCollapse from "./NavCollapse";
 
 // types
-import { NavItemType } from 'types/menu';
-import { RootStateProps } from 'types/root';
+import { NavItemType } from "@/types/menu";
+import { RootStateProps } from "@/types/root";
 
 // ==============================|| NAVIGATION - LIST GROUP ||============================== //
 
@@ -25,9 +25,9 @@ const NavGroup = ({ item }: Props) => {
 
   const navCollapse = item.children?.map((menuItem) => {
     switch (menuItem.type) {
-      case 'collapse':
+      case "collapse":
         return <NavCollapse key={menuItem.id} menu={menuItem} level={1} />;
-      case 'item':
+      case "item":
         return <NavItem key={menuItem.id} item={menuItem} level={1} />;
       default:
         return (
@@ -44,7 +44,7 @@ const NavGroup = ({ item }: Props) => {
         item.title &&
         drawerOpen && (
           <Box sx={{ pl: 3, mb: 1.5 }}>
-            <Typography variant="subtitle2" color={theme.palette.mode === 'dark' ? 'textSecondary' : 'text.secondary'}>
+            <Typography variant="subtitle2" color={theme.palette.mode === "dark" ? "textSecondary" : "text.secondary"}>
               {item.title}
             </Typography>
             {item.caption && (

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.tsx

@@ -1,17 +1,17 @@
-import { forwardRef, useEffect, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { forwardRef, useEffect, ForwardRefExoticComponent, RefAttributes } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
 
 // project import
-import { activeItem } from 'store/reducers/menu';
+import { activeItem } from "@/store/reducers/menu";
 
 // types
-import { LinkTarget, NavItemType } from 'types/menu';
-import { RootStateProps } from 'types/root';
+import { LinkTarget, NavItemType } from "@/types/menu";
+import { RootStateProps } from "@/types/root";
 
 // ==============================|| NAVIGATION - LIST ITEM ||============================== //
 
@@ -26,9 +26,9 @@ const NavItem = ({ item, level }: Props) => {
   const menu = useSelector((state: RootStateProps) => state.menu);
   const { drawerOpen, openItem } = menu;
 
-  let itemTarget: LinkTarget = '_self';
+  let itemTarget: LinkTarget = "_self";
   if (item.target) {
-    itemTarget = '_blank';
+    itemTarget = "_blank";
   }
 
   let listItemProps: {
@@ -37,11 +37,11 @@ const NavItem = ({ item, level }: Props) => {
     target?: LinkTarget;
   } = { component: forwardRef((props, ref) => <Link {...props} to={item.url!} target={itemTarget} />) };
   if (item?.external) {
-    listItemProps = { component: 'a', href: item.url, target: itemTarget };
+    listItemProps = { component: "a", href: item.url, target: itemTarget };
   }
 
   const Icon = item.icon!;
-  const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;
+  const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? "1rem" : "1.25rem" }} /> : false;
 
   const isSelected = openItem.findIndex((id) => id === item.id) > -1;
 
@@ -49,14 +49,14 @@ const NavItem = ({ item, level }: Props) => {
 
   // active menu item on page load
   useEffect(() => {
-    if (pathname && pathname.includes('product-details')) {
-      if (item.url && item.url.includes('product-details')) {
+    if (pathname && pathname.includes("product-details")) {
+      if (item.url && item.url.includes("product-details")) {
         dispatch(activeItem({ openItem: [item.id] }));
       }
     }
 
-    if (pathname && pathname.includes('kanban')) {
-      if (item.url && item.url.includes('kanban')) {
+    if (pathname && pathname.includes("kanban")) {
+      if (item.url && item.url.includes("kanban")) {
         dispatch(activeItem({ openItem: [item.id] }));
       }
     }
@@ -67,8 +67,8 @@ const NavItem = ({ item, level }: Props) => {
     // eslint-disable-next-line
   }, [pathname]);
 
-  const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary';
-  const iconSelectedColor = theme.palette.mode === 'dark' && drawerOpen ? 'text.primary' : 'primary.main';
+  const textColor = theme.palette.mode === "dark" ? "grey.400" : "text.primary";
+  const iconSelectedColor = theme.palette.mode === "dark" && drawerOpen ? "text.primary" : "primary.main";
 
   return (
     <ListItemButton
@@ -80,28 +80,28 @@ const NavItem = ({ item, level }: Props) => {
         pl: drawerOpen ? `${level * 28}px` : 1.5,
         py: !drawerOpen && level === 1 ? 1.25 : 1,
         ...(drawerOpen && {
-          '&:hover': {
-            bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter'
+          "&:hover": {
+            bgcolor: theme.palette.mode === "dark" ? "divider" : "primary.lighter"
           },
-          '&.Mui-selected': {
-            bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
+          "&.Mui-selected": {
+            bgcolor: theme.palette.mode === "dark" ? "divider" : "primary.lighter",
             borderRight: `2px solid ${theme.palette.primary.main}`,
             color: iconSelectedColor,
-            '&:hover': {
+            "&:hover": {
               color: iconSelectedColor,
-              bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter'
+              bgcolor: theme.palette.mode === "dark" ? "divider" : "primary.lighter"
             }
           }
         }),
         ...(!drawerOpen && {
-          '&:hover': {
-            bgcolor: 'transparent'
+          "&:hover": {
+            bgcolor: "transparent"
           },
-          '&.Mui-selected': {
-            '&:hover': {
-              bgcolor: 'transparent'
+          "&.Mui-selected": {
+            "&:hover": {
+              bgcolor: "transparent"
             },
-            bgcolor: 'transparent'
+            bgcolor: "transparent"
           }
         })
       }}
@@ -115,17 +115,17 @@ const NavItem = ({ item, level }: Props) => {
               borderRadius: 1.5,
               width: 36,
               height: 36,
-              alignItems: 'center',
-              justifyContent: 'center',
-              '&:hover': {
-                bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter'
+              alignItems: "center",
+              justifyContent: "center",
+              "&:hover": {
+                bgcolor: theme.palette.mode === "dark" ? "secondary.light" : "secondary.lighter"
               }
             }),
             ...(!drawerOpen &&
               isSelected && {
-                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.900" : "primary.lighter",
+                "&:hover": {
+                  bgcolor: theme.palette.mode === "dark" ? "primary.darker" : "primary.lighter"
                 }
               })
           }}

src/layout/MainLayout/Drawer/DrawerContent/Navigation/index.tsx

@@ -1,14 +1,14 @@
-import { useSelector } from 'react-redux';
+import { useSelector } from "react-redux";
 
 // material-ui
-import { Box, Typography } from '@mui/material';
+import { Box, Typography } from "@mui/material";
 
 // types
-import { RootStateProps } from 'types/root';
+import { RootStateProps } from "@/types/root";
 
 // project import
-import NavGroup from './NavGroup';
-import menuItem from 'menu-items';
+import NavGroup from "./NavGroup";
+import menuItem from "@/menu-items";
 
 // ==============================|| DRAWER CONTENT - NAVIGATION ||============================== //
 
@@ -18,7 +18,7 @@ const Navigation = () => {
 
   const navGroups = menuItem.items.map((item) => {
     switch (item.type) {
-      case 'group':
+      case "group":
         return <NavGroup key={item.id} item={item} />;
       default:
         return (
@@ -29,7 +29,7 @@ const Navigation = () => {
     }
   });
 
-  return <Box sx={{ pt: drawerOpen ? 2 : 0, '& > ul:first-of-type': { mt: 0 } }}>{navGroups}</Box>;
+  return <Box sx={{ pt: drawerOpen ? 2 : 0, "& > ul:first-of-type": { mt: 0 } }}>{navGroups}</Box>;
 };
 
 export default Navigation;

src/layout/MainLayout/Drawer/DrawerContent/index.tsx

@@ -1,15 +1,15 @@
 // project import
-import Navigation from './Navigation';
-import SimpleBar from 'components/third-party/SimpleBar';
+import Navigation from "./Navigation";
+import SimpleBar from "@/components/third-party/SimpleBar";
 
 // ==============================|| DRAWER CONTENT ||============================== //
 
 const DrawerContent = () => (
   <SimpleBar
     sx={{
-      '& .simplebar-content': {
-        display: 'flex',
-        flexDirection: 'column'
+      "& .simplebar-content": {
+        display: "flex",
+        flexDirection: "column"
       }
     }}
   >

src/layout/MainLayout/Drawer/DrawerHeader/index.tsx

@@ -1,9 +1,9 @@
 // material-ui
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from "@mui/material/styles";
 
 // project import
-import DrawerHeaderStyled from './DrawerHeaderStyled';
-import Logo from 'components/logo';
+import DrawerHeaderStyled from "./DrawerHeaderStyled";
+import Logo from "@/components/logo";
 
 // ==============================|| DRAWER HEADER ||============================== //
 
@@ -16,7 +16,7 @@ const DrawerHeader = ({ open }: Props) => {
 
   return (
     <DrawerHeaderStyled theme={theme} open={open}>
-      <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} />
+      <Logo isIcon={!open} sx={{ width: open ? "auto" : 35, height: 35 }} />
     </DrawerHeaderStyled>
   );
 };

src/layout/MainLayout/Drawer/MiniDrawerStyled.ts

@@ -1,46 +1,46 @@
 // material-ui
-import { styled, Theme, CSSObject } from '@mui/material/styles';
-import Drawer from '@mui/material/Drawer';
+import { styled, Theme, CSSObject } from "@mui/material/styles";
+import Drawer from "@mui/material/Drawer";
 
 // project import
-import { drawerWidth } from 'config';
+import { drawerWidth } from "@/config";
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: drawerWidth,
   borderRight: `1px solid ${theme.palette.divider}`,
-  transition: theme.transitions.create('width', {
+  transition: theme.transitions.create("width", {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.enteringScreen
   }),
-  overflowX: 'hidden',
-  boxShadow: theme.palette.mode === 'dark' ? theme.customShadows.z1 : 'none'
+  overflowX: "hidden",
+  boxShadow: theme.palette.mode === "dark" ? theme.customShadows.z1 : "none"
 });
 
 const closedMixin = (theme: Theme): CSSObject => ({
-  transition: theme.transitions.create('width', {
+  transition: theme.transitions.create("width", {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
-  overflowX: 'hidden',
+  overflowX: "hidden",
   width: theme.spacing(7.5),
-  borderRight: 'none',
+  borderRight: "none",
   boxShadow: theme.customShadows.z1
 });
 
 // ==============================|| DRAWER - MINI STYLED ||============================== //
 
-const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
   width: drawerWidth,
   flexShrink: 0,
-  whiteSpace: 'nowrap',
-  boxSizing: 'border-box',
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
   ...(open && {
     ...openedMixin(theme),
-    '& .MuiDrawer-paper': openedMixin(theme)
+    "& .MuiDrawer-paper": openedMixin(theme)
   }),
   ...(!open && {
     ...closedMixin(theme),
-    '& .MuiDrawer-paper': closedMixin(theme)
+    "& .MuiDrawer-paper": closedMixin(theme)
   })
 }));
 

src/layout/MainLayout/Drawer/index.tsx

@@ -1,14 +1,14 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, Drawer, useMediaQuery } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Box, Drawer, useMediaQuery } from "@mui/material";
 
 // project import
-import DrawerHeader from './DrawerHeader';
-import DrawerContent from './DrawerContent';
-import MiniDrawerStyled from './MiniDrawerStyled';
-import { drawerWidth } from 'config';
+import DrawerHeader from "./DrawerHeader";
+import DrawerContent from "./DrawerContent";
+import MiniDrawerStyled from "./MiniDrawerStyled";
+import { drawerWidth } from "@/config";
 
 // ==============================|| MAIN LAYOUT - DRAWER ||============================== //
 
@@ -20,7 +20,7 @@ interface Props {
 
 const MainDrawer = ({ open, handleDrawerToggle, window }: Props) => {
   const theme = useTheme();
-  const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));
+  const matchDownMD = useMediaQuery(theme.breakpoints.down("lg"));
 
   // responsive drawer container
   const container = window !== undefined ? () => window().document.body : undefined;
@@ -44,13 +44,13 @@ const MainDrawer = ({ open, handleDrawerToggle, window }: Props) => {
           onClose={handleDrawerToggle}
           ModalProps={{ keepMounted: true }}
           sx={{
-            display: { xs: 'block', lg: 'none' },
-            '& .MuiDrawer-paper': {
-              boxSizing: 'border-box',
+            display: { xs: "block", lg: "none" },
+            "& .MuiDrawer-paper": {
+              boxSizing: "border-box",
               width: drawerWidth,
               borderRight: `1px solid ${theme.palette.divider}`,
-              backgroundImage: 'none',
-              boxShadow: 'inherit'
+              backgroundImage: "none",
+              boxShadow: "inherit"
             }
           }}
         >

src/layout/MainLayout/Header/AppBarStyled.tsx

@@ -1,9 +1,9 @@
 // material-ui
-import { styled } from '@mui/material/styles';
-import AppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
+import { styled } from "@mui/material/styles";
+import AppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
 
 // project import
-import { drawerWidth } from 'config';
+import { drawerWidth } from "@/config";
 
 // ==============================|| HEADER - APP BAR STYLED ||============================== //
 
@@ -11,9 +11,9 @@ interface Props extends MuiAppBarProps {
   open?: boolean;
 }
 
-const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })<Props>(({ theme, open }) => ({
+const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== "open" })<Props>(({ theme, open }) => ({
   zIndex: theme.zIndex.drawer + 1,
-  transition: theme.transitions.create(['width', 'margin'], {
+  transition: theme.transitions.create(["width", "margin"], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
@@ -23,7 +23,7 @@ const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'ope
   ...(open && {
     marginLeft: drawerWidth,
     width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
+    transition: theme.transitions.create(["width", "margin"], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen
     })

src/layout/MainLayout/Header/HeaderContent/MegaMenuSection.tsx

@@ -1,8 +1,8 @@
-import { useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useRef, useState } from "react";
+import { Link } from "react-router-dom";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from "@mui/material/styles";
 import {
   Button,
   Box,
@@ -18,20 +18,20 @@ import {
   Popper,
   Stack,
   Typography
-} from '@mui/material';
+} from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
-import Dot from 'components/@extended/Dot';
-import IconButton from 'components/@extended/IconButton';
-import Transitions from 'components/@extended/Transitions';
-import { drawerWidth } from 'config';
+import MainCard from "@/components/MainCard";
+import Dot from "@/components/@extended/Dot";
+import IconButton from "@/components/@extended/IconButton";
+import Transitions from "@/components/@extended/Transitions";
+import { drawerWidth } from "@/config";
 
 // assets
-import { ArrowRightOutlined, WindowsOutlined } from '@ant-design/icons';
-import backgroundVector from 'assets/images/mega-menu/back.svg';
-import imageChart from 'assets/images/mega-menu/chart.svg';
-import AnimateButton from 'components/@extended/AnimateButton';
+import { ArrowRightOutlined, WindowsOutlined } from "@ant-design/icons";
+import backgroundVector from "@/assets/images/mega-menu/back.svg";
+import imageChart from "@/assets/images/mega-menu/chart.svg";
+import AnimateButton from "@/components/@extended/AnimateButton";
 
 // ==============================|| HEADER CONTENT - MEGA MENU SECTION ||============================== //
 
@@ -51,18 +51,18 @@ const MegaMenuSection = () => {
     setOpen(false);
   };
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+  const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
+  const iconBackColor = theme.palette.mode === "dark" ? "background.default" : "grey.100";
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
       <IconButton
         color="secondary"
         variant="light"
-        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        sx={{ color: "text.primary", bgcolor: open ? iconBackColorOpen : iconBackColor }}
         aria-label="open profile"
         ref={anchorRef}
-        aria-controls={open ? 'profile-grow' : undefined}
+        aria-controls={open ? "profile-grow" : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
       >
@@ -78,7 +78,7 @@ const MegaMenuSection = () => {
         popperOptions={{
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [-180, 9]
               }
@@ -111,8 +111,8 @@ const MegaMenuSection = () => {
                       }}
                     >
                       <Box sx={{ p: 4.5, pb: 3 }}>
-                        <Stack sx={{ color: 'background.paper' }}>
-                          <Typography variant="h2" sx={{ fontSize: '1.875rem', mb: 1 }}>
+                        <Stack sx={{ color: "background.paper" }}>
+                          <Typography variant="h2" sx={{ fontSize: "1.875rem", mb: 1 }}>
                             Explore Components
                           </Typography>
                           <Typography variant="h6">
@@ -124,9 +124,9 @@ const MegaMenuSection = () => {
                                 variant="contained"
                                 color="secondary"
                                 sx={{
-                                  bgcolor: 'background.paper',
-                                  color: 'text.primary',
-                                  '&:hover': { bgcolor: 'background.paper', color: 'text.primary' }
+                                  bgcolor: "background.paper",
+                                  color: "text.primary",
+                                  "&:hover": { bgcolor: "background.paper", color: "text.primary" }
                                 }}
                                 endIcon={<ArrowRightOutlined />}
                                 component={Link}
@@ -136,7 +136,12 @@ const MegaMenuSection = () => {
                                 View All
                               </Button>
                             </AnimateButton>
-                            <CardMedia component="img" src={imageChart} alt="Chart" sx={{ mr: -2.5, mb: -2.5, width: 124 }} />
+                            <CardMedia
+                              component="img"
+                              src={imageChart}
+                              alt="Chart"
+                              sx={{ mr: -2.5, mb: -2.5, width: 124 }}
+                            />
                           </Stack>
                         </Stack>
                       </Box>
@@ -145,19 +150,19 @@ const MegaMenuSection = () => {
                       <Box
                         sx={{
                           p: 4,
-                          '& .MuiList-root': {
+                          "& .MuiList-root": {
                             pb: 0
                           },
-                          '& .MuiListSubheader-root': {
+                          "& .MuiListSubheader-root": {
                             p: 0,
                             pb: 1.5
                           },
-                          '& .MuiListItemButton-root': {
+                          "& .MuiListItemButton-root": {
                             p: 0.5,
-                            '&:hover': {
-                              background: 'transparent',
-                              '& .MuiTypography-root': {
-                                color: 'primary.main'
+                            "&:hover": {
+                              background: "transparent",
+                              "& .MuiTypography-root": {
+                                color: "primary.main"
                               }
                             }
                           }
@@ -200,7 +205,12 @@ const MegaMenuSection = () => {
                                 </ListItemIcon>
                                 <ListItemText primary="Forgot Password" />
                               </ListItemButton>
-                              <ListItemButton disableRipple component={Link} target="_blank" to="/auth/code-verification">
+                              <ListItemButton
+                                disableRipple
+                                component={Link}
+                                target="_blank"
+                                to="/auth/code-verification"
+                              >
                                 <ListItemIcon>
                                   <Dot size={7} color="secondary" variant="outlined" />
                                 </ListItemIcon>
@@ -244,13 +254,23 @@ const MegaMenuSection = () => {
                                 </ListItemIcon>
                                 <ListItemText primary="Payment" />
                               </ListItemButton>
-                              <ListItemButton disableRipple component={Link} target="_blank" to="/maintenance/under-construction">
+                              <ListItemButton
+                                disableRipple
+                                component={Link}
+                                target="_blank"
+                                to="/maintenance/under-construction"
+                              >
                                 <ListItemIcon>
                                   <Dot size={7} color="secondary" variant="outlined" />
                                 </ListItemIcon>
                                 <ListItemText primary="Construction" />
                               </ListItemButton>
-                              <ListItemButton disableRipple component={Link} target="_blank" to="/maintenance/coming-soon">
+                              <ListItemButton
+                                disableRipple
+                                component={Link}
+                                target="_blank"
+                                to="/maintenance/coming-soon"
+                              >
                                 <ListItemIcon>
                                   <Dot size={7} color="secondary" variant="outlined" />
                                 </ListItemIcon>

src/layout/MainLayout/Header/HeaderContent/Message.tsx

@@ -1,7 +1,7 @@
-import { useRef, useState } from 'react';
+import { useRef, useState } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from "@mui/material/styles";
 import {
   Avatar,
   Box,
@@ -16,19 +16,19 @@ import {
   Popper,
   Typography,
   useMediaQuery
-} from '@mui/material';
+} from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
-import IconButton from 'components/@extended/IconButton';
-import Transitions from 'components/@extended/Transitions';
+import MainCard from "@/components/MainCard";
+import IconButton from "@/components/@extended/IconButton";
+import Transitions from "@/components/@extended/Transitions";
 
 // assets
-import avatar2 from 'assets/images/users/avatar-2.png';
-import avatar3 from 'assets/images/users/avatar-3.png';
-import avatar4 from 'assets/images/users/avatar-4.png';
-import avatar5 from 'assets/images/users/avatar-5.png';
-import { MailOutlined, CloseOutlined } from '@ant-design/icons';
+import avatar2 from "@/assets/images/users/avatar-2.png";
+import avatar3 from "@/assets/images/users/avatar-3.png";
+import avatar4 from "@/assets/images/users/avatar-4.png";
+import avatar5 from "@/assets/images/users/avatar-5.png";
+import { MailOutlined, CloseOutlined } from "@ant-design/icons";
 
 // sx styles
 const avatarSX = {
@@ -37,19 +37,19 @@ const avatarSX = {
 };
 
 const actionSX = {
-  mt: '6px',
+  mt: "6px",
   ml: 1,
-  top: 'auto',
-  right: 'auto',
-  alignSelf: 'flex-start',
-  transform: 'none'
+  top: "auto",
+  right: "auto",
+  alignSelf: "flex-start",
+  transform: "none"
 };
 
 // ==============================|| HEADER CONTENT - MESSAGES ||============================== //
 
 const Message = () => {
   const theme = useTheme();
-  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
+  const matchesXs = useMediaQuery(theme.breakpoints.down("md"));
 
   const anchorRef = useRef<any>(null);
   const [open, setOpen] = useState(false);
@@ -64,25 +64,25 @@ const Message = () => {
     setOpen(false);
   };
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+  const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
+  const iconBackColor = theme.palette.mode === "dark" ? "background.default" : "grey.100";
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
       <IconButton
         color="secondary"
         variant="light"
-        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        sx={{ color: "text.primary", bgcolor: open ? iconBackColorOpen : iconBackColor }}
         aria-label="open profile"
         ref={anchorRef}
-        aria-controls={open ? 'profile-grow' : undefined}
+        aria-controls={open ? "profile-grow" : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
       >
         <MailOutlined />
       </IconButton>
       <Popper
-        placement={matchesXs ? 'bottom' : 'bottom-end'}
+        placement={matchesXs ? "bottom" : "bottom-end"}
         open={open}
         anchorEl={anchorRef.current}
         role={undefined}
@@ -91,7 +91,7 @@ const Message = () => {
         popperOptions={{
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [matchesXs ? -60 : 0, 9]
               }
@@ -104,10 +104,10 @@ const Message = () => {
             <Paper
               sx={{
                 boxShadow: theme.customShadows.z1,
-                width: '100%',
+                width: "100%",
                 minWidth: 285,
                 maxWidth: 420,
-                [theme.breakpoints.down('md')]: {
+                [theme.breakpoints.down("md")]: {
                   maxWidth: 285
                 }
               }}
@@ -128,10 +128,10 @@ const Message = () => {
                     component="nav"
                     sx={{
                       p: 0,
-                      '& .MuiListItemButton-root': {
+                      "& .MuiListItemButton-root": {
                         py: 1.5,
-                        '& .MuiAvatar-root': avatarSX,
-                        '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                        "& .MuiAvatar-root": avatarSX,
+                        "& .MuiListItemSecondaryAction-root": { ...actionSX, position: "relative" }
                       }
                     }}
                   >
@@ -142,10 +142,10 @@ const Message = () => {
                       <ListItemText
                         primary={
                           <Typography variant="h6">
-                            It&apos;s{' '}
+                            It&apos;s{" "}
                             <Typography component="span" variant="subtitle1">
                               Cristina danny&apos;s
-                            </Typography>{' '}
+                            </Typography>{" "}
                             birthday today.
                           </Typography>
                         }
@@ -167,7 +167,7 @@ const Message = () => {
                           <Typography variant="h6">
                             <Typography component="span" variant="subtitle1">
                               Aida Burg
-                            </Typography>{' '}
+                            </Typography>{" "}
                             commented your post.
                           </Typography>
                         }
@@ -208,8 +208,8 @@ const Message = () => {
                           <Typography variant="h6">
                             <Typography component="span" variant="subtitle1">
                               Cristina Danny
-                            </Typography>{' '}
-                            invited to join{' '}
+                            </Typography>{" "}
+                            invited to join{" "}
                             <Typography component="span" variant="subtitle1">
                               Meeting.
                             </Typography>
@@ -224,7 +224,7 @@ const Message = () => {
                       </ListItemSecondaryAction>
                     </ListItemButton>
                     <Divider />
-                    <ListItemButton sx={{ textAlign: 'center' }}>
+                    <ListItemButton sx={{ textAlign: "center" }}>
                       <ListItemText
                         primary={
                           <Typography variant="h6" color="primary">

src/layout/MainLayout/Header/HeaderContent/MobileSection.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from "@mui/material";
 
 // project import
-import Search from './Search';
-import Profile from './Profile';
-import IconButton from 'components/@extended/IconButton';
-import Transitions from 'components/@extended/Transitions';
+import Search from "./Search";
+import Profile from "./Profile";
+import IconButton from "@/components/@extended/IconButton";
+import Transitions from "@/components/@extended/Transitions";
 
 // assets
-import { MoreOutlined } from '@ant-design/icons';
+import { MoreOutlined } from "@ant-design/icons";
 
 // ==============================|| HEADER CONTENT - MOBILE ||============================== //
 
@@ -42,16 +42,16 @@ const MobileSection = () => {
     prevOpen.current = open;
   }, [open]);
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+  const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
+  const iconBackColor = theme.palette.mode === "dark" ? "background.default" : "grey.100";
 
   return (
     <>
       <Box sx={{ flexShrink: 0, ml: 0.75 }}>
         <IconButton
-          sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          sx={{ color: "text.primary", bgcolor: open ? iconBackColorOpen : iconBackColor }}
           ref={anchorRef}
-          aria-controls={open ? 'menu-list-grow' : undefined}
+          aria-controls={open ? "menu-list-grow" : undefined}
           aria-haspopup="true"
           onClick={handleToggle}
           color="secondary"
@@ -68,12 +68,12 @@ const MobileSection = () => {
         transition
         disablePortal
         style={{
-          width: '100%'
+          width: "100%"
         }}
         popperOptions={{
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [0, 9]
               }

src/layout/MainLayout/Header/HeaderContent/Notification.tsx

@@ -1,7 +1,7 @@
-import { useRef, useState } from 'react';
+import { useRef, useState } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from "@mui/material/styles";
 import {
   Avatar,
   Badge,
@@ -18,38 +18,38 @@ import {
   Tooltip,
   Typography,
   useMediaQuery
-} from '@mui/material';
+} from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
-import IconButton from 'components/@extended/IconButton';
-import Transitions from 'components/@extended/Transitions';
+import MainCard from "@/components/MainCard";
+import IconButton from "@/components/@extended/IconButton";
+import Transitions from "@/components/@extended/Transitions";
 
 // assets
-import { BellOutlined, CheckCircleOutlined, GiftOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons';
+import { BellOutlined, CheckCircleOutlined, GiftOutlined, MessageOutlined, SettingOutlined } from "@ant-design/icons";
 
 // sx styles
 const avatarSX = {
   width: 36,
   height: 36,
-  fontSize: '1rem'
+  fontSize: "1rem"
 };
 
 const actionSX = {
-  mt: '6px',
+  mt: "6px",
   ml: 1,
-  top: 'auto',
-  right: 'auto',
-  alignSelf: 'flex-start',
+  top: "auto",
+  right: "auto",
+  alignSelf: "flex-start",
 
-  transform: 'none'
+  transform: "none"
 };
 
 // ==============================|| HEADER CONTENT - NOTIFICATION ||============================== //
 
 const Notification = () => {
   const theme = useTheme();
-  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
+  const matchesXs = useMediaQuery(theme.breakpoints.down("md"));
 
   const anchorRef = useRef<any>(null);
   const [read, setRead] = useState(2);
@@ -65,18 +65,18 @@ const Notification = () => {
     setOpen(false);
   };
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+  const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
+  const iconBackColor = theme.palette.mode === "dark" ? "background.default" : "grey.100";
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
       <IconButton
         color="secondary"
         variant="light"
-        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+        sx={{ color: "text.primary", bgcolor: open ? iconBackColorOpen : iconBackColor }}
         aria-label="open profile"
         ref={anchorRef}
-        aria-controls={open ? 'profile-grow' : undefined}
+        aria-controls={open ? "profile-grow" : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
       >
@@ -85,7 +85,7 @@ const Notification = () => {
         </Badge>
       </IconButton>
       <Popper
-        placement={matchesXs ? 'bottom' : 'bottom-end'}
+        placement={matchesXs ? "bottom" : "bottom-end"}
         open={open}
         anchorEl={anchorRef.current}
         role={undefined}
@@ -94,7 +94,7 @@ const Notification = () => {
         popperOptions={{
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [matchesXs ? -5 : 0, 9]
               }
@@ -107,10 +107,10 @@ const Notification = () => {
             <Paper
               sx={{
                 boxShadow: theme.customShadows.z1,
-                width: '100%',
+                width: "100%",
                 minWidth: 285,
                 maxWidth: 420,
-                [theme.breakpoints.down('md')]: {
+                [theme.breakpoints.down("md")]: {
                   maxWidth: 285
                 }
               }}
@@ -126,7 +126,7 @@ const Notification = () => {
                       {read > 0 && (
                         <Tooltip title="Mark as all read">
                           <IconButton color="success" size="small" onClick={() => setRead(0)}>
-                            <CheckCircleOutlined style={{ fontSize: '1.15rem' }} />
+                            <CheckCircleOutlined style={{ fontSize: "1.15rem" }} />
                           </IconButton>
                         </Tooltip>
                       )}
@@ -137,11 +137,11 @@ const Notification = () => {
                     component="nav"
                     sx={{
                       p: 0,
-                      '& .MuiListItemButton-root': {
+                      "& .MuiListItemButton-root": {
                         py: 0.5,
-                        '&.Mui-selected': { bgcolor: 'grey.50', color: 'text.primary' },
-                        '& .MuiAvatar-root': avatarSX,
-                        '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                        "&.Mui-selected": { bgcolor: "grey.50", color: "text.primary" },
+                        "& .MuiAvatar-root": avatarSX,
+                        "& .MuiListItemSecondaryAction-root": { ...actionSX, position: "relative" }
                       }
                     }}
                   >
@@ -149,8 +149,8 @@ const Notification = () => {
                       <ListItemAvatar>
                         <Avatar
                           sx={{
-                            color: 'success.main',
-                            bgcolor: 'success.lighter'
+                            color: "success.main",
+                            bgcolor: "success.lighter"
                           }}
                         >
                           <GiftOutlined />
@@ -159,10 +159,10 @@ const Notification = () => {
                       <ListItemText
                         primary={
                           <Typography variant="h6">
-                            It&apos;s{' '}
+                            It&apos;s{" "}
                             <Typography component="span" variant="subtitle1">
                               Cristina danny&apos;s
-                            </Typography>{' '}
+                            </Typography>{" "}
                             birthday today.
                           </Typography>
                         }
@@ -179,8 +179,8 @@ const Notification = () => {
                       <ListItemAvatar>
                         <Avatar
                           sx={{
-                            color: 'primary.main',
-                            bgcolor: 'primary.lighter'
+                            color: "primary.main",
+                            bgcolor: "primary.lighter"
                           }}
                         >
                           <MessageOutlined />
@@ -191,7 +191,7 @@ const Notification = () => {
                           <Typography variant="h6">
                             <Typography component="span" variant="subtitle1">
                               Aida Burg
-                            </Typography>{' '}
+                            </Typography>{" "}
                             commented your post.
                           </Typography>
                         }
@@ -208,8 +208,8 @@ const Notification = () => {
                       <ListItemAvatar>
                         <Avatar
                           sx={{
-                            color: 'error.main',
-                            bgcolor: 'error.lighter'
+                            color: "error.main",
+                            bgcolor: "error.lighter"
                           }}
                         >
                           <SettingOutlined />
@@ -221,7 +221,7 @@ const Notification = () => {
                             Your Profile is Complete &nbsp;
                             <Typography component="span" variant="subtitle1">
                               60%
-                            </Typography>{' '}
+                            </Typography>{" "}
                           </Typography>
                         }
                         secondary="7 hours ago"
@@ -237,8 +237,8 @@ const Notification = () => {
                       <ListItemAvatar>
                         <Avatar
                           sx={{
-                            color: 'primary.main',
-                            bgcolor: 'primary.lighter'
+                            color: "primary.main",
+                            bgcolor: "primary.lighter"
                           }}
                         >
                           C
@@ -249,8 +249,8 @@ const Notification = () => {
                           <Typography variant="h6">
                             <Typography component="span" variant="subtitle1">
                               Cristina Danny
-                            </Typography>{' '}
-                            invited to join{' '}
+                            </Typography>{" "}
+                            invited to join{" "}
                             <Typography component="span" variant="subtitle1">
                               Meeting.
                             </Typography>
@@ -265,7 +265,7 @@ const Notification = () => {
                       </ListItemSecondaryAction>
                     </ListItemButton>
                     <Divider />
-                    <ListItemButton sx={{ textAlign: 'center', py: `${12}px !important` }}>
+                    <ListItemButton sx={{ textAlign: "center", py: `${12}px !important` }}>
                       <ListItemText
                         primary={
                           <Typography variant="h6" color="primary">

src/layout/MainLayout/Header/HeaderContent/Profile/index.tsx

@@ -1,21 +1,34 @@
-import { useRef, useState, ReactNode, SyntheticEvent } from 'react';
+import { useRef, useState, ReactNode, SyntheticEvent } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, ButtonBase, CardContent, ClickAwayListener, Grid, Paper, Popper, Stack, Tab, Tabs, Tooltip, Typography } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import {
+  Box,
+  ButtonBase,
+  CardContent,
+  ClickAwayListener,
+  Grid,
+  Paper,
+  Popper,
+  Stack,
+  Tab,
+  Tabs,
+  Tooltip,
+  Typography
+} from "@mui/material";
 
 // project import
-import Avatar from 'components/@extended/Avatar';
-import MainCard from 'components/MainCard';
-import Transitions from 'components/@extended/Transitions';
-import IconButton from 'components/@extended/IconButton';
-import useAuth from 'hooks/useAuth';
-import ProfileTab from './ProfileTab';
-import SettingTab from './SettingTab';
+import Avatar from "@/components/@extended/Avatar";
+import MainCard from "@/components/MainCard";
+import Transitions from "@/components/@extended/Transitions";
+import IconButton from "@/components/@extended/IconButton";
+import useAuth from "@/hooks/useAuth";
+import ProfileTab from "./ProfileTab";
+import SettingTab from "./SettingTab";
 
 // assets
-import avatar1 from 'assets/images/users/avatar-1.png';
-import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import avatar1 from "@/assets/images/users/avatar-1.png";
+import { LogoutOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
 
 // types
 interface TabPanelProps {
@@ -30,7 +43,13 @@ function TabPanel(props: TabPanelProps) {
   const { children, value, index, ...other } = props;
 
   return (
-    <div role="tabpanel" hidden={value !== index} id={`profile-tabpanel-${index}`} aria-labelledby={`profile-tab-${index}`} {...other}>
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`profile-tabpanel-${index}`}
+      aria-labelledby={`profile-tab-${index}`}
+      {...other}
+    >
       {value === index && children}
     </div>
   );
@@ -39,7 +58,7 @@ function TabPanel(props: TabPanelProps) {
 function a11yProps(index: number) {
   return {
     id: `profile-tab-${index}`,
-    'aria-controls': `profile-tabpanel-${index}`
+    "aria-controls": `profile-tabpanel-${index}`
   };
 }
 
@@ -76,24 +95,24 @@ const Profile = () => {
     setValue(newValue);
   };
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
+  const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
       <ButtonBase
         sx={{
           p: 0.25,
-          bgcolor: open ? iconBackColorOpen : 'transparent',
+          bgcolor: open ? iconBackColorOpen : "transparent",
           borderRadius: 1,
-          '&:hover': { bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter' },
-          '&:focus-visible': {
+          "&:hover": { bgcolor: theme.palette.mode === "dark" ? "secondary.light" : "secondary.lighter" },
+          "&:focus-visible": {
             outline: `2px solid ${theme.palette.secondary.dark}`,
             outlineOffset: 2
           }
         }}
         aria-label="open profile"
         ref={anchorRef}
-        aria-controls={open ? 'profile-grow' : undefined}
+        aria-controls={open ? "profile-grow" : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
       >
@@ -112,7 +131,7 @@ const Profile = () => {
         popperOptions={{
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [0, 9]
               }
@@ -129,7 +148,7 @@ const Profile = () => {
                   width: 290,
                   minWidth: 240,
                   maxWidth: 290,
-                  [theme.breakpoints.down('md')]: {
+                  [theme.breakpoints.down("md")]: {
                     maxWidth: 250
                   }
                 }}
@@ -151,7 +170,7 @@ const Profile = () => {
                         </Grid>
                         <Grid item>
                           <Tooltip title="Logout">
-                            <IconButton size="large" sx={{ color: 'text.primary' }} onClick={handleLogout}>
+                            <IconButton size="large" sx={{ color: "text.primary" }} onClick={handleLogout}>
                               <LogoutOutlined />
                             </IconButton>
                           </Tooltip>
@@ -160,29 +179,29 @@ const Profile = () => {
                     </CardContent>
                     {open && (
                       <>
-                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                           <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="profile tabs">
                             <Tab
                               sx={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                textTransform: 'capitalize'
+                                display: "flex",
+                                flexDirection: "row",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                textTransform: "capitalize"
                               }}
-                              icon={<UserOutlined style={{ marginBottom: 0, marginRight: '10px' }} />}
+                              icon={<UserOutlined style={{ marginBottom: 0, marginRight: "10px" }} />}
                               label="Profile"
                               {...a11yProps(0)}
                             />
                             <Tab
                               sx={{
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                textTransform: 'capitalize'
+                                display: "flex",
+                                flexDirection: "row",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                textTransform: "capitalize"
                               }}
-                              icon={<SettingOutlined style={{ marginBottom: 0, marginRight: '10px' }} />}
+                              icon={<SettingOutlined style={{ marginBottom: 0, marginRight: "10px" }} />}
                               label="Setting"
                               {...a11yProps(1)}
                             />

src/layout/MainLayout/Header/index.tsx

@@ -1,16 +1,16 @@
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { AppBar, Toolbar, useMediaQuery, AppBarProps } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { AppBar, Toolbar, useMediaQuery, AppBarProps } from "@mui/material";
 
 // project import
-import AppBarStyled from './AppBarStyled';
-import HeaderContent from './HeaderContent';
-import IconButton from 'components/@extended/IconButton';
+import AppBarStyled from "./AppBarStyled";
+import HeaderContent from "./HeaderContent";
+import IconButton from "@/components/@extended/IconButton";
 
 // assets
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 
 // ==============================|| MAIN LAYOUT - HEADER ||============================== //
 
@@ -21,13 +21,13 @@ interface Props {
 
 const Header = ({ open, handleDrawerToggle }: Props) => {
   const theme = useTheme();
-  const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));
+  const matchDownMD = useMediaQuery(theme.breakpoints.down("lg"));
 
   // header content
   const headerContent = useMemo(() => <HeaderContent />, []);
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+  const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
+  const iconBackColor = theme.palette.mode === "dark" ? "background.default" : "grey.100";
 
   // common header
   const mainHeader: ReactNode = (
@@ -38,7 +38,7 @@ const Header = ({ open, handleDrawerToggle }: Props) => {
         edge="start"
         color="secondary"
         variant="light"
-        sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
+        sx={{ color: "text.primary", bgcolor: open ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
       >
         {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
       </IconButton>
@@ -48,8 +48,8 @@ const Header = ({ open, handleDrawerToggle }: Props) => {
 
   // app-bar params
   const appBar: AppBarProps = {
-    position: 'fixed',
-    color: 'inherit',
+    position: "fixed",
+    color: "inherit",
     elevation: 0,
     sx: {
       borderBottom: `1px solid ${theme.palette.divider}`,

src/layout/MainLayout/index.tsx

@@ -1,28 +1,28 @@
-import { useEffect, useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useState } from "react";
+import { Outlet } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { useMediaQuery, Box, Container, Toolbar } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { useMediaQuery, Box, Container, Toolbar } from "@mui/material";
 
 // project import
-import Drawer from './Drawer';
-import Header from './Header';
-import Footer from './Footer';
-import navigation from 'menu-items';
-import useConfig from 'hooks/useConfig';
-import Breadcrumbs from 'components/@extended/Breadcrumbs';
+import Drawer from "./Drawer";
+import Header from "./Header";
+import Footer from "./Footer";
+import navigation from "@/menu-items";
+import useConfig from "@/hooks/useConfig";
+import Breadcrumbs from "@/components/@extended/Breadcrumbs";
 
 // types
-import { RootStateProps } from 'types/root';
-import { openDrawer } from 'store/reducers/menu';
+import { RootStateProps } from "@/types/root";
+import { openDrawer } from "@/store/reducers/menu";
 
 // ==============================|| MAIN LAYOUT ||============================== //
 
 const MainLayout = () => {
   const theme = useTheme();
-  const matchDownLG = useMediaQuery(theme.breakpoints.down('xl'));
+  const matchDownLG = useMediaQuery(theme.breakpoints.down("xl"));
 
   const { container, miniDrawer } = useConfig();
   const dispatch = useDispatch();
@@ -52,15 +52,21 @@ const MainLayout = () => {
   // }, [drawerOpen]);
 
   return (
-    <Box sx={{ display: 'flex', width: '100%' }}>
+    <Box sx={{ display: "flex", width: "100%" }}>
       <Header open={open} handleDrawerToggle={handleDrawerToggle} />
       <Drawer open={open} handleDrawerToggle={handleDrawerToggle} />
-      <Box component="main" sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
+      <Box component="main" sx={{ width: "calc(100% - 260px)", flexGrow: 1, p: { xs: 2, sm: 3 } }}>
         <Toolbar />
         {container && (
           <Container
             maxWidth="xl"
-            sx={{ px: { xs: 0, sm: 2 }, position: 'relative', minHeight: 'calc(100vh - 110px)', display: 'flex', flexDirection: 'column' }}
+            sx={{
+              px: { xs: 0, sm: 2 },
+              position: "relative",
+              minHeight: "calc(100vh - 110px)",
+              display: "flex",
+              flexDirection: "column"
+            }}
           >
             <Breadcrumbs navigation={navigation} title titleBottom card={false} divider={false} />
             <Outlet />
@@ -68,7 +74,9 @@ const MainLayout = () => {
           </Container>
         )}
         {!container && (
-          <Box sx={{ position: 'relative', minHeight: 'calc(100vh - 110px)', display: 'flex', flexDirection: 'column' }}>
+          <Box
+            sx={{ position: "relative", minHeight: "calc(100vh - 110px)", display: "flex", flexDirection: "column" }}
+          >
             <Breadcrumbs navigation={navigation} title titleBottom card={false} divider={false} />
             <Outlet />
             <Footer />

src/menu-items/index.tsx

@@ -1,6 +1,6 @@
 // project import
-import other from './other';
-import { NavItemType } from 'types/menu';
+import other from "./other";
+import { NavItemType } from "@/types/menu";
 
 // ==============================|| MENU ITEMS ||============================== //
 

src/menu-items/other.tsx

@@ -1,11 +1,11 @@
 // third-party
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from "react-intl";
 
 // assets
-import { ChromeOutlined, QuestionOutlined, DeploymentUnitOutlined } from '@ant-design/icons';
+import { ChromeOutlined, QuestionOutlined, DeploymentUnitOutlined } from "@ant-design/icons";
 
 // type
-import { NavItemType } from 'types/menu';
+import { NavItemType } from "@/types/menu";
 
 // icons
 const icons = {
@@ -17,36 +17,36 @@ const icons = {
 // ==============================|| MENU ITEMS - SUPPORT ||============================== //
 
 const other: NavItemType = {
-  id: 'other',
+  id: "other",
   title: <FormattedMessage id="others" />,
-  type: 'group',
+  type: "group",
   children: [
     {
-      id: 'sample-page',
+      id: "sample-page",
       title: <FormattedMessage id="sample-page" />,
-      type: 'item',
-      url: '/sample-page',
+      type: "item",
+      url: "/sample-page",
       icon: icons.ChromeOutlined
     },
     {
-      id: 'documentation',
+      id: "documentation",
       title: <FormattedMessage id="documentation" />,
-      type: 'item',
-      url: 'https://codedthemes.gitbook.io/mantis/',
+      type: "item",
+      url: "https://codedthemes.gitbook.io/mantis/",
       icon: icons.QuestionOutlined,
       external: true,
       target: true,
       chip: {
-        label: 'gitbook',
-        color: 'secondary',
-        size: 'small'
+        label: "gitbook",
+        color: "secondary",
+        size: "small"
       }
     },
     {
-      id: 'roadmap',
+      id: "roadmap",
       title: <FormattedMessage id="roadmap" />,
-      type: 'item',
-      url: 'https://codedthemes.gitbook.io/mantis/roadmap',
+      type: "item",
+      url: "https://codedthemes.gitbook.io/mantis/roadmap",
       icon: icons.DeploymentUnitOutlined,
       external: true,
       target: true

src/pages/auth/check-mail.tsx

@@ -1,20 +1,20 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, Button, Grid, Divider, Typography, useMediaQuery } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Box, Button, Grid, Divider, Typography, useMediaQuery } from "@mui/material";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import AnimateButton from 'components/@extended/AnimateButton';
-import AuthWrapper from 'sections/auth/AuthWrapper';
-import FirebaseSocial from 'sections/auth/auth-forms/FirebaseSocial';
+import useAuth from "@/hooks/useAuth";
+import AnimateButton from "@/components/@extended/AnimateButton";
+import AuthWrapper from "@/sections/auth/AuthWrapper";
+import FirebaseSocial from "@/sections/auth/auth-forms/FirebaseSocial";
 
 // ================================|| CHECK MAIL ||================================ //
 
 const CheckMail = () => {
   const theme = useTheme();
-  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+  const matchDownSM = useMediaQuery(theme.breakpoints.down("sm"));
 
   const { isLoggedIn } = useAuth();
 
@@ -33,7 +33,7 @@ const CheckMail = () => {
           <AnimateButton>
             <Button
               component={Link}
-              to={isLoggedIn ? '/auth/login' : '/login'}
+              to={isLoggedIn ? "/auth/login" : "/login"}
               disableElevation
               fullWidth
               size="large"
@@ -47,7 +47,7 @@ const CheckMail = () => {
         </Grid>
         <Grid item xs={12}>
           <Divider>
-            <Typography variant={matchDownSM ? 'subtitle1' : 'h5'}>Sign up with</Typography>
+            <Typography variant={matchDownSM ? "subtitle1" : "h5"}>Sign up with</Typography>
           </Divider>
         </Grid>
         <Grid item xs={12}>

src/pages/auth/code-verification.tsx

@@ -1,9 +1,9 @@
 // material-ui
-import { Grid, Stack, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import AuthWrapper from 'sections/auth/AuthWrapper';
-import AuthCodeVerification from 'sections/auth/auth-forms/AuthCodeVerification';
+import AuthWrapper from "@/sections/auth/AuthWrapper";
+import AuthCodeVerification from "@/sections/auth/auth-forms/AuthCodeVerification";
 
 // ================================|| CODE VERIFICATION ||================================ //
 

src/pages/auth/forgot-password.tsx

@@ -1,12 +1,12 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { Grid, Stack, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import AuthWrapper from 'sections/auth/AuthWrapper';
-import AuthForgotPassword from 'sections/auth/auth-forms/AuthForgotPassword';
+import useAuth from "@/hooks/useAuth";
+import AuthWrapper from "@/sections/auth/AuthWrapper";
+import AuthForgotPassword from "@/sections/auth/auth-forms/AuthForgotPassword";
 
 // ================================|| FORGOT PASSWORD ||================================ //
 
@@ -17,13 +17,18 @@ const ForgotPassword = () => {
     <AuthWrapper>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="baseline"
+            sx={{ mb: { xs: -0.5, sm: 0.5 } }}
+          >
             <Typography variant="h3">Forgot Password</Typography>
             <Typography
               component={Link}
-              to={isLoggedIn ? '/auth/login' : '/login'}
+              to={isLoggedIn ? "/auth/login" : "/login"}
               variant="body1"
-              sx={{ textDecoration: 'none' }}
+              sx={{ textDecoration: "none" }}
               color="primary"
             >
               Back to Login

src/pages/auth/login.tsx

@@ -1,12 +1,12 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { Grid, Stack, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import AuthWrapper from 'sections/auth/AuthWrapper';
-import AuthLogin from 'sections/auth/auth-forms/AuthLogin';
+import useAuth from "@/hooks/useAuth";
+import AuthWrapper from "@/sections/auth/AuthWrapper";
+import AuthLogin from "@/sections/auth/auth-forms/AuthLogin";
 
 // ================================|| LOGIN ||================================ //
 
@@ -17,13 +17,18 @@ const Login = () => {
     <AuthWrapper>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="baseline"
+            sx={{ mb: { xs: -0.5, sm: 0.5 } }}
+          >
             <Typography variant="h3">Login</Typography>
             <Typography
               component={Link}
-              to={isLoggedIn ? '/auth/register' : '/register'}
+              to={isLoggedIn ? "/auth/register" : "/register"}
               variant="body1"
-              sx={{ textDecoration: 'none' }}
+              sx={{ textDecoration: "none" }}
               color="primary"
             >
               Don&apos;t have an account?

src/pages/auth/register.tsx

@@ -1,12 +1,12 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { Grid, Stack, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import AuthWrapper from 'sections/auth/AuthWrapper';
-import FirebaseRegister from 'sections/auth/auth-forms/AuthRegister';
+import useAuth from "@/hooks/useAuth";
+import AuthWrapper from "@/sections/auth/AuthWrapper";
+import FirebaseRegister from "@/sections/auth/auth-forms/AuthRegister";
 
 // ================================|| REGISTER ||================================ //
 
@@ -17,13 +17,18 @@ const Register = () => {
     <AuthWrapper>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="baseline"
+            sx={{ mb: { xs: -0.5, sm: 0.5 } }}
+          >
             <Typography variant="h3">Sign up</Typography>
             <Typography
               component={Link}
-              to={isLoggedIn ? '/auth/login' : '/login'}
+              to={isLoggedIn ? "/auth/login" : "/login"}
               variant="body1"
-              sx={{ textDecoration: 'none' }}
+              sx={{ textDecoration: "none" }}
               color="primary"
             >
               Already have an account?

src/pages/auth/reset-password.tsx

@@ -1,9 +1,9 @@
 // material-ui
-import { Grid, Stack, Typography } from '@mui/material';
+import { Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import AuthWrapper from 'sections/auth/AuthWrapper';
-import AuthResetPassword from 'sections/auth/auth-forms/AuthResetPassword';
+import AuthWrapper from "@/sections/auth/AuthWrapper";
+import AuthResetPassword from "@/sections/auth/auth-forms/AuthResetPassword";
 
 // ================================|| RESET PASSWORD ||================================ //
 

src/pages/extra-pages/sample-page.tsx

@@ -1,18 +1,18 @@
 // material-ui
-import { Typography } from '@mui/material';
+import { Typography } from "@mui/material";
 
 // project import
-import MainCard from 'components/MainCard';
+import MainCard from "@/components/MainCard";
 
 // ==============================|| SAMPLE PAGE ||============================== //
 
 const SamplePage = () => (
   <MainCard title="Sample Card">
     <Typography variant="body2">
-      Lorem ipsum dolor sit amen, consenter nipissing eli, sed do elusion tempos incident ut laborers et doolie magna alissa. Ut enif ad
-      minim venice, quin nostrum exercitation illampu laborings nisi ut liquid ex ea commons construal. Duos aube grue dolor in reprehended
-      in voltage veil esse colum doolie eu fujian bulla parian. Exceptive sin ocean cuspidate non president, sunk in culpa qui officiate
-      descent molls anim id est labours.
+      Lorem ipsum dolor sit amen, consenter nipissing eli, sed do elusion tempos incident ut laborers et doolie magna
+      alissa. Ut enif ad minim venice, quin nostrum exercitation illampu laborings nisi ut liquid ex ea commons
+      construal. Duos aube grue dolor in reprehended in voltage veil esse colum doolie eu fujian bulla parian. Exceptive
+      sin ocean cuspidate non president, sunk in culpa qui officiate descent molls anim id est labours.
     </Typography>
   </MainCard>
 );

src/pages/maintenance/404.tsx

@@ -1,14 +1,14 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { Box, Button, Grid, Stack, Typography } from '@mui/material';
+import { Box, Button, Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import config from 'config';
+import config from "@/config";
 
 // assets
-import error404 from 'assets/images/maintenance/Error404.png';
-import TwoCone from 'assets/images/maintenance/TwoCone.png';
+import error404 from "@/assets/images/maintenance/Error404.png";
+import TwoCone from "@/assets/images/maintenance/TwoCone.png";
 
 // ==============================|| ERROR 404 - MAIN ||============================== //
 
@@ -21,18 +21,26 @@ function Error404() {
         direction="column"
         alignItems="center"
         justifyContent="center"
-        sx={{ minHeight: '100vh', pt: 1.5, pb: 1, overflow: 'hidden' }}
+        sx={{ minHeight: "100vh", pt: 1.5, pb: 1, overflow: "hidden" }}
       >
         <Grid item xs={12}>
           <Stack direction="row">
             <Grid item>
               <Box sx={{ width: { xs: 250, sm: 590 }, height: { xs: 130, sm: 300 } }}>
-                <img src={error404} alt="mantis" style={{ width: '100%', height: '100%' }} />
+                <img src={error404} alt="mantis" style={{ width: "100%", height: "100%" }} />
               </Box>
             </Grid>
-            <Grid item sx={{ position: 'relative' }}>
-              <Box sx={{ position: 'absolute', top: 60, left: -40, width: { xs: 130, sm: 390 }, height: { xs: 115, sm: 330 } }}>
-                <img src={TwoCone} alt="mantis" style={{ width: '100%', height: '100%' }} />
+            <Grid item sx={{ position: "relative" }}>
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 60,
+                  left: -40,
+                  width: { xs: 130, sm: 390 },
+                  height: { xs: 115, sm: 330 }
+                }}
+              >
+                <img src={TwoCone} alt="mantis" style={{ width: "100%", height: "100%" }} />
               </Box>
             </Grid>
           </Stack>
@@ -40,7 +48,7 @@ function Error404() {
         <Grid item xs={12}>
           <Stack spacing={2} justifyContent="center" alignItems="center">
             <Typography variant="h1">Page Not Found</Typography>
-            <Typography color="textSecondary" align="center" sx={{ width: { xs: '73%', sm: '61%' } }}>
+            <Typography color="textSecondary" align="center" sx={{ width: { xs: "73%", sm: "61%" } }}>
               The page you are looking was moved, removed, renamed, or might never exist!
             </Typography>
             <Button component={Link} to={config.defaultPath} variant="contained">

src/pages/maintenance/500.tsx

@@ -1,38 +1,43 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, Button, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Box, Button, Grid, Stack, Typography, useMediaQuery } from "@mui/material";
 
 // project import
-import config from 'config';
+import config from "@/config";
 
 // assets
-import error500 from 'assets/images/maintenance/Error500.png';
+import error500 from "@/assets/images/maintenance/Error500.png";
 
 // ==============================|| ERROR 500 - MAIN ||============================== //
 
 function Error500() {
   const theme = useTheme();
-  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+  const matchDownSM = useMediaQuery(theme.breakpoints.down("sm"));
 
   return (
     <>
-      <Grid container direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh' }}>
+      <Grid container direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: "100vh" }}>
         <Grid item xs={12}>
           <Box sx={{ width: { xs: 350, sm: 396 } }}>
-            <img src={error500} alt="mantis" style={{ height: '100%', width: '100%' }} />
+            <img src={error500} alt="mantis" style={{ height: "100%", width: "100%" }} />
           </Box>
         </Grid>
         <Grid item xs={12}>
           <Stack justifyContent="center" alignItems="center">
-            <Typography align="center" variant={matchDownSM ? 'h2' : 'h1'}>
+            <Typography align="center" variant={matchDownSM ? "h2" : "h1"}>
               Internal Server Error
             </Typography>
-            <Typography color="textSecondary" variant="body2" align="center" sx={{ width: { xs: '73%', sm: '70%' }, mt: 1 }}>
+            <Typography
+              color="textSecondary"
+              variant="body2"
+              align="center"
+              sx={{ width: { xs: "73%", sm: "70%" }, mt: 1 }}
+            >
               Server error 500. we fixing the problem. please try again at a later stage.
             </Typography>
-            <Button component={Link} to={config.defaultPath} variant="contained" sx={{ textTransform: 'none', mt: 4 }}>
+            <Button component={Link} to={config.defaultPath} variant="contained" sx={{ textTransform: "none", mt: 4 }}>
               Go to homepage
             </Button>
           </Stack>

src/pages/maintenance/coming-soon.tsx

@@ -1,29 +1,29 @@
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Box, Button, Grid, Stack, TextField, Typography, useMediaQuery } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Box, Button, Grid, Stack, TextField, Typography, useMediaQuery } from "@mui/material";
 
 // third party
-import { useTimer } from 'react-timer-hook';
+import { useTimer } from "react-timer-hook";
 
 // project import
-import MainCard from 'components/MainCard';
+import MainCard from "@/components/MainCard";
 
 // assets
-import coming from 'assets/images/maintenance/coming-soon.png';
+import coming from "@/assets/images/maintenance/coming-soon.png";
 
 // ==============================|| COMING SOON - MAIN ||============================== //
 
 const TimerBox = ({ count, label }: { count: number; label: string }) => {
   const theme = useTheme();
-  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+  const matchDownSM = useMediaQuery(theme.breakpoints.down("sm"));
 
   return (
     <MainCard content={false} sx={{ width: { xs: 60, sm: 80 } }}>
       <Stack justifyContent="center" alignItems="center">
         <Box sx={{ py: 1.75 }}>
-          <Typography variant={matchDownSM ? 'h4' : 'h2'}>{count}</Typography>
+          <Typography variant={matchDownSM ? "h4" : "h2"}>{count}</Typography>
         </Box>
-        <Box sx={{ p: 0.5, bgcolor: 'secondary.lighter', width: '100%' }}>
+        <Box sx={{ p: 0.5, bgcolor: "secondary.lighter", width: "100%" }}>
           <Typography align="center" variant="subtitle2">
             {label}
           </Typography>
@@ -41,10 +41,17 @@ function ComingSoon() {
 
   return (
     <>
-      <Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
+      <Grid
+        container
+        spacing={4}
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        sx={{ minHeight: "100vh", py: 2 }}
+      >
         <Grid item xs={12}>
-          <Box sx={{ height: { xs: 310, sm: 420 }, width: { xs: 360, sm: 'auto' } }}>
-            <img src={coming} alt="mantis" style={{ height: '100%', width: '100%' }} />
+          <Box sx={{ height: { xs: 310, sm: 420 }, width: { xs: 360, sm: "auto" } }}>
+            <img src={coming} alt="mantis" style={{ height: "100%", width: "100%" }} />
           </Box>
         </Grid>
         <Grid item xs={12}>
@@ -57,7 +64,7 @@ function ComingSoon() {
             </Typography>
           </Stack>
         </Grid>
-        <Grid item xs={12} sx={{ width: { xs: '95%', md: '40%' } }}>
+        <Grid item xs={12} sx={{ width: { xs: "95%", md: "40%" } }}>
           <Stack direction="row" alignItems="center" justifyContent="center" spacing={{ xs: 1, sm: 2 }}>
             <TimerBox count={days} label="day" />
             <Typography variant="h1"> : </Typography>
@@ -68,14 +75,14 @@ function ComingSoon() {
             <TimerBox count={seconds} label="sec" />
           </Stack>
         </Grid>
-        <Grid item xs={12} sx={{ width: { xs: 380, md: '40%', lg: '30%' } }}>
+        <Grid item xs={12} sx={{ width: { xs: 380, md: "40%", lg: "30%" } }}>
           <Stack spacing={2} sx={{ mt: 2 }}>
             <Typography align="center" color="textSecondary">
               Be the first to be notified when Mantis launches.
             </Typography>
             <Stack direction="row" spacing={1}>
               <TextField fullWidth placeholder="Email Address" />
-              <Button variant="contained" sx={{ width: '50%' }}>
+              <Button variant="contained" sx={{ width: "50%" }}>
                 Notify Me
               </Button>
             </Stack>

src/pages/maintenance/under-construction.tsx

@@ -1,22 +1,29 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // material-ui
-import { Box, Button, Grid, Stack, Typography } from '@mui/material';
+import { Box, Button, Grid, Stack, Typography } from "@mui/material";
 
 // project import
-import config from 'config';
+import config from "@/config";
 
 // assets
-import construction from 'assets/images/maintenance/under-construction.svg';
+import construction from "@/assets/images/maintenance/under-construction.svg";
 
 // ==============================|| UNDER CONSTRUCTION - MAIN ||============================== //
 
 function UnderConstruction() {
   return (
-    <Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
+    <Grid
+      container
+      spacing={4}
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      sx={{ minHeight: "100vh", py: 2 }}
+    >
       <Grid item xs={12}>
         <Box sx={{ width: { xs: 300, sm: 480 } }}>
-          <img src={construction} alt="mantis" style={{ width: '100%', height: 'auto' }} />
+          <img src={construction} alt="mantis" style={{ width: "100%", height: "auto" }} />
         </Box>
       </Grid>
       <Grid item xs={12}>
@@ -24,7 +31,7 @@ function UnderConstruction() {
           <Typography align="center" variant="h1">
             Under Construction
           </Typography>
-          <Typography color="textSecondary" align="center" sx={{ width: '85%' }}>
+          <Typography color="textSecondary" align="center" sx={{ width: "85%" }}>
             Hey! Please check out this site later. We are doing some maintenance on it right now.
           </Typography>
           <Button component={Link} to={config.defaultPath} variant="contained">

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/reportWebVitals.ts

@@ -1,7 +1,7 @@
 import { ReportHandler } from 'web-vitals';
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
+  if (onPerfEntry) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);

src/routes/LoginRoutes.tsx

@@ -1,25 +1,25 @@
-import { lazy } from 'react';
+import { lazy } from "react";
 
 // project import
-import GuestGuard from 'utils/route-guard/GuestGuard';
-import CommonLayout from 'layout/CommonLayout';
-import Loadable from 'components/Loadable';
+import GuestGuard from "@/utils/route-guard/GuestGuard";
+import CommonLayout from "@/layout/CommonLayout";
+import Loadable from "@/components/Loadable";
 
 // render - login
-const AuthLogin = Loadable(lazy(() => import('pages/auth/login')));
-const AuthRegister = Loadable(lazy(() => import('pages/auth/register')));
-const AuthForgotPassword = Loadable(lazy(() => import('pages/auth/forgot-password')));
-const AuthCheckMail = Loadable(lazy(() => import('pages/auth/check-mail')));
-const AuthResetPassword = Loadable(lazy(() => import('pages/auth/reset-password')));
-const AuthCodeVerification = Loadable(lazy(() => import('pages/auth/code-verification')));
+const AuthLogin = Loadable(lazy(() => import("@/pages/auth/login")));
+const AuthRegister = Loadable(lazy(() => import("@/pages/auth/register")));
+const AuthForgotPassword = Loadable(lazy(() => import("@/pages/auth/forgot-password")));
+const AuthCheckMail = Loadable(lazy(() => import("@/pages/auth/check-mail")));
+const AuthResetPassword = Loadable(lazy(() => import("@/pages/auth/reset-password")));
+const AuthCodeVerification = Loadable(lazy(() => import("@/pages/auth/code-verification")));
 
 // ==============================|| AUTH ROUTING ||============================== //
 
 const LoginRoutes = {
-  path: '/',
+  path: "/",
   children: [
     {
-      path: '/',
+      path: "/",
       element: (
         <GuestGuard>
           <CommonLayout />
@@ -27,31 +27,31 @@ const LoginRoutes = {
       ),
       children: [
         {
-          path: '/',
+          path: "/",
           element: <AuthLogin />
         },
         {
-          path: 'login',
+          path: "login",
           element: <AuthLogin />
         },
         {
-          path: 'register',
+          path: "register",
           element: <AuthRegister />
         },
         {
-          path: 'forgot-password',
+          path: "forgot-password",
           element: <AuthForgotPassword />
         },
         {
-          path: 'check-mail',
+          path: "check-mail",
           element: <AuthCheckMail />
         },
         {
-          path: 'reset-password',
+          path: "reset-password",
           element: <AuthResetPassword />
         },
         {
-          path: 'code-verification',
+          path: "code-verification",
           element: <AuthCodeVerification />
         }
       ]

src/routes/MainRoutes.tsx

@@ -1,27 +1,27 @@
-import { lazy } from 'react';
+import { lazy } from "react";
 
 // project import
-import MainLayout from 'layout/MainLayout';
-import CommonLayout from 'layout/CommonLayout';
-import Loadable from 'components/Loadable';
-import AuthGuard from 'utils/route-guard/AuthGuard';
+import MainLayout from "@/layout/MainLayout";
+import CommonLayout from "@/layout/CommonLayout";
+import Loadable from "@/components/Loadable";
+import AuthGuard from "@/utils/route-guard/AuthGuard";
 
 // pages routing
-const MaintenanceError = Loadable(lazy(() => import('pages/maintenance/404')));
-const MaintenanceError500 = Loadable(lazy(() => import('pages/maintenance/500')));
-const MaintenanceUnderConstruction = Loadable(lazy(() => import('pages/maintenance/under-construction')));
-const MaintenanceComingSoon = Loadable(lazy(() => import('pages/maintenance/coming-soon')));
+const MaintenanceError = Loadable(lazy(() => import("@/pages/maintenance/404")));
+const MaintenanceError500 = Loadable(lazy(() => import("@/pages/maintenance/500")));
+const MaintenanceUnderConstruction = Loadable(lazy(() => import("@/pages/maintenance/under-construction")));
+const MaintenanceComingSoon = Loadable(lazy(() => import("@/pages/maintenance/coming-soon")));
 
 // render - sample page
-const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page')));
+const SamplePage = Loadable(lazy(() => import("@/pages/extra-pages/sample-page")));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
 const MainRoutes = {
-  path: '/',
+  path: "/",
   children: [
     {
-      path: '/',
+      path: "/",
       element: (
         <AuthGuard>
           <MainLayout />
@@ -29,29 +29,29 @@ const MainRoutes = {
       ),
       children: [
         {
-          path: 'sample-page',
+          path: "sample-page",
           element: <SamplePage />
         }
       ]
     },
     {
-      path: '/maintenance',
+      path: "/maintenance",
       element: <CommonLayout />,
       children: [
         {
-          path: '404',
+          path: "404",
           element: <MaintenanceError />
         },
         {
-          path: '500',
+          path: "500",
           element: <MaintenanceError500 />
         },
         {
-          path: 'under-construction',
+          path: "under-construction",
           element: <MaintenanceUnderConstruction />
         },
         {
-          path: 'coming-soon',
+          path: "coming-soon",
           element: <MaintenanceComingSoon />
         }
       ]

src/sections/auth/AuthCard.tsx

@@ -1,9 +1,9 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Theme } from "@mui/material/styles";
+import { Box } from "@mui/material";
 
 // project import
-import MainCard, { MainCardProps } from 'components/MainCard';
+import MainCard, { MainCardProps } from "@/components/MainCard";
 
 // ==============================|| AUTHENTICATION - CARD WRAPPER ||============================== //
 
@@ -12,9 +12,9 @@ const AuthCard = ({ children, ...other }: MainCardProps) => (
     sx={{
       maxWidth: { xs: 400, lg: 475 },
       margin: { xs: 2.5, md: 3 },
-      '& > *': {
+      "& > *": {
         flexGrow: 1,
-        flexBasis: '50%'
+        flexBasis: "50%"
       }
     }}
     content={false}

src/sections/auth/AuthWrapper.tsx

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 // material-ui
-import { Box, Grid } from '@mui/material';
+import { Box, Grid } from "@mui/material";
 
 // project import
-import AuthFooter from 'components/cards/AuthFooter';
-import Logo from 'components/logo';
-import AuthCard from './AuthCard';
+import AuthFooter from "@/components/cards/AuthFooter";
+import Logo from "@/components/logo";
+import AuthCard from "./AuthCard";
 
 // assets
-import AuthBackground from 'assets/images/auth/AuthBackground';
+import AuthBackground from "@/assets/images/auth/AuthBackground";
 
 interface Props {
   children: ReactNode;
@@ -18,14 +18,14 @@ interface Props {
 // ==============================|| AUTHENTICATION - WRAPPER ||============================== //
 
 const AuthWrapper = ({ children }: Props) => (
-  <Box sx={{ minHeight: '100vh' }}>
+  <Box sx={{ minHeight: "100vh" }}>
     <AuthBackground />
     <Grid
       container
       direction="column"
       justifyContent="flex-end"
       sx={{
-        minHeight: '100vh'
+        minHeight: "100vh"
       }}
     >
       <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
@@ -38,7 +38,7 @@ const AuthWrapper = ({ children }: Props) => (
           container
           justifyContent="center"
           alignItems="center"
-          sx={{ minHeight: { xs: 'calc(100vh - 210px)', sm: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' } }}
+          sx={{ minHeight: { xs: "calc(100vh - 210px)", sm: "calc(100vh - 134px)", md: "calc(100vh - 112px)" } }}
         >
           <Grid item>
             <AuthCard>{children}</AuthCard>

src/sections/auth/auth-forms/AuthCodeVerification.tsx

@@ -1,14 +1,14 @@
-import { useState } from 'react';
+import { useState } from "react";
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Button, Grid, Stack, Typography } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { Button, Grid, Stack, Typography } from "@mui/material";
 
 // third-party
-import OtpInput from 'react18-input-otp';
+import OtpInput from "react18-input-otp";
 
 // project import
-import AnimateButton from 'components/@extended/AnimateButton';
+import AnimateButton from "@/components/@extended/AnimateButton";
 
 // ============================|| STATIC - CODE VERIFICATION ||============================ //
 
@@ -16,7 +16,7 @@ const AuthCodeVerification = () => {
   const theme = useTheme();
   const [otp, setOtp] = useState<string>();
 
-  const borderColor = theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[300];
+  const borderColor = theme.palette.mode === "dark" ? theme.palette.grey[200] : theme.palette.grey[300];
 
   return (
     <Grid container spacing={3}>
@@ -25,19 +25,19 @@ const AuthCodeVerification = () => {
           value={otp}
           onChange={(otp: string) => setOtp(otp)}
           numInputs={4}
-          containerStyle={{ justifyContent: 'space-between' }}
+          containerStyle={{ justifyContent: "space-between" }}
           inputStyle={{
-            width: '100%',
-            margin: '8px',
-            padding: '10px',
+            width: "100%",
+            margin: "8px",
+            padding: "10px",
             border: `1px solid ${borderColor}`,
             borderRadius: 4,
-            ':hover': {
+            ":hover": {
               borderColor: theme.palette.primary.main
             }
           }}
           focusStyle={{
-            outline: 'none',
+            outline: "none",
             boxShadow: theme.customShadows.primary,
             border: `1px solid ${theme.palette.primary.main}`
           }}
@@ -53,7 +53,11 @@ const AuthCodeVerification = () => {
       <Grid item xs={12}>
         <Stack direction="row" justifyContent="space-between" alignItems="baseline">
           <Typography>Did not receive the email? Check your spam filter, or</Typography>
-          <Typography variant="body1" sx={{ minWidth: 85, ml: 2, textDecoration: 'none', cursor: 'pointer' }} color="primary">
+          <Typography
+            variant="body1"
+            sx={{ minWidth: 85, ml: 2, textDecoration: "none", cursor: "pointer" }}
+            color="primary"
+          >
             Resend code
           </Typography>
         </Stack>

src/sections/auth/auth-forms/AuthForgotPassword.tsx

@@ -1,18 +1,18 @@
-import { useNavigate } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
 
 // material-ui
-import { Button, FormHelperText, Grid, InputLabel, OutlinedInput, Stack, Typography } from '@mui/material';
+import { Button, FormHelperText, Grid, InputLabel, OutlinedInput, Stack, Typography } from "@mui/material";
 
 // third party
-import * as Yup from 'yup';
-import { Formik } from 'formik';
+import * as Yup from "yup";
+import { Formik } from "formik";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import useScriptRef from 'hooks/useScriptRef';
-import AnimateButton from 'components/@extended/AnimateButton';
-import { openSnackbar } from 'store/reducers/snackbar';
+import useAuth from "@/hooks/useAuth";
+import useScriptRef from "@/hooks/useScriptRef";
+import AnimateButton from "@/components/@extended/AnimateButton";
+import { openSnackbar } from "@/store/reducers/snackbar";
 
 // ============================|| FIREBASE - FORGOT PASSWORD ||============================ //
 
@@ -27,11 +27,11 @@ const AuthForgotPassword = () => {
     <>
       <Formik
         initialValues={{
-          email: '',
+          email: "",
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          email: Yup.string().email('Must be a valid email').max(255).required('Email is required')
+          email: Yup.string().email("Must be a valid email").max(255).required("Email is required")
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
           try {
@@ -42,16 +42,16 @@ const AuthForgotPassword = () => {
                 dispatch(
                   openSnackbar({
                     open: true,
-                    message: 'Check mail for reset password link',
-                    variant: 'alert',
+                    message: "Check mail for reset password link",
+                    variant: "alert",
                     alert: {
-                      color: 'success'
+                      color: "success"
                     },
                     close: false
                   })
                 );
                 setTimeout(() => {
-                  navigate(isLoggedIn ? '/auth/check-mail' : '/check-mail', { replace: true });
+                  navigate(isLoggedIn ? "/auth/check-mail" : "/check-mail", { replace: true });
                 }, 1500);
 
                 // WARNING: do not set any formik state here as formik might be already destroyed here. You may get following error by doing so.
@@ -110,7 +110,15 @@ const AuthForgotPassword = () => {
               </Grid>
               <Grid item xs={12}>
                 <AnimateButton>
-                  <Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
+                  <Button
+                    disableElevation
+                    disabled={isSubmitting}
+                    fullWidth
+                    size="large"
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                  >
                     Send Password Reset Email
                   </Button>
                 </AnimateButton>

src/sections/auth/auth-forms/AuthLogin.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
 
 // material-ui
 import {
@@ -15,21 +15,21 @@ import {
   OutlinedInput,
   Stack,
   Typography
-} from '@mui/material';
+} from "@mui/material";
 
 // third party
-import * as Yup from 'yup';
-import { Formik } from 'formik';
+import * as Yup from "yup";
+import { Formik } from "formik";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import useScriptRef from 'hooks/useScriptRef';
-import FirebaseSocial from './FirebaseSocial';
-import IconButton from 'components/@extended/IconButton';
-import AnimateButton from 'components/@extended/AnimateButton';
+import useAuth from "@/hooks/useAuth";
+import useScriptRef from "@/hooks/useScriptRef";
+import FirebaseSocial from "./FirebaseSocial";
+import IconButton from "@/components/@extended/IconButton";
+import AnimateButton from "@/components/@extended/AnimateButton";
 
 // assets
-import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
 
 // ============================|| FIREBASE - LOGIN ||============================ //
 
@@ -50,7 +50,7 @@ const AuthLogin = () => {
   };
 
   const onKeyDown = (keyEvent: any) => {
-    if (keyEvent.getModifierState('CapsLock')) {
+    if (keyEvent.getModifierState("CapsLock")) {
       setCapsWarning(true);
     } else {
       setCapsWarning(false);
@@ -61,13 +61,13 @@ const AuthLogin = () => {
     <>
       <Formik
         initialValues={{
-          email: 'info@codedthemes.com',
-          password: '123456',
+          email: "info@codedthemes.com",
+          password: "123456",
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
-          password: Yup.string().max(255).required('Password is required')
+          email: Yup.string().email("Must be a valid email").max(255).required("Email is required"),
+          password: Yup.string().max(255).required("Password is required")
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
           try {
@@ -123,10 +123,10 @@ const AuthLogin = () => {
                   <InputLabel htmlFor="password-login">Password</InputLabel>
                   <OutlinedInput
                     fullWidth
-                    color={capsWarning ? 'warning' : 'primary'}
+                    color={capsWarning ? "warning" : "primary"}
                     error={Boolean(touched.password && errors.password)}
                     id="-password-login"
-                    type={showPassword ? 'text' : 'password'}
+                    type={showPassword ? "text" : "password"}
                     value={values.password}
                     name="password"
                     onBlur={(event: React.FocusEvent<any, Element>) => {
@@ -151,7 +151,11 @@ const AuthLogin = () => {
                     placeholder="Enter password"
                   />
                   {capsWarning && (
-                    <Typography variant="caption" sx={{ color: 'warning.main' }} id="warning-helper-text-password-login">
+                    <Typography
+                      variant="caption"
+                      sx={{ color: "warning.main" }}
+                      id="warning-helper-text-password-login"
+                    >
                       Caps lock on!
                     </Typography>
                   )}
@@ -180,7 +184,7 @@ const AuthLogin = () => {
                   <Link
                     variant="h6"
                     component={RouterLink}
-                    to={isLoggedIn ? '/auth/forgot-password' : '/forgot-password'}
+                    to={isLoggedIn ? "/auth/forgot-password" : "/forgot-password"}
                     color="text.primary"
                   >
                     Forgot Password?
@@ -194,7 +198,15 @@ const AuthLogin = () => {
               )}
               <Grid item xs={12}>
                 <AnimateButton>
-                  <Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
+                  <Button
+                    disableElevation
+                    disabled={isSubmitting}
+                    fullWidth
+                    size="large"
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                  >
                     Login
                   </Button>
                 </AnimateButton>

src/sections/auth/auth-forms/AuthRegister.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, SyntheticEvent } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import { useEffect, useState, SyntheticEvent } from "react";
+import { Link as RouterLink } from "react-router-dom";
 
 // material-ui
 import {
@@ -15,25 +15,25 @@ import {
   OutlinedInput,
   Stack,
   Typography
-} from '@mui/material';
+} from "@mui/material";
 
 // third party
-import * as Yup from 'yup';
-import { Formik } from 'formik';
+import * as Yup from "yup";
+import { Formik } from "formik";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import useScriptRef from 'hooks/useScriptRef';
-import IconButton from 'components/@extended/IconButton';
-import AnimateButton from 'components/@extended/AnimateButton';
-import FirebaseSocial from './FirebaseSocial';
-import { strengthColor, strengthIndicator } from 'utils/password-strength';
+import useAuth from "@/hooks/useAuth";
+import useScriptRef from "@/hooks/useScriptRef";
+import IconButton from "@/components/@extended/IconButton";
+import AnimateButton from "@/components/@extended/AnimateButton";
+import FirebaseSocial from "./FirebaseSocial";
+import { strengthColor, strengthIndicator } from "@/utils/password-strength";
 
 // types
-import { StringColorProps } from 'types/password';
+import { StringColorProps } from "@/types/password";
 
 // assets
-import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -57,25 +57,25 @@ const AuthRegister = () => {
   };
 
   useEffect(() => {
-    changePassword('');
+    changePassword("");
   }, []);
 
   return (
     <>
       <Formik
         initialValues={{
-          firstname: '',
-          lastname: '',
-          email: '',
-          company: '',
-          password: '',
+          firstname: "",
+          lastname: "",
+          email: "",
+          company: "",
+          password: "",
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          firstname: Yup.string().max(255).required('First Name is required'),
-          lastname: Yup.string().max(255).required('Last Name is required'),
-          email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
-          password: Yup.string().max(255).required('Password is required')
+          firstname: Yup.string().max(255).required("First Name is required"),
+          lastname: Yup.string().max(255).required("Last Name is required"),
+          email: Yup.string().email("Must be a valid email").max(255).required("Email is required"),
+          password: Yup.string().max(255).required("Password is required")
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
           try {
@@ -198,7 +198,7 @@ const AuthRegister = () => {
                     fullWidth
                     error={Boolean(touched.password && errors.password)}
                     id="password-signup"
-                    type={showPassword ? 'text' : 'password'}
+                    type={showPassword ? "text" : "password"}
                     value={values.password}
                     name="password"
                     onBlur={handleBlur}
@@ -231,7 +231,7 @@ const AuthRegister = () => {
                 <FormControl fullWidth sx={{ mt: 2 }}>
                   <Grid container spacing={2} alignItems="center">
                     <Grid item>
-                      <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
+                      <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: "7px" }} />
                     </Grid>
                     <Grid item>
                       <Typography variant="subtitle1" fontSize="0.75rem">
@@ -260,7 +260,15 @@ const AuthRegister = () => {
               )}
               <Grid item xs={12}>
                 <AnimateButton>
-                  <Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
+                  <Button
+                    disableElevation
+                    disabled={isSubmitting}
+                    fullWidth
+                    size="large"
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                  >
                     Create Account
                   </Button>
                 </AnimateButton>

src/sections/auth/auth-forms/AuthResetPassword.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState, SyntheticEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useEffect, useState, SyntheticEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
 
 // material-ui
 import {
@@ -14,25 +14,25 @@ import {
   OutlinedInput,
   Stack,
   Typography
-} from '@mui/material';
+} from "@mui/material";
 
 // third party
-import * as Yup from 'yup';
-import { Formik } from 'formik';
+import * as Yup from "yup";
+import { Formik } from "formik";
 
 // project import
-import useAuth from 'hooks/useAuth';
-import useScriptRef from 'hooks/useScriptRef';
-import IconButton from 'components/@extended/IconButton';
-import AnimateButton from 'components/@extended/AnimateButton';
-import { strengthColor, strengthIndicator } from 'utils/password-strength';
-import { openSnackbar } from 'store/reducers/snackbar';
+import useAuth from "@/hooks/useAuth";
+import useScriptRef from "@/hooks/useScriptRef";
+import IconButton from "@/components/@extended/IconButton";
+import AnimateButton from "@/components/@extended/AnimateButton";
+import { strengthColor, strengthIndicator } from "@/utils/password-strength";
+import { openSnackbar } from "@/store/reducers/snackbar";
 
 // types
-import { StringColorProps } from 'types/password';
+import { StringColorProps } from "@/types/password";
 
 // assets
-import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
 
 // ============================|| STATIC - RESET PASSWORD ||============================ //
 
@@ -59,24 +59,24 @@ const AuthResetPassword = () => {
   };
 
   useEffect(() => {
-    changePassword('');
+    changePassword("");
   }, []);
 
   return (
     <>
       <Formik
         initialValues={{
-          password: '',
-          confirmPassword: '',
+          password: "",
+          confirmPassword: "",
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          password: Yup.string().max(255).required('Password is required'),
+          password: Yup.string().max(255).required("Password is required"),
           confirmPassword: Yup.string()
-            .required('Confirm Password is required')
-            .when('password', {
+            .required("Confirm Password is required")
+            .when("password", {
               is: (val: string) => !!(val && val.length > 0),
-              then: Yup.string().oneOf([Yup.ref('password')], 'Both Password must be match!')
+              then: Yup.string().oneOf([Yup.ref("password")], "Both Password must be match!")
             })
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
@@ -89,17 +89,17 @@ const AuthResetPassword = () => {
               dispatch(
                 openSnackbar({
                   open: true,
-                  message: 'Successfuly reset password.',
-                  variant: 'alert',
+                  message: "Successfuly reset password.",
+                  variant: "alert",
                   alert: {
-                    color: 'success'
+                    color: "success"
                   },
                   close: false
                 })
               );
 
               setTimeout(() => {
-                navigate(isLoggedIn ? '/auth/login' : '/login', { replace: true });
+                navigate(isLoggedIn ? "/auth/login" : "/login", { replace: true });
               }, 1500);
             }
           } catch (err: any) {
@@ -122,7 +122,7 @@ const AuthResetPassword = () => {
                     fullWidth
                     error={Boolean(touched.password && errors.password)}
                     id="password-reset"
-                    type={showPassword ? 'text' : 'password'}
+                    type={showPassword ? "text" : "password"}
                     value={values.password}
                     name="password"
                     onBlur={handleBlur}
@@ -154,7 +154,7 @@ const AuthResetPassword = () => {
                 <FormControl fullWidth sx={{ mt: 2 }}>
                   <Grid container spacing={2} alignItems="center">
                     <Grid item>
-                      <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
+                      <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: "7px" }} />
                     </Grid>
                     <Grid item>
                       <Typography variant="subtitle1" fontSize="0.75rem">
@@ -193,7 +193,15 @@ const AuthResetPassword = () => {
               )}
               <Grid item xs={12}>
                 <AnimateButton>
-                  <Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
+                  <Button
+                    disableElevation
+                    disabled={isSubmitting}
+                    fullWidth
+                    size="large"
+                    type="submit"
+                    variant="contained"
+                    color="primary"
+                  >
                     Reset Password
                   </Button>
                 </AnimateButton>

src/sections/auth/auth-forms/FirebaseSocial.tsx

@@ -1,20 +1,20 @@
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { useMediaQuery, Button, Stack } from '@mui/material';
+import { useTheme } from "@mui/material/styles";
+import { useMediaQuery, Button, Stack } from "@mui/material";
 
 // project import
-import useAuth from 'hooks/useAuth';
+import useAuth from "@/hooks/useAuth";
 
 // assets
-import Google from 'assets/images/icons/google.svg';
-import Twitter from 'assets/images/icons/twitter.svg';
-import Facebook from 'assets/images/icons/facebook.svg';
+import Google from "@/assets/images/icons/google.svg";
+import Twitter from "@/assets/images/icons/twitter.svg";
+import Facebook from "@/assets/images/icons/facebook.svg";
 
 // ==============================|| FIREBASE - SOCIAL BUTTON ||============================== //
 
 const FirebaseSocial = () => {
   const theme = useTheme();
-  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+  const matchDownSM = useMediaQuery(theme.breakpoints.down("sm"));
 
   // @ts-ignore
   const { firebaseFacebookSignIn, firebaseGoogleSignIn, firebaseTwitterSignIn } = useAuth();
@@ -46,8 +46,8 @@ const FirebaseSocial = () => {
     <Stack
       direction="row"
       spacing={matchDownSM ? 1 : 2}
-      justifyContent={matchDownSM ? 'space-around' : 'space-between'}
-      sx={{ '& .MuiButton-startIcon': { mr: matchDownSM ? 0 : 1, ml: matchDownSM ? 0 : -0.5 } }}
+      justifyContent={matchDownSM ? "space-around" : "space-between"}
+      sx={{ "& .MuiButton-startIcon": { mr: matchDownSM ? 0 : 1, ml: matchDownSM ? 0 : -0.5 } }}
     >
       <Button
         variant="outlined"
@@ -56,7 +56,7 @@ const FirebaseSocial = () => {
         startIcon={<img src={Google} alt="Google" />}
         onClick={googleHandler}
       >
-        {!matchDownSM && 'Google'}
+        {!matchDownSM && "Google"}
       </Button>
       <Button
         variant="outlined"
@@ -65,7 +65,7 @@ const FirebaseSocial = () => {
         startIcon={<img src={Twitter} alt="Twitter" />}
         onClick={twitterHandler}
       >
-        {!matchDownSM && 'Twitter'}
+        {!matchDownSM && "Twitter"}
       </Button>
       <Button
         variant="outlined"
@@ -74,7 +74,7 @@ const FirebaseSocial = () => {
         startIcon={<img src={Facebook} alt="Facebook" />}
         onClick={facebookHandler}
       >
-        {!matchDownSM && 'Facebook'}
+        {!matchDownSM && "Facebook"}
       </Button>
     </Stack>
   );

src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/store/reducers/auth.ts

@@ -1,8 +1,8 @@
 // action - state management
-import { REGISTER, LOGIN, LOGOUT } from './actions';
+import { REGISTER, LOGIN, LOGOUT } from "./actions";
 
 // types
-import { AuthProps, AuthActionProps } from 'types/auth';
+import { AuthProps, AuthActionProps } from "@/types/auth";
 
 // initial state
 export const initialState: AuthProps = {

src/store/reducers/menu.ts

@@ -1,11 +1,11 @@
 // types
-import { MenuProps } from 'types/menu';
-import { createSlice } from '@reduxjs/toolkit';
+import { MenuProps } from "@/types/menu";
+import { createSlice } from "@reduxjs/toolkit";
 
 // initial state
 const initialState: MenuProps = {
-  openItem: ['dashboard'],
-  openComponent: 'buttons',
+  openItem: ["dashboard"],
+  openComponent: "buttons",
   drawerOpen: false,
   componentDrawerOpen: true
 };
@@ -13,7 +13,7 @@ const initialState: MenuProps = {
 // ==============================|| SLICE - MENU ||============================== //
 
 const menu = createSlice({
-  name: 'menu',
+  name: "menu",
   initialState,
   reducers: {
     activeItem(state, action) {

src/store/reducers/snackbar.ts

@@ -1,22 +1,22 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
 
 // types
-import { SnackbarProps } from 'types/snackbar';
+import { SnackbarProps } from "@/types/snackbar";
 
 const initialState: SnackbarProps = {
   action: false,
   open: false,
-  message: 'Note archived',
+  message: "Note archived",
   anchorOrigin: {
-    vertical: 'bottom',
-    horizontal: 'right'
+    vertical: "bottom",
+    horizontal: "right"
   },
-  variant: 'default',
+  variant: "default",
   alert: {
-    color: 'primary',
-    variant: 'filled'
+    color: "primary",
+    variant: "filled"
   },
-  transition: 'Fade',
+  transition: "Fade",
   close: true,
   actionButton: false
 };
@@ -24,7 +24,7 @@ const initialState: SnackbarProps = {
 // ==============================|| SLICE - SNACKBAR ||============================== //
 
 const snackbar = createSlice({
-  name: 'snackbar',
+  name: "snackbar",
   initialState,
   reducers: {
     openSnackbar(state, action) {

src/themes/index.tsx

@@ -1,18 +1,18 @@
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from "react";
 
 // material-ui
-import { CssBaseline, StyledEngineProvider } from '@mui/material';
-import { createTheme, ThemeOptions, ThemeProvider, Theme, TypographyVariantsOptions } from '@mui/material/styles';
+import { CssBaseline, StyledEngineProvider } from "@mui/material";
+import { createTheme, ThemeOptions, ThemeProvider, Theme, TypographyVariantsOptions } from "@mui/material/styles";
 
 // project import
-import useConfig from 'hooks/useConfig';
-import Palette from './palette';
-import Typography from './typography';
-import CustomShadows from './shadows';
-import componentsOverride from './overrides';
+import useConfig from "@/hooks/useConfig";
+import Palette from "./palette";
+import Typography from "./typography";
+import CustomShadows from "./shadows";
+import componentsOverride from "./overrides";
 
 // types
-import { CustomShadowProps } from 'types/theme';
+import { CustomShadowProps } from "@/types/theme";
 
 // types
 type ThemeCustomizationProps = {

src/themes/overrides/Alert.ts

@@ -1,11 +1,11 @@
 // material-ui
-import { alpha, Theme } from '@mui/material/styles';
+import { alpha, Theme } from "@mui/material/styles";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| ALERT - COLORS ||============================== //
 
@@ -16,7 +16,7 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
   return {
     borderColor: alpha(light, 0.5),
     backgroundColor: lighter,
-    '& .MuiAlert-icon': {
+    "& .MuiAlert-icon": {
       color: main
     }
   };
@@ -25,17 +25,17 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
 // ==============================|| OVERRIDES - ALERT ||============================== //
 
 export default function Alert(theme: Theme) {
-  const primaryDashed = getColorStyle({ color: 'primary', theme });
+  const primaryDashed = getColorStyle({ color: "primary", theme });
 
   return {
     MuiAlert: {
       styleOverrides: {
         root: {
           color: theme.palette.text.primary,
-          fontSize: '0.875rem'
+          fontSize: "0.875rem"
         },
         icon: {
-          fontSize: '1rem'
+          fontSize: "1rem"
         },
         message: {
           padding: 0,
@@ -45,30 +45,30 @@ export default function Alert(theme: Theme) {
           color: theme.palette.grey[0]
         },
         border: {
-          padding: '10px 16px',
-          border: '1px solid',
+          padding: "10px 16px",
+          border: "1px solid",
           ...primaryDashed,
-          '&.MuiAlert-borderPrimary': getColorStyle({ color: 'primary', theme }),
-          '&.MuiAlert-borderSecondary': getColorStyle({ color: 'secondary', theme }),
-          '&.MuiAlert-borderError': getColorStyle({ color: 'error', theme }),
-          '&.MuiAlert-borderSuccess': getColorStyle({ color: 'success', theme }),
-          '&.MuiAlert-borderInfo': getColorStyle({ color: 'info', theme }),
-          '&.MuiAlert-borderWarning': getColorStyle({ color: 'warning', theme })
+          "&.MuiAlert-borderPrimary": getColorStyle({ color: "primary", theme }),
+          "&.MuiAlert-borderSecondary": getColorStyle({ color: "secondary", theme }),
+          "&.MuiAlert-borderError": getColorStyle({ color: "error", theme }),
+          "&.MuiAlert-borderSuccess": getColorStyle({ color: "success", theme }),
+          "&.MuiAlert-borderInfo": getColorStyle({ color: "info", theme }),
+          "&.MuiAlert-borderWarning": getColorStyle({ color: "warning", theme })
         },
         action: {
-          '& .MuiButton-root': {
+          "& .MuiButton-root": {
             padding: 2,
-            height: 'auto',
-            fontSize: '0.75rem',
+            height: "auto",
+            fontSize: "0.75rem",
             marginTop: -2
           },
-          '& .MuiIconButton-root': {
-            width: 'auto',
-            height: 'auto',
+          "& .MuiIconButton-root": {
+            width: "auto",
+            height: "auto",
             padding: 2,
             marginRight: 6,
-            '& .MuiSvgIcon-root': {
-              fontSize: '1rem'
+            "& .MuiSvgIcon-root": {
+              fontSize: "1rem"
             }
           }
         }

src/themes/overrides/Badge.ts

@@ -1,11 +1,11 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
+import { Theme } from "@mui/material/styles";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| BADGE - COLORS ||============================== //
 
@@ -22,7 +22,7 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
 // ==============================|| OVERRIDES - BADGE ||============================== //
 
 export default function Badge(theme: Theme) {
-  const defaultLightBadge = getColorStyle({ color: 'primary', theme });
+  const defaultLightBadge = getColorStyle({ color: "primary", theme });
 
   return {
     MuiBadge: {
@@ -34,12 +34,12 @@ export default function Badge(theme: Theme) {
         },
         light: {
           ...defaultLightBadge,
-          '&.MuiBadge-colorPrimary': getColorStyle({ color: 'primary', theme }),
-          '&.MuiBadge-colorSecondary': getColorStyle({ color: 'secondary', theme }),
-          '&.MuiBadge-colorError': getColorStyle({ color: 'error', theme }),
-          '&.MuiBadge-colorInfo': getColorStyle({ color: 'info', theme }),
-          '&.MuiBadge-colorSuccess': getColorStyle({ color: 'success', theme }),
-          '&.MuiBadge-colorWarning': getColorStyle({ color: 'warning', theme })
+          "&.MuiBadge-colorPrimary": getColorStyle({ color: "primary", theme }),
+          "&.MuiBadge-colorSecondary": getColorStyle({ color: "secondary", theme }),
+          "&.MuiBadge-colorError": getColorStyle({ color: "error", theme }),
+          "&.MuiBadge-colorInfo": getColorStyle({ color: "info", theme }),
+          "&.MuiBadge-colorSuccess": getColorStyle({ color: "success", theme }),
+          "&.MuiBadge-colorWarning": getColorStyle({ color: "warning", theme })
         }
       }
     }

src/themes/overrides/Button.ts

@@ -1,12 +1,12 @@
 // material-ui
-import { alpha, Theme } from '@mui/material/styles';
+import { alpha, Theme } from "@mui/material/styles";
 
 // project import
-import getColors from 'utils/getColors';
-import getShadow from 'utils/getShadow';
+import getColors from "@/utils/getColors";
+import getShadow from "@/utils/getShadow";
 
 // types
-import { ButtonVariantProps, ExtendedStyleProps } from 'types/extended';
+import { ButtonVariantProps, ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| BUTTON - COLORS ||============================== //
 
@@ -22,62 +22,62 @@ function getColorStyle({ variant, color, theme }: ButtonStyleProps) {
   const shadows = getShadow(theme, buttonShadow);
 
   const commonShadow = {
-    '&::after': {
+    "&::after": {
       boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
     },
-    '&:active::after': {
+    "&:active::after": {
       boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
     },
-    '&:focus-visible': {
+    "&:focus-visible": {
       outline: `2px solid ${dark}`,
       outlineOffset: 2
     }
   };
 
   switch (variant) {
-    case 'contained':
+    case "contained":
       return {
-        '&:hover': {
+        "&:hover": {
           backgroundColor: dark
         },
         ...commonShadow
       };
-    case 'shadow':
+    case "shadow":
       return {
         color: contrastText,
         backgroundColor: main,
         boxShadow: shadows,
-        '&:hover': {
-          boxShadow: 'none',
+        "&:hover": {
+          boxShadow: "none",
           backgroundColor: dark
         },
         ...commonShadow
       };
-    case 'outlined':
+    case "outlined":
       return {
         borderColor: main,
-        '&:hover': {
+        "&:hover": {
           color: dark,
-          backgroundColor: 'transparent',
+          backgroundColor: "transparent",
           borderColor: dark
         },
         ...commonShadow
       };
-    case 'dashed':
+    case "dashed":
       return {
         color: main,
         borderColor: main,
         backgroundColor: lighter,
-        '&:hover': {
+        "&:hover": {
           color: dark,
           borderColor: dark
         },
         ...commonShadow
       };
-    case 'text':
+    case "text":
     default:
       return {
-        '&:hover': {
+        "&:hover": {
           color: dark,
           backgroundColor: lighter
         },
@@ -89,17 +89,17 @@ function getColorStyle({ variant, color, theme }: ButtonStyleProps) {
 // ==============================|| OVERRIDES - BUTTON ||============================== //
 
 export default function Button(theme: Theme) {
-  const primaryDashed = getColorStyle({ variant: 'dashed', color: 'primary', theme });
-  const primaryShadow = getColorStyle({ variant: 'shadow', color: 'primary', theme });
+  const primaryDashed = getColorStyle({ variant: "dashed", color: "primary", theme });
+  const primaryShadow = getColorStyle({ variant: "shadow", color: "primary", theme });
 
   const disabledStyle = {
-    '&.Mui-disabled': {
+    "&.Mui-disabled": {
       backgroundColor: theme.palette.grey[200]
     }
   };
   const iconStyle = {
-    '&>*:nth-of-type(1)': {
-      fontSize: 'inherit'
+    "&>*:nth-of-type(1)": {
+      fontSize: "inherit"
     }
   };
 
@@ -111,26 +111,26 @@ export default function Button(theme: Theme) {
       styleOverrides: {
         root: {
           fontWeight: 400,
-          '&::after': {
+          "&::after": {
             content: '""',
-            display: 'block',
-            position: 'absolute',
+            display: "block",
+            position: "absolute",
             left: 0,
             top: 0,
-            width: '100%',
-            height: '100%',
+            width: "100%",
+            height: "100%",
             borderRadius: 4,
             opacity: 0,
-            transition: 'all 0.5s'
+            transition: "all 0.5s"
           },
 
-          '&:active::after': {
-            position: 'absolute',
+          "&:active::after": {
+            position: "absolute",
             borderRadius: 4,
             left: 0,
             top: 0,
             opacity: 1,
-            transition: '0s'
+            transition: "0s"
           }
         },
         contained: {
@@ -140,9 +140,9 @@ export default function Button(theme: Theme) {
           ...disabledStyle
         },
         text: {
-          boxShadow: 'none',
-          '&:hover': {
-            boxShadow: 'none'
+          boxShadow: "none",
+          "&:hover": {
+            boxShadow: "none"
           }
         },
         endIcon: {
@@ -152,15 +152,15 @@ export default function Button(theme: Theme) {
           ...iconStyle
         },
         dashed: {
-          border: '1px dashed',
+          border: "1px dashed",
           ...primaryDashed,
-          '&.MuiButton-dashedPrimary': getColorStyle({ variant: 'dashed', color: 'primary', theme }),
-          '&.MuiButton-dashedSecondary': getColorStyle({ variant: 'dashed', color: 'secondary', theme }),
-          '&.MuiButton-dashedError': getColorStyle({ variant: 'dashed', color: 'error', theme }),
-          '&.MuiButton-dashedSuccess': getColorStyle({ variant: 'dashed', color: 'success', theme }),
-          '&.MuiButton-dashedInfo': getColorStyle({ variant: 'dashed', color: 'info', theme }),
-          '&.MuiButton-dashedWarning': getColorStyle({ variant: 'dashed', color: 'warning', theme }),
-          '&.Mui-disabled': {
+          "&.MuiButton-dashedPrimary": getColorStyle({ variant: "dashed", color: "primary", theme }),
+          "&.MuiButton-dashedSecondary": getColorStyle({ variant: "dashed", color: "secondary", theme }),
+          "&.MuiButton-dashedError": getColorStyle({ variant: "dashed", color: "error", theme }),
+          "&.MuiButton-dashedSuccess": getColorStyle({ variant: "dashed", color: "success", theme }),
+          "&.MuiButton-dashedInfo": getColorStyle({ variant: "dashed", color: "info", theme }),
+          "&.MuiButton-dashedWarning": getColorStyle({ variant: "dashed", color: "warning", theme }),
+          "&.Mui-disabled": {
             color: `${theme.palette.grey[300]} !important`,
             borderColor: `${theme.palette.grey[400]} !important`,
             backgroundColor: `${theme.palette.grey[200]} !important`
@@ -168,40 +168,40 @@ export default function Button(theme: Theme) {
         },
         shadow: {
           ...primaryShadow,
-          '&.MuiButton-shadowPrimary': getColorStyle({ variant: 'shadow', color: 'primary', theme }),
-          '&.MuiButton-shadowSecondary': getColorStyle({ variant: 'shadow', color: 'secondary', theme }),
-          '&.MuiButton-shadowError': getColorStyle({ variant: 'shadow', color: 'error', theme }),
-          '&.MuiButton-shadowSuccess': getColorStyle({ variant: 'shadow', color: 'success', theme }),
-          '&.MuiButton-shadowInfo': getColorStyle({ variant: 'shadow', color: 'info', theme }),
-          '&.MuiButton-shadowWarning': getColorStyle({ variant: 'shadow', color: 'warning', theme }),
-          '&.Mui-disabled': {
+          "&.MuiButton-shadowPrimary": getColorStyle({ variant: "shadow", color: "primary", theme }),
+          "&.MuiButton-shadowSecondary": getColorStyle({ variant: "shadow", color: "secondary", theme }),
+          "&.MuiButton-shadowError": getColorStyle({ variant: "shadow", color: "error", theme }),
+          "&.MuiButton-shadowSuccess": getColorStyle({ variant: "shadow", color: "success", theme }),
+          "&.MuiButton-shadowInfo": getColorStyle({ variant: "shadow", color: "info", theme }),
+          "&.MuiButton-shadowWarning": getColorStyle({ variant: "shadow", color: "warning", theme }),
+          "&.Mui-disabled": {
             color: `${theme.palette.grey[300]} !important`,
             borderColor: `${theme.palette.grey[400]} !important`,
             backgroundColor: `${theme.palette.grey[200]} !important`
           }
         },
-        containedPrimary: getColorStyle({ variant: 'contained', color: 'primary', theme }),
-        containedSecondary: getColorStyle({ variant: 'contained', color: 'secondary', theme }),
-        containedError: getColorStyle({ variant: 'contained', color: 'error', theme }),
-        containedSuccess: getColorStyle({ variant: 'contained', color: 'success', theme }),
-        containedInfo: getColorStyle({ variant: 'contained', color: 'info', theme }),
-        containedWarning: getColorStyle({ variant: 'contained', color: 'warning', theme }),
-        outlinedPrimary: getColorStyle({ variant: 'outlined', color: 'primary', theme }),
-        outlinedSecondary: getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
-        outlinedError: getColorStyle({ variant: 'outlined', color: 'error', theme }),
-        outlinedSuccess: getColorStyle({ variant: 'outlined', color: 'success', theme }),
-        outlinedInfo: getColorStyle({ variant: 'outlined', color: 'info', theme }),
-        outlinedWarning: getColorStyle({ variant: 'outlined', color: 'warning', theme }),
-        textPrimary: getColorStyle({ variant: 'text', color: 'primary', theme }),
-        textSecondary: getColorStyle({ variant: 'text', color: 'secondary', theme }),
-        textError: getColorStyle({ variant: 'text', color: 'error', theme }),
-        textSuccess: getColorStyle({ variant: 'text', color: 'success', theme }),
-        textInfo: getColorStyle({ variant: 'text', color: 'info', theme }),
-        textWarning: getColorStyle({ variant: 'text', color: 'warning', theme }),
+        containedPrimary: getColorStyle({ variant: "contained", color: "primary", theme }),
+        containedSecondary: getColorStyle({ variant: "contained", color: "secondary", theme }),
+        containedError: getColorStyle({ variant: "contained", color: "error", theme }),
+        containedSuccess: getColorStyle({ variant: "contained", color: "success", theme }),
+        containedInfo: getColorStyle({ variant: "contained", color: "info", theme }),
+        containedWarning: getColorStyle({ variant: "contained", color: "warning", theme }),
+        outlinedPrimary: getColorStyle({ variant: "outlined", color: "primary", theme }),
+        outlinedSecondary: getColorStyle({ variant: "outlined", color: "secondary", theme }),
+        outlinedError: getColorStyle({ variant: "outlined", color: "error", theme }),
+        outlinedSuccess: getColorStyle({ variant: "outlined", color: "success", theme }),
+        outlinedInfo: getColorStyle({ variant: "outlined", color: "info", theme }),
+        outlinedWarning: getColorStyle({ variant: "outlined", color: "warning", theme }),
+        textPrimary: getColorStyle({ variant: "text", color: "primary", theme }),
+        textSecondary: getColorStyle({ variant: "text", color: "secondary", theme }),
+        textError: getColorStyle({ variant: "text", color: "error", theme }),
+        textSuccess: getColorStyle({ variant: "text", color: "success", theme }),
+        textInfo: getColorStyle({ variant: "text", color: "info", theme }),
+        textWarning: getColorStyle({ variant: "text", color: "warning", theme }),
         sizeExtraSmall: {
           minWidth: 56,
-          fontSize: '0.625rem',
-          padding: '2px 8px'
+          fontSize: "0.625rem",
+          padding: "2px 8px"
         }
       }
     }

src/themes/overrides/Checkbox.tsx

@@ -1,15 +1,15 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
-import { Box, CheckboxProps } from '@mui/material';
+import { Theme } from "@mui/material/styles";
+import { Box, CheckboxProps } from "@mui/material";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // assets
-import { CheckSquareFilled, MinusSquareFilled } from '@ant-design/icons';
+import { CheckSquareFilled, MinusSquareFilled } from "@ant-design/icons";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| RADIO - COLORS ||============================== //
 
@@ -18,13 +18,13 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
   const { lighter, main, dark } = colors;
 
   return {
-    '&:hover': {
+    "&:hover": {
       backgroundColor: lighter,
-      '& .icon': {
+      "& .icon": {
         borderColor: main
       }
     },
-    '&.Mui-focusVisible': {
+    "&.Mui-focusVisible": {
       outline: `2px solid ${dark}`,
       outlineOffset: -4
     }
@@ -39,13 +39,13 @@ interface CheckboxSizeProps {
   position: number;
 }
 
-function getSizeStyle(size?: CheckboxProps['size']): CheckboxSizeProps {
+function getSizeStyle(size?: CheckboxProps["size"]): CheckboxSizeProps {
   switch (size) {
-    case 'small':
+    case "small":
       return { size: 16, fontSize: 1, position: 1 };
-    case 'large':
+    case "large":
       return { size: 24, fontSize: 1.6, position: 2 };
-    case 'medium':
+    case "medium":
     default:
       return { size: 20, fontSize: 1.35, position: 2 };
   }
@@ -53,14 +53,14 @@ function getSizeStyle(size?: CheckboxProps['size']): CheckboxSizeProps {
 
 // ==============================|| CHECKBOX - STYLE ||============================== //
 
-function checkboxStyle(size?: CheckboxProps['size']) {
+function checkboxStyle(size?: CheckboxProps["size"]) {
   const sizes: CheckboxSizeProps = getSizeStyle(size);
 
   return {
-    '& .icon': {
+    "& .icon": {
       width: sizes.size,
       height: sizes.size,
-      '& .filled': {
+      "& .filled": {
         fontSize: `${sizes.fontSize}rem`,
         top: -sizes.position,
         left: -sizes.position
@@ -77,21 +77,26 @@ export default function Checkbox(theme: Theme) {
   return {
     MuiCheckbox: {
       defaultProps: {
-        className: 'size-small',
-        icon: <Box className="icon" sx={{ width: 16, height: 16, border: '1px solid', borderColor: 'inherit', borderRadius: 0.25 }} />,
+        className: "size-small",
+        icon: (
+          <Box
+            className="icon"
+            sx={{ width: 16, height: 16, border: "1px solid", borderColor: "inherit", borderRadius: 0.25 }}
+          />
+        ),
         checkedIcon: (
           <Box
             className="icon"
             sx={{
               width: 16,
               height: 16,
-              border: '1px solid',
-              borderColor: 'inherit',
+              border: "1px solid",
+              borderColor: "inherit",
               borderRadius: 0.25,
-              position: 'relative'
+              position: "relative"
             }}
           >
-            <CheckSquareFilled className="filled" style={{ position: 'absolute' }} />
+            <CheckSquareFilled className="filled" style={{ position: "absolute" }} />
           </Box>
         ),
         indeterminateIcon: (
@@ -100,13 +105,13 @@ export default function Checkbox(theme: Theme) {
             sx={{
               width: 16,
               height: 16,
-              border: '1px solid',
-              borderColor: 'inherit',
+              border: "1px solid",
+              borderColor: "inherit",
               borderRadius: 0.25,
-              position: 'relative'
+              position: "relative"
             }}
           >
-            <MinusSquareFilled className="filled" style={{ position: 'absolute' }} />
+            <MinusSquareFilled className="filled" style={{ position: "absolute" }} />
           </Box>
         )
       },
@@ -114,22 +119,22 @@ export default function Checkbox(theme: Theme) {
         root: {
           borderRadius: 0,
           color: palette.secondary[300],
-          '&.size-small': {
-            ...checkboxStyle('small')
+          "&.size-small": {
+            ...checkboxStyle("small")
           },
-          '&.size-medium': {
-            ...checkboxStyle('medium')
+          "&.size-medium": {
+            ...checkboxStyle("medium")
           },
-          '&.size-large': {
-            ...checkboxStyle('large')
+          "&.size-large": {
+            ...checkboxStyle("large")
           }
         },
-        colorPrimary: getColorStyle({ color: 'primary', theme }),
-        colorSecondary: getColorStyle({ color: 'secondary', theme }),
-        colorSuccess: getColorStyle({ color: 'success', theme }),
-        colorWarning: getColorStyle({ color: 'warning', theme }),
-        colorInfo: getColorStyle({ color: 'info', theme }),
-        colorError: getColorStyle({ color: 'error', theme })
+        colorPrimary: getColorStyle({ color: "primary", theme }),
+        colorSecondary: getColorStyle({ color: "secondary", theme }),
+        colorSuccess: getColorStyle({ color: "success", theme }),
+        colorWarning: getColorStyle({ color: "warning", theme }),
+        colorInfo: getColorStyle({ color: "info", theme }),
+        colorError: getColorStyle({ color: "error", theme })
       }
     }
   };

src/themes/overrides/Chip.ts

@@ -1,11 +1,11 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
+import { Theme } from "@mui/material/styles";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| CHIP - COLORS ||============================== //
 
@@ -14,7 +14,7 @@ function getColor({ color, theme }: ExtendedStyleProps) {
   const { dark } = colors;
 
   return {
-    '&.Mui-focusVisible': {
+    "&.Mui-focusVisible": {
       outline: `2px solid ${dark}`,
       outlineOffset: 2
     }
@@ -29,9 +29,9 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
     color: main,
     backgroundColor: lighter,
     borderColor: light,
-    '& .MuiChip-deleteIcon': {
+    "& .MuiChip-deleteIcon": {
       color: main,
-      '&:hover': {
+      "&:hover": {
         color: light
       }
     }
@@ -41,44 +41,44 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
 // ==============================|| OVERRIDES - CHIP ||============================== //
 
 export default function Chip(theme: Theme) {
-  const defaultLightChip = getColorStyle({ color: 'secondary', theme });
+  const defaultLightChip = getColorStyle({ color: "secondary", theme });
   return {
     MuiChip: {
       styleOverrides: {
         root: {
           borderRadius: 4,
-          '&:active': {
-            boxShadow: 'none'
+          "&:active": {
+            boxShadow: "none"
           },
-          '&.MuiChip-colorPrimary': getColor({ color: 'primary', theme }),
-          '&.MuiChip-colorSecondary': getColor({ color: 'secondary', theme }),
-          '&.MuiChip-colorError': getColor({ color: 'error', theme }),
-          '&.MuiChip-colorInfo': getColor({ color: 'info', theme }),
-          '&.MuiChip-colorSuccess': getColor({ color: 'success', theme }),
-          '&.MuiChip-colorWarning': getColor({ color: 'warning', theme })
+          "&.MuiChip-colorPrimary": getColor({ color: "primary", theme }),
+          "&.MuiChip-colorSecondary": getColor({ color: "secondary", theme }),
+          "&.MuiChip-colorError": getColor({ color: "error", theme }),
+          "&.MuiChip-colorInfo": getColor({ color: "info", theme }),
+          "&.MuiChip-colorSuccess": getColor({ color: "success", theme }),
+          "&.MuiChip-colorWarning": getColor({ color: "warning", theme })
         },
         sizeLarge: {
-          fontSize: '1rem',
+          fontSize: "1rem",
           height: 40
         },
         light: {
           ...defaultLightChip,
-          '&.MuiChip-lightPrimary': getColorStyle({ color: 'primary', theme }),
-          '&.MuiChip-lightSecondary': getColorStyle({ color: 'secondary', theme }),
-          '&.MuiChip-lightError': getColorStyle({ color: 'error', theme }),
-          '&.MuiChip-lightInfo': getColorStyle({ color: 'info', theme }),
-          '&.MuiChip-lightSuccess': getColorStyle({ color: 'success', theme }),
-          '&.MuiChip-lightWarning': getColorStyle({ color: 'warning', theme })
+          "&.MuiChip-lightPrimary": getColorStyle({ color: "primary", theme }),
+          "&.MuiChip-lightSecondary": getColorStyle({ color: "secondary", theme }),
+          "&.MuiChip-lightError": getColorStyle({ color: "error", theme }),
+          "&.MuiChip-lightInfo": getColorStyle({ color: "info", theme }),
+          "&.MuiChip-lightSuccess": getColorStyle({ color: "success", theme }),
+          "&.MuiChip-lightWarning": getColorStyle({ color: "warning", theme })
         },
         combined: {
-          border: '1px solid',
+          border: "1px solid",
           ...defaultLightChip,
-          '&.MuiChip-combinedPrimary': getColorStyle({ color: 'primary', theme }),
-          '&.MuiChip-combinedSecondary': getColorStyle({ color: 'secondary', theme }),
-          '&.MuiChip-combinedError': getColorStyle({ color: 'error', theme }),
-          '&.MuiChip-combinedInfo': getColorStyle({ color: 'info', theme }),
-          '&.MuiChip-combinedSuccess': getColorStyle({ color: 'success', theme }),
-          '&.MuiChip-combinedWarning': getColorStyle({ color: 'warning', theme })
+          "&.MuiChip-combinedPrimary": getColorStyle({ color: "primary", theme }),
+          "&.MuiChip-combinedSecondary": getColorStyle({ color: "secondary", theme }),
+          "&.MuiChip-combinedError": getColorStyle({ color: "error", theme }),
+          "&.MuiChip-combinedInfo": getColorStyle({ color: "info", theme }),
+          "&.MuiChip-combinedSuccess": getColorStyle({ color: "success", theme }),
+          "&.MuiChip-combinedWarning": getColorStyle({ color: "warning", theme })
         }
       }
     }

src/themes/overrides/Fab.ts

@@ -1,12 +1,12 @@
 // material-ui
-import { alpha, Theme } from '@mui/material/styles';
+import { alpha, Theme } from "@mui/material/styles";
 
 // project import
-import getColors from 'utils/getColors';
-import getShadow from 'utils/getShadow';
+import getColors from "@/utils/getColors";
+import getShadow from "@/utils/getShadow";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| BUTTON - COLORS ||============================== //
 
@@ -21,20 +21,20 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
     color: contrastText,
     backgroundColor: main,
     boxShadow: shadows,
-    '&:hover': {
-      boxShadow: 'none',
+    "&:hover": {
+      boxShadow: "none",
       backgroundColor: dark
     },
-    '&:focus-visible': {
+    "&:focus-visible": {
       outline: `2px solid ${dark}`,
       outlineOffset: 2
     },
-    '&::after': {
-      borderRadius: '50px',
+    "&::after": {
+      borderRadius: "50px",
       boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
     },
-    '&:active::after': {
-      borderRadius: '50px',
+    "&:active::after": {
+      borderRadius: "50px",
       boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
     }
   };
@@ -48,35 +48,35 @@ export default function Button(theme: Theme) {
       styleOverrides: {
         root: {
           fontWeight: 400,
-          '&.Mui-disabled': {
+          "&.Mui-disabled": {
             backgroundColor: theme.palette.grey[200]
           },
-          '&.MuiFab-primary': getColorStyle({ color: 'primary', theme }),
-          '&.MuiFab-secondary': getColorStyle({ color: 'secondary', theme }),
-          '&.Mui-error': getColorStyle({ color: 'error', theme }),
-          '&.MuiFab-success': getColorStyle({ color: 'success', theme }),
-          '&.MuiFab-info': getColorStyle({ color: 'info', theme }),
-          '&.MuiFab-warning': getColorStyle({ color: 'warning', theme }),
-          '&::after': {
+          "&.MuiFab-primary": getColorStyle({ color: "primary", theme }),
+          "&.MuiFab-secondary": getColorStyle({ color: "secondary", theme }),
+          "&.Mui-error": getColorStyle({ color: "error", theme }),
+          "&.MuiFab-success": getColorStyle({ color: "success", theme }),
+          "&.MuiFab-info": getColorStyle({ color: "info", theme }),
+          "&.MuiFab-warning": getColorStyle({ color: "warning", theme }),
+          "&::after": {
             content: '""',
-            display: 'block',
-            position: 'absolute',
+            display: "block",
+            position: "absolute",
             left: 0,
             top: 0,
-            width: '100%',
-            height: '100%',
+            width: "100%",
+            height: "100%",
             borderRadius: 4,
             opacity: 0,
-            transition: 'all 0.5s'
+            transition: "all 0.5s"
           },
 
-          '&:active::after': {
-            position: 'absolute',
+          "&:active::after": {
+            position: "absolute",
             borderRadius: 4,
             left: 0,
             top: 0,
             opacity: 1,
-            transition: '0s'
+            transition: "0s"
           }
         }
       }

src/themes/overrides/OutlinedInput.ts

@@ -1,10 +1,10 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
-import { ColorProps } from 'types/extended';
+import { Theme } from "@mui/material/styles";
+import { ColorProps } from "@/types/extended";
 
 // project import
-import getColors from 'utils/getColors';
-import getShadow from 'utils/getShadow';
+import getColors from "@/utils/getColors";
+import getShadow from "@/utils/getShadow";
 
 // types
 interface Props {
@@ -21,12 +21,12 @@ function getColor({ variant, theme }: Props) {
   const shadows = getShadow(theme, `${variant}`);
 
   return {
-    '&:hover .MuiOutlinedInput-notchedOutline': {
+    "&:hover .MuiOutlinedInput-notchedOutline": {
       borderColor: light
     },
-    '&.Mui-focused': {
+    "&.Mui-focused": {
       boxShadow: shadows,
-      '& .MuiOutlinedInput-notchedOutline': {
+      "& .MuiOutlinedInput-notchedOutline": {
         border: `1px solid ${light}`
       }
     }
@@ -40,28 +40,28 @@ export default function OutlinedInput(theme: Theme) {
     MuiOutlinedInput: {
       styleOverrides: {
         input: {
-          padding: '10.5px 14px 10.5px 12px'
+          padding: "10.5px 14px 10.5px 12px"
         },
         notchedOutline: {
-          borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[300]
+          borderColor: theme.palette.mode === "dark" ? theme.palette.grey[200] : theme.palette.grey[300]
         },
         root: {
-          ...getColor({ variant: 'primary', theme }),
-          '&.Mui-error': {
-            ...getColor({ variant: 'error', theme })
+          ...getColor({ variant: "primary", theme }),
+          "&.Mui-error": {
+            ...getColor({ variant: "error", theme })
           }
         },
         inputSizeSmall: {
-          padding: '7.5px 8px 7.5px 12px'
+          padding: "7.5px 8px 7.5px 12px"
         },
         inputMultiline: {
           padding: 0
         },
-        colorSecondary: getColor({ variant: 'secondary', theme }),
-        colorError: getColor({ variant: 'error', theme }),
-        colorWarning: getColor({ variant: 'warning', theme }),
-        colorInfo: getColor({ variant: 'info', theme }),
-        colorSuccess: getColor({ variant: 'success', theme })
+        colorSecondary: getColor({ variant: "secondary", theme }),
+        colorError: getColor({ variant: "error", theme }),
+        colorWarning: getColor({ variant: "warning", theme }),
+        colorInfo: getColor({ variant: "info", theme }),
+        colorSuccess: getColor({ variant: "success", theme })
       }
     }
   };

src/themes/overrides/PaginationItem.ts

@@ -1,17 +1,17 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
-import { PaginationProps } from '@mui/material';
+import { Theme } from "@mui/material/styles";
+import { PaginationProps } from "@mui/material";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| PAGINATION ITEM - COLORS ||============================== //
 
 interface PaginationStyleProps extends ExtendedStyleProps {
-  variant: PaginationProps['variant'];
+  variant: PaginationProps["variant"];
 }
 
 function getColorStyle({ variant, color, theme }: PaginationStyleProps) {
@@ -19,40 +19,40 @@ function getColorStyle({ variant, color, theme }: PaginationStyleProps) {
   const { lighter, light, dark, main, contrastText } = colors;
 
   const focusStyle = {
-    '&:focus-visible': {
+    "&:focus-visible": {
       outline: `2px solid ${dark}`,
       outlineOffset: 2,
-      ...(variant === 'text' && {
+      ...(variant === "text" && {
         backgroundColor: theme.palette.background.paper
       })
     }
   };
 
   switch (variant) {
-    case 'combined':
-    case 'contained':
+    case "combined":
+    case "contained":
       return {
         color: contrastText,
         backgroundColor: main,
-        '&:hover': {
+        "&:hover": {
           backgroundColor: light
         },
         ...focusStyle
       };
-    case 'outlined':
+    case "outlined":
       return {
         borderColor: main,
-        '&:hover': {
+        "&:hover": {
           backgroundColor: lighter,
           borderColor: light
         },
         ...focusStyle
       };
-    case 'text':
+    case "text":
     default:
       return {
         color: main,
-        '&:hover': {
+        "&:hover": {
           backgroundColor: main,
           color: lighter
         },
@@ -68,59 +68,63 @@ export default function PaginationItem(theme: Theme) {
     MuiPaginationItem: {
       styleOverrides: {
         root: {
-          '&:focus-visible': {
+          "&:focus-visible": {
             outline: `2px solid ${theme.palette.secondary.dark}`,
             outlineOffset: 2
           }
         },
         text: {
-          '&.Mui-selected': {
-            backgroundColor: 'transparent',
-            fontSize: '1rem',
+          "&.Mui-selected": {
+            backgroundColor: "transparent",
+            fontSize: "1rem",
             fontWeight: 500,
-            '&.MuiPaginationItem-textPrimary': getColorStyle({ variant: 'text', color: 'primary', theme }),
-            '&.MuiPaginationItem-textSecondary': getColorStyle({ variant: 'text', color: 'secondary', theme }),
-            '&.MuiPaginationItem-textError': getColorStyle({ variant: 'text', color: 'error', theme }),
-            '&.MuiPaginationItem-textSuccess': getColorStyle({ variant: 'text', color: 'success', theme }),
-            '&.MuiPaginationItem-textInfo': getColorStyle({ variant: 'text', color: 'info', theme }),
-            '&.MuiPaginationItem-textWarning': getColorStyle({ variant: 'text', color: 'warning', theme })
+            "&.MuiPaginationItem-textPrimary": getColorStyle({ variant: "text", color: "primary", theme }),
+            "&.MuiPaginationItem-textSecondary": getColorStyle({ variant: "text", color: "secondary", theme }),
+            "&.MuiPaginationItem-textError": getColorStyle({ variant: "text", color: "error", theme }),
+            "&.MuiPaginationItem-textSuccess": getColorStyle({ variant: "text", color: "success", theme }),
+            "&.MuiPaginationItem-textInfo": getColorStyle({ variant: "text", color: "info", theme }),
+            "&.MuiPaginationItem-textWarning": getColorStyle({ variant: "text", color: "warning", theme })
           }
         },
         contained: {
-          '&.Mui-selected': {
-            '&.MuiPaginationItem-containedPrimary': getColorStyle({ variant: 'contained', color: 'primary', theme }),
-            '&.MuiPaginationItem-containedSecondary': getColorStyle({ variant: 'contained', color: 'secondary', theme }),
-            '&.MuiPaginationItem-containedError': getColorStyle({ variant: 'contained', color: 'error', theme }),
-            '&.MuiPaginationItem-containedSuccess': getColorStyle({ variant: 'contained', color: 'success', theme }),
-            '&.MuiPaginationItem-containedInfo': getColorStyle({ variant: 'contained', color: 'info', theme }),
-            '&.MuiPaginationItem-containedWarning': getColorStyle({ variant: 'contained', color: 'warning', theme })
+          "&.Mui-selected": {
+            "&.MuiPaginationItem-containedPrimary": getColorStyle({ variant: "contained", color: "primary", theme }),
+            "&.MuiPaginationItem-containedSecondary": getColorStyle({
+              variant: "contained",
+              color: "secondary",
+              theme
+            }),
+            "&.MuiPaginationItem-containedError": getColorStyle({ variant: "contained", color: "error", theme }),
+            "&.MuiPaginationItem-containedSuccess": getColorStyle({ variant: "contained", color: "success", theme }),
+            "&.MuiPaginationItem-containedInfo": getColorStyle({ variant: "contained", color: "info", theme }),
+            "&.MuiPaginationItem-containedWarning": getColorStyle({ variant: "contained", color: "warning", theme })
           }
         },
         combined: {
-          border: '1px solid',
+          border: "1px solid",
           borderColor: theme.palette.divider,
-          '&.MuiPaginationItem-ellipsis': {
-            border: 'none'
+          "&.MuiPaginationItem-ellipsis": {
+            border: "none"
           },
-          '&.Mui-selected': {
-            '&.MuiPaginationItem-combinedPrimary': getColorStyle({ variant: 'combined', color: 'primary', theme }),
-            '&.MuiPaginationItem-combinedSecondary': getColorStyle({ variant: 'combined', color: 'secondary', theme }),
-            '&.MuiPaginationItem-combinedError': getColorStyle({ variant: 'combined', color: 'error', theme }),
-            '&.MuiPaginationItem-combinedSuccess': getColorStyle({ variant: 'combined', color: 'success', theme }),
-            '&.MuiPaginationItem-combinedInfo': getColorStyle({ variant: 'combined', color: 'info', theme }),
-            '&.MuiPaginationItem-combinedWarning': getColorStyle({ variant: 'combined', color: 'warning', theme })
+          "&.Mui-selected": {
+            "&.MuiPaginationItem-combinedPrimary": getColorStyle({ variant: "combined", color: "primary", theme }),
+            "&.MuiPaginationItem-combinedSecondary": getColorStyle({ variant: "combined", color: "secondary", theme }),
+            "&.MuiPaginationItem-combinedError": getColorStyle({ variant: "combined", color: "error", theme }),
+            "&.MuiPaginationItem-combinedSuccess": getColorStyle({ variant: "combined", color: "success", theme }),
+            "&.MuiPaginationItem-combinedInfo": getColorStyle({ variant: "combined", color: "info", theme }),
+            "&.MuiPaginationItem-combinedWarning": getColorStyle({ variant: "combined", color: "warning", theme })
           }
         },
         outlined: {
           borderColor: theme.palette.divider,
-          '&.Mui-selected': {
-            backgroundColor: 'transparent',
-            '&.MuiPaginationItem-outlinedPrimary': getColorStyle({ variant: 'outlined', color: 'primary', theme }),
-            '&.MuiPaginationItem-outlinedSecondary': getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
-            '&.MuiPaginationItem-outlinedError': getColorStyle({ variant: 'outlined', color: 'error', theme }),
-            '&.MuiPaginationItem-outlinedSuccess': getColorStyle({ variant: 'outlined', color: 'success', theme }),
-            '&.MuiPaginationItem-outlinedInfo': getColorStyle({ variant: 'outlined', color: 'info', theme }),
-            '&.MuiPaginationItem-outlinedWarning': getColorStyle({ variant: 'outlined', color: 'warning', theme })
+          "&.Mui-selected": {
+            backgroundColor: "transparent",
+            "&.MuiPaginationItem-outlinedPrimary": getColorStyle({ variant: "outlined", color: "primary", theme }),
+            "&.MuiPaginationItem-outlinedSecondary": getColorStyle({ variant: "outlined", color: "secondary", theme }),
+            "&.MuiPaginationItem-outlinedError": getColorStyle({ variant: "outlined", color: "error", theme }),
+            "&.MuiPaginationItem-outlinedSuccess": getColorStyle({ variant: "outlined", color: "success", theme }),
+            "&.MuiPaginationItem-outlinedInfo": getColorStyle({ variant: "outlined", color: "info", theme }),
+            "&.MuiPaginationItem-outlinedWarning": getColorStyle({ variant: "outlined", color: "warning", theme })
           }
         }
       }

src/themes/overrides/Radio.tsx

@@ -1,12 +1,12 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
-import { Box, CheckboxProps } from '@mui/material';
+import { Theme } from "@mui/material/styles";
+import { Box, CheckboxProps } from "@mui/material";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| RADIO - COLORS ||============================== //
 
@@ -15,13 +15,13 @@ function getColorStyle({ color, theme }: ExtendedStyleProps) {
   const { lighter, main, dark } = colors;
 
   return {
-    '& .dot': {
+    "& .dot": {
       backgroundColor: main
     },
-    '&:hover': {
+    "&:hover": {
       backgroundColor: lighter
     },
-    '&.Mui-focusVisible': {
+    "&.Mui-focusVisible": {
       outline: `2px solid ${dark}`,
       outlineOffset: -4
     }
@@ -36,13 +36,13 @@ interface RadioSizeProps {
   position: number;
 }
 
-function getSizeStyle(size?: CheckboxProps['size']): RadioSizeProps {
+function getSizeStyle(size?: CheckboxProps["size"]): RadioSizeProps {
   switch (size) {
-    case 'small':
+    case "small":
       return { size: 16, dotSize: 8, position: 3 };
-    case 'large':
+    case "large":
       return { size: 24, dotSize: 12, position: 5 };
-    case 'medium':
+    case "medium":
     default:
       return { size: 20, dotSize: 10, position: 4 };
   }
@@ -50,14 +50,14 @@ function getSizeStyle(size?: CheckboxProps['size']): RadioSizeProps {
 
 // ==============================|| CHECKBOX - STYLE ||============================== //
 
-function radioStyle(size?: CheckboxProps['size']) {
+function radioStyle(size?: CheckboxProps["size"]) {
   const sizes: RadioSizeProps = getSizeStyle(size);
 
   return {
-    '& .icon': {
+    "& .icon": {
       width: sizes.size,
       height: sizes.size,
-      '& .dot': {
+      "& .dot": {
         width: sizes.dotSize,
         height: sizes.dotSize,
         top: sizes.position,
@@ -75,18 +75,23 @@ export default function Radio(theme: Theme) {
   return {
     MuiRadio: {
       defaultProps: {
-        className: 'size-small',
-        icon: <Box className="icon" sx={{ width: 16, height: 16, border: '1px solid', borderColor: 'inherit', borderRadius: '50%' }} />,
+        className: "size-small",
+        icon: (
+          <Box
+            className="icon"
+            sx={{ width: 16, height: 16, border: "1px solid", borderColor: "inherit", borderRadius: "50%" }}
+          />
+        ),
         checkedIcon: (
           <Box
             className="icon"
             sx={{
               width: 16,
               height: 16,
-              border: '1px solid',
-              borderColor: 'inherit',
-              borderRadius: '50%',
-              position: 'relative'
+              border: "1px solid",
+              borderColor: "inherit",
+              borderRadius: "50%",
+              position: "relative"
             }}
           >
             <Box
@@ -94,9 +99,9 @@ export default function Radio(theme: Theme) {
               sx={{
                 width: 8,
                 height: 8,
-                backgroundColor: 'inherit',
-                borderRadius: '50%',
-                position: 'absolute',
+                backgroundColor: "inherit",
+                borderRadius: "50%",
+                position: "absolute",
                 top: 3,
                 left: 3
               }}
@@ -107,22 +112,22 @@ export default function Radio(theme: Theme) {
       styleOverrides: {
         root: {
           color: palette.secondary[300],
-          '&.size-small': {
-            ...radioStyle('small')
+          "&.size-small": {
+            ...radioStyle("small")
           },
-          '&.size-medium': {
-            ...radioStyle('medium')
+          "&.size-medium": {
+            ...radioStyle("medium")
           },
-          '&.size-large': {
-            ...radioStyle('large')
+          "&.size-large": {
+            ...radioStyle("large")
           }
         },
-        colorPrimary: getColorStyle({ color: 'primary', theme }),
-        colorSecondary: getColorStyle({ color: 'secondary', theme }),
-        colorSuccess: getColorStyle({ color: 'success', theme }),
-        colorWarning: getColorStyle({ color: 'warning', theme }),
-        colorInfo: getColorStyle({ color: 'info', theme }),
-        colorError: getColorStyle({ color: 'error', theme })
+        colorPrimary: getColorStyle({ color: "primary", theme }),
+        colorSecondary: getColorStyle({ color: "secondary", theme }),
+        colorSuccess: getColorStyle({ color: "success", theme }),
+        colorWarning: getColorStyle({ color: "warning", theme }),
+        colorInfo: getColorStyle({ color: "info", theme }),
+        colorError: getColorStyle({ color: "error", theme })
       }
     }
   };

src/themes/overrides/Slider.ts

@@ -1,11 +1,11 @@
 // material-ui
-import { Theme } from '@mui/material/styles';
+import { Theme } from "@mui/material/styles";
 
 // project import
-import getColors from 'utils/getColors';
+import getColors from "@/utils/getColors";
 
 // types
-import { ExtendedStyleProps } from 'types/extended';
+import { ExtendedStyleProps } from "@/types/extended";
 
 // ==============================|| OVERRIDES - TAB ||============================== //
 
@@ -23,29 +23,29 @@ export default function Slider(theme: Theme) {
     MuiSlider: {
       styleOverrides: {
         track: {
-          height: '1px'
+          height: "1px"
         },
         thumb: {
           width: 14,
           height: 14,
           border: `2px solid ${theme.palette.primary.main}`,
           backgroundColor: theme.palette.background.paper,
-          '&.MuiSlider-thumbColorPrimary': getColorStyle({ color: 'primary', theme }),
-          '&.MuiSlider-thumbColorSecondary': getColorStyle({ color: 'secondary', theme }),
-          '&.MuiSlider-thumbColorSuccess': getColorStyle({ color: 'success', theme }),
-          '&.MuiSlider-thumbColorWarning': getColorStyle({ color: 'warning', theme }),
-          '&.MuiSlider-thumbColorInfo': getColorStyle({ color: 'info', theme }),
-          '&.MuiSlider-thumbColorError': getColorStyle({ color: 'error', theme })
+          "&.MuiSlider-thumbColorPrimary": getColorStyle({ color: "primary", theme }),
+          "&.MuiSlider-thumbColorSecondary": getColorStyle({ color: "secondary", theme }),
+          "&.MuiSlider-thumbColorSuccess": getColorStyle({ color: "success", theme }),
+          "&.MuiSlider-thumbColorWarning": getColorStyle({ color: "warning", theme }),
+          "&.MuiSlider-thumbColorInfo": getColorStyle({ color: "info", theme }),
+          "&.MuiSlider-thumbColorError": getColorStyle({ color: "error", theme })
         },
         mark: {
           width: 4,
           height: 4,
-          borderRadius: '50%',
+          borderRadius: "50%",
           border: `1px solid ${theme.palette.secondary.light}`,
           backgroundColor: theme.palette.background.paper,
-          '&.MuiSlider-markActive': {
+          "&.MuiSlider-markActive": {
             opacity: 1,
-            borderColor: 'inherit',
+            borderColor: "inherit",
             borderWidth: 2
           }
         },
@@ -53,14 +53,14 @@ export default function Slider(theme: Theme) {
           color: theme.palette.secondary.light
         },
         root: {
-          '&.Mui-disabled': {
-            '.MuiSlider-rail': {
+          "&.Mui-disabled": {
+            ".MuiSlider-rail": {
               opacity: 0.25
             },
-            '.MuiSlider-track': {
+            ".MuiSlider-track": {
               color: theme.palette.secondary.lighter
             },
-            '.MuiSlider-thumb': {
+            ".MuiSlider-thumb": {
               border: `2px solid ${theme.palette.secondary.lighter}`
             }
           }

src/themes/palette.ts

@@ -1,42 +1,54 @@
 // material-ui
-import { alpha, createTheme } from '@mui/material/styles';
+import { alpha, createTheme } from "@mui/material/styles";
 
 // third-party
-import { presetDarkPalettes, presetPalettes, PalettesProps } from '@ant-design/colors';
+import { presetDarkPalettes, presetPalettes, PalettesProps } from "@ant-design/colors";
 
 // project import
-import ThemeOption from './theme';
+import ThemeOption from "./theme";
 
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PresetColor, ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PresetColor, ThemeMode } from "@/types/config";
 
 // ==============================|| DEFAULT THEME - PALETTE  ||============================== //
 
 const Palette = (mode: ThemeMode, presetColor: PresetColor) => {
-  const colors: PalettesProps = mode === 'dark' ? presetDarkPalettes : presetPalettes;
+  const colors: PalettesProps = mode === "dark" ? presetDarkPalettes : presetPalettes;
 
   let greyPrimary = [
-    '#ffffff',
-    '#fafafa',
-    '#f5f5f5',
-    '#f0f0f0',
-    '#d9d9d9',
-    '#bfbfbf',
-    '#8c8c8c',
-    '#595959',
-    '#262626',
-    '#141414',
-    '#000000'
+    "#ffffff",
+    "#fafafa",
+    "#f5f5f5",
+    "#f0f0f0",
+    "#d9d9d9",
+    "#bfbfbf",
+    "#8c8c8c",
+    "#595959",
+    "#262626",
+    "#141414",
+    "#000000"
   ];
-  let greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
-  let greyConstant = ['#fafafb', '#e6ebf1'];
+  let greyAscent = ["#fafafa", "#bfbfbf", "#434343", "#1f1f1f"];
+  let greyConstant = ["#fafafb", "#e6ebf1"];
 
-  if (mode === 'dark') {
-    greyPrimary = ['#000000', '#141414', '#1e1e1e', '#595959', '#8c8c8c', '#bfbfbf', '#d9d9d9', '#f0f0f0', '#f5f5f5', '#fafafa', '#ffffff'];
+  if (mode === "dark") {
+    greyPrimary = [
+      "#000000",
+      "#141414",
+      "#1e1e1e",
+      "#595959",
+      "#8c8c8c",
+      "#bfbfbf",
+      "#d9d9d9",
+      "#f0f0f0",
+      "#f5f5f5",
+      "#fafafa",
+      "#ffffff"
+    ];
     // greyPrimary.reverse();
-    greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
-    greyConstant = ['#121212', '#d3d8db'];
+    greyAscent = ["#fafafa", "#bfbfbf", "#434343", "#1f1f1f"];
+    greyConstant = ["#121212", "#d3d8db"];
   }
   colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant];
 
@@ -46,21 +58,21 @@ const Palette = (mode: ThemeMode, presetColor: PresetColor) => {
     palette: {
       mode,
       common: {
-        black: '#000',
-        white: '#fff'
+        black: "#000",
+        white: "#fff"
       },
       ...paletteColor,
       text: {
-        primary: mode === 'dark' ? alpha(paletteColor.grey[900]!, 0.87) : paletteColor.grey[700],
-        secondary: mode === 'dark' ? alpha(paletteColor.grey[900]!, 0.45) : paletteColor.grey[500],
-        disabled: mode === 'dark' ? alpha(paletteColor.grey[900]!, 0.1) : paletteColor.grey[400]
+        primary: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.87) : paletteColor.grey[700],
+        secondary: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.45) : paletteColor.grey[500],
+        disabled: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.1) : paletteColor.grey[400]
       },
       action: {
         disabled: paletteColor.grey[300]
       },
-      divider: mode === 'dark' ? alpha(paletteColor.grey[900]!, 0.05) : paletteColor.grey[200],
+      divider: mode === "dark" ? alpha(paletteColor.grey[900]!, 0.05) : paletteColor.grey[200],
       background: {
-        paper: mode === 'dark' ? paletteColor.grey[100] : paletteColor.grey[0],
+        paper: mode === "dark" ? paletteColor.grey[100] : paletteColor.grey[0],
         default: paletteColor.grey.A50
       }
     }

src/themes/shadows.tsx

@@ -1,17 +1,17 @@
 // material-ui
-import { alpha, Theme } from '@mui/material/styles';
+import { alpha, Theme } from "@mui/material/styles";
 
 // types
-import { CustomShadowProps } from 'types/theme';
+import { CustomShadowProps } from "@/types/theme";
 
 // ==============================|| DEFAULT THEME - CUSTOM SHADOWS  ||============================== //
 
 const CustomShadows = (theme: Theme): CustomShadowProps => ({
   // z1: `0px 2px 8px rgba(0, 0, 0, 0.15)`,
-  button: theme.palette.mode === 'dark' ? `0 2px 0 rgb(0 0 0 / 5%)` : `0 2px #0000000b`,
+  button: theme.palette.mode === "dark" ? `0 2px 0 rgb(0 0 0 / 5%)` : `0 2px #0000000b`,
   text: `0 -1px 0 rgb(0 0 0 / 12%)`,
   z1:
-    theme.palette.mode === 'dark'
+    theme.palette.mode === "dark"
       ? `0px 1px 1px rgb(0 0 0 / 14%), 0px 2px 1px rgb(0 0 0 / 12%), 0px 1px 3px rgb(0 0 0 / 20%)`
       : `0px 1px 4px ${alpha(theme.palette.grey[900], 0.08)}`,
   primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,

src/themes/theme/default.ts

@@ -1,7 +1,7 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
 
 // ==============================|| PRESET THEME - DEFAULT ||============================== //
 
@@ -26,7 +26,7 @@ const Default = (colors: PalettesProps): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
   return {
     primary: {

src/themes/theme/index.ts

@@ -1,38 +1,38 @@
 // project import
-import Default from './default';
-import Theme1 from './theme1';
-import Theme2 from './theme2';
-import Theme3 from './theme3';
-import Theme4 from './theme4';
-import Theme5 from './theme5';
-import Theme6 from './theme6';
-import Theme7 from './theme7';
-import Theme8 from './theme8';
+import Default from "./default";
+import Theme1 from "./theme1";
+import Theme2 from "./theme2";
+import Theme3 from "./theme3";
+import Theme4 from "./theme4";
+import Theme5 from "./theme5";
+import Theme6 from "./theme6";
+import Theme7 from "./theme7";
+import Theme8 from "./theme8";
 
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { ThemeMode, PresetColor } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { ThemeMode, PresetColor } from "@/types/config";
 
 // ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
 
 const Theme = (colors: PalettesProps, presetColor: PresetColor, mode: ThemeMode): PaletteThemeProps => {
   switch (presetColor) {
-    case 'theme1':
+    case "theme1":
       return Theme1(colors, mode);
-    case 'theme2':
+    case "theme2":
       return Theme2(colors, mode);
-    case 'theme3':
+    case "theme3":
       return Theme3(colors, mode);
-    case 'theme4':
+    case "theme4":
       return Theme4(colors, mode);
-    case 'theme5':
+    case "theme5":
       return Theme5(colors, mode);
-    case 'theme6':
+    case "theme6":
       return Theme6(colors, mode);
-    case 'theme7':
+    case "theme7":
       return Theme7(colors, mode);
-    case 'theme8':
+    case "theme8":
       return Theme8(colors, mode);
     default:
       return Default(colors);

src/themes/theme/theme1.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - DEFAULT ||============================== //
 
@@ -27,20 +27,42 @@ const Theme1 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#D6E4FF', '#D6E4FF', '#ADC8FF', '#84A9FF', '#6690FF', '#3366FF', '#254EDB', '#1939B7', '#102693', '#102693'];
-  let errorColors = ['#FFE7D3', '#FF805D', '#FF4528', '#DB271D', '#930C1A'];
-  let warningColors = ['#FFF6D0', '#FFCF4E', '#FFB814', '#DB970E', '#935B06'];
-  let infoColors = ['#DCF0FF', '#7EB9FF', '#549BFF', '#3D78DB', '#1A3D93'];
-  let successColors = ['#EAFCD4', '#8AE65B', '#58D62A', '#3DB81E', '#137C0D'];
+  let primaryColors = [
+    "#D6E4FF",
+    "#D6E4FF",
+    "#ADC8FF",
+    "#84A9FF",
+    "#6690FF",
+    "#3366FF",
+    "#254EDB",
+    "#1939B7",
+    "#102693",
+    "#102693"
+  ];
+  let errorColors = ["#FFE7D3", "#FF805D", "#FF4528", "#DB271D", "#930C1A"];
+  let warningColors = ["#FFF6D0", "#FFCF4E", "#FFB814", "#DB970E", "#935B06"];
+  let infoColors = ["#DCF0FF", "#7EB9FF", "#549BFF", "#3D78DB", "#1A3D93"];
+  let successColors = ["#EAFCD4", "#8AE65B", "#58D62A", "#3DB81E", "#137C0D"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#1c2134', '#1f294d', '#243462', '#273e83', '#2c4db0', '#305bdd', '#567fe9', '#80a4f4', '#a9c5f8', '#d2e2fb'];
-    errorColors = ['#341d1b', '#b03725', '#dd3f27', '#e9664d', '#fbd6c9'];
-    warningColors = ['#342a1a', '#83631a', '#dda116', '#e9ba3a', '#fbefb5'];
-    infoColors = ['#202734', '#416fb0', '#4c88dd', '#74a8e9', '#ecf4fb'];
-    successColors = ['#1f2e1c', '#449626', '#4fba28', '#74cf4d', '#e3fbd2'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#1c2134",
+      "#1f294d",
+      "#243462",
+      "#273e83",
+      "#2c4db0",
+      "#305bdd",
+      "#567fe9",
+      "#80a4f4",
+      "#a9c5f8",
+      "#d2e2fb"
+    ];
+    errorColors = ["#341d1b", "#b03725", "#dd3f27", "#e9664d", "#fbd6c9"];
+    warningColors = ["#342a1a", "#83631a", "#dda116", "#e9ba3a", "#fbefb5"];
+    infoColors = ["#202734", "#416fb0", "#4c88dd", "#74a8e9", "#ecf4fb"];
+    successColors = ["#1f2e1c", "#449626", "#4fba28", "#74cf4d", "#e3fbd2"];
   }
 
   return {

src/themes/theme/theme2.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - DEFAULT ||============================== //
 
@@ -27,20 +27,42 @@ const Theme2 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#EEEDFC', '#D5D1F8', '#B9B2F3', '#9C93EE', '#877CEA', '#7265E6', '#6A5DE3', '#5F53DF', '#5549DB', '#4237D5'];
-  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
-  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
-  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
-  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+  let primaryColors = [
+    "#EEEDFC",
+    "#D5D1F8",
+    "#B9B2F3",
+    "#9C93EE",
+    "#877CEA",
+    "#7265E6",
+    "#6A5DE3",
+    "#5F53DF",
+    "#5549DB",
+    "#4237D5"
+  ];
+  let errorColors = ["#FDE8E7", "#F25E52", "#F04134", "#EE3B2F", "#E92A21"];
+  let warningColors = ["#FFF7E0", "#FFC926", "#FFBF00", "#FFB900", "#FFA900"];
+  let infoColors = ["#E0F4F5", "#26B0BA", "#00A2AE", "#009AA7", "#008694"];
+  let successColors = ["#E0F5EA", "#26B56E", "#00A854", "#00A04D", "#008D3A"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#222130', '#2b2946', '#37335a', '#443e78', '#554ca0', '#655ac8', '#9186dd', '#5F53DF', '#c3baf4', '#efecfb'];
-    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
-    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
-    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
-    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#222130",
+      "#2b2946",
+      "#37335a",
+      "#443e78",
+      "#554ca0",
+      "#655ac8",
+      "#9186dd",
+      "#5F53DF",
+      "#c3baf4",
+      "#efecfb"
+    ];
+    errorColors = ["#321d1d", "#7d2e28", "#d13c31", "#e66859", "#f8baaf"];
+    warningColors = ["#342c1a", "#836611", "#dda705", "#e9bf28", "#f8e577"];
+    infoColors = ["#1a2628", "#11595f", "#058e98", "#1ea6aa", "#64cfcb"];
+    successColors = ["#1a2721", "#115c36", "#05934c", "#1da65d", "#61ca8b"];
   }
 
   return {

src/themes/theme/theme3.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - DARK GREEN THEME3 ||============================== //
 
@@ -27,20 +27,42 @@ const Theme4 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#E6F3EC', '#84c297', '#5eb57d', '#3da866', '#1f9c53', '#068e44', '#006933', '#004222', '#001c0f', '#000000'];
-  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
-  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
-  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
-  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+  let primaryColors = [
+    "#E6F3EC",
+    "#84c297",
+    "#5eb57d",
+    "#3da866",
+    "#1f9c53",
+    "#068e44",
+    "#006933",
+    "#004222",
+    "#001c0f",
+    "#000000"
+  ];
+  let errorColors = ["#FDE8E7", "#F25E52", "#F04134", "#EE3B2F", "#E92A21"];
+  let warningColors = ["#FFF7E0", "#FFC926", "#FFBF00", "#FFB900", "#FFA900"];
+  let infoColors = ["#E0F4F5", "#26B0BA", "#00A2AE", "#009AA7", "#008694"];
+  let successColors = ["#E0F5EA", "#26B56E", "#00A854", "#00A04D", "#008D3A"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#1a231f', '#173123', '#174029', '#13502f', '#0e6737', '#0a7d3e', '#1f8f4e', '#3ba162', '#5cb07a', '#82bf95'];
-    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
-    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
-    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
-    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#1a231f",
+      "#173123",
+      "#174029",
+      "#13502f",
+      "#0e6737",
+      "#0a7d3e",
+      "#1f8f4e",
+      "#3ba162",
+      "#5cb07a",
+      "#82bf95"
+    ];
+    errorColors = ["#321d1d", "#7d2e28", "#d13c31", "#e66859", "#f8baaf"];
+    warningColors = ["#342c1a", "#836611", "#dda705", "#e9bf28", "#f8e577"];
+    infoColors = ["#1a2628", "#11595f", "#058e98", "#1ea6aa", "#64cfcb"];
+    successColors = ["#1a2721", "#115c36", "#05934c", "#1da65d", "#61ca8b"];
   }
 
   return {

src/themes/theme/theme4.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - DARK BLUE THEME4 ||============================== //
 
@@ -27,20 +27,42 @@ const Theme4 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#f0f6ff', '#edf4ff', '#bed3f7', '#8faeeb', '#6488de', '#3c64d0', '#2947ab', '#192f85', '#0d1b5e', '#070e38'];
-  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
-  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
-  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
-  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+  let primaryColors = [
+    "#f0f6ff",
+    "#edf4ff",
+    "#bed3f7",
+    "#8faeeb",
+    "#6488de",
+    "#3c64d0",
+    "#2947ab",
+    "#192f85",
+    "#0d1b5e",
+    "#070e38"
+  ];
+  let errorColors = ["#FDE8E7", "#F25E52", "#F04134", "#EE3B2F", "#E92A21"];
+  let warningColors = ["#FFF7E0", "#FFC926", "#FFBF00", "#FFB900", "#FFA900"];
+  let infoColors = ["#E0F4F5", "#26B0BA", "#00A2AE", "#009AA7", "#008694"];
+  let successColors = ["#E0F5EA", "#26B56E", "#00A854", "#00A04D", "#008D3A"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#1d212d', '#212841', '#273353', '#2c3e6e', '#324c92', '#385ab5', '#5d7dcb', '#89a7e1', '#b9cef0', '#e9f0fb'];
-    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
-    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
-    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
-    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#1d212d",
+      "#212841",
+      "#273353",
+      "#2c3e6e",
+      "#324c92",
+      "#385ab5",
+      "#5d7dcb",
+      "#89a7e1",
+      "#b9cef0",
+      "#e9f0fb"
+    ];
+    errorColors = ["#321d1d", "#7d2e28", "#d13c31", "#e66859", "#f8baaf"];
+    warningColors = ["#342c1a", "#836611", "#dda705", "#e9bf28", "#f8e577"];
+    infoColors = ["#1a2628", "#11595f", "#058e98", "#1ea6aa", "#64cfcb"];
+    successColors = ["#1a2721", "#115c36", "#05934c", "#1da65d", "#61ca8b"];
   }
 
   return {

src/themes/theme/theme5.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - ORANGE THEME5 ||============================== //
 
@@ -27,20 +27,42 @@ const Theme5 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#fff4e6', '#ffdfb8', '#ffc98f', '#ffb066', '#ff943d', '#f27013', '#cc5206', '#a63a00', '#802800', '#591900'];
-  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
-  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
-  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
-  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+  let primaryColors = [
+    "#fff4e6",
+    "#ffdfb8",
+    "#ffc98f",
+    "#ffb066",
+    "#ff943d",
+    "#f27013",
+    "#cc5206",
+    "#a63a00",
+    "#802800",
+    "#591900"
+  ];
+  let errorColors = ["#FDE8E7", "#F25E52", "#F04134", "#EE3B2F", "#E92A21"];
+  let warningColors = ["#FFF7E0", "#FFC926", "#FFBF00", "#FFB900", "#FFA900"];
+  let infoColors = ["#E0F4F5", "#26B0BA", "#00A2AE", "#009AA7", "#008694"];
+  let successColors = ["#E0F5EA", "#26B56E", "#00A854", "#00A04D", "#008D3A"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#32221a', '#4a2b18', '#5e371b', '#7d4319', '#a85317', '#d26415', '#e9883a', '#f4a962', '#f8c48c', '#fbdbb5'];
-    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
-    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
-    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
-    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#32221a",
+      "#4a2b18",
+      "#5e371b",
+      "#7d4319",
+      "#a85317",
+      "#d26415",
+      "#e9883a",
+      "#f4a962",
+      "#f8c48c",
+      "#fbdbb5"
+    ];
+    errorColors = ["#321d1d", "#7d2e28", "#d13c31", "#e66859", "#f8baaf"];
+    warningColors = ["#342c1a", "#836611", "#dda705", "#e9bf28", "#f8e577"];
+    infoColors = ["#1a2628", "#11595f", "#058e98", "#1ea6aa", "#64cfcb"];
+    successColors = ["#1a2721", "#115c36", "#05934c", "#1da65d", "#61ca8b"];
   }
 
   return {

src/themes/theme/theme6.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - TEAL THEME6 ||============================== //
 
@@ -27,20 +27,42 @@ const Theme6 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#e1f0ef', '#c8e3e2', '#9ad6d6', '#71c6c9', '#4bb5bd', '#2aa1af', '#1a7b8a', '#0e5563', '#06323d', '#021217'];
-  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
-  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
-  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
-  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+  let primaryColors = [
+    "#e1f0ef",
+    "#c8e3e2",
+    "#9ad6d6",
+    "#71c6c9",
+    "#4bb5bd",
+    "#2aa1af",
+    "#1a7b8a",
+    "#0e5563",
+    "#06323d",
+    "#021217"
+  ];
+  let errorColors = ["#FDE8E7", "#F25E52", "#F04134", "#EE3B2F", "#E92A21"];
+  let warningColors = ["#FFF7E0", "#FFC926", "#FFBF00", "#FFB900", "#FFA900"];
+  let infoColors = ["#E0F4F5", "#26B0BA", "#00A2AE", "#009AA7", "#008694"];
+  let successColors = ["#E0F5EA", "#26B56E", "#00A854", "#00A04D", "#008D3A"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#1c2628', '#1d3539', '#22454a', '#23595f', '#26737c', '#288d99', '#47a6ad', '#6dbec0', '#96d0d0', '#c5dfde'];
-    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
-    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
-    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
-    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#1c2628",
+      "#1d3539",
+      "#22454a",
+      "#23595f",
+      "#26737c",
+      "#288d99",
+      "#47a6ad",
+      "#6dbec0",
+      "#96d0d0",
+      "#c5dfde"
+    ];
+    errorColors = ["#321d1d", "#7d2e28", "#d13c31", "#e66859", "#f8baaf"];
+    warningColors = ["#342c1a", "#836611", "#dda705", "#e9bf28", "#f8e577"];
+    infoColors = ["#1a2628", "#11595f", "#058e98", "#1ea6aa", "#64cfcb"];
+    successColors = ["#1a2721", "#115c36", "#05934c", "#1da65d", "#61ca8b"];
   }
 
   return {

src/themes/theme/theme7.ts

@@ -1,8 +1,8 @@
 // types
-import { PaletteThemeProps } from 'types/theme';
-import { PalettesProps } from '@ant-design/colors';
-import { PaletteColorOptions } from '@mui/material/styles';
-import { ThemeMode } from 'types/config';
+import { PaletteThemeProps } from "@/types/theme";
+import { PalettesProps } from "@ant-design/colors";
+import { PaletteColorOptions } from "@mui/material/styles";
+import { ThemeMode } from "@/types/config";
 
 // ==============================|| PRESET THEME - GREEN THEME7 ||============================== //
 
@@ -27,20 +27,42 @@ const Theme7 = (colors: PalettesProps, mode: ThemeMode): PaletteThemeProps => {
     A700: grey[14],
     A800: grey[16]
   };
-  const contrastText = '#fff';
+  const contrastText = "#fff";
 
-  let primaryColors = ['#d1e8d99c', '#8cdba9', '#63cf8e', '#3ec277', '#1db564', '#00a854', '#008245', '#005c34', '#003620', '#000f0a'];
-  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
-  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
-  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
-  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+  let primaryColors = [
+    "#d1e8d99c",
+    "#8cdba9",
+    "#63cf8e",
+    "#3ec277",
+    "#1db564",
+    "#00a854",
+    "#008245",
+    "#005c34",
+    "#003620",
+    "#000f0a"
+  ];
+  let errorColors = ["#FDE8E7", "#F25E52", "#F04134", "#EE3B2F", "#E92A21"];
+  let warningColors = ["#FFF7E0", "#FFC926", "#FFBF00", "#FFB900", "#FFA900"];
+  let infoColors = ["#E0F4F5", "#26B0BA", "#00A2AE", "#009AA7", "#008694"];
+  let successColors = ["#E0F5EA", "#26B56E", "#00A854", "#00A04D", "#008D3A"];
 
-  if (mode === 'dark') {
-    primaryColors = ['#1a2721', '#173728', '#15472e', '#115c36', '#0b7841', '#05934c', '#1da65d', '#3cba73', '#61ca8b', '#8ad7a6'];
-    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
-    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
-    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
-    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  if (mode === "dark") {
+    primaryColors = [
+      "#1a2721",
+      "#173728",
+      "#15472e",
+      "#115c36",
+      "#0b7841",
+      "#05934c",
+      "#1da65d",
+      "#3cba73",
+      "#61ca8b",
+      "#8ad7a6"
+    ];
+    errorColors = ["#321d1d", "#7d2e28", "#d13c31", "#e66859", "#f8baaf"];
+    warningColors = ["#342c1a", "#836611", "#dda705", "#e9bf28", "#f8e577"];
+    infoColors = ["#1a2628", "#11595f", "#058e98", "#1ea6aa", "#64cfcb"];
+    successColors = ["#1a2721", "#115c36", "#05934c", "#1da65d", "#61ca8b"];
   }
 
   return {