diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml
index a56c446c0..5b39ca890 100644
--- a/.github/workflows/prod.yml
+++ b/.github/workflows/prod.yml
@@ -1,47 +1,47 @@
-name: Prod deploy
-
-# Controls when the action will run.
-on:
- # Triggers the workflow on push or pull request events but only for the master branch
- push:
- branches:
- - main
- pull_request:
- types:
- - closed
- branches:
- - main
-
-jobs:
- if_merged:
- if: github.event.pull_request.merged == true
- name: π Deploy
- runs-on: ubuntu-latest
-
- steps:
- - name: π Get latest code
- uses: actions/checkout@v4
-
- - name: Use Node.js 20
- uses: actions/setup-node@v4
- with:
- node-version: "20"
-
- - name: π¨ Build Project
- run: |
- cd vite
- corepack enable
- yarn set version 4.6.0
- yarn
- yarn build
-
- - name: π Deploy to Server
- uses: easingthemes/ssh-deploy@v4
- env:
- SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
- # ARGS: "-rltgoDzvO --delete"
- SOURCE: "vite/dist/"
- REMOTE_HOST: 192.34.62.123
- REMOTE_USER: berry
- TARGET: public_html/free
- EXCLUDE: "/vite/node_modules/"
+name: Prod deploy
+
+# Controls when the action will run.
+on:
+ # Triggers the workflow on push or pull request events but only for the master branch
+ push:
+ branches:
+ - main
+ pull_request:
+ types:
+ - closed
+ branches:
+ - main
+
+jobs:
+ if_merged:
+ if: github.event.pull_request.merged == true
+ name: π Deploy
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: π Get latest code
+ uses: actions/checkout@v4
+
+ - name: Use Node.js 20
+ uses: actions/setup-node@v4
+ with:
+ node-version: "20"
+
+ - name: π¨ Build Project
+ run: |
+ cd vite
+ corepack enable
+ yarn set version 4.6.0
+ yarn
+ yarn build
+
+ - name: π Deploy to Server
+ uses: easingthemes/ssh-deploy@v4
+ env:
+ SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
+ # ARGS: "-rltgoDzvO --delete"
+ SOURCE: "vite/dist/"
+ REMOTE_HOST: 192.34.62.123
+ REMOTE_USER: berry
+ TARGET: public_html/free
+ EXCLUDE: "/vite/node_modules/"
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..e147d3932
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+config.bat
+node_modules
diff --git a/LICENSE b/LICENSE
index 08a56d004..e48c004de 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 CodedThemes
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 CodedThemes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index f6b9d11ef..1e046fcbd 100644
--- a/README.md
+++ b/README.md
@@ -1,174 +1,174 @@
-# Berry Free React Material UI Admin Template [](https://twitter.com/intent/tweet?text=Get%20Berry%20React%20-%20The%20most%20beautiful%20Material%20designed%20Admin%20Dashboard%20Template%20&url=https://berrydashboard.com&via=codedthemes&hashtags=reactjs,webdev,developers,javascript)
-
-[](https://opensource.org/licenses/MIT)
-[](https://github.com/codedthemes/berry-free-react-admin-template/blob/main/LICENSE)
-[](https://github.com/codedthemes/berry-free-react-admin-template/)
-[](https://codedthemes.com/item/berry-mui-free-react-admin-template/)
-[](https://discord.com/invite/p2E2WhCb6s)
-
-Berry is a free Material UI admin dashboard template built with React. It is meant to provide the best possible User Experience with highly customizable feature-rich pages. It is a complete Dashboard Template that has easy and intuitive responsive design whether it is viewed on retina screens or laptops.
-
-β¨ Support us! If you like this theme, click the β (Top right) and let it shine
-
-
-
-## Table of contents
-
-- [Getting Started](#getting-started)
-- [Download](#download)
-- [Why Berry?](#why-berry)
-- [What's included in Premium Version?](#whats-included-in-premium-version)
-- [Documentation](#documentation)
-- [Browser support](#browser-support)
-- [Technology Stack](#technology-stack)
-- [Berry Figma UI Kit](#berry-figma-ui-kit)
-- [Other Technologies](#other-technologies)
-- π°[Save more with Big Bundle](#save-more-with-big-bundle)π°
-- [More React Dashboard Templates](#more-react-dashboard-templates)
-- [Issues?](#issues)
-- [License](#license)
-- [Contributor](#contributor)
-- [Useful Resources](#useful-resources)
-- [Community](#community)
-- [Follow us](#follow-us)
-
-## Getting Started
-
-Clone from Github
-
-```
-git clone https://github.com/codedthemes/berry-free-react-admin-template.git
-```
-
-## Download
-
-- Berry Free
- - [Live Preview](https://berrydashboard.com/free/)
- - [Download](https://github.com/codedthemes/berry-free-react-admin-template)
-- Berry
- - [Live Preview](https://berrydashboard.com)
- - [Download](https://material-ui.com/store/items/berry-react-material-admin/)
-
-## Why Berry?
-
-Berry offers everything you need to create dashboards. We have included the following high-end features in our initial release:
-
-- Modern aesthetics UI design
-- Material-UI components
-- Fully Responsive, all modern browser supported
-- Easy to use code structure
-- Flexible & High-Performance code
-- Easy Documentation Guide
-
-## What's included in Premium Version?
-
-[Pro version](https://berrydashboard.com) of Berry react template contains features like TypeScript, Next.js Seed versions, Apps, Authentication Methods (i.e. JWT, Auth0, Firebase, AWS, Supabase), Advance Components, Form Plugins, Layouts, Widgets, and many more.
-
-| [Berry Free](https://berrydashboard.com/free/) | [Berry](https://material-ui.com/store/items/berry-react-material-admin/) |
-| ---------------------------------------------- | :----------------------------------------------------------------------- |
-| **9** Demo pages | **45+** demo pages |
-| - | β Multi-language |
-| - | β Dark/Light Mode π |
-| - | β TypeScript version |
-| - | β Design files (Figma) |
-| - | β 6+ color Options |
-| - | β RTL |
-| - | β JWT, Firebase, Auth0, AWS, Supabase authentications |
-| - | β [More components](https://berrydashboard.com/components/autocomplete) |
-
-## Documentation
-
-[Berry Documentation](https://codedthemes.gitbook.io/berry/) helps you with installation, deployment, and troubleshooting.
-
-## Browser support
-
-
| [**Free**](https://codedthemes.com/item/berry-angular-free-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-angular-admin-dashboard-template/) |
-|
| [**Free**](https://codedthemes.com/item/berry-bootstrap-free-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-bootstrap-5-admin-template/) |
-|
| [**Free**](https://codedthemes.com/item/berry-free-vuetify-vuejs-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-vue-admin-dashboard/) |
-
-## Save more with Big Bundle
-
-[](https://links.codedthemes.com/jhFBJ)
-
-## More React Dashboard Templates
-
-| Dashboard | FREE | PRO |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|
| [**Free**](https://codedthemes.com/item/berry-angular-free-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-angular-admin-dashboard-template/) |
+|
| [**Free**](https://codedthemes.com/item/berry-bootstrap-free-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-bootstrap-5-admin-template/) |
+|
| [**Free**](https://codedthemes.com/item/berry-free-vuetify-vuejs-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-vue-admin-dashboard/) |
+
+## Save more with Big Bundle
+
+[](https://links.codedthemes.com/jhFBJ)
+
+## More React Dashboard Templates
+
+| Dashboard | FREE | PRO |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| Berry - React Material Free Admin Dashboard Template
- You need to enable JavaScript to run this app.
-
-
-
-
-
+
+
+
+ Berry - React Material Free Admin Dashboard Template
+ You need to enable JavaScript to run this app.
+
+
+
+
+
diff --git a/vite/package.json b/vite/package.json
index 4f7d0d140..e6a63c4fe 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -1,72 +1,72 @@
-{
- "name": "berry-material-react-js",
- "version": "4.1.0",
- "private": true,
- "dependencies": {
- "@emotion/react": "^11.14.0",
- "@emotion/styled": "^11.14.0",
- "@fontsource/inter": "5.2.5",
- "@fontsource/poppins": "5.2.6",
- "@fontsource/roboto": "5.2.5",
- "@mui/icons-material": "7.1.0",
- "@mui/material": "7.1.0",
- "@tabler/icons-react": "3.31.0",
- "@vitejs/plugin-react": "4.4.1",
- "apexcharts": "4.7.0",
- "framer-motion": "12.10.1",
- "lodash-es": "4.17.21",
- "material-ui-popup-state": "5.3.5",
- "react": "19.1.0",
- "react-apexcharts": "1.7.0",
- "react-dom": "19.1.0",
- "react-perfect-scrollbar": "1.5.8",
- "react-router": "7.5.3",
- "react-router-dom": "7.5.3",
- "slick-carousel": "1.8.1",
- "swr": "2.3.3",
- "vite": "6.3.5",
- "vite-jsconfig-paths": "2.0.1",
- "web-vitals": "5.0.0",
- "yup": "1.6.1"
- },
- "scripts": {
- "start": "vite",
- "build": "vite build",
- "preview": "vite preview",
- "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
- "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
- "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- },
- "devDependencies": {
- "@eslint/compat": "1.2.9",
- "@eslint/eslintrc": "3.3.1",
- "@eslint/js": "9.26.0",
- "eslint": "9.25.1",
- "eslint-config-prettier": "10.1.2",
- "eslint-plugin-jsx-a11y": "6.10.2",
- "eslint-plugin-prettier": "5.2.6",
- "eslint-plugin-react": "7.37.5",
- "eslint-plugin-react-hooks": "5.2.0",
- "prettier": "3.5.3",
- "sass": "1.87.0"
- },
- "packageManager": "yarn@4.9.1"
-}
+{
+ "name": "berry-material-react-js",
+ "version": "4.1.0",
+ "private": true,
+ "dependencies": {
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.0",
+ "@fontsource/inter": "5.2.5",
+ "@fontsource/poppins": "5.2.6",
+ "@fontsource/roboto": "5.2.5",
+ "@mui/icons-material": "7.1.0",
+ "@mui/material": "7.1.0",
+ "@tabler/icons-react": "3.31.0",
+ "@vitejs/plugin-react": "4.4.1",
+ "apexcharts": "4.7.0",
+ "framer-motion": "12.10.1",
+ "lodash-es": "4.17.21",
+ "material-ui-popup-state": "5.3.5",
+ "react": "19.1.0",
+ "react-apexcharts": "1.7.0",
+ "react-dom": "19.1.0",
+ "react-perfect-scrollbar": "1.5.8",
+ "react-router": "7.5.3",
+ "react-router-dom": "7.5.3",
+ "slick-carousel": "1.8.1",
+ "swr": "2.3.3",
+ "vite": "6.3.5",
+ "vite-jsconfig-paths": "2.0.1",
+ "web-vitals": "5.0.0",
+ "yup": "1.6.1"
+ },
+ "scripts": {
+ "start": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+ "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
+ "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "@eslint/compat": "1.2.9",
+ "@eslint/eslintrc": "3.3.1",
+ "@eslint/js": "9.26.0",
+ "eslint": "9.25.1",
+ "eslint-config-prettier": "10.1.2",
+ "eslint-plugin-jsx-a11y": "6.10.2",
+ "eslint-plugin-prettier": "5.2.6",
+ "eslint-plugin-react": "7.37.5",
+ "eslint-plugin-react-hooks": "5.2.0",
+ "prettier": "3.5.3",
+ "sass": "1.87.0"
+ },
+ "packageManager": "yarn@4.9.1"
+}
diff --git a/vite/src/api/menu.js b/vite/src/api/menu.js
index 9437922ae..1cc37cb8d 100644
--- a/vite/src/api/menu.js
+++ b/vite/src/api/menu.js
@@ -1,58 +1,58 @@
-import useSWR, { mutate } from 'swr';
-import { useMemo } from 'react';
-
-const initialState = {
- openedItem: 'dashboard',
- openedComponent: 'buttons',
- openedHorizontalItem: null,
- isDashboardDrawerOpened: false,
- isComponentDrawerOpened: true
-};
-
-export const endpoints = {
- key: 'api/menu',
- master: 'master',
- dashboard: '/dashboard' // server URL
-};
-
-export function useGetMenuMaster() {
- const { data, isLoading } = useSWR(endpoints.key + endpoints.master, () => initialState, {
- revalidateIfStale: false,
- revalidateOnFocus: false,
- revalidateOnReconnect: false
- });
-
- const memoizedValue = useMemo(
- () => ({
- menuMaster: data,
- menuMasterLoading: isLoading
- }),
- [data, isLoading]
- );
-
- return memoizedValue;
-}
-
-export function handlerDrawerOpen(isDashboardDrawerOpened) {
- // to update local state based on key
-
- mutate(
- endpoints.key + endpoints.master,
- (currentMenuMaster) => {
- return { ...currentMenuMaster, isDashboardDrawerOpened };
- },
- false
- );
-}
-
-export function handlerActiveItem(openedItem) {
- // to update local state based on key
-
- mutate(
- endpoints.key + endpoints.master,
- (currentMenuMaster) => {
- return { ...currentMenuMaster, openedItem };
- },
- false
- );
-}
+import useSWR, { mutate } from 'swr';
+import { useMemo } from 'react';
+
+const initialState = {
+ openedItem: 'dashboard',
+ openedComponent: 'buttons',
+ openedHorizontalItem: null,
+ isDashboardDrawerOpened: false,
+ isComponentDrawerOpened: true
+};
+
+export const endpoints = {
+ key: 'api/menu',
+ master: 'master',
+ dashboard: '/dashboard' // server URL
+};
+
+export function useGetMenuMaster() {
+ const { data, isLoading } = useSWR(endpoints.key + endpoints.master, () => initialState, {
+ revalidateIfStale: false,
+ revalidateOnFocus: false,
+ revalidateOnReconnect: false
+ });
+
+ const memoizedValue = useMemo(
+ () => ({
+ menuMaster: data,
+ menuMasterLoading: isLoading
+ }),
+ [data, isLoading]
+ );
+
+ return memoizedValue;
+}
+
+export function handlerDrawerOpen(isDashboardDrawerOpened) {
+ // to update local state based on key
+
+ mutate(
+ endpoints.key + endpoints.master,
+ (currentMenuMaster) => {
+ return { ...currentMenuMaster, isDashboardDrawerOpened };
+ },
+ false
+ );
+}
+
+export function handlerActiveItem(openedItem) {
+ // to update local state based on key
+
+ mutate(
+ endpoints.key + endpoints.master,
+ (currentMenuMaster) => {
+ return { ...currentMenuMaster, openedItem };
+ },
+ false
+ );
+}
diff --git a/vite/src/assets/scss/_themes-vars.module.scss b/vite/src/assets/scss/_themes-vars.module.scss
index 45f9489e5..fcae577fa 100644
--- a/vite/src/assets/scss/_themes-vars.module.scss
+++ b/vite/src/assets/scss/_themes-vars.module.scss
@@ -1,157 +1,157 @@
-// paper & background
-$paper: #ffffff;
-
-// primary
-$primaryLight: #e3f2fd;
-$primaryMain: #2196f3;
-$primaryDark: #1e88e5;
-$primary200: #90caf9;
-$primary800: #1565c0;
-
-// secondary
-$secondaryLight: #ede7f6;
-$secondaryMain: #673ab7;
-$secondaryDark: #5e35b1;
-$secondary200: #b39ddb;
-$secondary800: #4527a0;
-
-// success Colors
-$successLight: #b9f6ca;
-$success200: #69f0ae;
-$successMain: #00e676;
-$successDark: #00c853;
-
-// error
-$errorLight: #ef9a9a;
-$errorMain: #f44336;
-$errorDark: #c62828;
-
-// orange
-$orangeLight: #fbe9e7;
-$orangeMain: #ffab91;
-$orangeDark: #d84315;
-
-// warning
-$warningLight: #fff8e1;
-$warningMain: #ffe57f;
-$warningDark: #ffc107;
-
-// grey
-$grey50: #f8fafc;
-$grey100: #eef2f6;
-$grey200: #e3e8ef;
-$grey300: #cdd5df;
-$grey500: #697586;
-$grey600: #4b5565;
-$grey700: #364152;
-$grey900: #121926;
-
-// ==============================|| DARK THEME VARIANTS ||============================== //
-
-// paper & background
-$darkBackground: #1a223f; // level 3
-$darkPaper: #111936; // level 4
-
-// dark 800 & 900
-$darkLevel1: #29314f; // level 1
-$darkLevel2: #212946; // level 2
-
-// primary dark
-$darkPrimaryLight: #e3f2fd;
-$darkPrimaryMain: #2196f3;
-$darkPrimaryDark: #1e88e5;
-$darkPrimary200: #90caf9;
-$darkPrimary800: #1565c0;
-
-// secondary dark
-$darkSecondaryLight: #d1c4e9;
-$darkSecondaryMain: #7c4dff;
-$darkSecondaryDark: #651fff;
-$darkSecondary200: #b39ddb;
-$darkSecondary800: #6200ea;
-
-// text variants
-$darkTextTitle: #d7dcec;
-$darkTextPrimary: #bdc8f0;
-$darkTextSecondary: #8492c4;
-
-// ==============================|| JAVASCRIPT ||============================== //
-
-:export {
- // paper & background
- paper: $paper;
-
- // primary
- primaryLight: $primaryLight;
- primary200: $primary200;
- primaryMain: $primaryMain;
- primaryDark: $primaryDark;
- primary800: $primary800;
-
- // secondary
- secondaryLight: $secondaryLight;
- secondary200: $secondary200;
- secondaryMain: $secondaryMain;
- secondaryDark: $secondaryDark;
- secondary800: $secondary800;
-
- // success
- successLight: $successLight;
- success200: $success200;
- successMain: $successMain;
- successDark: $successDark;
-
- // error
- errorLight: $errorLight;
- errorMain: $errorMain;
- errorDark: $errorDark;
-
- // orange
- orangeLight: $orangeLight;
- orangeMain: $orangeMain;
- orangeDark: $orangeDark;
-
- // warning
- warningLight: $warningLight;
- warningMain: $warningMain;
- warningDark: $warningDark;
-
- // grey
- grey50: $grey50;
- grey100: $grey100;
- grey200: $grey200;
- grey300: $grey300;
- grey500: $grey500;
- grey600: $grey600;
- grey700: $grey700;
- grey900: $grey900;
-
- // ==============================|| DARK THEME VARIANTS ||============================== //
-
- // paper & background
- darkPaper: $darkPaper;
- darkBackground: $darkBackground;
-
- // dark 800 & 900
- darkLevel1: $darkLevel1;
- darkLevel2: $darkLevel2;
-
- // text variants
- darkTextTitle: $darkTextTitle;
- darkTextPrimary: $darkTextPrimary;
- darkTextSecondary: $darkTextSecondary;
-
- // primary dark
- darkPrimaryLight: $darkPrimaryLight;
- darkPrimaryMain: $darkPrimaryMain;
- darkPrimaryDark: $darkPrimaryDark;
- darkPrimary200: $darkPrimary200;
- darkPrimary800: $darkPrimary800;
-
- // secondary dark
- darkSecondaryLight: $darkSecondaryLight;
- darkSecondaryMain: $darkSecondaryMain;
- darkSecondaryDark: $darkSecondaryDark;
- darkSecondary200: $darkSecondary200;
- darkSecondary800: $darkSecondary800;
-}
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e3f2fd;
+$primaryMain: #2196f3;
+$primaryDark: #1e88e5;
+$primary200: #90caf9;
+$primary800: #1565c0;
+
+// secondary
+$secondaryLight: #ede7f6;
+$secondaryMain: #673ab7;
+$secondaryDark: #5e35b1;
+$secondary200: #b39ddb;
+$secondary800: #4527a0;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #f8fafc;
+$grey100: #eef2f6;
+$grey200: #e3e8ef;
+$grey300: #cdd5df;
+$grey500: #697586;
+$grey600: #4b5565;
+$grey700: #364152;
+$grey900: #121926;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #1a223f; // level 3
+$darkPaper: #111936; // level 4
+
+// dark 800 & 900
+$darkLevel1: #29314f; // level 1
+$darkLevel2: #212946; // level 2
+
+// primary dark
+$darkPrimaryLight: #e3f2fd;
+$darkPrimaryMain: #2196f3;
+$darkPrimaryDark: #1e88e5;
+$darkPrimary200: #90caf9;
+$darkPrimary800: #1565c0;
+
+// secondary dark
+$darkSecondaryLight: #d1c4e9;
+$darkSecondaryMain: #7c4dff;
+$darkSecondaryDark: #651fff;
+$darkSecondary200: #b39ddb;
+$darkSecondary800: #6200ea;
+
+// text variants
+$darkTextTitle: #d7dcec;
+$darkTextPrimary: #bdc8f0;
+$darkTextSecondary: #8492c4;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+ // paper & background
+ paper: $paper;
+
+ // primary
+ primaryLight: $primaryLight;
+ primary200: $primary200;
+ primaryMain: $primaryMain;
+ primaryDark: $primaryDark;
+ primary800: $primary800;
+
+ // secondary
+ secondaryLight: $secondaryLight;
+ secondary200: $secondary200;
+ secondaryMain: $secondaryMain;
+ secondaryDark: $secondaryDark;
+ secondary800: $secondary800;
+
+ // success
+ successLight: $successLight;
+ success200: $success200;
+ successMain: $successMain;
+ successDark: $successDark;
+
+ // error
+ errorLight: $errorLight;
+ errorMain: $errorMain;
+ errorDark: $errorDark;
+
+ // orange
+ orangeLight: $orangeLight;
+ orangeMain: $orangeMain;
+ orangeDark: $orangeDark;
+
+ // warning
+ warningLight: $warningLight;
+ warningMain: $warningMain;
+ warningDark: $warningDark;
+
+ // grey
+ grey50: $grey50;
+ grey100: $grey100;
+ grey200: $grey200;
+ grey300: $grey300;
+ grey500: $grey500;
+ grey600: $grey600;
+ grey700: $grey700;
+ grey900: $grey900;
+
+ // ==============================|| DARK THEME VARIANTS ||============================== //
+
+ // paper & background
+ darkPaper: $darkPaper;
+ darkBackground: $darkBackground;
+
+ // dark 800 & 900
+ darkLevel1: $darkLevel1;
+ darkLevel2: $darkLevel2;
+
+ // text variants
+ darkTextTitle: $darkTextTitle;
+ darkTextPrimary: $darkTextPrimary;
+ darkTextSecondary: $darkTextSecondary;
+
+ // primary dark
+ darkPrimaryLight: $darkPrimaryLight;
+ darkPrimaryMain: $darkPrimaryMain;
+ darkPrimaryDark: $darkPrimaryDark;
+ darkPrimary200: $darkPrimary200;
+ darkPrimary800: $darkPrimary800;
+
+ // secondary dark
+ darkSecondaryLight: $darkSecondaryLight;
+ darkSecondaryMain: $darkSecondaryMain;
+ darkSecondaryDark: $darkSecondaryDark;
+ darkSecondary200: $darkSecondary200;
+ darkSecondary800: $darkSecondary800;
+}
diff --git a/vite/src/assets/scss/style.scss b/vite/src/assets/scss/style.scss
index d676ba495..60b8990d4 100644
--- a/vite/src/assets/scss/style.scss
+++ b/vite/src/assets/scss/style.scss
@@ -1,148 +1,148 @@
-// color variants
-@use 'themes-vars.module.scss' as *;
-
-// third party
-@use 'react-perfect-scrollbar/dist/css/styles.css';
-
-// ==============================|| TAP HIGHLIGHT ||============================== //
-
-* {
- -webkit-tap-highlight-color: transparent !important;
-}
-
-// ==============================|| APEXCHART ||============================== //
-
-.apexcharts-legend-series .apexcharts-legend-marker {
- left: -4px !important;
- right: -4px !important;
-}
-
-.apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series,
-.apexcharts-legend.apx-legend-position-top .apexcharts-legend-series {
- gap: 8px;
-}
-
-.apexcharts-canvas {
- .apexcharts-tooltip-series-group.apexcharts-active,
- .apexcharts-tooltip-series-group:last-child {
- padding-bottom: 0;
- }
-}
-
-.apexcharts-legend-series {
- align-items: center;
- display: flex;
- gap: 8px;
-}
-
-// ==============================|| PERFECT SCROLLBAR ||============================== //
-
-.scrollbar-container {
- .ps__rail-y {
- &:hover > .ps__thumb-y,
- &:focus > .ps__thumb-y,
- &.ps--clicking .ps__thumb-y {
- background-color: $grey500;
- width: 5px;
- }
- }
- .ps__thumb-y {
- background-color: $grey500;
- border-radius: 6px;
- width: 5px;
- right: 0;
- }
-}
-
-.scrollbar-container.ps,
-.scrollbar-container > .ps {
- &.ps--active-y > .ps__rail-y {
- width: 5px;
- background-color: transparent !important;
- z-index: 999;
- &:hover,
- &.ps--clicking {
- width: 5px;
- background-color: transparent;
- }
- }
- &.ps--scrolling-y > .ps__rail-y,
- &.ps--scrolling-x > .ps__rail-x {
- opacity: 0.4;
- background-color: transparent;
- }
-}
-
-// ==============================|| ANIMATION KEYFRAMES ||============================== //
-
-@keyframes wings {
- 50% {
- transform: translateY(-40px);
- }
- 100% {
- transform: translateY(0px);
- }
-}
-
-@keyframes blink {
- 50% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes bounce {
- 0%,
- 20%,
- 53%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: translateZ(0);
- }
- 40%,
- 43% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: translate3d(0, -5px, 0);
- }
- 70% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: translate3d(0, -7px, 0);
- }
- 80% {
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: translateZ(0);
- }
- 90% {
- transform: translate3d(0, -2px, 0);
- }
-}
-
-@keyframes slideY {
- 0%,
- 50%,
- 100% {
- transform: translateY(0px);
- }
- 25% {
- transform: translateY(-10px);
- }
- 75% {
- transform: translateY(10px);
- }
-}
-
-@keyframes slideX {
- 0%,
- 50%,
- 100% {
- transform: translateX(0px);
- }
- 25% {
- transform: translateX(-10px);
- }
- 75% {
- transform: translateX(10px);
- }
-}
+// color variants
+@use 'themes-vars.module.scss' as *;
+
+// third party
+@use 'react-perfect-scrollbar/dist/css/styles.css';
+
+// ==============================|| TAP HIGHLIGHT ||============================== //
+
+* {
+ -webkit-tap-highlight-color: transparent !important;
+}
+
+// ==============================|| APEXCHART ||============================== //
+
+.apexcharts-legend-series .apexcharts-legend-marker {
+ left: -4px !important;
+ right: -4px !important;
+}
+
+.apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series,
+.apexcharts-legend.apx-legend-position-top .apexcharts-legend-series {
+ gap: 8px;
+}
+
+.apexcharts-canvas {
+ .apexcharts-tooltip-series-group.apexcharts-active,
+ .apexcharts-tooltip-series-group:last-child {
+ padding-bottom: 0;
+ }
+}
+
+.apexcharts-legend-series {
+ align-items: center;
+ display: flex;
+ gap: 8px;
+}
+
+// ==============================|| PERFECT SCROLLBAR ||============================== //
+
+.scrollbar-container {
+ .ps__rail-y {
+ &:hover > .ps__thumb-y,
+ &:focus > .ps__thumb-y,
+ &.ps--clicking .ps__thumb-y {
+ background-color: $grey500;
+ width: 5px;
+ }
+ }
+ .ps__thumb-y {
+ background-color: $grey500;
+ border-radius: 6px;
+ width: 5px;
+ right: 0;
+ }
+}
+
+.scrollbar-container.ps,
+.scrollbar-container > .ps {
+ &.ps--active-y > .ps__rail-y {
+ width: 5px;
+ background-color: transparent !important;
+ z-index: 999;
+ &:hover,
+ &.ps--clicking {
+ width: 5px;
+ background-color: transparent;
+ }
+ }
+ &.ps--scrolling-y > .ps__rail-y,
+ &.ps--scrolling-x > .ps__rail-x {
+ opacity: 0.4;
+ background-color: transparent;
+ }
+}
+
+// ==============================|| ANIMATION KEYFRAMES ||============================== //
+
+@keyframes wings {
+ 50% {
+ transform: translateY(-40px);
+ }
+ 100% {
+ transform: translateY(0px);
+ }
+}
+
+@keyframes blink {
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes bounce {
+ 0%,
+ 20%,
+ 53%,
+ to {
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translateZ(0);
+ }
+ 40%,
+ 43% {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -5px, 0);
+ }
+ 70% {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -7px, 0);
+ }
+ 80% {
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translateZ(0);
+ }
+ 90% {
+ transform: translate3d(0, -2px, 0);
+ }
+}
+
+@keyframes slideY {
+ 0%,
+ 50%,
+ 100% {
+ transform: translateY(0px);
+ }
+ 25% {
+ transform: translateY(-10px);
+ }
+ 75% {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes slideX {
+ 0%,
+ 50%,
+ 100% {
+ transform: translateX(0px);
+ }
+ 25% {
+ transform: translateX(-10px);
+ }
+ 75% {
+ transform: translateX(10px);
+ }
+}
diff --git a/vite/src/config.js b/vite/src/config.js
index b1d154917..363a6724b 100644
--- a/vite/src/config.js
+++ b/vite/src/config.js
@@ -1,8 +1,8 @@
-export const DASHBOARD_PATH = '/sample-page';
-
-const config = {
- fontFamily: `'Roboto', sans-serif`,
- borderRadius: 8
-};
-
-export default config;
+export const DASHBOARD_PATH = '/sample-page';
+
+const config = {
+ fontFamily: `'Roboto', sans-serif`,
+ borderRadius: 8
+};
+
+export default config;
diff --git a/vite/src/contexts/ConfigContext.jsx b/vite/src/contexts/ConfigContext.jsx
index eec296100..1052e01af 100644
--- a/vite/src/contexts/ConfigContext.jsx
+++ b/vite/src/contexts/ConfigContext.jsx
@@ -1,60 +1,60 @@
-import PropTypes from 'prop-types';
-import { createContext } from 'react';
-
-// project imports
-import defaultConfig from 'config';
-import useLocalStorage from 'hooks/useLocalStorage';
-
-// initial state
-const initialState = {
- ...defaultConfig,
- onChangeFontFamily: () => {},
- onChangeBorderRadius: () => {},
- onReset: () => {}
-};
-
-// ==============================|| CONFIG CONTEXT & PROVIDER ||============================== //
-
-const ConfigContext = createContext(initialState);
-
-function ConfigProvider({ children }) {
- const [config, setConfig] = useLocalStorage('berry-config-vite-ts', {
- fontFamily: initialState.fontFamily,
- borderRadius: initialState.borderRadius
- });
-
- const onChangeFontFamily = (fontFamily) => {
- setConfig({
- ...config,
- fontFamily
- });
- };
-
- const onChangeBorderRadius = (event, newValue) => {
- setConfig({
- ...config,
- borderRadius: newValue
- });
- };
-
- const onReset = () => {
- setConfig({ ...defaultConfig });
- };
-
- return (
-
- {children}
-
- );
-}
-
-export { ConfigProvider, ConfigContext };
-
-ConfigProvider.propTypes = { children: PropTypes.node };
+import PropTypes from 'prop-types';
+import { createContext } from 'react';
+
+// project imports
+import defaultConfig from 'config';
+import useLocalStorage from 'hooks/useLocalStorage';
+
+// initial state
+const initialState = {
+ ...defaultConfig,
+ onChangeFontFamily: () => {},
+ onChangeBorderRadius: () => {},
+ onReset: () => {}
+};
+
+// ==============================|| CONFIG CONTEXT & PROVIDER ||============================== //
+
+const ConfigContext = createContext(initialState);
+
+function ConfigProvider({ children }) {
+ const [config, setConfig] = useLocalStorage('berry-config-vite-ts', {
+ fontFamily: initialState.fontFamily,
+ borderRadius: initialState.borderRadius
+ });
+
+ const onChangeFontFamily = (fontFamily) => {
+ setConfig({
+ ...config,
+ fontFamily
+ });
+ };
+
+ const onChangeBorderRadius = (event, newValue) => {
+ setConfig({
+ ...config,
+ borderRadius: newValue
+ });
+ };
+
+ const onReset = () => {
+ setConfig({ ...defaultConfig });
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export { ConfigProvider, ConfigContext };
+
+ConfigProvider.propTypes = { children: PropTypes.node };
diff --git a/vite/src/hooks/useConfig.js b/vite/src/hooks/useConfig.js
index 6789aecc5..cbbf62ffb 100644
--- a/vite/src/hooks/useConfig.js
+++ b/vite/src/hooks/useConfig.js
@@ -1,8 +1,8 @@
-import { useContext } from 'react';
-import { ConfigContext } from 'contexts/ConfigContext';
-
-// ==============================|| CONFIG - HOOKS ||============================== //
-
-export default function useConfig() {
- return useContext(ConfigContext);
-}
+import { useContext } from 'react';
+import { ConfigContext } from 'contexts/ConfigContext';
+
+// ==============================|| CONFIG - HOOKS ||============================== //
+
+export default function useConfig() {
+ return useContext(ConfigContext);
+}
diff --git a/vite/src/hooks/useLocalStorage.js b/vite/src/hooks/useLocalStorage.js
index c042f7866..eeaaa1a05 100644
--- a/vite/src/hooks/useLocalStorage.js
+++ b/vite/src/hooks/useLocalStorage.js
@@ -1,33 +1,33 @@
-import { useState, useEffect } from 'react';
-
-// ==============================|| HOOKS - LOCAL STORAGE ||============================== //
-
-export default function useLocalStorage(key, defaultValue) {
- const [value, setValue] = useState(() => {
- const storedValue = localStorage.getItem(key);
- return storedValue === null ? defaultValue : JSON.parse(storedValue);
- });
-
- useEffect(() => {
- const listener = (e) => {
- if (e.storageArea === localStorage && e.key === key) {
- setValue(e.newValue ? JSON.parse(e.newValue) : e.newValue);
- }
- };
- window.addEventListener('storage', listener);
-
- return () => {
- window.removeEventListener('storage', listener);
- };
- }, [key, defaultValue]);
-
- const setValueInLocalStorage = (newValue) => {
- setValue((currentValue) => {
- const result = typeof newValue === 'function' ? newValue(currentValue) : newValue;
- localStorage.setItem(key, JSON.stringify(result));
- return result;
- });
- };
-
- return [value, setValueInLocalStorage];
-}
+import { useState, useEffect } from 'react';
+
+// ==============================|| HOOKS - LOCAL STORAGE ||============================== //
+
+export default function useLocalStorage(key, defaultValue) {
+ const [value, setValue] = useState(() => {
+ const storedValue = localStorage.getItem(key);
+ return storedValue === null ? defaultValue : JSON.parse(storedValue);
+ });
+
+ useEffect(() => {
+ const listener = (e) => {
+ if (e.storageArea === localStorage && e.key === key) {
+ setValue(e.newValue ? JSON.parse(e.newValue) : e.newValue);
+ }
+ };
+ window.addEventListener('storage', listener);
+
+ return () => {
+ window.removeEventListener('storage', listener);
+ };
+ }, [key, defaultValue]);
+
+ const setValueInLocalStorage = (newValue) => {
+ setValue((currentValue) => {
+ const result = typeof newValue === 'function' ? newValue(currentValue) : newValue;
+ localStorage.setItem(key, JSON.stringify(result));
+ return result;
+ });
+ };
+
+ return [value, setValueInLocalStorage];
+}
diff --git a/vite/src/layout/Customization/BorderRadius.jsx b/vite/src/layout/Customization/BorderRadius.jsx
index 5c8b46a75..84b1ceaee 100644
--- a/vite/src/layout/Customization/BorderRadius.jsx
+++ b/vite/src/layout/Customization/BorderRadius.jsx
@@ -1,49 +1,49 @@
-// material-ui
-import Grid from '@mui/material/Grid';
-import Slider from '@mui/material/Slider';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-
-// project imports
-import useConfig from 'hooks/useConfig';
-
-// concat 'px'
-function valueText(value) {
- return `${value}px`;
-}
-
-export default function BorderRadius() {
- const { borderRadius, onChangeBorderRadius } = useConfig();
-
- return (
-
- BORDER RADIUS
-
-
- 4px
-
-
-
-
- 24px
-
-
-
- );
-}
+// material-ui
+import Grid from '@mui/material/Grid';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+
+// concat 'px'
+function valueText(value) {
+ return `${value}px`;
+}
+
+export default function BorderRadius() {
+ const { borderRadius, onChangeBorderRadius } = useConfig();
+
+ return (
+
+ BORDER RADIUS
+
+
+ 4px
+
+
+
+
+ 24px
+
+
+
+ );
+}
diff --git a/vite/src/layout/Customization/FontFamily.jsx b/vite/src/layout/Customization/FontFamily.jsx
index dd698d9cd..ae18e9b23 100644
--- a/vite/src/layout/Customization/FontFamily.jsx
+++ b/vite/src/layout/Customization/FontFamily.jsx
@@ -1,77 +1,77 @@
-// material-ui
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Grid from '@mui/material/Grid';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-
-// project imports
-import useConfig from 'hooks/useConfig';
-import MainCard from 'ui-component/cards/MainCard';
-
-// ==============================|| CUSTOMIZATION - FONT FAMILY ||============================== //
-
-export default function FontFamilyPage() {
- const { fontFamily, onChangeFontFamily } = useConfig();
-
- const handleFontChange = (event) => {
- onChangeFontFamily(event.target.value);
- };
-
- const fonts = [
- {
- id: 'inter',
- value: `'Inter', sans-serif`,
- label: 'Inter'
- },
- {
- id: 'poppins',
- value: `'Poppins', sans-serif`,
- label: 'Poppins'
- },
- {
- id: 'roboto',
- value: `'Roboto', sans-serif`,
- label: 'Roboto'
- }
- ];
-
- const bgColor = 'grey.50';
- const bgActiveColor = 'primary.light';
-
- return (
-
- FONT STYLE
-
-
- {fonts.map((item, index) => (
-
-
-
-
- {item.label}
-
- }
- />
-
-
-
- ))}
-
-
-
- );
-}
+// material-ui
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Grid from '@mui/material/Grid';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import MainCard from 'ui-component/cards/MainCard';
+
+// ==============================|| CUSTOMIZATION - FONT FAMILY ||============================== //
+
+export default function FontFamilyPage() {
+ const { fontFamily, onChangeFontFamily } = useConfig();
+
+ const handleFontChange = (event) => {
+ onChangeFontFamily(event.target.value);
+ };
+
+ const fonts = [
+ {
+ id: 'inter',
+ value: `'Inter', sans-serif`,
+ label: 'Inter'
+ },
+ {
+ id: 'poppins',
+ value: `'Poppins', sans-serif`,
+ label: 'Poppins'
+ },
+ {
+ id: 'roboto',
+ value: `'Roboto', sans-serif`,
+ label: 'Roboto'
+ }
+ ];
+
+ const bgColor = 'grey.50';
+ const bgActiveColor = 'primary.light';
+
+ return (
+
+ FONT STYLE
+
+
+ {fonts.map((item, index) => (
+
+
+
+
+ {item.label}
+
+ }
+ />
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/vite/src/layout/Customization/index.jsx b/vite/src/layout/Customization/index.jsx
index 98915cc8a..1de96a806 100644
--- a/vite/src/layout/Customization/index.jsx
+++ b/vite/src/layout/Customization/index.jsx
@@ -1,82 +1,82 @@
-import { useState } from 'react';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import Divider from '@mui/material/Divider';
-import Drawer from '@mui/material/Drawer';
-import Fab from '@mui/material/Fab';
-import Grid from '@mui/material/Grid';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-
-// third party
-import PerfectScrollbar from 'react-perfect-scrollbar';
-
-// project imports
-import FontFamily from './FontFamily';
-import BorderRadius from './BorderRadius';
-
-import AnimateButton from 'ui-component/extended/AnimateButton';
-
-// assets
-import { IconSettings } from '@tabler/icons-react';
-// ==============================|| LIVE CUSTOMIZATION ||============================== //
-
-export default function Customization() {
- const theme = useTheme();
-
- // drawer on/off
- const [open, setOpen] = useState(false);
- const handleToggle = () => {
- setOpen(!open);
- };
-
- return (
- <>
- {/* toggle button */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* font family */}
-
-
- {/* border radius */}
-
-
-
-
-
- );
-}
+import { useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import Fab from '@mui/material/Fab';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+// third party
+import PerfectScrollbar from 'react-perfect-scrollbar';
+
+// project imports
+import FontFamily from './FontFamily';
+import BorderRadius from './BorderRadius';
+
+import AnimateButton from 'ui-component/extended/AnimateButton';
+
+// assets
+import { IconSettings } from '@tabler/icons-react';
+// ==============================|| LIVE CUSTOMIZATION ||============================== //
+
+export default function Customization() {
+ const theme = useTheme();
+
+ // drawer on/off
+ const [open, setOpen] = useState(false);
+ const handleToggle = () => {
+ setOpen(!open);
+ };
+
+ return (
+ <>
+ {/* toggle button */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* font family */}
+
+
+ {/* border radius */}
+
+
+
+
+
+ );
+}
diff --git a/vite/src/layout/MainLayout/Footer.jsx b/vite/src/layout/MainLayout/Footer.jsx
index 273a96b5a..f3c1bd500 100644
--- a/vite/src/layout/MainLayout/Footer.jsx
+++ b/vite/src/layout/MainLayout/Footer.jsx
@@ -1,49 +1,49 @@
-import { Link as RouterLink } from 'react-router-dom';
-
-// material-ui
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-
-export default function Footer() {
- return (
-
-
- © All rights reserved{' '}
-
- CodedThemes
-
-
-
-
-
- );
-}
+import { Link as RouterLink } from 'react-router-dom';
+
+// material-ui
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+export default function Footer() {
+ return (
+
+
+ © All rights reserved{' '}
+
+ CodedThemes
+
+
+
+
+
+ );
+}
diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
index c9e9b2c35..60e872fc6 100644
--- a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
+++ b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
@@ -1,181 +1,181 @@
-import PropTypes from 'prop-types';
-
-// material-ui
-import { alpha, useTheme } from '@mui/material/styles';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import Chip from '@mui/material/Chip';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-// assets
-import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons-react';
-import User1 from 'assets/images/users/user-round.svg';
-
-function ListItemWrapper({ children }) {
- const theme = useTheme();
-
- return (
-
- {children}
-
- );
-}
-
-// ==============================|| NOTIFICATION LIST ITEM ||============================== //
-
-export default function NotificationList() {
- const containerSX = { pl: 7 };
-
- return (
-
-
-
- 2 min ago
-
- }
- >
-
-
-
-
- It is a long established fact that a reader will be distracted
-
-
-
-
-
-
- 2 min ago
-
- }
- >
-
-
-
-
- Store Verification Done} />
-
-
- We have successfully received your request.
-
-
-
-
- 2 min ago
-
- }
- >
-
-
-
-
- Check Your Mail.} />
-
-
- All done! Now check your inbox as you're in for a sweet treat!
-
-
-
-
- 2 min ago
-
- }
- >
-
-
- John Doe} />
-
-
-
- Uploaded two file on
-
- 21 Jan 2020
-
-
-
-
- demo.jpg
-
-
-
-
-
-
- 2 min ago
-
- }
- >
-
-
- John Doe} />
-
-
- It is a long established fact that a reader will be distracted
-
-
-
- );
-}
-
-ListItemWrapper.propTypes = { children: PropTypes.node };
+import PropTypes from 'prop-types';
+
+// material-ui
+import { alpha, useTheme } from '@mui/material/styles';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Chip from '@mui/material/Chip';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+// assets
+import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons-react';
+import User1 from 'assets/images/users/user-round.svg';
+
+function ListItemWrapper({ children }) {
+ const theme = useTheme();
+
+ return (
+
+ {children}
+
+ );
+}
+
+// ==============================|| NOTIFICATION LIST ITEM ||============================== //
+
+export default function NotificationList() {
+ const containerSX = { pl: 7 };
+
+ return (
+
+
+
+ 2 min ago
+
+ }
+ >
+
+
+
+
+ It is a long established fact that a reader will be distracted
+
+
+
+
+
+
+ 2 min ago
+
+ }
+ >
+
+
+
+
+ Store Verification Done} />
+
+
+ We have successfully received your request.
+
+
+
+
+ 2 min ago
+
+ }
+ >
+
+
+
+
+ Check Your Mail.} />
+
+
+ All done! Now check your inbox as you're in for a sweet treat!
+
+
+
+
+ 2 min ago
+
+ }
+ >
+
+
+ John Doe} />
+
+
+
+ Uploaded two file on
+
+ 21 Jan 2020
+
+
+
+
+ demo.jpg
+
+
+
+
+
+
+ 2 min ago
+
+ }
+ >
+
+
+ John Doe} />
+
+
+ It is a long established fact that a reader will be distracted
+
+
+
+ );
+}
+
+ListItemWrapper.propTypes = { children: PropTypes.node };
diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
index 1a700e145..265ad6f97 100644
--- a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
+++ b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
@@ -1,199 +1,199 @@
-import { useEffect, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CardActions from '@mui/material/CardActions';
-import Chip from '@mui/material/Chip';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-// project imports
-import MainCard from 'ui-component/cards/MainCard';
-import Transitions from 'ui-component/extended/Transitions';
-import NotificationList from './NotificationList';
-
-// assets
-import { IconBell } from '@tabler/icons-react';
-
-// notification status options
-const status = [
- {
- value: 'all',
- label: 'All Notification'
- },
- {
- value: 'new',
- label: 'New'
- },
- {
- value: 'unread',
- label: 'Unread'
- },
- {
- value: 'other',
- label: 'Other'
- }
-];
-
-// ==============================|| NOTIFICATION ||============================== //
-
-export default function NotificationSection() {
- const theme = useTheme();
- const downMD = useMediaQuery(theme.breakpoints.down('md'));
-
- const [open, setOpen] = useState(false);
- const [value, setValue] = useState('');
-
- /**
- * anchorRef is used on different componets and specifying one type leads to other components throwing an error
- * */
- const anchorRef = useRef(null);
-
- const handleToggle = () => {
- setOpen((prevOpen) => !prevOpen);
- };
-
- const handleClose = (event) => {
- if (anchorRef.current && anchorRef.current.contains(event.target)) {
- return;
- }
- setOpen(false);
- };
-
- const prevOpen = useRef(open);
- useEffect(() => {
- if (prevOpen.current === true && open === false) {
- anchorRef.current.focus();
- }
- prevOpen.current = open;
- }, [open]);
-
- const handleChange = (event) => {
- event?.target.value && setValue(event?.target.value);
- };
-
- return (
- <>
-
-
-
-
-
- {({ TransitionProps }) => (
-
-
-
- {open && (
-
-
-
-
-
-
- All Notification
-
-
-
-
- Mark as all read
-
-
-
-
-
-
-
-
-
-
- {status.map((option) => (
-
- {option.label}
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
- View All
-
-
-
- )}
-
-
-
- )}
-
-
- );
-}
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CardActions from '@mui/material/CardActions';
+import Chip from '@mui/material/Chip';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import Transitions from 'ui-component/extended/Transitions';
+import NotificationList from './NotificationList';
+
+// assets
+import { IconBell } from '@tabler/icons-react';
+
+// notification status options
+const status = [
+ {
+ value: 'all',
+ label: 'All Notification'
+ },
+ {
+ value: 'new',
+ label: 'New'
+ },
+ {
+ value: 'unread',
+ label: 'Unread'
+ },
+ {
+ value: 'other',
+ label: 'Other'
+ }
+];
+
+// ==============================|| NOTIFICATION ||============================== //
+
+export default function NotificationSection() {
+ const theme = useTheme();
+ const downMD = useMediaQuery(theme.breakpoints.down('md'));
+
+ const [open, setOpen] = useState(false);
+ const [value, setValue] = useState('');
+
+ /**
+ * anchorRef is used on different componets and specifying one type leads to other components throwing an error
+ * */
+ const anchorRef = useRef(null);
+
+ const handleToggle = () => {
+ setOpen((prevOpen) => !prevOpen);
+ };
+
+ const handleClose = (event) => {
+ if (anchorRef.current && anchorRef.current.contains(event.target)) {
+ return;
+ }
+ setOpen(false);
+ };
+
+ const prevOpen = useRef(open);
+ useEffect(() => {
+ if (prevOpen.current === true && open === false) {
+ anchorRef.current.focus();
+ }
+ prevOpen.current = open;
+ }, [open]);
+
+ const handleChange = (event) => {
+ event?.target.value && setValue(event?.target.value);
+ };
+
+ return (
+ <>
+
+
+
+
+
+ {({ TransitionProps }) => (
+
+
+
+ {open && (
+
+
+
+
+
+
+ All Notification
+
+
+
+
+ Mark as all read
+
+
+
+
+
+
+
+
+
+
+ {status.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ View All
+
+
+
+ )}
+
+
+
+ )}
+
+
+ );
+}
diff --git a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
index 18b13a4a3..cffd15961 100644
--- a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
+++ b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
@@ -1,73 +1,73 @@
-// material-ui
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Grid from '@mui/material/Grid';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-
-// project imports
-import AnimateButton from 'ui-component/extended/AnimateButton';
-
-// ==============================|| PROFILE MENU - UPGRADE PLAN CARD ||============================== //
-
-export default function UpgradePlanCard() {
- const cardSX = {
- content: '""',
- position: 'absolute',
- width: 200,
- height: 200,
- borderColor: 'warning.main'
- };
-
- return (
-
-
-
-
- Upgrade your plan
-
-
-
- 70% discount for 1 years
-
-
-
-
-
- Go Premium
-
-
-
-
-
-
-
-
- );
-}
+// material-ui
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+// project imports
+import AnimateButton from 'ui-component/extended/AnimateButton';
+
+// ==============================|| PROFILE MENU - UPGRADE PLAN CARD ||============================== //
+
+export default function UpgradePlanCard() {
+ const cardSX = {
+ content: '""',
+ position: 'absolute',
+ width: 200,
+ height: 200,
+ borderColor: 'warning.main'
+ };
+
+ return (
+
+
+
+
+ Upgrade your plan
+
+
+
+ 70% discount for 1 years
+
+
+
+
+
+ Go Premium
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/vite/src/layout/MainLayout/Header/ProfileSection/index.jsx b/vite/src/layout/MainLayout/Header/ProfileSection/index.jsx
index c414cf63d..95677e407 100644
--- a/vite/src/layout/MainLayout/Header/ProfileSection/index.jsx
+++ b/vite/src/layout/MainLayout/Header/ProfileSection/index.jsx
@@ -1,261 +1,261 @@
-import { useEffect, useRef, useState } from 'react';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import Avatar from '@mui/material/Avatar';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import InputAdornment from '@mui/material/InputAdornment';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
-import Stack from '@mui/material/Stack';
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-// project imports
-import UpgradePlanCard from './UpgradePlanCard';
-import MainCard from 'ui-component/cards/MainCard';
-import Transitions from 'ui-component/extended/Transitions';
-import useConfig from 'hooks/useConfig';
-
-// assets
-import User1 from 'assets/images/users/user-round.svg';
-import { IconLogout, IconSearch, IconSettings, IconUser } from '@tabler/icons-react';
-
-// ==============================|| PROFILE MENU ||============================== //
-
-export default function ProfileSection() {
- const theme = useTheme();
- const { borderRadius } = useConfig();
- const [sdm, setSdm] = useState(true);
- const [value, setValue] = useState('');
- const [notification, setNotification] = useState(false);
- const [selectedIndex] = useState(-1);
- const [open, setOpen] = useState(false);
-
- /**
- * anchorRef is used on different components and specifying one type leads to other components throwing an error
- * */
- const anchorRef = useRef(null);
-
- const handleToggle = () => {
- setOpen((prevOpen) => !prevOpen);
- };
-
- const handleClose = (event) => {
- if (anchorRef.current && anchorRef.current.contains(event.target)) {
- return;
- }
-
- setOpen(false);
- };
-
- const prevOpen = useRef(open);
- useEffect(() => {
- if (prevOpen.current === true && open === false) {
- anchorRef.current.focus();
- }
-
- prevOpen.current = open;
- }, [open]);
-
- return (
- <>
-
- {({ TransitionProps }) => (
-
-
-
- {open && (
-
-
-
-
- Good Morning,
-
- Johne Doe
-
-
- Project Admin
-
- setValue(e.target.value)}
- placeholder="Search profile options"
- startAdornment={
-
-
- }
- aria-describedby="search-helper-text"
- slotProps={{ input: { 'aria-label': 'weight' } }}
- />
-
-
-
-
-
-
-
-
- Start DND Mode
-
-
- setSdm(e.target.checked)}
- name="sdm"
- size="small"
- />
-
-
-
-
-
-
- Allow Notifications
-
-
- setNotification(e.target.checked)}
- name="sdm"
- size="small"
- />
-
-
-
-
-
-
-
-
-
-
- Account Settings} />
-
-
-
-
-
-
- Social Profile
-
-
-
-
- }
- />
-
-
-
-
- Logout} />
-
-
-
-
- )}
-
-
-
- )}
-
-
- );
-}
+import { useEffect, useRef, useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import Avatar from '@mui/material/Avatar';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import InputAdornment from '@mui/material/InputAdornment';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+// project imports
+import UpgradePlanCard from './UpgradePlanCard';
+import MainCard from 'ui-component/cards/MainCard';
+import Transitions from 'ui-component/extended/Transitions';
+import useConfig from 'hooks/useConfig';
+
+// assets
+import User1 from 'assets/images/users/user-round.svg';
+import { IconLogout, IconSearch, IconSettings, IconUser } from '@tabler/icons-react';
+
+// ==============================|| PROFILE MENU ||============================== //
+
+export default function ProfileSection() {
+ const theme = useTheme();
+ const { borderRadius } = useConfig();
+ const [sdm, setSdm] = useState(true);
+ const [value, setValue] = useState('');
+ const [notification, setNotification] = useState(false);
+ const [selectedIndex] = useState(-1);
+ const [open, setOpen] = useState(false);
+
+ /**
+ * anchorRef is used on different components and specifying one type leads to other components throwing an error
+ * */
+ const anchorRef = useRef(null);
+
+ const handleToggle = () => {
+ setOpen((prevOpen) => !prevOpen);
+ };
+
+ const handleClose = (event) => {
+ if (anchorRef.current && anchorRef.current.contains(event.target)) {
+ return;
+ }
+
+ setOpen(false);
+ };
+
+ const prevOpen = useRef(open);
+ useEffect(() => {
+ if (prevOpen.current === true && open === false) {
+ anchorRef.current.focus();
+ }
+
+ prevOpen.current = open;
+ }, [open]);
+
+ return (
+ <>
+
+ {({ TransitionProps }) => (
+
+
+
+ {open && (
+
+
+
+
+ Good Morning,
+
+ Johne Doe
+
+
+ Project Admin
+
+ setValue(e.target.value)}
+ placeholder="Search profile options"
+ startAdornment={
+
+
+ }
+ aria-describedby="search-helper-text"
+ slotProps={{ input: { 'aria-label': 'weight' } }}
+ />
+
+
+
+
+
+
+
+
+ Start DND Mode
+
+
+ setSdm(e.target.checked)}
+ name="sdm"
+ size="small"
+ />
+
+
+
+
+
+
+ Allow Notifications
+
+
+ setNotification(e.target.checked)}
+ name="sdm"
+ size="small"
+ />
+
+
+
+
+
+
+
+
+
+
+ Account Settings} />
+
+
+
+
+
+
+ Social Profile
+
+
+
+
+ }
+ />
+
+
+
+
+ Logout} />
+
+
+
+
+ )}
+
+
+
+ )}
+
+
+ );
+}
diff --git a/vite/src/layout/MainLayout/Header/SearchSection/index.jsx b/vite/src/layout/MainLayout/Header/SearchSection/index.jsx
index fc7654284..df54aacc9 100644
--- a/vite/src/layout/MainLayout/Header/SearchSection/index.jsx
+++ b/vite/src/layout/MainLayout/Header/SearchSection/index.jsx
@@ -1,167 +1,167 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-
-// material-ui
-import { useTheme } from '@mui/material/styles';
-import Avatar from '@mui/material/Avatar';
-import Card from '@mui/material/Card';
-import Grid from '@mui/material/Grid';
-import InputAdornment from '@mui/material/InputAdornment';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Popper from '@mui/material/Popper';
-import Box from '@mui/material/Box';
-
-// third party
-import PopupState, { bindPopper, bindToggle } from 'material-ui-popup-state';
-
-// project imports
-import Transitions from 'ui-component/extended/Transitions';
-
-// assets
-import { IconAdjustmentsHorizontal, IconSearch, IconX } from '@tabler/icons-react';
-
-function HeaderAvatarComponent({ children, ref, ...others }) {
- const theme = useTheme();
-
- return (
-
- {children}
-
- );
-}
-
-const HeaderAvatar = HeaderAvatarComponent;
-
-// ==============================|| SEARCH INPUT - MOBILE||============================== //
-
-function MobileSearch({ value, setValue, popupState }) {
- const theme = useTheme();
-
- return (
- 
-
-
- 
-
-
-
-## Technology Stack
-
-- [Material UI V7](https://material-ui.com/)
-- [React 19](https://react.dev/)
-- Built with React Hooks API
-- Redux & React Context API for State Management
-- React Router for Navigation Routing
-- Support of vite
-- Code Splitting
-- CSS-in-JS where CSS is composed using JavaScript instead of defined in external files
-
-## Berry Figma UI Kit
-
-
-
-## Other Technologies
-
-| Technology | Free | Pro |
-| --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
-| 
| [**Free**](https://mantisdashboard.io/free/) | [**Pro**](https://mui.com/store/items/mantis-react-admin-dashboard-template/) |
-| 
| [**Free**](https://codedthemes.com/item/datta-able-react-free-admin-template/) | [**Pro**](https://codedthemes.com/item/datta-able-react-admin-template/) |
-| 
| [**Free**](https://codedthemes.com/item/gradient-able-reactjs-free-admin-template/) | [**Pro**](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/) |
-
-## Issues
-
-To report a bug, please submit an [issue](https://github.com/codedthemes/berry-free-react-admin-template/issues) on Github. We will respond as soon as possible to resolve the issue.
-
-## License
-
-- Licensed cover under [MIT](https://github.com/codedthemes/berry-free-react-admin-template/blob/main/LICENSE)
-
-## Contributor
-
-**CodedThemes Team**
-
-- https://x.com/codedthemes
-- https://github.com/codedthemes
-
-**Rakesh Nakrani**
-
-- https://x.com/rakesh_nakrani
-
-**Brijesh Dobariya**
-
-- https://x.com/dobaria_brijesh
-
-## Useful Resources
-
-- [More Admin Templates From CodedThemes](https://codedthemes.com/item/category/admin-templates/)
-- [Freebies From CodedThemes](https://codedthemes.com/item/category/free-templates/)
-- [Big Bundles](https://codedthemes.com/item/big-bundle/)
-- [Figma UI Kits](https://codedthemes.com/item/category/templates/figma/)
-- [Affiliate Program](https://codedthemes.com/affiliate/)
-- [Blogs](https://blog.codedthemes.com/)
-
-## Community
-
-- π₯Follow [@codedthemes](https://x.com/codedthemes)
-- πJoin [Discord](https://discord.com/invite/p2E2WhCb6s)
-- πSubscribe to [Codedtheme Blogs](https://blog.codedthemes.com/)
-
-## Follow us
-
-- [Twitter](https://twitter.com/codedthemes) π¦
-- [Dribbble](https://dribbble.com/codedthemes) π
-- [Github](https://github.com/codedthemes) π
-- [LinkedIn](https://www.linkedin.com/company/codedthemes/) πΌ
-- [Instagram](https://www.instagram.com/codedthemes/) π·
-- [Facebook](https://www.facebook.com/codedthemes) π¦
+# Berry Free React Material UI Admin Template [](https://twitter.com/intent/tweet?text=Get%20Berry%20React%20-%20The%20most%20beautiful%20Material%20designed%20Admin%20Dashboard%20Template%20&url=https://berrydashboard.com&via=codedthemes&hashtags=reactjs,webdev,developers,javascript)
+
+[](https://opensource.org/licenses/MIT)
+[](https://github.com/codedthemes/berry-free-react-admin-template/blob/main/LICENSE)
+[](https://github.com/codedthemes/berry-free-react-admin-template/)
+[](https://codedthemes.com/item/berry-mui-free-react-admin-template/)
+[](https://discord.com/invite/p2E2WhCb6s)
+
+Berry is a free Material UI admin dashboard template built with React. It is meant to provide the best possible User Experience with highly customizable feature-rich pages. It is a complete Dashboard Template that has easy and intuitive responsive design whether it is viewed on retina screens or laptops.
+
+β¨ Support us! If you like this theme, click the β (Top right) and let it shine
+
+
+
+## Table of contents
+
+- [Getting Started](#getting-started)
+- [Download](#download)
+- [Why Berry?](#why-berry)
+- [What's included in Premium Version?](#whats-included-in-premium-version)
+- [Documentation](#documentation)
+- [Browser support](#browser-support)
+- [Technology Stack](#technology-stack)
+- [Berry Figma UI Kit](#berry-figma-ui-kit)
+- [Other Technologies](#other-technologies)
+- π°[Save more with Big Bundle](#save-more-with-big-bundle)π°
+- [More React Dashboard Templates](#more-react-dashboard-templates)
+- [Issues?](#issues)
+- [License](#license)
+- [Contributor](#contributor)
+- [Useful Resources](#useful-resources)
+- [Community](#community)
+- [Follow us](#follow-us)
+
+## Getting Started
+
+Clone from Github
+
+```
+git clone https://github.com/codedthemes/berry-free-react-admin-template.git
+```
+
+## Download
+
+- Berry Free
+ - [Live Preview](https://berrydashboard.com/free/)
+ - [Download](https://github.com/codedthemes/berry-free-react-admin-template)
+- Berry
+ - [Live Preview](https://berrydashboard.com)
+ - [Download](https://material-ui.com/store/items/berry-react-material-admin/)
+
+## Why Berry?
+
+Berry offers everything you need to create dashboards. We have included the following high-end features in our initial release:
+
+- Modern aesthetics UI design
+- Material-UI components
+- Fully Responsive, all modern browser supported
+- Easy to use code structure
+- Flexible & High-Performance code
+- Easy Documentation Guide
+
+## What's included in Premium Version?
+
+[Pro version](https://berrydashboard.com) of Berry react template contains features like TypeScript, Next.js Seed versions, Apps, Authentication Methods (i.e. JWT, Auth0, Firebase, AWS, Supabase), Advance Components, Form Plugins, Layouts, Widgets, and many more.
+
+| [Berry Free](https://berrydashboard.com/free/) | [Berry](https://material-ui.com/store/items/berry-react-material-admin/) |
+| ---------------------------------------------- | :----------------------------------------------------------------------- |
+| **9** Demo pages | **45+** demo pages |
+| - | β Multi-language |
+| - | β Dark/Light Mode π |
+| - | β TypeScript version |
+| - | β Design files (Figma) |
+| - | β 6+ color Options |
+| - | β RTL |
+| - | β JWT, Firebase, Auth0, AWS, Supabase authentications |
+| - | β [More components](https://berrydashboard.com/components/autocomplete) |
+
+## Documentation
+
+[Berry Documentation](https://codedthemes.gitbook.io/berry/) helps you with installation, deployment, and troubleshooting.
+
+## Browser support
+
+