diff --git a/.env b/.env index ad67f2d..27096e6 100644 --- a/.env +++ b/.env @@ -1,5 +1,8 @@ -VITE_APP_VERSION = v3.0.0 -GENERATE_SOURCEMAP = false - -PUBLIC_URL = https://codedthemes.com/demos/admin-templates/materially/react/free -VITE_APP_BASE_NAME = demos/admin-templates/materially/react/free \ No newline at end of file +VITE_APP_VERSION = v4.0.0 +GENERATE_SOURCEMAP = false + +PUBLIC_URL= https://codedthemes.com/demos/admin-templates/materially/react/free +VITE_APP_BASE_URL= /demos/admin-templates/materially/react/free + + + diff --git a/.env.qa b/.env.qa index 484587a..2f08f49 100644 --- a/.env.qa +++ b/.env.qa @@ -1,4 +1,8 @@ -REACT_APP_VERSION = v3.0.0 -GENERATE_SOURCEMAP = false -PUBLIC_URL = https://codedthemes.com/demos/admin-templates/materially/react/free/stage -VITE_APP_BASE_NAME = demos/admin-templates/materially/react/free/stage \ No newline at end of file +VITE_APP_VERSION=v4.0.0 +GENERATE_SOURCEMAP=false + +PUBLIC_URL = https://codedthemes.com/demos/admin-templates/materially/react/free/stage +VITE_APP_BASE_URL=/demos/admin-templates/materially/react/free/stage + +## Backend API URL +VITE_APP_API_URL=https://mock-data-api-nextjs.vercel.app/ diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 920d635..0000000 --- a/.eslintrc +++ /dev/null @@ -1,90 +0,0 @@ -{ - "root": true, - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "prettier", - "plugin:react/jsx-runtime", - "plugin:jsx-a11y/recommended", - "plugin:react-hooks/recommended", - "eslint:recommended", - "plugin:react/recommended" - ], - "settings": { - "react": { - "createClass": "createReactClass", // Regex for Component Factory to use, - // default to "createReactClass" - "pragma": "React", // Pragma to use, default to "React" - "fragment": "Fragment", // Fragment to use (may be a property of ), default to "Fragment" - "version": "detect", // React version. "detect" automatically picks the version you have installed. - // You can also use `16.0`, `16.3`, etc, if you want to override the detected value. - // It will default to "latest" and warn if missing, and to "detect" in the future - "flowVersion": "0.53" // Flow version - }, - "import/resolver": { - "node": { - "moduleDirectory": ["node_modules", "src/"] - } - } - }, - "parser": "@babel/eslint-parser", - "parserOptions": { - "ecmaFeatures": { - "experimentalObjectRestSpread": true, - "impliedStrict": true, - "jsx": true - }, - "ecmaVersion": 12 - }, - "plugins": ["prettier", "react", "react-hooks"], - "rules": { - "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error", - "react/react-in-jsx-scope": "off", - "no-undef": "off", - "react/display-name": "off", - "react/jsx-filename-extension": "off", - "no-param-reassign": "off", - "react/prop-types": "off", - "react/require-default-props": "off", - "react/no-array-index-key": "off", - "react/jsx-props-no-spreading": "off", - "react/forbid-prop-types": "off", - "import/order": "off", - "import/no-cycle": "off", - "no-console": "off", - "no-debugger": "off", - "jsx-a11y/anchor-is-valid": "off", - "prefer-destructuring": "off", - "no-shadow": "off", - "import/no-named-as-default": "off", - "import/no-extraneous-dependencies": "off", - "jsx-a11y/no-autofocus": "off", - "no-restricted-imports": [ - "error", - { - "patterns": ["@mui/*/*/*", "!@mui/material/test-utils/*"] - } - ], - "no-unused-vars": [ - "error", - { - "ignoreRestSiblings": false - } - ], - "prettier/prettier": [ - "warn", - { - "bracketSpacing": true, - "printWidth": 140, - "singleQuote": true, - "trailingComma": "none", - "tabWidth": 2, - "useTabs": false, - "endOfLine": "auto" - } - ] - } -} diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml index 6ad7445..ce36ca6 100644 --- a/.github/workflows/prod.yml +++ b/.github/workflows/prod.yml @@ -1,39 +1,41 @@ -name: Node - SSH 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 - -jobs: - SFTP-deploy: - 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.x' - - - name: πŸ”¨ Build Project - run: | - yarn - yarn build - - - name: πŸ“‚ Deploy to Server - uses: easingthemes/ssh-deploy@main - env: - SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} - # ARGS: "-rltgoDzvO --delete" - SOURCE: 'dist/' - REMOTE_HOST: 154.49.240.71 - REMOTE_USER: u778408432 - REMOTE_PORT: '65002' - TARGET: domains/codedthemes.com/public_html/demos/admin-templates/materially/react/free - EXCLUDE: '/dist/, /node_modules/' +name: Node - SSH 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 + +jobs: + SFTP-deploy: + name: πŸŽ‰ Deploy + runs-on: ubuntu-latest + + steps: + - name: 🚚 Get latest code + uses: actions/checkout@v4 + + - name: Use Node.js 22 + uses: actions/setup-node@v4 + with: + node-version: '22' + + - name: πŸ”¨ Build Project + run: | + corepack enable + yarn set version 4.9.1 + yarn + yarn build-stage + + - name: πŸ“‚ Deploy to Server + uses: easingthemes/ssh-deploy@main + env: + SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} + # ARGS: "-rltgoDzvO --delete" + SOURCE: 'dist/' + REMOTE_HOST: 91.108.116.107 + REMOTE_USER: u106957989 + REMOTE_PORT: '65002' + TARGET: domains/codedthemes.com/public_html/demos/admin-templates/materially/react/free + EXCLUDE: '/dist/, /node_modules/' diff --git a/.github/workflows/stage.yml b/.github/workflows/stage.yml index f0bf73e..d1c06fc 100644 --- a/.github/workflows/stage.yml +++ b/.github/workflows/stage.yml @@ -1,39 +1,41 @@ -name: Node - SSH 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: - - stage* - -jobs: - SFTP-deploy: - 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.x' - - - name: πŸ”¨ Build Project - run: | - yarn - yarn build-stage - - - name: πŸ“‚ Deploy to Server - uses: easingthemes/ssh-deploy@main - env: - SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} - # ARGS: "-rltgoDzvO --delete" - SOURCE: 'dist/' - REMOTE_HOST: 154.49.240.71 - REMOTE_USER: u778408432 - REMOTE_PORT: '65002' - TARGET: domains/codedthemes.com/public_html/demos/admin-templates/materially/react/free/stage - EXCLUDE: '/dist/, /node_modules/' +name: Node - SSH 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: + - stage* + +jobs: + SFTP-deploy: + name: πŸŽ‰ Deploy + runs-on: ubuntu-latest + + steps: + - name: 🚚 Get latest code + uses: actions/checkout@v4 + + - name: Use Node.js 22 + uses: actions/setup-node@v4 + with: + node-version: '22' + + - name: πŸ”¨ Build Project + run: | + corepack enable + yarn set version 4.9.1 + yarn + yarn build-stage + + - name: πŸ“‚ Deploy to Server + uses: easingthemes/ssh-deploy@main + env: + SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} + # ARGS: "-rltgoDzvO --delete" + SOURCE: 'dist/' + REMOTE_HOST: 91.108.116.107 + REMOTE_USER: u106957989 + REMOTE_PORT: '65002' + TARGET: domains/codedthemes.com/public_html/demos/admin-templates/materially/react/free/stage + EXCLUDE: '/dist/, /node_modules/' diff --git a/.gitignore b/.gitignore index 800f3a8..c762d85 100644 --- a/.gitignore +++ b/.gitignore @@ -1,24 +1,25 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build -/dist - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* +.yarn + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.prettierrc b/.prettierrc index 2e3fb88..5ff16a0 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,8 @@ -{ - "bracketSpacing": true, - "printWidth": 140, - "singleQuote": true, - "trailingComma": "none", - "tabWidth": 2, - "useTabs": false, - "endOfLine": "auto" -} +{ + "bracketSpacing": true, + "printWidth": 140, + "singleQuote": true, + "trailingComma": "none", + "tabWidth": 2, + "useTabs": false +} diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz deleted file mode 100644 index 5bfc34d..0000000 Binary files a/.yarn/install-state.gz and /dev/null differ diff --git a/.yarnrc.yml b/.yarnrc.yml index 3186f3f..0acb263 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1 +1 @@ -nodeLinker: node-modules +nodeLinker: node-modules diff --git a/LICENSE b/LICENSE index 08a56d0..e48c004 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 7895c27..3a7930e 100644 --- a/README.md +++ b/README.md @@ -1,169 +1,164 @@ -# Materially Free React Material UI Dashboard Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Download%20Materially%20React%20-%20The%20professional%20Material%20designed%20React%20Admin%20Dashboard%20Template%20&url=https://codedthemes.com/demos/admin-templates/materially/react/default&via=codedthemes&hashtags=reactjs,webdev,developers,javascript) - -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![GitHub package version](https://img.shields.io/github/package-json/v/codedthemes/materially-free-react-admin-template)](https://github.com/codedthemes/materially-free-react-admin-template/) -[![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/codedthemes/materially-free-react-admin-template/blob/main/LICENSE) -[![Download ZIP](https://img.shields.io/badge/Download-ZIP-blue?style=flat-square&logo=github)](https://codedthemes.com/item/materially-free-reactjs-admin-template/) -[![Join Discord](https://img.shields.io/badge/Join-Discord-5865F2?style=flat-square&logo=discord&logoColor=white)](https://discord.com/invite/p2E2WhCb6s) - -Materially is a free and open source React redux dashboard template made using the Material UI React component library with aim of flexibility and better customizability. - -✨ Support us! If you like this theme, click the ⭐ (Top right) and let it shine - -![IMG_8566.jpg](https://org-public-assets.s3.us-west-2.amazonaws.com/Free-Version-Banners/GITHUB-FREE-REACT-REPO%20-%20Materially.jpg) - - -## Table of contents - -- [Getting Started](#getting-started) -- [Download](#download) -- [Why Materially?](#why-materially) -- [What's included in Premium Version?](#whats-included-in-premium-version) -- [Documentation](#documentation) -- [Browser support](#browser-support) -- [Technology Stack](#technology-stack) -- πŸ’°[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 - -11. Clone from Github - -``` -git clone https://github.com/codedthemes/materially-free-react-admin-template.git -``` - -2. Install packages - -``` -yarn -``` - -3. Run project - -``` -yarn start -``` - -## Download - -- Materially Free - - [Live Preview](https://codedthemes.com/demos/admin-templates/materially/react/free/) - - [Download](https://github.com/codedthemes/materially-free-react-admin-template) -- Materially Pro - - [Live Preview](https://codedthemes.com/demos/admin-templates/materially/react/default) - - [Download](https://codedthemes.com/item/materially-reactjs-admin-dashboard/) - -## Why Materially? - -Materially offers everything needed to build an advanced dashboard application. In the initial release, we included following high-end features, - -- Support React18. -- Professional user interface. -- Material UI React components. -- Fully responsive, all modern browser supported. -- Easy to use code structure -- Flexible & high-Performance code -- Simple documentation - -## What's included in Premium Version? - -The [Pro version](https://codedthemes.com/demos/admin-templates/materially/react/default) of Materially react template includes features such as mutliple apps, authentication methods (i.e. JWT, Auth0, Firebase), advance components, form plugins, layouts, widgets, and more. - -| [Materially Free](https://codedthemes.com/demos/admin-templates/materially/react/free/) | [Materially Pro](https://codedthemes.com/demos/admin-templates/materially/react/default) | -| -------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **5** Demo pages | **100+** Demo pages | -| - | βœ“ Multi-Dashboard | -| - | βœ“ Dark/Light Mode πŸŒ“ | -| - | βœ“ RTL | -| - | βœ“ JWT, Firebase, Auth0 authentication | -| - | βœ“ [More components](https://codedthemes.com/demos/admin-templates/materially/react/default/basic/accordion) | -| βœ“ [MIT License](https://github.com/codedthemes/materially-free-react-admin-template/blob/main/LICENSE) | βœ“ [Pro License](https://codedthemes.com/item/materially-reactjs-admin-dashboard/) | - - -## Documentation - -[Materially React documentation](https://codedthemes.gitbook.io/materially-react-material-documentation/) helps you out in all aspects from Installation to deployment. - -## Browser support - - - -## Technology Stack - -- React (18.x) -- Material UI (5.x) -- SASS with JSS Powered -- Vite -- Redux toolkit -- React Router -- Firebase -- Auth0 -- JWT -- Localization - -## Save more with Big Bundle - -[![bundle-image](https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Bundle+banner.png)](https://links.codedthemes.com/jhFBJ) - -## More React Dashboard Templates - -| Dashboard | FREE | PRO | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| | [**Free**](https://codedthemes.com/item/berry-mui-free-react-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-material-react-admin-template/) | -| | [**Free**](https://codedthemes.com/item/mantis-free-mui-admin-template/) | [**Pro**](https://codedthemes.com/item/mantis-mui-react-dashboard-template/) | -| | [**Free**](https://codedthemes.com/item/datta-able-react-free-admin-template/) | [**Pro**](https://codedthemes.com/item/datta-able-react-admin-template/) | - -## Issues - -If you found a bug in any version, please generate a [GitHub issue](https://github.com/codedthemes/materially-free-react-admin-template/issues). We are trying our best to resolve the issue. - -## License - -- Licensed under [MIT](https://github.com/codedthemes/materially-free-react-admin-template/blob/main/LICENSE) -- Copyright Β© [CodedThemes](https://codedthemes.com/) - -## 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) 🟦 +# Materially Free React Material UI Dashboard Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Download%20Materially%20React%20-%20The%20professional%20Material%20designed%20React%20Admin%20Dashboard%20Template%20&url=https://codedthemes.com/demos/admin-templates/materially/react/default&via=codedthemes&hashtags=reactjs,webdev,developers,javascript) + +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +[![GitHub package version](https://img.shields.io/github/package-json/v/codedthemes/materially-free-react-admin-template)](https://github.com/codedthemes/materially-free-react-admin-template/) +[![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/codedthemes/materially-free-react-admin-template/blob/main/LICENSE) +[![Download ZIP](https://img.shields.io/badge/Download-ZIP-blue?style=flat-square&logo=github)](https://codedthemes.com/item/materially-free-reactjs-admin-template/) +[![Join Discord](https://img.shields.io/badge/Join-Discord-5865F2?style=flat-square&logo=discord&logoColor=white)](https://discord.com/invite/p2E2WhCb6s) + +Materially is a free and open source React redux dashboard template made using the Material UI React component library with aim of flexibility and better customizability. + +✨ Support us! If you like this theme, click the ⭐ (Top right) and let it shine + +![IMG_8566.jpg](https://org-public-assets.s3.us-west-2.amazonaws.com/Free-Version-Banners/GITHUB-FREE-REACT-REPO%20-%20Materially.jpg) + +## Table of contents + +- [Getting Started](#getting-started) +- [Download](#download) +- [Why Materially?](#why-materially) +- [What's included in Premium Version?](#whats-included-in-premium-version) +- [Documentation](#documentation) +- [Browser support](#browser-support) +- [Technology Stack](#technology-stack) +- πŸ’°[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 + +11. Clone from Github + +``` +git clone https://github.com/codedthemes/materially-free-react-admin-template.git +``` + +2. Install packages + +``` +yarn +``` + +3. Run project + +``` +yarn start +``` + +## Download + +- Materially Free + - [Live Preview](https://codedthemes.com/demos/admin-templates/materially/react/free/) + - [Download](https://github.com/codedthemes/materially-free-react-admin-template) +- Materially Pro + - [Live Preview](https://codedthemes.com/demos/admin-templates/materially/react/default) + - [Download](https://codedthemes.com/item/materially-reactjs-admin-dashboard/) + +## Why Materially? + +Materially offers everything needed to build an advanced dashboard application. In the initial release, we included following high-end features, + +- Support React 19. +- Professional user interface. +- Material UI React components. +- Fully responsive, all modern browser supported. +- Easy to use code structure +- Flexible & high-Performance code +- Simple documentation + +## What's included in Premium Version? + +The [Pro version](https://codedthemes.com/demos/admin-templates/materially/react/default) of Materially react template includes features such as multiple apps, advance components, form plugins, layouts, widgets, and more. + +| [Materially Free](https://codedthemes.com/demos/admin-templates/materially/react/free/) | [Materially Pro](https://codedthemes.com/demos/admin-templates/materially/react/default) | +| ------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- | +| **5** Demo pages | **100+** Demo pages | +| - | βœ“ 60+ Components | +| - | βœ“ Dark/Light Mode πŸŒ“ | +| - | βœ“ RTL | +| - | βœ“ Localization | +| - | βœ“ [More components](https://codedthemes.com/demos/admin-templates/materially/react/default/components/accordion) | +| βœ“ [MIT License](https://github.com/codedthemes/materially-free-react-admin-template/blob/main/LICENSE) | βœ“ [Pro License](https://codedthemes.com/item/materially-reactjs-admin-dashboard/) | + +## Documentation + +[Materially React Documentation](https://codedthemes.gitbook.io/materially-react-material-documentation/) helps you out in all aspects from Installation to deployment. + +## Browser support + + + +## Technology Stack + +- React (19) +- Material UI (7) +- SASS with JSS Powered +- Vite +- Redux toolkit +- React Router +- Localization + +## Save more with Big Bundle + +[![bundle-image](https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Bundle+banner.png)](https://links.codedthemes.com/jhFBJ) + +## More React Dashboard Templates + +| Dashboard | FREE | PRO | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | +| | [**Free**](https://codedthemes.com/item/berry-mui-free-react-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-material-react-admin-template/) | +| | [**Free**](https://codedthemes.com/item/mantis-free-mui-admin-template/) | [**Pro**](https://codedthemes.com/item/mantis-mui-react-dashboard-template/) | +| | [**Free**](https://codedthemes.com/item/datta-able-react-free-admin-template/) | [**Pro**](https://codedthemes.com/item/datta-able-react-admin-template/) | + +## Issues + +If you found a bug in any version, please generate a [GitHub issue](https://github.com/codedthemes/materially-free-react-admin-template/issues). We are trying our best to resolve the issue. + +## License + +- Licensed under [MIT](https://github.com/codedthemes/materially-free-react-admin-template/blob/main/LICENSE) +- Copyright Β© [CodedThemes](https://codedthemes.com/) + +## 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) 🟦 diff --git a/discord.html b/discord.html new file mode 100644 index 0000000..711cf61 --- /dev/null +++ b/discord.html @@ -0,0 +1,13 @@ + + + + Discord Community | Materially - Admin Dashboard Template + + + +

+ If you do not redirect please visit : + https://discord.com/invite/p2E2WhCb6s +

+ + diff --git a/documentation.html b/documentation.html new file mode 100644 index 0000000..de7a129 --- /dev/null +++ b/documentation.html @@ -0,0 +1,15 @@ + + + + Documentation + + + +

+ If you do not redirect please visit : + https://codedthemes.gitbook.io/materially-react-material-documentation/ +

+ + diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..03f07d4 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,99 @@ +import { fixupConfigRules } from '@eslint/compat'; +import prettier from 'eslint-plugin-prettier'; +import react from 'eslint-plugin-react'; +import reactHooks from 'eslint-plugin-react-hooks'; +import jsxA11y from 'eslint-plugin-jsx-a11y'; +import js from '@eslint/js'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { FlatCompat } from '@eslint/eslintrc'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const compat = new FlatCompat({ + baseDirectory: __dirname, + recommendedConfig: js.configs.recommended, + allConfig: js.configs.all +}); + +export default [ + ...fixupConfigRules(compat.extends('prettier')), + + { + plugins: { + prettier, + react, + 'react-hooks': reactHooks, + 'jsx-a11y': jsxA11y + }, + + languageOptions: { + ecmaVersion: 2020, + sourceType: 'module', + parserOptions: { + ecmaFeatures: { + jsx: true + } + } + }, + + settings: { + react: { + version: 'detect' + } + }, + + rules: { + 'react/jsx-filename-extension': 'off', + 'no-param-reassign': 'off', + 'react/prop-types': 'off', + 'react/require-default-props': 'off', + 'react/no-array-index-key': 'off', + 'react/react-in-jsx-scope': 'off', + 'react/jsx-props-no-spreading': 'off', + 'import/order': 'off', + 'no-console': 'off', + 'no-shadow': 'off', + 'import/no-cycle': 'off', + 'import/no-extraneous-dependencies': 'off', + 'jsx-a11y/label-has-associated-control': 'off', + 'jsx-a11y/no-autofocus': 'off', + 'react/jsx-uses-react': 'off', + 'react/jsx-uses-vars': 'error', + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', + 'no-unused-vars': 'off', + + 'no-restricted-imports': [ + 'error', + { + patterns: ['@mui/*/*/*', '!@mui/material/test-utils/*'] + } + ], + + 'no-unused-vars': [ + 'error', + { + vars: 'all', + args: 'none' + } + ], + + 'prettier/prettier': [ + 'warn', + { + bracketSpacing: true, + printWidth: 140, + singleQuote: true, + trailingComma: 'none', + tabWidth: 2, + useTabs: false + } + ] + } + }, + { + ignores: ['node_modules/**'], + files: ['src/**/*.{js,jsx}'] + } +]; \ No newline at end of file diff --git a/favicon.svg b/favicon.svg index 9644a8d..bcd7c94 100644 --- a/favicon.svg +++ b/favicon.svg @@ -1,46 +1,46 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index d95c87f..4c0096e 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,14 @@ - - - - - - - - - Materially | Material UI React Dashboard Template - - - - - - -
- - - - + + + + + + + + Materially | Material UI React Dashboard Template + + +
+ + + diff --git a/jsconfig.json b/jsconfig.json index 35332c7..2b5e1ac 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,9 +1,23 @@ -{ - "compilerOptions": { - "target": "esnext", - "module": "commonjs", - "baseUrl": "src" - }, - "include": ["src/**/*"], - "exclude": ["node_modules"] -} +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "baseUrl": "src" + }, + "exclude": ["node_modules", "eslint.config.mjs"], + "include": ["src", "**/*.js", "**/*.jsx", "src/**/*"], + "references": [{ "path": "./jsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/jsconfig.node.json similarity index 95% rename from tsconfig.node.json rename to jsconfig.node.json index 316cf37..895c123 100644 --- a/tsconfig.node.json +++ b/jsconfig.node.json @@ -1,9 +1,9 @@ -{ - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "Node", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.mjs"] -} +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.mjs"] +} diff --git a/package.json b/package.json index 4f0fae7..61345fd 100644 --- a/package.json +++ b/package.json @@ -1,83 +1,52 @@ -{ - "name": "materially-free-react-admin-template", - "version": "3.0.0", - "private": true, - "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", - "@mui/icons-material": "^5.15.15", - "@mui/lab": "^5.0.0-alpha.170", - "@mui/material": "^5.15.15", - "@mui/utils": "^5.15.14", - "@reduxjs/toolkit": "^2.2.3", - "@vitejs/plugin-react": "^4.2.1", - "apexcharts": "^3.49.0", - "formik": "^2.4.6", - "framer-motion": "^11.1.7", - "material-ui-popup-state": "^5.1.0", - "react": "^18.3.1", - "react-apexcharts": "^1.4.1", - "react-dom": "^18.3.1", - "react-perfect-scrollbar": "^1.5.8", - "react-redux": "^9.1.1", - "react-router": "^6.23.0", - "react-router-dom": "^6.23.0", - "vite": "^5.2.10", - "vite-jsconfig-paths": "^2.0.1", - "yup": "^1.4.0" - }, - "scripts": { - "start": "vite", - "build": "vite build", - "build-stage": "env-cmd -f .env.qa 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" - ] - }, - "babel": { - "presets": [ - "@babel/preset-react" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "@babel/core": "^7.24.5", - "@babel/eslint-parser": "^7.24.5", - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^15.0.5", - "@testing-library/user-event": "^14.5.2", - "env-cmd": "^10.1.0", - "eslint": "^8.56.0", - "eslint-config-prettier": "^9.1.0", - "eslint-config-react-app": "7.0.1", - "eslint-plugin-flowtype": "^8.0.3", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jsx-a11y": "^6.8.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.1", - "eslint-plugin-react-hooks": "^4.6.2", - "prettier": "^3.2.5", - "react-error-overlay": "^6.0.11", - "sass": "^1.70.0", - "vite-plugin-style-import": "^2.0.0" - } -} +{ + "name": "materially-free-react-admin-template", + "version": "4.0.0", + "license": "MIT", + "type": "module", + "scripts": { + "start": "vite", + "build": "vite build", + "build-stage": "env-cmd -f .env.qa 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}\"" + }, + "dependencies": { + "@emotion/cache": "11.14.0", + "@emotion/react": "11.14.0", + "@emotion/styled": "11.14.0", + "@fontsource/poppins": "5.2.6", + "@mui/icons-material": "7.1.0", + "@mui/material": "7.1.0", + "@vitejs/plugin-react": "4.4.1", + "apexcharts": "4.7.0", + "lodash-es": "4.17.21", + "react": "19.1.0", + "react-apexcharts": "1.7.0", + "react-device-detect": "2.2.3", + "react-dom": "19.1.0", + "react-hook-form": "7.56.4", + "react-router-dom": "7.6.0", + "simplebar-react": "3.3.1", + "swr": "2.3.3", + "vite": "6.3.5", + "vite-jsconfig-paths": "2.0.1" + }, + "devDependencies": { + "@eslint/compat": "1.2.9", + "@eslint/eslintrc": "3.3.1", + "@eslint/js": "9.27.0", + "env-cmd": "10.1.0", + "eslint": "9.27.0", + "eslint-config-prettier": "10.1.5", + "eslint-plugin-jsx-a11y": "6.10.2", + "eslint-plugin-prettier": "5.4.0", + "eslint-plugin-react": "7.37.5", + "eslint-plugin-react-hooks": "5.2.0", + "prettier": "3.5.3", + "prettier-eslint-cli": "8.0.1", + "sass-embedded": "1.89.0" + }, + "packageManager": "yarn@4.9.1" +} diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..bcd7c94 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..ce03b8c --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,16 @@ +import { RouterProvider } from 'react-router-dom'; + +// project imports +import ThemeCustomization from './themes'; + +import router from 'routes'; + +function App() { + return ( + + + + ); +} + +export default App; diff --git a/src/assets/images/logo-dark.svg b/src/assets/images/logo-dark.svg index bcc9cea..ac0f20c 100644 --- a/src/assets/images/logo-dark.svg +++ b/src/assets/images/logo-dark.svg @@ -1,47 +1,47 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg index 7401eb8..40aabcd 100644 --- a/src/assets/images/logo.svg +++ b/src/assets/images/logo.svg @@ -1,47 +1,47 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/sidebar.png b/src/assets/images/sidebar.png deleted file mode 100644 index a450a34..0000000 Binary files a/src/assets/images/sidebar.png and /dev/null differ diff --git a/src/assets/images/social-google.svg b/src/assets/images/social-google.svg index 2231ce9..71c89f5 100644 --- a/src/assets/images/social-google.svg +++ b/src/assets/images/social-google.svg @@ -1,6 +1,6 @@ - - - - - - + + + + + + diff --git a/src/assets/scss/_themes-vars.module.scss b/src/assets/scss/_themes-vars.module.scss deleted file mode 100644 index 9b8b3a9..0000000 --- a/src/assets/scss/_themes-vars.module.scss +++ /dev/null @@ -1,105 +0,0 @@ -$primary: #3366ff; -$primary100: #4c6fff; - -$primaryDark: #0043a9; -$primaryLight: #3380f4; - -$secondary: #425466; -$secondaryDark: #272f33; -$secondaryLight: #60696d; - -$error: #ff413a; -$errorDark: #a20e00; -$errorLight: #ec4333; - -$warning: #f4a100; -$warningDark: #aa7000; -$warningLight: #f6b333; - -$info: #00cfd5; -$infoDark: #009095; -$infoLight: #33d8dd; - -$success: #00ac69; -$successDark: #007849; -$successLight: #33bc87; - -$grey300: #425466; -$dark: #343a40; - -$bg100: #f8f8f9; - -// Text Colors -$textPrimary: #242c3a; -$textSecondary: #1b212c; -$textDark: #12171e; -$textHint: #00000061; - -// Text Dark Color -$textDarkPrimary: #bbc0c7; -$textDarkSecondary: #babfc9; -$textDarkDark: #fff; -$texDarkHint: #94919161; - -// Background Color -$background: #f0f2f8; -$backgoundDark: #181e2b; - -// Paper Color -$paper: #ffffff; -$paperDark: #232b38; - -$menuHover: #e3f2fd; - -// this will use in javascript -:export { - primary: $primary; - primaryDark: $primaryDark; - primaryLight: $primaryLight; - primary100: $primary100; - - secondary: $secondary; - secondaryDark: $secondaryDark; - secondaryDark: $secondaryDark; - - error: $error; - errorDark: $errorDark; - errorLight: $errorLight; - - warning: $warning; - warningDark: $warningDark; - warningLight: $warningLight; - - info: $info; - infoDark: $infoDark; - infoLight: $infoLight; - - success: $success; - successDark: $successDark; - successLight: $successLight; - - grey300: $grey300; - - bg100: $bg100; - - // Text Colors - textPrimary: $textPrimary; - textSecondary: $textSecondary; - textDark: $textDark; - textHint: $textHint; - - // Text Dark Colors - textDarkPrimary: $textDarkPrimary; - textDarkSecondary: $textDarkSecondary; - textDarkDark: $textDarkDark; - textDarkHint: $texDarkHint; - - // Background Color - background: $background; - backgoundDark: $backgoundDark; - - // Paper Color - paper: $paper; - paperDark: $paperDark; - menuHover: $menuHover; -} diff --git a/src/assets/scss/plugins/_plugins.scss b/src/assets/scss/plugins/_plugins.scss deleted file mode 100644 index 210d0ac..0000000 --- a/src/assets/scss/plugins/_plugins.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'react-perfect-scrollbar/dist/css/styles.css'; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss deleted file mode 100644 index 20ab92b..0000000 --- a/src/assets/scss/style.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import 'themes-vars.module.scss'; -@import 'plugins/plugins'; - -/* breadcrumb */ -.icon-breadcrumb { - margin-right: 5px; -} - -.link-breadcrumb { - font-size: 0.75rem; - display: flex; - text-decoration: none; -} - -/* card */ - -.card-header { - font-weight: 600 !important; - font-size: 15px; -} - -.apexcharts-legend-marker { - margin-right: 8px !important; -} - -.f-right { - float: right; -} -.p-0 { - padding: 0 !important; -} -.p-20 { - padding: 20px !important; -} - -.apexcharts-legend-text { - padding-right: 4px; -} - -.css-7blk3r-MuiButtonBase-root-MuiButton-root { - color: $textDarkDark !important; -} diff --git a/src/component/Breadcrumb/index.jsx b/src/component/Breadcrumb/index.jsx deleted file mode 100644 index 7d6055b..0000000 --- a/src/component/Breadcrumb/index.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { Card, CardContent, Typography, Divider, Box } from '@mui/material'; -import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; - -// ==============================|| BREADCRUMB ||============================== // - -const Breadcrumbs = ({ title, divider, isCard, ...rest }) => { - const theme = useTheme(); - - return ( - - - - {title && ( - - {title} - - )} - {divider === false && !isCard && } - {divider !== false && } - - - ); -}; - -Breadcrumbs.propTypes = { - title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - divider: PropTypes.bool, - isCard: PropTypes.string -}; - -export default Breadcrumbs; diff --git a/src/component/Loadable.jsx b/src/component/Loadable.jsx deleted file mode 100644 index 15572bb..0000000 --- a/src/component/Loadable.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Suspense } from 'react'; - -// project import -import Loader from './Loader/Loader'; - -// ==============================|| LOADABLE - LAZY LOADING ||============================== // - -const Loadable = (Component) => (props) => ( - }> - - -); - -export default Loadable; diff --git a/src/component/Loader/Loader.jsx b/src/component/Loader/Loader.jsx deleted file mode 100644 index 071a2e6..0000000 --- a/src/component/Loader/Loader.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -// material-ui -import { styled } from '@mui/material/styles'; -import LinearProgress from '@mui/material/LinearProgress'; - -// loader style -const LoaderWrapper = styled('div')(({ theme }) => ({ - position: 'fixed', - top: 0, - left: 0, - zIndex: 2001, - width: '100%', - '& > * + *': { - marginTop: theme.spacing(2) - } -})); - -// ==============================|| LOADER ||============================== // - -const Loader = () => { - return ( - - - - ); -}; - -export default Loader; diff --git a/src/components/Breadcrumbs.jsx b/src/components/Breadcrumbs.jsx new file mode 100644 index 0000000..51c30b4 --- /dev/null +++ b/src/components/Breadcrumbs.jsx @@ -0,0 +1,134 @@ +import PropTypes from 'prop-types'; +import { useEffect, useState } from 'react'; +import { Link, useLocation } from 'react-router-dom'; + +import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; +import Divider from '@mui/material/Divider'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +// project imports +import { APP_DEFAULT_PATH } from 'config'; +import menuItems from 'menu-items'; + +//assets +import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone'; + +const homeBreadcrumb = { title: 'Home', url: APP_DEFAULT_PATH, icon: HomeTwoToneIcon }; +const flexStyle = { display: 'flex', alignItems: 'center', gap: 0.5 }; + +// ==============================|| BREADCRUMBS ||============================== // + +export default function Breadcrumbs({ data, divider = true, title, icons = false, sx, ...rest }) { + const location = useLocation(); + + const [breadcrumbItems, setBreadcrumbItems] = useState([]); + const [activeItem, setActiveItem] = useState(); + + useEffect(() => { + if (data?.length) { + dataHandler(data); + } else { + for (const menu of menuItems?.items ?? []) { + if (menu.type && menu.type === 'group') { + const matchedParents = findParentElements(menu.children || [], location.pathname); + dataHandler(matchedParents || []); + if (matchedParents) break; + } + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data, location]); + + const dataHandler = (data) => { + const filtered = data; + // display breadcrumbs if breadcrumbs is set to false + // const filtered = data.filter((item) => item.breadcrumbs !== false); + const active = filtered.at(-1); + const linkItems = filtered.slice(0, -1); + if (active && active.url != homeBreadcrumb.url) { + const home = { ...homeBreadcrumb }; + linkItems.unshift(home); + } + setActiveItem(active); + setBreadcrumbItems(linkItems); + }; + + function findParentElements(navItems, targetUrl, parents = []) { + for (const item of navItems) { + // Add the current item to the parents array + const newParents = [...parents, item]; + + // Check if the current item matches the target URL + if (item.url && item.url === targetUrl && targetUrl.includes(item.url)) { + return newParents; // Return the array of parent elements + } + + // If the item has children, recurse into them + if (item.children) { + const result = findParentElements(item.children, targetUrl, newParents); + if (result) { + return result; // Return the result if found in children + } + } + } + + return null; // Return null if no match is found + } + + if (!activeItem || activeItem.breadcrumbs === false) { + return null; + } + + function CoreBreadcrumb() { + return ( + + + {breadcrumbItems.length && + breadcrumbItems.map((item, index) => ( + + {icons && item.icon && } {item.title} + + ))} + {activeItem && ( + + {icons && activeItem.icon && } + {activeItem.title} + + )} + + + + {title || activeItem?.title} + + + ); + } + + return ( + + + {divider && } + + ); +} + +Breadcrumbs.propTypes = { + data: PropTypes.array, + divider: PropTypes.bool, + title: PropTypes.string, + icons: PropTypes.bool, + sx: PropTypes.any, + rest: PropTypes.any +}; diff --git a/src/components/Loadable.jsx b/src/components/Loadable.jsx new file mode 100644 index 0000000..6ac3e18 --- /dev/null +++ b/src/components/Loadable.jsx @@ -0,0 +1,20 @@ +import { Suspense } from 'react'; + +// project imports +import Loader from './loader'; + +// ==============================|| LOADABLE - LAZY LOADING ||============================== // + +/** + * Higher-order component for lazy loading with suspense. + * + * @param Component - The component to be lazily loaded. + * @returns A wrapped component with suspense fallback. + */ +export default function Loadable(Component) { + return (props) => ( + }> + + + ); +} diff --git a/src/components/cards/MainCard.jsx b/src/components/cards/MainCard.jsx new file mode 100644 index 0000000..8c5e2b7 --- /dev/null +++ b/src/components/cards/MainCard.jsx @@ -0,0 +1,116 @@ +import PropTypes from 'prop-types'; +import { useMemo } from 'react'; + +// material-ui +import { useTheme } from '@mui/material/styles'; +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import CardHeader from '@mui/material/CardHeader'; +import Divider from '@mui/material/Divider'; + +// project imports +import { CardVariant } from 'enum'; + +function MainCard({ + title, + content = true, + actions, + headerAction, + headerDivider = true, + headerSX = {}, + actionsDivider = true, + contentSX = {}, + cardActionsSX = {}, + children, + variant = { type: CardVariant.DEFAULT }, + sx = {}, + ref, + ...others +}) { + const theme = useTheme(); + + const cardColors = useMemo( + () => ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, + error: theme.palette.error.main, + warning: theme.palette.warning.main, + info: theme.palette.info.main, + success: theme.palette.success.main + }), + [theme] + ); + + function CardDivider() { + return ( + + ); + } + + return ( + + {title && ( + <> + + {headerDivider && } + + )} + + {/* card content */} + {content ? {children} : children} + + {/* card actions */} + {actions && ( + <> + {actionsDivider && } + {actions} + + )} + + ); +} + +export default MainCard; + +MainCard.propTypes = { + title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), + content: PropTypes.bool, + actions: PropTypes.node, + headerAction: PropTypes.any, + headerDivider: PropTypes.bool, + headerSX: PropTypes.object, + actionsDivider: PropTypes.bool, + contentSX: PropTypes.object, + cardActionsSX: PropTypes.object, + children: PropTypes.any, + variant: PropTypes.object, + sx: PropTypes.object, + ref: PropTypes.object, + others: PropTypes.any +}; diff --git a/src/components/cards/ReportCard.jsx b/src/components/cards/ReportCard.jsx new file mode 100644 index 0000000..f6add1e --- /dev/null +++ b/src/components/cards/ReportCard.jsx @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; + +// material-ui +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +// project imports +import MainCard from './MainCard'; + +// ==============================|| REPORT CARD ||============================== // + +export default function ReportCard({ counter, title, iconPrimary: IconPrimary, footerData, color, iconFooter: IconFooter, coloredIcon }) { + return ( + + {footerData} + {IconFooter && } + + } + actionsDivider={false} + cardActionsSX={{ bgcolor: color, py: 1.5 }} + > + + + + {counter} + + {title} + + {IconPrimary && } + + + ); +} + +ReportCard.propTypes = { + counter: PropTypes.string, + title: PropTypes.string, + iconPrimary: PropTypes.any, + footerData: PropTypes.string, + color: PropTypes.string, + iconFooter: PropTypes.any, + coloredIcon: PropTypes.bool +}; diff --git a/src/components/cards/SmallFlatCard.jsx b/src/components/cards/SmallFlatCard.jsx new file mode 100644 index 0000000..4fcc9ef --- /dev/null +++ b/src/components/cards/SmallFlatCard.jsx @@ -0,0 +1,62 @@ +import PropTypes from 'prop-types'; + +// material-ui +import Grid from '@mui/material/Grid'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +// project imports +import MainCard from './MainCard'; + +// ==============================|| FLAT CARD ||============================== // + +export default function SmallFlatCard({ items }) { + return ( + + { + const cols = { xs: 1, sm: 3, lg: 6 }; // Number of columns per row at each breakpoint + return { + alignItems: 'center', + '& > *': { borderLeft: 1, borderBottom: 1, borderColor: 'divider' }, + // Remove left border for the first item in each row + [`& > *:nth-of-type(${cols.xs}n + 1)`]: { + [theme.breakpoints.down('sm')]: { borderLeft: 'none' } + }, + [`& > *:nth-of-type(${cols.sm}n + 1)`]: { + [theme.breakpoints.between('sm', 'lg')]: { borderLeft: 'none' } + }, + [`& > *:nth-of-type(${cols.lg}n + 1)`]: { + [theme.breakpoints.up('lg')]: { borderLeft: 'none' } + }, + // Remove bottom border for last row + [`& > *:nth-last-of-type(-n+${cols.xs})`]: { + [theme.breakpoints.down('sm')]: { borderBottom: 'none' } + }, + [`& > *:nth-last-of-type(-n+${cols.sm})`]: { + [theme.breakpoints.between('sm', 'lg')]: { borderBottom: 'none' } + }, + [`& > *:nth-last-of-type(-n+${cols.lg})`]: { + [theme.breakpoints.up('lg')]: { borderBottom: 'none' } + } + }; + }} + > + {items.map((item, index) => ( + + + {item.label} + + {item.value} + + + + ))} + + + ); +} + +SmallFlatCard.propTypes = { items: PropTypes.object }; diff --git a/src/components/cards/TrafficSourceCard.jsx b/src/components/cards/TrafficSourceCard.jsx new file mode 100644 index 0000000..92bf556 --- /dev/null +++ b/src/components/cards/TrafficSourceCard.jsx @@ -0,0 +1,33 @@ +import PropTypes from 'prop-types'; +// material-ui +import LinearProgress from '@mui/material/LinearProgress'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +// project imports +import { GRID_SPACING } from 'config'; +import MainCard from './MainCard'; + +// ==============================|| TRAFFIC SOURCE CARD ||============================== // + +export default function TrafficSourceCard({ cardTitle, items }) { + return ( + + + {items.map((item, index) => ( + + + {item.label} + + {item.percentage}% + + + + + ))} + + + ); +} + +TrafficSourceCard.propTypes = { cardTitle: PropTypes.string, items: PropTypes.object }; diff --git a/src/components/loader/index.jsx b/src/components/loader/index.jsx new file mode 100644 index 0000000..6838d55 --- /dev/null +++ b/src/components/loader/index.jsx @@ -0,0 +1,13 @@ +// material-ui +import LinearProgress from '@mui/material/LinearProgress'; +import Box from '@mui/material/Box'; + +// ==============================|| LOADER ||============================== // + +export default function Loader() { + return ( + + + + ); +} diff --git a/src/components/third-party/RevenuChartCard.jsx b/src/components/third-party/RevenuChartCard.jsx new file mode 100644 index 0000000..a40f2db --- /dev/null +++ b/src/components/third-party/RevenuChartCard.jsx @@ -0,0 +1,77 @@ +import PropTypes from 'prop-types'; +import { useEffect, useState } from 'react'; + +// material-ui +import { useTheme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import Divider from '@mui/material/Divider'; +import Grid from '@mui/material/Grid'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +// third party +import ReactApexChart from 'react-apexcharts'; + +// project imports +import MainCard from 'components/cards/MainCard'; + +// ==============================|| REVENUE CHART CARD ||============================== // + +export default function RevenuChartCard({ title, bottomData, chartData }) { + const theme = useTheme(); + + const onlySM = useMediaQuery(theme.breakpoints.only('sm')); + + const [chartDatas, setChartDatas] = useState(chartData); + + const primaryMain = theme.palette.primary.main; + const infoMain = theme.palette.info.main; + const errorMain = theme.palette.error.main; + const divider = theme.palette.background.paper; + + useEffect(() => { + setChartDatas((prevState) => ({ + ...prevState, + options: { + ...prevState.options, + tooltip: { + theme: 'light' + }, + theme: { + mode: 'light' + }, + colors: [errorMain, primaryMain, infoMain], + stroke: { + colors: divider + } + } + })); + }, [errorMain, primaryMain, infoMain, divider]); + + return ( + + + + + + + + + + + {bottomData?.map((data, index) => ( + + {data.label} + + {data.value}% + + + ))} + + + + + ); +} + +RevenuChartCard.propTypes = { title: PropTypes.string, bottomData: PropTypes.object, chartData: PropTypes.any }; diff --git a/src/components/third-party/SalesLineChartCard.jsx b/src/components/third-party/SalesLineChartCard.jsx new file mode 100644 index 0000000..9a889fe --- /dev/null +++ b/src/components/third-party/SalesLineChartCard.jsx @@ -0,0 +1,78 @@ +import PropTypes from 'prop-types'; +import { useEffect, useState } from 'react'; + +// material-ui +import { useTheme } from '@mui/material/styles'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; + +// third party +import ReactApexChart from 'react-apexcharts'; + +// project imports +import MainCard from 'components/cards/MainCard'; + +// ==============================|| SALES LINE CHART CARD ||============================== // + +export default function SalesLineChartCard({ bgColor, chartData, footerData, icon: Icon, title, percentage }) { + const theme = useTheme(); + + const [chartDatas, setChartDatas] = useState(chartData); + const chartColor = theme.palette.common.white; + + useEffect(() => { + setChartDatas((prevState) => ({ + ...prevState, + options: { + ...prevState.options, + tooltip: { + theme: 'light' + }, + colors: [chartColor] + } + })); + }, [chartColor]); + + return ( + + {footerData.map((data, index) => ( + + {data.value} + {data.label} + + ))} + + } + > + + + + + {title} + + + {Icon && } + + {percentage} + + + + + + + + ); +} + +SalesLineChartCard.propTypes = { + bgColor: PropTypes.string, + chartData: PropTypes.any, + footerData: PropTypes.object, + icon: PropTypes.any, + title: PropTypes.string, + percentage: PropTypes.string +}; diff --git a/src/components/third-party/SimpleBar.jsx b/src/components/third-party/SimpleBar.jsx new file mode 100644 index 0000000..b9a125b --- /dev/null +++ b/src/components/third-party/SimpleBar.jsx @@ -0,0 +1,62 @@ +import PropTypes from 'prop-types'; + +// material-ui +import { alpha, styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; + +// third party +import SimpleBar from 'simplebar-react'; +import { BrowserView, MobileView } from 'react-device-detect'; + +// root style +const RootStyle = styled(BrowserView)({ + flexGrow: 1, + height: '100%', + overflow: 'hidden' +}); + +// scroll bar wrapper +const SimpleBarStyle = styled(SimpleBar)(({ theme }) => ({ + maxHeight: '100%', + '& .simplebar-scrollbar': { + '&:before': { + background: alpha(theme.palette.grey[500], 0.48) + }, + '&.simplebar-visible:before': { + opacity: 1 + } + }, + '& .simplebar-track': { + zIndex: 1201, + '&.simplebar-vertical': { + width: 10 + } + }, + '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': { + height: 6 + }, + '& .simplebar-mask': { + zIndex: 'inherit' + } +})); + +// ==============================|| SIMPLE SCROLL BAR ||============================== // + +export default function SimpleBarScroll({ children, sx, ...other }) { + return ( + <> + + + {children} + + + + + {children} + + + + ); +} + +SimpleBarScroll.propTypes = { children: PropTypes.any, sx: PropTypes.any, other: PropTypes.any }; diff --git a/src/config.js b/src/config.js index 6c31719..5de00bf 100644 --- a/src/config.js +++ b/src/config.js @@ -1,38 +1,5 @@ -// ==============================|| THEME CONSTANT ||============================== // - -export const gridSpacing = 3; -export const drawerWidth = 280; - -// ==============================|| THEME CONFIG ||============================== // - -const config = { - /** - * the props used for default theme palette mode - * explore the default theme - * below theme options - - * 'light' (default) - * 'dark' - */ - theme: 'light', - - /** - * the props used for default theme direction - * explore the default theme - * below theme options - - * 'false' (default) - * 'true' - */ - rtlLayout: false, - - /** - * The props used for display menu-items with multi-language. - * We provide static below languages according to 'react-intl' options - https://www.npmjs.com/package/react-intl - * 'en' (default) - * 'fr' - * 'ro' - * 'zh' - */ - i18n: 'en' -}; - -export default config; +// ==============================|| THEME CONSTANT ||============================== // + +export const APP_DEFAULT_PATH = 'dashboard/default'; +export const GRID_SPACING = 3; +export const DRAWER_WIDTH = 280; diff --git a/src/enum.js b/src/enum.js new file mode 100644 index 0000000..270eac7 --- /dev/null +++ b/src/enum.js @@ -0,0 +1,20 @@ +/** Avatar custom props `size` enum */ +export let AvatarSize; + +(function (AvatarSize) { + AvatarSize['BADGE'] = 'badge'; + AvatarSize['XS'] = 'xs'; + AvatarSize['SM'] = 'sm'; + AvatarSize['MD'] = 'md'; + AvatarSize['LG'] = 'lg'; + AvatarSize['XL'] = 'xl'; +})(AvatarSize || (AvatarSize = {})); + +/** Main Card type enum */ +export let CardVariant; + +(function (CardVariant) { + CardVariant['DEFAULT'] = 'default'; + CardVariant['FILLED'] = 'filled'; + CardVariant['OUTLINED'] = 'outlined'; +})(CardVariant || (CardVariant = {})); diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..9a1fbb8 --- /dev/null +++ b/src/index.css @@ -0,0 +1,31 @@ +/* simpebar styles */ +@import 'simplebar-react/dist/simplebar.min.css'; + +@import 'simplebar-react/dist/simplebar.min.css'; + +/* apex chart styles */ +.apexcharts-legend-marker { + margin-right: 8px !important; +} + +.apexcharts-legend-text { + padding-right: 4px; +} + +.apexcharts-canvas .apexcharts-svg { + background: transparent !important; +} + +/* If .apexcharts-tooltip-title is missing */ +.apexcharts-tooltip:not(:has(.apexcharts-tooltip-title)) > .apexcharts-active { + padding-bottom: 0; +} + +/* If .apexcharts-tooltip-title is present but empty */ +.apexcharts-tooltip:has(.apexcharts-tooltip-title:empty) > .apexcharts-active { + padding-bottom: 0; +} + +.apexcharts-tooltip-text-y-label:empty + .apexcharts-tooltip-text-y-value { + margin-left: 0; +} diff --git a/src/index.jsx b/src/index.jsx deleted file mode 100644 index b07af29..0000000 --- a/src/index.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import { BrowserRouter } from 'react-router-dom'; - -// assets -import 'assets/scss/style.scss'; - -// third party -import { configureStore } from '@reduxjs/toolkit'; -import { Provider } from 'react-redux'; - -// project import -import App from 'layout/App'; -import reducer from 'store/reducer'; -import * as serviceWorker from 'serviceWorker'; - -const store = configureStore({ reducer }); - -const root = createRoot(document.getElementById('root')); - -// ==============================|| MAIN - REACT DOM RENDER ||============== - -root.render( - - - - - -); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); diff --git a/src/layout/App.jsx b/src/layout/App.jsx deleted file mode 100644 index 641a320..0000000 --- a/src/layout/App.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -// material-ui -import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; - -// third-party -import { useSelector } from 'react-redux'; - -// project import -import theme from 'themes'; -import Routes from 'routes/index'; -import NavigationScroll from './NavigationScroll'; - -// ==============================|| APP ||============================== // - -const App = () => { - const customization = useSelector((state) => state.customization); - - return ( - <> - { - - - - - - - - - } - - ); -}; - -export default App; diff --git a/src/layout/MainLayout/Header/MobileSection/index.jsx b/src/layout/MainLayout/Header/MobileSection/index.jsx deleted file mode 100644 index db47055..0000000 --- a/src/layout/MainLayout/Header/MobileSection/index.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { useMediaQuery, AppBar, ClickAwayListener, IconButton, Grow, Paper, Popper, Toolbar, Grid, Box } from '@mui/material'; - -// project import -import SearchSection from '../SearchSection'; -import NotificationSection from '../NotificationSection'; -import ProfileSection from '../ProfileSection'; - -// assets -import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone'; - -// ==============================|| MOBILE SECTION ||============================== // - -const MobileSection = () => { - const theme = useTheme(); - const matchMobile = useMediaQuery(theme.breakpoints.down('mobile')); - - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); - - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; - - const handleClose = (event) => { - if (anchorRef.current && anchorRef.current.contains(event.target)) { - return; - } - - setOpen(false); - }; - - const prevOpen = React.useRef(open); - React.useEffect(() => { - if (prevOpen.current === true && open === false) { - anchorRef.current.focus(); - } - - prevOpen.current = open; - }, [open]); - - return ( - <> - - - - - {({ TransitionProps }) => ( - - - - - - - - - - - - - - - - - - )} - - - ); -}; - -export default MobileSection; diff --git a/src/layout/MainLayout/Header/NotificationSection/index.jsx b/src/layout/MainLayout/Header/NotificationSection/index.jsx deleted file mode 100644 index 616be8a..0000000 --- a/src/layout/MainLayout/Header/NotificationSection/index.jsx +++ /dev/null @@ -1,238 +0,0 @@ -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { - Button, - Chip, - ClickAwayListener, - Fade, - Grid, - Paper, - Popper, - Avatar, - List, - ListItemAvatar, - ListItemText, - ListSubheader, - ListItemSecondaryAction, - Typography, - ListItemButton -} from '@mui/material'; - -// third party -import PerfectScrollbar from 'react-perfect-scrollbar'; - -// assets -import QueryBuilderTwoToneIcon from '@mui/icons-material/QueryBuilderTwoTone'; -import NotificationsNoneTwoToneIcon from '@mui/icons-material/NotificationsNoneTwoTone'; - -import User1 from 'assets/images/users/avatar-1.jpg'; -import User2 from 'assets/images/users/avatar-2.jpg'; -import User3 from 'assets/images/users/avatar-3.jpg'; -import User4 from 'assets/images/users/avatar-4.jpg'; - -// ==============================|| NOTIFICATION ||============================== // - -const NotificationSection = () => { - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); - - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; - - const handleClose = (event) => { - if (anchorRef.current && anchorRef.current.contains(event.target)) { - return; - } - setOpen(false); - }; - - const prevOpen = React.useRef(open); - React.useEffect(() => { - if (prevOpen.current === true && open === false) { - anchorRef.current.focus(); - } - prevOpen.current = open; - }, [open]); - - return ( - <> - - - {({ TransitionProps }) => ( - - - - - - - - - - - - - John Doe} - secondary={New ticket Added} - /> - - - - - - - - now - - - - - - - - - - - - - Joseph William} - secondary={Purchase a new product} - /> - - - - - - - - 10 min - - - - - - - - - - Sara Soudein} - secondary={Currently Login} - /> - - - - - - - - 12 min - - - - - - - - - - Sepha Wilon} - secondary={Purchase a new product} - /> - - - - - - - - 30 min - - - - - - - - - - - )} - - - ); -}; - -export default NotificationSection; diff --git a/src/layout/MainLayout/Header/ProfileSection/index.jsx b/src/layout/MainLayout/Header/ProfileSection/index.jsx deleted file mode 100644 index 3b6ca13..0000000 --- a/src/layout/MainLayout/Header/ProfileSection/index.jsx +++ /dev/null @@ -1,138 +0,0 @@ -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { Fade, Button, ClickAwayListener, Paper, Popper, List, ListItemText, ListItemIcon, ListItemButton } from '@mui/material'; - -// assets -import PersonTwoToneIcon from '@mui/icons-material/PersonTwoTone'; -import DraftsTwoToneIcon from '@mui/icons-material/DraftsTwoTone'; -import LockOpenTwoTone from '@mui/icons-material/LockOpenTwoTone'; -import SettingsTwoToneIcon from '@mui/icons-material/SettingsTwoTone'; -import AccountCircleTwoToneIcon from '@mui/icons-material/AccountCircleTwoTone'; -import MeetingRoomTwoToneIcon from '@mui/icons-material/MeetingRoomTwoTone'; - -// ==============================|| PROFILE SECTION ||============================== // - -const ProfileSection = () => { - const theme = useTheme(); - - const [selectedIndex, setSelectedIndex] = React.useState(1); - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); - - const handleListItemClick = (event, index) => { - setSelectedIndex(index); - }; - - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; - - const handleClose = (event) => { - if (anchorRef.current && anchorRef.current.contains(event.target)) { - return; - } - - setOpen(false); - }; - - const prevOpen = React.useRef(open); - React.useEffect(() => { - if (prevOpen.current === true && open === false) { - anchorRef.current.focus(); - } - - prevOpen.current = open; - }, [open]); - - return ( - <> - - - {({ TransitionProps }) => ( - - - - - handleListItemClick(event, 0)}> - - - - - - handleListItemClick(event, 1)}> - - - - - - handleListItemClick(event, 2)}> - - - - - - handleListItemClick(event, 3)}> - - - - - - - - - - - - - - - - )} - - - ); -}; - -export default ProfileSection; diff --git a/src/layout/MainLayout/Header/SearchSection/index.jsx b/src/layout/MainLayout/Header/SearchSection/index.jsx deleted file mode 100644 index a4c5627..0000000 --- a/src/layout/MainLayout/Header/SearchSection/index.jsx +++ /dev/null @@ -1,177 +0,0 @@ -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { alpha, Box, Button, InputBase, Popper, Fade, Card, CardContent, Grid } from '@mui/material'; -import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state'; - -// assets -import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone'; -import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone'; - -// ==============================|| SEARCH SECTION ||============================== // - -const SearchSection = () => { - const theme = useTheme(); - - return ( - - - - {(popupState) => ( - <> - - - {({ TransitionProps }) => ( - - - - - - - - - - - - - - - - - - - - )} - - - )} - - - - - - - - - - ); -}; - -export default SearchSection; diff --git a/src/layout/MainLayout/Header/index.jsx b/src/layout/MainLayout/Header/index.jsx deleted file mode 100644 index 3466467..0000000 --- a/src/layout/MainLayout/Header/index.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { Box, Grid, IconButton } from '@mui/material'; - -// project import -import SearchSection from './SearchSection'; -import ProfileSection from './ProfileSection'; -import NotificationSection from './NotificationSection'; -import { drawerWidth } from 'config.js'; - -// assets -import MenuTwoToneIcon from '@mui/icons-material/MenuTwoTone'; -import logo from 'assets/images/logo.svg'; - -// ==============================|| HEADER ||============================== // - -const Header = ({ drawerToggle }) => { - const theme = useTheme(); - - return ( - <> - - - - - - Logo - - - - - - - - - - - - - - - - ); -}; - -Header.propTypes = { - drawerToggle: PropTypes.func -}; - -export default Header; diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavCard.jsx b/src/layout/MainLayout/Sidebar/MenuList/NavCard.jsx deleted file mode 100644 index 0ac111c..0000000 --- a/src/layout/MainLayout/Sidebar/MenuList/NavCard.jsx +++ /dev/null @@ -1,37 +0,0 @@ -// material-ui -import { Button, Card, CardMedia, CardContent, Link, Stack, Typography } from '@mui/material'; - -// assets -import avatar from 'assets/images/sidebar.png'; - -// ==============================|| DRAWER CONTENT - NAVIGATION CARD ||============================== // - -const NavCard = () => { - return ( - - - - - - Materially Pro - - Checkout Materially Premium Features - - - - - - - ); -}; - -export default NavCard; diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.jsx b/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.jsx deleted file mode 100644 index 9fe6bd9..0000000 --- a/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.jsx +++ /dev/null @@ -1,93 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { Typography, ListItemIcon, ListItemText, Collapse, List, ListItemButton } from '@mui/material'; - -// project import -import NavItem from '../NavItem'; - -// assets -import ExpandLess from '@mui/icons-material/ExpandLess'; -import ExpandMore from '@mui/icons-material/ExpandMore'; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; - -// ==============================|| NAV COLLAPSE ||============================== // - -const NavCollapse = ({ menu, level }) => { - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - const [selected, setSelected] = React.useState(null); - - const handleClick = () => { - setOpen(!open); - setSelected(!selected ? menu.id : null); - }; - - const menus = menu.children.map((item) => { - switch (item.type) { - case 'collapse': - return ; - case 'item': - return ; - default: - return ( - - Menu Items Error - - ); - } - }); - - const Icon = menu.icon; - const menuIcon = menu.icon ? : 0 ? 'inherit' : 'default'} />; - - return ( - <> - 1 && { backgroundColor: 'transparent !important', py: 1, borderRadius: '5px' }) - }} - selected={selected === menu.id} - onClick={handleClick} - > - {menuIcon} - - {menu.title} - - } - secondary={ - menu.caption && ( - - {menu.caption} - - ) - } - /> - {open ? : } - - - - {menus} - - - - ); -}; - -NavCollapse.propTypes = { - menu: PropTypes.object, - level: PropTypes.number, - title: PropTypes.string, - icon: PropTypes.string, - id: PropTypes.string, - children: PropTypes.string -}; - -export default NavCollapse; diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.jsx b/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.jsx deleted file mode 100644 index 10e4cf9..0000000 --- a/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { List, Typography } from '@mui/material'; - -// project import -import NavItem from '../NavItem'; -import NavCollapse from '../NavCollapse'; - -// ==============================|| NAVGROUP ||============================== // - -const NavGroup = ({ item }) => { - const theme = useTheme(); - const items = item.children.map((menu) => { - switch (menu.type) { - case 'collapse': - return ; - case 'item': - return ; - default: - return ( - - Menu Items Error - - ); - } - }); - - return ( - - {item.title} - {item.caption && ( - - {item.caption} - - )} - - } - > - {items} - - ); -}; - -NavGroup.propTypes = { - item: PropTypes.object, - children: PropTypes.object, - title: PropTypes.string, - caption: PropTypes.string -}; - -export default NavGroup; diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx b/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx deleted file mode 100644 index b09003f..0000000 --- a/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Link } from 'react-router-dom'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'; - -// third party -import { useSelector, useDispatch } from 'react-redux'; - -// project import -import * as actionTypes from 'store/actions'; - -// assets -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; - -// ==============================|| NAV ITEM ||============================== // - -const NavItem = ({ item, level }) => { - const theme = useTheme(); - const customization = useSelector((state) => state.customization); - const dispatch = useDispatch(); - const Icon = item.icon; - const itemIcon = item.icon ? : 0 ? 'inherit' : 'default'} />; - - let itemTarget = ''; - if (item.target) { - itemTarget = '_blank'; - } - let listItemProps = { component: Link, to: item.url }; - if (item.external) { - listItemProps = { component: 'a', href: item.url }; - } - - return ( - 1 && { backgroundColor: 'transparent !important', py: 1, borderRadius: '5px' }), - borderRadius: '5px', - marginBottom: '5px', - pl: `${level * 16}px` - }} - selected={customization.isOpen === item.id} - component={Link} - onClick={() => dispatch({ type: actionTypes.MENU_OPEN, isOpen: item.id })} - to={item.url} - target={itemTarget} - {...listItemProps} - > - {itemIcon} - - {item.title} - - } - secondary={ - item.caption && ( - - {item.caption} - - ) - } - /> - {item.chip && ( - {item.chip.avatar}} - /> - )} - - ); -}; - -NavItem.propTypes = { - item: PropTypes.object, - level: PropTypes.number, - icon: PropTypes.object, - target: PropTypes.object, - url: PropTypes.string, - disabled: PropTypes.bool, - id: PropTypes.string, - title: PropTypes.string, - caption: PropTypes.string, - chip: PropTypes.object, - color: PropTypes.string, - label: PropTypes.string, - avatar: PropTypes.object -}; - -export default NavItem; diff --git a/src/layout/MainLayout/Sidebar/MenuList/index.jsx b/src/layout/MainLayout/Sidebar/MenuList/index.jsx deleted file mode 100644 index 8d1f244..0000000 --- a/src/layout/MainLayout/Sidebar/MenuList/index.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -// material-ui -import { Typography } from '@mui/material'; - -// project import -import NavGroup from './NavGroup'; -import menuItem from 'menu-items'; - -// ==============================|| MENULIST ||============================== // - -const MenuList = () => { - const navItems = menuItem.items.map((item) => { - switch (item.type) { - case 'group': - return ; - default: - return ( - - Menu Items Error - - ); - } - }); - - return navItems; -}; - -export default MenuList; diff --git a/src/layout/MainLayout/Sidebar/index.jsx b/src/layout/MainLayout/Sidebar/index.jsx deleted file mode 100644 index 41d673b..0000000 --- a/src/layout/MainLayout/Sidebar/index.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; - -// material-ui -import { useTheme, styled } from '@mui/material/styles'; -import { useMediaQuery, Divider, Drawer, Grid, Box } from '@mui/material'; - -// third party -import PerfectScrollbar from 'react-perfect-scrollbar'; - -// project import -import MenuList from './MenuList'; -import { drawerWidth } from 'config.js'; -import NavCard from './MenuList/NavCard'; - -// assets -import logo from 'assets/images/logo.svg'; - -// custom style -const Nav = styled((props) =>